Live demo

.babelrc.json

@@ -0,0 +1,15 @@
+{
+ "sourceType": "module",
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "targets": {
+ "chrome": 100
+ }
+ }
+ ],
+ "@babel/preset-typescript",
+ "@babel/preset-react"
+ ]
+}

.devcontainer/Dockerfile

@@ -0,0 +1,11 @@
+ARG VARIANT="18"
+
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
+
+USER node
+WORKDIR /home/node
+
+RUN mkdir -p .config/git \
+ && echo ".vscode/*" >> .config/git/ignore \
+ && echo "*.code-workspace" >> .config/git/ignore \
+ && echo ".history/" >> .config/git/ignore

.devcontainer/devcontainer.json

@@ -0,0 +1,23 @@
+{
+ "name": "TypeScript",
+ "build": {
+ "dockerfile": "Dockerfile",
+ "args": {
+ "VARIANT": "18"
+ }
+ },
+ "extensions": [
+ "ms-vsliveshare.vsliveshare",
+ "dbaeumer.vscode-eslint",
+ "EditorConfig.EditorConfig",
+ "esbenp.prettier-vscode"
+ ],
+ "forwardPorts": [6006, 6007, 8080],
+ "portsAttributes": {
+ "6006": { "label": "Storybook" },
+ "6007": { "label": "Docs" },
+ "8080": { "label": "Example" }
+ },
+ "postCreateCommand": "npm install",
+ "remoteUser": "node"
+}

.eslintrc.json

@@ -0,0 +1,53 @@
+{
+ "root": true,
+ "extends": [
+ "standard-with-typescript",
+ "standard-jsx",
+ "standard-react",
+ "plugin:react/jsx-runtime",
+ "plugin:storybook/recommended",
+ "prettier"
+ ],
+ "plugins": ["simple-import-sort", "unused-imports"],
+ "parserOptions": {
+ "project": "./tsconfig.json"
+ },
+ "rules": {
+ "no-console": "warn",
+ "@typescript-eslint/consistent-type-imports": [
+ "error",
+ {
+ "fixStyle": "inline-type-imports"
+ }
+ ],
+ "@typescript-eslint/no-unused-vars": "off",
+ "unused-imports/no-unused-imports": "error",
+ "unused-imports/no-unused-vars": [
+ "error",
+ {
+ "vars": "all",
+ "varsIgnorePattern": "^_",
+ "args": "after-used",
+ "argsIgnorePattern": "^_",
+ "ignoreRestSiblings": true
+ }
+ ],
+ "import/extensions": ["error", "ignorePackages"],
+ "import/no-duplicates": ["error", { "prefer-inline": true }],
+ "simple-import-sort/imports": [
+ "error",
+ {
+ "groups": [
+ ["^\\u0000"],
+ ["^node:"],
+ ["^@?\\w"],
+ ["index.js"],
+ ["^fixtures/", "^lib/"],
+ ["^"],
+ ["^\\."]
+ ]
+ }
+ ],
+ "simple-import-sort/exports": "error"
+ }
+}

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+* @razor-x
+* @azat-co

.github/actions/setup/action.yml

@@ -0,0 +1,38 @@
+---
+name: Setup
+description: Setup Node.js and install dependencies.
+
+inputs:
+ node_version:
+ description: The Node.js version.
+ required: false
+ default: '18'
+ registry_url:
+ description: The Node.js package registry URL.
+ required: false
+ default: https://registry.npmjs.org
+ install_dependencies:
+ description: Install dependencies.
+ required: false
+ default: 'true'
+
+runs:
+ using: composite
+ steps:
+ - name: Setup Node.js
+ uses: actions/setup-node@v3
+ if: inputs.install_dependencies == 'true'
+ with:
+ cache: npm
+ node-version: ${{ inputs.node_version }}
+ registry-url: ${{ inputs.registry_url }}
+ - name: Setup Node.js without cache
+ uses: actions/setup-node@v3
+ if: inputs.install_dependencies == 'false'
+ with:
+ node-version: ${{ inputs.node_version }}
+ registry-url: ${{ inputs.registry_url }}
+ - name: Install dependencies
+ if: inputs.install_dependencies == 'true'
+ shell: bash
+ run: npm ci

.github/stale.yml

@@ -0,0 +1,18 @@
+---
+daysUntilStale: 21
+daysUntilClose: 7
+exemptLabels:
+ - pinned
+ - security
+staleLabel: wontfix
+markComment: >
+ This issue has been automatically marked as stale because it has not had
+ recent activity. It will be closed if no further activity occurs.
+closeComment: false
+pulls:
+ daysUntilStale: 3
+ daysUntilClose: 1
+ staleLabel: stale
+ markComment: >
+ This pull request has been automatically marked as stale because it has not had
+ recent activity. It will be closed if no further activity occurs.

.github/workflows/_build.yml

@@ -0,0 +1,38 @@
+---
+name: _build
+
+on:
+ workflow_call:
+ inputs:
+ node_version:
+ description: The Node.js version.
+ type: string
+ required: false
+ default: '18'
+ outputs:
+ artifact_name:
+ description: The artifact name.
+ value: build-${{ github.sha }}
+
+jobs:
+ build:
+ name: Package
+ runs-on: ubuntu-latest
+ timeout-minutes: 30
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+ - name: Setup
+ uses: ./.github/actions/setup
+ with:
+ node_version: ${{ inputs.node_version }}
+ - name: Build
+ run: npm run build
+ - name: Package
+ run: npm pack
+ - name: Upload artifact
+ uses: actions/upload-artifact@v3
+ with:
+ name: build-${{ github.sha }}
+ if-no-files-found: error
+ path: '*.tgz'

.github/workflows/_publish.yml

@@ -0,0 +1,46 @@
+---
+name: _publish
+
+on:
+ workflow_call:
+ inputs:
+ artifact_name:
+ description: The artifact name.
+ type: string
+ required: true
+ registry_host:
+ description: The package registry host.
+ type: string
+ required: true
+ secrets:
+ registry_token:
+ description: The package registry token.
+ required: true
+
+jobs:
+ publish:
+ name: Publish package
+ runs-on: ubuntu-latest
+ timeout-minutes: 30
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+ - name: Setup
+ uses: ./.github/actions/setup
+ with:
+ install_dependencies: 'false'
+ - name: Download artifact
+ uses: actions/download-artifact@v3
+ with:
+ name: ${{ inputs.artifact_name }}
+ path: .
+ - name: Get meta
+ id: meta
+ run: echo "tgz=$(ls *.tgz | head -n1)" >> $GITHUB_OUTPUT
+ - name: Publish
+ uses: rxfork/npm-publish@v1
+ with:
+ access: public
+ target: ${{ steps.meta.outputs.tgz }}
+ token: ${{ secrets.registry_token }}
+ registry: ${{ inputs.registry_host }}