azamat-ui-kit-cli 0.2.2

package/vendor/src/components/patterns/form-builder.tsx

@@ -0,0 +1,334 @@
+import * as React from "react"
+import type { Control, FieldPath, FieldValues } from "react-hook-form"
+
+import { Button } from "@/components/ui/button"
+import { FormInput, type FormInputProps } from "@/components/form/form-input"
+import { FormTextarea, type FormTextareaProps } from "@/components/form/form-textarea"
+import { FormSelect, type FormSelectProps } from "@/components/form/form-select"
+import { FormAsyncSelect, type FormAsyncSelectProps } from "@/components/form/form-async-select"
+import { FormSwitch, type FormSwitchProps } from "@/components/form/form-switch"
+import { FormNumberInput, type FormNumberInputProps } from "@/components/form/form-number-input"
+import { FormPhoneInput, type FormPhoneInputProps } from "@/components/form/form-phone-input"
+import { FormDateInput, type FormDateInputProps } from "@/components/form/form-date-input"
+import {
+  FormDateRangeInput,
+  type FormDateRangeInputProps,
+} from "@/components/form/form-date-range-input"
+import { cn } from "@/lib/utils"
+
+export type FormBuilderLayout = "grid" | "stack"
+export type FormBuilderDensity = "compact" | "default" | "comfortable"
+
+export type FormBuilderFieldRenderContext<TFieldValues extends FieldValues> = {
+  control: Control<TFieldValues>
+  disabled?: boolean
+  readOnly?: boolean
+}
+
+type BaseFormBuilderField = {
+  id: string
+  hidden?: boolean
+  className?: string
+  colSpan?: 1 | 2 | 3 | 4 | "full"
+}
+
+export type FormBuilderCustomField<TFieldValues extends FieldValues> = BaseFormBuilderField & {
+  type: "custom"
+  render: (context: FormBuilderFieldRenderContext<TFieldValues>) => React.ReactNode
+}
+
+export type FormBuilderInputField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "input"
+  props: Omit<FormInputProps<TFieldValues, TName>, "control">
+}
+
+export type FormBuilderTextareaField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "textarea"
+  props: Omit<FormTextareaProps<TFieldValues, TName>, "control">
+}
+
+export type FormBuilderSelectField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "select"
+  props: Omit<FormSelectProps<TFieldValues, TName>, "control">
+}
+
+export type FormBuilderAsyncSelectField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "async-select"
+  props: Omit<FormAsyncSelectProps<TFieldValues, TName>, "control">
+}
+
+export type FormBuilderSwitchField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "switch"
+  props: Omit<FormSwitchProps<TFieldValues, TName>, "control">
+}
+
+export type FormBuilderNumberField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "number"
+  props: Omit<FormNumberInputProps<TFieldValues, TName>, "control">
+}
+
+export type FormBuilderPhoneField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "phone"
+  props: Omit<FormPhoneInputProps<TFieldValues, TName>, "control">
+}
+
+export type FormBuilderDateField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "date"
+  props: Omit<FormDateInputProps<TFieldValues, TName>, "control">
+}
+
+export type FormBuilderDateRangeField<
+  TFieldValues extends FieldValues,
+  TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseFormBuilderField & {
+  type: "date-range"
+  props: Omit<FormDateRangeInputProps<TFieldValues, TFromName, TToName>, "control">
+}
+
+export type FormBuilderField<TFieldValues extends FieldValues> =
+  | FormBuilderCustomField<TFieldValues>
+  | FormBuilderInputField<TFieldValues>
+  | FormBuilderTextareaField<TFieldValues>
+  | FormBuilderSelectField<TFieldValues>
+  | FormBuilderAsyncSelectField<TFieldValues>
+  | FormBuilderSwitchField<TFieldValues>
+  | FormBuilderNumberField<TFieldValues>
+  | FormBuilderPhoneField<TFieldValues>
+  | FormBuilderDateField<TFieldValues>
+  | FormBuilderDateRangeField<TFieldValues>
+
+export type FormBuilderSection<TFieldValues extends FieldValues> = {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  hidden?: boolean
+  className?: string
+  fields: FormBuilderField<TFieldValues>[]
+}
+
+export type FormBuilderProps<TFieldValues extends FieldValues> = Omit<
+  React.ComponentProps<"form">,
+  "children"
+> & {
+  control: Control<TFieldValues>
+  fields?: FormBuilderField<TFieldValues>[]
+  sections?: FormBuilderSection<TFieldValues>[]
+  layout?: FormBuilderLayout
+  density?: FormBuilderDensity
+  columns?: 1 | 2 | 3 | 4
+  disabled?: boolean
+  readOnly?: boolean
+  footer?: React.ReactNode
+  submitLabel?: React.ReactNode
+  resetLabel?: React.ReactNode
+  onResetClick?: () => void
+  isSubmitting?: boolean
+  sectionClassName?: string
+  fieldClassName?: string
+  footerClassName?: string
+}
+
+const densityClassName: Record<FormBuilderDensity, string> = {
+  compact: "gap-3",
+  default: "gap-4",
+  comfortable: "gap-6",
+}
+
+const columnsClassName: Record<1 | 2 | 3 | 4, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
+  4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4",
+}
+
+const colSpanClassName: Record<NonNullable<BaseFormBuilderField["colSpan"]>, string> = {
+  1: "col-span-1",
+  2: "md:col-span-2",
+  3: "xl:col-span-3",
+  4: "xl:col-span-4",
+  full: "col-span-full",
+}
+
+function renderFormBuilderField<TFieldValues extends FieldValues>(
+  field: FormBuilderField<TFieldValues>,
+  context: FormBuilderFieldRenderContext<TFieldValues>
+) {
+  const FormInputComponent = FormInput as unknown as React.ComponentType<Record<string, unknown>>
+  const FormSelectComponent = FormSelect as unknown as React.ComponentType<Record<string, unknown>>
+
+  switch (field.type) {
+    case "custom":
+      return field.render(context)
+    case "input":
+      return React.createElement(FormInputComponent, {
+        control: context.control,
+        disabled: context.disabled,
+        readOnly: context.readOnly,
+        ...(field.props as Omit<FormInputProps<TFieldValues, FieldPath<TFieldValues>>, "control">),
+      })
+    case "textarea":
+      return <FormTextarea control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
+    case "select":
+      return React.createElement(FormSelectComponent, {
+        control: context.control,
+        disabled: context.disabled,
+        ...(field.props as Omit<FormSelectProps<TFieldValues, FieldPath<TFieldValues>>, "control">),
+      })
+    case "async-select":
+      return <FormAsyncSelect control={context.control} disabled={context.disabled} {...field.props} />
+    case "switch":
+      return <FormSwitch control={context.control} disabled={context.disabled} {...field.props} />
+    case "number":
+      return <FormNumberInput control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
+    case "phone":
+      return <FormPhoneInput control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
+    case "date":
+      return <FormDateInput control={context.control} disabled={context.disabled} readOnly={context.readOnly} {...field.props} />
+    case "date-range":
+      return (
+        <FormDateRangeInput
+          control={context.control}
+          fromInputProps={{ disabled: context.disabled, readOnly: context.readOnly }}
+          toInputProps={{ disabled: context.disabled, readOnly: context.readOnly }}
+          {...field.props}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+function normalizeSections<TFieldValues extends FieldValues>({
+  fields,
+  sections,
+}: Pick<FormBuilderProps<TFieldValues>, "fields" | "sections">): FormBuilderSection<TFieldValues>[] {
+  if (sections?.length) return sections
+  return [{ id: "default", fields: fields ?? [] }]
+}
+
+function FormBuilder<TFieldValues extends FieldValues>({
+  className,
+  control,
+  fields,
+  sections,
+  layout = "grid",
+  density = "default",
+  columns = 2,
+  disabled,
+  readOnly,
+  footer,
+  submitLabel,
+  resetLabel,
+  onResetClick,
+  isSubmitting,
+  sectionClassName,
+  fieldClassName,
+  footerClassName,
+  ...props
+}: FormBuilderProps<TFieldValues>) {
+  const normalizedSections = normalizeSections({ fields, sections })
+  const context = React.useMemo(
+    () => ({ control, disabled, readOnly }),
+    [control, disabled, readOnly]
+  )
+
+  return (
+    <form data-slot="form-builder" className={cn("grid", densityClassName[density], className)} {...props}>
+      {normalizedSections
+        .filter((section) => !section.hidden)
+        .map((section) => (
+          <section
+            key={section.id}
+            data-slot="form-builder-section"
+            className={cn("grid gap-4", section.className, sectionClassName)}
+          >
+            {(section.title || section.description || section.actions) && (
+              <div
+                data-slot="form-builder-section-header"
+                className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
+              >
+                <div className="min-w-0 space-y-1">
+                  {section.title && <h2 className="text-base font-semibold leading-none tracking-tight">{section.title}</h2>}
+                  {section.description && <p className="text-sm text-muted-foreground">{section.description}</p>}
+                </div>
+                {section.actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{section.actions}</div>}
+              </div>
+            )}
+
+            <div
+              data-slot="form-builder-fields"
+              data-layout={layout}
+              className={cn(
+                "grid",
+                densityClassName[density],
+                layout === "grid" ? columnsClassName[columns] : "grid-cols-1"
+              )}
+            >
+              {section.fields
+                .filter((field) => !field.hidden)
+                .map((field) => (
+                  <div
+                    key={field.id}
+                    data-slot="form-builder-field"
+                    className={cn(
+                      field.colSpan && colSpanClassName[field.colSpan],
+                      field.className,
+                      fieldClassName
+                    )}
+                  >
+                    {renderFormBuilderField(field, context)}
+                  </div>
+                ))}
+            </div>
+          </section>
+        ))}
+
+      {(footer || submitLabel || resetLabel) && (
+        <div data-slot="form-builder-footer" className={cn("flex flex-wrap items-center justify-end gap-2", footerClassName)}>
+          {footer ?? (
+            <>
+              {resetLabel && (
+                <Button type="button" variant="outline" disabled={disabled || isSubmitting} onClick={onResetClick}>
+                  {resetLabel}
+                </Button>
+              )}
+              {submitLabel && (
+                <Button type="submit" disabled={disabled || isSubmitting}>
+                  {submitLabel}
+                </Button>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </form>
+  )
+}
+
+export { FormBuilder, renderFormBuilderField }

package/vendor/src/components/patterns/index.ts

@@ -0,0 +1,12 @@
+export * from './resource-page'
+export * from './resource-detail-page'
+export * from './form-builder'
+export * from './form-builder-presets'
+export * from './settings-section'
+export * from './action-system'
+export * from './status-system'
+export * from './filter-builder'
+export * from './data-view'
+export * from './entity-details'
+export * from './resource-system'
+export * from './crud-system'

package/vendor/src/components/patterns/public.ts

@@ -0,0 +1,4 @@
+export * from "./resource-page"
+export * from "./resource-detail-page"
+export * from "./form-builder"
+export * from "./form-builder-presets"

package/vendor/src/components/patterns/resource-detail-page.tsx

@@ -0,0 +1,160 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { DescriptionList, type DescriptionListItem } from "@/components/display/description-list"
+import { PageHeader, type PageHeaderProps } from "@/components/layout/page-header"
+import { cn } from "@/lib/utils"
+
+export type ResourceDetailPageDensity = "default" | "compact" | "comfortable"
+
+export type ResourceDetailPageSection = {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  hidden?: boolean
+  className?: string
+  bodyClassName?: string
+  items?: DescriptionListItem[]
+  children?: React.ReactNode
+}
+
+export type ResourceDetailPageProps = Omit<React.ComponentProps<"div">, "children"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  eyebrow?: React.ReactNode
+  actions?: React.ReactNode
+  breadcrumbs?: React.ReactNode
+  status?: React.ReactNode
+  summary?: React.ReactNode
+  meta?: React.ReactNode
+  sections?: ResourceDetailPageSection[]
+  children?: React.ReactNode
+  aside?: React.ReactNode
+  footer?: React.ReactNode
+  backLabel?: React.ReactNode
+  onBack?: () => void
+  headerProps?: Omit<PageHeaderProps, "title" | "description" | "actions" | "eyebrow">
+  density?: ResourceDetailPageDensity
+  pageHeaderClassName?: string
+  contentClassName?: string
+  asideClassName?: string
+  sectionClassName?: string
+}
+
+const densityClassName: Record<ResourceDetailPageDensity, string> = {
+  compact: "gap-3",
+  default: "gap-4",
+  comfortable: "gap-6",
+}
+
+function ResourceDetailPage({
+  className,
+  title,
+  description,
+  eyebrow,
+  actions,
+  breadcrumbs,
+  status,
+  summary,
+  meta,
+  sections,
+  children,
+  aside,
+  footer,
+  backLabel = "Back",
+  onBack,
+  headerProps,
+  density = "default",
+  pageHeaderClassName,
+  contentClassName,
+  asideClassName,
+  sectionClassName,
+  ...props
+}: ResourceDetailPageProps) {
+  const visibleSections = sections?.filter((section) => !section.hidden) ?? []
+  const hasHeader = Boolean(title || description || eyebrow || actions || onBack)
+
+  return (
+    <div
+      data-slot="resource-detail-page"
+      data-density={density}
+      className={cn("grid min-w-0", densityClassName[density], className)}
+      {...props}
+    >
+      {breadcrumbs && <div data-slot="resource-detail-page-breadcrumbs">{breadcrumbs}</div>}
+
+      {hasHeader && (
+        <PageHeader
+          data-slot="resource-detail-page-header"
+          eyebrow={eyebrow}
+          title={title}
+          description={description}
+          actions={
+            <>
+              {onBack && (
+                <Button type="button" variant="outline" onClick={onBack}>
+                  {backLabel}
+                </Button>
+              )}
+              {actions}
+            </>
+          }
+          className={pageHeaderClassName}
+          {...headerProps}
+        />
+      )}
+
+      {(status || summary || meta) && (
+        <div data-slot="resource-detail-page-summary" className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto]">
+          <div className="grid min-w-0 gap-3">
+            {status && <div data-slot="resource-detail-page-status">{status}</div>}
+            {summary && <div data-slot="resource-detail-page-summary-content">{summary}</div>}
+          </div>
+          {meta && <div data-slot="resource-detail-page-meta" className="min-w-0 lg:w-80">{meta}</div>}
+        </div>
+      )}
+
+      <div
+        data-slot="resource-detail-page-content"
+        className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+      >
+        <div data-slot="resource-detail-page-main" className="grid min-w-0 gap-4">
+          {children}
+
+          {visibleSections.map((section) => (
+            <section
+              key={section.id}
+              data-slot="resource-detail-page-section"
+              className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", section.className, sectionClassName)}
+            >
+              {(section.title || section.description || section.actions) && (
+                <div className="flex flex-col gap-3 border-b p-4 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="min-w-0 space-y-1">
+                    {section.title && <h2 className="text-base font-semibold leading-none tracking-tight">{section.title}</h2>}
+                    {section.description && <p className="text-sm text-muted-foreground">{section.description}</p>}
+                  </div>
+                  {section.actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{section.actions}</div>}
+                </div>
+              )}
+
+              <div className={cn("p-4", section.bodyClassName)}>
+                {section.children ?? (section.items ? <DescriptionList items={section.items} /> : null)}
+              </div>
+            </section>
+          ))}
+        </div>
+
+        {aside && (
+          <aside data-slot="resource-detail-page-aside" className={cn("min-w-0", asideClassName)}>
+            {aside}
+          </aside>
+        )}
+      </div>
+
+      {footer && <div data-slot="resource-detail-page-footer">{footer}</div>}
+    </div>
+  )
+}
+
+export { ResourceDetailPage }

package/vendor/src/components/patterns/resource-page.tsx

@@ -0,0 +1,159 @@
+import * as React from "react"
+
+import { DataTable, type DataTableProps } from "@/components/data-table/data-table"
+import { PageHeader, type PageHeaderProps } from "@/components/layout/page-header"
+import { cn } from "@/lib/utils"
+
+export type ResourcePageDensity = "default" | "compact" | "comfortable"
+
+export type ResourcePageSectionProps = React.ComponentProps<"section"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  headerClassName?: string
+  bodyClassName?: string
+}
+
+function ResourcePageSection({
+  className,
+  title,
+  description,
+  actions,
+  headerClassName,
+  bodyClassName,
+  children,
+  ...props
+}: ResourcePageSectionProps) {
+  return (
+    <section
+      data-slot="resource-page-section"
+      className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    >
+      {(title || description || actions) && (
+        <div
+          data-slot="resource-page-section-header"
+          className={cn("flex flex-col gap-3 border-b p-4 sm:flex-row sm:items-start sm:justify-between", headerClassName)}
+        >
+          <div className="min-w-0 space-y-1">
+            {title && <h2 className="text-base font-semibold leading-none tracking-tight">{title}</h2>}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+          </div>
+          {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+        </div>
+      )}
+
+      <div data-slot="resource-page-section-body" className={cn("p-4", bodyClassName)}>
+        {children}
+      </div>
+    </section>
+  )
+}
+
+export type ResourcePageProps<TData, TValue = unknown> = Omit<React.ComponentProps<"div">, "children"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  eyebrow?: React.ReactNode
+  actions?: React.ReactNode
+  breadcrumbs?: React.ReactNode
+  stats?: React.ReactNode
+  filters?: React.ReactNode
+  tabs?: React.ReactNode
+  table?: DataTableProps<TData, TValue>
+  children?: React.ReactNode
+  aside?: React.ReactNode
+  footer?: React.ReactNode
+  headerProps?: Omit<PageHeaderProps, "title" | "description" | "actions" | "eyebrow">
+  density?: ResourcePageDensity
+  pageHeaderClassName?: string
+  toolbarClassName?: string
+  contentClassName?: string
+  asideClassName?: string
+}
+
+const densityClassName: Record<ResourcePageDensity, string> = {
+  compact: "gap-3",
+  default: "gap-4",
+  comfortable: "gap-6",
+}
+
+function ResourcePage<TData, TValue = unknown>({
+  className,
+  title,
+  description,
+  eyebrow,
+  actions,
+  breadcrumbs,
+  stats,
+  filters,
+  tabs,
+  table,
+  children,
+  aside,
+  footer,
+  headerProps,
+  density = "default",
+  pageHeaderClassName,
+  toolbarClassName,
+  contentClassName,
+  asideClassName,
+  ...props
+}: ResourcePageProps<TData, TValue>) {
+  const hasHeader = Boolean(title || description || eyebrow || actions)
+  const hasToolbar = Boolean(breadcrumbs || filters || tabs)
+  const hasMainContent = Boolean(children || table)
+
+  return (
+    <div
+      data-slot="resource-page"
+      data-density={density}
+      className={cn("grid min-w-0", densityClassName[density], className)}
+      {...props}
+    >
+      {breadcrumbs && <div data-slot="resource-page-breadcrumbs">{breadcrumbs}</div>}
+
+      {hasHeader && (
+        <PageHeader
+          data-slot="resource-page-header"
+          eyebrow={eyebrow}
+          title={title}
+          description={description}
+          actions={actions}
+          className={pageHeaderClassName}
+          {...headerProps}
+        />
+      )}
+
+      {stats && <div data-slot="resource-page-stats">{stats}</div>}
+
+      {hasToolbar && (
+        <div data-slot="resource-page-toolbar" className={cn("grid gap-3", toolbarClassName)}>
+          {tabs && <div data-slot="resource-page-tabs">{tabs}</div>}
+          {filters && <div data-slot="resource-page-filters">{filters}</div>}
+        </div>
+      )}
+
+      {(hasMainContent || aside) && (
+        <div
+          data-slot="resource-page-content"
+          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+        >
+          <div data-slot="resource-page-main" className="grid min-w-0 gap-4">
+            {children}
+            {table && <DataTable {...table} />}
+          </div>
+
+          {aside && (
+            <aside data-slot="resource-page-aside" className={cn("min-w-0", asideClassName)}>
+              {aside}
+            </aside>
+          )}
+        </div>
+      )}
+
+      {footer && <div data-slot="resource-page-footer">{footer}</div>}
+    </div>
+  )
+}
+
+export { ResourcePage, ResourcePageSection }