From 49df78951367ed38ce88466b540d281a30a559fc Mon Sep 17 00:00:00 2001
From: Devin Abbott <devinabbott@gmail.com>
Date: Thu, 14 Dec 2023 17:38:31 -0800
Subject: [PATCH] Add color mode to url

---
 .../__snapshots__/compile.test.ts.snap        | 12 ++-
 packages/noya-compiler/src/project.ts         | 88 +++++++++++++++----
 packages/site/src/dseditor/DSEditor.tsx       |  8 +-
 3 files changed, 82 insertions(+), 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
index 0d549e2fc..a6fa7abf0 100644
--- 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
index 8567d019b..5da71be5d 100644
--- a/packages/noya-compiler/src/project.ts
+++ b/packages/noya-compiler/src/project.ts
@@ -436,6 +436,36 @@ 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);
 
@@ -443,25 +473,45 @@ export function compile(configuration: CompilerConfiguration) {
   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
index 3c10e2656..2f92973fa 100644
--- 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