@multiplatform.one/components 0.2.0

package/src/forms/FormRadioGroup/index.tsx

@@ -0,0 +1,123 @@
+import React, { useId } from 'react';
+import type { FormControllerProps } from '../types';
+import type { FormFieldProps } from '../FormField';
+import type { SizeTokens, RadioGroupProps, LabelProps } from 'tamagui';
+import { Controller, useFormContext } from 'react-hook-form';
+import { FormField } from '../FormField';
+import { Label, RadioGroup, XStack, YStack } from 'tamagui';
+
+export type FormRadioGroupProps = RadioGroupProps &
+  FormControllerProps & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'> & { horizontal?: boolean } & {
+    labelStyle?: LabelProps;
+  };
+
+export interface FormRadioProps {
+  label: string;
+  value: string;
+  size?: SizeTokens;
+  disabled?: boolean;
+  id?: string;
+}
+
+export interface spacingProps {
+  space?: any;
+  justifyContent?: any;
+  alignItems?: any;
+  alignSelf?: any;
+}
+
+export function FormRadioGroup({
+  children,
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  horizontal,
+  rules,
+  labelStyle,
+  spacingProps,
+  ...radioProps
+}: FormRadioGroupProps & { radioElements: FormRadioProps[] } & { spacingProps?: spacingProps }) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return (
+      <RadioGroup name={name} {...radioProps}>
+        {horizontal ? (
+          <XStack {...spacingProps}>
+            {radioProps.radioElements.map((item) => (
+              <FormRadio {...item} key={item.value} />
+            ))}
+          </XStack>
+        ) : (
+          <YStack {...spacingProps}>
+            {radioProps.radioElements.map((item) => (
+              <FormRadio {...item} key={item.value} />
+            ))}
+          </YStack>
+        )}
+      </RadioGroup>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <RadioGroup
+            name={name}
+            {...radioProps}
+            value={value}
+            onValueChange={(e) => {
+              onChange(e);
+              if (radioProps.onValueChange) radioProps.onValueChange(e);
+            }}
+          >
+            {horizontal ? (
+              <XStack {...spacingProps}>
+                {radioProps.radioElements.map((item) => (
+                  <FormRadio {...item} key={item.value} {...labelStyle} />
+                ))}
+              </XStack>
+            ) : (
+              <YStack {...spacingProps}>
+                {radioProps.radioElements.map((item) => (
+                  <FormRadio {...item} key={item.value} {...labelStyle} />
+                ))}
+              </YStack>
+            )}
+          </RadioGroup>
+        </FormField>
+      )}
+    />
+  );
+}
+
+export function FormRadio({ label, value, size, disabled, id, ...labelStyle }: FormRadioProps) {
+  return (
+    <XStack alignItems="center" space="$1">
+      <RadioGroup.Item value={value} id={id} size={size}>
+        <RadioGroup.Indicator disabled={disabled} />
+      </RadioGroup.Item>
+      <Label size={size} htmlFor={id} {...labelStyle}>
+        {label}
+      </Label>
+    </XStack>
+  );
+}

package/src/forms/FormSelectSimple/FormSelectSimple.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormSelectSimple } from './index';
+import { Select } from 'tamagui';
+
+export default {
+  title: 'forms/FormSelectSimple',
+  component: FormSelectSimple,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <FormSelectSimple name="FormSelectSimple" placeholder="select one of these">
+    <Select.Item index={0} value="bmw">
+      <Select.ItemText>BMW</Select.ItemText>
+    </Select.Item>
+    <Select.Item index={1} value="audi">
+      <Select.ItemText>AUDI</Select.ItemText>
+    </Select.Item>
+    <Select.Item index={2} value="ford">
+      <Select.ItemText>FORD</Select.ItemText>
+    </Select.Item>
+    <Select.Item index={3} value="suzuki">
+      <Select.ItemText>SUZUKI</Select.ItemText>
+    </Select.Item>
+  </FormSelectSimple>
+);

