feat(dev-server): add

inkdropapp · Oct 17, 2024 · 477c1bf · 477c1bf
1 parent bee20c9
commit 477c1bf
Show file tree

Hide file tree

Showing 13 changed files with 256 additions and 4 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -0,0 +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/dev-server.tsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,12 +1,14 @@
 {
   "name": "@inkdropapp/theme-dev-helpers",
   "version": "0.2.2",
+  "type": "module",
   "description": "A helper module for creating themes for Inkdrop",
   "keywords": [
     "inkdrop",
     "markdown"
   ],
   "scripts": {
+    "dev-server": "bunx --bun vite",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -21,7 +23,19 @@
   "dependencies": {
     "@inkdropapp/base-ui-theme": "^0.3.1",
     "@inkdropapp/css": "^0.4.2",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "commander": "^12.1.0",
-    "puppeteer": "^23.5.3"
+    "puppeteer": "^23.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8"
+  },
+  "devDependencies": {
+    "prettier": "^3.3.3"
   }
 }
diff --git a/src/dev-server.css b/src/dev-server.css
@@ -0,0 +1,49 @@
+body {
+  background: var(--page-background);
+  color: var(--text-color);
+}
+
+#root {
+  padding: 2rem 0;
+}
+
+h2 {
+  text-align: center;
+}
+
+.variable-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  justify-content: center;
+  gap: 0.6rem;
+
+  &>.variable-item {
+    display: flex;
+    flex-direction: row;
+    gap: 0.6em;
+    align-items: center;
+
+    .color-box {
+      flex: 0 0 30px;
+      height: 30px;
+    }
+
+    .data {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      .variable-name {
+        font-weight: bold;
+      }
+    }
+  }
+
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
diff --git a/src/dev-server.tsx b/src/dev-server.tsx
@@ -0,0 +1,39 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import { Index } from './dev-server/index';
+import './dev-server.css'
+import '@inkdropapp/css/reset.css'
+import '@inkdropapp/css/tokens.css'
+import '@inkdropapp/base-ui-theme/styles/theme.css'
+import { ColorTokensPage } from './dev-server/color-tokens';
+import { VariablesPage } from './dev-server/variables';
+
+const cssFiles = [
+  '/Users/nora/Developments/inkdrop/plugins/solarized-light-ui/styles/tokens.css',
+  '/Users/nora/Developments/inkdrop/plugins/solarized-light-ui/styles/theme.css'
+]
+
+cssFiles.forEach((file) => {
+  import( /* @vite-ignore */  file)
+})
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Index />,
+    children: [
+      { path: '', element: <VariablesPage /> },
+      { path: 'tokens', element: <ColorTokensPage /> }
+    ]
+  },
+]);
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+)
diff --git a/src/dev-server/color-tokens.tsx b/src/dev-server/color-tokens.tsx
@@ -0,0 +1,31 @@
+import { getCSSVariables } from './get-css-variables'
+
+export const ColorTokensPage = () => {
+  const cssVariables = getCSSVariables()
+
+  return (
+    <>
+      <h2>Color Tokens</h2>
+      <div className='variable-list'>
+        {Object.keys(cssVariables)
+          .filter(name => name.startsWith('--color') || name.startsWith('--hsl'))
+          .map(variableName => {
+            return (
+              <div key={variableName} className='variable-item'>
+                <div className='color-box' style={{
+                  background: variableName.startsWith('--hsl') ? `hsl(var(${variableName}))` : `var(${variableName})`
+                }}></div>
+                <div className='data'>
+                  <div className='variable-name'>{variableName}</div>
+                  <div className='variable-value'>
+                    {cssVariables[variableName]}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+      </div>
+    </>
+  )
+}
+
diff --git a/src/dev-server/get-css-variables.ts b/src/dev-server/get-css-variables.ts
@@ -0,0 +1,12 @@
+export function getCSSVariables() {
+  const computedStyles = document.body.computedStyleMap();
+  const variables: Record<string, string> = {};
+  for (const [prop, val] of computedStyles) {
+    if (prop.startsWith('--')) {
+      variables[prop] = val.toString();
+    }
+  }
+
+
+  return variables
+}
diff --git a/src/dev-server/index.tsx b/src/dev-server/index.tsx
@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom'
+import { Nav } from './nav'
+
+export const Index = () => {
+  return (
+    <div className={`ui container`}>
+      <Nav />
+      <Outlet />
+    </div>
+  )
+}
+
diff --git a/src/dev-server/nav.tsx b/src/dev-server/nav.tsx
@@ -0,0 +1,10 @@
+import { Link } from "react-router-dom";
+
+export const Nav = () => {
+  return (
+    <div className='nav'>
+      <Link to='/'>Variables</Link>
+      <Link to='/tokens'>Color Tokens</Link>
+    </div>
+  )
+}
diff --git a/src/dev-server/variables.tsx b/src/dev-server/variables.tsx
@@ -0,0 +1,29 @@
+import themeVariableNames from '@inkdropapp/base-ui-theme/lib/variable-names.json'
+import { getCSSVariables } from './get-css-variables'
+
+export const VariablesPage = () => {
+  const cssVariables = getCSSVariables()
+  return (
+    <>
+      <h2>Variables</h2>
+      <div className='variable-list'>
+        {themeVariableNames.map(variableName => {
+          return (
+            <div key={variableName} className='variable-item'>
+              <div className='color-box' style={{
+                background: `var(${variableName})`
+              }}></div>
+              <div className='data'>
+                <div className='variable-name'>{variableName}</div>
+                <div className='variable-value'>
+                  {cssVariables[variableName]}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+
diff --git a/src/generate-palette.ts b/src/generate-palette.ts
@@ -24,7 +24,7 @@ const appearance = options.appearance as 'light' | 'dark' | undefined;
 // Function to extract theme CSS variables
 async function extractPalette(outputPath: string) {
   const themePackageJson = (await import(path.join(process.cwd(), 'package.json')))
-  const themeVariableNames = (await import(`@inkdropapp/base-ui-theme/lib/variable-names.json`)).default;
+  const themeVariableNames: string[] = (await import(`@inkdropapp/base-ui-theme/lib/variable-names.json`)).default;
 
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
@@ -61,7 +61,7 @@ async function extractPalette(outputPath: string) {
   // Extract CSS variables
   const computedCSSVariables = await page.$eval('body', (body) => {
     const computedStyles = body.computedStyleMap();
-    const variables = {};
+    const variables: Record<string, string> = {};
     for (const [prop, val] of computedStyles) {
       if (prop.startsWith('--')) {
         variables[prop] = val.toString();
@@ -73,7 +73,7 @@ async function extractPalette(outputPath: string) {
   const themeCSSVariables = themeVariableNames.reduce((variables, name) => {
     variables[name] = computedCSSVariables[name];
     return variables;
-  }, {});
+  }, {} as Record<string, string>);
 
   // Write to the output file
   const outputFilePath = path.resolve(outputPath);

diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    fs: {
+      allow: ['src', '/Users/nora/']
+    }
+  }
+})