Merge pull request #75 from SySagar/dev

chore: storybook directory change, modal component, textfield and button component revamp

.changeset/tidy-drinks-doubt.md

@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': minor
+---
+
+storybook directory change, modal component, textfield and button component revamp

.github/workflows/code_coverage.yml

@@ -1,40 +1,40 @@
-name: Running Code Coverage
-
-on:
-  push:
-    branches:
-      - dev
-  pull_request:
-    branches:
-      - dev
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 2
-
-      - name: Set up Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Run tests
-        run: npm run ui:coverage
-
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          directory: apps/ui/coverage
+# name: Running Code Coverage
+
+# on:
+#   push:
+#     branches:
+#       - dev
+#   pull_request:
+#     branches:
+#       - dev
+
+# jobs:
+#   build:
+#     runs-on: ubuntu-latest
+
+#     strategy:
+#       matrix:
+#         node-version: [20.x]
+
+#     steps:
+#       - name: Checkout repository
+#         uses: actions/checkout@v2
+#         with:
+#           fetch-depth: 2
+
+#       - name: Set up Node.js ${{ matrix.node-version }}
+#         uses: actions/setup-node@v3
+#         with:
+#           node-version: ${{ matrix.node-version }}
+
+#       - name: Install dependencies
+#         run: npm install
+
+#       - name: Run tests
+#         run: npm run ui:coverage
+
+#       - name: Upload coverage to Codecov
+#         uses: codecov/codecov-action@v4
+#         with:
+#           token: ${{ secrets.CODECOV_TOKEN }}
+#           directory: apps/ui/coverage

apps/ui/.eslintrc.cjs

@@ -14,6 +14,7 @@ module.exports = {
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/no-children-prop': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
   },
   parserOptions: {
     project: true,

apps/ui/.storybook/main.ts

@@ -4,55 +4,55 @@ import { defineConfig } from 'vite';
 const tsconfigPaths = require('vite-tsconfig-paths').default;
 
 module.exports = {
-  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+    stories: ['../lib/**/*.stories.@(ts|tsx|js|jsx)'],
 
-  viteFinal: async (config) => {
-    return mergeConfig(config, {
-      plugins: [tsconfigPaths()],
-    });
-  },
-
-  viteConfig: defineConfig({
-    resolve: {
-      alias: {
-        '@': '/src',
-        '@utils': '/utils',
-      },
+    viteFinal: async (config) => {
+        return mergeConfig(config, {
+            plugins: [tsconfigPaths()],
+        });
     },
-  }),
 
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-controls',
-    '@storybook/addon-themes',
-    'storybook-css-modules',
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
+    viteConfig: defineConfig({
+        resolve: {
+            alias: {
+                '@': '/src',
+                '@utils': '/utils',
+            },
         },
-      },
-    },
-  ],
+    }),
 
-  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
-  typescript: {
-    check: true, // type-check stories during Storybook build
-  },
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-controls',
+        '@storybook/addon-themes',
+        'storybook-css-modules',
+        {
+            name: '@storybook/addon-postcss',
+            options: {
+                postcssLoaderOptions: {
+                    implementation: require('postcss'),
+                },
+            },
+        },
+    ],
 
-  framework: {
-    name: '@storybook/react-vite',
-    // options: {
-    //   legacyRootApi: true,
-    //   builder: {
-    //     viteConfigPath: './vite.config.ts',
-    //   },
-    // },
-  },
+    // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+    typescript: {
+        check: true, // type-check stories during Storybook build
+    },
 
-  docs: {
-    autodocs: true,
-  },
+    framework: {
+        name: '@storybook/react-vite',
+        // options: {
+        //   legacyRootApi: true,
+        //   builder: {
+        //     viteConfigPath: './vite.config.ts',
+        //   },
+        // },
+    },
+
+    docs: {
+        autodocs: true,
+    },
 };

apps/ui/.storybook/preview.tsx

@@ -1,69 +1,69 @@
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 import '../lib/tailwind.css';
 import '../lib/color-scheme.css';
-import { withGlobalStyles } from './decorator';
+import '@groovy-box/tokens/src/fonts.css';
 
 const customViewports = {
-  xs: {
-    name: 'XS',
-    styles: {
-      width: '350px',
-      height: '963px',
+    xs: {
+        name: 'XS',
+        styles: {
+            width: '350px',
+            height: '963px',
+        },
     },
-  },
-  sm: {
-    name: 'SM',
-    styles: {
-      width: '600px',
-      height: '801px',
+    sm: {
+        name: 'SM',
+        styles: {
+            width: '600px',
+            height: '801px',
+        },
     },
-  },
-  md: {
-    name: 'MD',
-    styles: {
-      width: '900px',
-      height: '801px',
+    md: {
+        name: 'MD',
+        styles: {
+            width: '900px',
+            height: '801px',
+        },
     },
-  },
-  lg: {
-    name: 'LG',
-    styles: {
-      width: '1200px',
-      height: '801px',
+    lg: {
+        name: 'LG',
+        styles: {
+            width: '1200px',
+            height: '801px',
+        },
     },
-  },
-  xl: {
-    name: 'XL',
-    styles: {
-      width: '1536px',
-      height: '801px',
+    xl: {
+        name: 'XL',
+        styles: {
+            width: '1536px',
+            height: '801px',
+        },
     },
-  },
 };
 
 export const parameters = {
-  // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
-  actions: { argTypesRegex: '^on.*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+    // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
+    actions: { argTypesRegex: '^on.*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    visualViewport: {
+        customViewports,
     },
-  },
-  visualViewport: {
-    customViewports,
-  },
 };
 
 export const globalTypes = {
-  scheme: {
-    name: 'Scheme',
-    description: 'Select light or dark',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'mirror',
-      items: ['light', 'dark'],
-      dynamicTitle: true,
+    scheme: {
+        name: 'Scheme',
+        description: 'Select light or dark',
+        defaultValue: 'light',
+        toolbar: {
+            icon: 'mirror',
+            items: ['light', 'dark'],
+            dynamicTitle: true,
+        },
     },
-  },
 };