@adlas/create-app 1.0.6 → 1.0.8

package/templates/boilerplate/components/ui/Select.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+
+import { extendVariants, Select as HerouiSelect } from '@heroui/react';
+
+const BaseSelect = extendVariants(HerouiSelect, {
+  variants: {
+    color: {},
+    isDisabled: { true: {} },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  compoundVariants: [],
+});
+
+const CustomizedSelect = (props: ComponentProps<typeof BaseSelect>) => {
+  return <BaseSelect {...props} />;
+};
+
+export { CustomizedSelect as Select };

package/templates/boilerplate/components/ui/Tabs.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { extendVariants, Tabs as HerouiTabs } from '@heroui/react';
+
+const Tabs = extendVariants(HerouiTabs, {
+  variants: {
+    color: {},
+    isDisabled: { true: {} },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  compoundVariants: [],
+});
+
+export { Tabs };

package/templates/boilerplate/components/ui/Textarea.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { ComponentProps, FormEvent } from 'react';
+
+import { extendVariants, Textarea as HerouiTextArea } from '@heroui/react';
+
+const BaseTextarea = extendVariants(HerouiTextArea, {
+  variants: {
+    color: {},
+    isDisabled: { true: {} },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  compoundVariants: [],
+});
+
+const Textarea = (props: ComponentProps<typeof BaseTextarea>) => {
+  const { onInput, ...restProps } = props;
+
+  const handleInput = (e: FormEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLTextAreaElement;
+
+    if (target.value.startsWith(' ')) {
+      target.value = target.value.trimStart();
+    }
+
+    if (onInput) {
+      onInput(e);
+    }
+  };
+
+  return <BaseTextarea onInput={handleInput} {...restProps} />;
+};
+
+export { Textarea };

package/templates/boilerplate/components/ui/form/Form.tsx

@@ -0,0 +1,277 @@
+'use client';
+import type { InputProps } from '@heroui/react';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { FieldValues, Path, Resolver, UseFormReturn } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { use, useEffect, useMemo } from 'react';
+
+import clsx from 'clsx';
+import { useTranslations } from 'next-intl';
+import { Controller, useForm } from 'react-hook-form';
+import { z as zod } from 'zod';
+
+import type { FormFieldValidation } from '@/validations';
+
+import { createZodErrorMap } from '@/validations/zodErrorMap';
+
+import type { FileValidationError } from '../DocumentUpload';
+
+import { FormContext } from './FormContext';
+
+/**
+ * Translation function type
+ */
+type TranslationFn = (key: string, params?: Record<string, unknown>) => string;
+
+/**
+ * Translates error message if it's a translation key
+ * Handles both simple keys and keys with parameters
+ */
+function translateErrorMessage(message: string | undefined, t: TranslationFn): string | undefined {
+  if (!message) {
+    return undefined;
+  }
+
+  // Check if message is a translation key (starts with "Validations.")
+  if (message.includes('.') && message.startsWith('Validations.')) {
+    try {
+      return t(message);
+    } catch {
+      // If translation fails, return original message
+      return message;
+    }
+  }
+
+  // Return as-is if not a translation key
+  return message;
+}
+
+// Type-safe resolver wrapper that handles zod version compatibility
+function createZodResolver<T extends FieldValues>(schema: z.ZodType<T>): Resolver<T> {
+  return ((_values: T, _context: object, _options: { criteriaMode?: string; names?: string[] }) => {
+    try {
+      const result = schema.safeParse(_values);
+
+      if (result.success) {
+        return { values: _values, errors: {} };
+      }
+
+      const errors: Record<string, { type: string; message: string }> = {};
+
+      result.error.issues.forEach(issue => {
+        const path = issue.path.join('.');
+
+        if (path) {
+          errors[path] = {
+            type: 'validation',
+            message: issue.message,
+          };
+        }
+      });
+
+      return { values: {}, errors };
+    } catch {
+      return { values: {}, errors: {} };
+    }
+  }) as Resolver<T>;
+}
+
+type FormProps<T extends FieldValues> = {
+  children: ReactNode;
+  validationSchema?: z.ZodType<T>;
+  form?: UseFormReturn<T>;
+  fieldValidation?: Record<keyof T, FormFieldValidation>;
+  className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+
+export type FieldEvent = {
+  target?: {
+    value?: string | File | FileValidationError | null;
+  };
+};
+
+export type BaseFormFieldProps = {
+  onChange?: (e: FieldEvent) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  value?: string;
+  defaultValue?: string;
+  isInvalid?: boolean;
+  errorMessage?: string;
+  name?: string;
+  disabled?: boolean;
+};
+
+export type FormFieldProps = BaseFormFieldProps &
+  Partial<Omit<InputProps, keyof BaseFormFieldProps>>;
+
+/**
+ * FormFieldKeys provides automatic type suggestions for form field names.
+ * When typing the field name as a string, you'll get autocompletion for all available fields
+ * defined in your form schema.
+ *
+ * Usage example:
+ * <FormItem name="phone_number"> // You'll get suggestions when typing
+ */
+// export type FormFieldKeys<T extends FieldValues> = Extract<keyof T, string> & Path<T>;
+
+export type FormItemPropsT<T extends FieldValues> = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  // Use more direct type for better IDE autocompletion
+  name: keyof T;
+  form?: UseFormReturn<T>;
+  label?: string;
+  rowsNumber?: 1 | 2;
+  validation?: FormFieldValidation;
+  overrideOnChange?: (value: string) => string;
+  children: (props: BaseFormFieldProps) => ReactElement;
+  isDisabled?: boolean;
+  extraLabel?: string;
+};
+
+function FormComponent<T extends FieldValues>({
+  children,
+  validationSchema,
+  form: externalForm,
+  fieldValidation,
+  className,
+  ...props
+}: FormProps<T>) {
+  const t = useTranslations() as TranslationFn;
+
+  // Set global error map for Zod translations when component mounts
+  useEffect(() => {
+    const errorMap = createZodErrorMap(t);
+    zod.setErrorMap(errorMap);
+  }, [t]);
+
+  const internalForm = useForm<T>({
+    ...(validationSchema && {
+      resolver: createZodResolver(validationSchema),
+    }),
+  });
+
+  const form = externalForm || internalForm;
+
+  const contextValue = useMemo(() => ({ form: form as UseFormReturn<FieldValues> }), [form]);
+
+  return (
+    <FormContext value={contextValue}>
+      <div
+        className={clsx('grid grid-cols-10 justify-between gap-6 max-sm:gap-4', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </FormContext>
+  );
+}
+
+function FormItemComponent<T extends FieldValues>({
+  name,
+  children,
+  validation,
+  form: propForm,
+  className,
+  rowsNumber = 1,
+  overrideOnChange,
+  extraLabel,
+  isDisabled,
+  ...props
+}: FormItemPropsT<T>) {
+  const context = use(FormContext);
+  const form: UseFormReturn<T> = propForm || (context?.form as UseFormReturn<T>);
+  const t = useTranslations() as TranslationFn;
+
+  if (!form) {
+    throw new Error('FormItem must be used within a Form or with a form prop');
+  }
+
+  // Get all available field names from the form schema
+  const availableFields = Object.keys(form.getValues());
+
+  // Convert name to string for validation
+  const nameStr = String(name);
+
+  // Validate the field name
+  if (!nameStr || !availableFields.includes(nameStr)) {
+    const suggestion = nameStr
+      ? availableFields.find(field => field.toLowerCase().includes(nameStr.toLowerCase()))
+      : null;
+
+    const errorMessage = nameStr
+      ? `Field name "${nameStr}" does not exist in the form schema.`
+      : 'Empty field name is not allowed.';
+
+    const suggestions =
+      availableFields.length > 0
+        ? `Available fields are: ${availableFields.join(', ')}`
+        : 'No fields available in this form.';
+
+    const suggestedField = suggestion ? `Did you mean "${suggestion}"?` : '';
+
+    console.error(`${errorMessage} ${suggestions} ${suggestedField}`);
+
+    throw new Error(`${errorMessage} ${suggestions} ${suggestedField}`);
+  }
+
+  const itemClassName = clsx(
+    'flex flex-col',
+    rowsNumber === 2 ? 'col-span-5! max-xs:col-span-10!' : 'col-span-10',
+    className,
+  );
+
+  return (
+    <div className={itemClassName} {...props}>
+      {extraLabel && (
+        <span className="mb-2 text-sm leading-5 font-medium text-default-600">{extraLabel}</span>
+      )}
+      <Controller
+        control={form.control}
+        name={nameStr as Path<T>}
+        render={({ field: { onChange, disabled, onBlur, value: formValue }, fieldState }) => {
+          const fieldProps: BaseFormFieldProps = {
+            onChange: (e: FieldEvent) => {
+              const targetValue = e?.target?.value;
+
+              if (targetValue === null || targetValue === undefined) {
+                onChange('');
+              } else if (typeof targetValue === 'string') {
+                onChange(overrideOnChange ? overrideOnChange(targetValue) : targetValue);
+              } else if (targetValue instanceof File) {
+                // File type
+                onChange(targetValue);
+              } else {
+                // FileValidationError type
+                onChange(targetValue);
+              }
+            },
+            onBlur,
+            onFocus: () => {
+              // Trigger validation if needed
+              if (validation) {
+                form.trigger(nameStr as Path<T>);
+              }
+            },
+            value: (formValue as string) ?? '',
+            defaultValue: (formValue as string) ?? '',
+            isInvalid: fieldState.invalid,
+            errorMessage: translateErrorMessage(fieldState.error?.message, t),
+            name: nameStr,
+            disabled: isDisabled || disabled,
+          };
+
+          return children(fieldProps);
+        }}
+      />
+    </div>
+  );
+}
+
+FormComponent.Item = FormItemComponent;
+
+export const Form = FormComponent;
+export const FormItem = FormItemComponent;

package/templates/boilerplate/components/ui/form/FormContext.tsx

@@ -0,0 +1,10 @@
+'use client';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+
+import { createContext } from 'react';
+
+export type FormContextValue<T extends FieldValues = FieldValues> = {
+  form: UseFormReturn<T>;
+};
+
+export const FormContext = createContext<FormContextValue<FieldValues> | null>(null);

package/templates/boilerplate/components/ui/form/FormGenerator.tsx

@@ -0,0 +1,304 @@
+'use client';
+import type { DatePickerProps, InputProps, Selection, SelectProps } from '@heroui/react';
+import type { UseFormReturn } from 'react-hook-form';
+
+import { AutocompleteItem, SelectItem } from '@heroui/react';
+
+import type { BaseFormFieldProps } from './Form';
+
+import { Autocomplete } from '../Autocomplete';
+import { DatePicker } from '../DatePicker';
+import { DocumentUpload } from '../DocumentUpload';
+import { Input } from '../Input';
+import { NumberInput } from '../NumberInput';
+import { PasswordInput } from '../PasswordInput';
+import { Select } from '../Select';
+import { Textarea } from '../Textarea';
+import { Form } from './Form';
+
+type BaseFieldProps = {
+  name: string;
+  label?: string;
+  placeholder?: string;
+  extraLabel?: string;
+  className?: string;
+  rowsNumber?: 1 | 2;
+  overrideOnChange?: (value: string) => string;
+};
+
+type SelectOption = {
+  label: string;
+  value: string | number;
+};
+
+// Specific field type definitions
+type FormTextInputField = {
+  type: 'textInput' | 'numberInput' | 'passwordInput' | 'textarea' | 'persianInput';
+  inputProps?: Omit<InputProps, keyof BaseFormFieldProps>;
+};
+
+type FormSelectField = {
+  type: 'select' | 'autocomplete';
+  options: SelectOption[];
+  selectProps?: Omit<SelectProps, keyof BaseFormFieldProps | 'children' | 'ref'>;
+};
+
+type FormDocumentUploadField = {
+  type: 'documentUpload';
+  description?: string;
+  required?: boolean;
+  accept?: string;
+  maxSize?: number;
+  multiple?: boolean;
+  /** If true, file will not be uploaded immediately - parent handles upload */
+  deferUpload?: boolean;
+  /** Callback when file is selected (for deferred upload mode) */
+  onFileSelected?: (file: File | null) => void;
+};
+
+type FormDatePickerField = {
+  type: 'datePicker';
+  datePickerProps?: Omit<DatePickerProps, keyof BaseFormFieldProps | 'onChange' | 'value'>;
+};
+
+export type FormGeneratorField = (
+  | FormTextInputField
+  | FormSelectField
+  | FormDocumentUploadField
+  | FormDatePickerField
+) &
+  BaseFieldProps;
+
+export type FormGeneratorProps<
+  TFormValues extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  fields: FormGeneratorField[];
+  className?: string;
+  form?: UseFormReturn<TFormValues>;
+  onSubmit?: (data: TFormValues) => void | Promise<void>;
+  isDisabled?: boolean;
+  rowsNumber?: 1 | 2;
+};
+
+const FormGenerator = <TFormValues extends Record<string, unknown> = Record<string, unknown>>({
+  fields,
+  className,
+  form,
+  isDisabled,
+  rowsNumber,
+}: FormGeneratorProps<TFormValues>) => {
+  const renderField = (field: FormGeneratorField) => {
+    switch (field.type) {
+      case 'textInput':
+        return (props: BaseFormFieldProps) => (
+          <Input
+            label={field.label}
+            placeholder={field.placeholder}
+            {...field.inputProps}
+            {...props}
+            ref={undefined}
+            isDisabled={isDisabled || field.inputProps?.isDisabled}
+          />
+        );
+
+      case 'textarea':
+        return (props: BaseFormFieldProps) => (
+          <Textarea
+            label={field.label}
+            placeholder={field.placeholder}
+            {...field.inputProps}
+            {...props}
+            ref={undefined}
+            isDisabled={isDisabled || field.inputProps?.isDisabled}
+          />
+        );
+
+      case 'numberInput':
+        return (props: BaseFormFieldProps) => {
+          const numberInputProps = {
+            label: field.label,
+            ...field.inputProps,
+            ...props,
+            isDisabled,
+          };
+
+          return (
+            <NumberInput
+              {...numberInputProps}
+              isDisabled={isDisabled || field.inputProps?.isDisabled}
+            />
+          );
+        };
+
+      case 'passwordInput':
+        return (props: BaseFormFieldProps) => (
+          <PasswordInput
+            label={field.label}
+            placeholder={field.placeholder}
+            {...field.inputProps}
+            {...props}
+            ref={undefined}
+            isDisabled={isDisabled || field.inputProps?.isDisabled}
+          />
+        );
+
+      case 'select': {
+        const { options } = field;
+
+        return (props: BaseFormFieldProps) => {
+          const { value, onChange, disabled } = props;
+
+          return (
+            <Select
+              label={field.label}
+              placeholder={field.placeholder}
+              aria-label={field.label || field.name}
+              selectedKeys={value ? [value] : []}
+              isDisabled={disabled || isDisabled || field.selectProps?.isDisabled}
+              onSelectionChange={(keys: Selection) => {
+                const selectedKey = Array.from(keys)[0];
+                onChange?.({ target: { value: selectedKey?.toString() } });
+              }}
+            >
+              {options.map(option => (
+                <SelectItem key={option.value} textValue={option.label}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </Select>
+          );
+        };
+      }
+
+      case 'autocomplete': {
+        const { options, ...autocompleteProps } = field;
+
+        return (props: BaseFormFieldProps) => {
+          const { value, onChange, ...restProps } = props;
+
+          return (
+            <Autocomplete
+              ref={undefined}
+              aria-label={field.label || field.name}
+              label={field.label}
+              selectedKey={value || null}
+              onSelectionChange={key => {
+                onChange?.({ target: { value: key ? key?.toString() : '' } });
+              }}
+              {...autocompleteProps}
+              {...restProps}
+              isDisabled={isDisabled || field.selectProps?.isDisabled || props.disabled}
+            >
+              {options.map(option => (
+                <AutocompleteItem key={option.value} textValue={option.label}>
+                  {option.label}
+                </AutocompleteItem>
+              ))}
+            </Autocomplete>
+          );
+        };
+      }
+
+      case 'documentUpload': {
+        return (props: BaseFormFieldProps) => {
+          const { value, onChange, ...restProps } = props;
+
+          return (
+            <DocumentUpload
+              accept={field.accept}
+              description={field.description}
+              errorMessage={restProps.errorMessage}
+              hasError={props.isInvalid}
+              label={field.label || ''}
+              maxSize={field.maxSize}
+              required={field.required}
+              deferUpload={field.deferUpload}
+              value={typeof value === 'string' ? value : null}
+              onChange={fileOrError => {
+                if (
+                  field.deferUpload &&
+                  fileOrError &&
+                  typeof fileOrError === 'object' &&
+                  'isValidationError' in fileOrError
+                ) {
+                  // Handle validation error in deferred mode
+                  onChange?.({ target: { value: '' } });
+                  field.onFileSelected?.(null);
+                } else if (field.deferUpload && fileOrError instanceof File) {
+                  // In deferred mode, set blob URL first to satisfy validation
+                  const blobUrl = URL.createObjectURL(fileOrError);
+                  onChange?.({ target: { value: blobUrl } });
+                  // Then call the callback with the file
+                  field.onFileSelected?.(fileOrError);
+                } else if (field.deferUpload && fileOrError === null) {
+                  // File was removed in deferred mode
+                  onChange?.({ target: { value: '' } });
+                  field.onFileSelected?.(null);
+                } else if (!field.deferUpload) {
+                  // In immediate mode, don't update form value - wait for onImageUploaded
+                }
+              }}
+              onImageUploaded={(_imageId, imageUrl) => {
+                // Update form value with the uploaded image URL string (immediate mode only)
+                if (!field.deferUpload) {
+                  onChange?.({ target: { value: imageUrl } });
+                }
+              }}
+              onError={() => {
+                // Clear the value on error
+                onChange?.({ target: { value: '' } });
+              }}
+              {...restProps}
+            />
+          );
+        };
+      }
+
+      case 'datePicker': {
+        return (props: BaseFormFieldProps) => {
+          const { value, onChange, disabled, isInvalid, errorMessage } = props;
+          const { color: _, ...datePickerProps } = (field.datePickerProps || {}) as Record<
+            string,
+            unknown
+          > & { color?: string };
+
+          return (
+            <DatePicker
+              label={field.label}
+              value={value || null}
+              onChange={dateValue => {
+                onChange?.({ target: { value: dateValue || '' } });
+              }}
+              isDisabled={disabled || isDisabled || field.datePickerProps?.isDisabled}
+              isInvalid={isInvalid}
+              errorMessage={errorMessage}
+              {...datePickerProps}
+            />
+          );
+        };
+      }
+
+      default:
+        return (props: BaseFormFieldProps) => <Input {...props} isDisabled={isDisabled} />;
+    }
+  };
+
+  return (
+    <Form className={className} form={form}>
+      {fields.map(field => (
+        <Form.Item
+          key={field.name}
+          className={field.className}
+          extraLabel={field.extraLabel}
+          name={field.name}
+          overrideOnChange={field.overrideOnChange}
+          rowsNumber={rowsNumber || field.rowsNumber || 1}
+        >
+          {renderField(field)}
+        </Form.Item>
+      ))}
+    </Form>
+  );
+};
+
+export { FormGenerator };

package/templates/boilerplate/components/ui/index.ts

@@ -0,0 +1,19 @@
+export * from './Autocomplete';
+export * from './Breadcrumbs';
+export * from './Button';
+export * from './Checkbox';
+export * from './Chip';
+export * from './DatePicker';
+export * from './DocumentUpload';
+export * from './form/Form';
+export * from './form/FormContext';
+export * from './form/FormGenerator';
+export * from './Icon';
+export * from './Input';
+export * from './Modal';
+export * from './NumberInput';
+export * from './PasswordInput';
+export * from './RadioGroup';
+export * from './Select';
+export * from './Tabs';
+export * from './Textarea';