refactor: setup workspaces and monorepo with turbo repo

.github/workflows/storybook-predeploy.yml

@@ -5,35 +5,38 @@ 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
+      - 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: npx playwright install --with-deps
+        run: pnpm install
       - 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
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+          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:

.gitignore

@@ -30,4 +30,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/.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,80 @@
+{
+	"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",
+		"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",
+		"@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",
+		"@namefi/eslint-config": "workspace:*",
+		"@namefi/prettier-config": "workspace:*",
+		"@namefi/tailwind-config": "workspace:*",
+		"@namefi/tsconfig": "workspace:*"
+	},
+	"lint-staged": {
+		"*.{js,jsx,tsx,ts}": "eslint --cache --fix"
+	},
+	"prettier": "@namefi/prettier-config"
+}

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',

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

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Card, CardHeader } from '../../../../components/Core/Card';
-import { ComingSoon } from '../../../../components/ComingSoon';
+import { Card, CardHeader } from '@namefi/ui';
+import { ComingSoon } from '@namefi/ui';
 import {
 	DNSSettingsTabs,
 	type DNSSettingsTabKey,
 	DNSRecordsTable,
 	type DNSRecordData,
-} from '../../../../components/Templates/DNSSettings';
+} from '@namefi/ui';
 
 interface DNSSettingsCardProps {
 	records: DNSRecordData[];

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

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

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { deterministicMoment } from '../consts';
+import { DomainCardDemo } from './DomainCardDemo';
+
+const meta = {
+	title: 'Components/DomainCard',
+	component: DomainCardDemo,
+	tags: ['autodocs'],
+	argTypes: {
+		onSettingsClicked: { action: 'onSettingsClicked' },
+		small: { type: 'boolean' },
+	} as any,
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof DomainCardDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DomainAvailableCard: Story = {
+	args: {
+		domainName: 'namefi.io',
+		status: 'AVAILABLE',
+	},
+};
+
+export const DomainTakenCard: Story = {
+	args: {
+		domainName: 'namefi.com',
+		ownerAddress: '0xfdB5929A4a3e5a98D70c76E86681cFfdfbf47Fe4',
+		status: 'TAKEN',
+		showOwner: true,
+		showExpiration: true,
+		expirationDate: deterministicMoment.add(1, 'year').toDate(),
+	},
+};
+
+export const OwnedDomainCard: Story = {
+	args: {
+		domainName: 'namefi.eth',
+		ownerAddress: '0xfdB5929A4a3e5a98D70c76E86681cFfdfbf47Fe4',
+		status: 'TAKEN',
+		showOwner: true,
+		sameOwner: true,
+		showExpiration: true,
+		expirationDate: deterministicMoment.add(1, 'year').toDate(),
+	},
+};

src/components/Templates/DomainCard/DomainCardDemo.tsx → apps/storybook/src/stories/Components/DomainCardDemo.tsx

@@ -1,11 +1,5 @@
-import React, {useMemo, useState} from 'react';
-import  DomainExpirationAndLock from './DomainExpirationAndLock';
-import  DomainOwner from './DomainOwner';
-import DomainStatus, {DomainStatusEnum} from './DomainStatus';
-import DomainCardFooter from './DomainCardFooter';
-import DomainCardBody from './DomainCardBody';
-import DomainCardRoot from './DomainCardRoot';
-import DomainCardHeader from './DomainCardHeader';
+import React, { useMemo } from 'react';
+import { DomainCard } from '@namefi/ui';
 
 export type DomainCardProps = {
 	domainName?: string;
@@ -44,31 +38,30 @@ export const DomainCardDemo = (props: DomainCardProps) => {
 	const { domainName, loading, href, showExpiration, expirationDate, status } = props;
 
 	return (
-		<DomainCardRoot small={props.small}>
-			<DomainCardHeader small={props.small}>
-				<DomainStatus
+		<DomainCard.Root small={props.small}>
+			<DomainCard.Header small={props.small}>
+				<DomainCard.Status
 					status={
 						status === 'TAKEN'
 							? sameOwner
-								? DomainStatusEnum.YOU_OWN_THIS
-								: DomainStatusEnum.TAKEN
-							: DomainStatusEnum.AVAILABLE
+								? DomainCard.StatusEnum.YOU_OWN_THIS
+								: DomainCard.StatusEnum.TAKEN
+							: DomainCard.StatusEnum.AVAILABLE
 					}
 				/>
 				<button className="relative block" onClick={onSettingsClicked}>
 					{sameOwner && (showSettings ?? true) && (
 						<img className="w-7.5" src="/assets/Gear.svg" alt="Gear image" role="img" />
 					)}
 				</button>
-			</DomainCardHeader>
-			<DomainCardBody small={props.small}>{domainName}</DomainCardBody>
-			<DomainCardFooter small={props.small}>
-				{showOwner && !!ownerAddress && <DomainOwner ownerAddress={ownerAddress} />}
+			</DomainCard.Header>
+			<DomainCard.Body small={props.small}>{domainName}</DomainCard.Body>
+			<DomainCard.Footer small={props.small}>
+				{showOwner && !!ownerAddress && <DomainCard.Owner ownerAddress={ownerAddress} />}
 				{showExpiration && !!expirationDate && (
-					<DomainExpirationAndLock expirationDate={expirationDate} locked={true} />
+					<DomainCard.ExpirationAndLock expirationDate={expirationDate} locked={true} />
 				)}
-			</DomainCardFooter>
-		</DomainCardRoot>
+			</DomainCard.Footer>
+		</DomainCard.Root>
 	);
 };
-