@solidpb/ui-kit 0.1.1 → 0.3.0

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,33 @@
+import { JSXElement, Component, ParentComponent } from "solid-js";
+export interface DrawerProps {
+    children?: JSXElement;
+    class?: string;
+    id: string;
+}
+export interface DrawerMenuItemProps {
+    icon: JSXElement;
+    label: string;
+    href?: string;
+}
+export interface DrawerComponents {
+    Trigger: ParentComponent<{
+        class?: string;
+    }>;
+    Content: ParentComponent;
+    Drawer: ParentComponent<{
+        class?: string;
+    }>;
+    Menu: ParentComponent;
+    MenuItem: ParentComponent<DrawerMenuItemProps>;
+}
+export declare const Drawer: Component<DrawerProps> & DrawerComponents;
+export declare const DrawerTrigger: ParentComponent<{
+    class?: string;
+}>;
+export declare const DrawerContent: ParentComponent;
+export declare const DrawerDrawer: ParentComponent<{
+    class?: string;
+}>;
+export declare const DrawerMenu: ParentComponent;
+export declare const DrawerMenuItem: Component<DrawerMenuItemProps>;
+export default Drawer;

package/dist/components/Drawer/Drawer.jsx

@@ -0,0 +1,49 @@
+import { DrawerContext, useDrawer } from "./drawerContext";
+import { tv } from "tailwind-variants";
+export const Drawer = (props) => {
+    return (<DrawerContext.Provider value={{ id: props.id }}>
+      <div class="drawer lg:drawer-open">
+        <input id={props.id} type="checkbox" class="drawer-toggle"/>
+        {props.children}
+      </div>
+    </DrawerContext.Provider>);
+};
+const trigger = tv({
+    base: "",
+});
+export const DrawerTrigger = (props) => {
+    const { id } = useDrawer();
+    return (<label for={id} aria-label="open sidebar" class={trigger({ class: props.class })}>
+      {props.children}
+    </label>);
+};
+export const DrawerContent = (props) => {
+    return <div class="drawer-content">{props.children}</div>;
+};
+const drawer = tv({
+    base: "flex bg-base-200 min-h-full flex-col is-drawer-close:w-16 is-drawer-open:w-50 border-base-300 border-r pt-2",
+});
+export const DrawerDrawer = (props) => {
+    const { id } = useDrawer();
+    return (<div class="drawer-side is-drawer-close:overflow-visible">
+      <label class="drawer-overlay" aria-label="close sidebar" for={id}/>
+      <div class={drawer({ class: props.class })}>{props.children}</div>
+    </div>);
+};
+export const DrawerMenu = (props) => {
+    return <ul class="menu w-full grow">{props.children}</ul>;
+};
+export const DrawerMenuItem = (props) => {
+    return (<li>
+      <a href={props.href} class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip={props.label}>
+        {props.icon}
+        <span class="is-drawer-close:hidden text-nowrap">{props.label}</span>
+      </a>
+    </li>);
+};
+Drawer.Trigger = DrawerTrigger;
+Drawer.Content = DrawerContent;
+Drawer.Drawer = DrawerDrawer;
+Drawer.Menu = DrawerMenu;
+Drawer.MenuItem = DrawerMenuItem;
+export default Drawer;

package/dist/components/Drawer/drawerContext.d.ts

@@ -0,0 +1,6 @@
+export declare const DrawerContext: import("solid-js").Context<{
+    id: string;
+} | undefined>;
+export declare function useDrawer(): {
+    id: string;
+};

package/dist/components/Drawer/drawerContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "solid-js";
+export const DrawerContext = createContext();
+export function useDrawer() {
+    const ctx = useContext(DrawerContext);
+    if (!ctx) {
+        throw new Error("useDrawer must be used inside Drawer");
+    }
+    return ctx;
+}

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

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

