Refactor

.babelrc

@@ -1,10 +1,10 @@
 {
-    "presets": ["env", "react", "stage-3"],
-	"plugins": ["transform-class-properties", "react-css-modules"],
+	"presets": ["@babel/preset-env", "@babel/preset-react"],
+	"plugins": ["@babel/plugin-proposal-class-properties"],
 	"env": {
 		"test": {
-			"presets": ["env", "react", "stage-3"],
-			"plugins": ["transform-class-properties", "react-css-modules"]
+			"presets": ["@babel/preset-env", "@babel/preset-react"],
+			"plugins": ["@babel/plugin-proposal-class-properties"]
 		}
 	}
 }

.eslintrc.js

@@ -1,47 +1,30 @@
 module.exports = {
-	'env': {
-		'browser': true,
-		'commonjs': true
+	env: {
+		browser: true,
+		commonjs: true,
 	},
-	'extends': [
-		'eslint:recommended',
-		'plugin:react/recommended'
-	],
-	'parserOptions': {
-		'ecmaFeatures': {
-			'jsx': true
+	extends: ['eslint:recommended', 'plugin:react/recommended'],
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
 		},
-		'ecmaVersion': 2018,
-		'sourceType': 'module'
+		ecmaVersion: 2018,
+		sourceType: 'module',
 	},
-	'plugins': [
-		'react'
-	],
-	'settings': {
-		'react': {
-			'pragma': 'React',
-			'version': '16.5.2',
-			'flowVersion': '0.53'
+	plugins: ['react'],
+	settings: {
+		react: {
+			pragma: 'React',
+			version: '16.5.2',
+			flowVersion: '0.53',
 		},
-		'propWrapperFunctions': [ 'forbidExtraProps' ]
+		propWrapperFunctions: ['forbidExtraProps'],
 	},
-	'rules': {
-		'indent': [
-			'error',
-			'tab'
-		],
-		'linebreak-style': [
-			'error',
-			'windows'
-		],
-		'quotes': [
-			'error',
-			'single'
-		],
-		'semi': [
-			'error',
-			'always'
-		],
-		'no-unexpected-multiline': 0
-	}
-};
+	rules: {
+		indent: ['error', 'tab'],
+		'linebreak-style': ['error', 'unix'],
+		quotes: ['error', 'single'],
+		semi: ['error', 'always'],
+		'no-unexpected-multiline': 0,
+	},
+};

.github/dependabot.yml

@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: CI
+
+on:
+  push:
+    branches: [master, main]
+  pull_request:
+    branches: [master, main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build library
+        run: npm run transpile
+
+      - name: Build Storybook
+        run: npm run storybook:build
+
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run security audit
+        run: npm audit --audit-level=high

.github/workflows/npm-publish.yml

@@ -11,7 +11,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v5
       - uses: actions/setup-node@v3
         with:
           node-version: 16
@@ -22,7 +22,7 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v5
       - uses: actions/setup-node@v3
         with:
           node-version: 16

.github/workflows/npm.yml

@@ -4,11 +4,10 @@ on: [push]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:

.github/workflows/release.yml

@@ -0,0 +1,48 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Build library
+        run: npm run transpile
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create GitHub Release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: Release ${{ github.ref }}
+          draft: false
+          prerelease: false

.github/workflows/storybook.yml

@@ -0,0 +1,46 @@
+name: Deploy Storybook
+
+on:
+  push:
+    branches: [master, main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Storybook
+        run: npm run storybook:build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.out
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -4,3 +4,50 @@ node_modules/
 dist/
 tests/__snapshots__/
 .idea/
+
+# Build outputs
+build/
+lib/
+coverage/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# IDE and editor files
+.vscode/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Temporary files
+.tmp/
+.temp/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Storybook
+storybook-static/

.nvmrc

@@ -0,0 +1 @@
+20

.prettierignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+.out/
+coverage/
+*.min.js
+*.min.css
+package-lock.json
+.storybook/
+demo.jpg

.prettierrc

@@ -0,0 +1,13 @@
+{
+	"printWidth": 80,
+	"tabWidth": 2,
+	"useTabs": true,
+	"semi": true,
+	"singleQuote": true,
+	"quoteProps": "as-needed",
+	"trailingComma": "es5",
+	"bracketSpacing": true,
+	"bracketSameLine": false,
+	"arrowParens": "always",
+	"endOfLine": "lf"
+}