@yimingliao/cms 0.0.126 → 0.0.128

package/dist/src/client/interfaces/components/ui/form/field.js

@@ -0,0 +1,30 @@
+import { Asterisk } from 'lucide-react';
+import '@radix-ui/react-avatar';
+import 'react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import { Label } from '../../shadcn/label.js';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+
+function Field({
+  label,
+  isRequired = false,
+  hint,
+  labelChildren,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement("div", { className: "grid w-full items-center gap-3" }, /* @__PURE__ */ React.createElement("span", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(Label, { className: "flex gap-1 truncate", ...props }, label, isRequired && /* @__PURE__ */ React.createElement(Asterisk, { className: "text-destructive size-3" }), hint && /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground ml-2 text-xs" }, hint)), /* @__PURE__ */ React.createElement("span", null, labelChildren)), children);
+}
+
+export { Field };

package/dist/src/client/interfaces/components/ui/form/form.js

@@ -0,0 +1,19 @@
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+
+function Form({
+  onSubmit,
+  className,
+  ...props
+}) {
+  const handleSubmit = (e) => {
+    if (!onSubmit) return;
+    e.preventDefault();
+    void onSubmit(e);
+  };
+  return /* @__PURE__ */ React.createElement("form", { className: cn(className), onSubmit: handleSubmit, ...props });
+}
+
+export { Form };

package/dist/src/client/interfaces/components/ui/form/index-field.js

@@ -0,0 +1,92 @@
+import 'mime-types';
+import { ensureArray } from '../../../../../shared/utils/ensure-array.js';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { ExpandableList } from '../features/expandable-list/expandable-list.js';
+import 'lucide-react';
+import '@radix-ui/react-avatar';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import 'intor/react';
+import { Checkbox } from '../inputs/checkbox.js';
+import { Input } from '../inputs/input.js';
+import { FieldBody } from './field-body.js';
+
+function IndexField({
+  existingIndexes,
+  availableIndex = 1,
+  // Min available index
+  // form context
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  isDisplay = false,
+  // base
+  id
+}) {
+  isDisabled = isDisabled || isLoading || isDisplay;
+  const index = formData?.["index"];
+  const isIndexActive = !!formData?.["isIndexActive"];
+  const toggleCheckbox = () => {
+    if (!setFormData) return;
+    setFormData((p) => ({ ...p, index: availableIndex }));
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement(
+    Checkbox,
+    {
+      id: isIndexActive ? void 0 : id,
+      fieldName: "isIndexActive",
+      formData,
+      setFormData,
+      isLoading,
+      isDisabled,
+      onClick: toggleCheckbox
+    }
+  ), !isDisplay ? /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      id: isIndexActive ? id : void 0,
+      fieldName: "index",
+      value: index || 1,
+      setFormData,
+      type: "number",
+      min: 1,
+      required: isIndexActive,
+      isDisabled: !isIndexActive || isDisabled,
+      className: cn(!isIndexActive && "text-transparent"),
+      inputGroupClassName: cn(
+        isIndexActive ? "opacity-100" : "opacity-50 cursor-not-allowed"
+      ),
+      isError
+    }
+  ) : /* @__PURE__ */ React.createElement(
+    FieldBody,
+    {
+      isEmpty: !isIndexActive,
+      backgroundClassName: "!bg-base-200"
+    },
+    index
+  )), !isDisplay && /* @__PURE__ */ React.createElement("div", { className: "mx-2" }, /* @__PURE__ */ React.createElement(
+    ExpandableList,
+    {
+      isDisabled: !isIndexActive,
+      item: index,
+      items: ensureArray(existingIndexes)
+    }
+  )));
+}
+
+export { IndexField };

package/dist/src/client/interfaces/components/ui/form/slug-field.js

@@ -0,0 +1,87 @@
+import 'mime-types';
+import { ensureArray } from '../../../../../shared/utils/ensure-array.js';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import { ExpandableList } from '../features/expandable-list/expandable-list.js';
+import 'lucide-react';
+import '@radix-ui/react-avatar';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import 'intor/react';
+import { Textarea } from '../inputs/textarea.js';
+import { Checkbox } from '../inputs/checkbox.js';
+import { FieldBody } from './field-body.js';
+
+function SlugField({
+  existingSlugs,
+  // form context
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  isDisplay = false,
+  // base
+  id
+}) {
+  isDisabled = isDisabled || isLoading || isDisplay;
+  const slug = formData?.["slug"] || "";
+  const isSlugActive = !!formData?.["isSlugActive"];
+  const isUnavailable = !!existingSlugs?.includes(slug);
+  const toggleCheckbox = () => {
+    if (!setFormData) return;
+    setFormData((p) => ({ ...p, slug: null }));
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ React.createElement(
+    Checkbox,
+    {
+      id: isSlugActive ? void 0 : id,
+      fieldName: "isSlugActive",
+      formData,
+      setFormData,
+      isLoading,
+      isDisabled,
+      onClick: toggleCheckbox,
+      className: "mt-2"
+    }
+  ), !isDisplay ? /* @__PURE__ */ React.createElement(
+    Textarea,
+    {
+      id: isSlugActive ? id : void 0,
+      fieldName: "slug",
+      value: slug,
+      setFormData,
+      required: isSlugActive,
+      isDisabled: !isSlugActive || isDisabled,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") return e.preventDefault();
+      },
+      className: cn(
+        "resize-none break-all",
+        !isSlugActive && "text-transparent"
+      ),
+      isError: isUnavailable || isError
+    }
+  ) : /* @__PURE__ */ React.createElement(FieldBody, { isEmpty: !isSlugActive, backgroundClassName: "!bg-base-200" }, slug)), !isDisplay && /* @__PURE__ */ React.createElement("div", { className: "mx-2" }, /* @__PURE__ */ React.createElement(
+    ExpandableList,
+    {
+      isDisabled: !isSlugActive,
+      isUnique: true,
+      item: slug,
+      items: ensureArray(existingSlugs)
+    }
+  )));
+}
+
+export { SlugField };

