@k3-universe/react-kit 0.0.9 → 0.0.10

package/src/kit/builder/form/components/FormBuilderField.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
-import { Control, FieldValues, useController } from 'react-hook-form';
+import type { Control, FieldValues } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import { cn } from '../../../../shadcn/lib/utils';
 import { Label } from '../../../../shadcn/ui/label';
-import { FormBuilderFieldConfig } from './FormBuilder';
+import type { FormBuilderFieldConfig } from './FormBuilder';
 import {
   AutocompleteField,
   TextField,
@@ -13,6 +14,10 @@ import {
   SwitchField,
   RadioField,
   DateField,
+  DatePickerField,
+  DateRangePickerField,
+  MonthPickerField,
+  MonthRangePickerField,
   FileField,
   ObjectField,
   ArrayField,
@@ -41,7 +46,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
   const handleChange = useCallback((value: unknown) => {
     controllerField.onChange(value);
     onChange?.(value);
-  }, [controllerField.onChange, onChange]);
+  }, [controllerField, onChange]);
   const baseClassName = cn(
     error && 'border-destructive focus-visible:ring-destructive',
     field.className,
@@ -150,6 +155,50 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
             className={baseClassName}
           />
         );
+      case 'date_picker':
+        return (
+          <DatePickerField
+            field={field}
+            control={control}
+            fieldPath={fieldPath}
+            value={controllerField.value}
+            onChange={handleChange}
+            className={baseClassName}
+          />
+        );
+      case 'date_range':
+        return (
+          <DateRangePickerField
+            field={field}
+            control={control}
+            fieldPath={fieldPath}
+            value={controllerField.value}
+            onChange={handleChange}
+            className={baseClassName}
+          />
+        );
+      case 'month':
+        return (
+          <MonthPickerField
+            field={field}
+            control={control}
+            fieldPath={fieldPath}
+            value={controllerField.value}
+            onChange={handleChange}
+            className={baseClassName}
+          />
+        );
+      case 'month_range':
+        return (
+          <MonthRangePickerField
+            field={field}
+            control={control}
+            fieldPath={fieldPath}
+            value={controllerField.value}
+            onChange={handleChange}
+            className={baseClassName}
+          />
+        );
       case 'file':
         return (
           <FileField

package/src/kit/builder/form/components/fields/AutocompleteField.tsx

@@ -7,13 +7,41 @@ export function AutocompleteField({ field, value, onChange, className }: FieldRe
     .filter((o): o is { label: string; value: string | number } => o.value !== null && o.value !== undefined)
     .map(o => ({ label: o.label, value: o.value as string | number }))
 
+  // Shape defaultValue according to single/multiple
+  let defaultValueShaped: string | number | null | Array<string | number> | undefined = undefined
+  if (field.defaultValue !== undefined) {
+    if (field.multiple) {
+      if (Array.isArray(field.defaultValue)) {
+        defaultValueShaped = field.defaultValue.filter((v): v is string | number => typeof v === 'string' || typeof v === 'number')
+      } else if (field.defaultValue === null || field.defaultValue === undefined) {
+        defaultValueShaped = []
+      } else if (typeof field.defaultValue === 'string' || typeof field.defaultValue === 'number') {
+        defaultValueShaped = [field.defaultValue]
+      } else {
+        defaultValueShaped = []
+      }
+    } else {
+      defaultValueShaped = (typeof field.defaultValue === 'string' || typeof field.defaultValue === 'number' || field.defaultValue === null)
+        ? field.defaultValue as string | number | null
+        : null
+    }
+  }
+
   return (
     <Autocomplete
       mode={field.autocompleteMode ?? 'client'}
       options={options}
       fetcher={field.fetcher}
       pageSize={field.pageSize}
-      value={(value as string | number | null) ?? null}
+      multiple={field.multiple}
+      allowCustomValue={field.allowCustomValue}
+      chipVariant={field.chipVariant}
+      chipClassName={field.chipClassName}
+      clearable={field.clearable}
+      defaultValue={defaultValueShaped}
+      initialSelectedOptions={field.initialSelectedOptions ?? null}
+      loadSelected={field.loadSelected}
+      value={field.multiple ? ((Array.isArray(value) ? value : (value ? [value] : [])) as Array<string | number>) : ((value as string | number | null) ?? null)}
       onChange={(val) => onChange(val)}
       placeholder={field.placeholder}
       searchPlaceholder={field.searchPlaceholder}

package/src/kit/builder/form/components/fields/DatePickerField.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import type { FieldRenderProps } from './types'
+import { DatePicker } from '../../../../components/datepicker/DatePicker'
+
+export function DatePickerField({ field, value, onChange, className }: FieldRenderProps) {
+  const v = React.useMemo(() => {
+    if (!value) return null
+    if (value instanceof Date) return value
+    const d = new Date(value as string)
+    return Number.isNaN(d.getTime()) ? null : d
+  }, [value])
+
+  return (
+    <DatePicker
+      className={className}
+      value={v}
+      onChange={(d: Date | null) => onChange(d)}
+      minDate={field.minDate}
+      maxDate={field.maxDate}
+      disabledDates={field.disabledDates}
+      buttonVariant="outline"
+    />
+  )
+}

package/src/kit/builder/form/components/fields/DateRangePickerField.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import type { FieldRenderProps } from './types'
+import { DateRangePicker } from '../../../../components/datepicker/DateRangePicker'
+import type { DateRange } from 'react-day-picker'
+
+function coerceDate(input: unknown): Date | undefined {
+  if (!input) return undefined
+  if (input instanceof Date) return input
+  const d = new Date(input as string)
+  return Number.isNaN(d.getTime()) ? undefined : d
+}
+
+export function DateRangePickerField({ field, value, onChange, className }: FieldRenderProps) {
+  const v = React.useMemo<DateRange | null>(() => {
+    if (!value) return null
+    if (typeof value === 'object' && value !== null) {
+      const anyVal = value as { from?: unknown; to?: unknown }
+      return {
+        from: coerceDate(anyVal.from),
+        to: coerceDate(anyVal.to),
+      }
+    }
+    return null
+  }, [value])
+
+  return (
+    <DateRangePicker
+      className={className}
+      value={v}
+      onChange={(r) => onChange(r)}
+      minDate={field.minDate}
+      maxDate={field.maxDate}
+      disabledDates={field.disabledDates}
+      numberOfMonths={field.numberOfMonths ?? 2}
+      popoverSide={field.popoverSide}
+      showFooter={field.showFooter}
+      cancelLabel={field.cancelLabel}
+      applyLabel={field.applyLabel}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/MonthPickerField.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import type { FieldRenderProps } from './types'
+import { MonthInput } from '../../../../components/monthpicker/MonthInput'
+
+export function MonthPickerField({ field, value, onChange, className }: FieldRenderProps) {
+  const v = React.useMemo(() => {
+    if (!value) return undefined
+    if (value instanceof Date) return value
+    const d = new Date(value as string)
+    return Number.isNaN(d.getTime()) ? undefined : d
+  }, [value])
+
+  return (
+    <MonthInput
+      className={className}
+      value={v ?? null}
+      onChange={(d: Date | null) => onChange(d)}
+      minDate={field.minDate}
+      maxDate={field.maxDate}
+      disabledDates={(field.disabledDates?.filter((it): it is Date => it instanceof Date))}
+      showFooter
+      clearLabel={field.cancelLabel}
+      closeLabel={field.applyLabel}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/MonthRangePickerField.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import type { FieldRenderProps } from './types'
+import { MonthRangeInput } from '../../../../components/monthpicker/MonthRangeInput'
+
+export function MonthRangePickerField({ field, value, onChange, className }: FieldRenderProps) {
+  const v = React.useMemo(() => {
+    if (!value || typeof value !== 'object') return undefined as { start: Date; end: Date } | undefined
+    const anyVal = value as { start?: unknown; end?: unknown }
+    const toDate = (x: unknown) => {
+      if (!x) return undefined
+      if (x instanceof Date) return x
+      const d = new Date(x as string)
+      return Number.isNaN(d.getTime()) ? undefined : d
+    }
+    const start = toDate(anyVal.start)
+    const end = toDate(anyVal.end)
+    if (!start || !end) return undefined
+    return { start, end }
+  }, [value])
+
+  return (
+    <MonthRangeInput
+      className={className}
+      value={v ?? null}
+      onChange={(range) => onChange(range)}
+      minDate={field.minDate}
+      maxDate={field.maxDate}
+      showQuickSelectors
+      popoverSide={field.popoverSide}
+      showFooter
+      cancelLabel={field.cancelLabel}
+      applyLabel={field.applyLabel}
+    />
+  )
+}

package/src/kit/builder/form/components/fields/index.ts

@@ -8,6 +8,10 @@ export * from './CheckboxField'
 export * from './SwitchField'
 export * from './RadioField'
 export * from './DateField'
+export * from './DatePickerField'
+export * from './DateRangePickerField'
+export * from './MonthPickerField'
+export * from './MonthRangePickerField'
 export * from './FileField'
 export * from './ObjectField'
 export * from './ArrayField'

package/src/kit/builder/section/SectionBuilder.tsx

@@ -3,6 +3,7 @@ import { cn } from '../../../shadcn/lib/utils';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../shadcn/ui/card';
 import { Separator } from '../../../shadcn/ui/separator';
 import type { SectionBuilderProps, SectionLeaf, SectionNode } from './types';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../shadcn/ui/tabs';
 
 // Tailwind-safe literal class maps (1-12)
 const GRID_COLS = {
@@ -175,7 +176,7 @@ const SectionLeafRenderer = memo(
 function SectionNodeRenderer({ node, renderLeaf }: { node: SectionNode; renderLeaf?: (leaf: SectionLeaf) => React.ReactNode }) {
   if (node.hidden) return null;
   const layout = node.layout ?? 'grid';
-  const containerClass = layout === 'grid' ? gridClasses(node.grid) : flexClasses(node.flex);
+  const containerClass = layout === 'grid' ? gridClasses(node.grid) : layout === 'flex' ? flexClasses(node.flex) : '';
 
   // Local presentational container replacing FormBuilderSection
   const SectionContainer = ({ children }: { children: React.ReactNode }) => {
@@ -229,7 +230,6 @@ function SectionNodeRenderer({ node, renderLeaf }: { node: SectionNode; renderLe
             {renderContent()}
           </div>
         );
-      case 'plain':
       default:
         return (
           <div className={cn('space-y-6', className)}>
@@ -240,6 +240,28 @@ function SectionNodeRenderer({ node, renderLeaf }: { node: SectionNode; renderLe
     }
   };
 
+  if (layout === 'tabs' && node.tabs && node.tabs.length > 0) {
+    const defaultTabId = node.defaultTabId ?? node.tabs[0]?.id;
+    return (
+      <SectionContainer>
+        <Tabs defaultValue={defaultTabId} className={cn('space-y-2')}>
+          <TabsList className={cn(node.tabsListClassName)}>
+            {node.tabs.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id} className={cn(tab.className)}>
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {node.tabs.map((tab) => (
+            <TabsContent key={tab.id} value={tab.id} className={cn(node.tabsContentClassName, tab.contentClassName)}>
+              <SectionNodeRenderer node={tab.node} renderLeaf={renderLeaf} />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </SectionContainer>
+    );
+  }
+
   return (
     <SectionContainer>
       <div className={containerClass}>

package/src/kit/builder/section/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-export type SectionLayout = 'grid' | 'flex';
+export type SectionLayout = 'grid' | 'flex' | 'tabs';
 
 export interface SectionGridOptions {
   cols?: number;
@@ -52,11 +52,25 @@ export interface SectionLeaf {
   renderKey?: string | number;
 }
 
+// Tabs layout support
+export interface SectionTab {
+  id: string;
+  label: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  node: SectionNode; // Content of this tab as a nested section node
+}
+
 export interface SectionNode extends SectionBase {
   layout?: SectionLayout;
   grid?: SectionGridOptions;
   flex?: SectionFlexOptions;
   children?: Array<SectionNode | SectionLeaf>;
+  // Tabs layout (layout === 'tabs')
+  tabs?: SectionTab[];
+  defaultTabId?: string;
+  tabsListClassName?: string;
+  tabsContentClassName?: string;
 }
 
 export interface SectionBuilderProps {

package/src/kit/builder/stack-dialog/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { StackDialogContextInstance } from './types';
+
+export const StackDialogContext = createContext<StackDialogContextInstance>({
+  activeDialogs: [],
+  createDialog: () => { throw new Error('createDialog must be called within StackDialogProvider') },
+  closeDialog: () => { throw new Error('closeDialog must be called within StackDialogProvider') },
+  closeAllDialogs: () => { throw new Error('closeAllDialog must be called within StackDialogProvider') },
+});

package/src/kit/builder/stack-dialog/hooks.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { StackDialogContext } from './context';
+
+export function useStackDialog() {
+  const { createDialog, closeDialog, closeAllDialogs } = useContext(StackDialogContext);
+  return {
+    createDialog,
+    closeDialog,
+    closeAllDialogs,
+  }
+}

package/src/kit/builder/stack-dialog/index.ts

@@ -0,0 +1,13 @@
+export {
+  StackDialogContext as Context
+} from './context'
+
+export {
+  StackDialogContextProvider as ContextProvider
+} from './provider'
+
+export {
+  useStackDialog
+} from './hooks'
+
+export type * from './types'

package/src/kit/builder/stack-dialog/provider.tsx

@@ -0,0 +1,55 @@
+import { PropsWithChildren, useCallback, useRef, useState } from 'react';
+import { StackDialogContext } from './context';
+import { StackDialogRenderer } from './renderer';
+import { StackDialogCreateConfig, StackDialogInstance } from './types';
+
+export function StackDialogContextProvider(props: PropsWithChildren) {
+  const [activeDialogs, setActiveDialogs] = useState<StackDialogInstance[]>([]);
+  const ids = useRef<number>(0)
+
+  const handleCreateDialog = useCallback((config: StackDialogCreateConfig) => {
+    const dialogId = config.id || (ids.current++).toString();
+
+    setActiveDialogs(prev => {
+      const clone = [...prev];
+      clone.push({
+        id: dialogId,
+        template: config.template,
+        closeOnEscapePressed: config.closeOnEscapePressed,
+        closeOnInteractOutside: config.closeOnInteractOutside,
+      });
+      return clone;
+    });
+
+    return dialogId;
+  }, [setActiveDialogs]);
+
+  const handleCloseDialog = useCallback((id?: string) => {
+    setActiveDialogs(prev => {
+      const clone = [...prev];
+      clone.splice(clone.findIndex(d => d.id === (id || '')));
+      return clone;
+    });
+  }, [setActiveDialogs]);
+
+  const handleCloseAllDialog = useCallback(() => {
+    setActiveDialogs([]);
+  }, [setActiveDialogs]);
+
+  return (
+    <StackDialogContext.Provider
+      value={{
+        activeDialogs,
+        createDialog: handleCreateDialog,
+        closeDialog: handleCloseDialog,
+        closeAllDialogs: handleCloseAllDialog,
+      }}
+    >
+      {props.children}
+      <StackDialogRenderer
+        dialogs={activeDialogs}
+        closeDialog={handleCloseDialog}
+      />
+    </StackDialogContext.Provider>
+  )
+}

package/src/kit/builder/stack-dialog/renderer.tsx

@@ -0,0 +1,33 @@
+import { Dialog } from '@/shadcn/ui/dialog';
+import { StackDialogInstance } from './types';
+import { DialogContent } from '@radix-ui/react-dialog';
+
+export function StackDialogRenderer(props: {
+  dialogs: StackDialogInstance[],
+  closeDialog: (id: string) => void
+}) {
+  const handleCloseDialog = (id: string) => () => {
+    props.closeDialog(id)
+  }
+
+  return props.dialogs.map((dialog) => (
+    (
+      <Dialog
+        open
+        onOpenChange={(open) => (!open && handleCloseDialog(dialog.id))}
+        key={dialog.id}
+      >
+        <DialogContent
+          onEscapeKeyDown={e => {
+            if (!dialog.closeOnEscapePressed) e.preventDefault();
+          }}
+          onInteractOutside={e => {
+            if (!dialog.closeOnInteractOutside) e.preventDefault();
+          }}
+        >
+          {dialog.template}
+        </DialogContent>
+      </Dialog>
+    )
+  ));
+}

package/src/kit/builder/stack-dialog/types.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+export type StackDialogContextInstance = {
+  activeDialogs: StackDialogInstance[],
+  createDialog: (config: StackDialogCreateConfig) => string,
+  closeDialog: (id?: string) => void,
+  closeAllDialogs: () => void,
+};
+
+export type StackDialogInstance = {
+  id: string,
+  template: ReactNode,
+  closeOnInteractOutside?: boolean,
+  closeOnEscapePressed?: boolean,
+};
+
+export type StackDialogCreateConfig = {
+  id?: string,
+  template: ReactNode,
+  closeOnInteractOutside?: boolean,
+  closeOnEscapePressed?: boolean,
+};