Revert "Fe dev (#664)"

This reverts commit 30b6f5e.

.github/workflows/design-pull-request.yml

@@ -0,0 +1,54 @@
+name: Storybook Deployment
+
+on:
+  pull_request:
+    branches:
+      - fe-dev
+    paths:
+      - 'HDesign/**'
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.15.1'
+
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: |
+          cd HDesign
+          npm install
+
+      - name: Run lint
+        run: npm run lint
+        working-directory: ./HDesign
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        id: publish_chromatic
+        with:
+          workingDir: HDesign
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+      - name: Comment on PR
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: '🚀 **storybook**: ${{ steps.publish_chromatic.outputs.storybookUrl }}'

.github/workflows/frontend-pull-request.yml

@@ -5,7 +5,7 @@ on:
     types: [opened, synchronize]
     branches: [main, fe-dev]
     paths:
-      - "client/**"
+      - 'client/**'
 
 jobs:
   test:
@@ -23,15 +23,18 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20.15.1"
+          node-version: '20.15.1'
 
       - name: Install dependencies
+        working-directory: ./client
         run: npm install
 
       - name: Run lint
+        working-directory: ./client
         run: npm run lint
 
       - name: Run test
+        working-directory: ./client
         run: npm run test
 
       - name: Cypress test
@@ -44,48 +47,3 @@ jobs:
 
       - name: Run Cypress tests
         run: npm run cypress-run
-
-  chromatic:
-    name: Run Chromatic
-    runs-on: ubuntu-latest
-
-    defaults:
-      run:
-        shell: bash
-        working-directory: ./client
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20.15.1"
-
-      - name: Cache dependencies
-        id: cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}-v1
-          restore-keys: |
-            ${{ runner.os }}-npm-
-
-      - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: npm install
-
-      - name: Run Chromatic
-        uses: chromaui/action@latest
-        id: publish_chromatic
-        with:
-          workingDir: client
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-
-      - name: Comment on PR
-        uses: thollander/actions-comment-pull-request@v2
-        with:
-          message: "🚀 **storybook**: ${{ steps.publish_chromatic.outputs.storybookUrl }}"

HDesign/.gitignore

@@ -0,0 +1,12 @@
+logs
+*.log
+npm-debug.log*
+
+node_modules
+dist
+
+.env
+
+storybook-static
+*storybook.log
+.DS_Store

HDesign/.npmignore

@@ -0,0 +1,7 @@
+node_modules/
+src/
+tsconfig.json
+.storybook/
+.eslintrc.json
+.prettierrc
+webpack.config.js

HDesign/.npmrc

@@ -0,0 +1,2 @@
+engine-strict = true
+legacy-peer-deps = true

HDesign/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "arrowParens": "avoid",
+  "endOfLine": "auto",
+  "jsxSingleQuote": false,
+  "bracketSpacing": false,
+  "proseWrap": "preserve"
+}

HDesign/.storybook/main.ts

@@ -0,0 +1,47 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+import type {StorybookConfig} from '@storybook/react-webpack5';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  webpackFinal: async config => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@components': path.resolve(__dirname, '../src/components'),
+        '@token': path.resolve(__dirname, '../src/token'),
+        '@type': path.resolve(__dirname, '../src/type'),
+        '@theme': path.resolve(__dirname, '../src/theme'),
+        '@assets': path.resolve(__dirname, '../src/assets'),
+        '@utils': path.resolve(__dirname, '../src/utils'),
+      };
+    }
+
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    const imageRule = config.module.rules.find(rule => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
+};
+export default config;

client/.storybook/preview.tsx → HDesign/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 
 import type {Preview} from '@storybook/react';
-import {HDesignProvider} from '../src/components/Design';
+import {HDesignProvider} from '../src/theme/HDesignProvider';
 
 const preview: Preview = {
   parameters: {

HDesign/eslint.config.mjs

@@ -0,0 +1,153 @@
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+import {fixupConfigRules, fixupPluginRules} from '@eslint/compat';
+import react from 'eslint-plugin-react';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import _import from 'eslint-plugin-import';
+import prettier from 'eslint-plugin-prettier';
+import tsParser from '@typescript-eslint/parser';
+import js from '@eslint/js';
+import {FlatCompat} from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...fixupConfigRules(
+    compat.extends(
+      'eslint:recommended',
+      'plugin:react/recommended',
+      'plugin:@typescript-eslint/recommended',
+      'plugin:react-hooks/recommended',
+      'plugin:import/typescript',
+      'plugin:import/recommended',
+      'plugin:import/errors',
+      'plugin:import/warnings',
+      'prettier',
+      'plugin:prettier/recommended',
+    ),
+  ),
+  {
+    plugins: {
+      react: fixupPluginRules(react),
+      '@typescript-eslint': fixupPluginRules(typescriptEslint),
+      import: fixupPluginRules(_import),
+      prettier: fixupPluginRules(prettier),
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+
+        typescript: {
+          directory: './lib',
+        },
+      },
+
+      'import/parsers': {
+        '@typescript-eslint/parser': ['.ts', '.tsx'],
+      },
+
+      'import/ignore': ['lottie-react'],
+    },
+
+    rules: {
+      'no-use-before-define': 0,
+      'prettier/prettier': 'error',
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'import/prefer-default-export': 0,
+      'import/no-named-as-default': 0,
+      'import/namespace': 0,
+      'import/extensions': 0,
+      'import/no-cycle': 0,
+      'react/no-unknown-property': 0,
+      'react/jsx-filename-extension': [1, {extensions: ['.ts', '.tsx']}],
+      'react/function-component-definition': 0,
+      'react/jsx-props-no-spreading': 0,
+      'react/jsx-key': 0,
+      'react/button-has-type': 'off',
+      'no-shadow': 0,
+      'no-console': 0,
+      'no-alert': 0,
+      'react/no-children-prop': 'off',
+      'react/no-array-index-key': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'react-hooks/rules-of-hooks': 'off',
+      'react/jsx-no-useless-fragment': 'off',
+      'react/jsx-no-constructed-context-values': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+
+      '@typescript-eslint/no-unused-vars': 0,
+
+      // 'react/jsx-uses-vars': 'error',
+      // '@typescript-eslint/no-use-before-define': ['error'],
+      // '@typescript-eslint/explicit-module-boundary-types': 'error',
+
+      'import/order': [
+        'error',
+        {
+          'newlines-between': 'always',
+
+          groups: ['type', 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'unknown'],
+
+          pathGroups: [
+            {
+              pattern: 'react*',
+              group: 'external',
+              position: 'before',
+            },
+            {
+              pattern: '@components/*',
+              group: 'internal',
+              position: 'after',
+            },
+            {
+              pattern: '@layouts/*',
+              group: 'internal',
+              position: 'after',
+            },
+            {
+              pattern: '@assets/*',
+              group: 'internal',
+              position: 'after',
+            },
+            {
+              pattern: '@theme/*',
+              group: 'internal',
+              position: 'after',
+            },
+            {
+              pattern: '@token/*',
+              group: 'internal',
+              position: 'after',
+            },
+            {
+              pattern: '@types/*',
+              group: 'internal',
+              position: 'after',
+            },
+            {
+              pattern: '@utils/*',
+              group: 'internal',
+              position: 'after',
+            },
+          ],
+        },
+      ],
+    },
+  },
+];