rangle · jasonsantos · Oct 23, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,75 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  detect-changes:
+    runs-on: ubuntu-latest
+    outputs:
+      affected: ${{ steps.set-affected.outputs.affected }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            foundations: 'packages/foundations/**'
+            ui: 'packages/ui/**'
+            storybook: 'apps/storybook/**'
+            demo: 'apps/demo/**'
+            eslint-config: 'packages/eslint-config/**'
+            typescript-config: 'packages/typescript-config/**'
+      - id: set-affected
+        run: |
+          if [[ "${{ steps.filter.outputs.foundations }}" == "true" || \
+                "${{ steps.filter.outputs.ui }}" == "true" || \
+                "${{ steps.filter.outputs.eslint-config }}" == "true" || \
+                "${{ steps.filter.outputs.typescript-config }}" == "true" ]]; then
+            echo "affected=all" >> $GITHUB_OUTPUT
+          elif [[ "${{ steps.filter.outputs.storybook }}" == "true" ]]; then
+            echo "affected=storybook" >> $GITHUB_OUTPUT
+          elif [[ "${{ steps.filter.outputs.demo }}" == "true" ]]; then
+            echo "affected=demo" >> $GITHUB_OUTPUT
+          else
+            echo "affected=none" >> $GITHUB_OUTPUT
+          fi
+
+  lint-build-test:
+    needs: detect-changes
+    if: needs.detect-changes.outputs.affected != 'none'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: |
+          npm install -g pnpm
+          pnpm install --frozen-lockfile
+
+      - name: Lint, Build, and Test All
+        if: needs.detect-changes.outputs.affected == 'all'
+        run: |
+          pnpm run lint
+          pnpm run build
+          pnpm test
+
+      - name: Lint, Build, and Test Storybook
+        if: needs.detect-changes.outputs.affected == 'storybook'
+        run: |
+          pnpm run lint -w @avinode-ds/storybook
+          pnpm run build -w @avinode-ds/storybook
+          pnpm test -w @avinode-ds/storybook
+
+      - name: Lint, Build, and Test Demo
+        if: needs.detect-changes.outputs.affected == 'demo'
+        run: |
+          pnpm run lint -w @avinode-ds/demo
+          pnpm run build -w @avinode-ds/demo
+          pnpm test -w @avinode-ds/demo
diff --git a/apps/demo/index.html b/apps/demo/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body class="brand-1 default">
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -16,7 +16,8 @@
     "@repo/foundations": "workspace:*",
     "@repo/ui": "workspace:*",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
@@ -29,6 +30,7 @@
     "@storybook/react": "^8.3.5",
     "@storybook/react-vite": "^8.3.5",
     "@storybook/test": "^8.3.5",
+    "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",

diff --git a/apps/demo/src/App.css b/apps/demo/src/App.css
@@ -3,40 +3,4 @@
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+}
diff --git a/apps/demo/src/App.tsx b/apps/demo/src/App.tsx
@@ -1,19 +1,41 @@
-import './App.css'
-import { Button } from '@repo/ui'
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import './App.css';
+import { Button } from '@repo/ui';
+import { Home } from './pages/home.page';
+import { ProductList } from './pages/list.page';
+import { ProductDetail } from './pages/detail.page';
 
 function App() {
-
   return (
-    <>
+    <Router>
       <div>
-        Radius Token Tango demo
-      </div>
-      <h1>Kitchen Sink</h1>
-      <div className="card">
-        <Button label="Click me" />
+        <nav>
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/products">Products</Link>
+            </li>
+            <li>
+              <Link to="/
+              /1">Product Detail</Link>
+            </li>
+          </ul>
+        </nav>
+
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/products" element={<ProductList />} />
+          <Route path="/product/:id" element={<ProductDetail />} />
+        </Routes>
+
+        <div className="card">
+          <Button label="Click me" />
+        </div>
       </div>
-    </>
-  )
+    </Router>
+  );
 }
 
-export default App
+export default App;
diff --git a/apps/demo/src/components/Page.tsx b/apps/demo/src/components/Page.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import './page.css';
+
+interface PageProps {
+  header: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const PageHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <header>
+    <div className="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      {children}
+    </div>
+  </header>
+);
+
+export const PageContent: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <article>{children}</article>
+);
+
+export const Page: React.FC<PageProps> = ({ header, children }) => (
+  <section className="storybook-page">
+    <PageHeader>{header}</PageHeader>
+    <PageContent>{children}</PageContent>
+  </section>
+);
diff --git a/apps/demo/src/stories/page.css → apps/demo/src/components/page.css b/apps/demo/src/stories/page.css → apps/demo/src/components/page.css
diff --git a/apps/demo/src/index.css b/apps/demo/src/index.css
@@ -1,11 +1,13 @@
+@import '@repo/foundations/styles/index.css';
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: var(--semantic-static-color-foreground-default-default);
+  background-color: var(--semantic-static-color-background-default-default);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -18,6 +20,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -30,39 +33,28 @@ body {
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+  color: var(--semantic-static-color-foreground-default-default);
 }
-button:hover {
-  border-color: #646cff;
+
+p {
+  color: var(--semantic-static-color-foreground-default-default);
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+a {
+  color: var(--semantic-static-color-foreground-default-default);
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+li {
+  color: var(--semantic-static-color-foreground-default-default);
 }
+
+ul {
+  color: var(--semantic-static-color-foreground-default-default);
+}
diff --git a/apps/demo/src/main.tsx b/apps/demo/src/main.tsx
@@ -8,3 +8,18 @@ createRoot(document.getElementById('root')!).render(
     <App />
   </StrictMode>,
 )
+function setThemeClass() {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.body.classList.remove('light');
+    document.body.classList.add('dark');
+  } else {
+    document.body.classList.remove('dark');
+    document.body.classList.add('light');
+  }
+}
+
+// Set the initial theme class
+setThemeClass();
+
+// Listen for changes in the color scheme preference
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setThemeClass);
diff --git a/apps/demo/src/pages/detail.page.tsx b/apps/demo/src/pages/detail.page.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Page } from '../components/Page';
+import { Header } from '@repo/ui';
+
+export const ProductDetail: React.FC = () => (
+    <Page
+        header={<Header user={undefined} onLogin={() => { }} onLogout={() => { }} onCreateAccount={() => { }} />}
+    >
+        <h1>Product Details</h1>
+        <h2>Product Name</h2>
+        <p>This is a detailed description of the product.</p>
+        <button>Add to Cart</button>
+    </Page>
+);