@k3-tech/react-kit 0.0.59 → 0.0.61

package/src/kit/builder/data-table/components/DataTable.tsx

@@ -82,6 +82,12 @@ export interface DataTableProps<TData, TValue> {
   filterWrapper?: 'accordion' | 'card' | 'none';
   filterTitle?: string;
   filterShowActionsSeparator?: boolean;
+  // Custom header component
+  /**
+   * Should only be used if you intend to replace the default filter.
+   * Will hide default filter and actions, and also disable some props.
+   */
+  CustomHeaderComponent?: () => React.ReactNode;
 }
 
 export function DataTable<TData, TValue>({
@@ -117,6 +123,7 @@ export function DataTable<TData, TValue>({
   filterWrapper,
   filterTitle,
   filterShowActionsSeparator,
+  CustomHeaderComponent,
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = React.useState<
     Record<string, boolean>
@@ -359,105 +366,111 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className={cn('space-y-3', className)}>
-      {formFilters?.length ? (
-        effectiveFilterWrapper === 'accordion' ? (
-          <div className="rounded-md border border-border">
-            <Accordion
-              type="single"
-              collapsible
-              className="w-full"
-              defaultValue="filters"
-            >
-              <AccordionItem value="filters">
-                <AccordionTrigger className="px-4 py-3 border-b border-border text-md">
-                  {effectiveFilterTitle}
-                </AccordionTrigger>
-                <AccordionContent className="px-4 pb-4 pt-5">
-                  <FormBuilder
-                    key={JSON.stringify(formFilterValues ?? {})}
-                    sections={formFilters as FormBuilderSectionConfig[]}
-                    defaultValues={formFilterValues}
-                    onSubmit={(data) =>
-                      onFormFilterChange?.(data as Record<string, unknown>)
-                    }
-                    onReset={() => onFormFilterChange?.({})}
-                    showActions
-                    submitLabel="Apply"
-                    resetLabel="Clear"
-                    showActionsSeparator={filterShowActionsSeparator}
-                  />
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-          </div>
-        ) : effectiveFilterWrapper === 'card' ? (
-          <div className="rounded-md border border-border p-4">
-            <FormBuilder
-              key={JSON.stringify(formFilterValues ?? {})}
-              sections={formFilters as FormBuilderSectionConfig[]}
-              defaultValues={formFilterValues}
-              onSubmit={(data) =>
-                onFormFilterChange?.(data as Record<string, unknown>)
-              }
-              onReset={() => onFormFilterChange?.({})}
-              showActions
-              submitLabel="Apply"
-              resetLabel="Clear"
-              showActionsSeparator={filterShowActionsSeparator}
-            />
-          </div>
-        ) : (
-          <FormBuilder
-            key={JSON.stringify(formFilterValues ?? {})}
-            sections={formFilters as FormBuilderSectionConfig[]}
-            defaultValues={formFilterValues}
-            onSubmit={(data) =>
-              onFormFilterChange?.(data as Record<string, unknown>)
-            }
-            onReset={() => onFormFilterChange?.({})}
-            showActions
-            submitLabel="Apply"
-            resetLabel="Clear"
-            showActionsSeparator={filterShowActionsSeparator}
-          />
-        )
-      ) : null}
-      {/* Actions Bar */}
-      {(safeActions.length ||
-        showStandardActions ||
-        (selectable &&
-          table.getSelectedRowModel().rows.length > 0 &&
-          safeBatchActions.length)) && (
-        <div className="rounded-md p-2 mt-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              {selectable &&
-                table.getSelectedRowModel().rows.length > 0 &&
-                safeBatchActions.map((a) => renderBatchButton(a, a.key))}
-            </div>
-            <div className="flex items-center gap-2">
-              {showStandardActions && onRefresh && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handleRefresh}
-                  disabled={loading}
-                  className="h-8"
-                  title="Refresh"
+      {CustomHeaderComponent ? (
+        CustomHeaderComponent()
+      ) : (
+        <>
+          {formFilters?.length ? (
+            effectiveFilterWrapper === 'accordion' ? (
+              <div className="rounded-md border border-border">
+                <Accordion
+                  type="single"
+                  collapsible
+                  className="w-full"
+                  defaultValue="filters"
                 >
-                  <RefreshCw
-                    className={cn('h-4 w-4', loading && 'animate-spin')}
-                  />{' '}
-                  Refresh
-                </Button>
-              )}
-              {isColumnVisibilityEnabled ? (
-                <DataTableViewOptions table={table} />
-              ) : null}
-              {safeActions.map((a) => renderActionButton(a, a.key))}
+                  <AccordionItem value="filters">
+                    <AccordionTrigger className="px-4 py-3 border-b border-border text-md">
+                      {effectiveFilterTitle}
+                    </AccordionTrigger>
+                    <AccordionContent className="px-4 pb-4 pt-5">
+                      <FormBuilder
+                        key={JSON.stringify(formFilterValues ?? {})}
+                        sections={formFilters as FormBuilderSectionConfig[]}
+                        defaultValues={formFilterValues}
+                        onSubmit={(data) =>
+                          onFormFilterChange?.(data as Record<string, unknown>)
+                        }
+                        onReset={() => onFormFilterChange?.({})}
+                        showActions
+                        submitLabel="Apply"
+                        resetLabel="Clear"
+                        showActionsSeparator={filterShowActionsSeparator}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            ) : effectiveFilterWrapper === 'card' ? (
+              <div className="rounded-md border border-border p-4">
+                <FormBuilder
+                  key={JSON.stringify(formFilterValues ?? {})}
+                  sections={formFilters as FormBuilderSectionConfig[]}
+                  defaultValues={formFilterValues}
+                  onSubmit={(data) =>
+                    onFormFilterChange?.(data as Record<string, unknown>)
+                  }
+                  onReset={() => onFormFilterChange?.({})}
+                  showActions
+                  submitLabel="Apply"
+                  resetLabel="Clear"
+                  showActionsSeparator={filterShowActionsSeparator}
+                />
+              </div>
+            ) : (
+              <FormBuilder
+                key={JSON.stringify(formFilterValues ?? {})}
+                sections={formFilters as FormBuilderSectionConfig[]}
+                defaultValues={formFilterValues}
+                onSubmit={(data) =>
+                  onFormFilterChange?.(data as Record<string, unknown>)
+                }
+                onReset={() => onFormFilterChange?.({})}
+                showActions
+                submitLabel="Apply"
+                resetLabel="Clear"
+                showActionsSeparator={filterShowActionsSeparator}
+              />
+            )
+          ) : null}
+          {/* Actions Bar */}
+          {(safeActions.length ||
+            showStandardActions ||
+            (selectable &&
+              table.getSelectedRowModel().rows.length > 0 &&
+              safeBatchActions.length)) && (
+            <div className="rounded-md p-2 mt-6">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  {selectable &&
+                    table.getSelectedRowModel().rows.length > 0 &&
+                    safeBatchActions.map((a) => renderBatchButton(a, a.key))}
+                </div>
+                <div className="flex items-center gap-2">
+                  {showStandardActions && onRefresh && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleRefresh}
+                      disabled={loading}
+                      className="h-8"
+                      title="Refresh"
+                    >
+                      <RefreshCw
+                        className={cn('h-4 w-4', loading && 'animate-spin')}
+                      />{' '}
+                      Refresh
+                    </Button>
+                  )}
+                  {isColumnVisibilityEnabled ? (
+                    <DataTableViewOptions table={table} />
+                  ) : null}
+                  {safeActions.map((a) => renderActionButton(a, a.key))}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          )}
+        </>
       )}
       <div
         className="relative overflow-hidden rounded-md border border-border"

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

@@ -26,6 +26,7 @@ import {
   ObjectField,
   ArrayField,
 } from './fields';
+import InfoTooltip from '@/kit/components/info-tooltip/InfoTooltip';
 
 export interface FormBuilderFieldProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -68,8 +69,10 @@ export function FormBuilderField<
     (value: unknown, ...extras: unknown[]) => {
       // Check for onChangeOverride, block any change to RHF
       // if onChangeOverride returns exactly false
-      if (typeof (field.onChangeOverride) === "function"
-        && field.onChangeOverride(value, ...extras) === false)
+      if (
+        typeof field.onChangeOverride === 'function' &&
+        field.onChangeOverride(value, ...extras) === false
+      )
         return;
       // Only patch the RHF value with the first argument (the canonical value)
       controllerField.onChange(value);
@@ -410,6 +413,12 @@ export function FormBuilderField<
           <Label htmlFor={fieldPath} className="text-sm font-medium">
             {field.label}
             {field.required && <span className="text-destructive ml-1">*</span>}
+            {field.infoTooltip && (
+              <InfoTooltip
+                iconSize={field.infoTooltipIconSize}
+                content={field.infoTooltip}
+              />
+            )}
           </Label>
           {renderField()}
         </div>
@@ -440,6 +449,12 @@ export function FormBuilderField<
       <Label htmlFor={fieldPath} className="text-sm font-medium">
         {field.label}
         {field.required && <span className="text-destructive ml-1">*</span>}
+        {field.infoTooltip && (
+          <InfoTooltip
+            iconSize={field.infoTooltipIconSize}
+            content={field.infoTooltip}
+          />
+        )}
       </Label>
       {renderField()}
       {field.description && (

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

@@ -299,6 +299,7 @@ export function ArrayField({
                     }}
                     placeholder={`Item ${index + 1}`}
                     disabled={field.disabled}
+                    data-testid={field.dataTestID}
                   />
                 )}
               </CardContent>

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

@@ -2,6 +2,7 @@ import { Checkbox } from '../../../../../shadcn/ui/checkbox';
 import { Label } from '../../../../../shadcn/ui/label';
 import { cn } from '../../../../../shadcn/lib/utils';
 import type { FieldRenderProps } from './types';
+import InfoTooltip from '@/kit/components/info-tooltip/InfoTooltip';
 
 export function CheckboxField({
   field,
@@ -19,15 +20,25 @@ export function CheckboxField({
         <Label id={labelId} className="text-sm font-medium">
           {field.label}
           {field.required && <span className="text-destructive ml-1">*</span>}
+          {field.infoTooltip && (
+            <InfoTooltip
+              iconSize={field.infoTooltipIconSize}
+              content={field.infoTooltip}
+            />
+          )}
         </Label>
-        <Checkbox
-          aria-labelledby={labelId}
-          id={fieldPath}
-          checked={(value as boolean) || false}
-          onCheckedChange={onChange as (val: boolean) => void}
-          disabled={field.disabled || field.readOnly}
-          className={cn(className)}
-        />
+        <div className="flex items-center space-x-4">
+          <Checkbox
+            aria-labelledby={labelId}
+            id={fieldPath}
+            checked={(value as boolean) || false}
+            onCheckedChange={onChange as (val: boolean) => void}
+            disabled={field.disabled || field.readOnly}
+            className={cn(className)}
+            data-testid={field.dataTestID}
+          />
+          {field.subLabel}
+        </div>
       </div>
     );
   }
@@ -40,6 +51,7 @@ export function CheckboxField({
         onCheckedChange={onChange as (val: boolean) => void}
         disabled={field.disabled}
         className={cn(className)}
+        data-testid={field.dataTestID}
       />
     );
   }
@@ -52,6 +64,7 @@ export function CheckboxField({
         onCheckedChange={onChange as (val: boolean) => void}
         disabled={field.disabled}
         className={cn(className)}
+        data-testid={field.dataTestID}
       />
       <Label
         htmlFor={fieldPath}

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

@@ -49,6 +49,7 @@ export function DateField({
       onChange={(e) =>
         onChange(e.target.value ? new Date(e.target.value) : null)
       }
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -42,6 +42,7 @@ export function DatePickerField({
       format={field.dateFormat}
       placeholder={field.placeholder}
       buttonVariant="outline"
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { FieldRenderProps } from './types';
-import { DateRangePicker } from '../../../../components/datepicker/DateRangePicker';
 import type { DateRange } from 'react-day-picker';
 import { useWatch } from 'react-hook-form';
+import { DateRangePicker } from '../../../../components/datepicker/DateRangePicker';
+import type { FieldRenderProps } from './types';
 
 function coerceDate(input: unknown): Date | undefined {
   if (!input) return undefined;
@@ -66,6 +66,7 @@ export function DateRangePickerField({
       showFooter={field.showFooter}
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -47,6 +47,7 @@ export function DateTimePickerField({
       showFooter={field.showFooter}
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -57,6 +57,7 @@ export function DateTimeRangePickerField({
       showFooter={field.showFooter}
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -32,6 +32,7 @@ export function FileField({
       onRemove={field.fileOnRemove}
       onRetry={field.fileOnRetry}
       onRetryAll={field.fileOnRetryAll}
+      dataTestID={field.dataTestID}
     />
   );
 }

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

@@ -28,6 +28,7 @@ export function MonthPickerField({
       showFooter
       clearLabel={field.cancelLabel}
       closeLabel={field.applyLabel}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -36,6 +36,7 @@ export function MonthRangePickerField({
       showFooter
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Input } from '../../../../../shadcn/ui/input';
 import type { FieldRenderProps } from './types';
 
@@ -7,14 +8,81 @@ export function NumberField({
   onChange,
   className,
 }: FieldRenderProps) {
+  const innerValue = value as number;
+  const [displayValue, setDisplayValue] = useState(
+    (Number(innerValue) || "").toLocaleString('id-ID'),
+  );
+
+  if (field.numberMode === 'currency') {
+    const parseAndFormatIDRInput = (input: string) => {
+      const cleaned = input.replace(/[^\d.,]/g, '');
+      if (!cleaned) {
+        return { display: '', numeric: 0 };
+      }
+
+      // IDR uses "," as decimal separator and "." for thousands.
+      const hasDecimalSeparator = cleaned.includes(',');
+      const sepIndex = cleaned.lastIndexOf(',');
+      const rawInteger = hasDecimalSeparator
+        ? cleaned.slice(0, Math.max(0, sepIndex))
+        : cleaned;
+      const rawFraction = hasDecimalSeparator
+        ? cleaned.slice(sepIndex + 1)
+        : '';
+
+      const integerDigits = rawInteger.replace(/\D/g, '');
+      const fractionDigits = rawFraction.replace(/\D/g, '');
+      const safeInteger = integerDigits || '0';
+
+      const groupedInteger = Number(safeInteger).toLocaleString('id-ID');
+      const display = hasDecimalSeparator
+        ? `${groupedInteger},${fractionDigits}`
+        : groupedInteger;
+      const numeric = Number(
+        fractionDigits ? `${safeInteger}.${fractionDigits}` : safeInteger,
+      );
+
+      return {
+        display,
+        numeric: Number.isFinite(numeric) ? numeric : 0,
+      };
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { display, numeric } = parseAndFormatIDRInput(
+        e.currentTarget.value,
+      );
+      setDisplayValue(display);
+      onChange(numeric);
+    };
+
+    return (
+      <Input
+        type="text"
+        inputMode="decimal"
+        value={displayValue}
+        onChange={handleInputChange}
+        className="min-w-[120px] text-right bg-background text-foreground"
+        data-testid={field.dataTestID}
+      />
+    );
+  }
+
   return (
     <Input
+      data-testid={field.dataTestID}
       className={className}
       disabled={field.disabled || field.readOnly}
       placeholder={field.placeholder}
       type="number"
-      value={(value as number | string) ?? ''}
-      onChange={(e) => onChange(Number(e.target.value))}
+      value={innerValue ?? ''}
+      onChange={(e) =>
+        onChange(
+          typeof e.currentTarget.valueAsNumber === 'number'
+            ? e.currentTarget.valueAsNumber
+            : null,
+        )
+      }
     />
   );
 }

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

@@ -27,6 +27,7 @@ export function RadioField({
       onValueChange={(val) => onChange(fromUiValue(val))}
       disabled={field.disabled || field.readOnly}
       className={className}
+      data-testid={field.dataTestID}
     >
       {field.options?.map((option) => (
         <div

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

@@ -27,6 +27,7 @@ export function SelectField({
       value={toUiValue(value)}
       onValueChange={(val) => onChange(fromUiValue(val))}
       disabled={field.disabled || field.readOnly}
+      data-testid={field.dataTestID}
     >
       <SelectTrigger className={className}>
         <SelectValue placeholder={field.placeholder} />

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

@@ -2,6 +2,7 @@ import { Switch } from '../../../../../shadcn/ui/switch';
 import { Label } from '../../../../../shadcn/ui/label';
 import { cn } from '../../../../../shadcn/lib/utils';
 import type { FieldRenderProps } from './types';
+import InfoTooltip from '@/kit/components/info-tooltip/InfoTooltip';
 
 export function SwitchField({
   field,
@@ -19,6 +20,12 @@ export function SwitchField({
         <Label id={labelId} className="text-sm font-medium">
           {field.label}
           {field.required && <span className="text-destructive ml-1">*</span>}
+          {field.infoTooltip && (
+            <InfoTooltip
+              iconSize={field.infoTooltipIconSize}
+              content={field.infoTooltip}
+            />
+          )}
         </Label>
         <Switch
           aria-labelledby={labelId}
@@ -27,7 +34,9 @@ export function SwitchField({
           onCheckedChange={onChange as (val: boolean) => void}
           disabled={field.disabled || field.readOnly}
           className={cn(className)}
+          data-testid={field.dataTestID}
         />
+        {field.subLabel}
       </div>
     );
   }
@@ -40,6 +49,7 @@ export function SwitchField({
         onCheckedChange={onChange as (val: boolean) => void}
         disabled={field.disabled}
         className={cn(className)}
+        data-testid={field.dataTestID}
       />
     );
   }
@@ -52,6 +62,7 @@ export function SwitchField({
         onCheckedChange={onChange as (val: boolean) => void}
         disabled={field.disabled}
         className={cn(className)}
+        data-testid={field.dataTestID}
       />
       <Label
         htmlFor={fieldPath}

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

@@ -20,6 +20,7 @@ export function TextField({
       type={type}
       value={(value as string) || ''}
       onChange={(e) => onChange(e.target.value)}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -14,7 +14,8 @@ export function TextareaField({
       placeholder={field.placeholder}
       value={(value as string) || ''}
       onChange={(e) => onChange(e.target.value)}
-      rows={4}
+      rows={field.rows || 4}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -28,6 +28,7 @@ export function TimePickerField({
       showFooter={field.showFooter}
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -36,6 +36,7 @@ export function TimeRangePickerField({
       showFooter={field.showFooter}
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
+      data-testid={field.dataTestID}
     />
   );
 }

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

@@ -73,13 +73,18 @@ export interface FormBuilderFieldConfig<
 > {
   id?: string;
   name: TName;
-  label: string;
   type: FieldType;
+  label: React.ReactNode;
   placeholder?: string;
   description?: string;
+  subLabel?: React.ReactNode;
+  infoTooltip?: React.ReactNode;
+  infoTooltipIconSize?: string | number;
   required?: boolean;
   disabled?: boolean;
   readOnly?: boolean;
+  dataTestID?: string;
+  numberMode?: "currency" | undefined;
   options?: { label: string; value: string | number | boolean | null }[];
   autocompleteMode?: 'client' | 'server';
   fetcher?: AutocompleteFetcher;