feat/odedgo/refactor (#35)

Author: odedglas

.babelrc

@@ -1 +1,5 @@
-dist/
+dist/
+storybook-static/
+node_modules/
+coverage/
+.yarn/

.eslintignore

@@ -1,52 +1,50 @@
 module.exports = {
-	'env': {
-		'es6': true,
-		'jest': true,
-		'node': true,
-		'browser': true
-	},
-	'extends': [
-		'eslint:recommended',
-		'plugin:react/recommended',
-		'plugin:import/errors',
-		'plugin:import/warnings',
-		// 'plugin:react-hooks'
-	],
-	'parserOptions': {
-		'ecmaVersion': 2018,
-		'sourceType': 'module'
-	},
-	'settings': {
-		'react': {
-			'version': '16.8.0'
-		},
-	},
-	'rules': {
-		'indent': [
-			'off',
-			'tab'
-		],
-		'quotes': [
-			'error',
-			'single'
-		],
-		'semi': [
-			'error',
-			'always'
-		],
-		'eqeqeq': [
-			'error',
-			'always'
-		],
-		'no-trailing-spaces': ['error', { 'ignoreComments': true }],
-		'consistent-this': 2,
-		'import/no-self-import': 2,
-		'import/no-internal-modules': 0,
-		'import/no-dynamic-require': 0,
-		'import/no-useless-path-segments': 2,
-		'import/order': 1,
-		'import/newline-after-import': 2,
-		// "react-hooks/rules-of-hooks": "error",
-		// "react-hooks/exhaustive-deps": "warn"
-	}
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', 'react-hooks', 'import', '@typescript-eslint'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+        alphabetize: { order: 'asc', caseInsensitive: true },
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-explicit-any': 'warn',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
 };

.eslintrc.js

@@ -0,0 +1,35 @@
+name: CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.12.2'
+        cache: 'yarn'
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+
+    - name: Run linting
+      run: yarn lint
+
+    - name: Run tests
+      run: yarn test
+
+    - name: Build package
+      run: yarn build
+
+    - name: Build Storybook
+      run: yarn build-storybook 

.github/workflows/ci.yml

@@ -0,0 +1,50 @@
+name: Storybook CI/CD
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'yarn'
+          
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        
+      - name: Build Storybook
+        run: yarn build-storybook
+
+  deploy-storybook:
+    needs: build-storybook
+    if: github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'yarn'
+          
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        
+      - name: Build Storybook
+        run: yarn build-storybook
+        
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: storybook-static
+          clean: true 

.github/workflows/deploy-storybook.yml

@@ -1,4 +1,5 @@
 node_modules
 dist
 package-lock.json
+storybook-static
 .idea

.gitignore

@@ -1 +1 @@
-14
+20.12.2

.nvmrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 180,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+} 

.prettierrc

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+
+  stories: [`${process.cwd()}/stories/**/*.stories.@(js|tsx)`],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-links', '@storybook/preset-scss', '@storybook/addon-webpack5-compiler-swc'],
+
+  docs: {
+    autodocs: false,
+  },
+};
+
+export default config;