package/dist/components/Drawer/index.js

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

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,11 +1,27 @@
-import { Component } from "solid-js";
+import { type DropdownMenuItemProps, type DropdownMenuRootProps as KDropdownMenuRootProps } from "@kobalte/core/dropdown-menu";
+import { ParentComponent, ValidComponent } from "solid-js";
+import { type ButtonProps } from "../Button";
+import { PolymorphicProps } from "@kobalte/core";
 interface DropdownMenuProps {
-    label?: string;
-    items: {
-        label: string;
-        onSelect: () => void;
-    }[];
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     class?: string;
 }
-export declare const DropdownMenu: Component<DropdownMenuProps>;
+type DropdownMenuRootProps<T extends ValidComponent = "div"> = PolymorphicProps<T, KDropdownMenuRootProps> & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    class?: string;
+};
+type DropDownMenuItemProps<T extends ValidComponent = "div"> = PolymorphicProps<T, DropdownMenuItemProps<T>> & {
+    onSelect: () => void;
+};
+interface DropdownMenuComponents {
+    MenuItem: ParentComponent<DropDownMenuItemProps>;
+    Trigger: ParentComponent<ButtonProps>;
+    Content: ParentComponent<DropdownMenuProps>;
+}
+export declare const DropdownMenu: ParentComponent<DropdownMenuRootProps> & DropdownMenuComponents;
+export declare const DropdownMenuTrigger: ParentComponent<ButtonProps>;
+export declare const DropdownMenuContent: ParentComponent<DropdownMenuProps>;
+export declare const DropdownMenuItem: ParentComponent<{
+    onSelect: () => void;
+}>;
 export default DropdownMenu;

package/dist/components/DropdownMenu/DropdownMenu.jsx

@@ -1,22 +1,48 @@
-import { DropdownMenu as KDropdownMenu } from "@kobalte/core/dropdown-menu";
-import { For } from "solid-js";
+import { DropdownMenu as KDropdownMenu, } from "@kobalte/core/dropdown-menu";
+import { splitProps } from "solid-js";
 import { tv } from "tailwind-variants";