package/src/forms/FormSelectSimple/index.tsx

@@ -0,0 +1,62 @@
+import React, { useId } from 'react';
+import type { FormControllerProps } from '../types';
+import type { FormFieldProps } from '../FormField';
+import type { SelectSimpleProps } from '../SelectSimple';
+import { Controller, useFormContext } from 'react-hook-form';
+import { FormField } from '../FormField';
+import { SelectSimple } from '../SelectSimple';
+
+export type FormSelectSimpleProps = SelectSimpleProps &
+  FormControllerProps & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+
+export function FormSelectSimple({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  ...selectProps
+}: FormSelectSimpleProps) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return (
+      <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
+        <SelectSimple {...selectProps} />
+      </FormField>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <SelectSimple
+            {...selectProps}
+            value={value ?? ''}
+            onValueChange={(e) => {
+              onChange(e);
+              if (selectProps.onValueChange) selectProps.onValueChange(e);
+            }}
+          />
+        </FormField>
+      )}
+    />
+  );
+}

package/src/forms/FormSlider/FormSlider.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormSlider } from './index';
+
+export default {
+  title: 'forms/FormSlider',
+  component: FormSlider,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => <FormSlider name="FormSlider" size={20} />;

package/src/forms/FormSlider/index.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+import React, { useId } from 'react';
+import { SliderProps, SliderThumbProps } from 'tamagui';
+import { Slider } from 'tamagui';
+import { FormControllerProps } from '../types';
+import { FormFieldProps } from '../FormField';
+import { Controller, useFormContext } from 'react-hook-form';
+import { FormField } from '../FormField';
+
+export type FormSliderProps = SliderProps &
+  FormControllerProps & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'> & { thumbStyle?: SliderThumbProps };
+
+export function FormSlider({
+  children,
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  thumbStyle,
+  rules,
+  ...switchProps
+}: FormSliderProps) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return (
+      <Slider defaultValue={defaultValue} {...switchProps}>
+        <Slider.Track>
+          <Slider.TrackActive />
+        </Slider.Track>
+        <Slider.Thumb
+          bordered
+          circular
+          elevate
+          index={0}
+          aria-describedby="my-tooltip"
+          position="absolute"
+          style={{ height: 10, width: 10 }}
+        />
+      </Slider>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <Slider defaultValue={defaultValue} value={value} onValueChange={onChange} {...switchProps}>
+            <Slider.Track>
+              <Slider.TrackActive />
+            </Slider.Track>
+            <Slider.Thumb
+              alignItems="center"
+              justifyContent="center"
+              bordered
+              circular
+              userSelect="none"
+              elevate
+              index={0}
+              {...thumbStyle}
+            >
+              {value[0]}
+            </Slider.Thumb>
+            {children}
+          </Slider>
+        </FormField>
+      )}
+    />
+  );
+}

package/src/forms/FormSubmitButton/FormSubmitButton.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SimpleForm } from '../SimpleForm';
+import { FormSubmitButton } from './index';
+
+export default {
+  title: 'forms/FormSubmitButton',
+  component: FormSubmitButton,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <SimpleForm>
+    <FormSubmitButton onSubmit={() => console.log('Form submitted')}>Click here</FormSubmitButton>
+  </SimpleForm>
+);

package/src/forms/FormSubmitButton/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { ButtonProps } from 'tamagui';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+import type { GestureResponderEvent } from 'react-native';
+import { Button } from 'tamagui';
+import { useFormContext } from 'react-hook-form';
+
+export type FormSubmitButtonProps<T extends FieldValues> = ButtonProps & {
+  onSubmit?: (data: T, context: UseFormReturn<T, any>) => void | Promise<void>;
+};
+
+export function FormSubmitButton<T extends FieldValues = FieldValues>({
+  onSubmit,
+  onPress,
+  ...buttonProps
+}: FormSubmitButtonProps<T>) {
+  const formContext = useFormContext<T>();
+  const { handleSubmit } = formContext;
+  return (
+    <Button
+      onPress={(e: GestureResponderEvent) => {
+        if (onPress) onPress(e);
+        handleSubmit((data) => {
+          if (onSubmit) onSubmit(data, formContext);
+        })(e);
+      }}
+      {...buttonProps}
+    />
+  );
+}

