Improve config access within vanilla ds

noya-app · Dec 14, 2023 · 5e353c6 · 5e353c6
1 parent 0031938
commit 5e353c6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 14 deletions.
diff --git a/packages/noya-component/src/renderResolvedNode.tsx b/packages/noya-component/src/renderResolvedNode.tsx
@@ -63,7 +63,7 @@ export function renderResolvedNode({
   dsConfig,
   system,
   stylingMode = 'inline',
-  noya,
+  theme,
 }: {
   containerWidth?: number;
   contentEditable: boolean;
@@ -73,8 +73,10 @@ export function renderResolvedNode({
   dsConfig: DSConfig;
   system: DesignSystemDefinition;
   stylingMode?: StylingMode;
-  noya?: any; // Passed into components as _noya
+  theme?: any;
 }) {
+  const noya = { theme, dsConfig };
+
   return ResolvedHierarchy.map<ReactNode>(
     resolvedNode,
     (element, transformedChildren, indexPath) => {

diff --git a/packages/noya-module-loader/src/VanillaDesignSystem.tsx b/packages/noya-module-loader/src/VanillaDesignSystem.tsx
@@ -3,7 +3,6 @@
 import {
   ButtonVariant,
   DesignSystemDefinition,
-  Theme,
   applyCommonProps,
   component,
   x,
@@ -23,11 +22,6 @@ const handler = {
   },
 };
 
-function getTheme(props: any) {
-  if (props._noya && props._noya.theme) return props._noya.theme as Theme;
-  return undefined;
-}
-
 function getDSConfig(props: any): DSConfig {
   if (props._noya && props._noya.dsConfig) return props._noya.dsConfig;
   return { colorMode: 'light', colors: { primary: 'blue' } };
@@ -104,8 +98,7 @@ const proxyObject = new Proxy(
       return <button {...applyCommonProps({ ...props, className })} />;
     },
     [component.id.Text]: (props: any) => {
-      const theme = getTheme(props);
-      const colorMode = theme?.colorMode || 'light';
+      const colorMode = getDSConfig(props).colorMode ?? 'light';
 
       const className = [
         `text-${colorMode === 'light' ? 'black' : 'white'}`,
@@ -189,7 +182,7 @@ const proxyObject = new Proxy(
       return <img {...applyCommonProps(props)} src={props.src} />;
     },
     [component.id.Avatar]: (props: any) => {
-      const theme = getTheme(props);
+      const colorMode = getDSConfig(props).colorMode ?? 'light';
 
       const className = mergeClasses(
         [
@@ -198,8 +191,8 @@ const proxyObject = new Proxy(
           `items-center`,
           `justify-center`,
           'overflow-hidden',
-          `bg-${theme?.colorMode === 'light' ? 'gray-100' : 'gray-800'}`,
-          `text-${theme?.colorMode === 'light' ? 'gray-300' : 'gray-600'}`,
+          `bg-${colorMode === 'light' ? 'gray-100' : 'gray-800'}`,
+          `text-${colorMode === 'light' ? 'gray-300' : 'gray-600'}`,
         ],
         props.className,
       );

diff --git a/packages/site/src/dseditor/renderDSPreview.tsx b/packages/site/src/dseditor/renderDSPreview.tsx
@@ -34,7 +34,6 @@ export function renderDSPreview({
     resolvedNode,
     dsConfig,
     system: props.system,
-    noya: { theme: props.theme, dsConfig },
   });
 
   const colorMode = dsConfig.colorMode ?? 'light';