From 62d73e9ca3cbd42909ba612c52ffb46520661abc Mon Sep 17 00:00:00 2001 From: cruxcode Date: Fri, 17 Feb 2023 00:57:33 -0800 Subject: [PATCH 1/3] throw select. selectEnd to parent window --- packages/atri-app-core/src/api/canvasApi.ts | 6 +++++ packages/atri-app-core/src/canvasMachine.ts | 12 +++++++-- packages/component-style-layer/tsconfig.json | 2 +- packages/pwa-style-layer/.eslintrc.json | 7 ++++++ packages/pwa-style-layer/README.md | 11 ++++++++ packages/pwa-style-layer/package.json | 23 +++++++++++++++++ .../pwa-style-layer/src/atri-app-env.d.ts | 1 + .../src/hooks/useListenSelect.ts | 22 ++++++++++++++++ packages/pwa-style-layer/src/index.tsx | 11 ++++++++ packages/pwa-style-layer/tsconfig.json | 25 +++++++++++++++++++ 10 files changed, 117 insertions(+), 3 deletions(-) create mode 100644 packages/pwa-style-layer/.eslintrc.json create mode 100644 packages/pwa-style-layer/README.md create mode 100644 packages/pwa-style-layer/package.json create mode 100644 packages/pwa-style-layer/src/atri-app-env.d.ts create mode 100644 packages/pwa-style-layer/src/hooks/useListenSelect.ts create mode 100644 packages/pwa-style-layer/src/index.tsx create mode 100644 packages/pwa-style-layer/tsconfig.json diff --git a/packages/atri-app-core/src/api/canvasApi.ts b/packages/atri-app-core/src/api/canvasApi.ts index 6b99a9c1c..63d25b011 100644 --- a/packages/atri-app-core/src/api/canvasApi.ts +++ b/packages/atri-app-core/src/api/canvasApi.ts @@ -80,6 +80,12 @@ subscribeCanvasMachine("upWhileDrag", (context) => { ); } }); +subscribeCanvasMachine("select", (context) => { + window.parent?.postMessage({ type: "select", id: context.selected }, "*"); +}); +subscribeCanvasMachine("selectEnd", (context) => { + window.parent?.postMessage({ type: "selectEnd", id: context.selected }, "*"); +}); const componentEventSubscribers: { [key in ComponentEvent]: { [compId: string]: (() => void)[] }; diff --git a/packages/atri-app-core/src/canvasMachine.ts b/packages/atri-app-core/src/canvasMachine.ts index c8cff8bf0..437ba8d61 100644 --- a/packages/atri-app-core/src/canvasMachine.ts +++ b/packages/atri-app-core/src/canvasMachine.ts @@ -252,7 +252,9 @@ type SubscribeStates = | "hoverEnd" | "focus" | "focusEnd" - | typeof COMPONENT_RENDERED; + | typeof COMPONENT_RENDERED + | "select" + | "selectEnd"; export function createCanvasMachine(id: string) { const subscribers: { [key in SubscribeStates]: Callback[] } = { @@ -267,6 +269,8 @@ export function createCanvasMachine(id: string) { focus: [], focusEnd: [], COMPONENT_RENDERED: [], + select: [], + selectEnd: [], }; function subscribeCanvasMachine(state: SubscribeStates, cb: Callback) { subscribers[state].push(cb); @@ -380,7 +384,11 @@ export function createCanvasMachine(id: string) { }, }, [selected]: { - exit: (context) => { + entry: (context, event) => { + callSubscribers("select", context, event); + }, + exit: (context, event) => { + callSubscribers("selectEnd", context, event); context.selected = null; }, on: { diff --git a/packages/component-style-layer/tsconfig.json b/packages/component-style-layer/tsconfig.json index 524bdb507..50b604999 100644 --- a/packages/component-style-layer/tsconfig.json +++ b/packages/component-style-layer/tsconfig.json @@ -21,5 +21,5 @@ "rootDir": "src", "outDir": "lib" }, - "include": ["src"] + "include": ["src", "../pwa-style-layer/src/hooks/useListenSelect.ts"] } diff --git a/packages/pwa-style-layer/.eslintrc.json b/packages/pwa-style-layer/.eslintrc.json new file mode 100644 index 000000000..6098fcd88 --- /dev/null +++ b/packages/pwa-style-layer/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "plugins": ["atrilabs"], + "extends": ["plugin:atrilabs/layer", "react-app", "prettier"], + "rules": { + "import/no-anonymous-default-export": "off" + } +} diff --git a/packages/pwa-style-layer/README.md b/packages/pwa-style-layer/README.md new file mode 100644 index 000000000..95fc01348 --- /dev/null +++ b/packages/pwa-style-layer/README.md @@ -0,0 +1,11 @@ +# `@atrilabs/pwa-style-layer` + +> TODO: description + +## Usage + +``` +const pwaStyleLayer = require('@atrilabs/pwa-style-layer'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/pwa-style-layer/package.json b/packages/pwa-style-layer/package.json new file mode 100644 index 000000000..fcc0683ec --- /dev/null +++ b/packages/pwa-style-layer/package.json @@ -0,0 +1,23 @@ +{ + "name": "@atrilabs/pwa-style-layer", + "version": "0.0.90", + "description": "> TODO: description", + "author": "cruxcode ", + "homepage": "https://github.com/cruxcode/atrilabs-engine#readme", + "license": "ISC", + "main": "src/index.tsx", + "files": [ + "src" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/cruxcode/atrilabs-engine.git" + }, + "scripts": {}, + "bugs": { + "url": "https://github.com/cruxcode/atrilabs-engine/issues" + } +} diff --git a/packages/pwa-style-layer/src/atri-app-env.d.ts b/packages/pwa-style-layer/src/atri-app-env.d.ts new file mode 100644 index 000000000..7818a20f5 --- /dev/null +++ b/packages/pwa-style-layer/src/atri-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/pwa-style-layer/src/hooks/useListenSelect.ts b/packages/pwa-style-layer/src/hooks/useListenSelect.ts new file mode 100644 index 000000000..95b1df074 --- /dev/null +++ b/packages/pwa-style-layer/src/hooks/useListenSelect.ts @@ -0,0 +1,22 @@ +import { useEffect, useState } from "react"; + +export function useListenSelect() { + const [selectedId, setSelectedId] = useState(null); + + useEffect(() => { + const cb = (ev: MessageEvent) => { + if (ev.data?.type === "select") { + setSelectedId(ev.data.id); + } + if (ev.data?.type === "selectEnd") { + setSelectedId(null); + } + }; + window.addEventListener("message", cb); + return () => { + window.removeEventListener("message", cb); + }; + }, []); + + return { selectedId }; +} diff --git a/packages/pwa-style-layer/src/index.tsx b/packages/pwa-style-layer/src/index.tsx new file mode 100644 index 000000000..aaa8a029e --- /dev/null +++ b/packages/pwa-style-layer/src/index.tsx @@ -0,0 +1,11 @@ +import { useListenSelect } from "./hooks/useListenSelect"; +import { Tab } from "@atrilabs/core"; + +export default function () { + useListenSelect(); + return ( + <> + + + ); +} diff --git a/packages/pwa-style-layer/tsconfig.json b/packages/pwa-style-layer/tsconfig.json new file mode 100644 index 000000000..524bdb507 --- /dev/null +++ b/packages/pwa-style-layer/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "es6", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": false, + "jsx": "react-jsx", + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "rootDir": "src", + "outDir": "lib" + }, + "include": ["src"] +} From 5aa3cbf9719630b28bc3d7e420433e03efb4d887 Mon Sep 17 00:00:00 2001 From: cruxcode Date: Fri, 17 Feb 2023 00:59:23 -0800 Subject: [PATCH 2/3] wip: RepeatingComponent --- .../RepeatingComponentRenderer.tsx | 37 ++++++++++--------- .../RepeatingComponentParentRenderer.tsx | 4 +- .../src/manifests/Repeating/Repeating.tsx | 10 ++--- 3 files changed, 26 insertions(+), 25 deletions(-) diff --git a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx b/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx index d7f352033..9a4f4c382 100644 --- a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx +++ b/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx @@ -1,25 +1,28 @@ import { canvasApi, componentStoreApi } from "../../api"; -import { RepeatingComponentRendererProps } from "../../types"; -import { useMemo, useEffect } from "react"; +import { CanvasComponent, RepeatingComponentRendererProps } from "../../types"; +import { useMemo, useEffect, useState } from "react"; import { RepeatingComponentNormalRenderer } from "./childFC/RepeatingComponentNormalRenderer"; +import { RepeatingComponentParentRenderer } from "./childFC/RepeatingComponentParentRenderer"; export function RepeatingComponentRenderer( props: RepeatingComponentRendererProps ) { // create custom data for all children - const data = useMemo(() => { + const data = () => { const { start, end } = componentStoreApi.getComponentProps(props.id).custom; const num = end - start; const descs = componentStoreApi.getAllDescendants(props.id); - const descsProps = descs.map((desc) => { + const descsProps = descs.reduce((curr, desc) => { const { props, callbacks, ref, id } = componentStoreApi.getComponent(desc)!; - return { props, callbacks, ref, id }; - }); - return Array.from(Array(num).keys()).map(() => { + curr[desc] = { props, callbacks, ref, id }; + return curr; + }, {} as { [id: string]: Pick }); + const data = Array.from(Array(num).keys()).map(() => { return descsProps; }); - }, [componentStoreApi.getComponentProps(props.id).custom, props.id]); + // listen for events for all the child here?? + }; // create RepeatingComponentParentRenderer <- This will be the children FC // create RepeatingComponentNormalRenderer <- This will be the children FC const { @@ -28,24 +31,24 @@ export function RepeatingComponentRenderer( ref, callbacks, } = componentStoreApi.getComponent(props.id)!; + + const [topLevelChildId, setTopLevelChild] = useState(null); + const [topLevelChildAcceptsChild, setTopLevelChildAcceptsChild] = useState< + boolean | undefined + >(undefined); useEffect(() => { canvasApi.subscribeComponentEvent(props.id, "new_component", () => { const topLevelChildId = - componentStoreApi.getComponentChildrenId(props.id)[0] ?? null; + componentStoreApi.getComponentChildrenId(props.id)[0] || null; let topLevelChildAcceptsChild: boolean | undefined = false; if (topLevelChildId) { topLevelChildAcceptsChild = componentStoreApi.getComponent(topLevelChildId)?.acceptsChild; } + setTopLevelChild(topLevelChildId); + setTopLevelChildAcceptsChild(topLevelChildAcceptsChild); }); }, []); - return ( - - ); + return ; } diff --git a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentParentRenderer.tsx b/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentParentRenderer.tsx index 4dd1c663c..2fef54423 100644 --- a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentParentRenderer.tsx +++ b/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentParentRenderer.tsx @@ -1,3 +1 @@ -export function RepeatingComponentParentRenderer() { - return <>; -} +export function RepeatingComponentParentRenderer(props: { id: string }) {} diff --git a/packages/react-component-manifests/src/manifests/Repeating/Repeating.tsx b/packages/react-component-manifests/src/manifests/Repeating/Repeating.tsx index 1f6df9d33..382a627d1 100644 --- a/packages/react-component-manifests/src/manifests/Repeating/Repeating.tsx +++ b/packages/react-component-manifests/src/manifests/Repeating/Repeating.tsx @@ -4,17 +4,17 @@ const Repeating = forwardRef< HTMLInputElement, { styles: React.CSSProperties; - custom: { start: number; end: number; data: any[] }; + custom: { start: number; end: number }; className?: string; - ChildFC: React.FC<{ data: any }>; + children: React.ReactNode[]; } >((props, ref) => { return (
- {props.custom.data + {props.children .slice(props.custom.start, props.custom.end) - .map((dataI) => { - return ; + .map((child) => { + return child; })}
); From e63cf545be9e024431fbdd679bb4c1a5cc5ee911 Mon Sep 17 00:00:00 2001 From: cruxcode Date: Fri, 17 Feb 2023 11:52:03 -0800 Subject: [PATCH 3/3] RepeatingComponent done --- .../src/api/componentStoreApi.ts | 9 ++- .../CanvasZoneRenderer/CanvasZoneRenderer.tsx | 10 ++- .../ParentComponentRenderer.tsx | 10 ++- .../RepeatingComponentRenderer.tsx | 81 ++++++++++--------- .../RepeatingComponentNormalRenderer.tsx | 3 - .../RepeatingComponentParentRenderer.tsx | 1 - packages/atri-app-core/src/types.ts | 1 + .../src/manifests/Repeating/Repeating.dev.tsx | 30 +++++++ .../manifests/Repeating/Repeating.manifest.ts | 2 +- .../src/manifests/Repeating/Repeating.tsx | 10 +-- 10 files changed, 99 insertions(+), 58 deletions(-) delete mode 100644 packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentNormalRenderer.tsx delete mode 100644 packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentParentRenderer.tsx create mode 100644 packages/react-component-manifests/src/manifests/Repeating/Repeating.dev.tsx diff --git a/packages/atri-app-core/src/api/componentStoreApi.ts b/packages/atri-app-core/src/api/componentStoreApi.ts index 9fed67b89..09eaab186 100644 --- a/packages/atri-app-core/src/api/componentStoreApi.ts +++ b/packages/atri-app-core/src/api/componentStoreApi.ts @@ -29,12 +29,13 @@ function searchComponentFromManifestRegistry(manifestData: { function processManifest(manifest: ReactComponentManifestSchema) { const acceptsChild = manifest.dev.acceptsChild; + const isRepeating = manifest.dev.isRepeating ?? false; const callbacks: { [callbackName: string]: any } = {}; Object.keys(manifest.dev.attachCallbacks).forEach((callbackName) => { callbacks[callbackName] = () => {}; }); const decorators: React.FC[] = []; - return { acceptsChild, callbacks, decorators }; + return { acceptsChild, callbacks, decorators, isRepeating }; } function createComponent( @@ -49,9 +50,8 @@ function createComponent( if (fullManifest) { const { id, props, parent } = componentData; const { devComponent, component } = fullManifest; - const { decorators, acceptsChild, callbacks } = processManifest( - fullManifest.manifest - ); + const { decorators, acceptsChild, callbacks, isRepeating } = + processManifest(fullManifest.manifest); // update component store componentStore[id] = { id, @@ -63,6 +63,7 @@ function createComponent( acceptsChild, callbacks, meta: manifestData, + isRepeating, }; // update reverse map if (parent.id !== CANVAS_ZONE_ROOT_ID) { diff --git a/packages/atri-app-core/src/editor-components/CanvasZoneRenderer/CanvasZoneRenderer.tsx b/packages/atri-app-core/src/editor-components/CanvasZoneRenderer/CanvasZoneRenderer.tsx index 7f245c6c3..701a69f22 100644 --- a/packages/atri-app-core/src/editor-components/CanvasZoneRenderer/CanvasZoneRenderer.tsx +++ b/packages/atri-app-core/src/editor-components/CanvasZoneRenderer/CanvasZoneRenderer.tsx @@ -5,6 +5,7 @@ import { useCanvasZoneEventSubscriber } from "./hooks/useCanvasZoneEventSubscrib import { componentStoreApi } from "../../api"; import { NormalComponentRenderer } from "../NormalComponentRenderer/NormalComponentRenderer"; import { ParentComponentRenderer } from "../ParentComponentRenderer/ParentComponentRenderer"; +import { RepeatingComponentRenderer } from "../RepeatingComponentRenderer/RepeatingComponentRenderer"; export function CanvasZoneRenderer(props: CanvasZoneRendererProps) { const { childCompIds } = useCanvasZoneEventSubscriber({ @@ -22,9 +23,14 @@ export function CanvasZoneRenderer(props: CanvasZoneRendererProps) { return (
{childCompIds.map((childCompId) => { - const { acceptsChild } = componentStoreApi.getComponent(childCompId)!; + const { acceptsChild, isRepeating } = + componentStoreApi.getComponent(childCompId)!; return acceptsChild ? ( - + isRepeating ? ( + + ) : ( + + ) ) : ( ); diff --git a/packages/atri-app-core/src/editor-components/ParentComponentRenderer/ParentComponentRenderer.tsx b/packages/atri-app-core/src/editor-components/ParentComponentRenderer/ParentComponentRenderer.tsx index b9708da35..eb2293b69 100644 --- a/packages/atri-app-core/src/editor-components/ParentComponentRenderer/ParentComponentRenderer.tsx +++ b/packages/atri-app-core/src/editor-components/ParentComponentRenderer/ParentComponentRenderer.tsx @@ -6,6 +6,7 @@ import { useAssignComponentId } from "../hooks/useAssignComponentId"; import { useHandleNewChild } from "./hooks/useHandleNewChild"; import { useFocusComponent } from "../hooks/useFocusComponent"; import { useHasComponentRendered } from "../hooks/useHasComponentRendered"; +import { RepeatingComponentRenderer } from "../RepeatingComponentRenderer/RepeatingComponentRenderer"; export function ParentComponentRenderer(props: ParentComponentRendererProps) { const { @@ -22,9 +23,14 @@ export function ParentComponentRenderer(props: ParentComponentRendererProps) { return ( {children.map((childId) => { - const { acceptsChild } = componentStoreApi.getComponent(childId)!; + const { acceptsChild, isRepeating } = + componentStoreApi.getComponent(childId)!; return acceptsChild ? ( - + isRepeating ? ( + + ) : ( + + ) ) : ( ); diff --git a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx b/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx index 9a4f4c382..18e7805e8 100644 --- a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx +++ b/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx @@ -1,30 +1,17 @@ -import { canvasApi, componentStoreApi } from "../../api"; -import { CanvasComponent, RepeatingComponentRendererProps } from "../../types"; -import { useMemo, useEffect, useState } from "react"; -import { RepeatingComponentNormalRenderer } from "./childFC/RepeatingComponentNormalRenderer"; -import { RepeatingComponentParentRenderer } from "./childFC/RepeatingComponentParentRenderer"; +import { componentStoreApi } from "../../api"; +import { RepeatingComponentRendererProps } from "../../types"; +import { useState } from "react"; +import { useHandleNewChild } from "../ParentComponentRenderer/hooks/useHandleNewChild"; +import { ParentComponentRenderer } from "../ParentComponentRenderer/ParentComponentRenderer"; +import { NormalComponentRenderer } from "../NormalComponentRenderer/NormalComponentRenderer"; +import { useAssignParentMarker } from "../hooks/useAssignParentMaker"; +import { useAssignComponentId } from "../hooks/useAssignComponentId"; +import { useFocusComponent } from "../hooks/useFocusComponent"; +import { useHasComponentRendered } from "../hooks/useHasComponentRendered"; export function RepeatingComponentRenderer( props: RepeatingComponentRendererProps ) { - // create custom data for all children - const data = () => { - const { start, end } = componentStoreApi.getComponentProps(props.id).custom; - const num = end - start; - const descs = componentStoreApi.getAllDescendants(props.id); - const descsProps = descs.reduce((curr, desc) => { - const { props, callbacks, ref, id } = - componentStoreApi.getComponent(desc)!; - curr[desc] = { props, callbacks, ref, id }; - return curr; - }, {} as { [id: string]: Pick }); - const data = Array.from(Array(num).keys()).map(() => { - return descsProps; - }); - // listen for events for all the child here?? - }; - // create RepeatingComponentParentRenderer <- This will be the children FC - // create RepeatingComponentNormalRenderer <- This will be the children FC const { comp: Comp, props: compProps, @@ -32,23 +19,37 @@ export function RepeatingComponentRenderer( callbacks, } = componentStoreApi.getComponent(props.id)!; - const [topLevelChildId, setTopLevelChild] = useState(null); - const [topLevelChildAcceptsChild, setTopLevelChildAcceptsChild] = useState< - boolean | undefined - >(undefined); - useEffect(() => { - canvasApi.subscribeComponentEvent(props.id, "new_component", () => { - const topLevelChildId = - componentStoreApi.getComponentChildrenId(props.id)[0] || null; - let topLevelChildAcceptsChild: boolean | undefined = false; - if (topLevelChildId) { - topLevelChildAcceptsChild = - componentStoreApi.getComponent(topLevelChildId)?.acceptsChild; - } - setTopLevelChild(topLevelChildId); - setTopLevelChildAcceptsChild(topLevelChildAcceptsChild); + const { start, end } = componentStoreApi.getComponentProps(props.id).custom; + const [num, setNum] = useState(end - start); + const { children } = useHandleNewChild({ id: props.id }); + useAssignParentMarker({ id: props.id }); + useAssignComponentId({ id: props.id }); + useFocusComponent({ id: props.id }); + useHasComponentRendered({ id: props.id }); + let childrenNodes: React.ReactNode[] | null = null; + if (children.length === 1) { + childrenNodes = Array.from(Array(num).keys()).map(() => { + const childId = children[0]; + const { acceptsChild, isRepeating } = + componentStoreApi.getComponent(childId)!; + return acceptsChild ? ( + isRepeating ? ( + + ) : ( + + ) + ) : ( + + ); }); - }, []); + } - return ; + return ( + + ); } diff --git a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentNormalRenderer.tsx b/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentNormalRenderer.tsx deleted file mode 100644 index 4da1f9b21..000000000 --- a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentNormalRenderer.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function RepeatingComponentNormalRenderer() { - return <>; -} diff --git a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentParentRenderer.tsx b/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentParentRenderer.tsx deleted file mode 100644 index 2fef54423..000000000 --- a/packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/childFC/RepeatingComponentParentRenderer.tsx +++ /dev/null @@ -1 +0,0 @@ -export function RepeatingComponentParentRenderer(props: { id: string }) {} diff --git a/packages/atri-app-core/src/types.ts b/packages/atri-app-core/src/types.ts index a524bea35..2affe1698 100644 --- a/packages/atri-app-core/src/types.ts +++ b/packages/atri-app-core/src/types.ts @@ -17,6 +17,7 @@ export type CanvasComponent = { acceptsChild: AcceptsChildFunction | undefined; callbacks: { [callbackName: string]: any }; meta: { manifestSchemaId: string; pkg: string; key: string }; + isRepeating: boolean; }; export type CanvasComponentStore = { [compId: string]: CanvasComponent }; diff --git a/packages/react-component-manifests/src/manifests/Repeating/Repeating.dev.tsx b/packages/react-component-manifests/src/manifests/Repeating/Repeating.dev.tsx new file mode 100644 index 000000000..1549649a4 --- /dev/null +++ b/packages/react-component-manifests/src/manifests/Repeating/Repeating.dev.tsx @@ -0,0 +1,30 @@ +import { gray500 } from "@atrilabs/design-system"; +import React, { forwardRef } from "react"; +import Repeating from "./Repeating"; + +const DevRepeating = forwardRef< + HTMLUListElement, + { + styles: React.CSSProperties; + custom: { start: number; end: number }; + className?: string; + children: React.ReactNode[]; + } +>((props, ref) => { + const overrideStyleProps: React.CSSProperties = + props.children.length === 0 + ? { + // do not provide minHeight minWidth if user has provided height width + minHeight: props.styles.height ? "" : "100px", + minWidth: props.styles.width ? "" : "100px", + borderWidth: `2px`, + borderStyle: `dashed`, + borderColor: `${gray500}`, + boxSizing: "border-box", + ...props.styles, + } + : { ...props.styles }; + return ; +}); + +export default DevRepeating; diff --git a/packages/react-component-manifests/src/manifests/Repeating/Repeating.manifest.ts b/packages/react-component-manifests/src/manifests/Repeating/Repeating.manifest.ts index 3fb142095..ded8d9b9a 100644 --- a/packages/react-component-manifests/src/manifests/Repeating/Repeating.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Repeating/Repeating.manifest.ts @@ -90,7 +90,7 @@ const compManifest: ReactComponentManifestSchema = { }; const iconManifest = { - panel: { comp: "Repeating", props: { name: "Repeating" } }, + panel: { comp: "CommonIcon", props: { name: "Repeating" } }, drag: { comp: "CommonIcon", props: { diff --git a/packages/react-component-manifests/src/manifests/Repeating/Repeating.tsx b/packages/react-component-manifests/src/manifests/Repeating/Repeating.tsx index 382a627d1..9357e0d68 100644 --- a/packages/react-component-manifests/src/manifests/Repeating/Repeating.tsx +++ b/packages/react-component-manifests/src/manifests/Repeating/Repeating.tsx @@ -1,7 +1,7 @@ import React, { forwardRef } from "react"; const Repeating = forwardRef< - HTMLInputElement, + HTMLUListElement, { styles: React.CSSProperties; custom: { start: number; end: number }; @@ -10,13 +10,13 @@ const Repeating = forwardRef< } >((props, ref) => { return ( -
+
    {props.children .slice(props.custom.start, props.custom.end) - .map((child) => { - return child; + .map((child, index) => { + return
  • {child}
    • ; })} -
+ ); });