@solidpb/ui-kit 0.1.1 → 0.2.0

package/dist/components/Kanban/KanbanColumn.jsx

@@ -0,0 +1,256 @@
+import { createSignal, createMemo, createEffect, onCleanup, Show, For } from "solid-js";
+import { attachClosestEdge, extractClosestEdge, } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { dropTargetForElements, draggable, monitorForElements, } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import Fold from "lucide-solid/icons/fold-horizontal";
+import UnFold from "lucide-solid/icons/unfold-horizontal";
+import Plus from "lucide-solid/icons/plus";
+import invariant from "tiny-invariant";
+import { tv } from "tailwind-variants";
+import { triggerFlash } from "../../methods/triggerFlash";
+import { iconSize } from "../../constants";
+import { Button } from "../Button";
+import { KanbanCard } from "./KanbanCard";
+import { Input } from "../Input";
+const column = tv({
+    base: "kanban-column flex flex-col gap-1 flex-shrink-0 bg-base-300 p-1.5 rounded-md transition-[width] text-nowrap",
+    variants: {
+        folded: {
+            true: "w-9",
+            false: "w-70",
+        },
+    },
+    defaultVariants: {
+        folded: false,
+    },
+});
+const columnHeader = tv({
+    base: "font-semibold text-sm sticky top-0 pb-1",
+    variants: {
+        folded: {
+            true: "flex flex-col",
+            false: "flex justify-between",
+        },
+    },
+    defaultVariants: {
+        folded: false,
+    },
+});
+const columnContent = tv({
+    base: "flex flex-col gap-1.5",
+});
+export const KanbanColumn = (props) => {
+    let ref;
+    const [dragging, setDragging] = createSignal("idle");
+    const [closestEdge, setClosestEdge] = createSignal();
+    const [cardDraggedOver, setCardDraggedOver] = createSignal(false);
+    const [folded, setFolded] = createSignal(false);
+    const [creatingItem, setCreatingItem] = createSignal(false);
+    const [newItemTitle, setNewItemTitle] = createSignal("");
+    const filteredItems = createMemo(() => {
+        let items = [...props.items];
+        const stateKey = props.itemStateKey;
+        const posKey = props.itemPositionKey;
+        if (stateKey) {
+            items = items.filter((item) => item[stateKey] === props.col.id);
+        }
+        if (!posKey)
+            return items;
+        return items.sort((a, b) => (Number(a[posKey]) || 0) - (Number(b[posKey]) || 0));
+    });
+    const itemDragEnabled = () => !!props.itemPositionKey;
+    const [flashedCardId, setFlashedCardId] = createSignal(null);
+    createEffect(() => {
+        if (props.flashSignal?.() === props.col.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.item.collectionId == props.col.collectionId;
+            },
+            getData({ input }) {
+                return attachClosestEdge({
+                    item: props.col,
+                    isKanbanColumn: true,
+                }, { element, input, allowedEdges: ["left", "right"] });
+            },
+            onDragEnter({ self, source }) {
+                setDragging("dragging-over");
+                if (source.data.isKanbanColumn) {
+                    const _closestEdge = extractClosestEdge(self.data);
+                    setClosestEdge(_closestEdge);
+                }
+                else if (source.data.isKanbanCard) {
+                    setCardDraggedOver(true);
+                }
+            },
+            onDrag({ self, source }) {
+                if (source.data.isKanbanColumn) {
+                    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);
+                    }
+                }
+                else if (source.data.isKanbanCard) {
+                    setCardDraggedOver(true);
+                }
+            },
+            onDragLeave() {
+                setDragging("idle");
+                setCardDraggedOver(false);
+            },
+            onDrop() {
+                setDragging("idle");
+                setCardDraggedOver(false);
+            },
+        });
+        onCleanup(dispose);
+    });
+    createEffect(() => {
+        if (!props.dragEnabled())
+            return;
+        const element = ref;
+        invariant(element);
+        const dispose = draggable({
+            element,
+            getInitialData() {
+                return {
+                    item: props.col,
+                    isKanbanColumn: true,
+                };
+            },
+            onDragStart() {
+                setDragging("dragging");
+            },
+            onDrop() {
+                setDragging("idle");
+            },
+        });
+        onCleanup(dispose);
+    });
+    createEffect(() => {
+        if (!filteredItems().length || !itemDragEnabled())
+            return;
+        const dispose = monitorForElements({
+            canMonitor({ source }) {
+                if (!source.data.item) {
+                    return false;
+                }
+                return (source.data.item.collectionId == filteredItems()[0].collectionId &&
+                    !!source.data.isKanbanCard);
+            },
+            onDrop({ location, source }) {
+                const target = location.current.dropTargets[0];
+                if (!target) {
+                    return;
+                }
+                const sourceData = source.data;
+                const targetData = target.data;
+                const sourceItem = sourceData.item;
+                const targetItem = targetData.item;
+                const stateKey = props.itemStateKey;
+                const posKey = props.itemPositionKey;
+                if (!stateKey || !posKey)
+                    return;
+                if (sourceItem.collectionId !== targetItem.collectionId)
+                    return;
+                if (target.data.isKanbanColumn) {
+                    let newInd = 0;
+                    for (const item of props.items.filter((item) => item[stateKey] === target.data.item.id)) {
+                        if ((Number(item[posKey]) || 0) >= newInd) {
+                            newInd = (Number(item[posKey]) || 0) + 1;
+                        }
+                    }
+                    if ((sourceItem[posKey] || 0) !== newInd) {
+                        setFlashedCardId(sourceItem.id);
+                        setTimeout(() => setFlashedCardId(null), 10);
+                    }
+                    // if we drop on the column
+                    props.onReorderCard?.(sourceItem, Number(sourceItem[posKey]), newInd, String(sourceItem[stateKey]), targetData.item.id);
+                }
+                else {
+                    const closestEdgeOfTarget = extractClosestEdge(targetData);
+                    const newInd = closestEdgeOfTarget === "top" ? Number(targetItem[posKey]) : Number(targetItem[posKey]) + 1;
+                    if ((sourceItem[posKey] || 0) !== newInd) {
+                        setFlashedCardId(sourceItem.id);
+                        setTimeout(() => setFlashedCardId(null), 10);
+                    }
+                    props.onReorderCard?.(sourceItem, Number(sourceItem[posKey]), newInd, String(sourceItem[stateKey]), String(targetItem[stateKey]));
+                }
+            },
+        });
+        onCleanup(dispose);
+    });
+    const bgStyle = createMemo(() => {
+        if (cardDraggedOver()) {
+            return { "background-color": "color-mix(in srgb, var(--color-primary) 10%, transparent)" };
+        }
+        return {};
+    });
+    return (<div data-drop-edge={dragging() === "dragging-over" && !cardDraggedOver() ? (closestEdge() ?? undefined) : undefined} ref={ref} class={column({ class: props.class, folded: folded() })} style={{ opacity: dragging() == "dragging" ? 0.2 : 1, ...bgStyle() }}>
+      <div>
+        <div class={columnHeader({ folded: folded() })}>
+          <div class="flex items-center gap-2">
+            <Button size="xs" variant="ghost" modifier="square" onClick={() => setFolded(!folded())}>
+              <Show when={folded()} fallback={<Fold size={iconSize["sm"]}/>}>
+                <UnFold size={iconSize["sm"]}/>
+              </Show>
+            </Button>
+            {!folded() && (<div>
+                {props.col.title}
+                <span class="text-xs font-normal text-base-content/50 ml-2">{filteredItems().length}</span>
+              </div>)}
+          </div>
+          <div>
+            {!folded() && (<Button size="xs" variant="ghost" modifier="square" aria-label="create new item" onClick={() => setCreatingItem(!creatingItem())}>
+                <Plus size={iconSize["sm"]}/>
+              </Button>)}
+          </div>
+          {folded() && (<div class="font-semibold text-sm [writing-mode:vertical-rl] mt-2">
+              {props.col.title}
+              <span class="text-xs font-normal text-base-content/50 mt-2">{filteredItems().length}</span>
+            </div>)}
+        </div>
+      </div>
+      <div class={columnContent()}>
+        {!folded() && (<>
+            {creatingItem() && (<div class="card bg-base-100 p-2 rounded-md space-y-1.5">
+                <p class="font-medium text-sm">New Item</p>
+                <Input value={newItemTitle()} onChange={setNewItemTitle} label="Title"/>
+                <div class="flex justify-end space-x-1.5">
+                  <Button appearance="neutral" size="sm" onClick={() => {
+                    setCreatingItem(false);
+                    setNewItemTitle("");
+                }}>
+                    Cancel
+                  </Button>
+                  <Button appearance="success" size="sm" onClick={() => {
+                    setCreatingItem(false);
+                    props.onCreateItem?.(newItemTitle(), props.col.id);
+                    setNewItemTitle("");
+                }}>
+                    Add
+                  </Button>
+                </div>
+              </div>)}
+            <For each={filteredItems()}>
+              {(item) => (<KanbanCard item={item} dragEnabled={itemDragEnabled} onCardClick={() => props.onCardClick?.(item)} class={props.cardClass} renderItem={props.renderItem} flashSignal={() => flashedCardId()}/>)}
+            </For>
+          </>)}
+      </div>
+    </div>);
+};
+export default KanbanColumn;

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

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

