Add theme to compiled next project

noya-app · Dec 6, 2023 · 2083ae2 · 2083ae2
1 parent 49eca0e
commit 2083ae2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/packages/noya-compiler/src/__tests__/compile.test.ts b/packages/noya-compiler/src/__tests__/compile.test.ts
@@ -15,7 +15,7 @@ import {
 import { loadDesignSystem } from 'noya-module-loader';
 import { tailwindColors } from 'noya-tailwind';
 import { uuid } from 'noya-utils';
-import { generateThemeTransformer } from '../compileTheme';
+import { generateThemeFile } from '../compileTheme';
 import { print } from '../print';
 
 const HeroComponent = Model.component({
@@ -156,7 +156,7 @@ describe('theme', () => {
       },
     };
 
-    const transformer = generateThemeTransformer(ChakraDesignSystem, { theme });
+    const transformer = generateThemeFile(ChakraDesignSystem, { theme });
 
     expect(transformer).toMatchSnapshot();
   });

diff --git a/packages/noya-compiler/src/compileTheme.ts b/packages/noya-compiler/src/compileTheme.ts
@@ -30,13 +30,13 @@ import { format, print } from './print';
  * });
  * ```
  */
-export function generateThemeTransformer(
+export function generateThemeFile(
   DesignSystem: DesignSystemDefinition,
   themeValue: any,
 ): string {
   if (!DesignSystem.themeTransformer) return '';
 
-  const Components = buildNamespaceMap(DesignSystem.imports);
+  const namespaceMap = buildNamespaceMap(DesignSystem.imports);
   const imports: { name: string; source: string }[] = [];
 
   function convert(transformer: any): ts.Expression {
@@ -51,7 +51,7 @@ export function generateThemeTransformer(
           );
         }
         case 'function': {
-          const func = Components.get(transformer.value);
+          const func = namespaceMap.get(transformer.value);
 
           if (!func) return ts.factory.createNull();
 
@@ -112,7 +112,7 @@ export function generateThemeTransformer(
   return format([print(importsAst), print(themeExportAst)].join('\n\n'));
 }
 
-export function accessPath(data: any, path: string): any {
+function accessPath(data: any, path: string): any {
   if (path === '.') return data;
   const parts = path.split('.');
   let currentValue = data;
@@ -122,7 +122,7 @@ export function accessPath(data: any, path: string): any {
   return currentValue;
 }
 
-export function isTransformer(value: unknown): value is Transformer {
+function isTransformer(value: unknown): value is Transformer {
   return (
     typeof value === 'object' &&
     value !== null &&

diff --git a/packages/noya-compiler/src/index.ts b/packages/noya-compiler/src/index.ts
@@ -1,5 +1,6 @@
 import {
   DesignSystemDefinition,
+  Theme,
   component,
 } from '@noya-design-system/protocol';
 import { DS } from 'noya-api';
@@ -9,6 +10,7 @@ import {
   renderResolvedNode,
 } from 'noya-component';
 import { loadDesignSystem } from 'noya-module-loader';
+import { tailwindColors } from 'noya-tailwind';
 import { groupBy, unique } from 'noya-utils';
 import React, { ReactNode, isValidElement } from 'react';
 import { defineTree, flat } from 'tree-visit';
@@ -23,6 +25,7 @@ import {
   isSimpleElement,
   simpleElement,
 } from './common';
+import { generateThemeFile } from './compileTheme';
 import { LayoutNode, LayoutNodeAttributes } from './parseComponentLayout';
 import { removeEmptyStyles } from './passes/removeEmptyStyles';
 import { removeUndefinedStyles } from './passes/removeUndefinedStyles';
@@ -413,7 +416,9 @@ export function compile(configuration: CompilerConfiguration) {
       {},
       DesignSystem.createElement(
         DesignSystem.components[component.id.Provider],
-        {},
+        {
+          theme: createPassthrough(ts.factory.createIdentifier('theme')),
+        },
         createPassthrough(
           ts.factory.createJsxExpression(
             undefined,
@@ -453,12 +458,26 @@ export function compile(configuration: CompilerConfiguration) {
 
   const layoutSource = [
     "'use client'",
-    "import React from 'react'\n" + print(layoutImports),
+    [
+      "import React from 'react'",
+      print(layoutImports),
+      'import { theme } from "./theme"',
+    ].join('\n'),
     print(layoutComponentFunc),
   ]
     .map(clean)
     .join('\n');
 
+  const theme: Theme = {
+    colorMode: configuration.ds.config.colorMode ?? 'light',
+    colors: {
+      primary: (tailwindColors as any)[configuration.ds.config.colors.primary],
+      neutral: tailwindColors.slate,
+    },
+  };
+
+  const themeFile = generateThemeFile(DesignSystem, { theme });
+
   const files = {
     ...Object.fromEntries(
       componentPageItems.map(({ name, source }) => [
@@ -469,6 +488,7 @@ export function compile(configuration: CompilerConfiguration) {
         source,
       ]),
     ),
+    'src/app/components/theme.ts': themeFile,
     'src/app/components/layout.tsx': layoutSource,
     'package.json': JSON.stringify(
       {