@g4rcez/components 2.1.2 → 2.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g4rcez/components",
   "description": "Customizable react components.",
-  "version": "2.1.2",
+  "version": "2.2.1",
   "sideEffects": false,
   "private": false,
   "packageManager": "pnpm@10.12.3",

package/dist/flow/flow.d.ts

@@ -1,25 +0,0 @@
-import { type Node } from "@xyflow/react";
-import { LucideProps } from "lucide-react";
-import React from "react";
-import { Override } from "../types";
-export type CreatableOpts = {
-    id: string;
-    type: string;
-    title: string;
-    value?: string;
-    description?: string;
-    Icon?: React.FC<LucideProps>;
-    Item?: React.FC<FlowItem<any>>;
-};
-export type FlowItem<T extends CreatableOpts = CreatableOpts> = Override<Node, {
-    data: T;
-}>;
-type Props<T extends Node> = {
-    items: T[];
-    parents: CreatableOpts[];
-    onChange: (a: any) => void;
-    theme: "light" | "dark" | "system";
-};
-export declare const Flow: <T extends Node = Node>(props: Props<T>) => React.JSX.Element;
-export {};
-//# sourceMappingURL=flow.d.ts.map

package/dist/flow/flow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"flow.d.ts","sourceRoot":"","sources":["../../src/flow/flow.tsx"],"names":[],"mappings":"AACA,OAAO,EAMH,KAAK,IAAI,EAQZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAS,MAAM,cAAc,CAAC;AAClD,OAAO,KAAiH,MAAM,OAAO,CAAC;AAGtI,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI,QAAQ,CAAC,IAAI,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AA4C5F,KAAK,KAAK,CAAC,CAAC,SAAS,IAAI,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CACtC,CAAC;AAyJF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBAM1D,CAAC"}

package/dist/flow/flow.jsx