package/src/forms/FormSwitch/FormSwitch.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormSwitch } from './index';
+
+export default {
+  title: 'forms/FormSwitch',
+  component: FormSwitch,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <FormSwitch label="Example Switch" name="exampleSwitch" helperText="This is an example switch" defaultValue={false} />
+);

package/src/forms/FormSwitch/index.tsx

@@ -0,0 +1,75 @@
+import React, { useId } from 'react';
+import type { SwitchProps, SwitchThumbProps } from 'tamagui';
+import { Switch } from 'tamagui';
+import type { FormControllerProps } from '../types';
+import type { FormFieldProps } from '../FormField';
+import { Controller, useFormContext } from 'react-hook-form';
+import { FormField } from '../FormField';
+
+export type FormSwitchProps = SwitchProps &
+  FormControllerProps & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'> & { ThumbStyle?: SwitchThumbProps };
+
+export function FormSwitch({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  ThumbStyle,
+  ...switchProps
+}: FormSwitchProps) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return (
+      <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
+        <Switch {...switchProps} />
+      </FormField>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <Switch
+            checked={value ?? false}
+            id={id}
+            {...switchProps}
+            onCheckedChange={(e) => {
+              onChange(e);
+              if (switchProps.onCheckedChange) switchProps.onCheckedChange(e);
+            }}
+            onPress={(e) => {
+              e.preventDefault();
+              if (switchProps.onPress) switchProps.onPress(e);
+            }}
+          >
+            <Switch.Thumb {...ThumbStyle} />
+          </Switch>
+        </FormField>
+      )}
+    />
+  );
+}
+
+FormSwitch.defaultProps = {
+  size: '$3',
+  Animation: 'quick',
+};

package/src/forms/FormTextArea/FormTextArea.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormTextArea } from './index';
+
+export default {
+  title: 'forms/FormTextArea',
+  component: FormTextArea,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <FormTextArea label="Description" name="description" defaultValue="" rules={{ required: true }} />
+);

package/src/forms/FormTextArea/index.tsx

@@ -0,0 +1,66 @@
+import React, { useId } from 'react';
+import type { FormControllerProps } from '../types';
+import type { FormFieldProps } from '../FormField';
+import type { TextAreaProps } from 'tamagui';
+import { Controller, useFormContext } from 'react-hook-form';
+import { FormField } from '../FormField';
+import { TextArea } from 'tamagui';
+
+export type FormTextAreaProps = TextAreaProps &
+  FormControllerProps & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+
+export function FormTextArea({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  ...textAreaProps
+}: FormTextAreaProps) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return (
+      <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
+        <TextArea {...textAreaProps} />
+      </FormField>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <TextArea
+            {...textAreaProps}
+            value={value ?? ''}
+            onBlur={(e) => {
+              onBlur();
+              if (textAreaProps.onBlur) textAreaProps.onBlur(e);
+            }}
+            onChangeText={(e) => {
+              onChange(e);
+              if (textAreaProps.onChangeText) textAreaProps.onChangeText(e);
+            }}
+          />
+        </FormField>
+      )}
+    />
+  );
+}

