@oneplatformdev/ui 0.0.1-beta.99 → 0.1.0-8

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/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/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/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'

package/src_old/FormTextarea/FormTextarea.tsx

@@ -0,0 +1,28 @@
+import { FormControl, FormRenderControl } from '../Form';
+import { FormTextareaProps } from './FormTextarea.types';
+import { FieldValues } from 'react-hook-form';
+import { Textarea } from '../Textarea';
+
+// TODO: add description
+export const FormTextarea = <Data extends FieldValues>(
+  props: FormTextareaProps<Data>
+) => {
+const { form, label, name, containerProps, ...rest } = props;
+    return (
+        <FormRenderControl
+            form={form}
+            name={name}
+            label={label}
+            containerProps={containerProps}
+            render={({ field }) => (
+              <FormControl>
+                <Textarea
+                  {...field}
+                  value={field.value || ''}
+                  {...rest}
+                />
+              </FormControl>
+            )}
+        />
+    )
+};

package/src_old/FormTextarea/FormTextarea.types.tsx

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

package/src_old/FormTextarea/index.tsx

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

package/src_old/Header/Header.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+import { SidebarTrigger } from "../Sidebar";
+import { Separator } from "../Separator";
+import { HeaderProps } from "./Header.types";
+
+export const Header: React.FC<React.PropsWithChildren<HeaderProps>> = (props) => {
+  const {
+    children,
+    hideTrigger = false,
+  } = props;
+  return (
+    <header
+      className="flex h-16 shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
+    >
+      {!hideTrigger && (
+        <div className="flex items-center gap-2">
+          <SidebarTrigger className="ml-1"/>
+          <Separator orientation="vertical" className="mr-2 h-4"/>
+        </div>
+      )}
+      {Boolean(hideTrigger)
+        ? children
+        : (
+          <div className="flex-1 text-right pr-6">
+            {children}
+          </div>
+        )
+      }
+    </header>
+  )
+}
+
+export default Header;

package/src_old/Header/Header.types.tsx

@@ -0,0 +1,3 @@
+export interface HeaderProps {
+  hideTrigger?: boolean;
+}

package/src_old/Header/index.ts

@@ -0,0 +1,2 @@
+export {Header, default} from './Header'
+export type * from './Header.types'

package/src_old/HoverCard/HoverCard.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@oneplatformdev/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src_old/Input/Input.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { inputVariants } from './inputVariants';
+
+import { cn } from '@oneplatformdev/utils';
+import { InputProps } from './Input.types';
+
+export const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => {
+    const {
+      className,
+      variant,
+      type,
+      slotProps: { input, wrapper } = {},
+      onChange,
+      onTransform,
+      ...rest
+    } = props;
+    const {
+      startAdornment,
+      className: classNameInputSlotProps,
+      ...restInputSlotProps
+    } = input || {};
+    return (
+      <div {...(wrapper || {})} className={cn('relative', wrapper?.className)}>
+        {Boolean(startAdornment) && (
+          <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
+            {startAdornment}
+          </span>
+        )}
+        <input
+          type={type}
+          className={cn(
+            inputVariants({ variant, className }),
+            Boolean(startAdornment) && 'pl-8',
+            classNameInputSlotProps
+          )}
+          ref={ref}
+          {...restInputSlotProps}
+          {...rest}
+          onChange={(e) => {
+            if (typeof onTransform?.(e.target.value, e) === 'string') {
+              e.target.value = onTransform(e.target.value, e);
+            }
+            if (onChange) onChange(e);
+          }}
+        />
+      </div>
+    );
+  }
+);
+BaseInput.displayName = 'Input';
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => {
+    const [isVisible, setIsVisible] = useState<boolean>(false);
+
+    const inputType = isVisible ? 'text' : 'password';
+
+    const toggleVisibility = () => {
+      setIsVisible(!isVisible);
+    };
+
+    return (
+      <div {...(props?.slotProps?.wrapper || {})} className={cn('relative', props?.slotProps?.wrapper?.className)}>
+        <BaseInput {...props} type={inputType} className="pr-8" ref={ref} />
+        <VisibilityButton isVisible={isVisible} onClick={toggleVisibility} />
+      </div>
+    );
+  }
+);
+PasswordInput.displayName = 'PasswordInput';
+
+type VisibilityButtonProps = {
+  isVisible: boolean
+  onClick: () => void
+}
+
+const VisibilityButton = ({ isVisible, onClick }:VisibilityButtonProps) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="absolute top-1/2 right-3 transform -translate-y-1/2"
+  >
+    {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}
+  </button>
+);
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ type, ...props }, ref) => {
+    if (type === 'password') return <PasswordInput type={type} {...props} ref={ref} />;
+    return <BaseInput type={type} {...props} ref={ref} />;
+  }
+);
+Input.displayName = 'Input';