@lunejs/admin-ui 0.2.0 → 0.2.1

package/dist/lib/custom-fields/components/details/is-list/custom-field-is-list.js

@@ -31,14 +31,16 @@ import "../../../../../packages/lune-ui/dist/components/toggle-group.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-tooltip/dist/index.js";
 import "../../../../../packages/lune-ui/dist/form/form.js";
 import { FormSelect as a } from "../../../../../packages/lune-ui/dist/form/form-select.js";
-import { CustomFieldType as i } from "../../../../api/codegen/graphql.js";
+import { CustomFieldType as o } from "../../../../api/codegen/graphql.js";
 import { useCustomFieldFormContext as u } from "../use-form/use-form.js";
 import c from "../../../../../node_modules/lucide-react/dist/esm/icons/circle.js";
 import f from "../../../../../node_modules/lucide-react/dist/esm/icons/list.js";
 const Z = () => {
-  const { control: m, watch: r, definition: p, setValue: e } = u(), o = r("type"), t = l(
-    () => [i.Boolean, i.MultiLineText].includes(o),
-    [o]
+  const { control: m, watch: r, definition: p, setValue: e } = u(), i = r("type"), t = l(
+    () => [o.Boolean, o.MultiLineText, o.RichText].includes(
+      i
+    ),
+    [i]
   );
   return n(() => {
     t && e("quantity", "single");

package/dist/lib/custom-fields/components/details/use-form/form-schema.d.ts

@@ -14,6 +14,7 @@ export declare const CustomFieldDetailsSchema: z.ZodObject<{
         MONEY: CustomFieldType.Money;
         MULTI_LINE_TEXT: CustomFieldType.MultiLineText;
         PRODUCT_REFERENCE: CustomFieldType.ProductReference;
+        RICH_TEXT: CustomFieldType.RichText;
         SINGLE_LINE_TEXT: CustomFieldType.SingleLineText;
         URL: CustomFieldType.Url;
     }>;

package/dist/lib/custom-fields/components/details/use-form/form-schema.js

@@ -1,7 +1,7 @@
 import * as t from "../../../../../node_modules/zod/v4/classic/external.js";
 import { CustomFieldType as e } from "../../../../api/codegen/graphql.js";
 import { FormMessages as o } from "../../../../../shared/forms/form-messages.js";
-const i = t.object({
+const r = t.object({
   name: t.string().min(1, o.required),
   type: t.enum(
     [
@@ -17,7 +17,8 @@ const i = t.object({
       e.SingleLineText,
       e.CustomObjectReference,
       e.Url,
-      e.Color
+      e.Color,
+      e.RichText
     ],
     "Invalid type"
   ),
@@ -25,5 +26,5 @@ const i = t.object({
   quantity: t.enum(["single", "multiple"])
 });
 export {
-  i as CustomFieldDetailsSchema
+  r as CustomFieldDetailsSchema
 };

package/dist/lib/custom-fields/components/fields/custom-field.js

@@ -1,94 +1,102 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import { CustomFieldType as o } from "../../../api/codegen/graphql.js";
 import { BooleanCustomField as C } from "./boolean.js";
 import { ColorCustomField as u } from "./color.js";
 import { CustomObjectReferenceCustomField as F } from "./custom-object.js";
-import { DateCustomField as y } from "./date.js";
-import { DecimalCustomField as c } from "./decimal.js";
+import { DateCustomField as c } from "./date.js";
+import { DecimalCustomField as y } from "./decimal.js";
 import { ImageCustomField as l } from "./image.js";
-import { IntegerCustomField as g } from "./integer.js";
-import { MultiLineTextCustomField as s } from "./multi-line-text.js";
-import { ProductReferenceCustomField as x } from "./product-reference.js";
-import { SingleLineTextCustomField as T } from "./single-line-text.js";
+import { IntegerCustomField as x } from "./integer.js";
+import { MultiLineTextCustomField as g } from "./multi-line-text.js";
+import { ProductReferenceCustomField as s } from "./product-reference.js";
+import { RichTextCustomField as T } from "./rich-text.js";
+import { SingleLineTextCustomField as R } from "./single-line-text.js";
 import { UrlCustomField as D } from "./url.js";
-const q = ({ defaultValues: e, definition: r, onChange: p }) => r.type === o.SingleLineText ? /* @__PURE__ */ t(
-  T,
+const w = ({ defaultValues: e, definition: r, onChange: t }) => r.type === o.SingleLineText ? /* @__PURE__ */ p(
+  R,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.MultiLineText ? /* @__PURE__ */ t(
-  s,
+) : r.type === o.MultiLineText ? /* @__PURE__ */ p(
+  g,
+  {
+    defaultValue: e?.[0],
+    onChange: (m) => t(r, m),
+    definition: r
+  }
+) : r.type === o.RichText ? /* @__PURE__ */ p(
+  T,
   {
     defaultValue: e?.[0],
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.Url ? /* @__PURE__ */ t(
+) : r.type === o.Url ? /* @__PURE__ */ p(
   D,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.Color ? /* @__PURE__ */ t(
+) : r.type === o.Color ? /* @__PURE__ */ p(
   u,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.Integer ? /* @__PURE__ */ t(
-  g,
+) : r.type === o.Integer ? /* @__PURE__ */ p(
+  x,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.Decimal ? /* @__PURE__ */ t(
-  c,
+) : r.type === o.Decimal ? /* @__PURE__ */ p(
+  y,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.Boolean ? /* @__PURE__ */ t(
+) : r.type === o.Boolean ? /* @__PURE__ */ p(
   C,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.Date ? /* @__PURE__ */ t(
-  y,
+) : r.type === o.Date ? /* @__PURE__ */ p(
+  c,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.Image ? /* @__PURE__ */ t(
+) : r.type === o.Image ? /* @__PURE__ */ p(
   l,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.ProductReference ? /* @__PURE__ */ t(
-  x,
+) : r.type === o.ProductReference ? /* @__PURE__ */ p(
+  s,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
-) : r.type === o.CustomObjectReference ? /* @__PURE__ */ t(
+) : r.type === o.CustomObjectReference ? /* @__PURE__ */ p(
   F,
   {
     defaultValues: e,
-    onChange: (m) => p(r, m),
+    onChange: (m) => t(r, m),
     definition: r
   }
 ) : null;
 export {
-  q as CustomField
+  w as CustomField
 };

package/dist/lib/custom-fields/components/fields/rich-text.d.ts

@@ -0,0 +1,8 @@
+import { CommonCustomFieldDefinitionFragment } from '../../../api/types';
+export declare const RichTextCustomField: ({ defaultValue, definition, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = {
+    defaultValue?: string;
+    onChange: (value: null | string) => void;
+    definition: CommonCustomFieldDefinitionFragment;
+};
+export {};

package/dist/lib/custom-fields/components/fields/rich-text.js

@@ -0,0 +1,17 @@
+import { jsx as n } from "react/jsx-runtime";
+import { PrimitiveCustomField as s } from "./shared/primitive.js";
+const a = ({ defaultValue: t, definition: e, onChange: o }) => /* @__PURE__ */ n(
+  s,
+  {
+    richtext: !0,
+    defaultValues: t ? [t] : [""],
+    definition: e,
+    onChange: (r) => {
+      const i = r.map((m) => m.value);
+      o(i[0] ?? null);
+    }
+  }
+);
+export {
+  a as RichTextCustomField
+};

package/dist/lib/custom-fields/components/fields/shared/primitive.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { CommonCustomFieldDefinitionFragment } from '../../../../api/types';
-export declare const PrimitiveCustomField: ({ onChange, definition, placeholder, defaultValues, inputProps, mapOnSave, textarea, bool, date }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const PrimitiveCustomField: ({ onChange, definition, placeholder, defaultValues, inputProps, mapOnSave, textarea, bool, date, richtext }: Props) => import("react/jsx-runtime").JSX.Element;
 type Props = {
     definition: CommonCustomFieldDefinitionFragment;
     onChange: (items: {
@@ -13,6 +13,7 @@ type Props = {
     textarea?: boolean;
     bool?: boolean;
     date?: boolean;
+    richtext?: boolean;
     mapOnSave?: (items: {
         id: string;
         value: string;

package/dist/lib/custom-fields/components/fields/shared/primitive.js

@@ -1,26 +1,26 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useId as I, useState as L } from "react";
-import { isTruthy as C } from "../../../../../packages/lune-common/dist/index.js";
+import { useId as F, useState as I } from "react";
+import { isTruthy as w } from "../../../../../packages/lune-common/dist/index.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-accordion/dist/index.js";
 import { cn as z } from "../../../../../packages/lune-ui/dist/lib/utils.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-alert-dialog/dist/index.js";
-import { Button as p } from "../../../../../packages/lune-ui/dist/components/button.js";
+import { Button as u } from "../../../../../packages/lune-ui/dist/components/button.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-avatar/dist/index.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-separator/dist/index.js";
-import { Calendar as F } from "../../../../../packages/lune-ui/dist/components/calendar.js";
+import { Calendar as E } from "../../../../../packages/lune-ui/dist/components/calendar.js";
 import "../../../../../packages/lune-ui/dist/components/chart.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-checkbox/dist/index.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-collapsible/dist/index.js";
 import "../../../../../packages/lune-ui/dist/node_modules/cmdk/dist/index.js";
 import "../../../../../packages/lune-ui/dist/components/dialog.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
-import { Input as w } from "../../../../../packages/lune-ui/dist/components/input.js";
-import { Textarea as O } from "../../../../../packages/lune-ui/dist/components/textarea.js";
-import { Label as N } from "../../../../../packages/lune-ui/dist/components/label.js";
+import { Input as N } from "../../../../../packages/lune-ui/dist/components/input.js";
+import { Textarea as M } from "../../../../../packages/lune-ui/dist/components/textarea.js";
+import { Label as P } from "../../../../../packages/lune-ui/dist/components/label.js";
 import "../../../../../packages/lune-ui/dist/components/phone-input.js";
-import { Popover as P, PopoverTrigger as x, PopoverContent as S } from "../../../../../packages/lune-ui/dist/components/popover.js";
+import { Popover as x, PopoverTrigger as S, PopoverContent as j } from "../../../../../packages/lune-ui/dist/components/popover.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-radio-group/dist/index.js";
-import { Select as $, SelectTrigger as B, SelectValue as G, SelectContent as M, SelectItem as j } from "../../../../../packages/lune-ui/dist/components/select.js";
+import { Select as O, SelectTrigger as R, SelectValue as $, SelectContent as B, SelectItem as T } from "../../../../../packages/lune-ui/dist/components/select.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-dialog/dist/index.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-switch/dist/index.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-tabs/dist/index.js";
@@ -30,69 +30,75 @@ import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-toggle
 import "../../../../../packages/lune-ui/dist/components/toggle-group.js";
 import "../../../../../packages/lune-ui/dist/node_modules/@radix-ui/react-tooltip/dist/index.js";
 import "../../../../../packages/lune-ui/dist/form/form.js";
-import { useList as R } from "../../../../../shared/hooks/use-list.js";
-import { formatDate as T } from "../../../../../node_modules/date-fns/format.js";
-import U from "../../../../../node_modules/lucide-react/dist/esm/icons/calendar.js";
-import X from "../../../../../node_modules/lucide-react/dist/esm/icons/x.js";
-const ke = ({
+import { RichEditor as G } from "../../../../../shared/components/rich-editor/rich-editor.js";
+import { useList as H } from "../../../../../shared/hooks/use-list.js";
+import { CustomFieldPreviewContainer as U } from "./preview/custom-field-preview-container.js";
+import { formatDate as V } from "../../../../../node_modules/date-fns/format.js";
+import X from "../../../../../node_modules/lucide-react/dist/esm/icons/calendar.js";
+import _ from "../../../../../node_modules/lucide-react/dist/esm/icons/x.js";
+const Ae = ({
   onChange: k,
-  definition: n,
-  placeholder: t,
-  defaultValues: u,
+  definition: s,
+  placeholder: i,
+  defaultValues: c,
   inputProps: y,
-  mapOnSave: c,
-  textarea: d,
-  bool: v,
-  date: h
+  mapOnSave: d,
+  textarea: v,
+  bool: h,
+  date: f,
+  richtext: m
 }) => {
-  const f = I(), { items: o, build: V, append: g, remove: b, reset: A, update: i } = R(u ?? [""]), [s, D] = L(
-    u?.map((e) => V(e)) ?? []
+  const g = F(), { items: n, build: L, append: C, remove: b, reset: A, update: o } = H(c ?? [""]), [t, D] = I(
+    c?.map((e) => L(e)) ?? []
   );
   return /* @__PURE__ */ l(
-    P,
+    x,
     {
       onOpenChange: (e) => {
         if (!e) {
-          const a = c ? o.filter((m) => C(m.value)).map(c) : o.filter((m) => C(m.value));
-          D(a), k(a), A(a), a.length || g("");
+          const a = d ? n.filter((p) => w(p.value)).map(d) : n.filter((p) => w(p.value));
+          D(a), k(a), A(a), a.length || C("");
         }
       },
       children: [
         /* @__PURE__ */ l("div", { className: "group grid grid-cols-1 items-center gap-2 md:grid-cols-[25%_1fr] md:gap-4 cursor-default", children: [
-          /* @__PURE__ */ r(N, { htmlFor: f, className: "w-full", children: n.name }),
-          /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
-            w,
+          /* @__PURE__ */ r(P, { htmlFor: g, className: "w-full", children: s.name }),
+          /* @__PURE__ */ r(S, { asChild: !0, children: m ? /* @__PURE__ */ r(U, { className: "px-2", children: t.map((e) => {
+            const a = document.createElement("div");
+            return a.innerHTML = e.value, a.textContent;
+          }) }) : /* @__PURE__ */ r(
+            N,
             {
-              id: f,
-              value: d ? s.map((e) => e.value).join(", ").replaceAll(`
-`, " ") : v ? s.map(
+              id: g,
+              value: m ? t.map((e) => e.value).join(", ") : v ? t.map((e) => e.value).join(", ").replaceAll(`
+`, " ") : h ? t.map(
                 (e) => `${e.value.charAt(0).toUpperCase()}${e.value.slice(1, e.value.length)}`
               ).join(", ").replaceAll(`
-`, " ") : h ? s.map((e) => e.value ? T(e.value, "PPP") : "").join(", ") : s.map((e) => e.value).join(", "),
+`, " ") : f ? t.map((e) => e.value ? V(e.value, "PPP") : "").join(", ") : t.map((e) => e.value).join(", "),
               readOnly: !0,
               className: "w-full shrink-0 text-start dark:group-hover:bg-input/50 group-hover:bg-muted"
             }
           ) })
         ] }),
-        /* @__PURE__ */ r(S, { className: "w-auto min-w-72 max-w-lg", align: "start", children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ r(N, { children: n.name }),
-          o.map((e) => /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-            d ? /* @__PURE__ */ r(
-              O,
+        /* @__PURE__ */ r(j, { className: "w-auto min-w-72 max-w-lg", align: "start", children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ r(P, { children: s.name }),
+          n.map((e) => /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+            m ? /* @__PURE__ */ r(G, { defaultValue: e.value, onChange: (a) => o(e.id, a) }) : v ? /* @__PURE__ */ r(
+              M,
               {
-                placeholder: t,
+                placeholder: i,
                 value: e.value,
-                onChange: (a) => i(e.id, a.target.value)
+                onChange: (a) => o(e.id, a.target.value)
               }
-            ) : v ? /* @__PURE__ */ l($, { value: e.value, onValueChange: (a) => i(e.id, a), children: [
-              /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(G, { placeholder: t || "Select a value" }) }),
-              /* @__PURE__ */ l(M, { children: [
-                /* @__PURE__ */ r(j, { value: "true", children: "True" }),
-                /* @__PURE__ */ r(j, { value: "false", children: "False" })
+            ) : h ? /* @__PURE__ */ l(O, { value: e.value, onValueChange: (a) => o(e.id, a), children: [
+              /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r($, { placeholder: i || "Select a value" }) }),
+              /* @__PURE__ */ l(B, { children: [
+                /* @__PURE__ */ r(T, { value: "true", children: "True" }),
+                /* @__PURE__ */ r(T, { value: "false", children: "False" })
               ] })
-            ] }) : h ? /* @__PURE__ */ l(P, { children: [
-              /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ l(
-                p,
+            ] }) : f ? /* @__PURE__ */ l(x, { children: [
+              /* @__PURE__ */ r(S, { asChild: !0, children: /* @__PURE__ */ l(
+                u,
                 {
                   variant: "outline",
                   className: z(
@@ -100,47 +106,47 @@ const ke = ({
                     !e.value && "text-muted-foreground"
                   ),
                   children: [
-                    e.value ? T(new Date(e.value), "PPP") : /* @__PURE__ */ r("span", { children: t }),
-                    /* @__PURE__ */ r(U, { size: 16, className: "opacity-50" })
+                    e.value ? V(new Date(e.value), "PPP") : /* @__PURE__ */ r("span", { children: i }),
+                    /* @__PURE__ */ r(X, { size: 16, className: "opacity-50" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ r(S, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ r(
-                F,
+              /* @__PURE__ */ r(j, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ r(
+                E,
                 {
                   mode: "single",
                   defaultMonth: e.value ? new Date(e.value) : void 0,
                   selected: e.value ? new Date(e.value) : void 0,
-                  onSelect: (a) => i(e.id, a ? a.toISOString() : ""),
+                  onSelect: (a) => o(e.id, a ? a.toISOString() : ""),
                   className: "h-81.25"
                 }
               ) })
             ] }) : /* @__PURE__ */ r(
-              w,
+              N,
               {
                 ...y,
                 value: e.value,
-                placeholder: t,
-                onChange: (a) => i(e.id, a.target.value)
+                placeholder: i,
+                onChange: (a) => o(e.id, a.target.value)
               }
             ),
-            o.length > 1 && /* @__PURE__ */ r(
-              p,
+            n.length > 1 && /* @__PURE__ */ r(
+              u,
               {
                 variant: "ghost",
                 size: "icon",
                 onClick: () => b(e.id),
                 className: "shrink-0",
-                children: /* @__PURE__ */ r(X, {})
+                children: /* @__PURE__ */ r(_, {})
               }
             )
           ] }, e.id)),
-          n.isList && /* @__PURE__ */ r(p, { variant: "outline", size: "sm", onClick: () => g(""), className: "w-fit", children: "Add item" })
+          s.isList && /* @__PURE__ */ r(u, { variant: "outline", size: "sm", onClick: () => C(""), className: "w-fit", children: "Add item" })
         ] }) })
       ]
     }
   );
 };
 export {
-  ke as PrimitiveCustomField
+  Ae as PrimitiveCustomField
 };