Merge pull request noya-app#382 from noya-app/passthrough-block

Passthrough block

packages/noya-compiler/src/index.ts

@@ -276,7 +276,7 @@ function Frame(props: React.ComponentProps<typeof Box>) {
         name: 'app',
         dependencies: {
           react: '^18',
-          '@chakra-ui/icons': '^2',
+          '@chakra-ui/icons': '^1',
           '@chakra-ui/react': '^1',
           '@emotion/react': '^11',
           '@emotion/styled': '^11',

packages/noya-file-format/src/types.ts

@@ -1183,6 +1183,7 @@ export type OverrideValue = {
   overrideName: OverrideName;
   value: boolean | string | Uuid | FileRef | DataRef | ResolvedBlockData;
 };
+
 /**
  * Slice layers allow the content beneath their frame to be exported
  */

packages/noya-state/src/reducers/interactionReducer.ts

@@ -67,6 +67,7 @@ export type BlockDefinition = {
   placeholderText?: string;
   editorVersion?: number;
   usesResolver?: boolean;
+  isPassthrough?: boolean;
 };
 
 export type InteractionMethod = 'mouse' | 'keyboard';

packages/site/src/__tests__/__snapshots__/editor.test.ts.snap

@@ -38,6 +38,18 @@ Array [
     "symbolId": "cdf2346b-cb21-4f23-8d93-7c4fb2e3a5a0",
     "type": "paragraph",
   },
+  Object {
+    "children": Array [
+      Object {
+        "text": "",
+      },
+    ],
+    "label": "Link",
+    "layerId": "eee85c94-7361-4bcf-8afb-f59c6e8661f7",
+    "placeholder": "Learn more #text-slate-800 #icon-arrow-forward",
+    "symbolId": "5be80b87-7bd6-4090-8947-316d54064544",
+    "type": "paragraph",
+  },
   Object {
     "children": Array [
       Object {

packages/site/src/__tests__/__snapshots__/renderBlock.test.ts.snap

@@ -61,7 +61,7 @@ export { App };
   \\"name\\": \\"app\\",
   \\"dependencies\\": {
     \\"react\\": \\"^18\\",
-    \\"@chakra-ui/icons\\": \\"^2\\",
+    \\"@chakra-ui/icons\\": \\"^1\\",
     \\"@chakra-ui/react\\": \\"^1\\",
     \\"@emotion/react\\": \\"^11\\",
     \\"@emotion/styled\\": \\"^11\\"
@@ -85,15 +85,22 @@ exports[`hero default 1`] = `
     <Text className=\\"mb-4\\" textAlign=\\"center\\">
       {'Turn great ideas into new possibilities.'}
     </Text>
-    <Button size=\\"md\\" backgroundColor=\\"#15803d\\" color=\\"#fff\\" isDisabled={false}>
-      {'Get started'}
-    </Button>
+    <Flex className=\\"bg-transparent flex-row items-center gap-6\\">
+      <Button
+        size=\\"md\\"
+        backgroundColor=\\"#15803d\\"
+        color=\\"#fff\\"
+        isDisabled={false}
+      >
+        {'Get started'}
+      </Button>
+    </Flex>
   </Flex>
 </Frame>;
 "
 `;
 
-exports[`hero left aligned default 1`] = `
+exports[`hero left aligned 1`] = `
 "<Frame width={400} height={400}>
   <Flex
     width=\\"400px\\"
@@ -108,15 +115,22 @@ exports[`hero left aligned default 1`] = `
     <Text className=\\"mb-4\\" textAlign=\\"left\\">
       {'Turn great ideas into new possibilities.'}
     </Text>
-    <Button size=\\"md\\" backgroundColor=\\"#15803d\\" color=\\"#fff\\" isDisabled={false}>
-      {'Get started'}
-    </Button>
+    <Flex className=\\"bg-transparent flex-row items-center gap-6\\">
+      <Button
+        size=\\"md\\"
+        backgroundColor=\\"#15803d\\"
+        color=\\"#fff\\"
+        isDisabled={false}
+      >
+        {'Get started'}
+      </Button>
+    </Flex>
   </Flex>
 </Frame>;
 "
 `;
 
-exports[`hero with bg default 1`] = `
+exports[`hero with bg 1`] = `
 "<Frame width={400} height={400}>
   <Flex
     width=\\"400px\\"
@@ -137,15 +151,17 @@ exports[`hero with bg default 1`] = `
     <Text className=\\"mb-4 text-white\\" textAlign=\\"center\\">
       {'Turn great ideas into new possibilities.'}
     </Text>
-    <Button
-      size=\\"md\\"
-      backgroundColor=\\"#f1f5f9\\"
-      color=\\"#000\\"
-      isDisabled={false}
-      className=\\"text-white\\"
-    >
-      {'Get started'}
-    </Button>
+    <Flex className=\\"bg-transparent flex-row items-center gap-6\\">
+      <Button
+        size=\\"md\\"
+        backgroundColor=\\"#f1f5f9\\"
+        color=\\"#000\\"
+        isDisabled={false}
+        className=\\"text-white\\"
+      >
+        {'Get started'}
+      </Button>
+    </Flex>
   </Flex>
 </Frame>;
 "
@@ -181,6 +197,15 @@ exports[`icon with color 1`] = `
 "
 `;
 
+exports[`link with icon 1`] = `
+"<Frame width={100} height={40}>
+  <Link fontWeight=\\"semibold\\" color=\\"dodgerblue\\">
+    {'Test'}
+  </Link>
+</Frame>;
+"
+`;
+
 exports[`text default 1`] = `
 "<Frame width={100} height={40}>
   <Text className=\\"text-red-500\\" textAlign=\\"center\\">

packages/site/src/__tests__/renderBlock.test.ts

@@ -18,6 +18,7 @@ import {
   heroSymbolV2Id,
   iconSymbolId,
   imageSymbolId,
+  linkSymbolId,
   textSymbolId,
 } from '../ayon/blocks/symbolIds';
 
@@ -69,6 +70,22 @@ describe('text', () => {
   });
 });
 
+describe('link', () => {
+  // TODO: Icon doesn't get added to exported code
+  test('with icon', () => {
+    const symbol = SketchModel.symbolInstance({
+      symbolID: linkSymbolId,
+      blockText: 'Test #icon-arrow-right',
+      frame: SketchModel.rect({
+        width: 100,
+        height: 40,
+      }),
+    });
+
+    expect(generate(symbol)).toMatchSnapshot();
+  });
+});
+
 describe('icon', () => {
   test('default', () => {
     const symbol = SketchModel.symbolInstance({
@@ -108,10 +125,8 @@ describe('hero', () => {
 
     expect(generate(symbol)).toMatchSnapshot();
   });
-});
 
-describe('hero left aligned', () => {
-  test('default', () => {
+  test('left aligned', () => {
     const symbol = SketchModel.symbolInstance({
       symbolID: heroSymbolV2Id,
       frame: SketchModel.rect({
@@ -123,10 +138,8 @@ describe('hero left aligned', () => {
 
     expect(generate(symbol)).toMatchSnapshot();
   });
-});
 
-describe('hero with bg', () => {
-  test('default', () => {
+  test('with bg', () => {
     const symbol = SketchModel.symbolInstance({
       symbolID: heroSymbolV2Id,
       frame: SketchModel.rect({

packages/site/src/ayon/Widget.tsx

@@ -340,11 +340,31 @@ export const Widget = forwardRef(function Widget(
       },
     };
 
-    const { container: containerBlockProps, children: childrenBlockProps } =
-      getRenderableBlockProps({
-        props: blockProps,
-        block: Block,
-      });
+    const {
+      container: containerBlockProps,
+      children: childrenBlockProps,
+      extraParameters,
+    } = getRenderableBlockProps({
+      props: blockProps,
+      block: Block,
+    });
+
+    const flattenedChildrenBlockProps = childrenBlockProps.flatMap(
+      (childProps) => {
+        const block = blockProps.getBlock(childProps.symbolId);
+
+        if (block.isPassthrough) {
+          return getRenderableBlockProps({
+            props: childProps,
+            block: block,
+            extraParameters,
+            overrideValues: blockProps.layer?.overrideValues,
+          }).children;
+        }
+
+        return [childProps];
+      },
+    );
 
     const containerLayer = SketchModel.symbolInstance({
       symbolID: boxSymbolId,
@@ -354,7 +374,7 @@ export const Widget = forwardRef(function Widget(
 
     const actions: Action[] = [];
 
-    const layers = childrenBlockProps.flatMap((child) => {
+    const layers = flattenedChildrenBlockProps.flatMap((child) => {
       if (!child.dataSet) return [];
 
       const element = document.querySelector<HTMLElement>(

packages/site/src/ayon/blocks/LinkBlock.tsx

@@ -0,0 +1,63 @@
+import { ArrowForwardIcon } from '@chakra-ui/icons';
+import { Link } from '@chakra-ui/react';
+import { BlockDefinition } from 'noya-state';
+import React from 'react';
+import { parseBlock } from '../parse';
+import { linkSymbol } from './symbols';
+import {
+  getBlockClassName,
+  hasClassGroup,
+  tailwindTextClasses,
+} from './tailwind';
+
+const placeholderText = 'Read More';
+
+const parser = 'regular';
+
+export const LinkBlock: BlockDefinition = {
+  symbol: linkSymbol,
+  parser,
+  hashtags: [
+    'icon-arrow-forward',
+    'left',
+    'center',
+    'right',
+    ...tailwindTextClasses,
+    'flex-1',
+  ],
+  placeholderText,
+  infer: ({ frame, blockText }) => 0,
+  render: (props) => {
+    const { content, parameters } = parseBlock(props.blockText, parser, {
+      placeholder: placeholderText,
+    });
+
+    const hashtags = Object.keys(parameters);
+    const hasColor = hasClassGroup('textColor', hashtags);
+
+    return (
+      <Link
+        {...(props.dataSet && {
+          key: props.dataSet.id,
+          'data-noya-id': props.dataSet.id,
+          'data-noya-parent-id': props.dataSet.parentId,
+        })}
+        fontWeight="semibold"
+        color={hasColor ? '' : 'dodgerblue'}
+        className={getBlockClassName(hashtags)}
+      >
+        {content}
+        {parameters['icon-arrow-forward'] && (
+          <>
+            {' '}
+            <ArrowForwardIcon
+              style={{
+                verticalAlign: 'text-bottom',
+              }}
+            />
+          </>
+        )}
+      </Link>
+    );
+  },
+};

packages/site/src/ayon/blocks/SpacerBlock.tsx

@@ -10,6 +10,7 @@ export const SpacerBlock: BlockDefinition = {
   parser: 'regular',
   hashtags: tailwindBlockClasses,
   infer: ({ frame, blockText }) => 0,
+  isPassthrough: true,
   render: (props) => {
     const { parameters } = parseBlock(props.blockText, 'regular');
     const hashtags = Object.keys(parameters);

packages/site/src/ayon/blocks/blockMetadata.ts

@@ -16,6 +16,7 @@ import {
   iconSymbolId,
   imageSymbolId,
   inputSymbolId,
+  linkSymbolId,
   radioSymbolId,
   selectSymbolId,
   sidebarSymbolId,
@@ -71,6 +72,11 @@ export const blockMetadata: Record<string, BlockMetadata> = {
     category: 'element',
     preferredSize: { width: 200, height: 40 },
   },
+  [linkSymbolId]: {
+    name: 'Link',
+    category: 'element',
+    preferredSize: { width: 200, height: 40 },
+  },
   [boxSymbolId]: {
     name: 'Box',
     category: 'element',