@k3-universe/react-kit 0.0.1

package/src/kit/builder/form/utils/field-factories.ts

@@ -0,0 +1,164 @@
+import { FormBuilderFieldConfig } from '../components/FormBuilder';
+import { commonValidations } from './validations';
+
+// Field factory functions
+export const createField = {
+  text: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'text',
+    required: false,
+    ...options,
+  }),
+
+  email: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'email',
+    required: false,
+    validation: commonValidations.email,
+    ...options,
+  }),
+
+  password: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'password',
+    required: false,
+    validation: commonValidations.password,
+    ...options,
+  }),
+
+  number: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'number',
+    required: false,
+    ...options,
+  }),
+
+  textarea: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'textarea',
+    required: false,
+    gridCols: 2, // Default to full width
+    ...options,
+  }),
+
+  select: (
+    name: string,
+    label: string,
+    options: { label: string; value: string | number | null }[],
+    fieldOptions: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'select',
+    options,
+    required: false,
+    ...fieldOptions,
+  }),
+
+  checkbox: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'checkbox',
+    required: false,
+    defaultValue: false,
+    ...options,
+  }),
+
+  radio: (
+    name: string,
+    label: string,
+    options: { label: string; value: string | number }[],
+    fieldOptions: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'radio',
+    options,
+    required: false,
+    ...fieldOptions,
+  }),
+
+  date: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'date',
+    required: false,
+    ...options,
+  }),
+
+  file: (
+    name: string,
+    label: string,
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'file',
+    required: false,
+    ...options,
+  }),
+
+  object: (
+    name: string,
+    label: string,
+    fields: FormBuilderFieldConfig[],
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'object',
+    fields,
+    required: false,
+    gridCols: 2, // Default to full width
+    ...options,
+  }),
+
+  array: (
+    name: string,
+    label: string,
+    fields: FormBuilderFieldConfig[],
+    options: Partial<FormBuilderFieldConfig> = {},
+  ): FormBuilderFieldConfig => ({
+    name,
+    label,
+    type: 'array',
+    fields,
+    required: false,
+    gridCols: 2, // Default to full width
+    defaultValue: [],
+    ...options,
+  }),
+};

package/src/kit/builder/form/utils/index.ts

@@ -0,0 +1,17 @@
+// Export all form utilities from their respective modules
+export { commonValidations } from './validations';
+export { createField } from './field-factories';
+export { createSection } from './section-factories';
+export { createDependency, conditions } from './dependencies';
+export { transformers } from './transformers';
+export { validators } from './validators';
+export { commonForms } from './common-forms';
+
+// Re-export everything for backward compatibility
+export * from './validations';
+export * from './field-factories';
+export * from './section-factories';
+export * from './dependencies';
+export * from './transformers';
+export * from './validators';
+export * from './common-forms';

package/src/kit/builder/form/utils/section-factories.ts

@@ -0,0 +1,35 @@
+import { FormBuilderFieldConfig, FormBuilderSectionConfig } from '../components/FormBuilder';
+
+// Section factory functions
+export const createSection = {
+  card: (
+    title: string,
+    fields: FormBuilderFieldConfig[],
+    options: Partial<FormBuilderSectionConfig> = {},
+  ): FormBuilderSectionConfig => ({
+    title,
+    fields,
+    variant: 'card',
+    ...options,
+  }),
+
+  separator: (
+    title: string,
+    fields: FormBuilderFieldConfig[],
+    options: Partial<FormBuilderSectionConfig> = {},
+  ): FormBuilderSectionConfig => ({
+    title,
+    fields,
+    variant: 'separator',
+    ...options,
+  }),
+
+  plain: (
+    fields: FormBuilderFieldConfig[],
+    options: Partial<FormBuilderSectionConfig> = {},
+  ): FormBuilderSectionConfig => ({
+    fields,
+    variant: 'plain',
+    ...options,
+  }),
+};

package/src/kit/builder/form/utils/transformers.ts

