devnonla-ui 0.1.0

package/src/form/common/types.ts

@@ -0,0 +1,169 @@
+import type { ReactNode } from "react";
+import type { ControllerFieldState, ControllerRenderProps, FieldValues, RegisterOptions, Validate } from "react-hook-form";
+import type { EFormItemType } from "./enum";
+
+export type TFormItemRenderCtx = {
+  field: ControllerRenderProps<FieldValues, string>;
+  fieldState: ControllerFieldState;
+  status?: "error" | "warning";
+};
+
+type TFormItemCondition = "==" | "!=" | ">=" | "<=" | ">" | "<";
+
+type TFormItemConditions = [string, TFormItemCondition, unknown];
+
+export interface ISelectItemProps {
+  label: string;
+  value: string | number;
+}
+
+export interface IFormItemHelpProps {
+  text: string;
+  className?: string;
+  iconClassName?: string;
+}
+
+/** JSON-serializable rule value with message (RHF min/max/minLength/maxLength shape). */
+export type TRuleValueMessage<T = number> = {
+  value: T;
+  message?: string;
+};
+
+/**
+ * Serializable rules for BE → FE forms.
+ * `pattern.value` is a string in JSON; hydrated to RegExp via `hydrateRules`.
+ * Client-only `validate` may be a function when composing schema in TS.
+ */
+export type TFormRule = {
+  required?: string | boolean;
+  min?: number | TRuleValueMessage;
+  max?: number | TRuleValueMessage;
+  minLength?: number | TRuleValueMessage;
+  maxLength?: number | TRuleValueMessage;
+  pattern?: { value: string | RegExp; message?: string };
+  validate?: Validate<unknown, unknown> | Record<string, Validate<unknown, unknown>>;
+};
+
+export type TFormItemBase = {
+  type: EFormItemType;
+  label?: string;
+  collapsable?: boolean;
+  name: string | string[] | number[];
+  defaultValue?: unknown;
+  rules?: TFormRule;
+  helps?: IFormItemHelpProps[];
+  conditions?: Array<Array<TFormItemConditions>>;
+  options?: Record<string, unknown>;
+  colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  className?: string;
+  labelClassName?: string;
+  innerClassName?: string;
+};
+
+export type TFormItemInput = TFormItemBase & {
+  type: EFormItemType.Input;
+};
+
+export type TFormItemTextarea = TFormItemBase & {
+  type: EFormItemType.Textarea;
+};
+
+export type TFormItemNumber = TFormItemBase & {
+  type: EFormItemType.Number;
+};
+
+export type TFormItemColor = TFormItemBase & {
+  type: EFormItemType.Color;
+};
+
+export type TFormItemRadio = TFormItemBase & {
+  type: EFormItemType.Radio;
+  choices: ISelectItemProps[];
+};
+
+export type TFormItemSelect = TFormItemBase & {
+  type: EFormItemType.Select;
+  choices: ISelectItemProps[];
+};
+
+export type TFormItemSelectMultiple = TFormItemBase & {
+  type: EFormItemType.SelectMultiple;
+  choices: ISelectItemProps[];
+};
+
+export type TFormItemSelectRemote = TFormItemBase & {
+  type: EFormItemType.SelectRemote;
+  endpoint: string;
+  keyProp: string;
+  labelProp: string;
+  dataProp?: string;
+};
+
+export type TFormItemDateTime = TFormItemBase & {
+  type: EFormItemType.DateTime;
+};
+
+export type TFormItemTime = TFormItemBase & {
+  type: EFormItemType.Time;
+};
+
+export type TFormItemRepeater = TFormItemBase & {
+  type: EFormItemType.Repeater;
+  childItems?: TFormItemProps[];
+};
+
+export type TFormItemObject = TFormItemBase & {
+  type: EFormItemType.Object;
+  childItems?: TFormItemProps[];
+};
+
+export type TFormItemHidden = TFormItemBase & {
+  type: EFormItemType.Hidden;
+};
+
+export type TFormItemSwitch = TFormItemBase & {
+  type: EFormItemType.Switch;
+};
+
+export type TFormItemCheckbox = TFormItemBase & {
+  type: EFormItemType.Checkbox;
+};
+
+export type TFormItemJson = TFormItemBase & {
+  type: EFormItemType.JSON;
+};
+
+export type TFormItemEditor = TFormItemBase & {
+  type: EFormItemType.Editor;
+};
+
+export type TFormItemCustom = TFormItemBase & {
+  type: EFormItemType.Custom;
+  render: (ctx: TFormItemRenderCtx) => ReactNode;
+};
+
+export type TFormItemProps =
+  | TFormItemInput
+  | TFormItemTextarea
+  | TFormItemNumber
+  | TFormItemRepeater
+  | TFormItemSelect
+  | TFormItemSelectMultiple
+  | TFormItemDateTime
+  | TFormItemTime
+  | TFormItemSelectRemote
+  | TFormItemObject
+  | TFormItemColor
+  | TFormItemRadio
+  | TFormItemHidden
+  | TFormItemSwitch
+  | TFormItemCheckbox
+  | TFormItemJson
+  | TFormItemEditor
+  | TFormItemCustom
+  | TFormItemBase;
+
+export type TForm = TFormItemProps[];
+
+/** After hydrate — RHF RegisterOptions (pattern is RegExp). */
+export type THydratedRules = RegisterOptions;

