@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/textarea.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { ThemedText } from "../index";
+import { cn } from "../support/utils";
+import {
+    FieldError,
+    FieldValidationProps,
+    resolveFieldErrors,
+    ERROR_OUTLINE_CLASSES,
+} from "./form-error";
+
+export interface TextareaProps
+    extends Omit<React.ComponentProps<"textarea">, "color">,
+        FieldValidationProps {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    function Textarea(
+        {
+            className,
+            containerClassName,
+            errorClassName,
+            error,
+            errors,
+            payloadKey,
+            errorKey,
+            ...props
+        },
+        ref,
+    ) {
+        const resolvedErrors = React.useMemo(() => {
+            const key = payloadKey || errorKey || props.name || props.id;
+            return resolveFieldErrors(error, errors, key);
+        }, [error, errors, payloadKey, errorKey, props.name, props.id]);
+
+        const hasError = resolvedErrors.length > 0;
+        const errorId =
+            props.id || props.name ? `${props.id || props.name}-error` : undefined;
+
+        return (
+            <div className={cn("w-full", containerClassName)}>
+                <ThemedText
+                    ref={ref}
+                    as="textarea"
+                    data-slot="textarea"
+                    aria-invalid={hasError ? true : props["aria-invalid"]}
+                    aria-describedby={
+                        hasError && errorId ? errorId : props["aria-describedby"]
+                    }
+                    className={cn(
+                        "flex min-h-20 w-full rounded-md border border-dashboard-border bg-dashboard-card px-2.5 py-2 text-xs text-dashboard-foreground transition-colors outline-none placeholder:text-dashboard-muted-foreground focus-visible:border-dashboard-primary focus-visible:ring-1 focus-visible:ring-dashboard-primary/30 disabled:cursor-not-allowed disabled:opacity-50 resize-y",
+                        className,
+                        hasError && ERROR_OUTLINE_CLASSES,
+                    )}
+                    {...(props as any)}
+                />
+                <FieldError
+                    id={errorId}
+                    errors={resolvedErrors}
+                    className={errorClassName}
+                />
+            </div>
+        );
+    },
+);
+
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/condition-builder/index.ts

@@ -0,0 +1,2 @@
+export * from "../components/ConditionBuilder";
+export * from "../components/FilterConditionChip";

package/src/context-menu/index.ts

@@ -0,0 +1,2 @@
+export * from "../components/context menu core/context-menu";
+export * from "../components/context menu core/contextMenuAdvanced";

package/src/dropdown/SearchDropdown.tsx