package/dist/components/Kanban/index.js

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

package/dist/components/Link/Link.d.ts

@@ -1,9 +1,11 @@
-import { JSX, ValidComponent, ParentComponent } from "solid-js";
-interface LinkProps {
-    as?: ValidComponent;
+import { PolymorphicProps } from "@kobalte/core";
+import { JSXElement, ValidComponent } from "solid-js";
+type LinkProps<T extends ValidComponent = "a"> = PolymorphicProps<T, {
     href?: string;
-    children: JSX.Element;
+    disabled?: boolean;
     class?: string;
-}
-export declare const Link: ParentComponent<LinkProps>;
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    children: JSXElement;
+}>;
+export declare function Link<T extends ValidComponent = "a">(props: LinkProps<T>): import("solid-js").JSX.Element;
 export default Link;

package/dist/components/Link/Link.jsx

@@ -2,12 +2,24 @@ import { splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { tv } from "tailwind-variants";
 const link = tv({
-    base: "text-[var(--color-light-primary)] dark:text-[var(--color-dark-primary)] hover:underline underline-offset-4 transition",
+    base: "link",
+    variants: {
+        appearance: {
+            neutral: "link-neutral",
+            primary: "link-primary",
+            secondary: "link-secondary",
+            accent: "link-accent",
+            info: "link-info",
+            success: "link-success",
+            warning: "link-warning",
+            error: "link-error",
+        },
+    },
 });
-export const Link = (props) => {
-    const [local, others] = splitProps(props, ["as", "children", "class"]);
-    return (<Dynamic component={local.as ?? "a"} {...others} class={link({ class: local.class })}>
+export function Link(props) {
+    const [local, others] = splitProps(props, ["as", "class", "children"]);
+    return (<Dynamic component={local.as ?? "a"} {...others} class={link({ class: local.class, appearance: props.appearance })}>
       {local.children}
     </Dynamic>);
-};
+}
 export default Link;

package/dist/components/Modal/Modal.d.ts

@@ -1,13 +1,22 @@
 import { ParentComponent } from "solid-js";
-interface Props {
-    setModalVisible?: (v: boolean) => void;
-    saveFunc?: () => Promise<void>;
-    zIndexClass?: string;
+import { Dialog } from "@kobalte/core/dialog";
+interface ModalProps {
     title?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
-export declare const Modal: ParentComponent<Props>;
+interface ModalComponents {
+    Trigger: typeof Dialog.Trigger;
+    Modal: ParentComponent<{
+        class?: string;
+    }>;
+}
+export declare const Modal: ParentComponent<ModalProps> & ModalComponents;
+export declare const ModalContent: ParentComponent<{
+    class?: string;
+}>;
 export default Modal;
-export declare function useModalLoading(): {
-    loading: import("solid-js").Accessor<boolean>;
-    setLoading: import("solid-js").Setter<boolean>;
+export declare function useModal(): {
+    title?: string;
+    setOpen?: (v: boolean) => void;
 };

package/dist/components/Modal/Modal.jsx

@@ -1,51 +1,44 @@
-import { createSignal, Show, useContext } from "solid-js";
-import { Portal } from "solid-js/web";
-import Loader from "lucide-solid/icons/loader";
+import { useContext } from "solid-js";
+import { Dialog } from "@kobalte/core/dialog";
+import Close from "lucide-solid/icons/x";
+import { tv } from "tailwind-variants";
 import { Button } from "../Button";
 import { ModalContext } from "./modalContext";
 export const Modal = (props) => {
-    const [loading, setLoading] = createSignal(false);
-    const containerStyle = `${props.zIndexClass !== undefined ? props.zIndexClass : "z-50"} fixed inset-0 flex items-center justify-center bg-black/50`;
-    return (<Portal>
-      <Show when={loading()}>
-        <div class="fixed inset-0 z-100 flex items-center justify-center bg-gray-800/25">
-          <Loader class="w-9 h-9 animate-spin text-gray-700"/>
-        </div>
-      </Show>
-      <div class={containerStyle} onClick={() => props.setModalVisible?.(false)}>
-        <div class={`bg-charcoal-500 text-dark-slate-gray-900 rounded-xl shadow-lg p-4 md:p-6
-              w-full mx-3 sm:w-[50vw] lg:w-[35vw] flex flex-col`} onClick={(e) => e.stopPropagation()}>
-          <Show when={props.title}>
-            <h2 class="pb-2">{props.title}</h2>
-          </Show>
-          <div class="max-h-[55vh] overflow-y-hidden flex flex-col h-full">
-            <ModalContext.Provider value={{ loading, setLoading }}>{props.children}</ModalContext.Provider>
-          </div>
-          <div class="w-full flex justify-end space-x-2">
-            <Button onClick={() => props.setModalVisible?.(false)} class="mt-3">
-              Cancel
-            </Button>
-
-            <Show when={props.saveFunc}>
-              <Button appearance="success" onClick={() => {
-            setLoading(true);
-            props.saveFunc()
-                .then(() => props.setModalVisible?.(false))
-                .finally(() => setLoading(false));
-        }} class="mt-3">
-                Save
-              </Button>
-            </Show>
+    return (<ModalContext.Provider value={{ title: props.title, setOpen: props.onOpenChange }}>
+      <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+        {props.children}
+      </Dialog>
+    </ModalContext.Provider>);
+};
+const modalContent = tv({
+    base: "modal-box w-fit max-w-[90vw]",
+});
+export const ModalContent = (props) => {
+    const { title } = useModal();
+    return (<Dialog.Portal>
+      <div class="modal modal-open z-10">
+        <Dialog.Content class={modalContent({ class: props.class })}>
+          <div class="flex justify-between items-start">
+            {title && (<Dialog.Title>
+                <h3 class="font-bold text-lg mb-2">{title}</h3>
+              </Dialog.Title>)}
+            <Dialog.CloseButton as={Button} variant="ghost" modifier="square" size="xs">
+              <Close size={20}/>
+            </Dialog.CloseButton>
           </div>
-        </div>
+          {props.children}
+        </Dialog.Content>
       </div>
-    </Portal>);
+    </Dialog.Portal>);
 };
+Modal.Trigger = Dialog.Trigger;
+Modal.Modal = ModalContent;
 export default Modal;
-export function useModalLoading() {
+export function useModal() {
     const context = useContext(ModalContext);
     if (!context) {
-        throw new Error("useModalLoading must be used within a Modal");
+        throw new Error("useModal must be used within a Modal");
     }
     return context;
 }

package/dist/components/Modal/modalContext.d.ts

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

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,22 @@
+import { ParentComponent } from "solid-js";
+export interface NavbarProps {
+    class?: string;
+}
+export interface NavbarComponents {
+    Brand: ParentComponent;
+    Profile: ParentComponent;
+    Menu: ParentComponent;
+    MenuItem: ParentComponent;
+    Submenu: ParentComponent<{
+        title: string;
+    }>;
+}
+export declare const Navbar: ParentComponent<NavbarProps> & NavbarComponents;
+export declare const NavbarBrand: ParentComponent;
+export declare const NavbarProfile: ParentComponent;
+export declare const NavbarMenu: ParentComponent;
+export declare const NavbarSubmenu: ParentComponent<{
+    title: string;
+}>;
+export declare const NavbarMenuItem: ParentComponent;
+export default Navbar;

package/dist/components/Navbar/Navbar.jsx

@@ -0,0 +1,38 @@
+import { DropdownMenu } from "@kobalte/core/dropdown-menu";
+import { tv } from "tailwind-variants";
+const navbar = tv({
+    base: "navbar bg-base-100 shadow-sm flex justify-between sticky top-0 z-10",
+});
+export const Navbar = (props) => {
+    return <nav class={navbar({ class: props.class })}>{props.children}</nav>;
+};
+export const NavbarBrand = (props) => {
+    return <div class="btn btn-lg btn-ghost">{props.children}</div>;
+};
+export const NavbarProfile = (props) => {
+    return <div class="avatar">{props.children}</div>;
+};
+export const NavbarMenu = (props) => {
+    return <ul class="menu menu-horizontal">{props.children}</ul>;
+};
+export const NavbarSubmenu = (props) => {
+    return (<DropdownMenu>
+      <DropdownMenu.Trigger as="details">
+        <summary>{props.title}</summary>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content class="z-50">
+          <ul class="menu bg-base-100 shadow-sm rounded-box mt-2 border border-base-200">{props.children}</ul>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>);
+};
+export const NavbarMenuItem = (props) => {
+    return <li>{props.children}</li>;
+};
+Navbar.Brand = NavbarBrand;
+Navbar.Profile = NavbarProfile;
+Navbar.Menu = NavbarMenu;
+Navbar.MenuItem = NavbarMenuItem;
+Navbar.Submenu = NavbarSubmenu;
+export default Navbar;

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

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

package/dist/components/Navbar/index.js

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

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,13 +1,15 @@
 import { Component, ValidComponent } from "solid-js";
 import { type NumberFieldInputProps, type NumberFieldRootProps } from "@kobalte/core/number-field";
 import type { PolymorphicProps } from "@kobalte/core";
-type InputProps<T extends ValidComponent = "input"> = PolymorphicProps<T, NumberFieldInputProps<T>>;
-interface ExtraProps {
+export type NumberInputProps<T extends ValidComponent = "input"> = PolymorphicProps<T, NumberFieldInputProps<T>>;
+export interface NumberInputExtraProps {
     label?: string;
-    size?: "sm" | "md";
-    inputProps?: InputProps;
+    variant?: "ghost";
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    inputProps?: NumberInputProps;
     saveFunc?: (v: number) => Promise<any>;
 }
-type InputRootProps<T extends ValidComponent = "div"> = ExtraProps & PolymorphicProps<T, NumberFieldRootProps<T>>;
-export declare const NumberInput: Component<InputRootProps>;
+export type NumberInputRootProps<T extends ValidComponent = "div"> = NumberInputExtraProps & PolymorphicProps<T, NumberFieldRootProps<T>>;
+export declare const NumberInput: Component<NumberInputRootProps>;
 export default NumberInput;

package/dist/components/NumberInput/NumberInput.jsx

@@ -2,19 +2,64 @@ import { createMemo, Show, splitProps } from "solid-js";
 import { NumberField, } from "@kobalte/core/number-field";
 import { debounce } from "../../methods/debounce";
 import { tv } from "tailwind-variants";
-const inputRoot = tv({ base: "flex flex-row items-center space-x-1" });
-const inputField = tv({ base: "input outline-none text-right my-0" });
+const inputRoot = tv({
+    base: "relative flex flex-col gap-1",
+});
+const inputField = tv({
+    base: "input outline-offset-0 text-end font-semibold",
+    variants: {
+        variant: {
+            ghost: "input-ghost",
+            none: "",
+        },
+        size: {
+            xs: "input-xs w-18",
+            sm: "input-sm w-20",
+            md: "input-md w-22",
+            lg: "input-lg w-24",
+            xl: "input-xl w-26",
+        },
+        appearance: {
+            neutral: "input-neutral",
+            primary: "input-primary",
+            secondary: "input-secondary",
+            accent: "input-accent",
+            info: "input-info",
+            success: "input-success",
+            warning: "input-warning",
+            error: "input-error",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
 export const NumberInput = (props) => {
-    const [local, others] = splitProps(props, ["label", "class", "inputProps", "saveFunc"]);
+    const [local, others] = splitProps(props, [
+        "label",
+        "class",
+        "inputProps",
+        "saveFunc",
+        "variant",
+        "appearance",
+        "size",
+    ]);
     const debouncedSave = createMemo(() => (local.saveFunc ? debounce(local.saveFunc) : undefined));
     const handleChange = (v) => {
         debouncedSave()?.(Number(v));
     };
     return (<NumberField {...others} onChange={handleChange} class={inputRoot({ class: local.class })}>
-      <Show when={local.label}>
-        <NumberField.Label>{local.label}</NumberField.Label>
-      </Show>
-      <NumberField.Input {...local.inputProps} class={inputField({ class: local.inputProps?.class ?? "" })}/>
+      <NumberField.Label class="floating-label">
+        <Show when={local.label}>
+          <span>{local.label}</span>
+        </Show>
+        <NumberField.Input {...local.inputProps} class={inputField({
+            appearance: local.appearance,
+            variant: local.variant,
+            size: local.size,
+            class: local.inputProps?.class,
+        })}/>
+      </NumberField.Label>
     </NumberField>);
 };
 export default NumberInput;

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,15 @@
+import { Accessor, Component } from "solid-js";
+interface PaginationProps {
+    perPage: Accessor<number>;
+    perPageOptions: number[];
+    page: Accessor<number>;
+    totalItems: number;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    onPageChange: (page: number) => void;
+    onPerPageChange: (perPage: number) => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    class?: string;
+}
+export declare const Pagination: Component<PaginationProps>;
+export {};