package/src/form/index.ts

@@ -0,0 +1,35 @@
+/** Schema-driven form (react-hook-form). Prefer this name over layout `Form`. */
+export { Form as SchemaForm } from "./Form";
+export type { FormProps as SchemaFormProps } from "./Form";
+/** @deprecated use SchemaForm — kept so existing demo imports keep typechecking during migrate */
+export { Form as FormSchema } from "./Form";
+export { FormItem } from "./FormItem";
+export type { FormItemProps } from "./FormItem";
+export { EFormItemType } from "./common/enum";
+export { hydrateRules, fieldNameOf, isRuleRequired } from "./common/rules";
+export type { FormFetcher } from "./common/context";
+export type {
+  TForm,
+  TFormItemProps,
+  TFormRule,
+  TRuleValueMessage,
+  ISelectItemProps,
+  IFormItemHelpProps,
+  TFormItemInput,
+  TFormItemTextarea,
+  TFormItemNumber,
+  TFormItemSelect,
+  TFormItemSelectMultiple,
+  TFormItemSelectRemote,
+  TFormItemDateTime,
+  TFormItemTime,
+  TFormItemRepeater,
+  TFormItemObject,
+  TFormItemRadio,
+  TFormItemColor,
+  TFormItemHidden,
+  TFormItemSwitch,
+  TFormItemCheckbox,
+  TFormItemCustom,
+  TFormItemRenderCtx,
+} from "./common/types";

package/src/form/partials/FormItemHelps.tsx

@@ -0,0 +1,31 @@
+import { cn } from "../../lib/cn";
+import type { IFormItemHelpProps } from "../common/types";
+
+function FormItemHelp({ text, className }: IFormItemHelpProps) {
+  return (
+    <div className={cn("flex flex-row items-start gap-1.5 text-xs text-muted-foreground", className)}>
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden className="mt-0.5 shrink-0 text-warning">
+        <path d="M6 1.5L10.5 10H1.5L6 1.5Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
+        <path d="M6 5V7.2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+        <circle cx="6" cy="8.6" r="0.6" fill="currentColor" />
+      </svg>
+      <div>{text}</div>
+    </div>
+  );
+}
+
+export type FormItemHelpsProps = {
+  className?: string;
+  items?: IFormItemHelpProps[];
+};
+
+export function FormItemHelps({ items, className }: FormItemHelpsProps) {
+  if (!items?.length) return null;
+  return (
+    <div className={cn("mt-1 flex flex-col gap-1 pl-2.75", className)}>
+      {items.map((item, index) => (
+        <FormItemHelp key={`${index}-${item.text}`} text={item.text} className={item.className} iconClassName={item.iconClassName} />
+      ))}
+    </div>
+  );
+}

package/src/form/variants/FieldCheckbox.tsx