@@ -0,0 +1,145 @@
+import { cn } from "../support/utils";
+import { Check, ChevronDown, Search } from "lucide-react";
+import React, { useState } from "react";
+import { Button } from "../ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Input } from "../ui/input";
+
+export interface SearchDropdownOption {
+    label: string;
+    value: string;
+    description?: string;
+    icon?: React.ReactNode;
+}
+
+export interface SearchDropdownProps {
+    options: SearchDropdownOption[];
+    value?: string;
+    onSelect: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    disabled?: boolean;
+}
+
+export function SearchDropdown({
+    options,
+    value,
+    onSelect,
+    placeholder = "Select an option...",
+    searchPlaceholder = "Search...",
+    triggerClassName,
+    contentClassName,
+    disabled = false,
+}: SearchDropdownProps) {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+
+    const selectedOption = options.find((opt) => opt.value === value);
+
+    const filteredOptions = options.filter(
+        (opt) =>
+            opt.label.toLowerCase().includes(search.toLowerCase()) ||
+            opt.description?.toLowerCase().includes(search.toLowerCase()),
+    );
+
+    return (
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    type="button"
+                    variant="outline"
+                    disabled={disabled}
+                    className={cn(
+                        "h-8 px-3 justify-between bg-dashboard-background border-dashboard-border text-xs font-normal text-dashboard-foreground hover:bg-dashboard-secondary rounded-lg w-full min-w-[160px]",
+                        !selectedOption && "text-dashboard-muted-foreground",
+                        triggerClassName,
+                    )}
+                >
+                    <div className="flex items-center gap-2 truncate">
+                        {selectedOption?.icon}
+                        <span className="truncate">
+                            {selectedOption
+                                ? selectedOption.label
+                                : placeholder}
+                        </span>
+                    </div>
+                    <ChevronDown className="w-3.5 h-3.5 opacity-60 shrink-0 ml-2" />
+                </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+                align="start"
+                className={cn(
+                    "w-64 p-2 bg-dashboard-card border-dashboard-border shadow-2xl rounded-xl space-y-1.5",
+                    contentClassName,
+                )}
+            >
+                {/* Search Input Box */}
+                <div className="relative">
+                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-dashboard-muted-foreground pointer-events-none" />
+                    <Input
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                        placeholder={searchPlaceholder}
+                        className="h-7 pl-8 pr-2 text-xs bg-dashboard-background border-dashboard-border rounded-md"
+                        autoFocus
+                    />
+                </div>
+
+                {/* Options List */}
+                <div className="max-h-48 overflow-y-auto space-y-0.5 pt-1">
+                    {filteredOptions.length === 0 ? (
+                        <div className="py-4 text-center text-xs text-dashboard-muted-foreground">
+                            No results found.
+                        </div>
+                    ) : (
+                        filteredOptions.map((opt) => {
+                            const isSelected = opt.value === value;
+                            return (
+                                <DropdownMenuItem
+                                    key={opt.value}
+                                    onClick={() => {
+                                        onSelect(opt.value);
+                                        setOpen(false);
+                                        setSearch("");
+                                    }}
+                                    className={cn(
+                                        "flex items-center justify-between px-2.5 py-1.5 rounded-md text-xs cursor-pointer text-dashboard-foreground hover:bg-dashboard-secondary transition-colors",
+                                        isSelected &&
+                                            "bg-dashboard-secondary/60 font-semibold text-dashboard-primary",
+                                    )}
+                                >
+                                    <div className="flex items-center gap-2 min-w-0">
+                                        {opt.icon}
+                                        <div className="truncate">
+                                            <div className="truncate">
+                                                {opt.label}
+                                            </div>
+                                            {opt.description && (
+                                                <div className="text-[10px] text-dashboard-muted-foreground truncate">
+                                                    {opt.description}
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                    {isSelected && (
+                                        <Check className="w-3.5 h-3.5 text-dashboard-primary shrink-0 ml-2" />
+                                    )}
+                                </DropdownMenuItem>
+                            );
+                        })
+                    )}
+                </div>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+export default SearchDropdown;

package/src/dropdown/index.ts

@@ -0,0 +1,2 @@
+export * from "../components/dropdown-menu";
+export * from "./SearchDropdown";

package/src/editor.ts

@@ -0,0 +1 @@
+export * from "./components/RichTextEditor";

package/src/feedback/index.ts

@@ -0,0 +1,6 @@
+export * from "../components/dialog";
+export * from "../components/ConfirmDialog";
+export * from "../components/LoadingState";
+export { ErrorState, getErrorMessage } from "../components/ErrorState";
+export * from "../components/EmptyState";
+export * from "../components/sonner";

package/src/flow.ts

@@ -0,0 +1 @@
+export * from "./components/react-flow";

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./useFeatureLayout";
+export * from "./useTableActions";
+export * from "./useContextMenuActions";

package/src/hooks/useContextMenuActions.ts

@@ -0,0 +1,69 @@
+import { useCallback } from "react";
+import * as React from "react";
+import {
+    RowActionsDropdown,
+    renderContextMenuItems,
+    type TableActionItem,
+} from "../components/TableActions";
+
+export type ActionListInput<T> =
+    | TableActionItem<T>[]
+    | ((item: T) => TableActionItem<T>[]);
+
+export interface UseContextMenuActionsReturn<T> {
+    /** Get list of actions for a given item */
+    getActions: (item: T) => TableActionItem<T>[];
+    /** Render context menu items for a given item (usable in DataTable or ContextMenuAdvanced) */
+    renderContextMenu: (item: T) => React.ReactNode;
+    /** Render row actions dropdown for a given item (usable in table action column) */
+    renderRowActions: (item: T) => React.ReactNode;
+}
+
+/**
+ * Custom hook to manage context menu & table row actions in one place,
+ * preventing duplication between DataTable and standalone context menus.
+ */
+export function useContextMenuActions<T>(
+    actionsInput?: ActionListInput<T>,
+): UseContextMenuActionsReturn<T> {
+    const getActions = useCallback(
+        (item: T): TableActionItem<T>[] => {
+            if (!actionsInput) return [];
+            if (typeof actionsInput === "function") {
+                return actionsInput(item);
+            }
+            return actionsInput;
+        },
+        [actionsInput],
+    );
+
+    const renderContextMenu = useCallback(
+        (item: T) => {
+            const actions = getActions(item);
+            if (actions.length === 0) return null;
+            return renderContextMenuItems(item, actions);
+        },
+        [getActions],
+    );
+
+    const renderRowActions = useCallback(
+        (item: T) => {
+            const actions = getActions(item);
+            if (actions.length === 0) return null;
+            return React.createElement(
+                RowActionsDropdown as React.ComponentType<{
+                    item: T;
+                    actions: TableActionItem<T>[];
+                }>,
+                { item, actions },
+            );
+        },
+        [getActions],
+    );
+
+    return {
+        getActions,
+        renderContextMenu,
+        renderRowActions,
+    };
+}

package/src/hooks/useFeatureLayout.ts

@@ -0,0 +1,44 @@
+import { useState } from "react";
+
+export type FeatureLayoutViewMode =
+    | "list"
+    | "grid"
+    | "board"
+    | "kanban"
+
+export interface FeatureLayoutState<TTab = string> {
+    activeTab: TTab;
+    setActiveTab: (tab: TTab) => void;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    viewMode: FeatureLayoutViewMode;
+    setViewMode: (mode: FeatureLayoutViewMode) => void;
+    isSidebarOpen: boolean;
+    setSidebarOpen: (isOpen: boolean) => void;
+    isFilterOpen: boolean;
+    setFilterOpen: (isOpen: boolean) => void;
+}
+
+export function useFeatureLayout<TTab = string>(
+    defaultTab: TTab,
+    defaultView: FeatureLayoutViewMode = "list",
+): FeatureLayoutState<TTab> {
+    const [activeTab, setActiveTab] = useState<TTab>(defaultTab);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [viewMode, setViewMode] = useState<FeatureLayoutViewMode>(defaultView);
+    const [isSidebarOpen, setSidebarOpen] = useState(false);
+    const [isFilterOpen, setFilterOpen] = useState(false);
+
+    return {
+        activeTab,
+        setActiveTab,
+        searchQuery,
+        setSearchQuery,
+        viewMode,
+        setViewMode,
+        isSidebarOpen,
+        setSidebarOpen,
+        isFilterOpen,
+        setFilterOpen
+    };
+}

package/src/hooks/useTableActions.ts

@@ -0,0 +1,146 @@
+import { useCallback, useState } from "react";
+import * as React from "react";
+import { toast } from "sonner";
+import type { ConfirmDialogProps } from "../components/ConfirmDialog";
+import {
+    useContextMenuActions,
+    type ActionListInput,
+} from "./useContextMenuActions";
+
+export interface UseTableActionsOptions<T> {
+    /** Declarative table actions array or callback */
+    actions?: ActionListInput<T>;
+    /** Callback when delete confirmation is confirmed */
+    onDelete?: (item: T) => void | Promise<void>;
+    /** Property name to use as entity label in delete dialog title/description, e.g. "name", "title" */
+    labelKey?: keyof T;
+    /** Custom entity name for dialog title, e.g. "Member", "User", "Incident" */
+    entityName?: string;
+    /** Is delete operation pending */
+    isDeleting?: boolean;
+}
+
+export interface UseTableActionsReturn<T> {
+    /** Currently selected item for detail view / drawer */
+    selectedItem: T | null;
+    /** Is detail view / drawer open */
+    isDetailsOpen: boolean;
+    /** Open detail view for item */
+    openDetails: (item: T) => void;
+    /** Close detail view */
+    closeDetails: () => void;
+    /** Set selected item directly */
+    setSelectedItem: (item: T | null) => void;
+
+    /** Currently targeted item for deletion */
+    itemToDelete: T | null;
+    /** Is delete confirm dialog open */
+    isDeleteOpen: boolean;
+    /** Open delete confirmation for item */
+    openDelete: (item: T) => void;
+    /** Close delete confirmation */
+    closeDelete: () => void;
+    /** Confirm delete action handler */
+    confirmDelete: () => void;
+
+    /** Helper to copy text to clipboard with toast notification */
+    copyToClipboard: (text: string, label?: string) => void;
+
+    /** Pre-configured props for ConfirmDialog component */
+    deleteDialogProps: ConfirmDialogProps;
+
+    /** Render context menu for an item (for DataTable or ContextMenuAdvanced) */
+    renderContextMenu: (item: T) => React.ReactNode;
+    /** Render row action dropdown for an item (for table action column) */
+    renderRowActions: (item: T) => React.ReactNode;
+}
+
+export function useTableActions<T>({
+    actions,
+    onDelete,
+    labelKey,
+    entityName = "Item",
+    isDeleting = false,
+}: UseTableActionsOptions<T> = {}): UseTableActionsReturn<T> {
+    const [selectedItem, setSelectedItem] = useState<T | null>(null);
+    const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+
+    const [itemToDelete, setItemToDelete] = useState<T | null>(null);
+    const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+
+    const { renderContextMenu, renderRowActions } = useContextMenuActions<T>(actions);
+
+    const openDetails = useCallback((item: T) => {
+        setSelectedItem(item);
+        setIsDetailsOpen(true);
+    }, []);
+
+    const closeDetails = useCallback(() => {
+        setIsDetailsOpen(false);
+        setSelectedItem(null);
+    }, []);
+
+    const openDelete = useCallback((item: T) => {
+        setItemToDelete(item);
+        setIsDeleteOpen(true);
+    }, []);
+
+    const closeDelete = useCallback(() => {
+        setIsDeleteOpen(false);
+        setItemToDelete(null);
+    }, []);
+
+    const confirmDelete = useCallback(() => {
+        if (itemToDelete && onDelete) {
+            onDelete(itemToDelete);
+        }
+        closeDelete();
+    }, [itemToDelete, onDelete, closeDelete]);
+
+    const copyToClipboard = useCallback((text: string, label?: string) => {
+        if (!text) return;
+        navigator.clipboard.writeText(text);
+        toast.success(
+            label ? `${label} copied to clipboard!` : "Copied to clipboard!",
+        );
+    }, []);
+
+    const itemLabel =
+        itemToDelete && labelKey ? String(itemToDelete[labelKey] ?? "") : "";
+
+    const deleteDialogProps: ConfirmDialogProps = {
+        open: isDeleteOpen,
+        onOpenChange: (open) => {
+            if (!open) closeDelete();
+        },
+        variant: "danger",
+        title: `Remove ${entityName}`,
+        description: itemLabel
+            ? `Are you sure you want to remove "${itemLabel}"? This action cannot be undone and will revoke all access privileges.`
+            : `Are you sure you want to remove this ${entityName.toLowerCase()}? This action cannot be undone and will revoke all access privileges.`,
+        confirmText: `Remove ${entityName}`,
+        isLoading: isDeleting,
+        onConfirm: confirmDelete,
+    };
+
+    return {
+        selectedItem,
+        isDetailsOpen,
+        openDetails,
+        closeDetails,
+        setSelectedItem,
+
+        itemToDelete,
+        isDeleteOpen,
+        openDelete,
+        closeDelete,
+        confirmDelete,
+
+        copyToClipboard,
+
+        deleteDialogProps,
+
+        renderContextMenu,
+        renderRowActions,
+    };
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+// ============================================================================
+// Atomic Puzzle Structure & Module Namespaces
+// ============================================================================
+export * as UI from "./ui";
+export * as Shadcn from "./ui";
+export * as Primitives from "./primitives";
+export * as TablePuzzle from "./table";
+export * as DropdownPuzzle from "./dropdown";
+export * as SelectPuzzle from "./select";
+export * as ITSMPuzzle from "./itsm";
+export * as ConditionBuilderPuzzle from "./condition-builder";
+export * as ActivityPuzzle from "./activity";
+export * as WorkspacePuzzle from "./workspace";
+export * as FeedbackPuzzle from "./feedback";
+export * as ContextMenuPuzzle from "./context-menu";
+
+// ============================================================================
+// Flat Exports for 100% Backward-Compatibility across all features
+// ============================================================================
+export * from "./dropdown/SearchDropdown";
+export * from "./components";
+export * from "./hooks";
+export * from "./types";
+export * from "./progress";
+export * from "./typography";
+
+export * from "./integrations";

package/src/integrations.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext, type ReactNode } from 'react';
+export interface MediaItem { id: string | number; name: string; url: string; mime_type?: string; type?: string; thumbnail?: string; thumbnail_url?: string; path?: string; file_name?: string; original_url?: string; [key: string]: unknown }
+export interface MediaPickerOptions { allowedTypes?: string[]; maxSelection?: number; title?: string; description?: string; onSelect: (items: MediaItem[]) => void }
+export interface MediaPicker { openPicker(options: MediaPickerOptions): void }
+const MediaContext = createContext<MediaPicker | null>(null);
+export function MediaPickerProvider({ adapter, children }: { adapter: MediaPicker; children: ReactNode }) { return <MediaContext.Provider value={adapter}>{children}</MediaContext.Provider>; }
+export const useOptionalMediaPickerContext = () => useContext(MediaContext);
+export interface Member { id: string | number; name: string; avatar?: string; email?: string }
+const MembersContext = createContext<Member[]>([]);
+export function MembersProvider({ members, children }: { members: Member[]; children: ReactNode }) { return <MembersContext.Provider value={members}>{children}</MembersContext.Provider>; }
+export function useChannelMembers(_channelId?: string | number) { return { data: useContext(MembersContext) }; }

package/src/itsm/index.ts

@@ -0,0 +1,7 @@
+export * from "../components/StatusBadge";
+export * from "../components/PrioritySignal";
+export * from "../components/SLACountdown";
+export * from "../components/PinnedAttributeRow";
+export * from "../components/FileAttachmentChip";
+export * from "../components/FilterConditionChip";
+export { default as StatusCards } from "../components/StatusCards";