feat: new InputNumberSelect - universal input component

.github/workflows/deploy-storybook.yml

@@ -6,25 +6,24 @@ on:
   workflow_dispatch:
 
 permissions:
-  contents: read
+  contents: write
   pages: write
   id-token: write
+  packages: write
 
 concurrency:
-  group: pages
+  group: pages-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  build-and-deploy:
+  release:
     runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0 # semantic-release needs full history
+          fetch-depth: 0
+          token: ${{ secrets.GH_TOKEN || secrets.GITHUB_TOKEN }}
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -45,6 +44,35 @@ jobs:
       - name: Build package
         run: npm run build
 
+      - name: Release (semantic-release)
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN || secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GIT_AUTHOR_NAME: github-actions[bot]
+          GIT_AUTHOR_EMAIL: github-actions[bot]@users.noreply.github.com
+          GIT_COMMITTER_NAME: github-actions[bot]
+          GIT_COMMITTER_EMAIL: github-actions[bot]@users.noreply.github.com
+        run: npx semantic-release
+
+  deploy-storybook:
+    runs-on: ubuntu-latest
+    needs: release
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
       - name: Build Storybook with base path
         run: npm run build-storybook:gh-pages
         env:
@@ -64,9 +92,3 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
-
-      - name: Release (semantic-release)
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release

.storybook/preview.tsx

@@ -0,0 +1,56 @@
+import type { Decorator, Preview } from '@storybook/react'
+import React, { useEffect } from 'react'
+import '../src/styles/tailwind.css'
+/**
+ * Decorator for dynamic change theme (light/dark)
+ */
+const ThemeDecorator: Decorator = (Story, context) => {
+	const selectedBackground = context.globals.backgrounds?.value
+	const backgroundValues = context.parameters.backgrounds?.values || []
+	const defaultBackground = context.parameters.backgrounds?.default
+
+	useEffect(() => {
+		let themeName: string
+
+		if (!selectedBackground) {
+			themeName = defaultBackground
+		} else if (selectedBackground.startsWith('#')) {
+			const currentBg = backgroundValues.find(
+				(bg: any) => bg.value === selectedBackground
+			)
+			themeName = currentBg?.name || defaultBackground
+		} else {
+			themeName = selectedBackground
+		}
+
+		if (themeName === 'dark') {
+			document.documentElement.classList.add('dark')
+		} else {
+			document.documentElement.classList.remove('dark')
+		}
+	}, [selectedBackground, backgroundValues, defaultBackground])
+
+	return <Story />
+}
+
+const preview: Preview = {
+	decorators: [ThemeDecorator],
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		backgrounds: {
+			default: 'light',
+			values: [
+				{
+					name: 'light',
+					value: '#f9fafb',
+				},
+				{
+					name: 'dark',
+					value: '#1f2937',
+				},
+			],
+		},
+	},
+}
+
+export default preview