@multiplatform.one/components 2.0.4 → 2.0.6

package/src/forms/FormInput/index.tsx

@@ -1,66 +0,0 @@
-import React, { useId } from 'react';
-import type { FormControllerProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import type { InputProps } from 'tamagui';
-import { Controller, useFormContext } from 'react-hook-form';
-import { FormField } from '../FormField';
-import { Input } from 'tamagui';
-
-export type FormInputProps = InputProps &
-  FormControllerProps & {
-    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
-  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
-
-export function FormInput({
-  control,
-  defaultValue,
-  error,
-  fieldProps,
-  helperText,
-  label,
-  name,
-  required,
-  rules,
-  ...inputProps
-}: FormInputProps) {
-  const formContext = useFormContext();
-  const id = useId();
-  if (!formContext) {
-    return (
-      <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
-        <Input {...inputProps} />
-      </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}
-        >
-          <Input
-            {...inputProps}
-            value={value ?? ''}
-            onBlur={(e) => {
-              onBlur();
-              if (inputProps.onBlur) inputProps.onBlur(e);
-            }}
-            onChange={(e) => {
-              onChange(e);
-              if (inputProps.onChange) inputProps.onChange(e);
-            }}
-          />
-        </FormField>
-      )}
-    />
-  );
-}

package/src/forms/FormProgress/FormProgress.stories.tsx

@@ -1,16 +0,0 @@
-import { FormProgress } from './index';
-import React from 'react';
-
-export default {
-  title: 'forms/FormProgress',
-  component: FormProgress,
-  parameters: {
-    status: {
-      type: 'beta',
-    },
-  },
-};
-
-export const vertical = (args) => <FormProgress value={80} size={3} width={20} vertical name="progress" {...args} />;
-
-export const horizontal = (args) => <FormProgress value={80} size={3} width={20} name="progress" {...args} />;

package/src/forms/FormProgress/index.tsx

