Development

.github/workflows/azure-deploy-storybook.yml

@@ -0,0 +1,46 @@
+# name: Azure Static Web Apps CI/CD
+
+# on:
+#   push:
+#     branches:
+#       - main
+#   pull_request:
+#     types: [opened, synchronize, reopened, closed]
+#     branches:
+#       - main
+
+# jobs:
+#   build_and_deploy_job:
+#     if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+#     runs-on: ubuntu-latest
+#     name: Build and Deploy Job
+#     steps:
+#       - uses: actions/checkout@v3
+#         with:
+#           submodules: true
+#           lfs: false
+#       - name: Build And Deploy
+#         id: builddeploy
+#         uses: Azure/static-web-apps-deploy@v1
+#         with:
+#           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_MUSHROOM_03215740F }}
+#           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+#           action: "upload"
+#           ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+#           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+#           app_location: "/" # App source code path
+#           api_location: "" # Api source code path - optional
+#           output_location: "storybook-static" # Built app content directory - optional
+#           ###### End of Repository/Build Configurations ######
+
+#   close_pull_request_job:
+#     if: github.event_name == 'pull_request' && github.event.action == 'closed'
+#     runs-on: ubuntu-latest
+#     name: Close Pull Request Job
+#     steps:
+#       - name: Close Pull Request
+#         id: closepullrequest
+#         uses: Azure/static-web-apps-deploy@v1
+#         with:
+#           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_MUSHROOM_03215740F }}
+#           action: "close"

.github/workflows/ci.yml

@@ -0,0 +1,59 @@
+name: CI
+
+on:
+  push:
+    branches: [ "development", "main" ]
+  pull_request:
+    branches: [ "development", "main" ]
+
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test --if-present
+
+      - name: Type check
+        run: npx tsc --noEmit
+
+      - name: Build library (rollup)
+        run: npm run rollup --if-present
+
+      - name: Build Storybook (validate docs)
+        if: ${{ github.event_name != 'pull_request' }}
+        run: npm run build --if-present
+
+      - name: Check dist exists
+        id: check_dist
+        run: |
+          if [ -d dist ]; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "exists=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Upload dist artifact
+        if: steps.check_dist.outputs.exists == 'true'
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,34 @@
+name: Deploy Storybook (Azure SWA)
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Storybook
+        run: npm run build
+
+      - name: Deploy to Azure Static Web Apps
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_MUSHROOM_03215740F }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          action: "upload"
+          app_location: "/"
+          api_location: ""
+          output_location: "storybook-static"

.github/workflows/publish.yml

@@ -0,0 +1,56 @@
+name: Publish package
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Verify tag is on main (if this is a tag-triggered run)
+        if: startsWith(github.ref, 'refs/tags/')
+        run: |
+          echo "Verifying tag ${GITHUB_REF} points to a commit on origin/main"
+          git fetch origin main
+          if ! git branch --contains ${GITHUB_SHA} --remote | grep -q origin/main; then
+            echo "Tag ${GITHUB_REF} does not point to a commit on origin/main. Aborting publish."
+            exit 1
+          fi
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests and build
+        run: |
+          npm test --if-present
+          npx tsc --noEmit
+          npm run rollup --if-present
+
+      - name: Authenticate with npm
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" > ~/.npmrc
+          npm whoami
+
+      - name: Publish to npm
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npm publish --access public
+
+      - name: Cleanup
+        if: always()
+        run: rm -f ~/.npmrc

.storybook/main.ts

@@ -5,10 +5,7 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-    "@storybook/addon-styling-webpack"
+    "@storybook/addon-docs"
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/manager.ts

@@ -1,24 +1,6 @@
-import { addons } from '@storybook/manager-api';
+// Custom manager config removed because @storybook/manager-api
+// is not available with the current installed Storybook packages.
+// If you need to customize the manager, update this file to use
+// the supported APIs for your Storybook version.
 
-addons.setConfig({
-  navSize: 300,
-  bottomPanelHeight: 300,
-  rightPanelWidth: 300,
-  panelPosition: 'right',
-  enableShortcuts: true,
-  showToolbar: true,
-  theme: undefined,
-  selectedPanel: undefined,
-  initialActive: 'sidebar',
-  sidebar: {
-    showRoots: false,
-    collapsedRoots: ['other'],
-  },
-  toolbar: {
-    title: { hidden: false },
-    zoom: { hidden: false },
-    eject: { hidden: false },
-    copy: { hidden: false },
-    fullscreen: { hidden: false },
-  },
-});
+export {};

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
 import '../src/index.css'
 
 const preview: Preview = {

README.md

@@ -45,6 +45,11 @@ export default App;
 ## Documentation
 For more detailed documentation on how to use each component, visit the **[Storybook](https://victorious-mushroom-03215740f.5.azurestaticapps.net/?path=/docs/components-button--docs)** where you can see live examples and customizable props.
 
+### Developer docs
+
+- Running Storybook locally: [Using Storybook](docs/using-storybook.md)
+
+
 ## License
 This project is licensed under the MIT License
 

docs/using-storybook.md

@@ -0,0 +1,44 @@
+## Running Storybook locally
+
+This project uses Storybook to document and preview components. The dev server runs on port 6006 by default.
+
+Basic steps
+
+1. Install dependencies (one time):
+
+```bash
+npm install
+```
+
+2. Start Storybook dev server:
+
+```bash
+npm run storybook
+```
+
+3. Open the UI in your browser:
+
+http://localhost:6006
+
+Tips and troubleshooting
+
+- If port 6006 is already in use, run Storybook on a different port:
+
+```bash
+npx storybook dev -p 7007
+```
+
+- Storybook uses the `@storybook/react-vite` builder. If you change Storybook builder or upgrade Storybook, verify the builder's peer deps.
+
+- To produce a static Storybook site for publishing:
+
+```bash
+npm run build
+# static output will be in the directory configured by Storybook (usually `storybook-static`)
+```
+
+- Common warnings:
+  - `punycode` deprecation: non-blocking.
+  - SVG prop name warnings (e.g., `stroke-width` vs `strokeWidth`): fix the icon component props to use camelCase.
+
+If you'd like, I can add a small `example/` app or a GitHub Actions workflow to build and publish Storybook to GitHub Pages or Azure Static Web Apps.

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-    testEnvironment: "jsdom",
-    moduleNameMapper: {
-      ".(css|less|scss)$": "identity-obj-proxy",
-    },
+  testEnvironment: "jest-environment-jsdom",
+  moduleNameMapper: {
+    ".(css|less|scss)$": "identity-obj-proxy",
+  },
 };