refactor: Renew the storybook (#1074)

[CLNP-2534](https://sendbird.atlassian.net/browse/CLNP-2534)

We use **React & Vite** for **storybook**.

### What has been done
* Bump up storybook version from v6 to v8
* Clean up the storybook stories
* Explain properties under the each module and component

[CLNP-2534]:
https://sendbird.atlassian.net/browse/CLNP-2534?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: bang9 <gusrn1423@naver.com>

.eslintignore

@@ -9,7 +9,7 @@ __snapshots__/**/*
 *.spec.js.snap
 *.spec.tsx.snap
 
-*.stories.js
+src/stories/**
 
 *.css
 *.scss

.eslintrc.js

@@ -1,30 +1,59 @@
 module.exports = {
+  root: true,
+  globals: {
+    JSX: true,
+    React: true,
+    ChildNode: true,
+    ReactElement: true,
+    globalThis: true,
+    Locale: true,
+    SendBird: true,
+  },
   env: {
     browser: true,
     es6: true,
+    jest: true,
   },
-  ignorePatterns: ['**/*.ts', '**/*.tsx', 'node_modules', 'src/legacy'],
-  extends: [
-    'plugin:react/recommended',
-    'airbnb',
-  ],
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-  },
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 2018,
-    sourceType: 'module',
   },
-  plugins: ['react', 'babel', '@typescript-eslint'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
+      },
+    },
+  },
   rules: {
-    // uncomment 'linebreak-style' to build in windows - its not adviced to commit from windows
-    // read more - https://community.perforce.com/s/article/3096
-    // ['linebreak-style']: 0,
+    'no-unused-expressions': 'off',
+    'no-await-in-loop': 'off',
+    // Not to make ESLint complains a type is only being used as type but recognized as a unused variable
+    // https://stackoverflow.com/questions/57802057/eslint-configuring-no-unused-vars-for-typescript
+    'no-unused-vars': 'off', // or '@typescript-eslint/no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'warn',
+      {
+        vars: 'all',
+        varsIgnorePattern: '^_',
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+      },
+    ],
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-expressions': 'error',
+    'react/display-name': 'off',
+    'react/function-component-definition': 'off',
+    'react/prop-types': 'off',
     'import/extensions': [
       'error',
       'ignorePackages',
@@ -35,16 +64,55 @@ module.exports = {
         tsx: 'never',
       },
     ],
-    // we don't want to force to define function component only
-    'react/function-component-definition': 'off',
-    'no-unused-expressions': 'off',
-    '@typescript-eslint/no-unused-expressions': ['error'],
-  },
-  settings: {
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
-    },
+    // TODO(Ahyoung): fix and remove one by one
+    'no-shadow': 'off',
+    'no-else-return': 'off',
+    'no-param-reassign': 'off',
+    'no-useless-escape': 'off',
+    'no-underscore-dangle': 'off',
+    'no-confusing-arrow': 'off',
+    'no-mixed-operators': 'off',
+    'no-nested-ternary': 'off',
+    'no-unneeded-ternary': 'off',
+    'no-use-before-define': 'off',
+    'no-cond-assign': 'off',
+    'no-plusplus': 'off',
+    'no-bitwise': 'off',
+    'no-restricted-syntax': 'off',
+    'no-prototype-builtins': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/no-useless-path-segments': 'off',
+    'import/prefer-default-export': 'off',
+    'import/order': 'off',
+    'import/no-named-as-default-member': 'off',
+    'object-curly-newline': 'off',
+    'object-shorthand': 'off',
+    'consistent-return': 'off',
+    'max-len': 'off',
+    'arrow-body-style': 'off',
+    'function-paren-newline': 'off',
+    'prefer-template': 'off',
+    'padded-blocks': 'off',
+    'arrow-parens': 'off',
+    'dot-notation': 'off',
+    camelcase: 'off',
+    radix: 'off',
+    'prefer-destructuring': 'off',
+    'default-case': 'off',
+    curly: 'off',
+    yoda: 'off',
+    'brace-style': 'off',
+    'nonblock-statement-body-position': 'off',
+    'func-names': 'off',
+    // In some cases, eslint requires semicolon and wants it removed at the same time
+    // https://stackoverflow.com/questions/58474874/eslint-demands-semicolon-and-wants-it-removed-at-the-same-time
+    semi: 'off',
+    '@typescript-eslint/semi': ['error'],
+    'object-curly-spacing': ['error', 'always'],
+    quotes: ['error', 'single'],
   },
+  extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'airbnb-base'],
+  plugins: ['react', '@typescript-eslint', 'unused-imports'],
+  ignorePatterns: ['node_modules', 'ui/QuoteMessageInput/mockMessage.ts'],
 };

.github/workflows/deploy-github-pages.yml

@@ -0,0 +1,35 @@
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  # Event for the workflow to run on
+  push:
+    branches:
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# List of jobs
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      # Manual Checkout
+      - uses: actions/checkout@v4
+
+      # Set up Node
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+
+      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: yarn install # default: npm ci
+          build_command: yarn build-storybook # default: npm run build-storybook
+          path: storybook-static # default: dist/storybook
+          checkout: false # default: true

.gitignore

@@ -35,3 +35,5 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea/
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,25 @@
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import { dirname, join } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+export default {
+  stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [getAbsolutePath('@storybook/addon-essentials')],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  viteFinal: (config) => {
+    return mergeConfig(config, {
+      plugins: [svgr({ include: '**/*.svg' })],
+    });
+  },
+};