@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

package/src_old/Form/Form.tsx

@@ -1,181 +0,0 @@
-'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

@@ -1,23 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

package/src_old/FormCheckbox/FormCheckbox.tsx

@@ -1,34 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

package/src_old/FormCombobox/FormCombobox.tsx

@@ -1,27 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src_old/FormDatePicker/FormDatePicker.tsx

@@ -1,33 +0,0 @@
-'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

@@ -1,9 +0,0 @@
-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

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

package/src_old/FormDropzone/FormDropzone.tsx

@@ -1,23 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src_old/FormInput/FormInput.tsx

@@ -1,109 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src_old/FormRadio/FormRadio.tsx

@@ -1,54 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

package/src_old/FormSelect/FormSelect.tsx

@@ -1,44 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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