@@ -0,0 +1,20 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { Checkbox } from "../../checkbox/Checkbox";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  options?: Record<string, unknown>;
+};
+
+export function FieldCheckbox({ field, options }: Props) {
+  const checkboxLabel = options?.checkboxLabel as string | undefined;
+  return (
+    <Checkbox
+      checked={Boolean(field.value)}
+      onChange={(checked) => field.onChange(checked)}
+      disabled={options?.disabled as boolean | undefined}
+    >
+      {checkboxLabel}
+    </Checkbox>
+  );
+}

package/src/form/variants/FieldColor.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { Input } from "../../input/Input";
+import { Popover } from "../../popover/Popover";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  options?: Record<string, unknown>;
+  status?: "error" | "warning";
+};
+
+const FALLBACK = "#000000";
+
+export function FieldColor({ field, options, status }: Props) {
+  const raw = typeof field.value === "string" ? field.value : field.value ? String(field.value) : "";
+  const hex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(raw) ? raw : FALLBACK;
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Popover
+        open={open}
+        onOpenChange={setOpen}
+        trigger="click"
+        placement="bottom"
+        content={
+          <div className="flex flex-col gap-2 p-1 min-w-[180px]">
+            <input
+              type="color"
+              value={hex}
+              onChange={(e) => field.onChange(e.target.value)}
+              className="h-24 w-full cursor-pointer border-0 bg-transparent p-0"
+              aria-label="Pick color"
+            />
+            <Input
+              value={raw || hex}
+              onChange={(e) => field.onChange(e.target.value)}
+              placeholder="#000000"
+              status={status}
+              className="font-mono text-sm"
+              {...(options as object)}
+            />
+          </div>
+        }
+      >
+        <button
+          type="button"
+          className="size-9 shrink-0 cursor-pointer rounded border border-input p-0"
+          style={{ backgroundColor: raw || hex }}
+          aria-label="Color picker"
+        />
+      </Popover>
+      <Input
+        className="flex-1 font-mono text-sm"
+        value={raw}
+        onChange={(e) => field.onChange(e.target.value)}
+        onBlur={field.onBlur}
+        placeholder="#000000"
+        status={status}
+      />
+    </div>
+  );
+}

package/src/form/variants/FieldDateTime.tsx

@@ -0,0 +1,25 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { DatePicker } from "../../datepicker/DatePicker";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  options?: Record<string, unknown>;
+  status?: "error" | "warning";
+};
+
+export function FieldDateTime({ field, options, status }: Props) {
+  const opts = options ?? {};
+  return (
+    <DatePicker
+      className="w-full"
+      value={(field.value as Date | string | null) ?? null}
+      onChange={(date) => field.onChange(date)}
+      placeholder={(opts.placeholder as string) ?? "Select date"}
+      status={status}
+      showTime={opts.showTime as boolean | undefined}
+      format={opts.format as string | undefined}
+      allowClear={opts.allowClear !== false}
+      disabled={opts.disabled as boolean | undefined}
+    />
+  );
+}

package/src/form/variants/FieldHidden.tsx

@@ -0,0 +1,9 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+};
+
+export function FieldHidden({ field }: Props) {
+  return <input type="hidden" name={field.name} value={field.value == null ? "" : String(field.value)} onChange={field.onChange} ref={field.ref} />;
+}

package/src/form/variants/FieldInput.tsx

@@ -0,0 +1,24 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { Input } from "../../input/Input";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  options?: Record<string, unknown>;
+  status?: "error" | "warning";
+};
+
+export function FieldInput({ field, options, status }: Props) {
+  const { value, onChange, onBlur, name, ref } = field;
+  return (
+    <Input
+      className="w-full"
+      name={name}
+      ref={ref}
+      onBlur={onBlur}
+      value={value == null ? "" : String(value)}
+      onChange={(e) => onChange(e.target.value)}
+      status={status}
+      {...(options as object)}
+    />
+  );
+}

package/src/form/variants/FieldNumber.tsx

