feat(masonry) : Fix errors in Brick and render storybook

.gitignore

@@ -27,3 +27,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
+
+*storybook.log

modules/masonry/.storybook/main.ts

@@ -0,0 +1,37 @@
+import type { UserConfigExport } from 'vite';
+
+import path from 'path';
+import { mergeConfig } from 'vite';
+
+// -------------------------------------------------------------------------------------------------
+
+function resolve(rootPath: string) {
+    return path.resolve(__dirname, '..', rootPath);
+}
+
+export default {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(tsx|ts|jsx|js)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    async viteFinal(config: UserConfigExport) {
+        return mergeConfig(config, {
+            resolve: {
+                alias: {
+                    '@': resolve('src'),
+                    '@res': resolve('../../res'),
+                },
+                extensions: ['.tsx', '.ts', '.js', '.scss', '.sass', '.json'],
+            },
+        });
+    },
+};

modules/masonry/.storybook/preview.ts

@@ -0,0 +1,13 @@
+import '@res/scss/base.scss';
+
+export const parameters = {
+    actions: {
+        argTypesRegex: '^on[A-Z].*',
+    },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+};

modules/masonry/docs/PRD/PRD.md

@@ -9,22 +9,22 @@
 
 - Hardcoded Data Brick: Fixed values that cannot be changed by the user. Examples include predefined note values, counts, etc.
 
-     ![alt text](./images/image.png)
+     ![alt text](../images/image.png)
 - Editable Data Brick: Values that can be modified by the user. When clicked, these bricks open a text editor or a dropdown menu for user input, allowing customization of note names, pitches, etc.
 
-     ![editable bricks](./images/image-1.png)
+     ![editable bricks](../images/image-1.png)
 
 #### 2. Expression Bricks: Takes values as input, returns a value as output
 
-   ![alt text](./images/image-2.png)
+   ![alt text](../images/image-2.png)
 
 #### 3. Statement Bricks: These define actions to be taken
 
-   ![example](./images/image-3.png)
+   ![example](../images/image-3.png)
 
 #### 4. Block Bricks: Contain nesting, also execute something like the statement bricks. Takes 0 or more arguments
 
-   ![alt text](./images/image-14.png)
+   ![alt text](../images/image-14.png)
 
 ### b. Brick Appearance
 
@@ -50,32 +50,30 @@
 - **Inline Text Editing**: Users can click on text fields within bricks to edit labels and values directly.
   - Some bricks only open an inline text editor when clicked.
 
-       ![inline text editing](./images/image-4.png)
+       ![inline text editing](../images/image-4.png)
 
   - Other bricks open both an inline text editor and a context menu for additional options.
 
-       ![inline text editor with context menu](./images/image-15.png)
+       ![inline text editor with context menu](../images/image-15.png)
 - **Context Menus**: For more complex properties, a separate interface allows detailed configuration.
 
-     ![dedicated editors](./images/image-5.png)
+     ![dedicated editors](../images/image-5.png)
 - **Connection Types**:
      1. **Argument Connections**: Bricks can be connected to input arguments of other bricks. This allows for passing data or parameters into the brick’s function.
      2. **Brick-to-Brick or Stack Connections**: Bricks can be connected directly to other bricks or to a stack of bricks. This enables building complex sequences and structures by chaining bricks together.
 
-        ![alt text](./images/image-8.png)
+        ![alt text](../images/image-8.png)
 
 ## 2. Stack of Bricks
 
 ### a. Stack Validation
 
 - **Visual Feedback**: Indicators show whether brick combinations are valid.
 
-      ![alt text](./images/image-6.png)
-
 - **Error Indicators**: Explanations for incompatible connections help users troubleshoot.
   - Add a reddish boundary for users to easily tell whether the bricks are mergeable or not.  
 
-   ![alt text](./images/image-7.png)
+   ![alt text](../images/image-7.png)
 
 - **Disable Validation**: Temporarily turn off validation for complex or experimental setups.
 
@@ -90,7 +88,7 @@
 
 - **Collapsible Groups**: Groups can be collapsed or expanded to manage complexity.
 
-     ![alt text](./images/image-9.png)
+     ![alt text](../images/image-9.png)
 
 ## 3. Palette
 
@@ -100,13 +98,13 @@
 - Visual separators or dividers between categories
 - Customizable order and arrangement of categories
 
-      ![alt text](./images/image-10.png)
+     ![alt text](../images/image-10.png)
 
 ### b. **Brick Previews**
 
 - Tooltips or pop-ups displaying Brick names and brief descriptions
 
-   ![alt text](./images/image-16.png)
+   ![alt text](../images/image-16.png)
 
 - Color-coding or visual cues for distinguishing different Brick types
 
@@ -117,11 +115,11 @@
 - Live search results or suggestions as the user types
   - Searchbar in Musicblocks as of now:
 
