flowstudio 0.0.1 → 0.0.3

package/dist/components/normal.jsx

@@ -0,0 +1,4 @@
+import XNode from "./xnode";
+export default function NormalNode({ data }) {
+    return (<XNode id={data.id} type={'normal'} data={{ message: data.message }} inputs={data.inputs}/>);
+}

package/dist/components/sheet/index.d.ts

@@ -0,0 +1 @@
+export default function Sheet({ children, open, setOpen, onClose, title, showCloseBtn, maxWidth, side, ...rest }: any): import("react").JSX.Element;

package/dist/components/sheet/index.jsx

@@ -0,0 +1,32 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { Dialog, IconButton, Flex, Text, Separator } from '@radix-ui/themes';
+import { Cross1Icon } from '@radix-ui/react-icons';
+// import './style.css'
+export default function Sheet({ children, open, setOpen, onClose, title = '', showCloseBtn = true, maxWidth = '500px', side = 'right', ...rest }) {
+    const [animationClass, setAnimationClass] = useState('');
+    useEffect(() => {
+        if (open) {
+            setAnimationClass(`slide-in-${side}`);
+        }
+        else {
+            setAnimationClass(`slide-out-${side}`);
+            onClose?.();
+        }
+    }, [open, side]);
+    return (<Dialog.Root open={open} onOpenChange={setOpen}>
+            <Dialog.Content className={`dialog-content ${animationClass}`} width={'100%'} maxWidth={maxWidth} style={{ padding: 4 }} {...rest}>
+                <Flex direction={'column'} height={'100%'} overflow={'hidden'}>                    
+                    <Flex flexShrink={'0'} justify={'between'} align={'center'} p={(title || showCloseBtn) ? '4' : '0'}>
+                        <Dialog.Title style={{ fontWeight: 'normal', marginBottom: 0 }}>{title && <Text>{title}</Text>}</Dialog.Title>
+                        {showCloseBtn && <Dialog.Close><IconButton highContrast size={'1'}><Cross1Icon /></IconButton></Dialog.Close>}
+                    </Flex>
+                    {title && <Separator size={'4'}/>}
+                    
+                    <Flex flexGrow={'1'} overflow={'auto'} p={'5'}>
+                        {children}
+                    </Flex>
+                </Flex>
+            </Dialog.Content>
+        </Dialog.Root>);
+}

package/dist/components/simulator/index.d.ts

@@ -0,0 +1 @@
+export default function Simulator(): import("react").JSX.Element;

package/dist/components/simulator/index.jsx

@@ -0,0 +1,11 @@
+// import { Card } from '@radix-ui/themes'
+// import ThemeLayout from '../layouts/ThemeLayout'
+export default function Simulator() {
+    return (
+    // <ThemeLayout>
+    <>
+    simulator content
+    </>
+    // </ThemeLayout>
+    );
+}

package/dist/components/start.d.ts

@@ -0,0 +1 @@
+export default function StartNode({ data }: any): import("react").JSX.Element;

package/dist/components/start.jsx

@@ -0,0 +1,37 @@
+import { Button, Card, TextArea, Flex, Badge, Text, Popover, Box, } from "@radix-ui/themes";
+import InputNode from "./input";
+import { CiMenuKebab } from "react-icons/ci";
+import XNode from "./xnode";
+export default function StartNode({ data }) {
+    return (<XNode id={data.id} type={'start'} data={{ message: data.message }} inputs={data.inputs} fns={[
+            { type: 'system', functions: ['Source Finder', 'Session GET'] },
+            { type: 'custom', functions: ['Account Checker'] }
+        ]}/>);
+    return (<Card>
+            <Box>
+                <Flex width={'100%'} align={'center'} justify={'between'}>
+                    <Text>Start</Text>
+                    <Popover.Root>
+                        <Popover.Trigger>
+                            <Button size={'1'} aria-label='Options' variant={'outline'}><CiMenuKebab /></Button>
+                        </Popover.Trigger>
+                        <Popover.Content maxWidth={'150px'}>
+                            
+                        </Popover.Content>
+                    </Popover.Root>
+                </Flex>
+            </Box>
+            <Box>
+                <Flex direction={'column'}>
+                    <TextArea rows={6} size={'1'} className="nodrag" placeholder={'Message'} defaultValue={data.message}></TextArea>
+                    <Flex direction={'column'}>
+                        <InputNode id={1} y={50}/>
+                        <InputNode id={2} y={130}/>
+                    </Flex>
+                    <Flex wrap={'wrap'}>
+                        <Badge size={'1'} color={'green'}>fn (1)</Badge>
+                    </Flex>
+                </Flex>
+            </Box>
+        </Card>);
+}