package/src/forms/RadioSimple/RadioSimple.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RadioSimple } from './index';
+
+export default {
+  title: 'forms/RadioSimple',
+  component: RadioSimple,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => <RadioSimple>Hello world</RadioSimple>;

package/src/forms/RadioSimple/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { SelectProps, SelectTriggerProps } from 'tamagui';
+import { Select, styled } from 'tamagui';
+
+const StyledSelectTrigger = styled(Select.Trigger, {
+  paddingVertical: 0,
+});
+
+export type SelectSimpleProps = SelectTriggerProps &
+  Pick<SelectProps, 'onOpenChange' | 'onValueChange' | 'id' | 'value'> & { placeholder?: ReactNode };
+
+export function RadioSimple({
+  children,
+  placeholder,
+  onOpenChange,
+  onValueChange,
+  value,
+  id,
+  ...triggerProps
+}: SelectSimpleProps) {
+  return (
+    <Select id={id} onOpenChange={onOpenChange} onValueChange={onValueChange} value={value}>
+      <StyledSelectTrigger {...triggerProps}>
+        <Select.Value placeholder={placeholder} />
+      </StyledSelectTrigger>
+      <Select.Adapt when="sm" platform="touch">
+        <Select.Sheet modal dismissOnSnapToBottom>
+          <Select.Sheet.Frame>
+            <Select.Sheet.ScrollView>
+              <Select.Adapt.Contents />
+            </Select.Sheet.ScrollView>
+          </Select.Sheet.Frame>
+          <Select.Sheet.Overlay />
+        </Select.Sheet>
+      </Select.Adapt>
+      <Select.Content zIndex={99999}>
+        <Select.Viewport>{children}</Select.Viewport>
+      </Select.Content>
+    </Select>
+  );
+}

package/src/forms/SelectButton/OptionButton.tsx

@@ -0,0 +1,85 @@
+import React, { useContext, useState, useEffect, useCallback } from 'react';
+import type { ButtonProps } from 'tamagui';
+import type { ComponentProps } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import { Button, styled } from 'tamagui';
+import { SelectButtonContext } from './context';
+
+const defaultSelectedStyle: ButtonProps = {
+  backgroundColor: '$color7',
+};
+
+const StyledButton = styled(Button, {
+  focusStyle: defaultSelectedStyle,
+  variants: {
+    selected: {
+      true: {
+        ...defaultSelectedStyle,
+        focusStyle: defaultSelectedStyle,
+        hoverStyle: defaultSelectedStyle,
+        pressStyle: defaultSelectedStyle,
+      },
+    },
+  },
+});
+
+export type OptionButtonProps = ButtonProps & {
+  index: number;
+  selectedStyle?: ButtonProps;
+  value: string;
+};
+
+export function OptionButton({ index, value, selectedStyle, onPress, ...buttonProps }: OptionButtonProps) {
+  const [selected, setSelected] = useState(false);
+  const context = useContext(SelectButtonContext);
+  const mergedSelectedStyle = {
+    ...context.selectedStyle,
+    ...selectedStyle,
+  } as ComponentProps<typeof StyledButton>;
+
+  useEffect(() => {
+    if (!context.setValues) return;
+    context.setValues((values: Record<string, string>) => {
+      values[index] = value;
+      return values;
+    });
+  }, [context.setValues]);
+
+  useEffect(() => {
+    setSelected(typeof context.selectedIndex !== 'undefined' && context.selectedIndex === index);
+  }, [context.selectedIndex]);
+
+  const handlePress = useCallback(
+    (e: GestureResponderEvent) => {
+      if (context.setSelectedIndex) context.setSelectedIndex(index);
+      if (onPress) onPress(e);
+    },
+    [context.setSelectedIndex, onPress],
+  );
+
+  return (
+    <StyledButton
+      {...(buttonProps as ComponentProps<typeof StyledButton>)}
+      selected={selected}
+      {...(selected
+        ? {
+            ...(Object.keys(mergedSelectedStyle).length
+              ? {
+                  focusStyle: mergedSelectedStyle,
+                  hoverStyle: mergedSelectedStyle,
+                  pressStyle: mergedSelectedStyle,
+                }
+              : {}),
+            ...mergedSelectedStyle,
+          }
+        : {
+            ...(Object.keys(mergedSelectedStyle).length
+              ? {
+                  focusStyle: mergedSelectedStyle,
+                }
+              : {}),
+          })}
+      onPress={handlePress}
+    />
+  );
+}