@yimingliao/cms 0.0.146 → 0.0.148

package/dist/src/client/interfaces/components/ui/form/control-fields/control-fields-display.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Eye, Binary, MapPinCheckInside, Star, House } from 'lucide-react';
+import { Checkbox } from '../../inputs/checkbox.js';
+import { Field } from '../field.js';
+import { IndexField } from '../index-field.js';
+import { SlugField } from '../slug-field.js';
+import { BUILT_IN_FIELDS } from './built-in-fields.js';
+
+function ControlFieldsDisplay({
+  fields,
+  // form context
+  formData,
+  // ui states
+  isLoading = false
+}) {
+  const { t } = useTranslator();
+  if (!formData) return null;
+  const notBuiltInFields = fields.filter(
+    ({ key }) => !BUILT_IN_FIELDS.some((b) => b.key == key)
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    fields.find((f) => f.key === "isActive") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Eye, { className: "size-5" }),
+          t("ui.field.control-fields.is-active.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            fieldName: "isActive",
+            formData,
+            isLoading,
+            isDisplay: true
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "index") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Binary, { className: "size-5" }),
+          t("ui.field.control-fields.index.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(IndexField, { formData, isLoading, isDisplay: true })
+      }
+    ),
+    fields.find((f) => f.key === "slug") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(MapPinCheckInside, { className: "size-5" }),
+          t("ui.field.control-fields.slug.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(SlugField, { formData, isLoading, isDisplay: true })
+      }
+    ),
+    fields.find((f) => f.key === "isFeatured") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Star, { className: "size-5" }),
+          t("ui.field.control-fields.is-featured.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            fieldName: "isFeatured",
+            formData,
+            isLoading,
+            isDisplay: true
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "isShownOnHome") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(House, { className: "size-5" }),
+          t("ui.field.control-fields.is-shown-on-home.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            fieldName: "isShownOnHome",
+            formData,
+            isLoading,
+            isDisplay: true
+          }
+        )
+      }
+    ),
+    notBuiltInFields.map(({ key, label }) => {
+      return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          fieldName: key,
+          formData,
+          isLoading,
+          isDisplay: true
+        }
+      ) }, key);
+    })
+  ] });
+}
+
+export { ControlFieldsDisplay };

package/dist/src/client/interfaces/components/ui/form/control-fields/control-fields-input.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Eye, EyeOff, Binary, MapPinCheckInside, Star, House } from 'lucide-react';
+import { Checkbox } from '../../inputs/checkbox.js';
+import { Field } from '../field.js';
+import { IndexField } from '../index-field.js';
+import { SlugField } from '../slug-field.js';
+import { BUILT_IN_FIELDS } from './built-in-fields.js';
+
+function ControlFieldsInput({
+  fields = [],
+  // meta
+  controlMeta = {},
+  // form context
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  errors
+}) {
+  const { t } = useTranslator();
+  if (!(formData && setFormData)) return null;
+  const {
+    existingIndexes = [],
+    availableIndex = 1,
+    existingSlugs = []
+  } = controlMeta;
+  const notBuiltInFields = fields.filter(
+    ({ key }) => !BUILT_IN_FIELDS.some((b) => b.key == key)
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    fields.find((f) => f.key === "isActive") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "isActive",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          formData["isActive"] ? /* @__PURE__ */ jsx(Eye, { className: "size-5" }) : /* @__PURE__ */ jsx(EyeOff, { className: "size-5" }),
+          t("ui.field.control-fields.is-active.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "isActive",
+            fieldName: "isActive",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "index") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "index",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Binary, { className: "size-5" }),
+          t("ui.field.control-fields.index.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          IndexField,
+          {
+            id: "index",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled,
+            existingIndexes,
+            availableIndex,
+            isError: errors?.includes("index")
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "slug") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "slug",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(MapPinCheckInside, { className: "size-5" }),
+          t("ui.field.control-fields.slug.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          SlugField,
+          {
+            id: "slug",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled,
+            existingSlugs,
+            isError: errors?.includes("slug")
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "isFeatured") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "isFeatured",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Star, { className: "size-5" }),
+          t("ui.field.control-fields.is-featured.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "isFeatured",
+            fieldName: "isFeatured",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "isShownOnHome") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "isShownOnHome",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(House, { className: "size-5" }),
+          t("ui.field.control-fields.is-shown-on-home.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "isShownOnHome",
+            fieldName: "isShownOnHome",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled
+          }
+        )
+      }
+    ),
+    notBuiltInFields.map(({ key, label }) => {
+      return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: key,
+          fieldName: key,
+          formData,
+          setFormData,
+          isLoading,
+          isDisabled
+        }
+      ) }, key);
+    })
+  ] });
+}
+
+export { ControlFieldsInput };

