laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
347 lines (346 loc) • 10.7 kB
JavaScript
"use client";
import { jsxs as r, jsx as a, Fragment as f } from "react/jsx-runtime";
import { Controller as S } from "../../node_modules/react-hook-form/dist/index.esm.js";
import { cn as t } from "../../lib/utils.js";
import { AppSelect as h } from "./app-select.js";
import { AsyncSelect as P } from "./async-select.js";
import { Button as V } from "./button.js";
import { Checkbox as R } from "./checkbox.js";
import { DatePicker as v } from "./date-picker.js";
import { Input as k } from "./input.js";
import { Label as u } from "./label.js";
import { RadioGroup as w, RadioGroupItem as I } from "./radio-group.js";
import { Slider as O } from "./slider.js";
import { Switch as F } from "./switch.js";
import { Textarea as A } from "./textarea.js";
import { Typo as p } from "./typo.js";
const j = ({
item: e,
errors: n,
control: c
}) => {
const l = n[e.name]?.message, o = l ? String(l) : void 0;
return /* @__PURE__ */ a("div", { className: t(e.className), children: /* @__PURE__ */ a(
S,
{
name: e.name,
control: c,
render: ({ field: s }) => {
const i = !e.hideLabel && /* @__PURE__ */ r("div", { className: "mb-2 flex items-center justify-between", children: [
/* @__PURE__ */ a(u, { children: e.label }),
o && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: o })
] });
return /* @__PURE__ */ a(
L,
{
item: e,
field: s,
errorMessage: o,
labelWithError: i
}
);
}
}
) });
}, L = ({
item: e,
field: n,
errorMessage: c,
labelWithError: l
}) => {
switch (e.component) {
case "input":
return /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(
k,
{
...n,
type: e.inputType,
placeholder: e.placeholder,
className: t(c && "border-d-destructive"),
disabled: e.disabled,
iconLeft: e.iconLeft,
iconRight: e.iconRight,
...e.componentProps
}
)
] });
case "async":
case "async-multiple": {
if (!e.fetcher || !e.renderOptionItem || !e.resolveOptionValue || !e.renderSelectedValue)
return /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(p, { variant: "caption", className: "text-d-destructive", children: "Async select non configurato correttamente." })
] });
const o = e.component === "async-multiple";
return /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(
P,
{
multiple: o,
fetcher: e.fetcher,
initialOptions: e.initialOptions,
renderOptionItem: e.renderOptionItem,
resolveOptionValue: e.resolveOptionValue,
renderSelectedValue: e.renderSelectedValue,
value: n.value,
onChange: n.onChange,
placeholder: e.placeholder,
disabled: e.disabled,
notFound: e.notFound,
noResultsMessage: e.noResultsMessage,
debounce: e.debounce,
clearable: e.clearable,
...e.componentProps
}
)
] });
}
case "textarea":
return /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(
A,
{
...n,
placeholder: e.placeholder,
className: t(c && "border-d-destructive"),
disabled: e.disabled,
...e.componentProps
}
)
] });
case "radio":
return /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(
w,
{
value: n.value != null ? String(n.value) : "",
onValueChange: (o) => n.onChange(o),
className: "space-y-2",
disabled: e.disabled,
...e.componentProps,
children: (e.options ?? []).map((o) => {
const s = `${e.name}-${o.value}`;
return /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ a(
I,
{
id: s,
value: String(o.value),
disabled: e.disabled
}
),
/* @__PURE__ */ a(
u,
{
htmlFor: s,
className: t(
"cursor-pointer",
e.disabled && "cursor-not-allowed opacity-60"
),
children: o.label
}
)
] }, o.value);
})
}
)
] });
case "select":
return /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(
h,
{
...n,
onValueChange: (o) => n.onChange(o),
options: e.options ?? [],
placeholder: e.placeholder,
disabled: e.disabled,
searchable: e.searchable ?? !0,
...e.componentProps
}
)
] });
case "multiselect":
return /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(
h,
{
...n,
multiple: !0,
onValueChange: (o) => n.onChange(o),
options: e.options ?? [],
placeholder: e.placeholder,
disabled: e.disabled,
searchable: e.searchable ?? !0,
...e.componentProps
}
)
] });
case "datepicker":
return /* @__PURE__ */ r("div", { className: "relative", children: [
l,
e.calendarRange ? /* @__PURE__ */ a(
v,
{
mode: "range",
value: n.value,
onChange: e.disabled ? void 0 : (o) => n.onChange(o),
placeholder: e.placeholder,
disabled: e.disabled,
...e.componentProps
}
) : /* @__PURE__ */ a(
v,
{
mode: "single",
value: n.value,
onChange: e.disabled ? void 0 : (o) => n.onChange(o),
placeholder: e.placeholder,
disabled: e.disabled,
customCalendarProps: e.disabled ? {
disabled: !0,
mode: "single"
} : void 0,
...e.componentProps
}
)
] });
case "checkbox":
return /* @__PURE__ */ r("div", { className: "space-y-1.5", children: [
/* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ a(
R,
{
...n,
id: e.name,
onCheckedChange: (o) => n.onChange(o),
defaultChecked: !!e.defaultValue,
disabled: e.disabled,
...e.componentProps
}
),
/* @__PURE__ */ a(
u,
{
htmlFor: e.name,
className: t(
"cursor-pointer",
e.disabled && "cursor-not-allowed opacity-60"
),
children: e.label
}
),
c && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: c })
] }),
e.caption && /* @__PURE__ */ a(p, { variant: "caption", className: "text-d-muted-foreground", children: e.caption })
] });
case "switch":
return /* @__PURE__ */ r("div", { className: "space-y-1.5", children: [
/* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ r("div", { children: [
/* @__PURE__ */ a(u, { htmlFor: e.name, children: e.label }),
e.caption && /* @__PURE__ */ a(
p,
{
variant: "caption",
className: "text-d-muted-foreground mt-0.5",
children: e.caption
}
)
] }),
/* @__PURE__ */ a(
F,
{
id: e.name,
checked: !!n.value,
onCheckedChange: (o) => n.onChange(o),
disabled: e.disabled,
...e.componentProps
}
)
] }),
c && /* @__PURE__ */ a("span", { className: "text-d-destructive text-xs", children: c })
] });
case "slider":
return /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(
O,
{
value: Array.isArray(n.value) ? n.value : [n.value || e.min || 0],
onValueChange: (o) => n.onChange(o[0]),
min: e.min ?? 0,
max: e.max ?? 100,
step: e.step ?? 1,
disabled: e.disabled,
showValues: !0,
...e.componentProps
}
),
e.caption && /* @__PURE__ */ a(p, { variant: "caption", className: "text-d-muted-foreground mt-1", children: e.caption })
] });
case "custom":
return e.render ? /* @__PURE__ */ a(f, { children: e.render({
field: n,
error: c,
label: l
}) }) : /* @__PURE__ */ r("div", { children: [
l,
/* @__PURE__ */ a(p, { variant: "caption", className: "text-d-destructive", children: "Custom component richiede prop 'render'." })
] });
default:
return /* @__PURE__ */ a("div", {});
}
}, _ = ({
items: e,
cols: n = "2",
form: c,
submitText: l = "Invia",
onSubmit: o,
isSubmitting: s = !1,
showSubmitButton: i = !1
}) => {
const {
control: b,
handleSubmit: g,
formState: { errors: m, isValid: x, isDirty: C }
} = c, N = (d) => d.colSpan ? `col-span-${d.colSpan}` : "";
return /* @__PURE__ */ r("form", { onSubmit: g((d) => o?.(d)), children: [
/* @__PURE__ */ a("div", { className: t("grid gap-4", `grid-cols-${n}`), children: e.map((d, y) => /* @__PURE__ */ a(
"div",
{
className: t(
N(d) || y === e.length - 1 && "col-span-full"
),
children: /* @__PURE__ */ a(
j,
{
item: d,
errors: m,
control: b
}
)
},
d.name
)) }),
i && /* @__PURE__ */ a("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ a(
V,
{
type: "submit",
disabled: !x || !C || s,
isLoading: s,
children: l
}
) })
] });
};
export {
_ as AppForm
};