Add responsive rendering

Author: dabbott

packages/noya-component/src/renderResolvedNode.tsx

@@ -16,8 +16,10 @@ import {
   svgToDataUri,
 } from 'noya-component';
 import {
+  BreakpointKey,
   extractTailwindClassesByBreakpoint,
   extractTailwindClassesByTheme,
+  matchBreakpoint,
   parametersToTailwindStyle,
   tailwindColors,
 } from 'noya-tailwind';
@@ -52,6 +54,7 @@ export function getImageFromProp(
 }
 
 export function renderResolvedNode({
+  containerWidth,
   contentEditable,
   disableTabNavigation,
   includeDataProps,
@@ -60,6 +63,7 @@ export function renderResolvedNode({
   system,
   theme,
 }: {
+  containerWidth?: number;
   contentEditable: boolean;
   disableTabNavigation: boolean;
   includeDataProps: boolean;
@@ -140,9 +144,15 @@ export function renderResolvedNode({
         dsConfig.colorMode ?? 'light',
       );
 
+      let breakpoint: BreakpointKey = 'md';
+
+      if (containerWidth) {
+        breakpoint = matchBreakpoint(containerWidth);
+      }
+
       // Keep classNames starting with sm: and md:, but remove the prefixes.
       // Remove any classNames starting with lg:, xl:, and 2xl:.
-      classNames = extractTailwindClassesByBreakpoint(classNames, 'md');
+      classNames = extractTailwindClassesByBreakpoint(classNames, breakpoint);
 
       const style = parametersToTailwindStyle(classNames);
 

packages/noya-tailwind/src/tailwind.ts

@@ -187,8 +187,24 @@ export const filterTailwindClassesByLastInGroup = memoize(
   },
 );
 
-const breakpoints = ['sm', 'md', 'lg', 'xl', '2xl'] as const;
-type BreakpointKey = (typeof breakpoints)[number];
+export const breakpoints = [
+  'sm' as const,
+  'md' as const,
+  'lg' as const,
+  'xl' as const,
+  '2xl' as const,
+];
+
+export type BreakpointKey = (typeof breakpoints)[number];
+
+export function matchBreakpoint(width: number): BreakpointKey {
+  if (width < 640) return 'sm';
+  if (width < 768) return 'md';
+  if (width < 1024) return 'lg';
+  if (width < 1280) return 'xl';
+  if (width < 1536) return '2xl';
+  return '2xl';
+}
 
 export const extractTailwindClassesByBreakpoint = (
   classes: string[],
@@ -244,7 +260,7 @@ export const extractTailwindClassesByTheme = (
 
 function getValue(className: string): string | undefined {
   let value =
-    /-((\d+)((\/|\.)\d+)?|(sm|md|lg|xl|2xl|3xl|full|none|auto|screen))$/.exec(
+    /-((\d+)((\/|\.)\d+)?|(sm|md|lg|\d?xl|full|none|auto|screen))$/.exec(
       className,
     )?.[1];
 

packages/noya-utils/src/__tests__/cartesianProduct.test.ts

@@ -86,3 +86,22 @@ test('product 3x3', () => {
     ],
   );
 });
+
+test('array of arrays', () => {
+  expect(
+    cartesianProduct(
+      [
+        [1, 2],
+        [3, 4],
+      ],
+      ['sm', 'md', 'lg'],
+    ),
+  ).toEqual([
+    [[1, 2], 'sm'],
+    [[1, 2], 'md'],
+    [[1, 2], 'lg'],
+    [[3, 4], 'sm'],
+    [[3, 4], 'md'],
+    [[3, 4], 'lg'],
+  ]);
+});

packages/noya-utils/src/cartesianProduct.ts

@@ -14,32 +14,20 @@ export function cartesianProduct<T>(...arrays: T[][]): T[][];
  * Cartesian product of input arrays.
  */
 export function cartesianProduct(...arrays: unknown[][]): unknown[][] {
-  // Product of array lengths up to the current index
-  // We leave the extra [1] in the front of the array since we use it later
-  const lengths = arrays
-    .map((array) => array.length)
-    .reduce((result, value) => [...result, result[result.length - 1] * value], [
-      1,
-    ]);
+  let result: unknown[][] = [[]];
 
-  const resultLength = lengths[lengths.length - 1];
-  const result = new Array<unknown[]>(resultLength);
+  // Iterate over each array, and for each element in the array, add it to each
+  // existing combination. The result will grow exponentially with each array.
+  for (const array of arrays) {
+    const tempResult: unknown[][] = [];
 
-  for (let arrayIndex = 0; arrayIndex < arrays.length; arrayIndex++) {
-    const array = arrays[arrayIndex];
-
-    for (let index = 0; index < resultLength; index++) {
-      const repeat = lengths[lengths.length - 2 - arrayIndex];
-
-      const wrappedIndex = Math.floor(index / repeat) % array.length;
-      const value = array[wrappedIndex];
-
-      if (arrayIndex === 0) {
-        result[index] = [value];
-      } else {
-        result[index].push(value);
+    for (const existingCombo of result) {
+      for (const element of array) {
+        tempResult.push([...existingCombo, element]);
       }
     }
+
+    result = tempResult;
   }
 
   return result;

packages/site/src/dseditor/ControlledFrame.tsx

@@ -1,22 +1,24 @@
+import { Size } from 'noya-geometry';
 import { assignRef } from 'noya-react-utils';
 import React, {
-  HTMLProps,
   forwardRef,
   memo,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 
-interface Props extends HTMLProps<HTMLIFrameElement> {
+interface Props {
   onReady?: () => void;
+  onResize?: (size: Size) => void;
   title: string;
 }
 
 export const ControlledFrame = memo(
   forwardRef(function ControlledFrame(
-    { onReady, ...props }: Props,
+    { onReady, onResize, title }: Props,
     forwardedRef: React.ForwardedRef<HTMLIFrameElement>,
   ) {
     const ref = useRef<HTMLIFrameElement | null>(null);
@@ -34,6 +36,10 @@ export const ControlledFrame = memo(
                 ok = true;
                 break;
               }
+              case 'resize': {
+                onResize?.(event.data.size);
+                break;
+              }
               case 'keydown': {
                 const customEvent = new KeyboardEvent('keydown', {
                   key: event.data.command.key,
@@ -61,7 +67,7 @@ export const ControlledFrame = memo(
       return () => {
         window.removeEventListener('message', listener);
       };
-    }, [id, onReady]);
+    }, [id, onReady, onResize]);
 
     const handleRef = useCallback(
       (value: HTMLIFrameElement | null) => {
@@ -71,16 +77,14 @@ export const ControlledFrame = memo(
       [forwardedRef],
     );
 
+    const style = useMemo(() => ({ width: '100%', height: '100%' }), []);
+
     return (
       <iframe
         ref={handleRef}
         tabIndex={-1}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
-        {...props}
-        title={props.title}
+        title={title}
+        style={style}
         // Ensure html5 doctype for proper styling
         srcDoc={`<!DOCTYPE html>
 <head>
@@ -139,6 +143,15 @@ export const ControlledFrame = memo(
       document.addEventListener('DOMContentLoaded', callback);
     }
 
+    // Handle window resize events
+    window.addEventListener('resize', function(event) {
+      parent.postMessage({ 
+        id, 
+        type: 'resize', 
+        size: { width: window.innerWidth, height: window.innerHeight } 
+      }, '*');
+    });
+
     // Propagate keyboard shortcuts (keydown events) to the parent window
     window.addEventListener('keydown', function(event) {
       // Check if Cmd (for Mac) or Ctrl (for other OS) is pressed

packages/site/src/dseditor/DSRenderer.tsx

@@ -8,8 +8,9 @@ import {
 } from '@noya-design-system/protocol';
 import { DSConfig } from 'noya-api';
 import { Stack } from 'noya-designsystem';
+import { Size } from 'noya-geometry';
 import { loadDesignSystem } from 'noya-module-loader';
-import { useStableCallback } from 'noya-react-utils';
+import { useDeepState, useStableCallback } from 'noya-react-utils';
 import { tailwindColors } from 'noya-tailwind';
 import React, {
   forwardRef,
@@ -48,6 +49,7 @@ export type DSRenderProps = {
   theme: any;
   primary: string;
   iframe: HTMLIFrameElement;
+  size: Size;
 };
 
 export interface IDSRenderer {
@@ -94,6 +96,7 @@ export const DSRenderer = forwardRef(function DSRenderer(
   let [system, setSystem] = React.useState<
     DesignSystemDefinition | undefined
   >();
+  const [iframeSize, setIframeSize] = useDeepState<Size | undefined>();
 
   const handleReady = useCallback(() => {
     setReady(true);
@@ -174,6 +177,10 @@ export const DSRenderer = forwardRef(function DSRenderer(
       theme,
       primary: config.colors.primary,
       iframe,
+      size: iframeSize ?? {
+        width: iframe.clientWidth,
+        height: iframe.clientHeight,
+      },
     });
 
     const withProvider = Provider ? (
@@ -206,6 +213,7 @@ export const DSRenderer = forwardRef(function DSRenderer(
     sync,
     config.colors.primary,
     onContentDidChange,
+    iframeSize,
   ]);
 
   useEffect(() => {
@@ -272,6 +280,7 @@ export const DSRenderer = forwardRef(function DSRenderer(
         ref={ref}
         title="Design System Preview"
         onReady={handleReady}
+        onResize={setIframeSize}
       />
       {!system && <Loading>Loading design system...</Loading>}
     </Stack.V>

packages/site/src/dseditor/completionItems.tsx

@@ -1,7 +1,7 @@
 import { CompletionItem } from 'noya-designsystem';
 import { StarIcon } from 'noya-icons';
-import { allClassNames } from 'noya-tailwind';
-import { range } from 'noya-utils';
+import { allClassNames, breakpoints } from 'noya-tailwind';
+import { cartesianProduct, range } from 'noya-utils';
 import React from 'react';
 import { HashtagIcon } from '../ayon/components/inspector/HashtagIcon';
 import { PRIMITIVE_ELEMENT_MAP, primitiveElements } from './primitiveElements';
@@ -15,23 +15,32 @@ const primaryStyles = [
   ...colorScale.map((value) => `border-primary-${value}`),
 ];
 
-export const styleItems = allClassNames
-  .map(
+const baseStyleItems = [
+  ...allClassNames.map(
     (item): CompletionItem => ({
       name: item,
       id: item,
       icon: <HashtagIcon item={item} />,
     }),
-  )
-  .concat(
-    primaryStyles.map(
-      (item): CompletionItem => ({
-        name: item,
-        id: item,
-        icon: <HashtagIcon item={item} />,
-      }),
-    ),
-  );
+  ),
+  ...primaryStyles.map(
+    (item): CompletionItem => ({
+      name: item,
+      id: item,
+      icon: <HashtagIcon item={item} />,
+    }),
+  ),
+];
+
+const breakpointStyleItems = cartesianProduct(baseStyleItems, breakpoints).map(
+  ([item, breakpoint]): CompletionItem => ({
+    name: `${breakpoint}:${item.name}`,
+    id: `${breakpoint}:${item.id}`,
+    icon: item.icon,
+  }),
+);
+
+export const styleItems = [...baseStyleItems, ...breakpointStyleItems];
 
 export const primitiveElementStyleItems = Object.fromEntries(
   Object.entries(PRIMITIVE_ELEMENT_MAP).map(([id, metadata]) => [

packages/site/src/dseditor/renderDSPreview.tsx

@@ -29,6 +29,7 @@ export function renderDSPreview({
   // const system = isThumbnail ? ThumbnailDesignSystem : props.system;
 
   const content = renderResolvedNode({
+    containerWidth: props.size.width,
     contentEditable: true,
     disableTabNavigation: false,
     includeDataProps: true,