@solidpb/ui-kit 0.1.0 → 0.2.0

package/dist/components/Table/Table.jsx

@@ -0,0 +1,193 @@
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { attachClosestEdge, extractClosestEdge, } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import invariant from "tiny-invariant";
+import { createSolidTable, flexRender, getCoreRowModel } from "@tanstack/solid-table";
+import { tv } from "tailwind-variants";
+import Loader from "lucide-solid/icons/loader";
+import GripVertical from "lucide-solid/icons/grip-vertical";
+import { triggerFlash } from "../../methods/triggerFlash";
+import { iconSize } from "../../constants";
+const tableClass = tv({
+    base: "table table-pin-rows",
+    variants: {
+        size: {
+            xs: "table-xs",
+            sm: "table-sm",
+            md: "table-md",
+            lg: "table-lg",
+            xl: "table-xl",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+const TableRow = (props) => {
+    let ref;
+    let handleRef;
+    const [dragging, setDragging] = createSignal("idle");
+    const [closestEdge, setClosestEdge] = createSignal();
+    createEffect(() => {
+        if (props.flashSignal?.() === props.row.original.id && ref) {
+            triggerFlash(ref);
+        }
+    });
+    createEffect(() => {
+        if (!props.dragEnabled())
+            return;
+        const element = ref;
+        invariant(element);
+        const dispose = dropTargetForElements({
+            element,
+            canDrop({ source }) {
+                // not allowing dropping on yourself
+                if (source.element === element) {
+                    return false;
+                }
+                // only allowing same collection for now to be dropped on me
+                return source.data.collectionId == props.row.original.collectionId;
+            },
+            getData({ input }) {
+                return attachClosestEdge({ id: props.row.original.id, ind: props.row.index, collectionId: props.row.original.collectionId }, { element, input, allowedEdges: ["top", "bottom"] });
+            },
+            onDragEnter({ self }) {
+                const _closestEdge = extractClosestEdge(self.data);
+                setDragging("dragging-over");
+                setClosestEdge(_closestEdge);
+            },
+            onDrag({ self }) {
+                const _closestEdge = extractClosestEdge(self.data);
+                // Only need to update state if nothing has changed.
+                if (dragging() !== "dragging-over" || _closestEdge !== closestEdge()) {
+                    setDragging("dragging-over");
+                    setClosestEdge(_closestEdge);
+                }
+            },
+            onDragLeave() {
+                setDragging("idle");
+            },
+            onDrop() {
+                setDragging("idle");
+            },
+        });
+        onCleanup(dispose);
+    });
+    createEffect(() => {
+        if (!props.dragEnabled())
+            return;
+        const element = ref;
+        const elementHandle = handleRef;
+        invariant(element);
+        invariant(elementHandle);
+        const dispose = draggable({
+            element,
+            dragHandle: elementHandle,
+            getInitialData() {
+                return {
+                    id: props.row.original.id,
+                    ind: props.row.index,
+                    collectionId: props.row.original.collectionId,
+                };
+            },
+            onDragStart() {
+                setDragging("dragging");
+            },
+            onDrop() {
+                setDragging("idle");
+            },
+        });
+        onCleanup(dispose);
+    });
+    return (<tr ref={ref} data-drop-edge={dragging() === "dragging-over" ? (closestEdge() ?? undefined) : undefined} class="row-hover relative" style={{ opacity: dragging() == "dragging" ? 0.2 : 1 }} onClick={() => props.onRowClick(props.row.original)}>
+      <Show when={props.row.original.tablePosition !== undefined}>
+        <th ref={handleRef} class="cursor-pointer">
+          <GripVertical size={iconSize[props.size ?? "md"]}/>
+        </th>
+      </Show>
+      <For each={props.row.getVisibleCells()}>
+        {(cell) => <td>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>}
+      </For>
+    </tr>);
+};
+export const Table = (props) => {
+    const table = createSolidTable({
+        get data() {
+            return props.data || [];
+        },
+        columns: props.columns(),
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const rowCount = createMemo(() => table.getRowModel().rows.length);
+    const rows = createMemo(() => table.getRowModel().rows);
+    const dragEnabled = createMemo(() => {
+        return props.data.length > 0 && "tablePosition" in props.data[0];
+    });
+    const [flashedRowId, setFlashedRowId] = createSignal(null);
+    createEffect(() => {
+        if (!rows().length || !dragEnabled())
+            return;
+        const dispose = monitorForElements({
+            canMonitor({ source }) {
+                return source.data.collectionId == props.data[0].collectionId;
+            },
+            onDrop({ location, source }) {
+                const target = location.current.dropTargets[0];
+                if (!target) {
+                    return;
+                }
+                const sourceData = source.data;
+                const targetData = target.data;
+                if (sourceData.collectionId !== targetData.collectionId) {
+                    return;
+                }
+                if (sourceData.ind < 0 || targetData.ind < 0) {
+                    return;
+                }
+                const closestEdgeOfTarget = extractClosestEdge(targetData);
+                let newInd = closestEdgeOfTarget === "top" ? targetData.ind : targetData.ind + 1;
+                if (newInd > sourceData.ind) {
+                    newInd--;
+                }
+                if (sourceData.ind !== newInd) {
+                    setFlashedRowId(sourceData.id);
+                    setTimeout(() => setFlashedRowId(null), 10);
+                }
+                props.onReorderRow?.(props.data[sourceData.ind], sourceData.ind, newInd);
+            },
+        });
+        onCleanup(dispose);
+    });
+    return (<div class="overflow-x-auto">
+      <Show when={!props.loading} fallback={props.loadingFallback || (<div class="fixed inset-0 z-10 flex items-center justify-center">
+              <Loader class="w-9 h-9 animate-spin"/>
+            </div>)}>
+        <Show when={rowCount() > 0} fallback={props.emptyState || <div class="text-center py-4">No results found.</div>}>
+          <table class={tableClass({ class: props.class })}>
+            <Show when={props.headers}>
+              <thead>
+                <For each={table.getHeaderGroups()}>
+                  {(headerGroup) => (<tr>
+                      <Show when={dragEnabled()}>
+                        <th></th>
+                      </Show>
+                      <For each={headerGroup.headers}>
+                        {(header) => (<th>{flexRender(header.column.columnDef.header, header.getContext())}</th>)}
+                      </For>
+                    </tr>)}
+                </For>
+              </thead>
+            </Show>
+
+            <tbody>
+              <For each={rows()}>
+                {(row, ind) => (<TableRow row={row} ind={ind()} onRowClick={() => props.onRowClick(row.original)} dragEnabled={dragEnabled} flashSignal={() => flashedRowId()}/>)}
+              </For>
+            </tbody>
+          </table>
+        </Show>
+      </Show>
+    </div>);
+};
+export default Table;

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

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

package/dist/components/Table/index.js

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

package/dist/components/Tabs/Tabs.d.ts

@@ -1,3 +1,27 @@
 import { ParentComponent } from "solid-js";
-export declare const Tabs: ParentComponent;
+export interface TabsProps {
+    defaultTab?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+export interface TabsComponents {
+    Trigger: ParentComponent<{
+        value: string;
+    }>;
+    Content: ParentComponent<{
+        value: string;
+    }>;
+    List: ParentComponent<{
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+    }>;
+}
+export declare const Tabs: ParentComponent<TabsProps> & TabsComponents;
+export declare const TabList: ParentComponent<{
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+}>;
+export declare const TabTrigger: ParentComponent<{
+    value: string;
+}>;
+export declare const TabContent: ParentComponent<{
+    value: string;
+}>;
 export default Tabs;

package/dist/components/Tabs/Tabs.jsx

@@ -1,4 +1,45 @@
+import { Tabs as KTabs } from "@kobalte/core/tabs";
+import { tv } from "tailwind-variants";
+const tabs = tv({
+    base: "tabs tabs-box",
+    variants: {
+        size: {
+            xs: "tabs-xs",
+            sm: "tabs-sm",
+            md: "tabs-base",
+            lg: "tabs-lg",
+            xl: "tabs-xl",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+const tab = tv({
+    base: "tab tab-lifted",
+});
+const tabContent = tv({
+    base: "card bg-base-100 border-base-300 p-3 w-full",
+});
 export const Tabs = (props) => {
-    return <div>{props.children}</div>;
+    return (<KTabs class={tabs({ size: props.size })} defaultValue={props.defaultTab}>
+      {props.children}
+    </KTabs>);
 };
+export const TabList = (props) => {
+    return <KTabs.List class={tabs({ size: props.size })}>{props.children}</KTabs.List>;
+};
+export const TabTrigger = (props) => {
+    return (<KTabs.Trigger value={props.value} as={"a"} class={tab()}>
+      {props.children}
+    </KTabs.Trigger>);
+};
+export const TabContent = (props) => {
+    return (<KTabs.Content class={tabContent()} value={props.value}>
+      {props.children}
+    </KTabs.Content>);
+};
+Tabs.Trigger = TabTrigger;
+Tabs.Content = TabContent;
+Tabs.List = TabList;
 export default Tabs;

package/dist/components/Tabs/tabContext.d.ts

@@ -0,0 +1,9 @@
+import { Accessor } from "solid-js";
+type ModalContextType = {
+    id: string;
+    title?: string;
+    open: Accessor<boolean>;
+    setOpen: (v: boolean) => void;
+};
+export declare const ModalContext: import("solid-js").Context<ModalContextType | undefined>;
+export {};

package/dist/components/Tabs/tabContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "solid-js";
+export const ModalContext = createContext();

package/dist/components/Tag/Tag.d.ts

@@ -1,10 +1,12 @@
 import { Component } from "solid-js";
-interface Props {
-    onClick: () => void;
+export interface TagProps {
     title: string;
-    colorHex: string;
-    size?: "xs" | "s" | "m";
+    colorHex?: string;
+    onDelete?: () => void;
+    variant?: "ghost" | "outline" | "dash" | "soft";
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     class?: string;
 }
-export declare const Tag: Component<Props>;
+export declare const Tag: Component<TagProps>;
 export default Tag;

package/dist/components/Tag/Tag.jsx

@@ -1,30 +1,56 @@
-import { createMemo } from "solid-js";
 import { Button as KobalteButton } from "@kobalte/core/button";
 import CloseIcon from "lucide-solid/icons/x";
 import { tv } from "tailwind-variants";
 const tag = tv({
-    base: "flex items-center rounded-full select-none border-1 font-bold",
+    base: "badge rounded-full",
     variants: {
         size: {
-            m: "text-sm px-2 py-1",
-            s: "text-sm pl-1.5 pr-1 py-0.5",
-            xs: "text-xs px-1",
+            xs: "badge-xs",
+            sm: "badge-sm",
+            md: "badge-md",
+            lg: "badge-lg",
+            xl: "badge-xl",
+        },
+        appearance: {
+            neutral: "badge-neutral",
+            primary: "badge-primary",
+            secondary: "badge-secondary",
+            accent: "badge-accent",
+            info: "badge-info",
+            success: "badge-success",
+            warning: "badge-warning",
+            error: "badge-error",
+        },
+        variant: {
+            ghost: "badge-ghost",
+            outline: "badge-outline",
+            dash: "badge-dash",
+            soft: "badge-soft",
+            none: "",
         },
     },
     defaultVariants: {
-        size: "m",
+        size: "sm",
     },
 });
 export const Tag = (props) => {
-    const classes = createMemo(() => tag({
-        size: props.size,
-        class: props.class,
-    }));
-    return (<div style={{ "background-color": `${props.colorHex}30`, color: `${props.colorHex}` }} class={classes()}>
+    const style = props.colorHex
+        ? {
+            "background-color": `${props.colorHex}40`,
+            color: `${props.colorHex}`,
+            "border-color": `${props.colorHex}`,
+        }
+        : {};
+    return (<div style={style} class={tag({
+            size: props.size,
+            class: props.class,
+            appearance: props.appearance,
+            variant: props.variant,
+        })}>
       <span>{props.title}</span>
-      <KobalteButton onClick={props.onClick} class="pl-1 flex items-center justify-center">
-        <CloseIcon size={14}/>
-      </KobalteButton>
+      {props.onDelete && (<KobalteButton onClick={props.onDelete}>
+          <CloseIcon class="w-[1em] h-[1em]" stroke-width={4}/>
+        </KobalteButton>)}
     </div>);
 };
 export default Tag;

package/dist/components/TagArea/TagArea.d.ts

@@ -1,11 +1,15 @@
-import { JSX } from "solid-js";
-interface TagAreaProps<T extends TagRecord = TagRecord> {
+import { JSX, JSXElement } from "solid-js";
+interface TagAreaProps<T extends Tag = Tag> {
     tags: T[];
     setTags: (tags: T[]) => void;
-    onCreateTag: (name: string) => Promise<T>;
+    onCreateTag: (name: string) => Promise<T | undefined>;
     onDeleteTag: (tag: T) => Promise<void>;
     suggestions?: T[];
+    noSuggestionsPlaceholder?: string;
+    dropDownAction?: JSXElement;
     placeholder?: string;
+    editable?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
-export declare const TagArea: <T extends TagRecord = TagRecord>(props: TagAreaProps<T>) => JSX.Element;
+export declare const TagArea: <T extends Tag = Tag>(props: TagAreaProps<T>) => JSX.Element;
 export default TagArea;

package/dist/components/TagArea/TagArea.jsx

@@ -1,25 +1,65 @@
 import { createSignal, For, Show, createMemo } from "solid-js";
-import { Input } from "../Input";
+import { TextField } from "@kobalte/core/text-field";
 import Tag from "../Tag/Tag";
+import { tv } from "tailwind-variants";
+const tagArea = tv({
+    base: "textarea outline-offset-0 p-2 min-h-2",
+    variants: {
+        editing: {
+            true: "",
+            false: "cursor-pointer",
+        },
+    },
+});
+const menu = tv({
+    base: "dropdown-content bg-base-200 min-w-30 shadow-sm rounded-box menu absolute border border-base-200 gap-1",
+    variants: {
+        size: {
+            xs: "menu-xs",
+            sm: "menu-sm",
+            md: "menu-base",
+            lg: "menu-lg",
+            xl: "menu-xl",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
 export const TagArea = (props) => {
     const [tagInput, setTagInput] = createSignal("");
     const [showSuggestions, setShowSuggestions] = createSignal(false);
+    const [editing, setEditing] = createSignal(false);
+    let inputRef;
     const filteredSuggestions = createMemo(() => (props.suggestions || []).filter((s) => s.name.toLowerCase().includes(tagInput().toLowerCase()) && !props.tags.some((t) => t.id === s.id)));
     const handleTagInput = async (e) => {
-        if (e.key === "Enter" && tagInput().trim()) {
-            e.preventDefault();
-            const newTagName = tagInput().trim();
-            if (!props.tags.map((t) => t.name).includes(newTagName)) {
-                let newTag = undefined;
-                newTag = await props.onCreateTag(newTagName);
-                if (newTag)
-                    props.setTags([...props.tags, newTag]);
+        setShowSuggestions(true);
+        if (tagInput().trim()) {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                const newTagName = tagInput().trim();
+                if (!props.tags.map((t) => t.name).includes(newTagName)) {
+                    let newTag = undefined;
+                    newTag = await props.onCreateTag(newTagName);
+                    if (newTag)
+                        props.setTags([...props.tags, newTag]);
+                }
+                setTagInput("");
+                setShowSuggestions(false);
+            }
+            else {
+                setShowSuggestions(true);
             }
-            setTagInput("");
-            setShowSuggestions(false);
         }
         else {
-            setShowSuggestions(true);
+            if (e.key === "Delete" || e.key === "Backspace") {
+                if (props.tags.length > 0) {
+                    const lastTag = props.tags[props.tags.length - 1];
+                    await props.onDeleteTag(lastTag);
+                    props.setTags(props.tags.slice(0, -1));
+                }
+            }
         }
     };
     const handleSuggestionClick = (tag) => {
@@ -31,31 +71,45 @@ export const TagArea = (props) => {
         await props.onDeleteTag(t);
         props.setTags((props.tags || []).filter((tag) => tag.id !== t.id));
     };
-    return (<div class="rounded-md p-2 flex flex-col bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)]">
-      <div class="flex flex-wrap gap-2">
+    return (<div class={tagArea({ editing: editing() })} onMouseDown={(e) => {
+            if (props.editable === false)
+                return;
+            e.preventDefault();
+            setEditing(true);
+            inputRef?.focus();
+        }}>
+      <div class="flex flex-wrap gap-1">
         <For each={props.tags || []}>
-          {(t) => (<Tag title={t.name || ""} colorHex={t.colorHex || "#6b7280"} onClick={() => deleteTag(t)}/>)}
+          {(t) => (<Tag title={t.name || ""} colorHex={t.colorHex || "#6b7280"} onDelete={editing()
+                ? () => {
+                    setShowSuggestions(false);
+                    deleteTag(t);
+                }
+                : undefined} size={props.size}/>)}
         </For>
-        <div class="relative flex-1 min-w-[120px]">
-          <Input label="" value={tagInput()} onChange={(v) => {
-            setTagInput(v);
-            setShowSuggestions(true);
-        }} inputProps={{
-            onKeyDown: handleTagInput,
-            placeholder: props.placeholder || "Add tags (press Enter)",
-            onFocus: () => setShowSuggestions(true),
-            onBlur: () => setTimeout(() => setShowSuggestions(false), 100),
-        }} class="w-full"/>
-          <Show when={showSuggestions() && filteredSuggestions().length > 0}>
-            <div class="absolute z-10 mt-1 w-full bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] border border-[var(--color-light-muted)] dark:border-[var(--color-dark-muted)] rounded shadow-lg max-h-40 overflow-auto">
-              <For each={filteredSuggestions()}>
-                {(s) => (<div class="px-3 py-2 cursor-pointer hover:bg-[var(--color-light-muted)] dark:hover:bg-[var(--color-dark-muted)]" onMouseDown={() => handleSuggestionClick(s)}>
-                    {s.name}
-                  </div>)}
-              </For>
-            </div>
-          </Show>
-        </div>
+        {editing() && props.editable !== false && (<div class="relative flex-1 min-w-30">
+            <TextField value={tagInput()} onChange={setTagInput}>
+              <TextField.Input ref={inputRef} onKeyDown={handleTagInput} placeholder={props.placeholder || ""} onBlur={() => {
+                setEditing(false);
+                setShowSuggestions(false);
+                setTagInput("");
+            }} class="w-full focus:outline-none"/>
+            </TextField>
+            <Show when={showSuggestions()}>
+              <div class={menu({ size: props.size })}>
+                <Show when={filteredSuggestions().length > 0} fallback={<p class="italic text-xs">{props.noSuggestionsPlaceholder ?? "No matches found"}</p>}>
+                  <ul>
+                    <For each={filteredSuggestions()}>
+                      {(s) => (<li class="cursor-pointer rounded" onMouseDown={() => handleSuggestionClick(s)}>
+                          <a>{s.name}</a>
+                        </li>)}
+                    </For>
+                  </ul>
+                </Show>
+                <Show when={props.dropDownAction}>{props.dropDownAction}</Show>
+              </div>
+            </Show>
+          </div>)}
       </div>
     </div>);
 };

package/dist/components/TextArea/TextArea.d.ts

@@ -1,14 +1,15 @@
 import { Component, ValidComponent } from "solid-js";
-import { type TextFieldInputProps, type TextFieldRootProps } from "@kobalte/core/text-field";
+import { type TextFieldTextAreaProps, type TextFieldRootProps } from "@kobalte/core/text-field";
 import type { PolymorphicProps } from "@kobalte/core";
-type InputProps<T extends ValidComponent = "textarea"> = PolymorphicProps<T, TextFieldInputProps<T>>;
-interface ExtraProps {
+export type TextAreaProps<T extends ValidComponent = "textarea"> = PolymorphicProps<T, TextFieldTextAreaProps<T>>;
+export interface TextAreaExtraProps {
     label?: string;
     saveFunc?: (v: string) => Promise<any>;
-    inputProps?: InputProps;
-    variant?: "bordered" | "none";
-    size?: "sm" | "md";
+    textareaProps?: TextAreaProps;
+    variant?: "ghost";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    appearance?: "primary" | "secondary" | "success" | "warning" | "neutral" | "error" | "accent" | "info";
 }
-type InputRootProps<T extends ValidComponent = "div"> = ExtraProps & PolymorphicProps<T, TextFieldRootProps<T>>;
-export declare const TextArea: Component<InputRootProps>;
+export type TextAreaRootProps<T extends ValidComponent = "div"> = TextAreaExtraProps & PolymorphicProps<T, TextFieldRootProps<T>>;
+export declare const TextArea: Component<TextAreaRootProps>;
 export default TextArea;