-      ![alt text](./images//image-11.png)
+      ![alt text](../images//image-11.png)
 
   - Searchbar design to be implemented:
 
-      ![alt text](./images/image-17.png)
+      ![alt text](../images/image-17.png)
           The idea here is to have a fixed searchbar on the left side of the workspace through which users can search for bricks, group them etc.
           Note - It is just a one big list and categories on the left are positions on the list.
 
@@ -130,13 +128,13 @@
 - Ability to drag and drop Bricks from the palette onto the workspace.
 - Visual indicators (e.g., ghost preview, outline) for valid drop locations.
 
-     ![drag and drop](./images/image-12.png)
+     ![drag and drop](../images/image-12.png)
 
   - While dragging a brick from the palette, the brick should temporarily disappear from the palette until it is placed in the workspace.
 
 ## 4. Workspace
 
-![alt text](./images/image-13.png)
+![alt text](../images/image-13.png)
 
 - **Cloning/Duplication**: Users can easily create copies of bricks for repeated use.
 - **Scaling and Rotation**: Bricks can be resized and rotated to fit the workspace better.

modules/masonry/package.json

@@ -7,11 +7,8 @@
   "scripts": {
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "lint": "eslint src"
-  },
-  "devDependencies": {
-    "@types/jest": "^29.5.12",
-    "jest": "^29.7.0",
-    "ts-jest": "^29.1.5"
+    "lint": "eslint src",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }

modules/masonry/src/brick/design0/BrickBlock.ts

@@ -0,0 +1,138 @@
+import type { TBrickArgDataType, TBrickColor, TBrickCoords, TBrickExtent } from '@/@types/brick';
+
+import { BrickModelBlock } from '../model';
+import { generatePath } from '../utils/path';
+
+// -------------------------------------------------------------------------------------------------
+
+/**
+ * @class
+ * Final class that defines a block brick.
+ */
+export default class BrickBlock extends BrickModelBlock {
+    readonly _pathResults: ReturnType<typeof generatePath>;
+
+    constructor(params: {
+        // intrinsic
+        name: string;
+        label: string;
+        glyph: string;
+        args: Record<
+            string,
+            {
+                label: string;
+                dataType: TBrickArgDataType;
+                meta: unknown;
+            }
+        >;
+        // style
+        colorBg: TBrickColor;
+        colorFg: TBrickColor;
+        outline: TBrickColor;
+        scale: number;
+        connectAbove: boolean;
+        connectBelow: boolean;
+    }) {
+        super(params);
+        const argsKeys = Object.keys(this._args);
+        this._pathResults = generatePath({
+            hasNest: true,
+            hasNotchArg: false,
+            hasNotchInsTop: this._connectAbove,
+            hasNotchInsBot: this._connectBelow,
+            scale: this._scale,
+            nestLengthY: 30,
+            innerLengthX: 100,
+            argHeights: Array.from({ length: argsKeys.length }, () => 17),
+        });
+    }
+
+    public get SVGpath(): string {
+        return this._pathResults.path;
+    }
+
+    public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return {
+            extent: {
+                width: this._pathResults.bBoxBrick.extent.width * this._scale,
+                height: this._pathResults.bBoxBrick.extent.height * this._scale,
+            },
+            coords: {
+                x: this._pathResults.bBoxBrick.coords.x * this._scale,
+                y: this._pathResults.bBoxBrick.coords.y * this._scale,
+            },
+        };
+    }
+
+    public get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }> {
+        const argsKeys = Object.keys(this._args);
+        const result: Record<string, { extent: TBrickExtent; coords: TBrickCoords }> = {};
+
+        argsKeys.forEach((key, index) => {
+            result[key] = {
+                extent: {
+                    width: this._pathResults.bBoxArgs.extent.width * this._scale,
+                    height: this._pathResults.bBoxArgs.extent.height * this._scale,
+                },
+                coords: {
+                    x: this._pathResults.bBoxArgs.coords[index].x * this._scale,
+                    y: this._pathResults.bBoxArgs.coords[index].y * this._scale,
+                },
+            };
+        });
+
+        return result;
+    }
+
+    public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return {
+            extent: {
+                width: this._pathResults.bBoxNotchArg!.extent.width * this._scale,
+                height: this._pathResults.bBoxNotchArg!.extent.height * this._scale,
+            },
+            coords: {
+                x: this._pathResults.bBoxNotchArg!.coords.x * this._scale,
+                y: this._pathResults.bBoxNotchArg!.coords.y * this._scale,
+            },
+        };
+    }
+
+    public get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return {
+            extent: {
+                width: this._pathResults.bBoxNotchInsTop!.extent.width * this._scale,
+                height: this._pathResults.bBoxNotchInsTop!.extent.height * this._scale,
+            },
+            coords: {
+                x: this._pathResults.bBoxNotchInsTop!.coords.x * this._scale,
+                y: this._pathResults.bBoxNotchInsTop!.coords.y * this._scale,
+            },
+        };
+    }
+
+    public get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return {
+            extent: {
+                width: this._pathResults.bBoxNotchInsBot!.extent.width * this._scale,
+                height: this._pathResults.bBoxNotchInsBot!.extent.height * this._scale,
+            },
+            coords: {
+                x: this._pathResults.bBoxNotchInsBot!.coords.x * this._scale,
+                y: this._pathResults.bBoxNotchInsBot!.coords.y * this._scale,
+            },
+        };
+    }
+
+    public get bBoxNotchInsNestTop(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return {
+            extent: {
+                width: this._pathResults.bBoxNotchInsNestTop!.extent.width * this._scale,
+                height: this._pathResults.bBoxNotchInsNestTop!.extent.height * this._scale,
+            },
+            coords: {
+                x: this._pathResults.bBoxNotchInsNestTop!.coords.x * this._scale,
+                y: this._pathResults.bBoxNotchInsNestTop!.coords.y * this._scale,
+            },
+        };
+    }
+}