From 089ea60725b2956b4ebf18fb1499bdb673a6dba2 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 24 Jul 2022 19:21:16 +0200 Subject: [PATCH] add a tag prop with a list of predefined container tags --- .../props-panel/use-props-logic.test.ts | 89 ++++++++++++++++--- .../react-sdk/src/components/box.props.json | 65 ++++++++++++++ packages/react-sdk/src/components/box.tsx | 30 +++++-- packages/react-sdk/src/components/heading.tsx | 6 +- 4 files changed, 167 insertions(+), 23 deletions(-) diff --git a/apps/designer/app/designer/features/props-panel/use-props-logic.test.ts b/apps/designer/app/designer/features/props-panel/use-props-logic.test.ts index 72ab7c4588..6d359c1668 100644 --- a/apps/designer/app/designer/features/props-panel/use-props-logic.test.ts +++ b/apps/designer/app/designer/features/props-panel/use-props-logic.test.ts @@ -102,20 +102,26 @@ describe("usePropsLogic", () => { }) ); - expect(result.current.userProps.length).toEqual(0); + expect(result.current.userProps.length).toEqual(1); act(() => { result.current.addEmptyProp(); }); - expect(result.current.userProps.length).toEqual(1); - expect(result.current.userProps[0]).toMatchObject({ prop: "", value: "" }); + expect(result.current.userProps.length).toEqual(2); + expect(result.current.userProps[1]).toMatchObject({ prop: "", value: "" }); }); test("should remove a prop", () => { const { result } = renderHook(() => usePropsLogic({ selectedInstanceData: getSelectedInstanceData("Box", [ + { + id: "1", + prop: "tag", + value: "div", + required: true, + }, { id: "disabled", prop: "disabled", @@ -130,14 +136,29 @@ describe("usePropsLogic", () => { result.current.handleDeleteProp("disabled"); }); - expect(result.current.userProps.length).toEqual(0); - expect(result.current.userProps).toMatchInlineSnapshot(`Array []`); + expect(result.current.userProps.length).toEqual(1); + expect(result.current.userProps).toMatchInlineSnapshot(` + Array [ + Object { + "id": "1", + "prop": "tag", + "required": true, + "value": "div", + }, + ] + `); }); test("should update a prop", () => { const { result } = renderHook(() => usePropsLogic({ selectedInstanceData: getSelectedInstanceData("Box", [ + { + id: "1", + prop: "tag", + value: "div", + required: true, + }, { id: "disabled", prop: "disabled", @@ -158,6 +179,12 @@ describe("usePropsLogic", () => { expect(result.current.userProps).toMatchInlineSnapshot(` Array [ + Object { + "id": "1", + "prop": "tag", + "required": true, + "value": "div", + }, Object { "id": "disabled", "prop": "disabled2", @@ -171,6 +198,12 @@ describe("usePropsLogic", () => { const { result } = renderHook(() => usePropsLogic({ selectedInstanceData: getSelectedInstanceData("Box", [ + { + id: "1", + prop: "tag", + value: "div", + required: true, + }, { id: "disabled", prop: "disabled", @@ -182,15 +215,21 @@ describe("usePropsLogic", () => { }) ); - expect(result.current.userProps.length).toEqual(1); + expect(result.current.userProps.length).toEqual(2); act(() => { result.current.handleDeleteProp("disabled"); }); - expect(result.current.userProps.length).toEqual(1); + expect(result.current.userProps.length).toEqual(2); expect(result.current.userProps).toMatchInlineSnapshot(` Array [ + Object { + "id": "1", + "prop": "tag", + "required": true, + "value": "div", + }, Object { "id": "disabled", "prop": "disabled", @@ -206,7 +245,13 @@ describe("usePropsLogic", () => { usePropsLogic({ selectedInstanceData: getSelectedInstanceData("Box", [ { - id: "test", + id: "1", + prop: "tag", + value: "div", + required: true, + }, + { + id: "2", prop: "test", value: "test", required: true, @@ -217,13 +262,19 @@ describe("usePropsLogic", () => { ); act(() => { - result.current.handleChangeProp("test", "prop", "test-example"); + result.current.handleChangeProp("2", "prop", "test-example"); }); expect(result.current.userProps).toMatchInlineSnapshot(` Array [ Object { - "id": "test", + "id": "1", + "prop": "tag", + "required": true, + "value": "div", + }, + Object { + "id": "2", "prop": "test", "required": true, "value": "test", @@ -237,7 +288,13 @@ describe("usePropsLogic", () => { usePropsLogic({ selectedInstanceData: getSelectedInstanceData("Box", [ { - id: "test", + id: "1", + prop: "tag", + value: "div", + required: true, + }, + { + id: "2", prop: "test", value: true, required: true, @@ -248,13 +305,19 @@ describe("usePropsLogic", () => { ); act(() => { - result.current.handleChangeProp("test", "value", false); + result.current.handleChangeProp("2", "value", false); }); expect(result.current.userProps).toMatchInlineSnapshot(` Array [ Object { - "id": "test", + "id": "1", + "prop": "tag", + "required": true, + "value": "div", + }, + Object { + "id": "2", "prop": "test", "required": true, "value": false, diff --git a/packages/react-sdk/src/components/box.props.json b/packages/react-sdk/src/components/box.props.json index 839f40892d..4317e5c799 100644 --- a/packages/react-sdk/src/components/box.props.json +++ b/packages/react-sdk/src/components/box.props.json @@ -2200,5 +2200,70 @@ "control": { "type": "text" } + }, + "tag": { + "defaultValue": { + "value": "div" + }, + "description": "", + "name": "tag", + "declarations": [ + { + "fileName": "src/components/box.tsx", + "name": "TypeLiteral" + } + ], + "required": false, + "type": { + "name": "enum", + "raw": "\"div\" | \"address\" | \"article\" | \"aside\" | \"figure\" | \"footer\" | \"header\" | \"main\" | \"nav\" | \"section\"", + "value": [ + { + "value": "\"div\"" + }, + { + "value": "\"address\"" + }, + { + "value": "\"article\"" + }, + { + "value": "\"aside\"" + }, + { + "value": "\"figure\"" + }, + { + "value": "\"footer\"" + }, + { + "value": "\"header\"" + }, + { + "value": "\"main\"" + }, + { + "value": "\"nav\"" + }, + { + "value": "\"section\"" + } + ] + }, + "control": { + "type": "select" + }, + "options": [ + "div", + "address", + "article", + "aside", + "figure", + "footer", + "header", + "main", + "nav", + "section" + ] } } diff --git a/packages/react-sdk/src/components/box.tsx b/packages/react-sdk/src/components/box.tsx index b3525d7924..65174fc72d 100644 --- a/packages/react-sdk/src/components/box.tsx +++ b/packages/react-sdk/src/components/box.tsx @@ -1,10 +1,30 @@ -import React, { forwardRef, type ElementRef, type ComponentProps } from "react"; +import React, { + createElement, + forwardRef, + type ElementRef, + type ComponentProps, +} from "react"; const defaultTag = "div"; -export const Box = forwardRef< - ElementRef, - ComponentProps ->((props, ref) =>
); +type Props = ComponentProps & { + tag?: + | "div" + | "header" + | "footer" + | "nav" + | "main" + | "section" + | "article" + | "aside" + | "address" + | "figure"; +}; + +export const Box = forwardRef, Props>( + ({ tag = defaultTag, ...props }, ref) => { + return createElement(tag as string, { ...props, ref }); + } +); Box.displayName = "Box"; diff --git a/packages/react-sdk/src/components/heading.tsx b/packages/react-sdk/src/components/heading.tsx index 5df7f5b8fb..49a5f14474 100644 --- a/packages/react-sdk/src/components/heading.tsx +++ b/packages/react-sdk/src/components/heading.tsx @@ -12,13 +12,9 @@ type Props = ComponentProps & { }; export const Heading = forwardRef, Props>( - ({ tag, ...props }, ref) => { + ({ tag = defaultTag, ...props }, ref) => { return createElement(tag as string, { ...props, ref }); } ); -Heading.defaultProps = { - tag: "h1", -}; - Heading.displayName = "Heading";