package/dist/src/client/interfaces/components/ui/inputs/array-input.js

@@ -0,0 +1,97 @@
+import { CircleX, CirclePlus } from 'lucide-react';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import { Separator } from '../../shadcn/separator.js';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { Button } from '../buttons/button.js';
+import 'intor/react';
+import { Textarea } from './textarea.js';
+
+function ArrayInput({
+  // form context
+  formData,
+  fieldName,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isResizable = false,
+  errors,
+  // base
+  placeholder = "",
+  ...props
+}) {
+  isDisabled = isDisabled || isLoading;
+  const rawValue = formData?.[fieldName ?? ""];
+  const values = Array.isArray(rawValue) && rawValue.length > 0 ? rawValue.map(String) : [""];
+  const errorIndexes = new Set(
+    errors.filter((e) => e.startsWith(fieldName ?? "")).map((e) => e.split(".").pop()).map(Number)
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, values.map((value, index) => {
+    const isError = errorIndexes.has(index);
+    return /* @__PURE__ */ React.createElement("div", { key: index, className: "relative" }, /* @__PURE__ */ React.createElement("div", { className: "flex-center absolute top-0 left-0 z-10 h-full" }, /* @__PURE__ */ React.createElement("span", { className: "min-w-10 pl-0.5 text-center text-sm opacity-50" }, Array.isArray(rawValue) && rawValue.length === 0 ? "0" : index + 1), /* @__PURE__ */ React.createElement(Separator, { orientation: "vertical" })), /* @__PURE__ */ React.createElement(
+      Textarea,
+      {
+        disabled: isDisabled,
+        placeholder: isLoading ? "" : placeholder,
+        value,
+        onChange: (e) => {
+          if (!setFormData || !fieldName) return;
+          const copy = [...values];
+          copy[index] = e.target.value;
+          setFormData((p) => ({ ...p, [fieldName]: copy }));
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && !isResizable) {
+            e.preventDefault();
+          }
+        },
+        isError,
+        className: cn("pr-20 pl-13", !isResizable && "resize-none"),
+        ...props
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: "flex-center absolute top-1 right-1 gap-1" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "outline",
+        type: "button",
+        size: "icon-sm",
+        className: "rounded-sm",
+        onClick: () => {
+          if (!setFormData || !fieldName) return;
+          const copy = values.filter((_, i) => i !== index);
+          setFormData((p) => ({ ...p, [fieldName]: copy }));
+        }
+      },
+      /* @__PURE__ */ React.createElement(CircleX, { className: "text-destructive" })
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "outline",
+        type: "button",
+        size: "icon-sm",
+        className: "rounded-sm",
+        onClick: () => {
+          if (!setFormData || !fieldName) return;
+          const copy = [...values];
+          copy.splice(index + 1, 0, "");
+          setFormData((p) => ({ ...p, [fieldName]: copy }));
+        }
+      },
+      /* @__PURE__ */ React.createElement(CirclePlus, { className: "text-success" })
+    )));
+  }));
+}
+
+export { ArrayInput };

