- 
-
- by cssninja.io -
+A customized React component library built with TypeScript and Tailwind CSS. ---- +## Installation -## Shuriken UI - React +```bash +npm install @glint-ui/react +# or +yarn add @glint-ui/react +# or +pnpm add @glint-ui/react +``` -Shuriken UI is a free and open-source Tailwind CSS UI Kit. It is a collection of components and templates that you can use to build your next Tailwind CSS project. +## Usage -This repository contains the React version of Shuriken UI with ready to use components (form inputs, buttons, cards, etc.) that you can use to build your project. +```tsx +import { BaseButton, BaseCard } from '@glint-ui/react'; + +function App() { + return ( + & {
+type BaseInputProps = {
/**
* Callback function called when the value of the input changes.
*
@@ -180,152 +181,154 @@ export type BaseInputRef = {
id: string;
};
-export const BaseInput = forwardRef(
- function BaseInput(
- {
- placeholder: defaultPlaceholder,
- loading = false,
- labelFloat = false,
- error = false,
- stateModifiers,
- type = "text",
- label,
- action,
- id,
- icon,
- classes,
- colorFocus,
- value,
- onChange,
- ...props
- },
- ref,
- ) {
- const inputRef = useRef(null);
-
- const contrast = useNuiDefaultProperty(props, "BaseInput", "contrast");
- const rounded = useNuiDefaultProperty(props, "BaseInput", "rounded");
- const size = useNuiDefaultProperty(props, "BaseInput", "size");
-
- const attrs = {
- ...props,
- contrast: undefined,
- rounded: undefined,
- size: undefined,
- };
+export const BaseInput = forwardRef<
+ BaseInputRef,
+ BaseInputProps &
+ Omit, keyof BaseInputProps>
+>(function BaseInput(
+ {
+ placeholder: defaultPlaceholder,
+ loading = false,
+ labelFloat = false,
+ error = false,
+ stateModifiers,
+ type = "text",
+ label,
+ action,
+ id,
+ icon,
+ classes,
+ colorFocus,
+ value,
+ onChange,
+ ...props
+ },
+ ref,
+) {
+ const inputRef = useRef(null);
+
+ const contrast = useNuiDefaultProperty(props, "BaseInput", "contrast");
+ const rounded = useNuiDefaultProperty(props, "BaseInput", "rounded");
+ const size = useNuiDefaultProperty(props, "BaseInput", "size");
+
+ const attrs = {
+ ...props,
+ contrast: undefined,
+ rounded: undefined,
+ size: undefined,
+ };
- const placeholder = useMemo(() => {
- if (loading) {
- return undefined;
- }
+ const placeholder = useMemo(() => {
+ if (loading) {
+ return undefined;
+ }
- if (labelFloat) {
- return label;
- }
+ if (labelFloat) {
+ return label;
+ }
- return defaultPlaceholder ?? "";
- }, [label, labelFloat, loading, defaultPlaceholder]);
+ return defaultPlaceholder ?? "";
+ }, [label, labelFloat, loading, defaultPlaceholder]);
- function looseToNumber(val: string) {
- const n = Number.parseFloat(val);
+ function looseToNumber(val: string) {
+ const n = Number.parseFloat(val);
- return Number.isNaN(n) ? val : n;
- }
+ return Number.isNaN(n) ? val : n;
+ }
- function handleUpdate(val: string) {
- if (stateModifiers?.trim) {
- onChange?.(val.trim());
- } else if (stateModifiers?.number) {
- onChange?.(looseToNumber(val));
- } else {
- onChange?.(val);
- }
+ function handleUpdate(val: string) {
+ if (stateModifiers?.trim) {
+ onChange?.(val.trim());
+ } else if (stateModifiers?.number) {
+ onChange?.(looseToNumber(val));
+ } else {
+ onChange?.(val);
}
+ }
- useImperativeHandle(
- ref,
- () => ({
- get el() {
- return inputRef.current;
- },
- id: id || "",
- }),
- [id],
- );
-
- return (
- ({
- treeMap: new WeakMap(),
- });
-
- const icons = useMemo(() => {
- if (!iconsProp) return defaultIcons;
-
- return {
- ...defaultIcons,
- ...iconsProp,
- };
- }, [iconsProp]);
-
- const treeline = useMemo(() => {
- if (treelineProp === false) return false;
- if (treelineProp === true) return defaultTreeline;
-
- return {
- ...defaultTreeline,
- ...treelineProp,
- };
- }, [treelineProp]);
-
- const checkboxClasses = useMemo(() => {
- if (!classes?.checkbox) return defaultCheckboxClasses;
-
- return {
- ...defaultCheckboxClasses,
- ...classes.checkbox,
- };
- }, [classes.checkbox]);
-
- const loadTree = useCallback(
- async (source?: TreeViewTreeSource) => {
- if (!source) return;
- // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
- const _subtreeState = treeState?.treeMap.get(source);
-
- if (!_subtreeState) {
- return;
- }
+ ref,
+ ) => {
+ const [treeState, setTreeState] = useState({
+ treeMap: new WeakMap(),
+ });
- if (typeof source === "function") {
- _subtreeState.pending = true;
- try {
- _subtreeState.tree = await source();
- } finally {
- _subtreeState.pending = false;
- _subtreeState.loaded = true;
- }
+ const icons = useMemo(() => {
+ if (!iconsProp) return defaultIcons;
- return;
- }
+ return {
+ ...defaultIcons,
+ ...iconsProp,
+ };
+ }, [iconsProp]);
- _subtreeState.tree = source ?? [];
- _subtreeState.loaded = true;
- },
- [treeState?.treeMap],
- );
-
- const getChildren = useCallback(
- (tree?: TreeViewTreeSource): TreeViewItemNode[] | undefined => {
- if (!tree) return;
- if (treeState.treeMap.has(tree)) {
- // eslint-disable-next-line consistent-return
- return treeState.treeMap.get(tree)?.tree;
- }
+ const treeline = useMemo(() => {
+ if (treelineProp === false) return false;
+ if (treelineProp === true) return defaultTreeline;
- // eslint-disable-next-line consistent-return
- return Array.isArray(tree) ? tree : undefined;
- },
- [treeState.treeMap],
- );
+ return {
+ ...defaultTreeline,
+ ...treelineProp,
+ };
+ }, [treelineProp]);
- function getDefaultOpenMap(source?: TreeViewTreeSource) {
- const map: Record = {};
+ const checkboxClasses = useMemo(() => {
+ if (!classes?.checkbox) return defaultCheckboxClasses;
- const children = getChildren(source);
+ return {
+ ...defaultCheckboxClasses,
+ ...classes!.checkbox,
+ };
+ }, [classes.checkbox]);
- if (!children) return map;
+ const loadTree = useCallback(
+ async (source?: TreeViewTreeSource) => {
+ if (!source) return;
- // eslint-disable-next-line no-restricted-syntax, guard-for-in
- for (const index in children) {
- const item = children[index]!;
+ const _subtreeState = treeState?.treeMap.get(source);
- if ("open" in item && item.open !== undefined) {
- map[index] = item.open;
- }
- }
-
- return map;
- }
+ if (!_subtreeState) {
+ return;
+ }
- const subtreeState = useMemo(
- () => (props.items ? treeState.treeMap.get(props.items) : undefined),
- [props.items, treeState?.treeMap],
- );
+ if (typeof source === "function") {
+ _subtreeState.pending = true;
+ try {
+ _subtreeState.tree = await source();
+ } finally {
+ _subtreeState.pending = false;
+ _subtreeState.loaded = true;
+ }
- const [openMap, setOpenMap] = useState(getDefaultOpenMap(props.items));
+ return;
+ }
- const internalItems = useMemo(() => subtreeState?.tree, [subtreeState?.tree]);
+ _subtreeState.tree = source ?? [];
+ _subtreeState.loaded = true;
+ },
+ [treeState?.treeMap],
+ );
+
+ const getChildren = useCallback(
+ (tree?: TreeViewTreeSource): TreeViewItemNode[] | undefined => {
+ if (!tree) return;
+ if (treeState.treeMap.has(tree)) {
+ return treeState.treeMap.get(tree)?.tree;
+ }
- const isNodeLoaded = useCallback(
- (node?: TreeViewItemNode) => {
- if (!node) return false;
+ return Array.isArray(tree) ? tree : undefined;
+ },
+ [treeState.treeMap],
+ );
- if ("children" in node) {
- if (typeof node.children === "function") {
- return treeState?.treeMap.get(node.children)?.loaded ?? false;
- }
+ function getDefaultOpenMap(source?: TreeViewTreeSource) {
+ const map: Record = {};
- return true;
- }
+ const children = getChildren(source);
- return true;
- },
- [treeState?.treeMap],
- );
+ if (!children) return map;
- const getNodeChildren = useCallback(
- (node?: TreeViewItemNode) => {
- if (!node) return;
- if (!("children" in node) || !node.children) return;
+ for (const index in children) {
+ const item = children[index]!;
- // eslint-disable-next-line consistent-return
- return getChildren(node.children);
- },
- [getChildren],
- );
+ if ("open" in item && item.open !== undefined) {
+ map[index] = item.open;
+ }
+ }
- const areAllChildSelected = useCallback(
- (node?: TreeViewItemNode): boolean => {
- // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
- const _value = props.value;
+ return map;
+ }
- if (!_value) return false;
- if (!node) return false;
- const children = getNodeChildren(node);
+ const subtreeState = useMemo(
+ () => (props.items ? treeState.treeMap.get(props.items) : undefined),
+ [props.items, treeState?.treeMap],
+ );
- if (!children) {
- return false;
- }
+ const [openMap, setOpenMap] = useState(getDefaultOpenMap(props.items));
- return (
- isNodeLoaded(node) &&
- children.every((child) => {
- if (!("children" in child)) return _value.includes(child);
+ const internalItems = useMemo(
+ () => subtreeState?.tree,
+ [subtreeState?.tree],
+ );
- const subchildren = getNodeChildren(child);
+ const isNodeLoaded = useCallback(
+ (node?: TreeViewItemNode) => {
+ if (!node) return false;
- if (subchildren && isNodeLoaded(child)) {
- return areAllChildSelected(child);
+ if ("children" in node) {
+ if (typeof node.children === "function") {
+ return treeState?.treeMap.get(node.children)?.loaded ?? false;
}
- return false;
- })
- );
- },
- [getNodeChildren, isNodeLoaded, props.value],
- );
-
- const areSomeChildSelected = useCallback(
- (node?: TreeViewItemNode): boolean => {
- // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
- const _value = props.value;
+ return true;
+ }
- if (!_value) return false;
- if (!node) return false;
- const children = getNodeChildren(node);
+ return true;
+ },
+ [treeState?.treeMap],
+ );
- if (!children) {
- return false;
- }
+ const getNodeChildren = useCallback(
+ (node?: TreeViewItemNode) => {
+ if (!node) return;
+ if (!("children" in node) || !node.children) return;
- return (
- isNodeLoaded(node) &&
- children.some((child) => {
- if (!("children" in child)) return _value.includes(child);
+ return getChildren(node.children);
+ },
+ [getChildren],
+ );
- const subchildren = getNodeChildren(child);
+ const areAllChildSelected = useCallback(
+ (node?: TreeViewItemNode): boolean => {
+ const _value = props.value;
- if (subchildren && isNodeLoaded(child)) {
- return areSomeChildSelected(child);
- }
+ if (!_value) return false;
+ if (!node) return false;
+ const children = getNodeChildren(node);
+ if (!children) {
return false;
- })
- );
- },
- [getNodeChildren, isNodeLoaded, props.value],
- );
+ }
- const isUndeterminate = useCallback(
- (node?: TreeViewItemNode) => {
- if (!node) return false;
- if (!isNodeLoaded(node)) return false;
+ return (
+ isNodeLoaded(node) &&
+ children.every((child) => {
+ if (!("children" in child)) return _value.includes(child);
- return areSomeChildSelected(node) && !areAllChildSelected(node);
- },
- [areAllChildSelected, areSomeChildSelected, isNodeLoaded],
- );
+ const subchildren = getNodeChildren(child);
- const selectAllNode = useCallback(
- (node?: TreeViewItemNode) => {
- // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
- const _value = props.value;
+ if (subchildren && isNodeLoaded(child)) {
+ return areAllChildSelected(child);
+ }
- if (!_value) return;
- if (!node) return;
+ return false;
+ })
+ );
+ },
+ [getNodeChildren, isNodeLoaded, props.value],
+ );
- if (!("children" in node) || !node.children) {
- const idx = _value.indexOf(node);
+ const areSomeChildSelected = useCallback(
+ (node?: TreeViewItemNode): boolean => {
+ const _value = props.value;
- if (idx === -1) {
- _value.push(node);
+ if (!_value) return false;
+ if (!node) return false;
+ const children = getNodeChildren(node);
+
+ if (!children) {
+ return false;
}
- return;
- }
+ return (
+ isNodeLoaded(node) &&
+ children.some((child) => {
+ if (!("children" in child)) return _value.includes(child);
- if (!isNodeLoaded(node)) return;
+ const subchildren = getNodeChildren(child);
- const children = getNodeChildren(node);
+ if (subchildren && isNodeLoaded(child)) {
+ return areSomeChildSelected(child);
+ }
- if (!children) {
- return;
- }
+ return false;
+ })
+ );
+ },
+ [getNodeChildren, isNodeLoaded, props.value],
+ );
- // eslint-disable-next-line no-restricted-syntax
- for (const child of children) {
- if ("children" in child) {
- selectAllNode(child);
- } else {
- const idx = _value.indexOf(child);
+ const isUndeterminate = useCallback(
+ (node?: TreeViewItemNode) => {
+ if (!node) return false;
+ if (!isNodeLoaded(node)) return false;
+
+ return areSomeChildSelected(node) && !areAllChildSelected(node);
+ },
+ [areAllChildSelected, areSomeChildSelected, isNodeLoaded],
+ );
+
+ const selectAllNode = useCallback(
+ (node?: TreeViewItemNode) => {
+ const _value = props.value;
+
+ if (!_value) return;
+ if (!node) return;
+
+ if (!("children" in node) || !node.children) {
+ const idx = _value.indexOf(node);
if (idx === -1) {
- _value.push(child);
+ _value.push(node);
}
- }
- }
- },
- [getNodeChildren, isNodeLoaded, props.value],
- );
- const selectAllChildren = useCallback(
- (tree?: TreeViewItemNode[]) => {
- const children = tree || internalItems;
+ return;
+ }
- if (!children) return;
+ if (!isNodeLoaded(node)) return;
- // eslint-disable-next-line no-restricted-syntax
- for (const child of children) {
- selectAllNode(child);
- }
- },
- [internalItems, selectAllNode],
- );
+ const children = getNodeChildren(node);
- const unselectAllNode = useCallback(
- (node?: TreeViewItemNode) => {
- // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
- const _value = props.value;
+ if (!children) {
+ return;
+ }
- if (!_value) return;
- if (!node) return;
- if (!("children" in node) || !node.children) {
- const idx = _value.indexOf(node);
+ for (const child of children) {
+ if ("children" in child) {
+ selectAllNode(child);
+ } else {
+ const idx = _value.indexOf(child);
- if (idx >= 0) {
- _value.splice(idx, 1);
+ if (idx === -1) {
+ _value.push(child);
+ }
+ }
}
+ },
+ [getNodeChildren, isNodeLoaded, props.value],
+ );
- return;
- }
+ const selectAllChildren = useCallback(
+ (tree?: TreeViewItemNode[]) => {
+ const children = tree || internalItems;
- if (!isNodeLoaded(node)) return;
+ if (!children) return;
- const children = getNodeChildren(node);
+ for (const child of children) {
+ selectAllNode(child);
+ }
+ },
+ [internalItems, selectAllNode],
+ );
- if (!children) {
- return;
- }
+ const unselectAllNode = useCallback(
+ (node?: TreeViewItemNode) => {
+ const _value = props.value;
- // eslint-disable-next-line no-restricted-syntax
- for (const child of children) {
- if ("children" in child) {
- unselectAllNode(child);
- } else {
- const idx = _value.indexOf(child);
+ if (!_value) return;
+ if (!node) return;
+ if (!("children" in node) || !node.children) {
+ const idx = _value.indexOf(node);
if (idx >= 0) {
_value.splice(idx, 1);
}
+
+ return;
}
- }
- },
- [getNodeChildren, isNodeLoaded, props.value],
- );
- const unselectAllChildren = useCallback(
- (tree?: TreeViewItemNode[]) => {
- const children = tree || internalItems;
+ if (!isNodeLoaded(node)) return;
- if (!children) return;
+ const children = getNodeChildren(node);
- // eslint-disable-next-line no-restricted-syntax
- for (const child of children) {
- unselectAllNode(child);
- }
- },
- [internalItems, unselectAllNode],
- );
+ if (!children) {
+ return;
+ }
- const toggleNodeSelection = useCallback(
- (node?: TreeViewItemNode, event?: Event) => {
- // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
- const _value = props.value;
+ for (const child of children) {
+ if ("children" in child) {
+ unselectAllNode(child);
+ } else {
+ const idx = _value.indexOf(child);
- if (!_value) return;
- if (!node) return;
+ if (idx >= 0) {
+ _value.splice(idx, 1);
+ }
+ }
+ }
+ },
+ [getNodeChildren, isNodeLoaded, props.value],
+ );
- if ("children" in node) {
- if (!isNodeLoaded(node)) {
- event?.preventDefault();
+ const unselectAllChildren = useCallback(
+ (tree?: TreeViewItemNode[]) => {
+ const children = tree || internalItems;
- return;
+ if (!children) return;
+
+ for (const child of children) {
+ unselectAllNode(child);
}
+ },
+ [internalItems, unselectAllNode],
+ );
- const children = getNodeChildren(node);
+ const toggleNodeSelection = useCallback(
+ (node?: TreeViewItemNode, event?: Event) => {
+ const _value = props.value;
- if (!children || children.length === 0) {
- event?.preventDefault();
+ if (!_value) return;
+ if (!node) return;
- return;
- }
+ if ("children" in node) {
+ if (!isNodeLoaded(node)) {
+ event?.preventDefault();
- if (areAllChildSelected(node)) {
- unselectAllNode(node);
- } else if (children.length > 0) {
- selectAllNode(node);
- }
+ return;
+ }
- return;
- }
+ const children = getNodeChildren(node);
- const idx = _value.indexOf(node);
+ if (!children || children.length === 0) {
+ event?.preventDefault();
- if (idx >= 0) {
- _value.splice(idx, 1);
- } else {
- _value.push(node);
- }
- },
- [
- areAllChildSelected,
- getNodeChildren,
- isNodeLoaded,
- props.value,
- selectAllNode,
- unselectAllNode,
- ],
- );
-
- const toggleChildrenSelection = useCallback(
- (tree?: TreeViewItemNode[], event?: Event) => {
- const children = tree || internalItems;
-
- if (!children) return;
-
- // eslint-disable-next-line no-restricted-syntax
- for (const child of children) {
- if ("children" in child) {
- toggleChildrenSelection(getNodeChildren(child), event);
- } else {
- toggleNodeSelection(child, event);
+ return;
+ }
+
+ if (areAllChildSelected(node)) {
+ unselectAllNode(node);
+ } else if (children.length > 0) {
+ selectAllNode(node);
+ }
+
+ return;
}
- }
- },
- [getNodeChildren, internalItems, toggleNodeSelection],
- );
- useImperativeHandle(
- ref,
- () => ({
- tree: internalItems,
- loadTree,
- getChildren,
- getNodeChildren,
- areAllChildSelected,
- areSomeChildSelected,
- selectAllNode,
- unselectAllNode,
- isUndeterminate,
- isNodeLoaded,
- toggleNodeSelection,
- toggleChildrenSelection,
- selectAllChildren,
- unselectAllChildren,
- }),
- [
- areAllChildSelected,
- areSomeChildSelected,
- getChildren,
- getNodeChildren,
- internalItems,
- isNodeLoaded,
- isUndeterminate,
- loadTree,
- selectAllChildren,
- selectAllNode,
- toggleChildrenSelection,
- toggleNodeSelection,
- unselectAllChildren,
- unselectAllNode,
- ],
- );
-
- useEffect(() => {
- const initChildren = async () => {
- if (props.items) {
- const localTree: TreeMap = {
- treeMap: new WeakMap(),
- };
-
- localTree.treeMap.set(props.items, {
- tree: [],
- pending: false,
- loaded: false,
- });
-
- setTreeState(localTree);
- }
- };
-
- initChildren();
- }, [props.items]);
-
- useEffect(() => {
- loadTree(props.items);
- }, [loadTree, props.items]);
-
- return (
-
- {label && !labelFloat && (
-
- )}
-
diff --git a/ui/src/components/form/BaseTreeSelect.tsx b/ui/src/components/form/BaseTreeSelect.tsx
index fde2c48..7f2e105 100644
--- a/ui/src/components/form/BaseTreeSelect.tsx
+++ b/ui/src/components/form/BaseTreeSelect.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
import { Icon } from "@iconify/react";
import {
type ReactNode,
@@ -19,7 +18,7 @@ type TreeViewItemTreeLeaf = {
type TreeViewItemTreeChildren = {
item: unknown;
open?: boolean;
- // eslint-disable-next-line no-use-before-define
+
children?: TreeViewTreeSource;
};
@@ -104,7 +103,7 @@ type BaseTreeSelectProps = {
*
* @see [BaseCheckbox]
*/
- checkbox?: unknown;
+ checkbox?: object;
};
/**
@@ -302,606 +301,652 @@ export type BaseTreeSelectRef = {
export const BaseTreeSelect = forwardRef<
BaseTreeSelectRef,
BaseTreeSelectProps
->(function BaseTreeSelect(
- {
- icons: iconsProp = {
- open: "lucide:minus",
- closed: "lucide:plus",
- item: "",
- pending: "",
- empty: "",
- },
- classes = {
- pendingIcon: "",
- emptyIcon: "",
- treeIcon: "",
- itemIcon: "",
- treeline: "border-muted-300 dark:border-muted-700",
- checkbox: {
- wrapper: "text-primary-500 scale-[0.8] me-1",
+>(
+ (
+ {
+ icons: iconsProp = {
+ open: "lucide:minus",
+ closed: "lucide:plus",
+ item: "",
+ pending: "",
+ empty: "",
},
+ classes = {
+ pendingIcon: "",
+ emptyIcon: "",
+ treeIcon: "",
+ itemIcon: "",
+ treeline: "border-muted-300 dark:border-muted-700",
+ checkbox: {
+ wrapper: "text-primary-500 scale-[0.8] me-1",
+ },
+ },
+ treeline: treelineProp = false,
+ i18n = {
+ pending: "pending...",
+ empty: "empty",
+ },
+ level = 1,
+ ...props
},
- treeline: treelineProp = false,
- i18n = {
- pending: "pending...",
- empty: "empty",
- },
- level = 1,
- ...props
- },
- ref,
-) {
- const [treeState, setTreeState] = useState
-
- {error}
-
+ useImperativeHandle(
+ ref,
+ () => ({
+ get el() {
+ return inputRef.current;
+ },
+ id: id || "",
+ }),
+ [id],
+ );
+
+ return (
+ >();
+ const previewMap = useRef>(new WeakMap());
function open() {
inputRef.current?.click();
diff --git a/ui/src/components/form/BaseInputNumber.tsx b/ui/src/components/form/BaseInputNumber.tsx
index a293596..32a4d12 100644
--- a/ui/src/components/form/BaseInputNumber.tsx
+++ b/ui/src/components/form/BaseInputNumber.tsx
@@ -233,9 +233,9 @@ export const BaseInputNumber = forwardRef<
const [value, setValue] = useState();
- const incrementInterval = useRef>();
+ const incrementInterval = useRef>(null);
- const decrementInterval = useRef>();
+ const decrementInterval = useRef>(null);
const contrast = useNuiDefaultProperty(props, "BaseInputNumber", "contrast");
const rounded = useNuiDefaultProperty(props, "BaseInputNumber", "rounded");
@@ -269,7 +269,7 @@ export const BaseInputNumber = forwardRef<
while (Math.round(step * exp) / exp !== step) {
exp *= 10;
- // eslint-disable-next-line no-plusplus
+
precision++;
}
@@ -326,7 +326,6 @@ export const BaseInputNumber = forwardRef<
let i = 0;
incrementInterval.current = setInterval(() => {
- // eslint-disable-next-line no-plusplus
i++;
increment();
if (i > 10) {
@@ -352,7 +351,6 @@ export const BaseInputNumber = forwardRef<
let i = 0;
decrementInterval.current = setInterval(() => {
- // eslint-disable-next-line no-plusplus
i++;
decrement();
if (i > 10) {
diff --git a/ui/src/components/form/BaseListbox.tsx b/ui/src/components/form/BaseListbox.tsx
index 8109377..b2bffc8 100644
--- a/ui/src/components/form/BaseListbox.tsx
+++ b/ui/src/components/form/BaseListbox.tsx
@@ -1,8 +1,13 @@
-/* eslint-disable no-nested-ternary */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { type Ref, forwardRef, useCallback, useEffect, useState } from "react";
-import { Listbox } from "@headlessui/react";
-import { Float } from "@headlessui-float/react";
+import {
+ Label,
+ Listbox,
+ ListboxButton,
+ ListboxOption,
+ ListboxOptions,
+} from "@headlessui/react";
+import { BaseFloat } from "~/components/base/BaseFloat";
import { Icon } from "@iconify/react";
import { useNuiDefaultProperty } from "~/Provider";
import { cn } from "~/utils";
@@ -315,235 +320,233 @@ export const BaseListbox = forwardRef(function BaseListbox(
disabled={disabled}
>
{({ open }) => (
-
+ <>
{label && !props.labelFloat ? (
-
+
+
) : (
- // eslint-disable-next-line react/jsx-no-useless-fragment
<>
)}
-
- {props.items.map((item) => (
-
- {({ active, selected }) => (
-
-
- )}
-
- ))}
-
-
-
+ (
)}
-
+
)}
- {stateModifiers?.lazy ? (
- handleUpdate(e.target.value)}
- value={value}
- {...attrs}
- />
- ) : (
- handleUpdate(e.currentTarget.value)}
- value={value}
- {...attrs}
- />
- )}
- {label && labelFloat && (
-
- )}
- {loading && (
-
- {error && typeof error === "string" && (
-
-
- )}
- {icon && (
-
-
- )}
-
- {action}
-
+ {label && !labelFloat && (
+
+ )}
+
+ );
+});
diff --git a/ui/src/components/form/BaseInputFileHeadless.tsx b/ui/src/components/form/BaseInputFileHeadless.tsx
index d38545b..1730707 100644
--- a/ui/src/components/form/BaseInputFileHeadless.tsx
+++ b/ui/src/components/form/BaseInputFileHeadless.tsx
@@ -69,7 +69,7 @@ export const BaseInputFileHeadless = forwardRef<
const id = useNinjaId(() => props.id);
- const previewMap = useRef
+
+ {error}
+
+ )}
- );
- },
-);
+
+ {stateModifiers?.lazy ? (
+ handleUpdate(e.target.value)}
+ value={value}
+ {...attrs}
+ />
+ ) : (
+ handleUpdate(e.currentTarget.value)}
+ value={value}
+ {...attrs}
+ />
+ )}
+ {label && labelFloat && (
+
+ )}
+ {loading && (
+
+ {error && typeof error === "string" && (
+
+
)}
+ {icon && (
+
+
+ )}
+
+ {action}
-
-
- {label}
-
- )}
-
- {loading && (
-
-
-
-
-
-
-
-
- {label && props.labelFloat && (
-
- {icon && (
-
-
+
+
+
+
+
+
+ {props.items.map((item) => (
+
+ {({ active, selected }) => (
+
- {props.properties?.label
- ? (value as any)[props.properties.label]
- : props.properties?.value
- ? (value as any)[props.properties.value]
- : value}
-
-
- ) : (
-
+
+
+
+ {label && props.labelFloat && (
+
+ )}
+
+ {loading && (
+
+
+ {icon && (
+
+
+ )}
+
+ {Array.isArray(value) ? (
+ <>
+ {value.length === 0 && placeholder && (
+
+
+ )}
+
-
+ )}
+
+
+
+
+ {placeholder}
+
+ )}
- {Array.isArray(value) ? (
- <>
- {value.length === 0 && placeholder && (
- {placeholder}
+ {typeof multipleLabel === "function"
+ ? multipleLabel(
+ value,
+ props.properties?.label as
+ | string
+ | undefined,
+ )
+ : multipleLabel}
- )}
-
+
+ ) : value ? (
+ <>
+ {props.properties?.media &&
+ (value as any)[props.properties.media] && (
+
+ {props.properties?.label
+ ? (value as any)[props.properties.label]
+ : props.properties?.value
+ ? (value as any)[props.properties.value]
+ : value}
+
+
+ ) : (
- {typeof multipleLabel === "function"
- ? multipleLabel(
- value,
- props.properties?.label as string | undefined,
- )
- : multipleLabel}
+ {placeholder}
-
- ) : value ? (
- <>
- {props.properties?.media &&
- (value as any)[props.properties.media] && (
-
+
+ )}
+
- {placeholder}
-
- )}
-
-
-
-
- )}
- -
- {subtreeState?.pending && (
-
-
- {props.renderPending?.({ level, parent: props.parent }) || (
- - {props.renderPendingIcon?.({ level, parent: props.parent }) || ( - - {icons.pending && ( -- )} -
- )} - - )} + const idx = _value.indexOf(node); - {props.renderPendingLabel?.({ - level, - parent: props.parent, - }) || {i18n.pending}} -
- )}
- {!subtreeState?.pending && !subtreeState?.tree?.length ? (
- -
- {props.renderEmpty?.({ level, parent: props.parent }) || (
- - {props.renderEmptyIcon?.({ level, parent: props.parent }) || ( - - {icons.empty && ( -- )} -
- )} - - )} + if (idx >= 0) { + _value.splice(idx, 1); + } else { + _value.push(node); + } + }, + [ + areAllChildSelected, + getNodeChildren, + isNodeLoaded, + props.value, + selectAllNode, + unselectAllNode, + ], + ); + + const toggleChildrenSelection = useCallback( + (tree?: TreeViewItemNode[], event?: Event) => { + const children = tree || internalItems; + + if (!children) return; + + for (const child of children) { + if ("children" in child) { + toggleChildrenSelection(getNodeChildren(child), event); + } else { + toggleNodeSelection(child, event); + } + } + }, + [getNodeChildren, internalItems, toggleNodeSelection], + ); + + useImperativeHandle( + ref, + () => ({ + tree: internalItems, + loadTree, + getChildren, + getNodeChildren, + areAllChildSelected, + areSomeChildSelected, + selectAllNode, + unselectAllNode, + isUndeterminate, + isNodeLoaded, + toggleNodeSelection, + toggleChildrenSelection, + selectAllChildren, + unselectAllChildren, + }), + [ + areAllChildSelected, + areSomeChildSelected, + getChildren, + getNodeChildren, + internalItems, + isNodeLoaded, + isUndeterminate, + loadTree, + selectAllChildren, + selectAllNode, + toggleChildrenSelection, + toggleNodeSelection, + unselectAllChildren, + unselectAllNode, + ], + ); + + useEffect(() => { + const initChildren = async () => { + if (props.items) { + const localTree: TreeMap = { + treeMap: new WeakMap(), + }; + + localTree.treeMap.set(props.items, { + tree: [], + pending: false, + loaded: false, + }); + + setTreeState(localTree); + } + }; - {props.renderEmptyLabel?.({ level, parent: props.parent }) || ( - {i18n.empty} - )} -
- ) : (
- subtreeState.tree.map((child, index) => (
- -
- {props.renderItem?.({
- index,
- level,
- child,
- parent: props.parent,
- toggle: () => {
- const newOpenValue = !openMap[index];
-
- setOpenMap((oldMap) => ({
- ...oldMap,
- [index]: newOpenValue,
- }));
-
- return newOpenValue;
- },
- open: openMap[index]!,
- }) || (
- - {"children" in child ? ( -- )} + {"children" in child && index in openMap && openMap[index] && ( ++ {treeline && ( + + )} - {"children" in child && index in openMap && openMap[index] && ( -- )} -- {treeline && ( - - )} + {props.renderTreeChildren?.({ + index, + level, + child, + parent: props.parent, + }) || ( ++ )} + + )) + )} + + ); + }, +); - {props.renderTreeChildren?.({ - index, - level, - child, - parent: props.parent, - }) || ( -
+ )} + - )} -
- ))
- )}
-