From 54a25988b55ef3cb41033080c2b16c8dd0b5bfd5 Mon Sep 17 00:00:00 2001
From: Anindya Kundu <anindyaak007@gmail.com>
Date: Sat, 7 Sep 2024 23:15:24 +0530
Subject: [PATCH] feat(masonry): [block] modify React component and Storybook
 stories

---
 modules/masonry/src/@types/brick.d.ts         |   5 +
 .../masonry/src/brick/design0/brickFactory.ts |   2 +-
 .../brick/design0/components/BrickBlock.tsx   |  43 +++---
 .../design0/stories/BrickBlock.stories.ts     |  14 +-
 .../brick/stories/components/BrickBlock.tsx   | 138 +++++++++---------
 5 files changed, 104 insertions(+), 98 deletions(-)

diff --git a/modules/masonry/src/@types/brick.d.ts b/modules/masonry/src/@types/brick.d.ts
index d50bac6b..8488cbe8 100644
--- a/modules/masonry/src/@types/brick.d.ts
+++ b/modules/masonry/src/@types/brick.d.ts
@@ -197,4 +197,9 @@ export interface IBrickBlock extends IBrickInstruction, IBrickNotchInsNestTopSta
      * @param extent width and height values of the nest area
      */
     setBoundingBoxNest(extent: TExtent): void;
+
+    get connPointsFixed(): Record<
+        'insTop' | 'insBottom' | 'insNest',
+        { extent: TExtent; coords: TCoords }
+    >;
 }
