feat: ui and tech refresh (#10)

BREAKING CHANGE: quite a rewrite

.eslintrc.js

@@ -1,17 +1,21 @@
 module.exports = {
   root: true,
+  parser: '@typescript-eslint/parser',
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
-    'plugin:flowtype/recommended',
-    'plugin:jest/recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
+    'plugin:react/jsx-runtime',
+    'plugin:storybook/recommended',
   ],
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
   env: {
     browser: true,
-    es6: true,
-    jest: true,
+    es2021: true,
   },
   globals: {
     chrome: false,
@@ -20,48 +24,28 @@ module.exports = {
     __YAHOO_CONSUMER_KEY__: false,
     __YAHOO_CONSUMER_SECRET__: false,
   },
-  plugins: ['react', 'flowtype', 'jest', 'import'],
-  parser: 'babel-eslint',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 2018,
-    sourceType: 'module',
-  },
   settings: {
     react: {
       version: 'detect',
     },
   },
-  rules: {
-    'arrow-body-style': [1, 'as-needed'],
-    'newline-after-var': 0,
-    curly: [2, 'multi-line', 'consistent'],
-    indent: [2, 2, { SwitchCase: 1 }],
-    'one-var': 0,
-    'no-magic-numbers': 0,
-    'prefer-const': 0,
-    'no-extra-parens': 0,
-    'guard-for-in': 0,
-
-    // react specific
-    'react/prop-types': 0,
-    // jsx
-    'react/jsx-closing-bracket-location': [
-      1,
-      {
-        selfClosing: 'after-props',
-        nonEmpty: 'after-props',
+  overrides: [
+    {
+      files: ['*.test.js'],
+      env: {
+        jest: true,
+      },
+    },
+    {
+      files: ['scripts/*.js', 'webpack.config.js', '*rc.js', 'jest.config.js'],
+      env: {
+        node: true,
+        commonjs: true,
       },
-    ],
-    'react/jsx-curly-spacing': [2, 'never'],
-    'react/jsx-equals-spacing': [2, 'never'],
-    'react/jsx-first-prop-new-line': [2, 'multiline'],
-    'react/jsx-indent': [2, 2],
-    'react/jsx-indent-props': [2, 2],
-    'react/jsx-key': 2,
-    'react/jsx-no-duplicate-props': 2,
-    'react/jsx-pascal-case': 2,
+    },
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'react/prop-types': 'warn',
   },
 };

.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: Build and Release
+
+on:
+  push:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js v20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - run: npm ci
+      - run: npm run lint
+      # - run: npm test
+      - run: npm run build
+      - run: npm run semantic-release
+        if: github.ref == 'refs/heads/master' # only on master branch

.gitignore

@@ -63,3 +63,5 @@ typings/
 
 # dotenv environment variables file
 .env
+
+*storybook.log

.husky/commit-msg

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+npx --no -- commitlint --edit "${1}"

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierrc.js

@@ -1,8 +1,5 @@
 module.exports = {
   printWidth: 100,
   singleQuote: true,
-  jsxSingleQuote: true,
-  bracketSpacing: true,
-  jsxBracketSameLine: true,
-  trailingComma: "all"
+  bracketSameLine: true,
 };

.storybook/main.ts

@@ -0,0 +1,40 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+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',
+    '@storybook/preset-scss',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.s[ac]ss$/i,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  url: false,
+                },
+              },
+              'sass-loader',
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  staticDirs: ['../src'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+
+import '../src/main.scss';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;