Add GitHub Actions workflow to deploy Storybook to GitHub Pages (#24)

* feat: add GitHub Actions workflow to deploy Storybook to GitHub Pages

This workflow automates the process of building and deploying the Storybook to GitHub Pages when changes are pushed to the main branch. It sets up the necessary permissions, installs dependencies, builds UI components and Storybook, and then uses a GitHub action to publish the static Storybook files to GitHub Pages. This enables easy access to the latest version of the project's component library documentation.

* fix: indentation

* chore: change the main colors for storybook

.github/workflows/deploy_storybook.yml

@@ -0,0 +1,43 @@
+on:
+  push:
+    branches:
+      - "main"
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.build-publish.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build UI components
+        run: |
+          cd packages/ui
+          npm ci
+          npm run build
+
+      - name: Build Storybook
+        run: |
+          cd examples/storybook
+          npm ci
+          npm run build-storybook
+
+      - id: build-publish
+        uses: bitovi/[email protected]
+        with:
+          path: examples/storybook/storybook-static

examples/storybook/tailwindTheme.ts

@@ -1,20 +1,20 @@
-import { Config } from "tailwindcss";
+import type { Config } from "tailwindcss";
 
 export const defaultTheme: Partial<Config["theme"]> = {
   colors: {
     mainColors: {
-      ["light-400"]: "#E6FFF0",
-      ["light-300"]: "#B3FFD1",
-      ["light-200"]: "#44FF88",
-      ["light-100"]: "#22FF52",
-      base: "#00FF0A",         
-      ["dark-100"]: "#0BD435", 
-      ["dark-200"]: "#13AC2E", 
-      ["dark-300"]: "#178730", 
-      ["dark-400"]: "#196638", 
-      ["dark-500"]: "#174724",
+      ["light-400"]: "#E0F2F1",
+      ["light-300"]: "#B2DFDB",
+      ["light-200"]: "#80CBC4",
+      ["light-100"]: "#4DB6AC",
+      base: "#26A69A",
+      ["dark-100"]: "#009688",
+      ["dark-200"]: "#00897B",
+      ["dark-300"]: "#00796B",
+      ["dark-400"]: "#00695C",
+      ["dark-500"]: "#004D40",
     },
-  }
-}
+  },
+};
 
-// rgb(0 255 10)
+// rgb(0, 150, 136)