diff --git a/modules/masonry/src/brick/design0/brickFactory.ts b/modules/masonry/src/brick/design0/brickFactory.ts
index 30111620..3dff1270 100644
--- a/modules/masonry/src/brick/design0/brickFactory.ts
+++ b/modules/masonry/src/brick/design0/brickFactory.ts
@@ -58,7 +58,7 @@ function argsRecordToArray(
 export function createBrickBlock(params: {
     name: string;
     label: string;
-    glyph: string;
+    glyph?: string;
     args: { id: string; label: string }[];
     colorBg: TColor;
     colorFg: TColor;
diff --git a/modules/masonry/src/brick/design0/components/BrickBlock.tsx b/modules/masonry/src/brick/design0/components/BrickBlock.tsx
index 7f81d1d7..7be85bd6 100644
--- a/modules/masonry/src/brick/design0/components/BrickBlock.tsx
+++ b/modules/masonry/src/brick/design0/components/BrickBlock.tsx
@@ -1,43 +1,40 @@
 import React from 'react';
-import type { TBrickRenderPropsBlock, TCoords } from '@/@types/brick';
+import type { TBrickRenderPropsBlock } from '@/@types/brick';
 
-interface BrickBlockProps {
-  instance: TBrickRenderPropsBlock;
-  coords?: TCoords;
-}
-
-const BrickBlock: React.FC<BrickBlockProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
+const BrickBlock: React.FC<TBrickRenderPropsBlock> = ({
+  path,
+  label,
+  labelArgs,
+  colorBg,
+  colorFg,
+  outline,
+  scale,
+}) => {
   return (
-    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
+    <g transform={`scale(${scale})`}>
       <path
-        d={instance.path}
-        fill={instance.colorBg as string}
-        stroke={instance.outline as string}
+        d={path}
+        fill={colorBg as string}
+        stroke={outline as string}
         strokeWidth={1}
         strokeLinecap="round"
       />
-      <text
-        x={10}
-        y={20}
-        fill={instance.colorFg as string}
-        fontSize={14}
-        fontFamily="Arial, sans-serif"
-      >
-        {instance.label}
+      <text x={10} y={20} fill={colorFg as string} fontSize={14} fontFamily="Arial, sans-serif">
+        {label}
       </text>
-      {instance.labelArgs.map((argLabel, index) => (
+      {labelArgs.map((argLabel, index) => (
         <text
           key={index}
           x={15}
           y={40 + index * 20}
-          fill={instance.colorFg as string}
+          fill={colorFg as string}
           fontSize={12}
           fontFamily="Arial, sans-serif"
         >
           {argLabel}
         </text>
       ))}
-      {instance.glyph && (
+      {/* {glyph && (
         <text
           x={instance.boundingBoxArgs[0]?.width - 25 || 0}
           y={20}
@@ -47,7 +44,7 @@ const BrickBlock: React.FC<BrickBlockProps> = ({ instance, coords = { x: 0, y: 0
         >
           {instance.glyph}
         </text>
-      )}
+      )} */}
     </g>
   );
 };
diff --git a/modules/masonry/src/brick/design0/stories/BrickBlock.stories.ts b/modules/masonry/src/brick/design0/stories/BrickBlock.stories.ts
index 4fcb241c..ef30eb05 100644
--- a/modules/masonry/src/brick/design0/stories/BrickBlock.stories.ts
+++ b/modules/masonry/src/brick/design0/stories/BrickBlock.stories.ts
@@ -11,8 +11,10 @@ export default {
 
 export const NoArgs: Story = {
     args: {
-        Component: CBrickBlock,
-        prototype: MBrickBlock,
+        View: CBrickBlock,
+        Model: MBrickBlock,
+        showIndicators: true,
+
         label: 'Block',
         args: [],
         colorBg: 'yellow',
@@ -24,10 +26,12 @@ export const NoArgs: Story = {
 
 export const WithArgs: Story = {
     args: {
-        Component: CBrickBlock,
-        prototype: MBrickBlock,
+        View: CBrickBlock,
+        Model: MBrickBlock,
+        showIndicators: true,
+
         label: 'Block',
-        args: ['Label 1'],
+        args: ['Label 1', 'Label 2'],
         colorBg: 'yellow',
         colorFg: 'black',
         outline: 'red',
diff --git a/modules/masonry/src/brick/stories/components/BrickBlock.tsx b/modules/masonry/src/brick/stories/components/BrickBlock.tsx
index 516bb38e..c65748b1 100644
--- a/modules/masonry/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/masonry/src/brick/stories/components/BrickBlock.tsx
@@ -1,30 +1,35 @@
-import BrickWrapper from './BrickWrapper';
 import type { JSX } from 'react';
-import type { IBrickBlock, TBrickArgDataType, TBrickColor } from '@/@types/brick';
+import type { IBrickBlock, TBrickRenderPropsBlock, TColor } from '@/@types/brick';
+
+import BrickWrapper from './BrickWrapper';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function (props: {
-  Component: (props: { instance: IBrickBlock; visualIndicators?: JSX.Element }) => JSX.Element;
-  prototype: new (params: {
+  View: React.FC<TBrickRenderPropsBlock>;
+  Model: new (params: {
+    uuid: string;
     name: string;
+
     label: string;
-    glyph: string;
-    args: Record<
-      string,
-      {
-        label: string;
-        dataType: TBrickArgDataType;
-        meta: unknown;
-      }
-    >;
-    colorBg: TBrickColor;
-    colorFg: TBrickColor;
-    outline: TBrickColor;
-    scale: number;
+    glyph?: string;
+    colorBg: TColor;
+    colorFg: TColor;
+    colorBgHighlight: TColor;
+    colorFgHighlight: TColor;
+    outline: TColor;
     connectAbove: boolean;
     connectBelow: boolean;
+
+    args: {
+      /** unique identifier of the argument */
+      id: string;
+      /** label for the argument */
+      label: string;
+    }[];
   }) => IBrickBlock;
+  showIndicators: boolean;
+
   label: string;
   args: string[];
   colorBg: string;
@@ -32,91 +37,86 @@ export default function (props: {
   outline: string;
   scale: number;
 }): JSX.Element {
-  const { Component, prototype, label, args, colorBg, colorFg, outline, scale } = props;
+  const { View, Model, showIndicators, label, args, colorBg, colorFg, outline, scale } = props;
+
+  const instance = new Model({
+    uuid: '',
+    name: '',
 
-  const instance = new prototype({
     label,
-    args: Object.fromEntries(
-      args.map<[string, { label: string; dataType: TBrickArgDataType; meta: unknown }]>((name) => [
-        name,
-        { label: name, dataType: 'any', meta: undefined },
-      ]),
-    ),
     colorBg,
     colorFg,
+    colorBgHighlight: '',
+    colorFgHighlight: '',
     outline,
-    scale,
-    glyph: '',
     connectAbove: true,
     connectBelow: true,
-    name: '',
+
+    args: args.map((label, i) => ({ id: `label_${i}`, label })),
   });
 
+  instance.scale = scale;
+
   const VisualIndicators = () => (
     <>
       {/* Overall Bounding Box of the Brick */}
       <rect
-        x={instance.bBoxBrick.coords.x}
-        y={instance.bBoxBrick.coords.y}
-        height={instance.bBoxBrick.extent.height}
-        width={instance.bBoxBrick.extent.width}
+        x={0}
+        y={0}
+        height={instance.boundingBox.height}
+        width={instance.boundingBox.width}
         fill="black"
         opacity={0.25}
       />
 
-      {/* Right args bounding box */}
-      {Object.keys(instance.bBoxArgs).map((name, i) => {
-        const arg = instance.bBoxArgs[name];
-
-        return (
-          <rect
-            key={i}
-            x={arg.coords.x}
-            y={arg.coords.y}
-            height={arg.extent.height}
-            width={arg.extent.width}
-            fill="green"
-            opacity={0.8}
-          />
-        );
-      })}
-
-      {/* Top instruction notch bounding box */}
+      {/* Connection point of Top */}
       <rect
-        x={instance.bBoxNotchInsTop.coords.x}
-        y={instance.bBoxNotchInsTop.coords.y}
-        height={instance.bBoxNotchInsTop.extent.height}
-        width={instance.bBoxNotchInsTop.extent.width}
+        x={instance.connPointsFixed.insTop.coords.y}
+        y={instance.connPointsFixed.insTop.coords.y}
+        height={instance.connPointsFixed.insTop.extent.height}
+        width={instance.connPointsFixed.insTop.extent.width}
         fill="green"
-        opacity={0.9}
+        opacity={0.75}
       />
 
-      {/* Bottom instruction notch bounding box */}
+      {/* Connection point of Bottom */}
       <rect
-        x={instance.bBoxNotchInsBot.coords.x}
-        y={instance.bBoxNotchInsBot.coords.y}
-        height={instance.bBoxNotchInsBot.extent.height}
-        width={instance.bBoxNotchInsBot.extent.width}
+        x={instance.connPointsFixed.insBottom.coords.y}
+        y={instance.connPointsFixed.insBottom.coords.y}
+        height={instance.connPointsFixed.insBottom.extent.height}
+        width={instance.connPointsFixed.insBottom.extent.width}
         fill="green"
-        opacity={0.9}
+        opacity={0.75}
       />
 
-      {/* Top instruction notch inside nesting bounding box */}
+      {/* Connection point of Nesting */}
       <rect
-        x={instance.bBoxNotchInsNestTop.coords.x}
-        y={instance.bBoxNotchInsNestTop.coords.y}
-        height={instance.bBoxNotchInsNestTop.extent.height}
-        width={instance.bBoxNotchInsNestTop.extent.width}
+        x={instance.connPointsFixed.insNest.coords.y}
+        y={instance.connPointsFixed.insNest.coords.y}
+        height={instance.connPointsFixed.insNest.extent.height}
+        width={instance.connPointsFixed.insNest.extent.width}
         fill="green"
-        opacity={0.9}
+        opacity={0.75}
       />
+
+      {/* Connection points of Args */}
+      {Object.values(instance.connPointsArg).map(({ extent, coords }) => (
+        <rect
+          x={coords.y}
+          y={coords.y}
+          height={extent.height}
+          width={extent.width}
+          fill="purple"
+          opacity={0.75}
+        />
+      ))}
     </>
   );
 
   return (
     <BrickWrapper>
-      <Component instance={instance} />
-      <VisualIndicators />
+      <View {...instance.renderProps} />
+      {showIndicators && <VisualIndicators />}
     </BrickWrapper>
   );
 }