Add form input components with field wrapper for Medusa UI

Author: cursoragent

packages/medusa-forms/src/ui/CurrencyInput.tsx

@@ -0,0 +1,14 @@
+import { CurrencyInput as MedusaCurrencyInput } from '@medusajs/ui';
+import { type FC } from 'react';
+import { FieldWrapper } from './FieldWrapper';
+import type { BasicFieldProps, MedusaCurrencyInputProps } from './types';
+
+export type Props = MedusaCurrencyInputProps & BasicFieldProps & {
+  ref?: React.Ref<HTMLInputElement>;
+};
+
+const Wrapper = FieldWrapper<Props>;
+
+export const CurrencyInput: FC<Props> = ({ ref, ...props }) => (
+  <Wrapper {...props}>{(inputProps) => <MedusaCurrencyInput {...inputProps} ref={ref} />}</Wrapper>
+);

packages/medusa-forms/src/ui/DatePicker.tsx

@@ -0,0 +1,14 @@
+import { DatePicker } from '@medusajs/ui';
+import { type FC } from 'react';
+import { FieldWrapper } from './FieldWrapper';
+import type { BasicFieldProps, DatePickerProps } from './types';
+
+export type Props = DatePickerProps & BasicFieldProps & {
+  ref?: React.Ref<HTMLInputElement>;
+};
+
+const Wrapper = FieldWrapper<Props>;
+
+export const DatePickerInput: FC<Props> = ({ ref, ...props }) => {
+  return <Wrapper {...props}>{(inputProps) => <DatePicker {...{ ...inputProps, ref }} />}</Wrapper>;
+};

packages/medusa-forms/src/ui/FieldCheckbox.tsx

@@ -0,0 +1,59 @@
+import { Checkbox as MedusaCheckbox } from '@medusajs/ui';
+import clsx from 'clsx';
+import { FieldWrapper } from './FieldWrapper';
+import { Label } from './Label';
+import type { BasicFieldProps } from './types';
+
+export type CheckedState = boolean | 'indeterminate';
+export type FieldCheckboxProps = BasicFieldProps & {
+  checked?: CheckedState;
+  onChange?: (checked: CheckedState) => void;
+  ref?: React.Ref<HTMLButtonElement>;
+};
+
+export const FieldCheckbox: React.FC<FieldCheckboxProps> = ({ 
+  label, 
+  labelClassName, 
+  labelTooltip, 
+  wrapperClassName, 
+  errorClassName, 
+  formErrors, 
+  onChange, 
+  ref,
+  ...props 
+}) => {
+  return (
+    <FieldWrapper<FieldCheckboxProps>
+      wrapperClassName={wrapperClassName}
+      errorClassName={errorClassName}
+      formErrors={formErrors}
+      {...props}
+    >
+      {(fieldProps) => (
+        <div className="flex items-center">
+          <MedusaCheckbox
+            {...fieldProps}
+            ref={ref}
+            checked={props.checked}
+            onChange={(e) => {}}
+            onCheckedChange={(checked) => {
+              onChange?.(checked);
+            }}
+          />
+
+          {label && (
+            <Label
+              htmlFor={props.name}
+              onClick={() => {
+                onChange?.(!props.checked);
+              }}
+              className={clsx('ml-2 !mb-0 font-normal [&>label]:!cursor-pointer', labelClassName)}
+            >
+              {label}
+            </Label>
+          )}
+        </div>
+      )}
+    </FieldWrapper>
+  );
+};

packages/medusa-forms/src/ui/Input.tsx

@@ -0,0 +1,13 @@
+import { Input as MedusaInput } from '@medusajs/ui';
+import { FieldWrapper } from './FieldWrapper';
+import type { BasicFieldProps, MedusaInputProps } from './types';
+
+export type Props = MedusaInputProps & BasicFieldProps & {
+  ref?: React.Ref<HTMLInputElement>;
+};
+
+const Wrapper = FieldWrapper<Props>;
+
+export const Input: React.FC<Props> = ({ ref, ...props }) => (
+  <Wrapper {...props}>{(inputProps) => <MedusaInput {...inputProps} ref={ref} />}</Wrapper>
+);

packages/medusa-forms/src/ui/Select.tsx

@@ -0,0 +1,31 @@
+import { Select as MedusaSelect } from '@medusajs/ui';
+import { FieldWrapper } from './FieldWrapper';
+import type { BasicFieldProps, SelectProps } from './types';
+
+export type Props = SelectProps & BasicFieldProps & {
+  ref?: React.Ref<unknown>;
+};
+
+const Wrapper = FieldWrapper<Props>;
+
+const SelectComponent: React.FC<Props> = ({ ref, ...props }) => {
+  return (
+    <Wrapper {...props}>
+      {(inputProps) => <MedusaSelect {...{ ...inputProps, ref }}>{props.children}</MedusaSelect>}
+    </Wrapper>
+  );
+};
+
+type SelectComponent = typeof SelectComponent & {
+  Trigger: typeof MedusaSelect.Trigger;
+  Value: typeof MedusaSelect.Value;
+  Content: typeof MedusaSelect.Content;
+  Item: typeof MedusaSelect.Item;
+};
+
+export const Select: SelectComponent = Object.assign(SelectComponent, {
+  Trigger: MedusaSelect.Trigger,
+  Value: MedusaSelect.Value,
+  Content: MedusaSelect.Content,
+  Item: MedusaSelect.Item,
+});

packages/medusa-forms/src/ui/TextArea.tsx

@@ -0,0 +1,13 @@
+import { Textarea } from '@medusajs/ui';
+import { FieldWrapper } from './FieldWrapper';
+import type { BasicFieldProps, TextAreaProps } from './types';
+
+export type Props = TextAreaProps & BasicFieldProps & {
+  ref?: React.Ref<HTMLTextAreaElement>;
+};
+
+const Wrapper = FieldWrapper<Props>;
+
+export const TextArea: React.FC<Props> = ({ ref, ...props }) => (
+  <Wrapper {...props}>{(inputProps) => <Textarea {...inputProps} ref={ref} />}</Wrapper>
+);