@bemedev/mind-flow 0.3.1 → 1.0.0

package/lib/ui/globals/types.d.ts

@@ -0,0 +1,54 @@
+import { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
+/**
+ * Extracts a subset of component props from a valid component.
+ *
+ * @template | {@linkcode ValidComponent} `T` - Target component type.
+ * @template | `keyof ComponentProps<T>` `K` - Prop keys to pick.
+ */
+export type PropsOf<T extends ValidComponent, K extends keyof ComponentProps<T> = never> = Pick<ComponentProps<T>, K>;
+/**
+ * Omits a subset of component props from a valid component.
+ *
+ * @template | {@linkcode ValidComponent} `T` - Target component type.
+ * @template | `keyof ComponentProps<T>` `K` - Prop keys to omit.
+ */
+export type OmitPropsOf<T extends ValidComponent, K extends keyof ComponentProps<T> = never> = Omit<ComponentProps<T>, K>;
+/**
+ * Creates a component type where specified props are optional.
+ *
+ * @template | {@linkcode ValidComponent} `T` - Target component type.
+ * @template | `keyof ComponentProps<T>` `K` - Prop keys to make optional.
+ */
+export type ReduceComponent<T extends ValidComponent, K extends keyof ComponentProps<T> = never> = Component<OmitPropsOf<T, K> & Partial<PropsOf<T, K>>>;
+/**
+ * Short alias for type {@linkcode ReduceComponent}.
+ *
+ * @template | {@linkcode ValidComponent} `T` - Target component type.
+ * @template | `keyof ComponentProps<T>` `K` - Prop keys to make optional.
+ */
+export type RC<T extends ValidComponent, K extends keyof ComponentProps<T> = never> = ReduceComponent<T, K>;
+/**
+ * Creates a component type requiring only a picked subset of props.
+ *
+ * @template | {@linkcode ValidComponent} `T` - Target component type.
+ * @template | `keyof ComponentProps<T>` `K` - Picked prop keys.
+ */
+export type PickComponent<T extends ValidComponent, K extends keyof ComponentProps<T> = never> = Component<PropsOf<T, K>>;
+/**
+ * Short alias for type {@linkcode PickComponent}.
+ *
+ * @template | {@linkcode ValidComponent} `T` - Target component type.
+ * @template | `keyof ComponentProps<T>` `K` - Picked prop keys.
+ */
+export type PiC<T extends ValidComponent, K extends keyof ComponentProps<T> = never> = PickComponent<T, K>;
+/** Type representing an HTML `<link>` tag properties. */
+export type RootLink = JSX.HTMLElementTags['link'];
+/**
+ * Type representing an HTML element ref or ref callback.
+ *
+ * @template | {@linkcode HTMLElement} `T` - Target HTML element type.
+ */
+export type Ref<T extends HTMLElement> = T | ((el: T | undefined) => void) | undefined;
+/** Class map dictionary for conditional styling in Solid.js components. */
+export type ClassList = Record<string, boolean | undefined>;
+//# sourceMappingURL=types.d.ts.map

package/lib/ui/globals/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/globals/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/E;;;;;GAKG;AACH,MAAM,MAAM,OAAO,CACjB,CAAC,SAAS,cAAc,EACxB,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,IACvC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,MAAM,WAAW,CACrB,CAAC,SAAS,cAAc,EACxB,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,IACvC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,MAAM,eAAe,CACzB,CAAC,SAAS,cAAc,EACxB,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,IACvC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,MAAM,EAAE,CACZ,CAAC,SAAS,cAAc,EACxB,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,IACvC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE1B;;;;;GAKG;AACH,MAAM,MAAM,aAAa,CACvB,CAAC,SAAS,cAAc,EACxB,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,IACvC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAE7B;;;;;GAKG;AACH,MAAM,MAAM,GAAG,CACb,CAAC,SAAS,cAAc,EACxB,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,IACvC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAExB,yDAAyD;AACzD,MAAM,MAAM,QAAQ,GAAG,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;AAEnD;;;;GAIG;AACH,MAAM,MAAM,GAAG,CAAC,CAAC,SAAS,WAAW,IACjC,CAAC,GACD,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC,GAC7B,SAAS,CAAC;AAEd,2EAA2E;AAC3E,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC"}

package/lib/ui/utils.d.ts

@@ -0,0 +1,11 @@
+import { ClassValue } from 'clsx';
+/**
+ * Merges conditional CSS class names using `clsx` and resolves Tailwind CSS class
+ * conflicts with `twMerge`.
+ *
+ * @param inputs - Variable list of class values, objects, or arrays.
+ *
+ * @returns The resolved single class name string.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/ui/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/ui/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;;;;;;GAOG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bemedev/mind-flow",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "description": "Flow Chart UI library for Solid.js applications",
   "keywords": [
     "diagram",
@@ -71,7 +71,7 @@
     "@size-limit/file": "^13.0.3",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.3.0",
     "@vitest/coverage-v8": "^4.1.11",
     "glob": "^13.0.6",
     "globals": "^17.11.0",
@@ -82,7 +82,6 @@
     "pretty-quick": "^4.2.2",
     "rimraf": "^6.1.3",
     "rolldown": "^1.2.5",
-    "rollup": "^4.62.5",
     "rollup-preset-solid": "^3.0.0",
     "size-limit": "^13.0.3",
     "solid-js": "^1.9.15",

package/src/helpers/clamp.ts

@@ -0,0 +1,3 @@
+export const clamp = (value: number, min: number, max: number) => {
+  return Math.min(Math.max(value, min), max);
+};

package/src/helpers/createContext.ts

@@ -1,4 +1,5 @@
 import {
+  createComponent,
   createContext as createSolidContext,
   useContext,
   type ParentComponent,
@@ -28,12 +29,27 @@ export const createContext = <const T>(
   context: () => NonNullable<T>,
   options?: Options,
 ) => {
-  const _context = createSolidContext(context(), options);
+  const _context = createSolidContext<NonNullable<T> | undefined>(
+    undefined,
+    options,
+  );
 
-  const Provider: ParentComponent = ({ children }) =>
-    _context.Provider({ value: _context.defaultValue, children });
+  const Provider: ParentComponent = props => {
+    return createComponent(_context.Provider, {
+      value: context(),
+      get children() {
+        return props.children;
+      },
+    });
+  };
 
-  const _useContext = () => useContext(_context);
+  const _useContext = () => {
+    const __context = useContext(_context);
+    if (!__context) {
+      throw new Error('useContext must be used within a Provider');
+    }
+    return __context as NonNullable<T>;
+  };
 
   return [Provider, _useContext, _context] as const;
 };

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './clamp';
+export * from './createContext';

package/src/index.ts

@@ -1,3 +1,11 @@
-export type { NodeProps, EdgeProps } from './ui/components/FlowChart';
+export * from './services/main.machine.data';
+export * from './services/main.machine.typings';
 export * from './ui/components/classes';
+export * from './ui/components/FlowChart';
+export type * from './ui/components/FlowChart.types';
+export * from './ui/components/FlowChart.context';
 export * from './ui/Flow';
+export * from './ui/components/EditPanel';
+export * from './ui/components/Panels';
+export * from './ui/globals/directives';
+export * from './helpers';

package/src/services/main.machine.data.ts

@@ -1,9 +1,21 @@
-import type { NodeProps } from '../ui/components/FlowChart';
+import type { NodeProps } from './main.machine.typings';
 
 /** Horizontal gap in pixels between a parent node and newly created child node. */
 export const PARENT_CHILD_GAP_WIDTH = 100;
 
 // #region Node & Handle Layout Constants & Formulas
+/** Default width and height dimensions for newly created flowchart nodes. */
+export const DEFAULT_SIZE = { width: 192, height: 50 } as const;
+
+/** Default node width in pixels. */
+export const DEFAULT_NODE_WIDTH = DEFAULT_SIZE.width;
+
+/** Default node height in pixels. */
+export const DEFAULT_NODE_HEIGHT = DEFAULT_SIZE.height;
+
+/** Default node data payload applied when creating new nodes. */
+export const DEFAULT_DATA = { content: '<Nouveau nœud>' };
+
 /** Border width in pixels for a node container. */
 export const NODE_BORDER_WIDTH = 1.5;
 
@@ -82,7 +94,6 @@ export const DEFAULT_NODES: (NodeProps & { id: string })[] = [
   {
     id: 'node-0',
     data: { content: 'Some text', label: 'Root node' },
-    input: false,
     position: { x: 350, y: 100 },
   },
 ];

package/src/services/main.machine.helpers.ts

@@ -1,4 +1,8 @@
-import { DEFAULT_INPUT_OFFSET, getDefaultOutputOffset } from './main.machine.data';
+import {
+  DEFAULT_INPUT_OFFSET,
+  DEFAULT_SIZE,
+  getDefaultOutputOffset,
+} from './main.machine.data';
 import type { Dimension, Point } from './main.machine.typings';
 
 /**
@@ -34,19 +38,23 @@ export const buildNodeID = (generated?: string | null) => {
  *
  * @returns Node layout dimension object of type {@linkcode Dimension}.
  *
- * @see {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}
+ * @see {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode DEFAULT_SIZE}
  */
 export const calculateDimensions = (
   position: Point,
   parentDimension: Pick<
     Dimension,
     'width' | 'height' | 'outputOffset' | 'inputOffset'
-  > = { width: 192, height: 50, inputOffset: DEFAULT_INPUT_OFFSET },
+  > = {
+    width: DEFAULT_SIZE.width,
+    height: DEFAULT_SIZE.height,
+    inputOffset: DEFAULT_INPUT_OFFSET,
+  },
 ): Dimension => {
   const width = parentDimension.width;
   const height = parentDimension.height;
   const outputOffset = parentDimension.outputOffset ?? getDefaultOutputOffset(width);
-  const inputOffset = parentDimension.inputOffset!;
+  const inputOffset = parentDimension.inputOffset ?? DEFAULT_INPUT_OFFSET;
 
   const output = { x: position.x + outputOffset.x, y: position.y + outputOffset.y };
   const input = { x: position.x + inputOffset.x, y: position.y + inputOffset.y };

package/src/services/main.machine.test.ts

@@ -0,0 +1,205 @@
+import { interpret } from '@bemedev/app';
+import { describe, expect, it } from 'vitest';
+
+import { machine } from './main.machine';
+import {
+  DEFAULT_DATA,
+  DEFAULT_INPUT_OFFSET,
+  DEFAULT_NODES,
+  DEFAULT_SIZE,
+  getDefaultOutputOffset,
+} from './main.machine.data';
+
+const createTestService = () => {
+  const service = interpret(machine, {
+    context: { zoom: 1, edgesPositions: {}, bounds: { x: 0, y: 0 } },
+    pContext: {
+      generatedId: null,
+      dimensions: {},
+      getBoardPosition: (clientX, clientY) => ({ x: clientX, y: clientY }),
+      clampPosition: (_board, x, y) => ({ x, y }),
+      calculateDimensions: (
+        position,
+        parentDimension = {
+          width: DEFAULT_SIZE.width,
+          height: DEFAULT_SIZE.height,
+          inputOffset: DEFAULT_INPUT_OFFSET,
+        },
+      ) => {
+        const width = parentDimension.width;
+        const height = parentDimension.height;
+        const outputOffset =
+          parentDimension.outputOffset ?? getDefaultOutputOffset(width);
+        const inputOffset = parentDimension.inputOffset ?? DEFAULT_INPUT_OFFSET;
+        return {
+          width,
+          height,
+          output: { x: position.x + outputOffset.x, y: position.y + outputOffset.y },
+          input: { x: position.x + inputOffset.x, y: position.y + inputOffset.y },
+          outputOffset,
+          inputOffset,
+        };
+      },
+    },
+  });
+
+  service.start();
+  return service;
+};
+
+describe('#01 => Flow State Machine', () => {
+  describe('#01 => Initialization & Configuration', () => {
+    it('#01 => should initialize in idle state and transition to working on CONFIGURE', () => {
+      const service = createTestService();
+      expect(service.state.value).toBe('idle');
+
+      service.send({
+        type: 'CONFIGURE',
+        payload: {
+          nodes: DEFAULT_NODES,
+          edges: [],
+          defaultData: {
+            title: 'Default Title',
+            priority: 1,
+            content: 'Default Content',
+          },
+        },
+      });
+
+      expect(service.state.value).toBe('working');
+      expect(service.state.context.data?.nodes).toHaveLength(1);
+      expect(service.state.context.data?.nodes[0].data).toEqual(
+        DEFAULT_NODES[0].data,
+      );
+    });
+  });
+
+  describe('#02 => SET_NODE_DATA event', () => {
+    it('#01 => should update node data for an existing node', () => {
+      const service = createTestService();
+      service.send({
+        type: 'CONFIGURE',
+        payload: { nodes: DEFAULT_NODES, edges: [] },
+      });
+
+      service.send({
+        type: 'SET_NODE_DATA',
+        payload: {
+          id: 'node-0',
+          data: {
+            title: 'Updated Title',
+            priority: 4,
+            content: 'Updated Content Description',
+          },
+        },
+      });
+
+      const updatedNode = service.state.context.data?.nodes.find(
+        n => n.id === 'node-0',
+      );
+      expect(updatedNode?.data).toEqual({
+        content: 'Updated Content Description',
+        label: 'Root node',
+        title: 'Updated Title',
+        priority: 4,
+      });
+    });
+  });
+
+  describe('#03 => Adding nodes with defaultData & DEFAULT_SIZE', () => {
+    it('#01 => should create parent node with defaultData and DEFAULT_SIZE', () => {
+      const service = createTestService();
+      const customDefaultData = {
+        title: 'New Task',
+        priority: 2,
+        content: 'Task content',
+      };
+
+      service.send({
+        type: 'SET_BOARD',
+        payload: {
+          self: { left: 0, top: 0, width: 1000, height: 800 },
+          parent: { scrollLeft: 0, scrollTop: 0, width: 1000, height: 800 },
+        },
+      });
+
+      service.send({
+        type: 'CONFIGURE',
+        payload: { nodes: [], edges: [], defaultData: customDefaultData },
+      });
+
+      service.send('ADD_PARENT');
+
+      expect(service.state.context.data?.nodes).toHaveLength(1);
+      const created = service.state.context.data?.nodes[0];
+      expect(created?.data).toEqual(customDefaultData);
+    });
+
+    it('#02 => should fallback to DEFAULT_DATA when defaultData is not provided', () => {
+      const service = createTestService();
+
+      service.send({
+        type: 'SET_BOARD',
+        payload: {
+          self: { left: 0, top: 0, width: 1000, height: 800 },
+          parent: { scrollLeft: 0, scrollTop: 0, width: 1000, height: 800 },
+        },
+      });
+
+      service.send({ type: 'CONFIGURE', payload: { nodes: [], edges: [] } });
+
+      service.send('ADD_PARENT');
+
+      expect(service.state.context.data?.nodes).toHaveLength(1);
+      const created = service.state.context.data?.nodes[0];
+      expect(created?.data).toEqual(DEFAULT_DATA);
+    });
+  });
+
+  describe('#04 => EDIT & STOP_EDIT events', () => {
+    it('#01 => should set editing and selected on EDIT event', () => {
+      const service = createTestService();
+      service.send({
+        type: 'CONFIGURE',
+        payload: { nodes: DEFAULT_NODES, edges: [] },
+      });
+
+      expect(service.state.context.editing).toBeUndefined();
+
+      service.send({ type: 'EDIT', payload: 'node-0' });
+
+      expect(service.state.context.editing).toBe('node-0');
+      expect(service.state.context.selected).toBe('node-0');
+    });
+
+    it('#02 => should clear editing on STOP_EDIT event', () => {
+      const service = createTestService();
+      service.send({
+        type: 'CONFIGURE',
+        payload: { nodes: DEFAULT_NODES, edges: [] },
+      });
+
+      service.send({ type: 'EDIT', payload: 'node-0' });
+      expect(service.state.context.editing).toBe('node-0');
+
+      service.send('STOP_EDIT');
+      expect(service.state.context.editing).toBeUndefined();
+    });
+
+    it('#03 => should clear editing and selected on DESELECT event', () => {
+      const service = createTestService();
+      service.send({
+        type: 'CONFIGURE',
+        payload: { nodes: DEFAULT_NODES, edges: [] },
+      });
+
+      service.send({ type: 'EDIT', payload: 'node-0' });
+      expect(service.state.context.editing).toBe('node-0');
+      expect(service.state.context.selected).toBe('node-0');
+
+      service.send('DESELECT');
+      expect(service.state.context.editing).toBeUndefined();
+      expect(service.state.context.selected).toBeUndefined();
+    });
+  });
+});