refactor: rewrite entire app with vite as bundler

.eslintrc.cjs

@@ -0,0 +1,40 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: [
+    "@typescript-eslint",
+    "prettier",
+    "react-refresh",
+    "simple-import-sort",
+  ],
+  settings: {
+    react: {
+      version: "18",
+    },
+  },
+  rules: {
+    "react-refresh/only-export-components": "warn",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/react-in-jsx-scope": "off",
+  },
+  ignorePatterns: ["dist", "build"],
+};

.gitignore

@@ -1,22 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
+storybook-static
 node_modules
-
-# builds
-build
 dist
-.rpt2_cache
+dist-ssr
+*.local
 
-# misc
+# Editor directories and files
+.idea
 .DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint:fix && npx lint-staged

.husky/prepare-commit-msg

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+if [ "$2" != "message" ];then
+    exec < /dev/tty && node_modules/.bin/cz --hook "$1" "$2" "$3" || true
+fi

.prettierrc

@@ -1,10 +1,5 @@
 {
   "singleQuote": true,
-  "jsxSingleQuote": true,
-  "semi": false,
   "tabWidth": 2,
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "arrowParens": "always",
-  "trailingComma": "none"
+  "useTabs": false
 }

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import react from '@vitejs/plugin-react-swc';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  // async viteFinal(config) {
+  //   config.plugins = [react()]
+  //   return config;
+  // }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.stylelintrc

@@ -0,0 +1,10 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "ignoreFiles": [
+    "build/**/*",
+    "coverage/**/*",
+    "dist/**/*",
+    "storybook/**/*",
+    "storybook-static/**/*"
+  ]
+}

README.md

@@ -15,27 +15,28 @@ npm install --save react-code-container
 ## Usage
 
 ```tsx
-import React, { useState } from 'react'
-
-import CodeContainer from 'react-code-container'
-import 'react-code-container/dist/index.css'
+import React, { useState } from 'react';
+import 'react-code-container/dist/styles/base.css';
+import 'react-virtualized/styles.css';
+import 'highlight.js/styles/atom-one-dark.css'; // Find any highlight style you need
+import ReactCodeContainer from 'react-code-container';
 
 export default () => {
-  const [language, setLanguage] = useState('jsx')
-  const [showLineNumber, setShowLineNumber] = useState(true)
+  const [language, setLanguage] = useState('jsx');
+  const [showLineNumber, setShowLineNumber] = useState(true);
 
   const code = `export function hello() => {
     console.log("Hello world")
-  }`
+  }`;
   return (
-    <CodeContainer
+    <ReactCodeContainer
       code={code}
       showLineNumber={showLineNumber} // optional
       language={language} // optional
       onLineNumberClick={handleLineNumberClicked} // optional
     />
-  )
-}
+  );
+};
 ```
 
 ## Configuration

commitlint.config.cjs

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };