@godxjp/ui 5.0.2 → 6.0.0

package/src/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "../data-display/card";

package/src/components/ui/checkbox.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/checkbox";

package/src/components/ui/color-picker.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/color-picker";

package/src/components/ui/command.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/command";

package/src/components/ui/date-picker.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/date-picker";

package/src/components/ui/date-range-picker.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/date-range-picker";

package/src/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * from "../feedback/dialog";

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1 @@
+export * from "../navigation/dropdown-menu";

package/src/components/ui/index.tsx

@@ -0,0 +1,31 @@
+export * from "./alert";
+export * from "./alert-dialog";
+export * from "./autocomplete";
+export * from "./badge";
+export * from "./button";
+export * from "./calendar";
+export * from "./card";
+export * from "./checkbox";
+export * from "./color-picker";
+export * from "./command";
+export * from "./date-picker";
+export * from "./date-range-picker";
+export * from "./dialog";
+export * from "./dropdown-menu";
+export * from "./input";
+export * from "./label";
+export * from "./pagination";
+export * from "./popover";
+export * from "./radio";
+export * from "./scroll-area";
+export * from "./select";
+export * from "./sheet";
+export * from "./slider";
+export * from "./sonner";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./tabs-items";
+export * from "./textarea";
+export * from "./time-picker";
+export * from "./upload";

package/src/components/ui/input.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/input";

package/src/components/ui/label.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/label";

package/src/components/ui/pagination.tsx

@@ -0,0 +1 @@
+export * from "../navigation/pagination";

package/src/components/ui/popover.tsx

@@ -0,0 +1 @@
+export * from "../data-display/popover";

package/src/components/ui/radio.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/radio";

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1 @@
+export * from "../data-display/scroll-area";

package/src/components/ui/select.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/select";

package/src/components/ui/sheet.tsx

@@ -0,0 +1 @@
+export * from "../feedback/sheet";

package/src/components/ui/slider.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/slider";

package/src/components/ui/sonner.tsx

@@ -0,0 +1 @@
+export * from "../feedback/sonner";

package/src/components/ui/switch.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/switch";

package/src/components/ui/table.tsx

@@ -0,0 +1 @@
+export * from "../data-display/table";

package/src/components/ui/tabs-items.tsx

@@ -0,0 +1 @@
+export * from "../navigation/tabs-items";

package/src/components/ui/tabs.tsx

@@ -0,0 +1 @@
+export * from "../navigation/tabs";

package/src/components/ui/textarea.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/textarea";

package/src/components/ui/time-picker.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/time-picker";

package/src/components/ui/upload.tsx

@@ -0,0 +1 @@
+export * from "../data-entry/upload";

