chore: ♻️ refactor it to use different directory

Signed-off-by: Newton <5769156+iamnewton@users.noreply.github.com>

.github/workflows/chromatic.yml

@@ -0,0 +1,28 @@
+name: "Chromatic Publish"
+
+on: push
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+
+      - name: Install dependencies
+      - run: npm ci
+
+      #👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+      - uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy.yml

@@ -0,0 +1,32 @@
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+
+jobs:
+  deploy:
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.build-publish.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: "npm"
+
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: npm ci
+          build_command: npm run build-storybook
+          path: storybook-static # default: dist/storybook
+          checkout: false # code is already checked out above

.github/workflows/visual-tests.yml

@@ -0,0 +1,113 @@
+name: "Visual Tests"
+
+on: push
+
+jobs:
+  # Install and cache npm dependencies
+  install-cache:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Cache Yarn dependencies and Cypress
+        uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            node_modules
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-v1
+
+      - name: Install dependencies if cache invalid
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn
+
+  # Run interaction and accessibility tests
+  interaction-and-accessibility:
+    runs-on: ubuntu-latest
+    needs: install-cache
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Restore Yarn dependencies
+        uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            node_modules
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-v1
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn test-storybook"
+
+  # Run visual and composition tests with Chromatic
+  visual-and-composition:
+    runs-on: ubuntu-latest
+    needs: install-cache
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Required to retrieve Git history
+
+      - name: Restore Yarn dependencies
+        uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            node_modules
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-v1
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          # Grab this from the Chromatic manage page
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+  # Run user flow tests with Cypress
+  user-flow:
+    runs-on: ubuntu-latest
+    needs: install-cache
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Restore Yarn dependencies
+        uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            node_modules
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-v1
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm run dev

.storybook/main.ts

@@ -0,0 +1,24 @@
+import { type StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+	addons: [
+		"@storybook/addon-onboarding",
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@chromatic-com/storybook",
+		"@storybook/addon-interactions",
+		"@whitespace/storybook-addon-html",
+		"@storybook/addon-a11y",
+		"@storybook/addon-links",
+	],
+	framework: {
+		name: "@storybook/react-vite",
+		// https://storybook.js.org/docs/api/main-config/main-config-framework
+		options: {},
+	},
+	stories: [
+		"../src/**/*.mdx",
+		"../src/**/*.story.@(js|jsx|mjs|ts|tsx)",
+	],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,25 @@
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { type Preview } from "@storybook/react";
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		html: {
+			prettier: {
+				tabWidth: 4,
+				useTabs: true,
+			},
+		},
+		viewport: {
+			viewports: INITIAL_VIEWPORTS,
+			// defaultViewport: 'ipad',
+		},
+	},
+};
+
+export default preview;

README.md

@@ -1,11 +1,11 @@
-# <name>
+# react-template
 
 <description> used within the Galaxy.
 
 ## Installation
 
 ```bash
-npm install --save-dev @theholocron/<name>
+npm install --save-dev @theholocron/react-template
 ```
 
 ## Usage