package/dist/components/studio/index.d.ts

@@ -1 +1 @@
-export default function Studio(): import("react").JSX.Element;
+export default function Studio({ theme, accent }: any): import("react").JSX.Element;

package/dist/components/studio/index.jsx

@@ -1,14 +1,89 @@
-"use strict";
-// import { Card } from '@radix-ui/themes'
+import { Box } from '@radix-ui/themes';
 // import ThemeLayout from '../layouts/ThemeLayout'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Studio;
-function Studio() {
-    return (
-    // <ThemeLayout>
-    <>
-    studio content
-    </>
-    // </ThemeLayout>
-    );
+import { ReactFlow, useNodesState, useEdgesState, addEdge, MiniMap, Controls, Background, Panel, SmoothStepEdge } from '@xyflow/react';
+import DockPanel from '../../components/dock_panel';
+import StartNode from '../../components/start';
+import EndNode from '../../components/end';
+import NormalNode from '../../components/normal';
+import InputNode from '../../components/input';
+import { useConfigStore } from '../../zustand/store';
+import AppLayout from "../app_layout";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+export default function Studio({ theme, accent }) {
+    const identifier = '987654321';
+    const { appTheme } = useConfigStore();
+    ////////////////// Nodes Management (React Flow) /////////////////////////////
+    const { nodesData, setNodesData, edgesData, setEdgesData } = useConfigStore();
+    const nodeTypes = useMemo(() => ({ startNode: StartNode, normalNode: NormalNode, endNode: EndNode, inputNode: InputNode }), []);
+    const [nodes, setNodes, onNodesChange] = useNodesState(nodesData);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(edgesData);
+    const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+    const CustomSmoothstepEdge = ({ data, ...props }) => {
+        return <SmoothStepEdge {...props} data={data}/>;
+    };
+    const edgeUpdateSuccessful = useRef(true);
+    const onEdgeUpdateStart = useCallback(() => {
+        edgeUpdateSuccessful.current = false;
+    }, []);
+    const onEdgeUpdate = useCallback((oldEdge, newConnection) => {
+        edgeUpdateSuccessful.current = true;
+        // setEdges((els:any) => updateEdge(oldEdge, newConnection, els));
+    }, []);
+    const onEdgeUpdateEnd = useCallback((_, edge) => {
+        if (!edgeUpdateSuccessful.current) {
+            setEdges((eds) => eds.filter((e) => e.id !== edge.id));
+        }
+        edgeUpdateSuccessful.current = true;
+    }, []);
+    useEffect(() => {
+        if (nodes) {
+            setNodesData(nodes);
+        }
+    }, [onNodesChange]);
+    useEffect(() => {
+        if (edges) {
+            setEdgesData(edges);
+        }
+    }, [onEdgesChange]);
+    // const getNodeId = () => `randomnode_${+new Date()}`;
+    // const onAdd = useCallback(() => {
+    //   const newNode = {
+    //     id: getNodeId(),
+    //     data: { label: 'Added node' },
+    //     position: {
+    //       x: Math.random() * window.innerWidth - 100,
+    //       y: Math.random() * window.innerHeight,
+    //     },
+    //   };
+    //   setNodes((nds) => nds.concat(newNode));
+    // }, [setNodes]);
+    ////////////////// For Context Menu /////////////////////////////
+    const [showContextMenu, setShowContextMenu] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+    const handleContextMenu = (event) => {
+        event.preventDefault(); // Prevent default context menu
+        const clickX = event.clientX;
+        const clickY = event.clientY;
+        setContextMenuPosition({ x: clickX, y: clickY });
+        setShowContextMenu(true);
+    };
+    // const cardBackground = useColorModeValue('rgba(255,255,255,.8)', 'hsla(0,0%,0%,.80)')
+    return (<AppLayout theme={theme} accent={accent}>
+    <Box position={'absolute'} top={'0'} right={'0'} bottom={'0'} left={'0'} style={{}}>
+    <Box position={'relative'} style={{ width: '100%', height: '100%', contain: 'paint', willChange: 'transform', transform: 'translate(0)' }}>
+        
+    <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} nodeTypes={nodeTypes} snapToGrid={true} 
+    // onEdgeUpdate={onEdgeUpdate}
+    // onEdgeUpdateStart={onEdgeUpdateStart}
+    // onEdgeUpdateEnd={onEdgeUpdateEnd}
+    attributionPosition={"top-right"} edgeTypes={{ default: CustomSmoothstepEdge }} fitView minZoom={0.2} maxZoom={1} colorMode={appTheme}>
+        <Controls />
+        <MiniMap />
+        <Background gap={12} size={1}/>
+        <Panel position="top-center"> <DockPanel projectIdentifier={identifier}/></Panel>
+      </ReactFlow>
+
+    </Box>
+    </Box>
+    </AppLayout>);
 }

