@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/src/components/modals/LoadModal.tsx

@@ -1,96 +0,0 @@
-import type { GraphJSON } from '@kiberon-labs/behave-graph';
-import React from 'react';
-import { useCallback, useEffect, useState } from 'react';
-import { useReactFlow } from 'reactflow';
-
-import { Modal } from './Modal.js';
-
-export type Examples = {
-  [key: string]: GraphJSON;
-};
-
-export type LoadModalProps = {
-  open?: boolean;
-  onClose: () => void;
-  setBehaviorGraph: (value: GraphJSON) => void;
-  examples: Examples;
-};
-
-export const LoadModal: React.FC<LoadModalProps> = ({
-  open = false,
-  onClose,
-  setBehaviorGraph,
-  examples
-}) => {
-  const [value, setValue] = useState<string>();
-  const [selected, setSelected] = useState('');
-
-  const instance = useReactFlow();
-
-  useEffect(() => {
-    if (selected) {
-      setValue(JSON.stringify(examples[selected], null, 2));
-    }
-  }, [selected, examples]);
-
-  const handleLoad = useCallback(() => {
-    let graph;
-    if (value !== undefined) {
-      graph = JSON.parse(value) as GraphJSON;
-    } else if (selected !== '') {
-      graph = examples[selected];
-    }
-
-    if (graph === undefined) return;
-
-    setBehaviorGraph(graph);
-
-    // TODO better way to call fit vew after edges render
-    setTimeout(() => {
-      instance.fitView();
-    }, 100);
-
-    handleClose();
-  }, [setBehaviorGraph, value, instance]);
-
-  const handleClose = () => {
-    setValue(undefined);
-    setSelected('');
-    onClose();
-  };
-
-  return (
-    <Modal
-      title="Load Graph"
-      actions={[
-        { label: 'Cancel', onClick: handleClose },
-        { label: 'Load', onClick: handleLoad }
-      ]}
-      open={open}
-      onClose={onClose}
-    >
-      <textarea
-        autoFocus
-        className="border border-gray-300 w-full p-2 h-32 align-top"
-        placeholder="Paste JSON here"
-        value={value}
-        onChange={(e) => setValue(e.currentTarget.value)}
-      ></textarea>
-      <div className="p-4 text-center text-gray-800">or</div>
-      <select
-        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded block w-full p-3"
-        onChange={(e) => setSelected(e.target.value)}
-        value={selected}
-      >
-        <option disabled value="">
-          Select an example
-        </option>
-        {Object.keys(examples).map((key) => (
-          <option key={key} value={key}>
-            {key}
-          </option>
-        ))}
-      </select>
-    </Modal>
-  );
-};