@@ -0,0 +1,28 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { InputNumber } from "../../input/Input";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  options?: Record<string, unknown>;
+  status?: "error" | "warning";
+};
+
+export function FieldNumber({ field, options, status }: Props) {
+  const { value, onChange, onBlur, name, ref } = field;
+  const opts = options ?? {};
+  return (
+    <InputNumber
+      className="w-full"
+      name={name}
+      ref={ref}
+      onBlur={onBlur}
+      value={value == null || value === "" ? null : Number(value)}
+      onChange={(v) => onChange(v)}
+      status={status}
+      min={opts.min as number | undefined}
+      max={opts.max as number | undefined}
+      step={opts.step as number | undefined}
+      {...(opts as object)}
+    />
+  );
+}

package/src/form/variants/FieldObject.tsx

@@ -0,0 +1,29 @@
+import type { Control, FieldValues } from "react-hook-form";
+import { fieldNameOf } from "../common/rules";
+import type { TFormItemProps } from "../common/types";
+import { FormItem } from "../FormItem";
+
+type Props = {
+  control: Control<FieldValues>;
+  name: string | string[] | number[];
+  childItems?: TFormItemProps[];
+};
+
+export function FieldObject({ control, name, childItems }: Props) {
+  const prefix = fieldNameOf(name);
+  return (
+    <div className="grid grid-cols-12 gap-x-4">
+      {(childItems ?? []).map((child, index) => {
+        const childName = fieldNameOf(child.name);
+        return (
+          <FormItem
+            key={`${prefix}.${childName}-${index}`}
+            {...child}
+            name={`${prefix}.${childName}`}
+            control={control}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/form/variants/FieldRadio.tsx

@@ -0,0 +1,40 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import type { ISelectItemProps } from "../common/types";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  choices?: ISelectItemProps[];
+};
+
+export function FieldRadio({ field, choices }: Props) {
+  return (
+    <div className="flex flex-col gap-2" role="radiogroup">
+      {(choices ?? []).map((option) => {
+        const id = `${field.name}-${option.value}`;
+        const checked = String(field.value) === String(option.value);
+        return (
+          <label key={String(option.value)} htmlFor={id} className="inline-flex cursor-pointer items-center gap-2 text-sm text-foreground">
+            <span className="relative inline-flex size-4 shrink-0">
+              <input
+                id={id}
+                type="radio"
+                name={field.name}
+                value={String(option.value)}
+                checked={checked}
+                onChange={() => field.onChange(option.value)}
+                onBlur={field.onBlur}
+                className="peer absolute inset-0 z-1 m-0 size-4 cursor-pointer appearance-none rounded-full opacity-0"
+              />
+              <span
+                aria-hidden
+                className="pointer-events-none size-4 rounded-full border border-solid border-input bg-(--control-bg) peer-checked:border-brand"
+              />
+              <span aria-hidden className="pointer-events-none absolute inset-[3.5px] rounded-full bg-brand opacity-0 peer-checked:opacity-100" />
+            </span>
+            <span>{option.label}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+}

package/src/form/variants/FieldRepeater.tsx

@@ -0,0 +1,62 @@
+import type { Control, ControllerRenderProps, FieldValues } from "react-hook-form";
+import { useFieldArray } from "react-hook-form";
+import { Button } from "../../button/Button";
+import { fieldNameOf } from "../common/rules";
+import type { TFormItemProps } from "../common/types";
+import { FieldRepeaterItem } from "./FieldRepeaterItem";
+
+function PlusIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path d="M6 2.5V9.5M2.5 6H9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  name: string | string[] | number[];
+  control: Control<FieldValues>;
+  childItems?: TFormItemProps[];
+};
+
+export function FieldRepeater({ name, control, childItems }: Props) {
+  const arrayName = fieldNameOf(name);
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: arrayName,
+  });
+
+  const handleAdd = () => {
+    const defaults: Record<string, unknown> = {};
+    for (const child of childItems ?? []) {
+      const key = fieldNameOf(child.name);
+      if (child.defaultValue !== undefined) {
+        defaults[key] = child.defaultValue;
+      }
+    }
+    append(defaults);
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      {fields.map((item, index) => (
+        <FieldRepeaterItem
+          key={item.id}
+          index={index}
+          remove={remove}
+          namePrefix={`${arrayName}.${index}`}
+          childItems={childItems}
+          control={control}
+        />
+      ))}
+
+      <div className="relative flex flex-row items-center">
+        <div className="h-px w-4 bg-border" />
+        <Button type="default" htmlType="button" size="small" icon={<PlusIcon />} onClick={handleAdd}>
+          Add item
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/form/variants/FieldRepeaterItem.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import type { Control, FieldValues } from "react-hook-form";
+import { fieldNameOf } from "../common/rules";
+import type { TFormItemProps } from "../common/types";
+import { FormItem } from "../FormItem";
+
+type Props = {
+  index: number;
+  remove: (index: number) => void;
+  namePrefix: string;
+  childItems?: TFormItemProps[];
+  control: Control<FieldValues>;
+};
+
+export function FieldRepeaterItem({ index, remove, namePrefix, childItems, control }: Props) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className="relative">
+      <div className={`absolute bottom-0 left-0 border-l border-dashed border-border ${index === 0 ? "top-0" : "top-[-20px]"}`} />
+
+      <div className="flex items-center gap-2">
+        <div className="flex flex-1 items-center gap-2">
+          <div className="h-px w-4 bg-border" />
+          <button
+            type="button"
+            aria-label={collapsed ? "Expand item" : "Collapse item"}
+            className="inline-flex size-4 items-center justify-center rounded-[3px] border-0 bg-muted text-muted-foreground cursor-pointer p-0"
+            onClick={() => setCollapsed((v) => !v)}
+          >
+            <svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden className={collapsed ? "-rotate-90" : undefined}>
+              <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+          </button>
+          <span className="text-sm font-medium text-foreground">{`Item ${index + 1}`}</span>
+        </div>
+        <button
+          type="button"
+          aria-label="Remove item"
+          className="inline-flex size-5 items-center justify-center rounded border-0 bg-muted text-muted-foreground cursor-pointer hover:bg-destructive hover:text-[var(--destructive-foreground)]"
+          onClick={() => remove(index)}
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
+            <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          </svg>
+        </button>
+      </div>
+
+      <div className={`mt-2 grid grid-cols-12 gap-x-4 overflow-hidden pl-8 ${collapsed ? "max-h-0" : ""}`}>
+        {(childItems ?? []).map((child, childIndex) => {
+          const childName = fieldNameOf(child.name);
+          return (
+            <FormItem
+              key={`${namePrefix}.${childName}-${childIndex}`}
+              {...child}
+              name={`${namePrefix}.${childName}`}
+              control={control}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/form/variants/FieldSelect.tsx

@@ -0,0 +1,27 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { Select } from "../../select/Select";
+import type { ISelectItemProps } from "../common/types";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  choices?: ISelectItemProps[];
+  options?: Record<string, unknown>;
+  status?: "error" | "warning";
+};
+
+export function FieldSelect({ field, choices, options, status }: Props) {
+  const opts = options ?? {};
+  return (
+    <Select
+      className="w-full"
+      value={field.value == null || field.value === "" ? null : (field.value as string | number)}
+      onChange={(v) => field.onChange(v)}
+      placeholder={(opts.placeholder as string) ?? "Select..."}
+      disabled={opts.disabled as boolean | undefined}
+      showSearch={opts.searchable === true}
+      allowClear={opts.allowClear as boolean | undefined}
+      status={status}
+      options={(choices ?? []).map((c) => ({ label: c.label, value: c.value }))}
+    />
+  );
+}

package/src/form/variants/FieldSelectMultiple.tsx

@@ -0,0 +1,32 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { Checkbox } from "../../checkbox/Checkbox";
+import type { ISelectItemProps } from "../common/types";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  choices?: ISelectItemProps[];
+};
+
+export function FieldSelectMultiple({ field, choices }: Props) {
+  const value: Array<string | number> = Array.isArray(field.value) ? field.value : [];
+
+  return (
+    <div className="flex flex-col gap-2">
+      {(choices ?? []).map((item) => (
+        <Checkbox
+          key={String(item.value)}
+          checked={value.includes(item.value)}
+          onChange={(checked) => {
+            if (checked) {
+              field.onChange([...value, item.value]);
+            } else {
+              field.onChange(value.filter((v) => v !== item.value));
+            }
+          }}
+        >
+          {item.label}
+        </Checkbox>
+      ))}
+    </div>
+  );
+}