@@ -0,0 +1,100 @@
+// Form data transformation helpers
+export const transformers = {
+  // Transform form data before submission
+  cleanEmptyStrings: (data: Record<string, any>): Record<string, any> => {
+    const clean = (obj: any): any => {
+      if (Array.isArray(obj)) {
+        return obj
+          .map(clean)
+          .filter(item => item !== null && item !== undefined);
+      }
+
+      if (obj && typeof obj === 'object') {
+        const cleaned: Record<string, any> = {};
+        Object.keys(obj).forEach((key) => {
+          const value = clean(obj[key]);
+          if (value !== '' && value !== null && value !== undefined) {
+            cleaned[key] = value;
+          }
+        });
+        return cleaned;
+      }
+
+      return obj === '' ? undefined : obj;
+    };
+
+    return clean(data);
+  },
+
+  // Convert string numbers to actual numbers
+  parseNumbers: (
+    data: Record<string, any>,
+    numberFields: string[],
+  ): Record<string, any> => {
+    const parsed = { ...data };
+
+    const parseValue = (obj: any, path: string[] = []): any => {
+      if (Array.isArray(obj)) {
+        return obj.map((item, index) =>
+          parseValue(item, [...path, String(index)]),
+        );
+      }
+
+      if (obj && typeof obj === 'object') {
+        const result: Record<string, any> = {};
+        Object.keys(obj).forEach((key) => {
+          const currentPath = [...path, key].join('.');
+          result[key] = parseValue(obj[key], [...path, key]);
+
+          if (
+            numberFields.includes(currentPath)
+            && typeof result[key] === 'string'
+          ) {
+            const num = Number(result[key]);
+            if (!isNaN(num)) {
+              result[key] = num;
+            }
+          }
+        });
+        return result;
+      }
+
+      return obj;
+    };
+
+    return parseValue(parsed);
+  },
+
+  // Convert dates to ISO strings
+  formatDates: (
+    data: Record<string, any>,
+    dateFields: string[],
+  ): Record<string, any> => {
+    const formatted = { ...data };
+
+    const formatValue = (obj: any, path: string[] = []): any => {
+      if (Array.isArray(obj)) {
+        return obj.map((item, index) =>
+          formatValue(item, [...path, String(index)]),
+        );
+      }
+
+      if (obj && typeof obj === 'object') {
+        const result: Record<string, any> = {};
+        Object.keys(obj).forEach((key) => {
+          const currentPath = [...path, key].join('.');
+          result[key] = formatValue(obj[key], [...path, key]);
+
+          if (dateFields.includes(currentPath) && result[key] instanceof Date) {
+            result[key] = result[key].toISOString();
+          }
+        });
+        return result;
+      }
+
+      return obj;
+    };
+
+    return formatValue(formatted);
+  },
+};

package/src/kit/builder/form/utils/validations.ts

