@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

package/src_old/Form/Form.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form';
+
+import { cn } from '@oneplatformdev/utils';
+import { Label } from '../Label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-1", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      data-state={error ? "invalid" : "valid"}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      data-state={error ? "invalid" : "valid"}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      className={cn('group/form-control', className)}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/src_old/Form/FormRenderControl.tsx

@@ -0,0 +1,23 @@
+import { FormField, FormItem, FormLabel, FormMessage } from './Form';
+import { FormRenderControlProps } from './FormRenderControl.types';
+import { FieldValues } from 'react-hook-form';
+
+export const FormRenderControl = <Data extends FieldValues>(
+  props: FormRenderControlProps<Data>
+) => {
+  const { form, name, label, render, containerProps = {}, ...rest } = props;
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={(params) => (
+        <FormItem {...containerProps}>
+          {Boolean(label) && <FormLabel>{label}</FormLabel>}
+          {render(params)}
+          <FormMessage />
+        </FormItem>
+      )}
+      {...rest}
+    />
+  );
+};

package/src_old/Form/FormRenderControl.types.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  ControllerFieldState,
+  ControllerRenderProps,
+  FieldPath,
+  FieldValues,
+  UseFormReturn,
+  UseFormStateReturn,
+} from 'react-hook-form';
+
+export type FormRenderProps<Data extends FieldValues> = ({
+  field,
+  fieldState,
+  formState,
+}: {
+  field: ControllerRenderProps<Data, FieldPath<Data>>;
+  fieldState: ControllerFieldState;
+  formState: UseFormStateReturn<Data>;
+}) => React.ReactElement;
+
+export interface FormRenderControlProps<Data extends FieldValues> {
+  form: UseFormReturn<Data>,
+  name: FieldPath<Data>;
+  label?: string;
+  render: FormRenderProps<Data>;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+
+export type FormRenderControlExtendProps<Data extends FieldValues> = Omit<FormRenderControlProps<Data>, 'render'>

package/src_old/Form/index.ts

@@ -0,0 +1,4 @@
+export * from './Form';
+export * from './FormRenderControl';
+
+export type * from './FormRenderControl.types';

package/src_old/FormCheckbox/FormCheckbox.tsx

@@ -0,0 +1,34 @@
+import { FieldValues } from 'react-hook-form';
+
+import { FormControl, FormRenderControl } from '@oneplatformdev/ui/Form';
+
+import { FormCheckboxProps } from './FormCheckbox.types';
+import { CheckboxLabel } from '../Checkbox';
+
+// TODO: move to @oneplatformdev/ui/FormCheckbox
+export const FormCheckbox = <Data extends FieldValues>(
+	props: FormCheckboxProps<Data>
+) => {
+	const { form, label, name, onCheckedChange, ...rest } = props;
+	return (
+		<FormRenderControl
+			form={form}
+			name={name}
+			render={({ field }) => (
+				<FormControl>
+					<CheckboxLabel
+						{...field}
+						{...rest}
+						label={label}
+						checked={field.value || false}
+						onCheckedChange={(v) => {
+							field.onChange(v);
+							onCheckedChange?.(v);
+						}}
+					/>
+				</FormControl>
+			)}
+			{...rest}
+		/>
+	);
+};

package/src_old/FormCheckbox/FormCheckbox.types.tsx

@@ -0,0 +1,10 @@
+import { CheckboxProps } from '../Checkbox';
+import { FieldValues } from 'react-hook-form';
+
+import { FormRenderControlExtendProps } from '../Form';
+
+export interface FormCheckboxProps<Data extends FieldValues>
+  extends FormRenderControlExtendProps<Data>,
+    Omit<CheckboxProps, 'form' | 'name' | 'label'> {
+  disabled?: boolean;
+};

package/src_old/FormCheckbox/index.tsx

@@ -0,0 +1,2 @@
+export * from './FormCheckbox';
+export type * from './FormCheckbox.types';

package/src_old/FormCombobox/FormCombobox.tsx

@@ -0,0 +1,27 @@
+import { FormControl, FormRenderControl } from '../Form';
+import { Combobox } from '../Combobox';
+import { FormComboboxProps } from './FormCombobox.types';
+import { FieldValues } from 'react-hook-form';
+
+// TODO: add description
+export const FormCombobox = <Data extends FieldValues>(
+  props: FormComboboxProps<Data>
+) => {
+  const { form, label, name, ...rest } = props;
+  return (
+    <FormRenderControl
+      form={form}
+      label={label}
+      name={name}
+      render={({ field }) => (
+        <FormControl>
+          <Combobox
+            {...rest}
+            {...field}
+            onChange={field.onChange}
+          />
+        </FormControl>
+      )}
+    />
+  );
+};

package/src_old/FormCombobox/FormCombobox.types.ts

@@ -0,0 +1,7 @@
+import { FieldValues } from 'react-hook-form';
+import { ComboboxProps } from '../Combobox';
+import { FormRenderControlExtendProps } from '../Form';
+
+export interface FormComboboxProps<Data extends FieldValues>
+  extends FormRenderControlExtendProps<Data>,
+    Omit<ComboboxProps, 'value' | 'onChange'> {}

package/src_old/FormCombobox/index.tsx

@@ -0,0 +1,2 @@
+export * from './FormCombobox'
+export type * from './FormCombobox.types'

package/src_old/FormDatePicker/FormDatePicker.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { DatePicker } from '../DatePicker';
+import { FormControl, FormRenderControl } from '../Form';
+import { FieldValues } from 'react-hook-form';
+import { FormDatePickerProps } from './FormDatePicker.types';
+
+// TODO: add description
+export const FormDatePicker = <Data extends FieldValues>(
+  props: FormDatePickerProps<Data>
+) => {
+  const { form, name, label, onDateChange, ...rest } = props;
+  return (
+    <FormRenderControl
+      form={form}
+      name={name}
+      label={label}
+      render={({ field }) => (
+        <FormControl>
+          <DatePicker
+            { ...field }
+            { ...rest }
+            selectedDate={field.value}
+            onDateChange={(date: Date | undefined) => {
+              field.onChange(date);
+              onDateChange?.(date);
+            }}
+          />
+        </FormControl>
+      )}
+    />
+  );
+};

package/src_old/FormDatePicker/FormDatePicker.types.ts

@@ -0,0 +1,9 @@
+import { FieldValues } from 'react-hook-form';
+import { FormRenderControlExtendProps } from '../Form';
+import { DatePickerProps } from '../DatePicker';
+
+export interface FormDatePickerProps<Data extends FieldValues>
+  extends FormRenderControlExtendProps<Data>,
+    Omit<DatePickerProps, 'onDateChange'>,
+    Partial<Pick<DatePickerProps, 'onDateChange'>> {};
+

package/src_old/FormDatePicker/index.tsx

@@ -0,0 +1,3 @@
+export * from './FormDatePicker';
+export { FormDatePicker as default } from './FormDatePicker';
+export type * from './FormDatePicker.types';

package/src_old/FormDropzone/FormDropzone.tsx

@@ -0,0 +1,23 @@
+import { FormControl, FormRenderControl } from '../Form';
+import { Dropzone } from '../Dropzone';
+import { FieldValues } from 'react-hook-form';
+import { FormDropzoneProps } from './FormDropzone.types';
+
+export const FormDropzone = <Data extends FieldValues>(
+  props: FormDropzoneProps<Data>
+) => {
+  const { form, label, name, ...rest } = props;
+
+  return (
+    <FormRenderControl
+      form={form}
+      label={label}
+      name={name}
+      render={({ field }) => (
+        <FormControl>
+          <Dropzone {...rest} {...field} onChangeValue={field.onChange} />
+        </FormControl>
+      )}
+    />
+  );
+};

package/src_old/FormDropzone/FormDropzone.types.ts

@@ -0,0 +1,7 @@
+import { FieldValues } from 'react-hook-form';
+import { DropzoneProps } from '../Dropzone';
+import { FormRenderControlExtendProps } from '../Form';
+
+export interface FormDropzoneProps<Data extends FieldValues>
+  extends FormRenderControlExtendProps<Data>,
+    DropzoneProps {}

package/src_old/FormDropzone/index.tsx

@@ -0,0 +1,2 @@
+export * from "./FormDropzone"
+export * from "./FormDropzone.types"

package/src_old/FormInput/FormInput.tsx

@@ -0,0 +1,109 @@
+import { FormControl, FormRenderControl } from '../Form';
+import { Input } from '../Input';
+import { FormInputProps } from './FormInput.types';
+import { FieldValues, Path, PathValue } from 'react-hook-form';
+import { forwardRef, ReactElement, Ref, RefObject } from 'react';
+
+// TODO: add description
+// export const FormInput = <Data extends FieldValues>(
+//   props: FormInputProps<Data> & { inputRef?: Ref<HTMLInputElement> }
+// ) => {
+//   const { inputRef, form, label, name, onChange, onBlur, style, ...rest } =
+//     props;
+//   return (
+//     <FormRenderControl
+//       form={form}
+//       name={name}
+//       label={label}
+//       render={({ field }) => (
+//         <FormControl>
+//           <Input
+//             {...field}
+//             {...rest}
+//             ref={(el) => {
+//               field.ref(el);
+//               if (typeof inputRef === 'function') {
+//                 inputRef(el);
+//               } else if (inputRef) {
+//                 (inputRef as RefObject<HTMLInputElement | null>).current = el;
+//               }
+//             }}
+//             style={style}
+//             value={field.value || ''}
+//             onChange={(...rest) => {
+//               field.onChange?.(...rest);
+//               onChange?.(...rest);
+//             }}
+//             onBlur={(...rest) => {
+//               field.onBlur?.();
+//               onBlur?.(...rest);
+//             }}
+//           />
+//         </FormControl>
+//       )}
+//     />
+//   );
+// };
+
+function FormInputInner<Data extends FieldValues>(
+  props: FormInputProps<Data>,
+  ref: Ref<HTMLInputElement>
+) {
+  const { form, label, name, onChange, onBlur, onPaste, style, ...rest } = props;
+  return (
+    <FormRenderControl
+      form={form}
+      name={name}
+      label={label}
+      render={({ field }) => (
+        <FormControl>
+          <Input
+            {...field}
+            {...rest}
+            ref={(el) => {
+              field.ref(el);
+              if (typeof ref === 'function') {
+                ref(el);
+              } else if (ref) {
+                (ref as RefObject<HTMLInputElement | null>).current = el;
+              }
+            }}
+            style={style}
+            value={field.value || ''}
+            onChange={(...rest) => {
+              field.onChange?.(...rest);
+              onChange?.(...rest);
+            }}
+            onPaste={(e) => {
+              const pasted = e.clipboardData.getData('text');
+              const t = e.currentTarget;
+
+              const start = t.selectionStart ?? t.value.length;
+              const end = t.selectionEnd ?? t.value.length;
+
+              const next = t.value.slice(0, start) + pasted + t.value.slice(end);
+              const value = next as unknown as PathValue<Data, Path<Data>>;
+
+              e.preventDefault();
+
+              form.setValue(name, value, {
+                shouldDirty: true,
+                shouldTouch: true,
+              });
+
+              onPaste?.(e);
+            }}
+            onBlur={(...rest) => {
+              field.onBlur?.();
+              onBlur?.(...rest);
+            }}
+          />
+        </FormControl>
+      )}
+    />
+  );
+}
+
+export const FormInput = forwardRef(FormInputInner) as <Data extends FieldValues>(
+  props: FormInputProps<Data> & { ref?: Ref<HTMLInputElement> }
+) => ReactElement;

package/src_old/FormInput/FormInput.types.tsx

@@ -0,0 +1,7 @@
+import { FieldValues } from 'react-hook-form';
+import { FormRenderControlExtendProps } from '../Form';
+import { InputProps } from '../Input';
+
+export interface FormInputProps<Data extends FieldValues>
+  extends FormRenderControlExtendProps<Data>,
+    Omit<InputProps, 'form' | 'name'> {}

package/src_old/FormInput/index.tsx

@@ -0,0 +1,2 @@
+export * from './FormInput'
+export type * from './FormInput.types'

package/src_old/FormRadio/FormRadio.tsx

@@ -0,0 +1,54 @@
+import { FieldValues } from 'react-hook-form';
+
+import { FormControl, FormItem } from '../Form/Form';
+import { FormRenderControl } from '../Form/FormRenderControl';
+import { Radio } from '../Radio';
+
+import type { FormRadioGroupProps } from './FormRadio.types.ts';
+
+export const FormRadio = <Data extends FieldValues>(
+  props: FormRadioGroupProps<Data>
+) => {
+  const {
+    form,
+    name,
+    label,
+    onValueChange,
+    value,
+    defaultValue,
+    renderOption,
+    ...rest
+  } = props;
+  return (
+    <FormRenderControl
+      form={form}
+      name={name}
+      label={label}
+      render={({ field }) => (
+        <FormControl>
+          <Radio
+            {...field}
+            {...rest}
+            defaultValue={defaultValue || field.value}
+            value={value || field.value}
+            onValueChange={(value) => {
+              field.onChange(value);
+              onValueChange?.(value);
+            }}
+            renderOption={(option, DefaultOptionComponent) => {
+              return (
+                <FormItem key={option.value}>
+                  <FormControl>
+                    {renderOption?.(option, DefaultOptionComponent) || (
+                      <DefaultOptionComponent {...option} />
+                    )}
+                  </FormControl>
+                </FormItem>
+              );
+            }}
+          />
+        </FormControl>
+      )}
+    />
+  );
+};

package/src_old/FormRadio/FormRadio.types.ts

@@ -0,0 +1,11 @@
+import { FieldValues } from 'react-hook-form';
+
+import type { FormRenderControlExtendProps } from '@oneplatformdev/ui/Form';
+
+import type { RadioProps } from '../Radio';
+
+export interface FormRadioGroupProps<
+	Data extends FieldValues,
+> extends FormRenderControlExtendProps<Data>,
+	Partial<Omit<RadioProps, 'name'>> {
+};

package/src_old/FormRadio/index.ts

@@ -0,0 +1,2 @@
+export * from './FormRadio';
+export type * from './FormRadio.types.ts';

package/src_old/FormSelect/FormSelect.tsx

@@ -0,0 +1,44 @@
+import { FormControl, FormRenderControl } from '../Form';
+import { Select } from '../Select';
+import { FormSelectProps } from './FormSelect.types';
+import { FieldValues } from 'react-hook-form';
+
+// TODO: add description
+export const FormSelect = <Data extends FieldValues, ExtendOptionData>(
+  props: FormSelectProps<Data, ExtendOptionData>
+) => {
+  const {
+    form,
+    label,
+    name,
+    options = [],
+    onChange,
+    containerProps,
+    ...rest
+  } = props;
+
+  return (
+    <FormRenderControl
+      form={form}
+      name={name}
+      label={label}
+      containerProps={containerProps}
+      render={({ field }) => (
+        <Select<ExtendOptionData>
+          value={field.value}
+          options={options}
+          onChange={(value) => {
+            field.onChange(value);
+            onChange?.(value);
+          }}
+          renderTrigger={(_, defaultComponent) => (
+            <FormControl>
+              {defaultComponent}
+            </FormControl>
+          )}
+          {...rest}
+        />
+      )}
+    />
+  );
+};

package/src_old/FormSelect/FormSelect.types.ts

@@ -0,0 +1,8 @@
+import { FieldValues } from 'react-hook-form';
+import { FormRenderControlExtendProps } from '../Form';
+import { SelectProps } from '../Select';
+
+export interface FormSelectProps<Data extends FieldValues, ExtendOptionData>
+  extends FormRenderControlExtendProps<Data>,
+    Omit<SelectProps<ExtendOptionData>, 'onChange'>,
+    Partial<Pick<SelectProps<ExtendOptionData>, 'onChange'>> {}

package/src_old/FormSelect/index.tsx

@@ -0,0 +1,2 @@
+export * from './FormSelect';
+export type * from './FormSelect.types'