@bemedev/mind-flow 0.3.2 → 1.1.0

package/src/ui/components/NodeComponent.tsx

@@ -1,43 +1,44 @@
-/* eslint-disable @typescript-eslint/no-namespace */
 import { toArray } from '@bemedev/app';
 import { createState } from '@bemedev/app-solidjs';
 import { createDraggable } from '@thisbeyond/solid-dnd';
 import { dequal } from 'dequal';
-import { Component, Show } from 'solid-js';
+import { type Component, For, type JSX, Show } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
 
 import {
   HANDLE_CONTAINER_OFFSET_X,
   HANDLE_MARGIN_TOP,
   HANDLE_SIZE,
 } from '#services/main.machine.data';
+import type { NodeData } from '#services/main.machine.typings';
 
+import { resize } from '../globals/directives';
 import { useFlow } from './FlowChart.context';
 
-declare module 'solid-js' {
-  namespace JSX {
-    interface Directives {
-      draggable: any;
-    }
-  }
-}
-
 /** Properties for rendering an individual flowchart node component. */
-type Props = {
+export type NodeComponentProps<D extends NodeData = NodeData> = {
   /** Unique identifier of the node. */
   id: string;
+  /** Custom node component to render inside the node container. */
+  children?: Component<D>;
 };
 
 /**
  * Interactive flowchart node component supporting dragging, selection, handle
  * connections, and child/sibling creation.
  *
- * @param props - Node rendering properties of type {@linkcode Props}.
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ *
+ * @param props - Node rendering properties of type {@linkcode NodeComponentProps}.
  *
  * @returns The rendered Solid component.
  *
  * @see {@linkcode useFlow}, {@linkcode HANDLE_CONTAINER_OFFSET_X}, {@linkcode HANDLE_MARGIN_TOP}, {@linkcode HANDLE_SIZE}
  */
-export const NodeComponent: Component<Props> = props => {
+export const NodeComponent = <D extends NodeData = NodeData>(
+  props: NodeComponentProps<D>,
+): JSX.Element => {
   const service = useFlow();
   const newEdge = createState(service, { selector: s => s.context.newEdge });
   const draggable = createDraggable(props.id);
@@ -46,13 +47,11 @@ export const NodeComponent: Component<Props> = props => {
   const node = createState(service, {
     selector: ({ context }) => {
       const list = toArray.typed(context.data?.nodes);
-      const item = list.find(n => n.id === props.id)!;
+      const item = list.find(n => n.id === props.id);
       return {
-        x: item.position.x,
-        y: item.position.y,
-        label: item.data.label,
-        content: item.data.content ?? '',
-        input: item.input,
+        x: item?.position.x ?? 0,
+        y: item?.position.y ?? 0,
+        data: (item?.data ?? {}) as D,
       };
     },
     equals: dequal,
@@ -74,8 +73,8 @@ export const NodeComponent: Component<Props> = props => {
     <div
       classList={{
         'flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable': true,
-        'border border-[#e38c29] z-[100]': selected(),
-        'border border-[#e6d4be] z-[1]': !selected(),
+        'border border-[#e38c29] z-100': selected(),
+        'border border-[#e6d4be] z-1': !selected(),
       }}
 
       style={{ top: `${node().y}px`, left: `${node().x}px` }}
@@ -87,6 +86,10 @@ export const NodeComponent: Component<Props> = props => {
         e.stopPropagation();
         service.send({ type: 'SELECT', payload: props.id });
       }}
+      onDblClick={e => {
+        e.stopPropagation();
+        service.send({ type: 'EDIT', payload: props.id });
+      }}
     >
       <div
         classList={{
@@ -161,49 +164,69 @@ export const NodeComponent: Component<Props> = props => {
         </svg>
       </div>
 
-      <Show when={node().label} keyed>
-        {label => (
-          <span class='min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none'>
-            {label}
-          </span>
-        )}
-      </Show>
-
-      <Show when={node().content} keyed>
-        {content => <div class='p-3 select-none'>{content}</div>}
-      </Show>
+      <div ref={resize(props.id)}>
+        <Show
+          when={props.children}
+          fallback={
+            <div class='p-3 select-none'>
+              <Show when={node().data.label} keyed>
+                {label => (
+                  <span class='mb-2 block min-w-max border-b border-[#f0f0f0] pb-2 font-semibold whitespace-nowrap text-red-600 select-none'>
+                    {String(label)}
+                  </span>
+                )}
+              </Show>
+
+              <Show when={node().data.content} keyed>
+                {content => <div class='select-none'>{String(content)}</div>}
+              </Show>
+
+              <Show when={!node().data.label && !node().data.content}>
+                <For each={Object.entries(node().data)}>
+                  {([key, val]) => (
+                    <div>
+                      <span class='font-semibold'>{key}: </span>
+                      <span>{String(val)}</span>
+                    </div>
+                  )}
+                </For>
+              </Show>
+            </div>
+          }
+        >
+          <Dynamic component={props.children} {...node().data} />
+        </Show>
+      </div>
 
-      <Show when={node().input || hasParent()}>
+      <div
+        id='inputs'
+        class='pointer-events-none absolute top-0 z-10 flex cursor-default flex-col'
+        style={{ left: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
+      >
         <div
-          id='inputs'
-          class='pointer-events-none absolute top-0 z-10 flex cursor-default flex-col'
-          style={{ left: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
-        >
-          <div
-            class='cursor-default rounded-full bg-[#e38b29] shadow-md'
+          class='cursor-default rounded-full bg-[#e38b29] shadow-md'
 
-            style={{
-              width: `${HANDLE_SIZE}px`,
-              height: `${HANDLE_SIZE}px`,
-              'margin-top': `${HANDLE_MARGIN_TOP}px`,
-              'pointer-events': 'all',
-            }}
+          style={{
+            width: `${HANDLE_SIZE}px`,
+            height: `${HANDLE_SIZE}px`,
+            'margin-top': `${HANDLE_MARGIN_TOP}px`,
+            'pointer-events': 'all',
+          }}
 
-            onMouseDown={event => {
-              event.stopPropagation();
-            }}
+          onMouseDown={event => {
+            event.stopPropagation();
+          }}
 
-            onMouseUp={event => {
-              event.stopPropagation();
-              const from = newEdge()?.from;
+          onMouseUp={event => {
+            event.stopPropagation();
+            const from = newEdge()?.from;
 
-              if (from) {
-                service.send({ type: 'ADD_EDGE', payload: { from, to: props.id } });
-              } else service.send('CLEAR_NEW_EDGE');
-            }}
-          ></div>
-        </div>
-      </Show>
+            if (from) {
+              service.send({ type: 'ADD_EDGE', payload: { from, to: props.id } });
+            } else service.send('CLEAR_NEW_EDGE');
+          }}
+        ></div>
+      </div>
       <div
         id='outputs'
         class='pointer-events-none absolute top-0 z-10 flex flex-col'

package/src/ui/components/NodesBoard.tsx

@@ -7,37 +7,55 @@ import {
 } from '@thisbeyond/solid-dnd';
 import { dequal } from 'dequal';
 import {
-  Component,
+  type Component,
   createEffect,
   createSignal,
   For,
+  type JSX,
   on,
   onMount,
   Show,
 } from 'solid-js';
 
 import { CANVAS_FACTOR, SCROLL_MULTIPLIER } from '../../services/main.machine.data';
+import type { NodeData } from '../../services/main.machine.typings';
 import { DragBounds } from './Bounds';
 import { EdgesBoard } from './EdgesBoard';
 import { useFlow } from './FlowChart.context';
+import type { FlowPanels } from './FlowChart.types';
 import { NodeComponent } from './NodeComponent';
+import { Panels } from './Panels';
+
+/** Properties for the {@linkcode NodesBoard} component. */
+type Props<D extends NodeData = NodeData> = {
+  /** Optional custom node component. */
+  component?: Component<D>;
+  /** Optional custom overlay panels. */
+  panels?: FlowPanels;
+};
 
 /**
  * Interactive board component containing the drag-drop viewport, zoom controls,
  * panning gestures, and rendered nodes/edges.
  *
+ * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+ *   {@linkcode NodeData}.
+ *
+ * @param props - Board component properties of type {@linkcode Props}.
+ *
  * @returns The rendered Solid component.
  *
  * @see {@linkcode DragBounds}, {@linkcode EdgesBoard}, {@linkcode NodeComponent}, {@linkcode useFlow}, {@linkcode CANVAS_FACTOR}, {@linkcode SCROLL_MULTIPLIER}
  */
-export const NodesBoard: Component = () => {
+export const NodesBoard = <D extends NodeData = NodeData>(
+  props: Props<D>,
+): JSX.Element => {
   let containerRef: HTMLDivElement;
   const [isPanning, setIsPanning] = createSignal(false);
   const [transform, setTransform] = createSignal({ x: 0, y: 0 });
   const [ref, setRef] = createSignal<HTMLDivElement | undefined>();
   let percentX = 0;
   let percentY = 0;
-
   const service = useFlow();
 
   const newEdge = createState(service, {
@@ -135,7 +153,7 @@ export const NodesBoard: Component = () => {
         }
       }}
 
-      class='relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden'
+      class='relative mx-auto h-full w-full overflow-hidden'
     >
       <DragDropProvider
         onDragMove={({ draggable: { transform: _transform, node, id } }) => {
@@ -203,7 +221,7 @@ export const NodesBoard: Component = () => {
             return (containerRef = el);
           }}
           onScroll={updateScrollPercentages}
-          class='relative h-full w-full overflow-auto rounded-lg border-2 border-gray-600'
+          class='relative h-full w-full overflow-auto'
         >
           <DragDropSensors />
           <div
@@ -251,12 +269,16 @@ export const NodesBoard: Component = () => {
             >
               <DragBounds />
               <EdgesBoard />
-              <For each={nodeIds()}>{id => <NodeComponent id={id} />}</For>
+              <For each={nodeIds()}>
+                {id => <NodeComponent id={id} children={props.component} />}
+              </For>
             </div>
           </div>
         </div>
 
-        {/* Panel */}
+        <Panels {...props.panels} />
+
+        {/* Bottom-Right Panel (Main Zoom & Creation Controls) */}
         <div class='absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md'>
           <button
             type='button'

package/src/ui/components/Panels.tsx

@@ -0,0 +1,31 @@
+import { Show, type Component } from 'solid-js';
+
+import type { FlowPanels } from './FlowChart.types';
+
+/**
+ * Overlay container rendering custom panel slots positioned around the flowchart
+ * canvas.
+ *
+ * @param props - Flow panels layout properties of type {@linkcode FlowPanels}.
+ *
+ * @returns Rendered overlay panels JSX elements.
+ */
+export const Panels: Component<FlowPanels> = props => {
+  return (
+    <>
+      <Show when={props.topLeft} keyed>
+        {Panel => <div class='absolute top-4 left-4 z-50'>{<Panel />}</div>}
+      </Show>
+
+      {/* Top-Right Panel */}
+      <Show when={props.topRight} keyed>
+        {Panel => <div class='absolute top-4 right-4 z-50'>{<Panel />}</div>}
+      </Show>
+
+      {/* Bottom-Left Panel */}
+      <Show when={props.bottomLeft} keyed>
+        {Panel => <div class='absolute bottom-4 left-4 z-50'>{<Panel />}</div>}
+      </Show>
+    </>
+  );
+};

package/src/ui/globals/components/atoms/TypingText.tsx

@@ -0,0 +1,63 @@
+import {
+  createEffect,
+  createMemo,
+  on,
+  type Accessor,
+  type Component,
+} from 'solid-js';
+
+import { VISIBLE_ESPACE } from '../../constants';
+import { createTyping } from '../../signals/createTyping';
+
+/** Base configuration properties for {@linkcode TypingText}. */
+type BaseProps = {
+  /** The text string to animate typing out. */
+  children: string;
+  /** Optional container CSS class name. */
+  class?: string;
+  /** Keystroke interval delay in milliseconds. Defaults to 62. */
+  interval?: number;
+  /** Optional boolean accessor to disable typing and display text immediately. */
+  disabled?: Accessor<boolean>;
+};
+
+/** Props for the {@linkcode TypingText} component with optional rewind configuration. */
+type Props = BaseProps &
+  ({ rewind: true; rewindDelay: number } | { rewind?: false });
+
+/**
+ * Renders animated text with a typewriter keystroke animation effect.
+ *
+ * @param props - Component configuration properties of type {@linkcode Props}.
+ *
+ * @returns Rendered animated typing text JSX container.
+ */
+export const TypingText: Component<Props> = props => {
+  // #region Default values
+  const min = props.interval ?? 62;
+  const rewind = props.rewind ?? false;
+  const rewindDelay = (props as any).rewindDelay ?? 500;
+  const content = props.children;
+  const disabled = createMemo(
+    () => (props.disabled ? props.disabled() : false),
+    false,
+  );
+  // #endregion
+
+  const { text, type, setText } = createTyping({
+    content,
+    min,
+    rewind,
+    rewindDelay,
+  });
+
+  createEffect(on(disabled, () => setText(VISIBLE_ESPACE)));
+
+  createEffect(() => {
+    // If disabled, show full text immediately
+    if (disabled()) setText(content);
+    else type();
+  });
+
+  return <div class={props.class}>{text()}</div>;
+};

package/src/ui/globals/components/molecules/FadingDots.tsx

@@ -0,0 +1,45 @@
+import { splitProps, type Component, JSX } from 'solid-js';
+
+import { cn } from '../../../utils';
+import type { OmitPropsOf } from '../../types';
+
+/**
+ * Loading animation component displaying animated pulsing dots.
+ *
+ * @param props - Fading dots configuration properties.
+ * @param props.count - The number of dots to display.
+ * @param props.duration - Animation duration in milliseconds. Defaults to 500.
+ * @param props.innerProps - Additional properties and CSS styles applied to dot
+ *   elements.
+ *
+ * @returns Rendered animated dots container JSX element.
+ */
+export const FadingDots: Component<{
+  count: number;
+  duration?: number;
+  innerProps?: OmitPropsOf<'span', 'children' | 'style'> & {
+    style?: JSX.CSSProperties;
+  };
+}> = ({ count: length, innerProps = {}, duration = 500 }) => {
+  const [local, rest] = splitProps(innerProps, ['class', 'style']);
+
+  return (
+    <div class='mt-4 flex items-center justify-center space-x-4'>
+      {Array.from({ length }, (_, i) => (
+        <span
+          class={cn(
+            'rounded-full animate-out direction-alternate repeat-infinite fade-out-5 size-4  bg-gray-600',
+            local.class,
+          )}
+          style={{
+            ...local.style,
+            'animation-duration': `${duration}ms`,
+            'animation-delay': `${duration / i}ms`,
+          }}
+          aria-hidden='true'
+          {...rest}
+        />
+      ))}
+    </div>
+  );
+};

package/src/ui/globals/components/organisms/LoadingFallback.tsx

@@ -0,0 +1,116 @@
+import type { Component } from 'solid-js';
+
+import { cn } from '../../../utils';
+import { TypingText } from '../atoms/TypingText';
+import { FadingDots } from '../molecules/FadingDots';
+
+/** Properties for the {@linkcode LoadingFallback} component. */
+interface LoadingFallbackProps {
+  /**
+   * Text message to display alongside the loading animation.
+   *
+   * @default 'Chargement en cours...'
+   */
+  message?: string;
+  /** Additional CSS class names. */
+  class?: string;
+  /**
+   * Spinner dimension sizing.
+   *
+   * @default 'lg'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Keystroke typing interval in milliseconds. Defaults to 80. */
+  interval?: number;
+  /** Whether the typing text animation rewinds upon completion. Defaults to true. */
+  rewind?: boolean;
+  /**
+   * Delay in milliseconds before rewinding or restarting typing animation. Defaults
+   * to 2000.
+   */
+  rewindDelay?: number;
+}
+
+/**
+ * Fallback loading screen component displaying an animated spinner and typewriter
+ * text.
+ *
+ * @example
+ *   ```tsx
+ *   <Show when={data()} fallback={<LoadingFallback />}>
+ *     <DataComponent data={data()!} />
+ *   </Show>;
+ *   ```;
+ *
+ * @param props - Loading fallback properties of type
+ *   {@linkcode LoadingFallbackProps}.
+ *
+ * @returns Rendered full-screen loading fallback JSX element.
+ */
+export const LoadingFallback: Component<LoadingFallbackProps> = props => {
+  const message = props.message ?? 'Chargement en cours...';
+
+  const spinnerSizes = {
+    sm: 'w-8 h-8',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16',
+    xl: 'w-24 h-24',
+  };
+
+  const size = props.size ?? 'lg';
+
+  return (
+    <div
+      class={cn(
+        'flex flex-col items-center justify-center gap-6',
+        'h-screen w-screen overflow-hidden p-4',
+        props.class,
+      )}
+      role='status'
+      aria-live='polite'
+      aria-label='Chargement en cours'
+    >
+      {/* Spinner animé */}
+      <div class='relative'>
+        {/* Cercle extérieur avec rotation */}
+        <div
+          class={cn(
+            spinnerSizes[size],
+            'rounded-full border-4 border-[#4B9CAD]/20',
+            'animate-spin',
+            'border-t-[#4B9CAD]',
+          )}
+          aria-hidden='true'
+        />
+
+        {/* Cercle intérieur pour effet de profondeur */}
+        <div
+          class={cn(
+            'absolute inset-2',
+            'rounded-full border-4 border-transparent',
+            'border-b-[#4B9CAD]/40',
+            'animate-spin',
+            'animation-duration-[1.5s]',
+            'direction-[reverse]',
+          )}
+          aria-hidden='true'
+        />
+      </div>
+
+      {/* Texte avec effet typing */}
+      <div class='text-center' aria-label={message}>
+        <TypingText
+          class='text-lg font-medium text-gray-700 md:text-xl dark:text-gray-300'
+          interval={props.interval ?? 80}
+          rewind={props.rewind ?? true}
+          rewindDelay={props.rewindDelay ?? 2000}
+        >
+          {message}
+        </TypingText>
+
+        {/* Points d'animation pour indiquer le chargement */}
+        <FadingDots count={5} innerProps={{ class: 'bg-[#3d8091]' }} />
+      </div>
+    </div>
+  );
+};

package/src/ui/globals/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './strings';
+export * from './links';

package/src/ui/globals/constants/links.ts

@@ -0,0 +1,15 @@
+import type { RootLink } from '../types';
+
+/** Preconnect and stylesheet link descriptors for Google Fonts. */
+export const GOOGLE_FONTS_LINKS: RootLink[] = [
+  { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' },
+  {
+    rel: 'preconnect',
+    href: 'https://fonts.googleapis.com',
+    crossorigin: 'anonymous',
+  },
+  {
+    rel: 'preconnect',
+    href: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700;900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap',
+  },
+];

package/src/ui/globals/constants/strings.ts

@@ -0,0 +1,5 @@
+/** Zero-width space character used for layout preservation in typing animations. */
+export const VISIBLE_ESPACE = '\u200B';
+
+/** Non-breakable space character string. */
+export const NON_BREAKABLE_SPACE = '\xa0';

package/src/ui/globals/directives/clickOutside.ts

@@ -0,0 +1,18 @@
+import { onCleanup } from 'solid-js';
+
+/**
+ * Solid custom directive that triggers a callback when a click occurs outside the
+ * bound element.
+ *
+ * @param el - The bound DOM element.
+ * @param accessor - Accessor returning the callback function to execute.
+ */
+export const clickOutside = (el: any, accessor: any) => {
+  const onClick = (e: any) => {
+    if (!el.contains(e.target)) {
+      accessor()?.();
+    }
+  };
+  document.body.addEventListener('click', onClick);
+  onCleanup(() => document.body.removeEventListener('click', onClick));
+};

package/src/ui/globals/directives/index.ts

@@ -0,0 +1,16 @@
+import type { MouseOutParam } from './mouseOut';
+
+export * from './clickOutside';
+export * from './mouseOut';
+export * from './resize';
+
+declare module 'solid-js' {
+  // oxlint-disable-next-line typescript/no-namespace
+  namespace JSX {
+    interface Directives {
+      clickOutside: () => void;
+      mouseOut: MouseOutParam;
+      draggable: { skipTransform?: boolean };
+    }
+  }
+}