@@ -0,0 +1,22 @@
+import { z } from 'zod';
+
+// Common validation schemas
+export const commonValidations = {
+  email: z.string().email('Please enter a valid email address'),
+  phone: z
+    .string()
+    .regex(/^[\+]?[1-9][\d]{0,15}$/, 'Please enter a valid phone number'),
+  url: z.string().url('Please enter a valid URL'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  strongPassword: z
+    .string()
+    .min(8, 'Password must be at least 8 characters')
+    .regex(
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,
+      'Password must contain uppercase, lowercase, number and special character',
+    ),
+  required: z.string().min(1, 'This field is required'),
+  optionalString: z.string().optional(),
+  positiveNumber: z.number().positive('Must be a positive number'),
+  nonNegativeNumber: z.number().min(0, 'Must be 0 or greater'),
+};

package/src/kit/builder/form/utils/validators.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+// Validation helpers
+export const validators = {
+  // Create conditional validation
+  when: (condition: (data: any) => boolean, schema: z.ZodType<any>) =>
+    z.any().refine(condition, { message: 'Condition not met' }).pipe(schema),
+
+  // Cross-field validation - returns a refinement function to be used on object schemas
+  matchField:
+    (fieldName: string, targetField: string) => (data: Record<string, any>) =>
+      data[fieldName] === data[targetField],
+
+  // Array validation
+  minItems: (min: number, message?: string) =>
+    z.array(z.any()).min(min, message || `Must have at least ${min} items`),
+
+  maxItems: (max: number, message?: string) =>
+    z.array(z.any()).max(max, message || `Must have at most ${max} items`),
+};

package/src/kit/builder/page/Page.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { Button, buttonVariants } from '../../../shadcn/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '../../../shadcn/ui/dropdown-menu';
+import { cn } from '../../../shadcn/lib/utils';
+
+export type PageContainerWidth = 'full' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type PageButtonAction = {
+  type: 'button';
+  key?: string;
+  label: React.ReactNode;
+  onClick?: () => void;
+  variant?: React.ComponentProps<typeof Button>['variant'];
+  size?: React.ComponentProps<typeof Button>['size'];
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+
+export type PageDropdownActionItem = {
+  key?: string;
+  label: React.ReactNode;
+  onSelect?: () => void;
+  destructive?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+};
+
+export type PageDropdownAction = {
+  type: 'dropdown';
+  key?: string;
+  trigger: Omit<PageButtonAction, 'type'>;
+  items: (PageDropdownActionItem | { type: 'separator'; key?: string; })[];
+};
+
+export type PageAction = PageButtonAction | PageDropdownAction;
+
+export type PageProps = {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  actions?: PageAction[];
+  containerWidth?: PageContainerWidth;
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  footerLeft?: React.ReactNode;
+  footerRight?: React.ReactNode;
+  children?: React.ReactNode;
+};
+
+const widthToClass: Record<PageContainerWidth, string> = {
+  full: 'max-w-none',
+  sm: 'max-w-screen-sm',
+  md: 'max-w-screen-md',
+  lg: 'max-w-screen-lg',
+  xl: 'max-w-screen-xl',
+};
+
+function renderAction(action: PageAction) {
+  if (action.type === 'button') {
+    const { label, onClick, variant, size, leftIcon, rightIcon, disabled, className } = action;
+    return (
+      <Button
+        key={action.key ?? String(label)}
+        onClick={onClick}
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        className={className}
+      >
+        {leftIcon}
+        <span>{label}</span>
+        {rightIcon}
+      </Button>
+    );
+  }
+
+  const { trigger, items } = action;
+  return (
+    <DropdownMenu key={action.key ?? String(trigger.label)}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            buttonVariants({ variant: trigger.variant, size: trigger.size }),
+            trigger.className
+          )}
+          onClick={trigger.onClick}
+          disabled={trigger.disabled}
+        >
+          {trigger.leftIcon}
+          <span>{trigger.label}</span>
+          {trigger.rightIcon}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {items.map((item, idx) => {
+          // Narrow the union: if the object has a `type` key, it's a separator variant
+          if ('type' in item) {
+            return <DropdownMenuSeparator key={item.key ?? `sep-${idx}`} />;
+          }
+          // Otherwise it's a normal dropdown action item
+          return (
+            <DropdownMenuItem
+              key={item.key ?? String(item.label)}
+              onSelect={(e) => {
+                e.preventDefault();
+                item.onSelect?.();
+              }}
+              variant={item.destructive ? 'destructive' : 'default'}
+            >
+              <div className="flex items-center gap-2">
+                {item.leftIcon}
+                <span>{item.label}</span>
+                {item.rightIcon}
+              </div>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function Page({
+  title,
+  subtitle,
+  actions,
+  containerWidth = 'lg',
+  className,
+  headerClassName,
+  contentClassName,
+  footerLeft,
+  footerRight,
+  children,
+}: PageProps) {
+  return (
+    <div className={cn('w-full', className)}>
+      <div className={cn('px-4 sm:px-6 lg:px-8', widthToClass[containerWidth], 'mx-auto')}>
+        <header className={cn('flex items-start justify-between gap-3 py-6', headerClassName)}>
+          <div className="flex min-w-0 flex-col gap-1">
+            <h1 className="text-2xl font-semibold leading-none tracking-tight text-foreground">
+              {title}
+            </h1>
+            {subtitle ? (
+              <p className="text-sm text-muted-foreground">{subtitle}</p>
+            ) : null}
+          </div>
+          {actions && actions.length > 0 ? (
+            <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+              {actions.map(renderAction)}
+            </div>
+          ) : null}
+        </header>
+
+        <main className={cn('pb-8', contentClassName)}>{children}</main>
+
+        {(footerLeft || footerRight) && (
+          <footer className="border-t pt-4 pb-8">
+            <div className={cn('px-0', widthToClass[containerWidth])}>
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  {footerLeft}
+                </div>
+                <div className="flex items-center gap-2">{footerRight}</div>
+              </div>
+            </div>
+          </footer>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Page;

package/src/kit/builder/page/index.ts

@@ -0,0 +1 @@
+export * from './Page'