package/src/form/__tests__/use-zod-form.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it, vi } from "vitest";
+import { z } from "zod";
+import { act, renderHook } from "@testing-library/react";
+import { renderWithUi, screen, userEvent, waitFor } from "@/test/render";
+import { useZodForm } from "../use-zod-form";
+import { FormRoot } from "../form-root";
+import { FormFieldControl } from "../form-field-control";
+import { Input } from "../../components/data-entry/input";
+import { Button } from "../../components/general/button";
+
+const schema = z.object({
+  email: z.string().email("Email không hợp lệ"),
+  name: z.string().min(1, "Bắt buộc"),
+});
+
+function TestForm({ onSubmit }: { onSubmit: (v: z.infer<typeof schema>) => void }) {
+  const form = useZodForm(schema, { defaultValues: { email: "", name: "" } });
+  return (
+    <FormRoot form={form} onSubmit={onSubmit}>
+      <FormFieldControl name="name" label="Name" required>
+        {(field) => <Input {...field} value={typeof field.value === "string" ? field.value : ""} />}
+      </FormFieldControl>
+      <FormFieldControl name="email" label="Email" required>
+        {(field) => (
+          <Input
+            {...field}
+            type="email"
+            value={typeof field.value === "string" ? field.value : ""}
+          />
+        )}
+      </FormFieldControl>
+      <Button type="submit">Submit</Button>
+    </FormRoot>
+  );
+}
+
+describe("useZodForm + FormRoot + FormFieldControl", () => {
+  it("useZodForm handleSubmit invokes callback with valid data", async () => {
+    const onSubmit = vi.fn();
+    const { result } = renderHook(() =>
+      useZodForm(schema, { defaultValues: { name: "", email: "" } }),
+    );
+
+    await act(async () => {
+      result.current.setValue("name", "Bao");
+      result.current.setValue("email", "dev@example.com");
+      await result.current.handleSubmit(onSubmit)();
+    });
+
+    expect(onSubmit.mock.calls[0]?.[0]).toEqual({
+      name: "Bao",
+      email: "dev@example.com",
+    });
+  });
+
+  it("blocks submit and shows Zod validation errors", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    renderWithUi(<TestForm onSubmit={onSubmit} />);
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => {
+      expect(screen.getAllByRole("alert").length).toBeGreaterThan(0);
+    });
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("FormRoot submits with registered inputs after user typing", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+
+    function SimpleForm() {
+      const form = useZodForm(schema, { defaultValues: { name: "", email: "" } });
+      const { register } = form;
+      return (
+        <FormRoot form={form} onSubmit={onSubmit}>
+          <input aria-label="name" {...register("name")} />
+          <input aria-label="email" type="email" {...register("email")} />
+          <Button type="submit">Submit</Button>
+        </FormRoot>
+      );
+    }
+
+    renderWithUi(<SimpleForm />);
+    await user.type(screen.getByLabelText("name"), "Bao");
+    await user.type(screen.getByLabelText("email"), "dev@example.com");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith({
+        name: "Bao",
+        email: "dev@example.com",
+      });
+    });
+  });
+});

package/src/form/form-field-control.tsx

@@ -0,0 +1,44 @@
+import type { Ref } from "react";
+import { Controller, useFormContext, type FieldValues } from "react-hook-form";
+
+import { FormField } from "../components/data-entry/form-field";
+import type { FormFieldControlProp } from "../props/components/form.prop";
+
+export type { FormFieldControlProp } from "../props/components/form.prop";
+
+export function FormFieldControl<TFieldValues extends FieldValues>({
+  name,
+  label,
+  required,
+  helper,
+  className,
+  children,
+}: FormFieldControlProp<TFieldValues>) {
+  const { control } = useFormContext<TFieldValues>();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState }) => (
+        <FormField
+          id={String(name)}
+          label={label}
+          required={required}
+          helper={helper}
+          error={fieldState.error?.message}
+          className={className}
+        >
+          {children({
+            id: String(name),
+            name: field.name,
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            ref: field.ref as Ref<HTMLInputElement>,
+          })}
+        </FormField>
+      )}
+    />
+  );
+}

package/src/form/form-root.tsx

@@ -0,0 +1,29 @@
+import { FormProvider, type FieldValues } from "react-hook-form";
+
+import { cn } from "../lib/utils";
+import type { FormRootProp } from "../props/components/form.prop";
+
+export type { FormRootProp } from "../props/components/form.prop";
+
+export function FormRoot<TFieldValues extends FieldValues>({
+  form,
+  onSubmit,
+  children,
+  className,
+  id,
+}: FormRootProp<TFieldValues>) {
+  return (
+    <FormProvider {...form}>
+      <form
+        id={id}
+        className={cn("ui-stack-md", className)}
+        onSubmit={(event) => {
+          void form.handleSubmit((values) => onSubmit(values))(event);
+        }}
+        noValidate
+      >
+        {children}
+      </form>
+    </FormProvider>
+  );
+}

package/src/form/index.ts

@@ -0,0 +1,7 @@
+export { useZodForm } from "./use-zod-form";
+export type { UseZodFormOptionsProp, UseZodFormReturnProp } from "./use-zod-form";
+export { FormRoot } from "./form-root";
+export type { FormRootProp } from "./form-root";
+export { FormFieldControl } from "./form-field-control";
+export type { FormFieldControlProp } from "./form-field-control";
+export type { ZodSchemaProp, FieldErrorMessageProp } from "../props/components/form.prop";

package/src/form/use-zod-form.ts

