Add color mode to url

noya-app · Dec 15, 2023 · 49df789 · 49df789
1 parent 842fc0a
commit 49df789
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 26 deletions.
diff --git a/packages/noya-compiler/src/__tests__/__snapshots__/compile.test.ts.snap b/packages/noya-compiler/src/__tests__/__snapshots__/compile.test.ts.snap
@@ -5,10 +5,14 @@ Array [
   "package.json",
   "src/app/layout.tsx",
   "src/app/page.tsx",
-  "src/app/chakra/components/globals.css",
-  "src/app/chakra/components/layout.tsx",
-  "src/app/chakra/components/theme.ts",
-  "src/app/chakra/components/hero/page.tsx",
+  "src/app/chakra/blue/light/components/globals.css",
+  "src/app/chakra/blue/light/components/layout.tsx",
+  "src/app/chakra/blue/light/components/theme.ts",
+  "src/app/chakra/teal/light/components/globals.css",
+  "src/app/chakra/teal/light/components/layout.tsx",
+  "src/app/chakra/teal/light/components/theme.ts",
+  "src/app/chakra/blue/light/components/hero/page.tsx",
+  "src/app/chakra/teal/light/components/hero/page.tsx",
 ]
 `;
 

diff --git a/packages/noya-compiler/src/project.ts b/packages/noya-compiler/src/project.ts
@@ -436,32 +436,82 @@ export function compileDesignSystem(
   };
 }
 
+const colorNames = [
+  // 'slate',
+  // 'gray',
+  // 'zinc',
+  // 'neutral',
+  // 'stone',
+  // 'red',
+  // 'orange',
+  // 'amber',
+  // 'yellow',
+  // 'lime',
+  // 'green',
+  // 'emerald',
+  'teal',
+  // 'cyan',
+  // 'sky',
+  'blue',
+  // 'indigo',
+  // 'violet',
+  // 'purple',
+  // 'fuchsia',
+  // 'pink',
+  // 'rose',
+];
+
+const colorModes = [
+  'light' as const,
+  // 'dark'
+];
+
 export function compile(configuration: CompilerConfiguration) {
   const allDefinitions = Object.keys(configuration.resolvedDefinitions);
 
   const allDSFiles: Record<string, string> = {};
   const allDependencies: Record<string, string> = {};
   const allDevDependencies: Record<string, string> = {};
 
-  for (const name of allDefinitions) {
-    const {
-      files: dsFiles,
-      dependencies,
-      devDependencies,
-    } = compileDesignSystem({
-      ...configuration,
-      designSystemDefinition: configuration.resolvedDefinitions[name],
-      includeTailwindBase: name === 'vanilla',
-    });
-
-    const basename = path.basename(name);
-
-    Object.assign(
-      allDSFiles,
-      addPathPrefix(dsFiles, `src/app/${basename}/components/`),
-    );
-    Object.assign(allDependencies, dependencies);
-    Object.assign(allDevDependencies, devDependencies);
+  for (const libraryName of allDefinitions) {
+    for (const colorMode of colorModes) {
+      for (const colorName of colorNames) {
+        const {
+          files: dsFiles,
+          dependencies,
+          devDependencies,
+        } = compileDesignSystem({
+          ...configuration,
+          ds: {
+            ...configuration.ds,
+            config: {
+              ...configuration.ds.config,
+              colorMode,
+              colors: {
+                ...configuration.ds.config.colors,
+                primary: colorName,
+              },
+            },
+          },
+          designSystemDefinition:
+            configuration.resolvedDefinitions[libraryName],
+          includeTailwindBase: libraryName === 'vanilla',
+        });
+
+        Object.assign(allDependencies, dependencies);
+        Object.assign(allDevDependencies, devDependencies);
+
+        const basename = path.basename(libraryName);
+
+        Object.assign(
+          allDSFiles,
+          addPathPrefix(
+            dsFiles,
+            `src/app/${basename}/${colorName}/${colorMode}/components/`,
+          ),
+        );
+      }
+    }
   }
 
   const files = {

diff --git a/packages/site/src/dseditor/DSEditor.tsx b/packages/site/src/dseditor/DSEditor.tsx
@@ -827,9 +827,11 @@ function Playground(
 
             props.setLatestBuildAssetId?.(assetId);
 
-            window
-              .open(`${client.assets.url(assetId)}/index.html`, '_blank')
-              ?.focus();
+            const url = `${client.assets.url(assetId)}/index.html`;
+
+            console.info('Uploaded to', assetId, url);
+
+            window.open(url, '_blank')?.focus();
           }}
         >
           Upload ZIP