@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/react-flow/types.ts

@@ -0,0 +1,103 @@
+import type {
+    Connection,
+    Edge,
+    Node,
+    NodeTypes,
+    OnEdgesChange,
+    OnNodesChange,
+} from "@xyflow/react";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+
+export interface FlowGraphUIConfig {
+    showBackground?: boolean;
+    showControls?: boolean;
+    showMiniMap?: boolean;
+    fitView?: boolean;
+    background?: {
+        color?: string;
+        gap?: number;
+        size?: number;
+    };
+    controlsClassName?: string;
+    miniMapClassName?: string;
+    nodeColor?: string;
+    maskColor?: string;
+}
+
+export interface FlowGraphHeaderAction {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick: () => void;
+    className?: string;
+}
+
+export interface FlowGraphHeaderConfig {
+    show?: boolean;
+    backButton?: {
+        show?: boolean;
+        onClick: () => void;
+    };
+    title?: ReactNode;
+    badge?: ReactNode;
+    actions?: FlowGraphHeaderAction[];
+    children?: ReactNode;
+    className?: string;
+}
+
+export interface RelationshipFlowProps {
+    nodes: Node[];
+    edges: Edge[];
+    onNodesChange: OnNodesChange;
+    onEdgesChange: OnEdgesChange;
+    onConnect?: (connection: Connection) => void;
+    nodeTypes: NodeTypes;
+    ui?: FlowGraphUIConfig;
+    header?: FlowGraphHeaderConfig;
+    className?: string;
+    canvasClassName?: string;
+    children?: ReactNode;
+    renderNodes?: (nodes: Node[]) => Node[];
+    orientation?: "horizontal" | "vertical";
+}
+
+export interface FlowGraphState {
+    nodes: Node[];
+    edges: Edge[];
+    onNodesChange: OnNodesChange;
+    onEdgesChange: OnEdgesChange;
+    setNodes: Dispatch<SetStateAction<Node[]>>;
+    setEdges: Dispatch<SetStateAction<Edge[]>>;
+    resetLayout: (nodes: Node[], edges?: Edge[]) => void;
+}
+
+export interface FlowGraphLayoutConfig {
+    anchorX: number;
+    centerY: number;
+    spacing: number;
+}
+
+export interface BuildFlowGraphResult {
+    nodes: Node[];
+    edges: Edge[];
+}
+
+export interface UseFlowGraphSyncOptions<TData> {
+    data: TData | null | undefined;
+    isReady: boolean;
+    syncKey?: string | number;
+    buildGraph: (data: TData) => BuildFlowGraphResult;
+    syncNodes: (currentNodes: Node[], data: TData) => Node[];
+    syncEdges: (currentEdges: Edge[], data: TData) => Edge[];
+    setNodes: Dispatch<SetStateAction<Node[]>>;
+    setEdges: Dispatch<SetStateAction<Edge[]>>;
+    resetKey?: string | number;
+}
+
+import { createContext, useContext } from "react";
+
+export const FlowOrientationContext = createContext<"horizontal" | "vertical">("horizontal");
+
+export function useFlowOrientation() {
+    return useContext(FlowOrientationContext);
+}

package/src/components/react-flow/useFlowGraph.ts

