Repeating component implemented

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)[] };

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<any>[] = [];
-  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) {

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: {

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 (
     <div style={styles} data-atri-canvas-id={props.canvasZoneId}>
       {childCompIds.map((childCompId) => {
-        const { acceptsChild } = componentStoreApi.getComponent(childCompId)!;
+        const { acceptsChild, isRepeating } =
+          componentStoreApi.getComponent(childCompId)!;
         return acceptsChild ? (
-          <ParentComponentRenderer id={childCompId} key={childCompId} />
+          isRepeating ? (
+            <RepeatingComponentRenderer id={childCompId} key={childCompId} />
+          ) : (
+            <ParentComponentRenderer id={childCompId} key={childCompId} />
+          )
         ) : (
           <NormalComponentRenderer id={childCompId} key={childCompId} />
         );

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 (
     <Comp {...compProps} ref={ref} {...callbacks}>
       {children.map((childId) => {
-        const { acceptsChild } = componentStoreApi.getComponent(childId)!;
+        const { acceptsChild, isRepeating } =
+          componentStoreApi.getComponent(childId)!;
         return acceptsChild ? (
-          <ParentComponentRenderer id={childId} key={childId} />
+          isRepeating ? (
+            <RepeatingComponentRenderer id={childId} key={childId} />
+          ) : (
+            <ParentComponentRenderer id={childId} key={childId} />
+          )
         ) : (
           <NormalComponentRenderer id={childId} key={childId} />
         );

packages/atri-app-core/src/editor-components/RepeatingComponentRenderer/RepeatingComponentRenderer.tsx

@@ -1,51 +1,55 @@
-import { canvasApi, componentStoreApi } from "../../api";
+import { componentStoreApi } from "../../api";
 import { RepeatingComponentRendererProps } from "../../types";
-import { useMemo, useEffect } from "react";
-import { RepeatingComponentNormalRenderer } from "./childFC/RepeatingComponentNormalRenderer";
+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 = useMemo(() => {
-    const { start, end } = componentStoreApi.getComponentProps(props.id).custom;
-    const num = end - start;
-    const descs = componentStoreApi.getAllDescendants(props.id);
-    const descsProps = descs.map((desc) => {
-      const { props, callbacks, ref, id } =
-        componentStoreApi.getComponent(desc)!;
-      return { props, callbacks, ref, id };
-    });
-    return Array.from(Array(num).keys()).map(() => {
-      return descsProps;
-    });
-  }, [componentStoreApi.getComponentProps(props.id).custom, props.id]);
-  // create RepeatingComponentParentRenderer <- This will be the children FC
-  // create RepeatingComponentNormalRenderer <- This will be the children FC
   const {
     comp: Comp,
     props: compProps,
     ref,
     callbacks,
   } = componentStoreApi.getComponent(props.id)!;
-  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;
-      }
+
+  const { start, end } = componentStoreApi.getComponentProps(props.id).custom;
+  const [num, setNum] = useState<number>(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 ? (
+          <RepeatingComponentRenderer id={childId} key={childId} />
+        ) : (
+          <ParentComponentRenderer id={childId} key={childId} />
+        )
+      ) : (
+        <NormalComponentRenderer id={childId} key={childId} />
+      );
     });
-  }, []);
+  }
 
   return (
     <Comp
       {...compProps}
       ref={ref}
       {...callbacks}
-      ChildFC={RepeatingComponentNormalRenderer}
-    />
+      children={childrenNodes || []}
+    ></Comp>
   );
 }

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 };

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"]
 }

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"
+  }
+}

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
+```

packages/pwa-style-layer/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@atrilabs/pwa-style-layer",
+  "version": "0.0.90",
+  "description": "> TODO: description",
+  "author": "cruxcode <swaroopshyam0@gmail.com>",
+  "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"
+  }
+}

packages/pwa-style-layer/src/atri-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@atrilabs/layer-types" />

packages/pwa-style-layer/src/hooks/useListenSelect.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+export function useListenSelect() {
+  const [selectedId, setSelectedId] = useState<string | null>(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 };
+}

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 (
+    <>
+      <Tab></Tab>
+    </>
+  );
+}

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"]
+}

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 <Repeating ref={ref} {...props} styles={overrideStyleProps} />;
+});
+
+export default DevRepeating;

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: {