@@ -1,94 +0,0 @@
-/**
- * File: /src/forms/FormProgress/index.tsx
- * Project: @multiplatform.one/components
- * File Created: 04-04-2024 15:50:39
- * Author: Clay Risser
- * -----
- * BitSpur (c) Copyright 2021 - 2024
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { useId } from 'react';
-import type { ProgressProps, SizeTokens } from 'tamagui';
-import { Progress } from 'tamagui';
-import { useFormContext, Controller } from 'react-hook-form';
-import type { FormFieldProps } from '../FormField';
-import { FormField } from '../FormField';
-import type { FormControllerProps } from '../types';
-
-export type FormProgressProps = ProgressProps &
-  FormControllerProps & { vertical?: boolean } & {
-    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
-  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
-
-export function FormProgress({
-  control,
-  defaultValue,
-  error,
-  fieldProps,
-  helperText,
-  label,
-  name,
-  required,
-  rules,
-  size,
-  vertical,
-  ...progressProps
-}: FormProgressProps) {
-  const formContext = useFormContext();
-  const id = useId();
-  const propSize = typeof size === 'number' ? (`$${size}` as SizeTokens) : (size as SizeTokens);
-  if (!formContext) {
-    return (
-      <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
-        <Progress
-          marginTop={vertical ? 86 : undefined}
-          marginLeft={vertical ? -80 : undefined}
-          rotate={vertical ? '270deg' : undefined}
-          {...progressProps}
-          size={propSize}
-        >
-          <Progress.Indicator animation="bouncy" />
-        </Progress>
-      </FormField>
-    );
-  }
-  return (
-    <Controller
-      name={name}
-      control={control}
-      rules={rules}
-      defaultValue={defaultValue}
-      render={({ field: { value }, fieldState: { error } }) => (
-        <FormField
-          id={id}
-          error={!!error}
-          helperText={error ? error.message : helperText}
-          label={label}
-          required={required}
-          {...fieldProps}
-        >
-          <Progress
-            marginTop={vertical ? 86 : undefined}
-            marginLeft={vertical ? -80 : undefined}
-            rotate={vertical ? '270deg' : undefined}
-            {...progressProps}
-            size={propSize}
-            value={value ?? 0}
-          />
-        </FormField>
-      )}
-    />
-  );
-}

package/src/forms/FormRadioGroup/FormRadioGroup.stories.tsx

@@ -1,65 +0,0 @@
-/**
- * File: /src/forms/FormRadioGroup/FormRadioGroup.stories.tsx
- * Project: @multiplatform.one/components
- * File Created: 04-04-2024 15:50:39
- * Author: Clay Risser
- * -----
- * BitSpur (c) Copyright 2021 - 2024
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { FormRadio, FormRadioGroup } from './index';
-import { action } from '@storybook/addon-actions';
-import { SimpleForm } from '../SimpleForm';
-import { Label } from 'tamagui';
-
-export default {
-  title: 'forms/FormRadioGroup',
-  component: FormRadioGroup,
-  parameters: { status: { type: 'beta' } },
-};
-
-export const main = (args) => (
-  <SimpleForm>
-    <FormRadioGroup
-      name="radio group"
-      label="radio group"
-      helperText="select an option"
-      contentStyle={{ gap: '$4' }}
-      required
-      onValueChange={action('onValueChange')}
-      gap
-      {...args}
-    >
-      <FormRadio size="$4" value="option1">
-        <Label htmlFor="option1">option 1</Label>
-      </FormRadio>
-      <FormRadio size="$4" value="option2">
-        <Label htmlFor="option2">option 2</Label>
-      </FormRadio>
-      <FormRadio size="$4" value="option3">
-        <Label htmlFor="option3">option 3</Label>
-      </FormRadio>
-      <FormRadio size="$4" value="option4">
-        <Label htmlFor="option4">option 4</Label>
-      </FormRadio>
-    </FormRadioGroup>
-  </SimpleForm>
-);
-
-main.args = {
-  defaultValue: 'option1',
-  horizontal: false,
-};

package/src/forms/FormRadioGroup/index.tsx

@@ -1,115 +0,0 @@
-/**
- * File: /src/forms/FormRadioGroup/index.tsx
- * Project: @multiplatform.one/components
- * File Created: 18-10-2023 15:23:17
- * Author: Lalit rajak
- * -----
- * BitSpur (c) Copyright 2021 - 2023
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { useId } from 'react';
-import type { FormControllerProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import type { SizeTokens, RadioGroupProps, YStackProps } from 'tamagui';
-import { Controller, useFormContext } from 'react-hook-form';
-import { FormField } from '../FormField';
-import { 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;
-    contentStyle: YStackProps;
-  };
-
-export interface FormRadioProps {
-  children?: React.ReactNode;
-  value: string;
-  size?: SizeTokens;
-  disabled?: boolean;
-  id?: string;
-}
-
-export function FormRadioGroup({
-  children,
-  control,
-  defaultValue,
-  error,
-  fieldProps,
-  helperText,
-  label,
-  name,
-  required,
-  horizontal,
-  rules,
-  contentStyle,
-  ...radioProps
-}: FormRadioGroupProps) {
-  const formContext = useFormContext();
-  const id = useId();
-  if (!formContext) {
-    return (
-      <RadioGroup name={name} {...radioProps}>
-        <YStack display="flex" flexDirection={horizontal ? 'row' : 'column'} {...contentStyle}>
-          {children}
-        </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);
-            }}
-          >
-            <YStack display="flex" flexDirection={horizontal ? 'row' : 'column'} {...contentStyle}>
-              {children}
-            </YStack>
-          </RadioGroup>
-        </FormField>
-      )}
-    />
-  );
-}
-
-export function FormRadio({ children, value, size, disabled, id, ...props }: FormRadioProps) {
-  return (
-    <XStack alignItems="center" gap="$1">
-      <RadioGroup.Item value={value} id={id} size={size || '$4'} {...props}>
-        <RadioGroup.Indicator disabled={disabled} />
-      </RadioGroup.Item>
-      {children}
-    </XStack>
-  );
-}

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

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

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { FormSlider } from './index';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'forms/FormSlider',
-  component: FormSlider,
-  parameters: {
-    status: { type: 'beta' },
-  },
-};
-
-export const main = () => <FormSlider name="FormSlider" onValueChange={action(`onValueChange`)} />;

package/src/forms/FormSlider/index.tsx

@@ -1,87 +0,0 @@
-/* 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>
-        <Slider.Track>
-          <Slider.TrackActive />
-        </Slider.Track>
-        <Slider.Thumb
-          bordered
-          circular
-          elevate
-          index={0}
-          aria-describedby="my-tooltip"
-          position="absolute"
-          style={{ height: 10, width: 10 }}
-          size={24}
-        />
-      </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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { SimpleForm } from '../SimpleForm';
-import { FormSubmitButton } from './index';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'forms/FormSubmitButton',
-  component: FormSubmitButton,
-  parameters: {
-    status: { type: 'beta' },
-  },
-};
-
-export const main = () => (
-  <SimpleForm>
-    <FormSubmitButton onPress={action('onClick')}>Click here</FormSubmitButton>
-  </SimpleForm>
-);

package/src/forms/FormSubmitButton/index.tsx

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

@@ -1,48 +0,0 @@
-/**
- * File: /src/forms/FormSwitch/FormSwitch.stories.tsx
- * Project: @multiplatform.one/components
- * File Created: 18-10-2023 15:23:17
- * Author: Lalit rajak
- * -----
- * BitSpur (c) Copyright 2021 - 2023
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { FormSwitch } from './index';
-import { action } from '@storybook/addon-actions';
-import { SimpleForm } from '../SimpleForm';
-import { FormSubmitButton } from '../FormSubmitButton';
-
-export default {
-  title: 'forms/FormSwitch',
-  component: FormSwitch,
-  parameters: {
-    status: { type: 'beta' },
-  },
-};
-
-export const main = () => (
-  <SimpleForm>
-    <FormSwitch
-      label="Example Switch"
-      name="exampleSwitch"
-      helperText="This is an example switch"
-      defaultValue={false}
-      onCheckedChange={action('onChange')}
-      onPress={action('onPress')}
-    />
-    <FormSubmitButton onSubmit={action('onSubmit')}>Submit</FormSubmitButton>
-  </SimpleForm>
-);