diff --git a/examples/accident-counter/index.html b/examples/accident-counter/index.html index 7c29042..88ded6a 100644 --- a/examples/accident-counter/index.html +++ b/examples/accident-counter/index.html @@ -11,7 +11,7 @@ createRoot(document.getElementById('root')).render(createElement(Counter)); - +
diff --git a/examples/accident-counter/src/counter.test.jsx b/examples/accident-counter/src/counter.test.jsx index 5392d94..09655c7 100644 --- a/examples/accident-counter/src/counter.test.jsx +++ b/examples/accident-counter/src/counter.test.jsx @@ -21,7 +21,7 @@ describe('Counter Component', () => { it('increments the count when the "Increment" button is clicked', async () => { const incrementButton = screen.getByText('Increment'); - await userEvent.click(incrementButton); // Using userEvent for a real click event + await userEvent.click(incrementButton); // Using userEvent for a real click event const countElement = screen.getByTestId('counter-count'); expect(countElement).toHaveTextContent('1'); @@ -29,7 +29,7 @@ describe('Counter Component', () => { it('displays "day" when the count is 1', async () => { const incrementButton = screen.getByText('Increment'); - await userEvent.click(incrementButton); // Increment the count + await userEvent.click(incrementButton); // Increment the count const unitElement = screen.getByTestId('counter-unit'); expect(unitElement).toHaveTextContent('day'); @@ -39,8 +39,8 @@ describe('Counter Component', () => { const incrementButton = screen.getByText('Increment'); const decrementButton = screen.getByText('Decrement'); - await userEvent.click(incrementButton); // Increment first - await userEvent.click(decrementButton); // Then decrement + await userEvent.click(incrementButton); // Increment first + await userEvent.click(decrementButton); // Then decrement const countElement = screen.getByTestId('counter-count'); expect(countElement).toHaveTextContent('0'); @@ -48,7 +48,7 @@ describe('Counter Component', () => { it('does not allow decrementing below 0', async () => { const decrementButton = screen.getByText('Decrement'); - await userEvent.click(decrementButton); // Should not decrement below 0 + await userEvent.click(decrementButton); // Should not decrement below 0 const countElement = screen.getByTestId('counter-count'); expect(countElement).toHaveTextContent('0'); @@ -58,8 +58,8 @@ describe('Counter Component', () => { const incrementButton = screen.getByText('Increment'); const resetButton = screen.getByText('Reset'); - await userEvent.click(incrementButton); // Increment first - await userEvent.click(resetButton); // Then reset + await userEvent.click(incrementButton); // Increment first + await userEvent.click(resetButton); // Then reset const countElement = screen.getByTestId('counter-count'); expect(countElement).toHaveTextContent('0'); @@ -78,8 +78,8 @@ describe('Counter Component', () => { await userEvent.click(incrementButton); expect(document.title).toBe('1 day'); - + await userEvent.click(incrementButton); expect(document.title).toBe('2 days'); }); -}); \ No newline at end of file +}); diff --git a/examples/accident-counter/src/counter.tsx b/examples/accident-counter/src/counter.tsx index 79351e8..2fe75b5 100644 --- a/examples/accident-counter/src/counter.tsx +++ b/examples/accident-counter/src/counter.tsx @@ -10,9 +10,9 @@ export const Counter = () => { }, [state.count]); return ( -
+
-
+
{state.count}

diff --git a/examples/accident-counter/styles.css b/examples/accident-counter/styles.css index bebc2d8..108fee4 100644 --- a/examples/accident-counter/styles.css +++ b/examples/accident-counter/styles.css @@ -8,6 +8,6 @@ } button { - @apply bg-cyan-600 text-white cursor-pointer inline-flex items-center justify-center transition duration-100 ease-in-out px-4 py-2.5 hover:bg-cyan-700 active:bg-cyan-800 rounded-md disabled:bg-slate-200/50 disabled:cursor-not-allowed disabled:text-cyan-600; + @apply inline-flex cursor-pointer items-center justify-center rounded-md bg-cyan-600 px-4 py-2.5 text-white transition duration-100 ease-in-out hover:bg-cyan-700 active:bg-cyan-800 disabled:cursor-not-allowed disabled:bg-slate-200/50 disabled:text-cyan-600; } } diff --git a/examples/calculator/styles.css b/examples/calculator/styles.css index a82e80f..8e51152 100644 --- a/examples/calculator/styles.css +++ b/examples/calculator/styles.css @@ -4,21 +4,21 @@ @layer base { body { - @apply flex justify-center items-center h-screen bg-purple-50 font-sans m-0; + @apply m-0 flex h-screen items-center justify-center bg-purple-50 font-sans; } button { - @apply bg-slate-600 text-white text-xl cursor-pointer flex items-center justify-center transition duration-100 ease-in-out p-4 hover:bg-slate-700 active:bg-slate-800 rounded-xl; + @apply flex cursor-pointer items-center justify-center rounded-xl bg-slate-600 p-4 text-xl text-white transition duration-100 ease-in-out hover:bg-slate-700 active:bg-slate-800; } } @layer components { .calculator { - @apply grid grid-cols-4 gap-2 bg-slate-950 rounded-xl shadow-lg p-4; + @apply grid grid-cols-4 gap-2 rounded-xl bg-slate-950 p-4 shadow-lg; } .number { - @apply bg-slate-600 text-white text-xl cursor-pointer flex items-center justify-center transition duration-100 ease-in-out p-4 hover:bg-slate-700 active:bg-slate-800 rounded-xl; + @apply flex cursor-pointer items-center justify-center rounded-xl bg-slate-600 p-4 text-xl text-white transition duration-100 ease-in-out hover:bg-slate-700 active:bg-slate-800; &[data-value='0'] { @apply col-span-3; } @@ -29,7 +29,7 @@ } #equals { - @apply bg-green-500 hover:bg-green-600 active:bg-green-700 col-start-3 col-span-2; + @apply col-span-2 col-start-3 bg-green-500 hover:bg-green-600 active:bg-green-700; } #clear { @@ -37,6 +37,6 @@ } .display { - @apply col-span-4 bg-cyan-100 text-cyan-800 border-cyan-200 outline outline-2 outline-transparent text-2xl text-right p-4 block font-semibold rounded-md; + @apply col-span-4 block rounded-md border-cyan-200 bg-cyan-100 p-4 text-right text-2xl font-semibold text-cyan-800 outline outline-2 outline-transparent; } } diff --git a/examples/task-list/src/components/application.tsx b/examples/task-list/src/components/application.tsx index 185701a..0597df6 100644 --- a/examples/task-list/src/components/application.tsx +++ b/examples/task-list/src/components/application.tsx @@ -5,7 +5,7 @@ import { Tasks } from './tasks'; export const Application = () => { return ( -

+
console.log(title)} />
diff --git a/examples/task-list/src/components/date-time.tsx b/examples/task-list/src/components/date-time.tsx index 898c706..47ca823 100644 --- a/examples/task-list/src/components/date-time.tsx +++ b/examples/task-list/src/components/date-time.tsx @@ -16,8 +16,8 @@ export const DateTime = ({ }) => { if (typeof date === 'string') date = new Date(date); return ( -
- +
+ {title} {formatDate.format(date)} diff --git a/examples/task-list/src/components/task.tsx b/examples/task-list/src/components/task.tsx index 6273a20..eeada4d 100644 --- a/examples/task-list/src/components/task.tsx +++ b/examples/task-list/src/components/task.tsx @@ -11,7 +11,7 @@ export const Task = memo(({ task }: TaskProps) => { const { updateTask, removeTask } = useTaskActions(); return ( -
  • +
  • -