package/dist/src/client/interfaces/components/ui/inputs/checkbox.js

@@ -0,0 +1,88 @@
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import 'lucide-react';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import { Spinner } from '../../shadcn/spinner.js';
+import '@radix-ui/react-tooltip';
+
+function Checkbox({
+  // form context
+  fieldName,
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  // base
+  isDisplay = false,
+  className = "",
+  ...props
+}) {
+  isDisabled = isDisabled || isLoading || isDisplay;
+  const isChecked = !!formData?.[fieldName ?? ""];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        className,
+        "group relative",
+        "h-6 w-12 min-w-12",
+        "p-1",
+        "rounded-full",
+        "overflow-hidden",
+        "shadow-inner",
+        !isChecked || isLoading ? "bg-secondary" : "bg-success",
+        "transition"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "size-4",
+          "rounded-full",
+          "bg-white",
+          "shadow",
+          isChecked && "translate-x-6",
+          isLoading && "opacity-0",
+          !isDisabled && "group-hover:scale-95 group-active:scale-90",
+          "duration-200"
+        )
+      }
+    ),
+    isLoading && /* @__PURE__ */ React.createElement("span", { className: "absolute top-1 left-1" }, /* @__PURE__ */ React.createElement(Spinner, null)),
+    /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "checkbox",
+        onChange: (e) => {
+          if (!setFormData || !fieldName) return;
+          setFormData((p) => ({ ...p, [fieldName]: e.target.checked }));
+        },
+        checked: isChecked,
+        disabled: isDisabled,
+        className: cn(
+          "absolute top-0 left-0",
+          "h-full w-full",
+          "rounded-full",
+          "opacity-0",
+          isDisabled ? "cursor-not-allowed" : "cursor-pointer"
+        ),
+        ...props
+      }
+    )
+  );
+}
+
+export { Checkbox };

package/dist/src/client/interfaces/components/ui/inputs/input.js

@@ -0,0 +1,56 @@
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import 'lucide-react';
+import { InputGroup, InputGroupAddon, InputGroupInput } from '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import { Spinner } from '../../shadcn/spinner.js';
+import '@radix-ui/react-tooltip';
+
+function Input({
+  // form context
+  fieldName,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  // base
+  className,
+  inputGroupClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    InputGroup,
+    {
+      "data-disabled": isDisabled || isLoading,
+      className: cn("h-10", inputGroupClassName)
+    },
+    isLoading ? /* @__PURE__ */ React.createElement(InputGroupAddon, null, /* @__PURE__ */ React.createElement(Spinner, null)) : /* @__PURE__ */ React.createElement(
+      InputGroupInput,
+      {
+        disabled: isDisabled || isLoading,
+        "aria-invalid": isError,
+        onChange: (e) => {
+          if (!setFormData || !fieldName) return;
+          setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
+        },
+        className: cn("h-10", className),
+        ...props
+      }
+    ),
+    children
+  );
+}
+
+export { Input };

