Merge v1.x: upgrade to Tailwind CSS v4 (#30)

Merge the v1.x branch into main, combining Tailwind CSS v4 upgrade with
features developed on main (pagination, ref forwarding, context API, etc.).

Key changes from v1.x:
- Upgrade to Tailwind CSS v4 with @tailwindcss/vite plugin
- Remove tailwind.config.js and postcss.config.js (TW4 CSS-first config)
- Upgrade Vite to v6, TypeScript to v5.7, Storybook to v8
- Use HeadlessUI v2 API (DialogPanel, DialogBackdrop, Field, Label)
- Add cn() utility (classnames + tailwind-merge)
- Update to Node.js 22 in CI
- Add prettier + prettier-plugin-tailwindcss

Preserved from main:
- TailReactBaseColorProvider context API for dynamic colors
- Pagination component
- Ref forwarding for TextField and Checkbox
- Modal initialFocus support
- prepare script for git installs

Author: itsrafsanjani

.editorconfig

@@ -3,18 +3,19 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-insert_final_newline = true
-indent_style = space
 indent_size = 4
+indent_style = space
+insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.json]
-indent_size = 2
-
 [*.md]
 trim_trailing_whitespace = false
 
-[*.{yml,yaml,ts,tsx,js}]
+[*.{tsx,ts,js,json,css}]
+indent_size = 2
+indent_style = space
+
+[*.{yml,yaml}]
 indent_size = 2
 
 [docker-compose.yml]

.eslintrc.cjs

@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '21.6'
+          node-version: '22.x'
           cache: 'npm'
 
       - name: Install dependencies

.github/workflows/npm.yml

@@ -27,3 +27,5 @@ storybook-static
 
 .vercel
 .yarnrc.yml
+
+*storybook.log

.gitignore

@@ -1,20 +1,32 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import remarkGfm from 'remark-gfm';
+
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  framework: '@storybook/react-vite',
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
+
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
-    '@storybook/addon-interactions',
-    'storybook-dark-mode',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions', {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };
 export default config;

.prettierrc

@@ -1,11 +1,10 @@
 import type { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
 
-import '../src/index.css';
+import '../src/app.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     darkMode: {
       dark: { ...themes.dark, appBg: 'black', base: 'dark', appPreviewBg: 'black' },
       stylePreview: true,
@@ -18,6 +17,8 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs', 'autodocs']
 };
 
 export default preview;

.storybook/main.ts

@@ -14,9 +14,17 @@ yarn add @wedevs/tail-react
 
 ## Usage
 
+### Tailwind CSS v4
+
+On your app.css file, add the source file:
+
+```diff
++ @source './node_modules/@wedevs/tail-react/dist/index.{js,ts,jsx,tsx}';
+```
+
 ### Tailwind CSS v3
 
-If you're using Tailwind CSS v3, update your `tailwind.config.js` file:
+On your `tailwind.config.js` file, update the content entry:
 
 ```diff
 /** @type {import('tailwindcss').Config} */
@@ -35,21 +43,6 @@ export default {
 }
 ```
 
-### Tailwind CSS v4
-
-For Tailwind CSS v4, configuration is done in your CSS file:
-
-```css
-@import 'tailwindcss';
-
-/* Import tail-react components */
-@source "node_modules/@wedevs/tail-react/dist/index.js";
-
-@theme {
-  /* Your theme customizations */
-}
-```
-
 ### Customizing the theme color
 
 By default, the component library uses `indigo` as the primary color. You can customize this using the `TailReactBaseColorProvider`:

.storybook/preview.ts

@@ -10,25 +10,25 @@ Follow these steps to release a new version:
 
 2. **Commit the changes**: Commit the updated `package.json` file using the following command:
 
-   ```shell
-   git add package.json
-   git commit -m "Bump version to vX.X.X"
-   ```
+    ```shell
+    git add package.json
+    git commit -m "Bump version to vX.X.X"
+    ```
 
 3. **Tag the release**: Create a new Git tag for the release using the following command:
 
-   ```shell
-   git tag -a vX.X.X -m "Release vX.X.X"
-   ```
+    ```shell
+    git tag -a vX.X.X -m "Release vX.X.X"
+    ```
 
-   Replace `X.X.X` with the actual version number.
+    Replace `X.X.X` with the actual version number.
 
 4. **Push the changes**: Push the committed changes and the newly created tag to the GitHub repository:
 
-   ```shell
-   git push origin main
-   git push origin vX.X.X
-   ```
+    ```shell
+    git push origin main
+    git push origin vX.X.X
+    ```
 
 5. **Create a GitHub release**: Create a new release in GitHub with the new tag. This will trigger a GitHub action that will automatically publish the new version to npm.
 

README.md

@@ -9,6 +9,7 @@
 
 <body>
     <div id="root"></div>
+
     <script type="module" src="/src/main.tsx"></script>
 </body>