refactor: setup workspaces and monorepo with turbo repo

.github/workflows/storybook-predeploy.yml

@@ -5,37 +5,47 @@ jobs:
     timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.5.0
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
       - name: Install dependencies
-        run: npm ci
-      - name: Install Playwright
+        run: pnpm install
+      - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Build Storybook
-        run: yarn build-storybook --quiet
+        run: pnpm build
       - 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"
+            "npx http-server apps/storybook/storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && pnpm test-storybook"
   chromatic:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.5.0
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
       - name: Install dependencies
-        # ⚠️ Pick one of these, matching the package manager for your project
-        run: npm ci
+        run: pnpm install
       - name: Publish to Chromatic
         uses: chromaui/action@latest
         with:
           # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: apps/storybook

.gitignore

@@ -10,7 +10,6 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
-lib
 *.local
 
 # Editor directories and files
@@ -30,4 +29,6 @@ lib
 *.env 
 
 # static storybook files
-storybook-static
+storybook-static
+.turbo
+.rollup.cache

.npmrc

@@ -0,0 +1,3 @@
+strict-peer-dependencies = false
+legacy-peer-deps = true
+#registry=http://localhost:4873

apps/storybook/.eslintrc.cjs

@@ -0,0 +1,10 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+	root: true,
+	extends: [
+		'@namefi/eslint-config/base',
+	],
+	ignorePatterns: [],
+};
+
+module.exports = config;

apps/storybook/.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g pnpm && pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

apps/storybook/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

apps/storybook/.prettierrc

@@ -0,0 +1 @@
+"@namefi/prettier-config"

.storybook/preview.ts → apps/storybook/.storybook/preview.ts

@@ -1,8 +1,6 @@
 import type { Preview } from "@storybook/react";
-import {themes} from "@storybook/theming";
 import theme from "./theme";
-import '../src/index.css'
-import '../src/App.css'
+import '@namefi/ui/styles.css'
 import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const customViewports = {

apps/storybook/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@namefi/storybook",
+  "version": "2.3.14",
+  "engines": {
+    "node": ">=20 < 21",
+    "npm": ">=10 < 11"
+  },
+  "scripts": {
+    "clean": "git clean -xdf .turbo node_modules out dist lib storybook-static",
+    "lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build",
+    "test": "test-storybook",
+    "build-storybook": "turbo build && pnpm build",
+    "test-storybook": "test-storybook",
+    "chromatic:full": "npx chromatic --project-token=${CHROMATIC_PROJECT_TOKEN}  --force-rebuild",
+    "chromatic:incremental": "npx chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} --only-changed",
+    "chromatic": "pnpm chromatic:full",
+    "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json}\" --ignore-path=../../.gitignore"
+  },
+  "dependencies": {
+    "@namefi/ui": "workspace:*",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@uidotdev/usehooks": "^2.4.1",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.344.0",
+    "moment": "^2.30.1",
+    "ramda": "^0.29.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwind-merge": "^2.2.1"
+  },
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@eslint/js": "^9.4.0",
+    "@namefi/eslint-config": "workspace:*",
+    "@namefi/prettier-config": "workspace:*",
+    "@namefi/tailwind-config": "workspace:*",
+    "@namefi/tsconfig": "workspace:*",
+    "@playwright/test": "^1.45.1",
+    "@storybook/addon-designs": "^7.0.9",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addon-mdx-gfm": "^7.6.20",
+    "@storybook/addon-onboarding": "1.0.11",
+    "@storybook/addon-viewport": "^7.6.20",
+    "@storybook/blocks": "^7.6.20",
+    "@storybook/cli": "^7.6.20",
+    "@storybook/manager-api": "^7.6.20",
+    "@storybook/react": "^7.6.20",
+    "@storybook/react-vite": "^7.6.20",
+    "@storybook/test": "^7.6.20",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/theming": "^7.6.20",
+    "@swc/core": "^1.4.12",
+    "@types/dompurify": "^3.0.5",
+    "@types/eslint__js": "^8.42.3",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.11.14",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.3.1",
+    "chromatic": "^11.0.0",
+    "isomorphic-dompurify": "^2.10.0",
+    "lint-staged": "^15.2.5",
+    "marked": "^12.0.0",
+    "rimraf": "^5.0.5",
+    "storybook": "^7.6.13",
+    "storybook-css-modules": "^1.0.8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.5",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "url": "^0.11.3",
+    "vite": "^5.3.3",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,tsx,ts}": "eslint --cache --fix"
+  },
+  "prettier": "@namefi/prettier-config"
+}

apps/storybook/playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './tests',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		// baseURL: 'http://127.0.0.1:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	// webServer: {
+	//   command: 'npm run start',
+	//   url: 'http://127.0.0.1:3000',
+	//   reuseExistingServer: !process.env.CI,
+	// },
+});

apps/storybook/postcss.config.js

@@ -0,0 +1,2 @@
+// @ts-ignore
+module.exports = require('@namefi/tailwind-config/postcss');

src/stories/Components/Cart.stories.tsx → apps/storybook/src/stories/Components/Cart.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Cart } from '../../components/Cart';
+import { Cart } from '@namefi/ui';
 
 const meta: Meta<typeof Cart> = {
 	title: 'Components/Cart',

apps/storybook/src/stories/Components/Chip.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chip } from '@namefi/ui';
+
+const meta = {
+	title: 'Components/Chip',
+	component: Chip,
+	tags: ['autodocs'],
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ChipUnselected: Story = {
+	args: {
+		selected: false,
+		children: 'chip',
+	},
+};
+export const ChipSelected: Story = {
+	args: {
+		selected: true,
+		children: 'chip',
+	},
+};

src/stories/Components/ComingSoon.stories.tsx → apps/storybook/src/stories/Components/ComingSoon.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ComingSoon } from '../../components/ComingSoon';
+import { ComingSoon } from '@namefi/ui';
 
 const meta = {
 	title: 'Components/ComingSoon',

src/stories/Components/DNSSettings/DNSRecordsTable/DNSRecordsTable.stories.tsx → apps/storybook/src/stories/Components/DNSSettings/DNSRecordsTable/DNSRecordsTable.stories.tsx

@@ -1,8 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import {
-	DNSRecordsTable,
-	type DNSRecordData,
-} from '../../../../components/Templates/DNSSettings';
+import { DNSRecordsTable, type DNSRecordData } from '@namefi/ui';
 
 const meta = {
 	title: 'Components/DNSSettings/DNSRecordsTable',