package/dist/src/client/interfaces/components/ui/inputs/password-input.js

@@ -0,0 +1,36 @@
+import { Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
+import '@radix-ui/react-avatar';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import { InputGroupAddon, InputGroupButton } from '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { Input } from './input.js';
+
+function PasswordInput({
+  ...props
+}) {
+  const [showPassword, setShowPassword] = useState(false);
+  return /* @__PURE__ */ React.createElement(Input, { type: showPassword ? "text" : "password", ...props }, /* @__PURE__ */ React.createElement(InputGroupAddon, { align: "inline-end" }, /* @__PURE__ */ React.createElement(
+    InputGroupButton,
+    {
+      "aria-label": showPassword ? "Hide password" : "Show password",
+      title: showPassword ? "Hide password" : "Show password",
+      size: "icon-xs",
+      onClick: () => setShowPassword((prev) => !prev)
+    },
+    showPassword ? /* @__PURE__ */ React.createElement(Eye, null) : /* @__PURE__ */ React.createElement(EyeOff, null)
+  )));
+}
+
+export { PasswordInput };

package/dist/src/client/interfaces/components/ui/inputs/search-input.js

@@ -0,0 +1,58 @@
+import { useTranslator } from 'intor/react';
+import { Search } from 'lucide-react';
+import { useRef, useState } from 'react';
+import '@radix-ui/react-avatar';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import { InputGroupAddon } from '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import { Spinner } from '../../shadcn/spinner.js';
+import '@radix-ui/react-tooltip';
+import { Input } from './input.js';
+
+function SearchInput({
+  searchString = "",
+  setSearchString,
+  isLoading = false,
+  isDisabled = false,
+  ...props
+}) {
+  const { t } = useTranslator();
+  const isComposingRef = useRef(false);
+  const [inputValue, setInputValue] = useState(searchString);
+  const handleCompositionEnd = (e) => {
+    isComposingRef.current = false;
+    setInputValue(e.currentTarget.value);
+    setSearchString(e.currentTarget.value);
+  };
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+    if (!isComposingRef.current) setSearchString(e.target.value);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "relative size-full" }, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      isDisabled,
+      placeholder: isLoading ? "" : t("ui.search.text"),
+      autoComplete: "off",
+      value: inputValue,
+      onChange: handleChange,
+      onCompositionStart: () => isComposingRef.current = true,
+      onCompositionEnd: handleCompositionEnd,
+      className: "w-full pr-9",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(InputGroupAddon, { align: "inline-end" }, isLoading ? /* @__PURE__ */ React.createElement(Spinner, null) : /* @__PURE__ */ React.createElement(Search, null))
+  ));
+}
+
+export { SearchInput };

package/dist/src/client/interfaces/components/ui/inputs/select.js

@@ -0,0 +1,61 @@
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dropdown-menu';
+import 'lucide-react';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import { SelectItem, Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel } from '../../shadcn/select.js';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+
+function Select({
+  // form context
+  fieldName,
+  setFormData,
+  // ui states
+  isDisabled = false,
+  isLoading = false,
+  // base
+  placeholder,
+  label,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      onValueChange: (value) => {
+        if (!setFormData || !fieldName) return;
+        setFormData((p) => ({ ...p, [fieldName]: value }));
+      },
+      disabled: isDisabled || isLoading,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      SelectTrigger,
+      {
+        className: cn("w-full", className),
+        disabled: isDisabled || isLoading
+      },
+      /* @__PURE__ */ React.createElement(SelectValue, { placeholder })
+    ),
+    /* @__PURE__ */ React.createElement(SelectContent, null, /* @__PURE__ */ React.createElement(SelectGroup, null, label && /* @__PURE__ */ React.createElement(SelectLabel, null, label), children))
+  );
+}
+function Option({
+  value,
+  isDisabled = false,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(SelectItem, { value, disabled: isDisabled }, children);
+}
+
+export { Option, Select };