@@ -0,0 +1,29 @@
+/**
+ * Mandatory form hook — wraps react-hook-form + @hookform/resolvers/zod (Zod 4).
+ */
+import {
+  useForm,
+  type DefaultValues,
+  type FieldValues,
+  type Resolver,
+  type UseFormReturn,
+} from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { z } from "zod";
+
+import type { UseZodFormOptionsProp } from "../props/components/form.prop";
+
+export type { UseZodFormOptionsProp, UseZodFormReturnProp } from "../props/components/form.prop";
+
+export function useZodForm<TFieldValues extends FieldValues>(
+  schema: z.ZodType<TFieldValues, FieldValues>,
+  options?: Omit<UseZodFormOptionsProp<TFieldValues>, "defaultValues"> & {
+    defaultValues?: DefaultValues<TFieldValues>;
+  },
+): UseFormReturn<TFieldValues> {
+  return useForm<TFieldValues>({
+    ...options,
+    // zodResolver + Zod 4 inference gap — runtime types are correct.
+    resolver: zodResolver(schema) as Resolver<TFieldValues>,
+  }) as UseFormReturn<TFieldValues>;
+}

package/src/i18n/__tests__/translate.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { translate, translateCurrent, resetI18nLocale, syncI18nLocale } from "../translate";
+
+describe("i18n translate", () => {
+  it("returns primary locale message", () => {
+    expect(translate("vi", "en", "common.cancel")).toBe("Hủy");
+    expect(translate("en", "vi", "common.cancel")).toBe("Cancel");
+  });
+
+  it("falls back when key missing in primary", () => {
+    expect(translate("vi", "en", "nonexistent.key")).toBe("nonexistent.key");
+  });
+
+  it("interpolates params", () => {
+    expect(translate("en", "vi", "common.selectedCount", { count: 3 })).toBe("3 selected");
+  });
+
+  it("syncI18nLocale drives translateCurrent", () => {
+    resetI18nLocale();
+    syncI18nLocale("ja", "en");
+    expect(translateCurrent("common.retry")).toBe("再試行");
+  });
+});

package/src/i18n/index.ts

@@ -0,0 +1,9 @@
+export {
+  translate,
+  translateCurrent,
+  syncI18nLocale,
+  resetI18nLocale,
+  MESSAGE_CATALOG,
+} from "./translate";
+export type { Messages, MessageKey, TranslateParams } from "./translate";
+export { useTranslation, usePickerLocales } from "./use-translation";

package/src/i18n/messages/en.json

