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