package/dist/components/xnode.d.ts

@@ -0,0 +1,2 @@
+export default function XNode({ id, data, fns, inputs, type }: any): import("react").JSX.Element;
+export declare function InputNode({ identifier, id, parentType, type, text, inputType, allowDrag, allowInsert }: any): import("react").JSX.Element;

package/dist/components/xnode.jsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { Button, Card, Flex, Badge, Text, Popover, TextField, TextArea, Inset, } from "@radix-ui/themes";
+import { CiMenuKebab } from "react-icons/ci";
+import { Handle, Position } from "@xyflow/react";
+import { BiPlus, BiTrash } from "react-icons/bi";
+import { useConfigStore } from "../zustand/store";
+// Constants
+const color_start = '#009688';
+const color_normal = '#2196f3';
+const color_end = '#ff5c4d';
+export default function XNode({ id = 0, data, fns = [], inputs = [], type = 'normal' }) {
+    const { stateType, setStateType } = useConfigStore();
+    return (<Card style={{ overflow: 'unset', contain: 'layout' }}>
+            <Inset style={{ overflow: 'unset' }}>
+            <Flex direction={'column'} gap={'3'}>
+                <Flex width={'100%'} align={'center'} justify={'between'} p={'1'} className="drag-handle" style={{ backgroundColor: type == 'start' ? color_start : type == 'normal' ? color_normal : type == 'end' ? color_end : color_normal, borderTopLeftRadius: 7, borderTopRightRadius: 7 }}>
+                    <Text size={'2'} ml={'1'}>{type == 'start' ? 'Start' : type == 'normal' ? 'Normal' : type == 'end' ? 'End' : 'Normal'}</Text>
+                    <Popover.Root>
+                        <Popover.Trigger>
+                            <Button size={'1'} variant={'soft'} aria-label='Options'><CiMenuKebab /></Button>
+                        </Popover.Trigger>
+                        <Popover.Content size={'1'} align="end">                            
+                            <Flex direction={'column'} gap={'3'}>
+                                <Button variant={'ghost'} size={'1'} onClick={() => { }}>Change Node</Button>
+                                <Button variant={'ghost'} size={'1'} onClick={() => { }} color={'red'}>Delete Node</Button>
+                            </Flex>
+                        </Popover.Content>
+                    </Popover.Root>
+                </Flex>
+            
+                <Flex direction={'column'} gap={'3'} px={'3'}>
+                    {stateType == 'build' ?
+            <TextArea size={'1'} className="nodrag" placeholder={'Message'} defaultValue={data?.message || ''}></TextArea>
+            : <Text size={'1'} color={'gray'} style={{ maxWidth: '180px', textWrap: 'wrap' }}>{data?.message}</Text>}
+                    {/* <TextArea  size={'1'} className="nodrag" placeholder={'Message'} defaultValue={data?.message || ''}></TextArea> */}
+                    {type != 'end' && inputs.length > 0 &&
+            <Flex direction={'column'} gap={'2'}>
+                            {inputs.map((val, ind) => (<InputNode key={ind} identifier={ind} id={val.id} parentType={type} type={val.type} text={val.text} inputType={val.inputType} allowDrag={inputs.length > 1} allowInsert={inputs.length == (ind + 1)}/>))}
+                        </Flex>}
+                </Flex>    
+            
+                <Flex width={'100%'} align={'center'} px={'2'} pb={'2'}>
+                    <Flex flexGrow={'1'}>
+                {fns.length > 0 &&
+            <Flex wrap={'wrap'} gap={'2'}>
+                        {fns.map((val, ind) => (<Badge key={ind} size={'1'} color={val.type == 'system' ? 'green' : 'purple'}>fn ({val.functions.length})</Badge>))}
+                    </Flex>}
+                </Flex>
+                <Flex flexShrink={'0'}>
+                    <Text size={'1'}>1pg (50)</Text>
+                </Flex>
+                </Flex>
+            
+                {type != 'start' &&
+            <Handle type="target" position={Position.Left} id="g" style={{ left: -6, background: type == 'normal' ? color_normal : type == 'end' ? color_end : color_normal, borderColor: '#fff', borderWidth: 1, width: 10, height: 15, borderRadius: 3, zIndex: 10 }}/>}
+                </Flex>
+            </Inset>
+        </Card>);
+}
+export function InputNode({ identifier, id = 0, parentType, type = 'choice', text = '', inputType = 'text', allowDrag = false, allowInsert = false }) {
+    const [show, setShow] = useState(false);
+    const handleClick = () => setShow(!show);
+    return (<Flex position={'relative'} gap={'0'} align={'center'} style={{ zIndex: 20 }}>
+            <Flex width={'100%'} direction={'column'} align={'end'}>
+                <Flex width={'100%'} align={'center'}>
+                {allowDrag && <Flex gap={'1'}>
+                    {/* <Button  aria-label={'Drag'} color={parentType == 'start'?'green':parentType == 'normal'?'blue':'blue'}  size={'1'} ><AiOutlineDrag/></Button> */}
+                    <Button size={'1'} variant={'soft'} style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>{id}</Button>
+                    </Flex>}
+                    <TextField.Root type={inputType} defaultValue={text} id={'text_value'} placeholder={type == 'choice' ? 'Option Text' : inputType == 'number' ? '0' : 'User Input'} autoComplete={'off'} style={{ width: '100%' }}>
+                        {identifier != 0 &&
+            <TextField.Slot side={'right'} pr={'1'}>
+                                <Button color={'red'} aria-label={'close'} size={'1'} variant={'soft'} onClick={handleClick} style={{ width: 20, padding: 4 }}><BiTrash size={20}/></Button>
+                            </TextField.Slot>}
+                       
+                    </TextField.Root>
+                </Flex>
+                {allowInsert &&
+            <Button aria-label={'Add'} size={'1'} style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginRight: 5 }}><BiPlus /></Button>}
+            </Flex>
+            
+            <Handle type="source" position={Position.Right} isConnectable={true} id={id} style={{ right: -19, background: parentType == 'start' ? color_start : parentType == 'normal' ? color_normal : parentType == 'end' ? color_end : color_normal, borderColor: '#fff', borderWidth: 1, width: 10, height: 15, borderRadius: 3, position: 'absolute', top: 16, zIndex: 20 }}/>
+        </Flex>);
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+import Simulator from './components/simulator';
 import Studio from './components/studio';
-export { Studio };
+export { Studio, Simulator };

package/dist/index.js

@@ -1,8 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Studio = void 0;
-const studio_1 = __importDefault(require("./components/studio"));
-exports.Studio = studio_1.default;
+import Simulator from './components/simulator';
+import Studio from './components/studio';
+export { Studio, Simulator };