package/src/components/modals/Modal.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import type { PropsWithChildren } from 'react';
-
-import { useOnPressKey } from '../../hooks/useOnPressKey.js';
-
-export type ModalAction = {
-  label: string;
-  onClick: () => void;
-};
-
-export type ModalProps = {
-  open?: boolean;
-  onClose: () => void;
-  title: string;
-  actions: ModalAction[];
-};
-
-export const Modal: React.FC<PropsWithChildren<ModalProps>> = ({
-  open = false,
-  onClose,
-  title,
-  children,
-  actions
-}) => {
-  useOnPressKey('Escape', onClose);
-
-  if (open === false) return null;
-
-  const actionColors = {
-    primary: 'bg-teal-400 hover:bg-teal-500',
-    secondary: 'bg-gray-400 hover:bg-gray-500'
-  };
-
-  return (
-    <>
-      <div
-        className="z-[19] fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
-        onClick={onClose}
-      ></div>
-      <div className="z-20 relative top-20 mx-auto border w-96 shadow-lg bg-white text-sm rounded-md">
-        <div className="p-3 border-b">
-          <h2 className="text-lg text-center font-bold">{title}</h2>
-        </div>
-        <div className="p-3">{children}</div>
-        <div className="flex gap-3 p-3 border-t">
-          {actions.map((action, ix) => (
-            <button
-              key={ix}
-              className={
-                'text-white p-2 w-full cursor-pointer ' +
-                (ix === actions.length - 1
-                  ? actionColors.primary
-                  : actionColors.secondary)
-              }
-              onClick={action.onClick}
-            >
-              {action.label}
-            </button>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-};

package/src/components/modals/SaveModal.tsx

@@ -1,60 +0,0 @@
-import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
-import React from 'react';
-import { useMemo, useRef, useState } from 'react';
-import { useEdges, useNodes } from 'reactflow';
-
-import { flowToBehave } from '../../transformers/flowToBehave.js';
-import { Modal } from './Modal.js';
-
-export type SaveModalProps = {
-  open?: boolean;
-  onClose: () => void;
-  specJson: NodeSpecJSON[];
-};
-
-export const SaveModal: React.FC<SaveModalProps> = ({
-  open = false,
-  onClose,
-  specJson
-}) => {
-  const ref = useRef<HTMLTextAreaElement>(null);
-  const [copied, setCopied] = useState(false);
-
-  const edges = useEdges();
-  const nodes = useNodes();
-
-  const flow = useMemo(
-    () => flowToBehave(nodes, edges, specJson),
-    [nodes, edges, specJson]
-  );
-
-  const jsonString = JSON.stringify(flow, null, 2);
-
-  const handleCopy = () => {
-    ref.current?.select();
-    document.execCommand('copy');
-    ref.current?.blur();
-    setCopied(true);
-    setInterval(() => {
-      setCopied(false);
-    }, 1000);
-  };
-
-  return (
-    <Modal
-      title="Save Graph"
-      actions={[
-        { label: 'Cancel', onClick: onClose },
-        { label: copied ? 'Copied' : 'Copy', onClick: handleCopy }
-      ]}
-      open={open}
-      onClose={onClose}
-    >
-      <textarea
-        ref={ref}
-        className="border border-gray-300 w-full p-2 h-32"
-        defaultValue={jsonString}
-      ></textarea>
-    </Modal>
-  );
-};

package/src/hooks/useCustomNodeTypes.tsx

@@ -1,31 +0,0 @@
-import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
-import React from 'react';
-import { useEffect, useState } from 'react';
-import type { NodeTypes } from 'reactflow';
-
-import { Node } from '../components/Node.js';
-
-const getCustomNodeTypes = (allSpecs: NodeSpecJSON[]) => {
-  return allSpecs.reduce((nodes: NodeTypes, node) => {
-    nodes[node.type] = (props) => (
-      <Node spec={node} allSpecs={allSpecs} {...props} />
-    );
-    return nodes;
-  }, {});
-};
-
-export const useCustomNodeTypes = ({
-  specJson
-}: {
-  specJson: NodeSpecJSON[] | undefined;
-}) => {
-  const [customNodeTypes, setCustomNodeTypes] = useState<NodeTypes>();
-  useEffect(() => {
-    if (!specJson) return;
-    const customNodeTypes = getCustomNodeTypes(specJson);
-
-    setCustomNodeTypes(customNodeTypes);
-  }, [specJson]);
-
-  return customNodeTypes;
-};

package/src/hooks/useGraphRunner.ts

@@ -1,104 +0,0 @@
-import { Engine, readGraphFromJSON } from '@kiberon-labs/behave-graph';
-import type {
-  GraphJSON,
-  GraphNodes,
-  ILifecycleEventEmitter,
-  IRegistry
-} from '@kiberon-labs/behave-graph';
-import { useCallback, useEffect, useState } from 'react';
-
-/** Runs the behavior graph by building the execution
- * engine and triggering start on the lifecycle event emitter.
- */
-export const useGraphRunner = ({
-  graphJson,
-  autoRun = false,
-  registry
-}: {
-  graphJson: GraphJSON | undefined;
-  autoRun?: boolean;
-  registry: IRegistry;
-}) => {
-  const [engine, setEngine] = useState<Engine>();
-
-  const [run, setRun] = useState(autoRun);
-
-  const play = useCallback(() => {
-    setRun(true);
-  }, []);
-
-  const pause = useCallback(() => {
-    setRun(false);
-  }, []);
-
-  const togglePlay = useCallback(() => {
-    setRun((existing) => !existing);
-  }, []);
-
-  useEffect(() => {
-    if (!graphJson || !registry.values || !run || !registry.dependencies)
-      return;
-
-    let graphNodes: GraphNodes;
-    try {
-      graphNodes = readGraphFromJSON({
-        graphJson,
-        registry
-      }).nodes;
-    } catch (e) {
-      console.error(e);
-      return;
-    }
-    const engine = new Engine(graphNodes);
-
-    setEngine(engine);
-
-    return () => {
-      engine.dispose();
-      setEngine(undefined);
-    };
-  }, [graphJson, registry.values, registry.nodes, run, registry.dependencies]);
-
-  useEffect(() => {
-    if (!engine || !run) return;
-
-    engine.executeAllSync();
-
-    let timeout: number;
-
-    const eventEmitter = registry.dependencies
-      ?.ILifecycleEventEmitter as ILifecycleEventEmitter;
-
-    const onTick = async () => {
-      eventEmitter.tickEvent.emit();
-
-      // eslint-disable-next-line no-await-in-loop
-      await engine.executeAllAsync(500);
-
-      timeout = window.setTimeout(onTick, 50);
-    };
-
-    (async () => {
-      if (eventEmitter.startEvent.listenerCount > 0) {
-        eventEmitter.startEvent.emit();
-
-        await engine.executeAllAsync(5);
-      } else {
-        console.log('has no listener count');
-      }
-      onTick();
-    })();
-
-    return () => {
-      window.clearTimeout(timeout);
-    };
-  }, [engine, registry.dependencies?.ILifecycleEventEmitter, run]);
-
-  return {
-    engine,
-    playing: run,
-    play,
-    togglePlay,
-    pause
-  };
-};

package/src/hooks/useMergeMap.ts

@@ -1,14 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useMergeMap<T, TMap extends Record<string, T>>(
-  mapA: TMap,
-  mapB: TMap
-): TMap {
-  const [result, setResult] = useState<TMap>(() => ({ ...mapA, ...mapB }));
-
-  useEffect(() => {
-    setResult({ ...mapA, ...mapB });
-  }, [mapA, mapB]);
-
-  return result;
-}

package/src/hooks/useNodeSpecJson.ts

@@ -1,20 +0,0 @@
-import {
-  type IRegistry,
-  type NodeSpecJSON,
-  writeNodeSpecsToJSON
-} from '@kiberon-labs/behave-graph';
-import { useEffect, useState } from 'react';
-
-export const useNodeSpecJson = (registry: IRegistry) => {
-  const [specJson, setSpecJson] = useState<NodeSpecJSON[]>();
-
-  useEffect(() => {
-    if (!registry.nodes || !registry.values || !registry.dependencies) {
-      setSpecJson(undefined);
-      return;
-    }
-    setSpecJson(writeNodeSpecsToJSON(registry));
-  }, [registry.nodes, registry.values, registry.dependencies]);
-
-  return specJson;
-};

package/src/hooks/useQueriableDefinitions.ts

@@ -1,22 +0,0 @@
-import type { IQueryableRegistry } from '@kiberon-labs/behave-graph';
-import { useMemo } from 'react';
-
-export const toQueryableDefinitions = <T>(definitionsMap: {
-  [id: string]: T;
-}): IQueryableRegistry<T> => ({
-  get: (id: string) => definitionsMap[id],
-  getAll: () => Object.values(definitionsMap),
-  getAllNames: () => Object.keys(definitionsMap),
-  contains: (id: string) => definitionsMap[id] !== undefined
-});
-
-export const useQueryableDefinitions = <T>(definitionsMap: {
-  [id: string]: T;
-}): IQueryableRegistry<T> => {
-  const queriableDefinitions = useMemo(
-    () => toQueryableDefinitions(definitionsMap),
-    [definitionsMap]
-  );
-
-  return queriableDefinitions;
-};

package/src/styles.css

@@ -1,8 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 2rem;
-  position: relative;
-  padding: 0 0.5rem;
-}

package/tailwind.config.ts

@@ -1,19 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './public/index.html',
-    './src/**/*.{js,ts,jsx,tsx,css}',
-    '../../packages/flow/dist/**/*.{js,ts,jsx,tsx,css}'
-  ],
-  theme: {
-    extend: {}
-  },
-  plugins: [
-    {
-      tailwindcss: {}
-    },
-    {
-      autoprefixer: {}
-    }
-  ]
-};

package/tests/tsconfig.json

@@ -1,10 +0,0 @@
-{
-    "extends": "../tsconfig.json",
-    "compilerOptions": {
-        "rootDir": "../",
-        "lib": []
-    },
-    "include": [
-        "**/*.ts"
-    ]
-}