diff --git a/bun.lockb b/bun.lockb index 42b7e6d..be245ee 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..5f5e7b7 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + + Vite + React + TS + + + +
+ + + + diff --git a/package.json b/package.json index 1323bcf..78ab9fc 100644 --- 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 new file mode 100644 index 0000000..8bfb5cd --- /dev/null +++ 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 new file mode 100644 index 0000000..37e86a5 --- /dev/null +++ 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: , + children: [ + { path: '', element: }, + { path: 'tokens', element: } + ] + }, +]); + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/src/dev-server/color-tokens.tsx b/src/dev-server/color-tokens.tsx new file mode 100644 index 0000000..4e44699 --- /dev/null +++ b/src/dev-server/color-tokens.tsx @@ -0,0 +1,31 @@ +import { getCSSVariables } from './get-css-variables' + +export const ColorTokensPage = () => { + const cssVariables = getCSSVariables() + + return ( + <> +

Color Tokens

+
+ {Object.keys(cssVariables) + .filter(name => name.startsWith('--color') || name.startsWith('--hsl')) + .map(variableName => { + return ( +
+
+
+
{variableName}
+
+ {cssVariables[variableName]} +
+
+
+ ) + })} +
+ + ) +} + diff --git a/src/dev-server/get-css-variables.ts b/src/dev-server/get-css-variables.ts new file mode 100644 index 0000000..a07c54c --- /dev/null +++ b/src/dev-server/get-css-variables.ts @@ -0,0 +1,12 @@ +export function getCSSVariables() { + const computedStyles = document.body.computedStyleMap(); + const variables: Record = {}; + 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 new file mode 100644 index 0000000..57e190b --- /dev/null +++ b/src/dev-server/index.tsx @@ -0,0 +1,12 @@ +import { Outlet } from 'react-router-dom' +import { Nav } from './nav' + +export const Index = () => { + return ( +
+
+ ) +} + diff --git a/src/dev-server/nav.tsx b/src/dev-server/nav.tsx new file mode 100644 index 0000000..179d276 --- /dev/null +++ b/src/dev-server/nav.tsx @@ -0,0 +1,10 @@ +import { Link } from "react-router-dom"; + +export const Nav = () => { + return ( +
+ Variables + Color Tokens +
+ ) +} diff --git a/src/dev-server/variables.tsx b/src/dev-server/variables.tsx new file mode 100644 index 0000000..0663a6f --- /dev/null +++ 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 ( + <> +

Variables

+
+ {themeVariableNames.map(variableName => { + return ( +
+
+
+
{variableName}
+
+ {cssVariables[variableName]} +
+
+
+ ) + })} +
+ + ) +} + diff --git a/src/generate-palette.ts b/src/generate-palette.ts index ca6ff3d..a5824c7 100644 --- 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 = {}; 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); // Write to the output file const outputFilePath = path.resolve(outputPath); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..be4f646 --- /dev/null +++ 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 new file mode 100644 index 0000000..20c2f7f --- /dev/null +++ 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/'] + } + } +})