@@ -1,111 +0,0 @@
-"use client";
-import { addEdge, Background, Controls, Handle, Position, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow } from "@xyflow/react";
-import { XIcon } from "lucide-react";
-import React, { createContext, Fragment, memo, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { css } from "../lib/dom";
-import { noop, uuid } from "../lib/fns";
-const DnDContext = createContext([null, () => { }]);
-const DnDProvider = ({ children }) => {
-    const [type, setType] = useState(null);
-    return <DnDContext.Provider value={[type, setType]}>{children}</DnDContext.Provider>;
-};
-const useDnD = () => {
-    const [a, b] = useContext(DnDContext);
-    return [a, b];
-};
-const Sidebar = (props) => {
-    const [, setType] = useDnD();
-    const onDragStart = (event, nodeType) => {
-        setType(nodeType);
-        event.dataTransfer.effectAllowed = "move";
-    };
-    return (<aside className="absolute top-0 right-0 p-2 rounded-lg border shadow min-w-24 border-floating-border bg-card-background shadow-lg">
-            <ul className="space-y-2">
-                {props.items.map((item) => (<li draggable key={`${item.id}-flow-side-item`} onDragStart={(event) => onDragStart(event, item)} className="flex gap-1.5 items-center text-lg hover:cursor-grab hover:text-primary">
-                        {item.Icon ? <item.Icon size={16}/> : null}
-                        {item.title}
-                    </li>))}
-            </ul>
-        </aside>);
-};
-const Handlers = (props) => {
-    return (<Fragment>
-            <Handle id={`${props.id}-handle-top`} type="source" position={Position.Top} className="h-0.5 w-10 !bg-primary"/>
-            <Handle id={`${props.id}-handle-left`} type="source" position={Position.Left} className="h-4 w-0.5 !bg-primary"/>
-            <Handle id={`${props.id}-handle-right`} type="source" position={Position.Right} className="h-4 w-0.5 !bg-primary"/>
-            <Handle id={`${props.id}-handle-bottom`} type="source" position={Position.Bottom} className="h-0.5 w-10 !bg-primary"/>
-            <Handle id={`${props.id}-handle-top`} type="target" position={Position.Top} className="h-0.5 w-10 !bg-primary"/>
-            <Handle id={`${props.id}-handle-left`} type="target" position={Position.Left} className="h-4 w-0.5 !bg-primary"/>
-            <Handle id={`${props.id}-handle-right`} type="target" position={Position.Right} className="h-4 w-0.5 !bg-primary"/>
-            <Handle id={`${props.id}-handle-bottom`} type="target" position={Position.Bottom} className="h-0.5 w-10 !bg-primary"/>
-        </Fragment>);
-};
-const Input = memo((node) => {
-    return (<div className={css("relative flex border min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "", "border-floating-border")}>
-            <Handlers id={node.data.id}/>
-            {node.data.Item ? <node.data.Item {...node}/> : <h3 className="text-center">{node.data.title}</h3>}
-        </div>);
-});
-const Connection = memo((node) => {
-    const { deleteElements } = useReactFlow();
-    const onClick = () => deleteElements({ nodes: [node] }).then(noop);
-    return (<div className={css("relative border flex min-h-10 min-w-24 items-center justify-center rounded-lg bg-floating-background px-4 py-2 shadow-shadow-floating", node.selected ? "border-primary" : "border-muted", "border-floating-border")}>
-            <button className="flex absolute top-2 right-2 justify-center items-center text-foreground hover:text-danger active:text-danger" onClick={onClick}>
-                <XIcon size={18}/>
-            </button>
-            <Handlers id={node.data.id}/>
-            {node.data.Item ? <node.data.Item {...node}/> : <h3 className="text-center">{node.data.title}</h3>}
-        </div>);
-});
-const nodeTypes = { input: Input, output: Connection };
-const AddNodeOnEdgeDrop = (props) => {
-    const [type, setType] = useDnD();
-    const ref = useRef(null);
-    const reactFlowWrapper = useRef(null);
-    const [nodes, setNodes, onNodesChange] = useNodesState(props.items);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-    const { screenToFlowPosition } = useReactFlow();
-    useEffect(() => {
-        props.onChange(nodes);
-    }, [nodes, edges]);
-    const onConnect = useCallback((params) => {
-        setEdges((eds) => addEdge({
-            ...params, animated: true, deletable: true, reconnectable: true,
-        }, eds));
-    }, [setEdges]);
-    const onDragOver = useCallback((event) => {
-        event.preventDefault();
-        event.dataTransfer.dropEffect = "move";
-    }, []);
-    const onDrop = useCallback((event) => {
-        event.preventDefault();
-        if (!type)
-            return;
-        const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
-        const id = uuid();
-        const newNode = {
-            id,
-            position,
-            type: "output",
-            data: { ...type, id, label: type.title },
-        };
-        setNodes((prev) => [...prev, newNode]);
-    }, [screenToFlowPosition, setNodes, type]);
-    const onDragStart = (event, nodeType) => {
-        setType(nodeType);
-        event.dataTransfer.setData("text/plain", JSON.stringify(nodeType));
-        event.dataTransfer.effectAllowed = "move";
-    };
-    return (<div className="relative w-full bg-card-background" style={{ height: 1000 }} ref={reactFlowWrapper}>
-            <ReactFlow fitView ref={ref} edges={edges} nodes={nodes} onDrop={onDrop} nodeOrigin={[0, 0]} onConnect={onConnect} onDragOver={onDragOver} className="bg-transparent" nodeTypes={nodeTypes} onEdgesChange={onEdgesChange} onNodesChange={onNodesChange} attributionPosition="bottom-left" fitViewOptions={{ padding: 2 }} onDragStart={onDragStart} colorMode={props.theme ?? "dark"}>
-                <Controls />
-                <Background bgColor="hsla(var(--floating-background))"/>
-            </ReactFlow>
-            <Sidebar items={props.parents}/>
-        </div>);
-};
-export const Flow = (props) => (<ReactFlowProvider fitView initialMaxZoom={1}>
-        <DnDProvider>
-            <AddNodeOnEdgeDrop {...props}/>
-        </DnDProvider>
-    </ReactFlowProvider>);