@@ -0,0 +1,36 @@
+import {
+    useEdgesState,
+    useNodesState,
+    type Edge,
+    type Node,
+} from "@xyflow/react";
+import { useCallback } from "react";
+import type { FlowGraphState } from "./types";
+
+export function useFlowGraph(
+    initialNodes: Node[] = [],
+    initialEdges: Edge[] = [],
+): FlowGraphState {
+    const [nodes, setNodes, onNodesChange] = useNodesState<Node>(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>(initialEdges);
+
+    const resetLayout = useCallback(
+        (nextNodes: Node[], nextEdges?: Edge[]) => {
+            setNodes(nextNodes);
+            if (nextEdges) {
+                setEdges(nextEdges);
+            }
+        },
+        [setNodes, setEdges],
+    );
+
+    return {
+        nodes,
+        edges,
+        onNodesChange,
+        onEdgesChange,
+        setNodes,
+        setEdges,
+        resetLayout,
+    };
+}

package/src/components/react-flow/useFlowGraphSync.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, type MutableRefObject } from "react";
+import type { UseFlowGraphSyncOptions } from "./types";
+
+export function useFlowGraphSync<TData>({
+    data,
+    isReady,
+    syncKey,
+    buildGraph,
+    syncNodes,
+    syncEdges,
+    setNodes,
+    setEdges,
+    resetKey,
+}: UseFlowGraphSyncOptions<TData>) {
+    const initialized = useRef(false);
+    const buildGraphRef = useRef(buildGraph);
+    const syncNodesRef = useRef(syncNodes);
+    const syncEdgesRef = useRef(syncEdges);
+    const dataRef = useRef(data);
+    const lastResetKeyRef = useRef(resetKey);
+
+    useEffect(() => {
+        buildGraphRef.current = buildGraph;
+        syncNodesRef.current = syncNodes;
+        syncEdgesRef.current = syncEdges;
+        dataRef.current = data;
+    });
+
+    useEffect(() => {
+        if (resetKey !== undefined && resetKey !== lastResetKeyRef.current) {
+            initialized.current = false;
+            lastResetKeyRef.current = resetKey;
+        }
+    }, [resetKey]);
+
+    useEffect(() => {
+        const currentData = dataRef.current;
+        if (!isReady || !currentData) return;
+
+        if (!initialized.current) {
+            const { nodes, edges } = buildGraphRef.current(currentData);
+            setNodes(nodes);
+            setEdges(edges);
+            initialized.current = true;
+            return;
+        }
+
+        setNodes((currentNodes) =>
+            syncNodesRef.current(currentNodes, currentData),
+        );
+        setEdges((currentEdges) =>
+            syncEdgesRef.current(currentEdges, currentData),
+        );
+    }, [syncKey, isReady, setNodes, setEdges]);
+}
+
+export function useStableCallbacks<T extends object>(
+    callbacks: T,
+): MutableRefObject<T> {
+    const callbacksRef = useRef(callbacks);
+
+    useEffect(() => {
+        callbacksRef.current = callbacks;
+    }, [callbacks]);
+
+    return callbacksRef;
+}

package/src/components/select.tsx