package/dist/src/client/interfaces/components/ui/form/control-fields/control-fields.js

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import { Card } from '../../../shadcn/card.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+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 '../../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import { ControlFieldsDisplay } from './control-fields-display.js';
+import { ControlFieldsInput } from './control-fields-input.js';
+
+function ControlFields({
+  fields = [],
+  // meta
+  controlMeta,
+  // form context
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isDisplay = false,
+  errors,
+  ...props
+}) {
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ jsx(Card, { className: cn("flex flex-col gap-6", "bg-base-100 p-4"), ...props, children: !isDisplay ? /* @__PURE__ */ jsx(
+    ControlFieldsInput,
+    {
+      fields,
+      formData,
+      setFormData,
+      controlMeta,
+      isLoading,
+      isDisabled,
+      errors
+    }
+  ) : /* @__PURE__ */ jsx(
+    ControlFieldsDisplay,
+    {
+      fields,
+      formData,
+      isLoading
+    }
+  ) });
+}
+
+export { ControlFields };

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

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../shadcn/badge.js';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+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 '../../shadcn/sidebar.js';
+import { Spinner } from '../../shadcn/spinner.js';
+import '@radix-ui/react-tooltip';
+
+function FieldBody({
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isEmpty = false,
+  // base
+  className,
+  backgroundClassName,
+  childrenClassName,
+  children,
+  ...props
+}) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        className,
+        "relative",
+        "min-h-9 w-full min-w-0",
+        "flex items-center",
+        "text-sm"
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute size-full",
+              "dark:bg-input/30 bg-foreground/2 rounded-md",
+              backgroundClassName
+            )
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        !isLoading && (!children || isEmpty) && /* @__PURE__ */ jsx("div", { className: "flex-center h-9 px-3 opacity-50", children: /* @__PURE__ */ jsx("p", { className: "opacity-50", children: t("ui.no-data.text") }) }),
+        !isLoading && children && !isEmpty && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative size-full",
+              "flex items-center gap-3",
+              "px-3 py-2",
+              "break-all",
+              (isDisabled || isLoading) && "opacity-50",
+              childrenClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FieldBody };

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

@@ -0,0 +1,87 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { 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__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: isIndexActive ? void 0 : id,
+          fieldName: "isIndexActive",
+          formData,
+          setFormData,
+          isLoading,
+          isDisabled,
+          onClick: toggleCheckbox
+        }
+      ),
+      !isDisplay ? /* @__PURE__ */ jsx(
+        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__ */ jsx(
+        FieldBody,
+        {
+          isEmpty: !isIndexActive,
+          backgroundClassName: "!bg-base-200",
+          children: index
+        }
+      )
+    ] }),
+    !isDisplay && /* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsx(
+      ExpandableList,
+      {
+        isDisabled: !isIndexActive,
+        item: index,
+        items: ensureArray(existingIndexes)
+      }
+    ) })
+  ] });
+}
+
+export { IndexField };

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

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { Checkbox } from '../inputs/checkbox.js';
+import { Textarea } from '../inputs/textarea.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__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: isSlugActive ? void 0 : id,
+          fieldName: "isSlugActive",
+          formData,
+          setFormData,
+          isLoading,
+          isDisabled,
+          onClick: toggleCheckbox,
+          className: "mt-2"
+        }
+      ),
+      !isDisplay ? /* @__PURE__ */ jsx(
+        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__ */ jsx(FieldBody, { isEmpty: !isSlugActive, backgroundClassName: "!bg-base-200", children: slug })
+    ] }),
+    !isDisplay && /* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsx(
+      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,110 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+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/badge.js';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+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 '../../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__ */ jsx("div", { className: "flex flex-col gap-1", children: values.map((value, index) => {
+    const isError = errorIndexes.has(index);
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-0 left-0 z-10 h-full", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-10 pl-0.5 text-center text-sm opacity-50", children: Array.isArray(rawValue) && rawValue.length === 0 ? "0" : index + 1 }),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        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__ */ jsxs("div", { className: "flex-center absolute top-1 right-1 gap-1", children: [
+        /* @__PURE__ */ jsx(
+          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 }));
+            },
+            children: /* @__PURE__ */ jsx(CircleX, { className: "text-destructive" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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 }));
+            },
+            children: /* @__PURE__ */ jsx(CirclePlus, { className: "text-success" })
+          }
+        )
+      ] })
+    ] }, index);
+  }) });
+}
+
+export { ArrayInput };