@@ -0,0 +1,171 @@
+{
+  "common": {
+    "cancel": "Cancel",
+    "continue": "Continue",
+    "delete": "Delete",
+    "error": "Something went wrong",
+    "working": "Working…",
+    "retry": "Retry",
+    "search": "Search",
+    "clearSearch": "Clear search",
+    "clearFilters": "Clear filters",
+    "first": "First",
+    "next": "Next →",
+    "selectedCount": "{count} selected",
+    "typeToConfirm": "Type {phrase} to confirm"
+  },
+  "dataEntry": {
+    "datePicker": {
+      "placeholder": "Select date"
+    },
+    "dateRangePicker": {
+      "placeholder": "Select date range"
+    },
+    "timePicker": {
+      "placeholder": "Select time",
+      "hour": "Hour",
+      "minute": "Minute",
+      "typeLabel": "Type time HH:mm"
+    },
+    "searchInput": {
+      "placeholder": "Search…"
+    },
+    "autocomplete": {
+      "placeholder": "Search or select…",
+      "empty": "No results found"
+    },
+    "colorPicker": {
+      "ariaLabel": "Pick color"
+    },
+    "upload": {
+      "dropzoneLabel": "Upload files",
+      "dropzoneHint": "Drag and drop files here, or click to browse",
+      "dropzoneMeta": "Uploads go to temp storage — promote on form save",
+      "buttonLabel": "Choose file",
+      "addImage": "Add image",
+      "uploading": "Uploading…",
+      "pendingReplace": "New image",
+      "pendingReplaceHint": "New image staged — save form to apply",
+      "avatarLabel": "Profile photo",
+      "change": "Change",
+      "removeAvatar": "Remove photo",
+      "markedForDelete": "Photo will be removed when you save",
+      "undo": "Undo",
+      "cropTitle": "Crop photo",
+      "cropZoom": "Zoom",
+      "cropConfirm": "Use photo"
+    },
+    "cascader": {
+      "placeholder": "Select…",
+      "searchPlaceholder": "Search…",
+      "empty": "No results"
+    },
+    "treeSelect": {
+      "placeholder": "Select…",
+      "searchPlaceholder": "Search…",
+      "empty": "No data",
+      "expand": "Expand",
+      "collapse": "Collapse"
+    },
+    "transfer": {
+      "source": "Source",
+      "target": "Target",
+      "searchPlaceholder": "Search…",
+      "empty": "No data",
+      "moveRight": "Move to target",
+      "moveLeft": "Move to source"
+    }
+  },
+  "feedback": {
+    "errorPanel": {
+      "title": "Couldn't load this section"
+    },
+    "genericError": "Something went wrong. Please retry."
+  },
+  "navigation": {
+    "localePicker": {
+      "ariaLabel": "Language"
+    },
+    "timezonePicker": {
+      "ariaLabel": "Timezone"
+    },
+    "timeFormatPicker": {
+      "ariaLabel": "Time format"
+    },
+    "dateFormatPicker": {
+      "ariaLabel": "Date format"
+    },
+    "pagination": {
+      "ariaLabel": "Pagination",
+      "prev": "Previous page",
+      "next": "Next page",
+      "page": "Page {page}",
+      "pageSize": "Page size",
+      "pageSizeOption": "{size} / page",
+      "total": "Total {total} items"
+    }
+  },
+  "locale": {
+    "vi": "Tiếng Việt",
+    "en": "English",
+    "ja": "日本語"
+  },
+  "timeFormat": {
+    "24h": "24-hour",
+    "12h": "12-hour (AM/PM)"
+  },
+  "dateFormat": {
+    "iso": "ISO (yyyy-MM-dd)",
+    "dmy": "Day / Month / Year",
+    "mdy": "Month / Day / Year"
+  },
+  "timezone": {
+    "Asia/Ho_Chi_Minh": "Vietnam (Ho Chi Minh)",
+    "Asia/Tokyo": "Japan (Tokyo)",
+    "Asia/Bangkok": "Thailand (Bangkok)",
+    "Asia/Singapore": "Singapore",
+    "Asia/Seoul": "Korea (Seoul)",
+    "Asia/Shanghai": "China (Shanghai)",
+    "Asia/Taipei": "Taiwan (Taipei)",
+    "Asia/Hong_Kong": "Hong Kong",
+    "UTC": "UTC",
+    "Europe/London": "UK (London)",
+    "America/Los_Angeles": "US (Los Angeles)",
+    "America/New_York": "US (New York)"
+  },
+  "dataTable": {
+    "selectAll": "Select all rows",
+    "selectRow": "Select row {id}",
+    "bulkActions": "Bulk actions",
+    "densityCompact": "Compact",
+    "densityComfortable": "Comfortable",
+    "densitySwitch": "Switch to {density} density",
+    "rowActions": "Row actions"
+  },
+  "status": {
+    "active": "Active",
+    "completed": "Completed",
+    "delivered": "Delivered",
+    "done": "Done",
+    "permanent": "Permanent",
+    "succeeded": "Succeeded",
+    "draft": "Draft",
+    "pending": "Pending",
+    "scheduled": "Scheduled",
+    "sending": "Sending",
+    "temporary": "Temporary",
+    "bounced": "Bounced",
+    "cancelled": "Cancelled",
+    "deleted": "Deleted",
+    "failed": "Failed",
+    "private": "Private",
+    "internal": "Internal",
+    "public": "Public",
+    "ASSIGNMENT_STATUS_ACTIVE": "Active",
+    "ASSIGNMENT_STATUS_SUSPENDED": "Suspended",
+    "ASSIGNMENT_STATUS_TERMINATED": "Terminated"
+  },
+  "query": {
+    "loadMore": "Load more"
+  }
+}