Version 2.0 (#879)

* init

* Add typescript (#880)

* add typescript

* fix

* fin

* actions

* actions

* fix pnpm

* silence error

* Add ts build (#881)

* add ts build

* add ts build

* clean up unused files and dependencies (#882)

* add storybook (#883)

* fix ci

* clean up

* add banner

* clean up

* fix

.eslintrc.cjs

@@ -0,0 +1,92 @@
+module.exports = {
+  root: true,
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:ssr-friendly/recommended', 'plugin:storybook/recommended', 'plugin:prettier/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
+  plugins: ['import', 'prettier', '@typescript-eslint', 'ssr-friendly'],
+  rules: {
+    /**
+     * Allow empty arrow functions `() => {}`, while keeping other empty functions restricted
+     * @see https://eslint.org/docs/latest/rules/no-empty-function#allow-arrowfunctions
+     */
+    '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }],
+    '@typescript-eslint/ban-ts-comment': 1,
+    'no-const-assign': 'error',
+    /** Restrict imports from devDependencies since they are not included in library build. peerDependencies are ok */
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: false,
+        peerDependencies: true
+      }
+    ],
+    /**
+     * Enforce import order with empty lines between import group
+     * @see https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
+     */
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          ['parent', 'sibling', 'index']
+        ],
+        pathGroups: [
+          {
+            pattern: '@/**',
+            group: 'internal'
+          }
+        ],
+        'newlines-between': 'always'
+      }
+    ],
+    /**
+     * Disallow combined module and type imports like this `import React, {FC} from 'react'`.
+     * Eslint will try to split into type and module imports instead
+     * @see https://typescript-eslint.io/rules/consistent-type-imports/
+     */
+    '@typescript-eslint/consistent-type-imports': 'error',
+    'import/no-cycle': 'error',
+    'prettier/prettier': ['error', {
+      "semi": true,
+      "singleQuote": true,
+      "jsxSingleQuote": false,
+      "trailingComma": "es5",
+      "bracketSpacing": false,
+      "jsxBracketSameLine": true,
+      "arrowParens": "avoid"
+    }]
+  },
+  overrides: [
+    {
+      /* Allow devDependencies imports for tests and config files */
+      files: ['*.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 0,
+      },
+    },
+    {
+      /* Allow devDependencies imports for tests and config files */
+      files: ['**/*.spec.*', '**/testUtils/*.*', '**/*.js', '**/setupTests.ts', '**/*.stories.*'],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          {
+            devDependencies: true,
+            peerDependencies: true,
+          },
+        ],
+      },
+    },
+  ],
+};
+// @typescript-eslint/no-var-requires

.github/workflows/merge-jobs.yml

@@ -14,6 +14,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Cancel Workflow Action
         uses: styfle/cancel-workflow-action@0.10.1
         with:
@@ -25,10 +28,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
-          cache: 'yarn'
+          cache: 'pnpm'
       - name: Run yarn tasks
         run: |
-          yarn install --frozen-lockfile
+          pnpm install
       - name: Publish NPM package
         uses: JS-DevTools/npm-publish@v1
         with:

.github/workflows/pages.yml

@@ -30,18 +30,22 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Checkout
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Read .nvmrc
         run: echo ::set-output name=NVMRC::$(cat .nvmrc)
         id: nvm
       - name: Use Node.js ${{ steps.nvm.outputs.NVMRC }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
-          cache: 'yarn'
+          cache: 'pnpm'
       - name: Run yarn tasks
         run: |
-          yarn install --frozen-lockfile
-          yarn build:docs --quiet
+          pnpm install
+          pnpm run build:docs --quiet
       - name: Setup Pages
         uses: actions/configure-pages@v2
       - name: Upload artifact

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

@@ -16,6 +16,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Cancel Workflow Action
         uses: styfle/cancel-workflow-action@0.10.1
         with:
@@ -27,13 +30,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
-          cache: 'yarn'
-      - name: Run yarn tasks
+          cache: 'pnpm'
+      - name: Run tasks
         run: |
-          yarn install --frozen-lockfile
-          yarn lint:js --quiet
-          yarn lint:style --quiet
-          yarn test --silent
-          yarn start --smoke-test
-          yarn start:docs --smoke-test --quiet
-          yarn build:lib:local --silent
+          pnpm install
+          pnpm run lint:code --quiet
+          pnpm run lint:style --quiet
+          pnpm run test --silent
+          pnpm run start --smoke-test
+          pnpm run start:docs --smoke-test --quiet
+          pnpm run build:lib

.gitignore

@@ -31,3 +31,4 @@ template.json
 
 # documentation
 storybook-static
+dist

.husky/pre-commit

@@ -2,3 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged
+npm run lint:types

.lintstagedrc

@@ -1,6 +1,6 @@
 {
-  "*.js": [
-    "eslint --fix --quiet"
+  "*.{js,ts,tsx}": [
+    "eslint --fix"
   ],
   "*.css": [
     "stylelint --fix --quiet"

.nvmrc

@@ -1 +1 @@
-v16
+v18

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+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$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.stylelintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "extends": ["stylelint-config-standard"],
   "rules": {
     "function-calc-no-unspaced-operator": true,
     "order/order": [