+import { Button } from "../Button";
 const menu = tv({
-    base: "bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] rounded shadow-md p-2 min-w-[120px]",
+    base: "dropdown-content menu bg-base-100 shadow-sm mt-2 rounded-box z-50 border border-base-200 outline-none",
+    variants: {
+        size: {
+            xs: "menu-xs",
+            sm: "menu-sm",
+            md: "menu-base",
+            lg: "menu-lg",
+            xl: "menu-xl",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
 });
 const item = tv({
-    base: "px-3 py-2 cursor-pointer hover:bg-[var(--color-light-muted)] dark:hover:bg-[var(--color-dark-muted)] rounded",
+    base: "cursor-pointer rounded w-full outline-none focus:bg-base-300 rounded-sm",
 });
-export const DropdownMenu = (props) => (<KDropdownMenu>
-    <KDropdownMenu.Trigger class={props.class}>{props.label}</KDropdownMenu.Trigger>
-    <KDropdownMenu.Portal>
-      <KDropdownMenu.Content class={menu()}>
-        <For each={props.items}>
-          {(itemObj) => (<KDropdownMenu.Item class={item()} onSelect={itemObj.onSelect}>
-              {itemObj.label}
-            </KDropdownMenu.Item>)}
-        </For>
+export const DropdownMenu = (props) => {
+    const [local, others] = splitProps(props, ["children"]);
+    return <KDropdownMenu {...others}>{local.children}</KDropdownMenu>;
+};
+export const DropdownMenuTrigger = (props) => {
+    const [local, others] = splitProps(props, ["children"]);
+    return (<KDropdownMenu.Trigger as={Button} {...others}>
+      {local.children}
+    </KDropdownMenu.Trigger>);
+};
+export const DropdownMenuContent = (props) => {
+    return (<KDropdownMenu.Portal>
+      <KDropdownMenu.Content as="ul" class={menu({ size: props.size, class: props.class })}>
+        {props.children}
       </KDropdownMenu.Content>
-    </KDropdownMenu.Portal>
-  </KDropdownMenu>);
+    </KDropdownMenu.Portal>);
+};
+export const DropdownMenuItem = (props) => {
+    return (<KDropdownMenu.Item as="li" class={item()} {...props}>
+      {props.children}
+    </KDropdownMenu.Item>);
+};
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.MenuItem = DropdownMenuItem;
 export default DropdownMenu;

package/dist/components/FileInput/FileInput.d.ts

@@ -1,10 +1,14 @@
-import { Component } from "solid-js";
-interface FileInputProps {
+import { Component, JSX } from "solid-js";
+export interface FileInputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     label?: string;
-    onChange: (files: FileList | null) => void;
+    onChange?: (files: FileList | null) => void;
     accept?: string;
     multiple?: boolean;
     class?: string;
+    variant?: "ghost";
+    appearance?: "primary" | "secondary" | "success" | "warning" | "neutral" | "error" | "accent" | "info";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    saveFunc?: (files: FileList | null) => Promise<void>;
 }
 export declare const FileInput: Component<FileInputProps>;
 export default FileInput;

package/dist/components/FileInput/FileInput.jsx

@@ -1,18 +1,44 @@
 import { Show, splitProps } from "solid-js";
 import { tv } from "tailwind-variants";
-const root = tv({ base: "flex flex-col gap-1" });
 const input = tv({
-    base: "block w-full text-sm text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)] file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-light-muted)] dark:file:bg-[var(--color-dark-muted)] file:text-[var(--color-light-primary)] dark:file:text-[var(--color-dark-primary)] hover:file:bg-[var(--color-light-surface)] dark:hover:file:bg-[var(--color-dark-surface)] transition",
+    base: "file-input outline-offset-0",
+    variants: {
+        appearance: {
+            primary: "file-input-primary",
+            secondary: "file-input-secondary",
+            success: "file-input-success",
+            warning: "file-input-warning",
+            neutral: "file-input-neutral",
+            error: "file-input-error",
+            accent: "file-input-accent",
+            info: "file-input-info",
+        },
+        size: {
+            xs: "file-input-xs",
+            sm: "file-input-sm",
+            md: "file-input-md",
+            lg: "file-input-lg",
+            xl: "file-input-xl",
+        },
+        variant: {
+            ghost: "file-input-ghost",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
 });
 export const FileInput = (props) => {
-    const [local, others] = splitProps(props, ["label", "class", "onChange"]);
-    return (<div class={root({ class: local.class })}>
+    const [local, others] = splitProps(props, ["label", "class", "onChange", "saveFunc"]);
+    const handleChange = (files) => {
+        local.onChange?.(files);
+        local.saveFunc?.(files);
+    };
+    return (<label class="flex flex-col gap-1 w-fit">
       <Show when={local.label}>
-        <label class="block mb-1 text-xs font-medium text-[var(--color-text-light-secondary)] dark:text-[var(--color-text-dark-secondary)]">
-          {local.label}
-        </label>
+        <span class="label">{local.label}</span>
       </Show>
-      <input type="file" class={input()} accept={props.accept} multiple={props.multiple} {...others} onChange={(e) => local.onChange(e.currentTarget.files)}/>
-    </div>);
+      <input {...others} type="file" class={input({ class: local.class })} accept={props.accept} multiple={props.multiple} onChange={(e) => handleChange(e.currentTarget.files)}/>
+    </label>);
 };
 export default FileInput;

package/dist/components/FilterBar/AddFilter.d.ts

@@ -0,0 +1,9 @@
+import { Filter, FilterField } from "./FilterBar";
+interface AddFilterProps<T> {
+    availableFields: FilterField<T>[];
+    onAddFilters: (filters: Filter<T>[]) => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    setOpen: (v: boolean) => void;
+}
+export declare const AddFilter: <T>(props: AddFilterProps<T>) => import("solid-js").JSX.Element;
+export default AddFilter;

package/dist/components/FilterBar/AddFilter.jsx

@@ -0,0 +1,14 @@
+import Plus from "lucide-solid/icons/plus";
+import FiltersEdit from "./FiltersEdit";
+export const AddFilter = (props) => {
+    const handleSaveFilters = (filters) => {
+        props.onAddFilters(filters);
+        props.setOpen(false);
+    };
+    return (<FiltersEdit addConditionTrigger={<>
+          <Plus class="h-[1em] w-[1em]"/> <span>Condition</span>
+        </>} saveTrigger={<>
+          <Plus class="h-[1em] w-[1em]"/> <span>Add</span>
+        </>} size={props.size} availableFields={props.availableFields} filters={[{}]} onSaveFilters={handleSaveFilters}/>);
+};
+export default AddFilter;

package/dist/components/FilterBar/AddSortingDropdown.d.ts

@@ -0,0 +1,9 @@
+import { FilterField, SortOption } from "./FilterBar";
+interface AddSortingDropDownProps<T> {
+    availableFields: FilterField<T>[];
+    sortBy?: SortOption<T>;
+    setSortBy: (sort?: SortOption<T>) => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+export declare const AddSortingDropdown: <T>(props: AddSortingDropDownProps<T>) => import("solid-js").JSX.Element;
+export default AddSortingDropdown;

package/dist/components/FilterBar/AddSortingDropdown.jsx

@@ -0,0 +1,67 @@
+import { createMemo, For, Match, Show, Switch } from "solid-js";
+import CalendarArrowUp from "lucide-solid/icons/calendar-arrow-up";
+import CalendarArrowDown from "lucide-solid/icons/calendar-arrow-down";
+import ArrowDown01 from "lucide-solid/icons/arrow-down-0-1";
+import ArrowUp01 from "lucide-solid/icons/arrow-up-0-1";
+import ArrowDownAZ from "lucide-solid/icons/arrow-down-a-z";
+import ArrowUpAZ from "lucide-solid/icons/arrow-up-a-z";
+import { iconSize } from "../../constants";
+import { DropdownMenu } from "../DropdownMenu";
+export const AddSortingDropdown = (props) => {
+    const validFields = createMemo(() => props.availableFields.filter((f) => f.type !== "bool"));
+    return (<DropdownMenu.Content>
+      <For each={validFields()}>
+        {(field) => {
+            const fieldActive = createMemo(() => field.name === props.sortBy?.field);
+            const handleClick = () => {
+                const changingSameField = props.sortBy?.field === field.name;
+                if (!changingSameField) {
+                    props.setSortBy({
+                        direction: "desc",
+                        field: field.name,
+                    });
+                }
+                else {
+                    props.setSortBy(props.sortBy?.direction === "asc"
+                        ? undefined
+                        : {
+                            // will also set to "desc" if no sortby exists
+                            direction: props.sortBy?.direction === "desc" ? "asc" : "desc",
+                            field: field.name,
+                        });
+                }
+            };
+            return (<DropdownMenu.MenuItem onSelect={handleClick} closeOnSelect={false}>
+              <a class="flex justify-between">
+                <span>{field.label}</span>
+                <span style={{ opacity: fieldActive() ? 1 : 0.2 }}>
+                  <Switch>
+                    <Match when={field.type === "date"}>
+                      <Show when={fieldActive() && props.sortBy?.direction === "asc"} fallback={<CalendarArrowDown size={iconSize[props.size ?? "sm"]}/>}>
+                        <CalendarArrowUp size={iconSize[props.size ?? "sm"]}/>
+                      </Show>
+                    </Match>
+                    <Match when={field.type === "text"}>
+                      <Show when={fieldActive() && props.sortBy?.direction === "asc"} fallback={<ArrowDownAZ size={iconSize[props.size ?? "sm"]}/>}>
+                        <ArrowUpAZ size={iconSize[props.size ?? "sm"]}/>
+                      </Show>
+                    </Match>
+                    <Match when={field.type === "number"}>
+                      <Show when={fieldActive() && props.sortBy?.direction === "asc"} fallback={<ArrowDown01 size={iconSize[props.size ?? "sm"]}/>}>
+                        <ArrowUp01 size={iconSize[props.size ?? "sm"]}/>
+                      </Show>
+                    </Match>
+                    <Match when={field.type === "select"}>
+                      <Show when={fieldActive() && props.sortBy?.direction === "asc"} fallback={<ArrowDownAZ size={iconSize[props.size ?? "sm"]}/>}>
+                        <ArrowUpAZ size={iconSize[props.size ?? "sm"]}/>
+                      </Show>
+                    </Match>
+                  </Switch>
+                </span>
+              </a>
+            </DropdownMenu.MenuItem>);
+        }}
+      </For>
+    </DropdownMenu.Content>);
+};
+export default AddSortingDropdown;

package/dist/components/FilterBar/EditFilters.d.ts

@@ -0,0 +1,10 @@
+import { Filter, FilterField } from "./FilterBar";
+interface EditFiltersProps<T> {
+    availableFields: FilterField<T>[];
+    onSaveFilters: (filters: Filter<T>[]) => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    setOpen: (v: boolean) => void;
+    currentFilters: Filter<T>[];
+}
+export declare const EditFilters: <T>(props: EditFiltersProps<T>) => import("solid-js").JSX.Element;
+export default EditFilters;

package/dist/components/FilterBar/EditFilters.jsx

@@ -0,0 +1,12 @@
+import Plus from "lucide-solid/icons/plus";
+import FiltersEdit from "./FiltersEdit";
+export const EditFilters = (props) => {
+    const handleSaveFilters = (filters) => {
+        props.onSaveFilters(filters);
+        props.setOpen(false);
+    };
+    return (<FiltersEdit addConditionTrigger={<>
+          <Plus class="h-[1em] w-[1em]"/> <span>Condition</span>
+        </>} saveTrigger={<span>Save</span>} size={props.size} availableFields={props.availableFields} filters={JSON.parse(JSON.stringify(props.currentFilters))} onSaveFilters={handleSaveFilters} filtersReady/>);
+};
+export default EditFilters;

package/dist/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,54 @@
+import { JSXElement } from "solid-js";
+export type FieldType = "text" | "number" | "date" | "select" | "bool";
+export type FilterOperator = "loose_contains" | "fuzzy_match" | "is" | "is_not" | "greater_than" | "less_than" | "between" | "in" | "not_in" | "is_set" | "is_not_set";
+export declare const filterDefaults: Record<FieldType, FilterOperator>;
+export declare const filterLabels: Record<FieldType, Partial<Record<FilterOperator, string>>>;
+export type FilterSelectValue = {
+    label: string;
+    value: string;
+};
+export type FilterDateValue = {
+    startDate: Date | null;
+    endDate: Date | null;
+};
+export type FilterValue = string | number | boolean | FilterSelectValue | FilterDateValue | null;
+export interface Filter<T> {
+    field: FilterField<T>;
+    operator: FilterOperator;
+    value: FilterValue;
+}
+export interface FilterGroup<T> {
+    filters: Filter<T>[];
+}
+export interface FilterField<T> {
+    name: keyof T;
+    label: string;
+    type: FieldType;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+}
+export interface SortOption<T> {
+    field: keyof T;
+    direction: "asc" | "desc";
+}
+interface FilterBarProps<T> {
+    items?: (Filter<T> | FilterGroup<T>)[];
+    setItems?: (items: (Filter<T> | FilterGroup<T>)[]) => void;
+    availableFields?: FilterField<T>[];
+    leftAction?: JSXElement;
+    sortBy?: SortOption<T>;
+    setSortBy?: (sort?: SortOption<T>) => void;
+    onAddFilterGroup: (filters: Filter<T>[]) => void;
+    onUpdateFilterGroup: (ind: number, filters: Filter<T>[]) => void;
+    onFilterRemove: (ind: number, filter: Filter<T>) => void;
+    onGroupDrag: (sourceInd: number, targetInd: number, sourceFilterGroupInd?: number) => void;
+    value: string;
+    onChangeValue: (val: string) => void;
+    placeholder?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    class?: string;
+}
+export declare const FilterBar: <T>(props: FilterBarProps<T>) => import("solid-js").JSX.Element;
+export {};