fix(masonry): Fix errors in Wrapper component and update individual c…

…omponents with all props
sugarlabs · Sep 7, 2024 · dfd5501 · dfd5501
1 parent f2d9c12
commit dfd5501
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 267 deletions.
diff --git a/modules/masonry/src/brick/design0/components/BrickBlock.tsx b/modules/masonry/src/brick/design0/components/BrickBlock.tsx
@@ -1,46 +1,55 @@
 import React from 'react';
-import type { IBrickBlock } from '@/@types/brick';
+import type { TBrickRenderPropsBlock, TCoords } from '@/@types/brick';
 
-/**
- * Props for BrickBlock component.
- */
 interface BrickBlockProps {
-  instance: IBrickBlock;
+  instance: TBrickRenderPropsBlock;
+  coords?: TCoords;
 }
 
-/**
- * Component to render a BrickBlock.
- * @param props - The props for BrickBlock.
- * @returns JSX.Element representing the BrickBlock as an SVG.
- */
-const BrickBlockComponent: React.FC<BrickBlockProps> = ({ instance }) => {
-  const renderProps = instance.renderProps();
-  const { path: SVGpath, label, glyph, colorBg, colorFg, outline, scale } = renderProps;
-
+const BrickBlock: React.FC<BrickBlockProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
   return (
-    <g transform={`scale(${scale})`} id={instance.uuid}>
+    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
       <path
-        d={SVGpath}
-        style={{
-          fill: colorBg,
-          stroke: outline,
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeOpacity: 1,
-        }}
+        d={instance.path}
+        fill={instance.colorBg as string}
+        stroke={instance.outline as string}
+        strokeWidth={1}
+        strokeLinecap="round"
       />
-      {glyph && (
-        <text x={5} y={20} style={{ fill: colorFg }}>
-          {glyph}
+      <text
+        x={10}
+        y={20}
+        fill={instance.colorFg as string}
+        fontSize={14}
+        fontFamily="Arial, sans-serif"
+      >
+        {instance.label}
+      </text>
+      {instance.labelArgs.map((argLabel, index) => (
+        <text
+          key={index}
+          x={15}
+          y={40 + index * 20}
+          fill={instance.colorFg as string}
+          fontSize={12}
+          fontFamily="Arial, sans-serif"
+        >
+          {argLabel}
         </text>
-      )}
-      {label && (
-        <text x={25} y={20} style={{ fill: colorFg }}>
-          {label}
+      ))}
+      {instance.glyph && (
+        <text
+          x={instance.boundingBoxArgs[0]?.width - 25 || 0}
+          y={20}
+          fill={instance.colorFg as string}
+          fontSize={14}
+          fontFamily="Arial, sans-serif"
+        >
+          {instance.glyph}
         </text>
       )}
     </g>
   );
 };
 
-export default BrickBlockComponent;
+export default BrickBlock;
diff --git a/modules/masonry/src/brick/design0/components/BrickData.tsx b/modules/masonry/src/brick/design0/components/BrickData.tsx
@@ -1,46 +1,43 @@
 import React from 'react';
-import type { IBrickData } from '@/@types/brick';
+import type { TBrickRenderPropsData, TCoords } from '@/@types/brick';
 
-/**
- * Props for BrickData component.
- */
 interface BrickDataProps {
-  instance: IBrickData; // The instance of BrickData
+  instance: TBrickRenderPropsData;
+  coords?: TCoords;
 }
 
-/**
- * Component to render a BrickData.
- * @param props - The props for BrickData.
- * @returns JSX.Element representing the BrickData as an SVG.
- */
-const BrickDataComponent: React.FC<BrickDataProps> = ({ instance }) => {
-  const renderProps = instance.renderProps();
-  const { path: SVGpath, label, glyph, colorBg, colorFg, outline, scale } = renderProps;
-
+const BrickData: React.FC<BrickDataProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
   return (
-    <g transform={`scale(${scale})`} id={instance.uuid}>
+    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
       <path
-        d={SVGpath}
-        style={{
-          fill: colorBg,
-          stroke: outline,
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeOpacity: 1,
-        }}
+        d={instance.path}
+        fill={instance.colorBg as string}
+        stroke={instance.outline as string}
+        strokeWidth={1}
+        strokeLinecap="round"
       />
-      {glyph && (
-        <text x={5} y={20} style={{ fill: colorFg }}>
-          {glyph}
-        </text>
-      )}
-      {label && (
-        <text x={25} y={20} style={{ fill: colorFg }}>
-          {label}
+      <text
+        x={10}
+        y={20}
+        fill={instance.colorFg as string}
+        fontSize={14}
+        fontFamily="Arial, sans-serif"
+      >
+        {instance.label}
+      </text>
+      {instance.glyph && (
+        <text
+          x={50}
+          y={20}
+          fill={instance.colorFg as string}
+          fontSize={14}
+          fontFamily="Arial, sans-serif"
+        >
+          {instance.glyph}
         </text>
       )}
     </g>
   );
 };
 
-export default BrickDataComponent;
+export default BrickData;
diff --git a/modules/masonry/src/brick/design0/components/BrickExpression.tsx b/modules/masonry/src/brick/design0/components/BrickExpression.tsx
@@ -1,46 +1,55 @@
 import React from 'react';
-import type { IBrickExpression } from '@/@types/brick';
+import type { TBrickRenderPropsExpression, TCoords } from '@/@types/brick';
 
-/**
- * Props for BrickExpression component.
- */
 interface BrickExpressionProps {
-  instance: IBrickExpression;
+  instance: TBrickRenderPropsExpression;
+  coords?: TCoords;
 }
 
-/**
- * Component to render a BrickExpression.
- * @param props - The props for BrickExpression.
- * @returns JSX.Element representing the BrickExpression as an SVG.
- */
-const BrickExpressionComponent: React.FC<BrickExpressionProps> = ({ instance }) => {
-  const renderProps = instance.renderProps();
-  const { path: SVGpath, label, glyph, colorBg, colorFg, outline, scale } = renderProps;
-
+const BrickExpression: React.FC<BrickExpressionProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
   return (
-    <g transform={`scale(${scale})`} id={instance.uuid}>
+    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
       <path
-        d={SVGpath}
-        style={{
-          fill: colorBg,
-          stroke: outline,
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeOpacity: 1,
-        }}
+        d={instance.path}
+        fill={instance.colorBg as string}
+        stroke={instance.outline as string}
+        strokeWidth={1}
+        strokeLinecap="round"
       />
-      {glyph && (
-        <text x={5} y={20} style={{ fill: colorFg }}>
-          {glyph}
+      <text
+        x={10}
+        y={20}
+        fill={instance.colorFg as string}
+        fontSize={14}
+        fontFamily="Arial, sans-serif"
+      >
+        {instance.label}
+      </text>
+      {instance.labelArgs.map((argLabel, index) => (
+        <text
+          key={index}
+          x={15}
+          y={40 + index * 20}
+          fill={instance.colorFg as string}
+          fontSize={12}
+          fontFamily="Arial, sans-serif"
+        >
+          {argLabel}
         </text>
-      )}
-      {label && (
-        <text x={25} y={20} style={{ fill: colorFg }}>
-          {label}
+      ))}
+      {instance.glyph && (
+        <text
+          x={instance.boundingBoxArgs[0]?.width - 25 || 0}
+          y={20}
+          fill={instance.colorFg as string}
+          fontSize={14}
+          fontFamily="Arial, sans-serif"
+        >
+          {instance.glyph}
         </text>
       )}
     </g>
   );
 };
 
-export default BrickExpressionComponent;
+export default BrickExpression;
diff --git a/modules/masonry/src/brick/design0/components/BrickStatement.tsx b/modules/masonry/src/brick/design0/components/BrickStatement.tsx
@@ -1,46 +1,55 @@
 import React from 'react';
-import type { IBrickStatement } from '@/@types/brick';
+import type { TBrickRenderPropsStatement, TCoords } from '@/@types/brick';
 
-/**
- * Props for BrickStatement component.
- */
 interface BrickStatementProps {
-  instance: IBrickStatement;
+  instance: TBrickRenderPropsStatement;
+  coords?: TCoords;
 }
 
-/**
- * Component to render a BrickStatement.
- * @param props - The props for BrickStatement.
- * @returns JSX.Element representing the BrickStatement as an SVG.
- */
-const BrickStatementComponent: React.FC<BrickStatementProps> = ({ instance }) => {
-  const renderProps = instance.renderProps();
-  const { path: SVGpath, label, glyph, colorBg, colorFg, outline, scale } = renderProps;
-
+const BrickStatement: React.FC<BrickStatementProps> = ({ instance, coords = { x: 0, y: 0 } }) => {
   return (
-    <g transform={`scale(${scale})`} id={instance.uuid}>
+    <g transform={`translate(${coords.x},${coords.y}) scale(${instance.scale})`}>
       <path
-        d={SVGpath}
-        style={{
-          fill: colorBg,
-          stroke: outline,
-          strokeWidth: 1,
-          strokeLinecap: 'round',
-          strokeOpacity: 1,
-        }}
+        d={instance.path}
+        fill={instance.colorBg as string}
+        stroke={instance.outline as string}
+        strokeWidth={1}
+        strokeLinecap="round"
       />
-      {glyph && (
-        <text x={5} y={20} style={{ fill: colorFg }}>
-          {glyph}
+      <text
+        x={10}
+        y={20}
+        fill={instance.colorFg as string}
+        fontSize={14}
+        fontFamily="Arial, sans-serif"
+      >
+        {instance.label}
+      </text>
+      {instance.labelArgs.map((argLabel, index) => (
+        <text
+          key={index}
+          x={15}
+          y={40 + index * 20}
+          fill={instance.colorFg as string}
+          fontSize={12}
+          fontFamily="Arial, sans-serif"
+        >
+          {argLabel}
         </text>
-      )}
-      {label && (
-        <text x={25} y={20} style={{ fill: colorFg }}>
-          {label}
+      ))}
+      {instance.glyph && (
+        <text
+          x={instance.boundingBoxArgs[0]?.width - 25 || 0}
+          y={20}
+          fill={instance.colorFg as string}
+          fontSize={14}
+          fontFamily="Arial, sans-serif"
+        >
+          {instance.glyph}
         </text>
       )}
     </g>
   );
 };
 
-export default BrickStatementComponent;
+export default BrickStatement;