Skip to content
This repository was archived by the owner on Jan 15, 2025. It is now read-only.

Commit 23decc6

Browse files
thevuongthevuong
committed
Update color scheme and add data-test-id for testing
The color scheme has been updated on several UI components to improve visibility. Furthermore, "data-test-id" attributes have been added to improve compatibility with testing frameworks. Changes have also been made on the disabled state of button components to enhance interaction.
1 parent d49bc9c commit 23decc6

23 files changed

+284
-104
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,11 +200,11 @@ module.exports = {
200200
In `tailwind.config.ts`
201201

202202
```diff
203-
+ import { sharedConfig, stone } from '@codefixlabs/tailwindcss';
203+
+ import { sharedConfig, slate } from '@codefixlabs/tailwindcss';
204204
import type { Config } from 'tailwindcss'
205205

206206
const config: Pick<Config, 'presets' | 'theme' | 'plugins'> = {
207-
+ plugins: [stone],
207+
+ plugins: [slate],
208208
+ presets: [sharedConfig],
209209
- content: [
210210
- "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",

‎apps/docs/src/stories/data-table/data-table.stories.tsx

Lines changed: 51 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,8 @@ import type { Meta, StoryObj } from '@storybook/react';
1515
import { MoreHorizontalIcon } from 'lucide-react';
1616
import type { ColumnDef } from '@tanstack/react-table';
1717

18-
const meta: Meta<typeof DataTable> = {
19-
component: DataTable,
20-
tags: ['autodocs'],
21-
title: 'UI/Data Table',
22-
};
23-
24-
export default meta;
25-
26-
type Story = StoryObj<typeof DataTable>;
27-
2818
/* -----------------------------------------------------------------------------
29-
* Story: Basic
19+
* Prepare
3020
* -------------------------------------------------------------------------- */
3121

3222
const formatter = new Intl.NumberFormat('en-US', {
@@ -155,34 +145,72 @@ const data: Payment[] = Array.from({ length: 200 }, () => ({
155145
]),
156146
}));
157147

148+
const meta: Meta<typeof DataTable<Payment>> = {
149+
component: DataTable,
150+
tags: ['autodocs'],
151+
title: 'UI/Data Table',
152+
args: {
153+
columns,
154+
data,
155+
},
156+
};
157+
158+
export default meta;
159+
160+
type Story = StoryObj<typeof DataTable>;
161+
162+
/* -----------------------------------------------------------------------------
163+
* Story: Basic
164+
* -------------------------------------------------------------------------- */
165+
158166
export const Basic: Story = {
159-
render: () => <DataTable columns={columns} data={data} />,
167+
render: (args) => (
168+
<DataTable
169+
{...args}
170+
classNames={{
171+
header: 'border-b border-slate-200',
172+
body: 'divide-y divide-slate-200',
173+
}}
174+
/>
175+
),
160176
};
161177

162178
export const StickyHeader: Story = {
163-
render: () => (
179+
render: (args) => (
164180
<DataTable
165181
classNames={{
166-
root: 'h-[21.875rem]',
167-
header: 'sticky top-0 z-20',
168-
headerRow: 'bg-neutral-100 shadow',
169-
row: '*:first:border-t-transparent',
182+
root: 'h-96',
183+
header:
184+
'sticky top-0 z-20 border-b border-slate-200 shadow shadow-slate-200',
185+
body: 'divide-y divide-slate-200',
170186
}}
171-
columns={columns}
172-
data={data}
187+
{...args}
173188
/>
174189
),
175190
};
176191

177192
export const WithFooter: Story = {
178-
render: () => <DataTable columns={columns} data={data} showFooter />,
193+
render: (args) => (
194+
<DataTable
195+
{...args}
196+
classNames={{
197+
header: 'border-b border-slate-200',
198+
body: 'divide-y divide-slate-200',
199+
footer: 'border-t border-slate-200',
200+
}}
201+
showFooter
202+
/>
203+
),
179204
};
180205

181206
export const CustomToolbar: Story = {
182-
render: () => (
207+
render: (args) => (
183208
<DataTable
184-
columns={columns}
185-
data={data}
209+
{...args}
210+
classNames={{
211+
header: 'border-b border-slate-200',
212+
body: 'divide-y divide-slate-200',
213+
}}
186214
endToolbar={(table) => <div>World {table.getPageCount()}</div>}
187215
startToolbar={<div>Hello</div>}
188216
/>

‎apps/docs/src/stories/navigation-menu/navigation-menu.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ const ListItem: ForwardRefExoticComponent<
4747
<Link
4848
ref={forwardedRef}
4949
{...props}
50-
className="focus:ring-primary block select-none rounded-md p-3 text-base no-underline outline-none transition-colors hover:bg-neutral-200 focus:ring-2"
50+
className="focus:ring-primary block select-none rounded-md p-3 text-base no-underline outline-none transition-colors hover:bg-slate-200 focus:ring-2"
5151
>
5252
<div className="text-primary mb-1.25 font-medium">{title}</div>
53-
<p className="text-neutral-950/80">{children}</p>
53+
<p className="text-slate-950/80">{children}</p>
5454
</Link>
5555
</NavigationMenuLink>
5656
</li>
@@ -89,7 +89,7 @@ export const Basic: Story = {
8989
<div className="mb-1.75 mt-4 text-lg font-medium text-white">
9090
Radix Primitives
9191
</div>
92-
<p className="text-sm text-neutral-300">
92+
<p className="text-sm text-slate-300">
9393
Unstyled, accessible components for React.
9494
</p>
9595
</Link>

‎apps/docs/src/stories/table/table.stories.tsx

Lines changed: 67 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ const meta: Meta<typeof Table> = {
1515
component: Table,
1616
tags: ['autodocs'],
1717
title: 'UI/Table',
18+
args: {
19+
className: 'border-collapse border border-slate-400',
20+
},
1821
};
1922

2023
export default meta;
@@ -74,21 +77,33 @@ export const Basic: Story = {
7477
render: (args) => (
7578
<Table {...args}>
7679
<TableCaption>A list of your recent invoices.</TableCaption>
80+
7781
<TableHeader>
7882
<TableRow>
79-
<TableHead>Invoice</TableHead>
80-
<TableHead>Status</TableHead>
81-
<TableHead>Method</TableHead>
82-
<TableHead className="text-right">Amount</TableHead>
83+
<TableHead className="border border-slate-300">Invoice</TableHead>
84+
<TableHead className="border border-slate-300">Status</TableHead>
85+
<TableHead className="border border-slate-300">Method</TableHead>
86+
<TableHead className="border border-slate-300 text-right">
87+
Amount
88+
</TableHead>
8389
</TableRow>
8490
</TableHeader>
91+
8592
<TableBody>
8693
{invoices.map((invoice) => (
8794
<TableRow key={invoice.invoice}>
88-
<TableCell className="font-medium">{invoice.invoice}</TableCell>
89-
<TableCell>{invoice.paymentStatus}</TableCell>
90-
<TableCell>{invoice.paymentMethod}</TableCell>
91-
<TableCell className="text-right">{invoice.totalAmount}</TableCell>
95+
<TableCell className="border border-slate-300 font-medium">
96+
{invoice.invoice}
97+
</TableCell>
98+
<TableCell className="border border-slate-300">
99+
{invoice.paymentStatus}
100+
</TableCell>
101+
<TableCell className="border border-slate-300">
102+
{invoice.paymentMethod}
103+
</TableCell>
104+
<TableCell className="border border-slate-300 text-right">
105+
{invoice.totalAmount}
106+
</TableCell>
92107
</TableRow>
93108
))}
94109
</TableBody>
@@ -100,27 +115,39 @@ export const WithCheckbox: Story = {
100115
render: (args) => (
101116
<Table {...args}>
102117
<TableCaption>A list of your recent invoices.</TableCaption>
118+
103119
<TableHeader>
104120
<TableRow>
105-
<TableHead>
121+
<TableHead className="border border-slate-300">
106122
<Checkbox aria-label="Select all invoices" />
107123
</TableHead>
108-
<TableHead>Invoice</TableHead>
109-
<TableHead>Status</TableHead>
110-
<TableHead>Method</TableHead>
111-
<TableHead className="text-right">Amount</TableHead>
124+
<TableHead className="border border-slate-300">Invoice</TableHead>
125+
<TableHead className="border border-slate-300">Status</TableHead>
126+
<TableHead className="border border-slate-300">Method</TableHead>
127+
<TableHead className="border border-slate-300 text-right">
128+
Amount
129+
</TableHead>
112130
</TableRow>
113131
</TableHeader>
132+
114133
<TableBody>
115134
{invoices.map((invoice) => (
116135
<TableRow key={invoice.invoice}>
117-
<TableCell>
136+
<TableCell className="border border-slate-300">
118137
<Checkbox aria-label={`Select invoice ${invoice.invoice}`} />
119138
</TableCell>
120-
<TableCell className="font-medium">{invoice.invoice}</TableCell>
121-
<TableCell>{invoice.paymentStatus}</TableCell>
122-
<TableCell>{invoice.paymentMethod}</TableCell>
123-
<TableCell className="text-right">{invoice.totalAmount}</TableCell>
139+
<TableCell className="border border-slate-300 font-medium">
140+
{invoice.invoice}
141+
</TableCell>
142+
<TableCell className="border border-slate-300">
143+
{invoice.paymentStatus}
144+
</TableCell>
145+
<TableCell className="border border-slate-300">
146+
{invoice.paymentMethod}
147+
</TableCell>
148+
<TableCell className="border border-slate-300 text-right">
149+
{invoice.totalAmount}
150+
</TableCell>
124151
</TableRow>
125152
))}
126153
</TableBody>
@@ -134,26 +161,38 @@ export const WithFooter: Story = {
134161
<TableCaption>A list of your recent invoices.</TableCaption>
135162
<TableHeader>
136163
<TableRow>
137-
<TableHead>Invoice</TableHead>
138-
<TableHead>Status</TableHead>
139-
<TableHead>Method</TableHead>
140-
<TableHead className="text-right">Amount</TableHead>
164+
<TableHead className="border border-slate-300">Invoice</TableHead>
165+
<TableHead className="border border-slate-300">Status</TableHead>
166+
<TableHead className="border border-slate-300">Method</TableHead>
167+
<TableHead className="border border-slate-300 text-right">
168+
Amount
169+
</TableHead>
141170
</TableRow>
142171
</TableHeader>
143172
<TableBody>
144173
{invoices.map((invoice) => (
145174
<TableRow key={invoice.invoice}>
146-
<TableCell className="font-medium">{invoice.invoice}</TableCell>
147-
<TableCell>{invoice.paymentStatus}</TableCell>
148-
<TableCell>{invoice.paymentMethod}</TableCell>
149-
<TableCell className="text-right">{invoice.totalAmount}</TableCell>
175+
<TableCell className="border border-slate-300 font-medium">
176+
{invoice.invoice}
177+
</TableCell>
178+
<TableCell className="border border-slate-300">
179+
{invoice.paymentStatus}
180+
</TableCell>
181+
<TableCell className="border border-slate-300">
182+
{invoice.paymentMethod}
183+
</TableCell>
184+
<TableCell className="border border-slate-300 text-right">
185+
{invoice.totalAmount}
186+
</TableCell>
150187
</TableRow>
151188
))}
152189
</TableBody>
153190
<TableFooter>
154191
<TableRow>
155-
<TableCell colSpan={3} />
156-
<TableCell className="text-right font-medium">$2,500.00</TableCell>
192+
<TableCell className="border border-slate-300" colSpan={3} />
193+
<TableCell className="border border-slate-300 text-right font-medium">
194+
$2,500.00
195+
</TableCell>
157196
</TableRow>
158197
</TableFooter>
159198
</Table>

‎apps/docs/tailwind.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { sharedConfig, stone } from '@codefixlabs/tailwindcss';
1+
import { sharedConfig, slate } from '@codefixlabs/tailwindcss';
22
import type { Config } from 'tailwindcss';
33

44
const config: Pick<Config, 'presets' | 'plugins'> = {
5-
plugins: [stone],
5+
plugins: [slate],
66
presets: [sharedConfig],
77
};
88

‎packages/tailwindcss/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @codefixlabs/tailwindcss
22

3+
## 0.1.42
4+
5+
### Patch Changes
6+
7+
- Add data-test-id attributes and update component styles
8+
39
## 0.1.41
410

511
### Patch Changes

‎packages/tailwindcss/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@codefixlabs/tailwindcss",
3-
"version": "0.1.41",
3+
"version": "0.1.42",
44
"license": "MIT",
55
"sideEffects": false,
66
"exports": {

‎packages/tailwindcss/src/color/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from '@/color/stone';
2+
export * from '@/color/slate';

0 commit comments

Comments
 (0)