@@ -0,0 +1,386 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import * as React from "react";
+
+import { cn } from "../support/utils";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import {
+    FieldError,
+    FieldValidationProps,
+    resolveFieldErrors,
+    ERROR_OUTLINE_CLASSES,
+} from "./form-error";
+
+interface SelectContextValue extends FieldValidationProps {
+    resolvedErrors?: string[];
+    hasError?: boolean;
+    errorId?: string;
+}
+
+const SelectContext = React.createContext<SelectContextValue | null>(null);
+
+export type SelectProps<Value, Multiple extends boolean | undefined = false> =
+    SelectPrimitive.Root.Props<Value, Multiple> &
+        FieldValidationProps & {
+            id?: string;
+            name?: string;
+        };
+
+function Select<Value, Multiple extends boolean | undefined = false>({
+    value,
+    defaultValue,
+    onValueChange,
+    multiple,
+    error,
+    errors,
+    payloadKey,
+    errorKey,
+    containerClassName,
+    errorClassName,
+    id,
+    name,
+    children,
+    ...props
+}: SelectProps<Value, Multiple>) {
+    // If defaultValue is provided, respect uncontrolled mode unless value is explicitly defined.
+    // Otherwise, if value is passed (even if undefined initially) or onValueChange is provided, treat as controlled.
+    const isControlled =
+        defaultValue !== undefined
+            ? value !== undefined
+            : value !== undefined || onValueChange !== undefined;
+
+    const fallbackValue = (multiple ? [] : null) as SelectPrimitive.Root.Props<
+        Value,
+        Multiple
+    >["value"];
+    const resolvedValue = isControlled ? (value ?? fallbackValue) : undefined;
+
+    const key = payloadKey || errorKey || name || id;
+    const resolvedErrors = React.useMemo(() => {
+        return resolveFieldErrors(error, errors, key);
+    }, [error, errors, key]);
+
+    const hasError = resolvedErrors.length > 0;
+    const errorId = id || name ? `${id || name}-error` : undefined;
+
+    const contextValue = React.useMemo<SelectContextValue>(
+        () => ({
+            error,
+            errors,
+            payloadKey,
+            errorKey,
+            containerClassName,
+            errorClassName,
+            resolvedErrors,
+            hasError,
+            errorId,
+        }),
+        [
+            error,
+            errors,
+            payloadKey,
+            errorKey,
+            containerClassName,
+            errorClassName,
+            resolvedErrors,
+            hasError,
+            errorId,
+        ],
+    );
+
+    return (
+        <SelectContext.Provider value={contextValue}>
+            <SelectPrimitive.Root
+                {...(isControlled
+                    ? { value: resolvedValue }
+                    : { defaultValue })}
+                multiple={multiple}
+                onValueChange={onValueChange}
+                name={name}
+                id={id}
+                {...props}
+            >
+                {children}
+            </SelectPrimitive.Root>
+        </SelectContext.Provider>
+    );
+}
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+    return (
+        <SelectPrimitive.Group
+            data-slot="select-group"
+            className={cn("scroll-my-1 p-1", className)}
+            {...props}
+        />
+    );
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+    return (
+        <SelectPrimitive.Value
+            data-slot="select-value"
+            className={cn("flex flex-1 text-left", className)}
+            {...props}
+        />
+    );
+}
+
+export interface SelectTriggerProps
+    extends SelectPrimitive.Trigger.Props,
+        FieldValidationProps {
+    size?: "sm" | "default";
+    id?: string;
+    name?: string;
+}
+
+const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
+    function SelectTrigger(
+        {
+            className,
+            size = "default",
+            children,
+            error,
+            errors,
+            payloadKey,
+            errorKey,
+            containerClassName,
+            errorClassName,
+            id,
+            name,
+            ...props
+        },
+        ref,
+    ) {
+        const parentContext = React.useContext(SelectContext);
+
+        const effectiveError = error ?? parentContext?.error;
+        const effectiveErrors = errors ?? parentContext?.errors;
+        const effectivePayloadKey =
+            payloadKey ||
+            errorKey ||
+            name ||
+            id ||
+            parentContext?.payloadKey ||
+            parentContext?.errorKey;
+
+        const resolvedErrors = React.useMemo(() => {
+            if (
+                error !== undefined ||
+                errors !== undefined ||
+                payloadKey !== undefined ||
+                errorKey !== undefined
+            ) {
+                return resolveFieldErrors(
+                    effectiveError,
+                    effectiveErrors,
+                    effectivePayloadKey,
+                );
+            }
+            return parentContext?.resolvedErrors ?? [];
+        }, [
+            error,
+            errors,
+            payloadKey,
+            errorKey,
+            effectiveError,
+            effectiveErrors,
+            effectivePayloadKey,
+            parentContext?.resolvedErrors,
+        ]);
+
+        const hasError = resolvedErrors.length > 0;
+        const errorId =
+            id || name || parentContext?.errorId
+                ? `${id || name || parentContext?.errorId}-error`
+                : undefined;
+        const effectiveContainerClass =
+            containerClassName || parentContext?.containerClassName;
+        const effectiveErrorClass =
+            errorClassName || parentContext?.errorClassName;
+
+        return (
+            <div className={cn("w-full", effectiveContainerClass)}>
+                <SelectPrimitive.Trigger
+                    ref={ref}
+                    data-slot="select-trigger"
+                    data-size={size}
+                    aria-invalid={hasError ? true : props["aria-invalid"]}
+                    aria-describedby={
+                        hasError && errorId ? errorId : props["aria-describedby"]
+                    }
+                    className={cn(
+                        "flex w-full items-center justify-between gap-1.5 rounded-md border border-dashboard-border bg-dashboard-card px-2.5 py-1 text-xs text-dashboard-foreground font-normal transition-colors outline-none select-none focus-visible:border-dashboard-primary focus-visible:ring-1 focus-visible:ring-dashboard-primary/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-dashboard-destructive aria-invalid:ring-1 aria-invalid:ring-dashboard-destructive/20 data-placeholder:text-dashboard-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[5px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
+                        className,
+                        hasError && ERROR_OUTLINE_CLASSES,
+                    )}
+                    {...props}
+                >
+                    {children}
+                    <SelectPrimitive.Icon
+                        render={
+                            <ChevronDownIcon className="pointer-events-none size-4 text-dashboard-muted-foreground opacity-50 shrink-0 ml-2" />
+                        }
+                    />
+                </SelectPrimitive.Trigger>
+                <FieldError
+                    id={errorId}
+                    errors={resolvedErrors}
+                    className={effectiveErrorClass}
+                />
+            </div>
+        );
+    },
+);
+
+SelectTrigger.displayName = "SelectTrigger";
+
+function SelectContent({
+    className,
+    children,
+    side = "bottom",
+    sideOffset = 4,
+    align = "start",
+    alignOffset = 0,
+    alignItemWithTrigger = false,
+    ...props
+}: SelectPrimitive.Popup.Props &
+    Pick<
+        SelectPrimitive.Positioner.Props,
+        "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+    >) {
+    return (
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Positioner
+                side={side}
+                sideOffset={sideOffset}
+                align={align}
+                alignOffset={alignOffset}
+                alignItemWithTrigger={alignItemWithTrigger}
+                className="isolate z-[100]"
+            >
+                <SelectPrimitive.Popup
+                    data-slot="select-content"
+                    data-align-trigger={alignItemWithTrigger}
+                    className={cn(
+                        "relative isolate z-[100] max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border border-dashboard-border bg-dashboard-card p-1 text-dashboard-foreground shadow-2xl duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+                        className,
+                    )}
+                    {...props}
+                >
+                    <SelectScrollUpButton />
+                    <SelectPrimitive.List>{children}</SelectPrimitive.List>
+                    <SelectScrollDownButton />
+                </SelectPrimitive.Popup>
+            </SelectPrimitive.Positioner>
+        </SelectPrimitive.Portal>
+    );
+}
+
+function SelectLabel({
+    className,
+    ...props
+}: SelectPrimitive.GroupLabel.Props) {
+    return (
+        <SelectPrimitive.GroupLabel
+            data-slot="select-label"
+            className={cn(
+                "px-2 py-1 text-[10.5px] font-semibold uppercase tracking-wider text-dashboard-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function SelectItem({
+    className,
+    children,
+    ...props
+}: SelectPrimitive.Item.Props) {
+    return (
+        <SelectPrimitive.Item
+            data-slot="select-item"
+            className={cn(
+                "relative flex w-full cursor-pointer items-center gap-1.5 rounded-[5px] py-1.5 pr-7 pl-2 text-xs text-dashboard-foreground outline-hidden select-none data-highlighted:bg-dashboard-secondary data-highlighted:text-dashboard-foreground focus:bg-dashboard-secondary focus:text-dashboard-foreground data-selected:font-medium data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+                className,
+            )}
+            {...props}
+        >
+            <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+                {children}
+            </SelectPrimitive.ItemText>
+            <SelectPrimitive.ItemIndicator
+                render={
+                    <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center text-dashboard-primary" />
+                }
+            >
+                <CheckIcon className="pointer-events-none size-3.5 text-dashboard-primary" />
+            </SelectPrimitive.ItemIndicator>
+        </SelectPrimitive.Item>
+    );
+}
+
+function SelectSeparator({
+    className,
+    ...props
+}: SelectPrimitive.Separator.Props) {
+    return (
+        <SelectPrimitive.Separator
+            data-slot="select-separator"
+            className={cn(
+                "pointer-events-none -mx-1 my-1 h-px bg-border",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function SelectScrollUpButton({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+    return (
+        <SelectPrimitive.ScrollUpArrow
+            data-slot="select-scroll-up-button"
+            className={cn(
+                "top-0 z-10 flex w-full cursor-default items-center justify-center bg-dashboard-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        >
+            <ChevronUpIcon />
+        </SelectPrimitive.ScrollUpArrow>
+    );
+}
+
+function SelectScrollDownButton({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+    return (
+        <SelectPrimitive.ScrollDownArrow
+            data-slot="select-scroll-down-button"
+            className={cn(
+                "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-dashboard-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        >
+            <ChevronDownIcon />
+        </SelectPrimitive.ScrollDownArrow>
+    );
+}
+
+export {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectSeparator,
+    SelectTrigger,
+    SelectValue,
+};

package/src/components/sonner.tsx

@@ -0,0 +1,58 @@
+import {
+    CircleCheckIcon,
+    InfoIcon,
+    Loader2Icon,
+    OctagonXIcon,
+    TriangleAlertIcon,
+} from "lucide-react";
+import * as React from "react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+import { AnimatePresence, motion } from "motion/react";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+    return (
+        <AnimatePresence mode="wait">
+            <motion.div
+                initial={{ opacity: 0, y: 40, scale: 0.8 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 20, scale: 0.8 }}
+                transition={{
+                    type: "spring",
+                    stiffness: 400,
+                    damping: 15,
+                    bounce: 0.5,
+                }}
+                className="z-[10000]"
+            >
+                <Sonner
+                    theme="system"
+                    className="toaster group"
+                    icons={{
+                        success: <CircleCheckIcon className="size-4" />,
+                        info: <InfoIcon className="size-4" />,
+                        warning: <TriangleAlertIcon className="size-4" />,
+                        error: <OctagonXIcon className="size-4" />,
+                        loading: <Loader2Icon className="size-4 animate-spin" />,
+                    }}
+                    style={
+                        {
+                            "--normal-bg": "var(--color-dashboard-card, var(--popover))",
+                            "--normal-text": "var(--color-dashboard-foreground, var(--popover-foreground))",
+                            "--normal-border": "var(--color-dashboard-border, var(--border))",
+                            "--border-radius": "12px",
+                        } as React.CSSProperties
+                    }
+                    toastOptions={{
+                        classNames: {
+                            toast: "cn-toast",
+                        },
+                    }}
+                    {...props}
+                />
+            </motion.div>
+        </AnimatePresence>
+    );
+};
+
+export { Toaster };