@multiplatform.one/components 5.0.0 → 5.0.4

package/src/forms/SelectButton/OptionButton.tsx

@@ -19,16 +19,16 @@
  * limitations under the License.
  */
 
-import React, { useContext, useState, useEffect, useCallback } from 'react';
-import type { ButtonProps } from '../Button';
-import type { ComponentProps } from 'react';
-import type { GestureResponderEvent } from 'react-native';
-import { Button } from '../Button';
-import { SelectButtonContext } from './context';
-import { styled } from 'tamagui';
+import { useCallback, useContext, useEffect, useState } from "react";
+import type { ComponentProps } from "react";
+import type { GestureResponderEvent } from "react-native";
+import { styled } from "tamagui";
+import type { ButtonProps } from "../Button";
+import { Button } from "../Button";
+import { SelectButtonContext } from "./context";
 
 const defaultSelectedStyle: ButtonProps = {
-  backgroundColor: '$color7',
+  backgroundColor: "$color7",
 };
 
 const StyledButton = styled(Button, {
@@ -51,7 +51,13 @@ export type OptionButtonProps = ButtonProps & {
   value: string;
 };
 
-export function OptionButton({ index, value, selectedStyle, onPress, ...buttonProps }: OptionButtonProps) {
+export function OptionButton({
+  index,
+  value,
+  selectedStyle,
+  onPress,
+  ...buttonProps
+}: OptionButtonProps) {
   const [selected, setSelected] = useState(false);
   const context = useContext(SelectButtonContext);
   const mergedSelectedStyle = {
@@ -68,7 +74,10 @@ export function OptionButton({ index, value, selectedStyle, onPress, ...buttonPr
   }, [context.setValues]);
 
   useEffect(() => {
-    setSelected(typeof context.selectedIndex !== 'undefined' && context.selectedIndex === index);
+    setSelected(
+      typeof context.selectedIndex !== "undefined" &&
+        context.selectedIndex === index,
+    );
   }, [context.selectedIndex]);
 
   const handlePress = useCallback(

package/src/forms/SelectButton/SelectButton.stories.tsx

@@ -1,19 +1,18 @@
-import React from 'react';
-import { SelectButton } from './SelectButton';
-import { Text } from 'tamagui';
-import { action } from '@storybook/addon-actions';
+import { action } from "@storybook/addon-actions";
+import { Text } from "tamagui";
+import { SelectButton } from "./SelectButton";
 
 export default {
-  title: 'forms/SelectButton',
+  title: "forms/SelectButton",
   component: SelectButton,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
 export const main = (args) => {
   return (
-    <SelectButton gap {...args}>
+    <SelectButton gap="$4" {...args}>
       <SelectButton.OptionButton index={0} value="bmw">
         <Text>BMW</Text>
       </SelectButton.OptionButton>
@@ -31,14 +30,14 @@ export const main = (args) => {
 };
 
 const mainArgs = {
-  value: 'bmw',
-  selectedValue: 'bmw',
+  value: "bmw",
+  selectedValue: "bmw",
 };
 
 main.args = mainArgs;
 
 export const x = () => (
-  <SelectButton gap xStack>
+  <SelectButton gap="$4" xStack>
     <SelectButton.OptionButton index={0} value="bmw">
       <Text>BMW</Text>
     </SelectButton.OptionButton>

package/src/forms/SelectButton/SelectButton.tsx

@@ -19,12 +19,12 @@
  * limitations under the License.
  */
 
-import React, { useState, useMemo, useEffect } from 'react';
-import type { OptionButtonProps } from './OptionButton';
-import type { YStackProps, ButtonProps } from 'tamagui';
-import { OptionButton } from './OptionButton';
-import { SelectButtonContext } from './context';
-import { YStack, XStack } from 'tamagui';
+import { useEffect, useMemo, useState } from "react";
+import type { ButtonProps, YStackProps } from "tamagui";
+import { XStack, YStack } from "tamagui";
+import type { OptionButtonProps } from "./OptionButton";
+import { OptionButton } from "./OptionButton";
+import { SelectButtonContext } from "./context";
 
 export type SelectButtonProps = YStackProps & {
   onValueChange?: (value: string) => unknown;
@@ -58,16 +58,16 @@ export function SelectButton({
     const selectedIndexStr = selectedIndex?.toString();
     if (
       onValueChange &&
-      typeof selectedIndex !== 'undefined' &&
-      typeof selectedIndexStr !== 'undefined' &&
+      typeof selectedIndex !== "undefined" &&
+      typeof selectedIndexStr !== "undefined" &&
       selectedIndexStr in values
     ) {
-      onValueChange(values?.[selectedIndexStr] || '');
+      onValueChange(values?.[selectedIndexStr] || "");
     }
   }, [selectedIndex]);
 
   useEffect(() => {
-    if (typeof selectedValue === 'undefined') return;
+    if (typeof selectedValue === "undefined") return;
     for (const [index, value] of Object.entries(values)) {
       const indexNum = Number(index);
       if (value === selectedValue && !Number.isNaN(indexNum)) {

package/src/forms/SelectButton/context.ts

@@ -19,11 +19,13 @@
  * limitations under the License.
  */
 
-import type { ButtonProps } from 'tamagui';
-import type { Dispatch, SetStateAction } from 'react';
-import { createContext } from 'react';
+import type { Dispatch, SetStateAction } from "react";
+import { createContext } from "react";
+import type { ButtonProps } from "tamagui";
 
-export const SelectButtonContext = createContext<SelectButtonContextValue>({ values: {} });
+export const SelectButtonContext = createContext<SelectButtonContextValue>({
+  values: {},
+});
 
 interface SelectButtonContextValue {
   selectedIndex?: number;

package/src/forms/SelectButton/index.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export * from './OptionButton';
-export * from './SelectButton';
+export * from "./OptionButton";
+export * from "./SelectButton";

package/src/forms/Slider/FieldSlider.stories.tsx

@@ -1,5 +1,5 @@
 /**
- * File: /src/forms/FieldSlider/FieldSlider.stories.tsx
+ * File: /src/forms/Slider/FieldSlider.stories.tsx
  * Project: @multiplatform.one/components
  * File Created: 20-06-2024 06:03:52
  * Author: Clay Risser
@@ -40,45 +40,52 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Button, Text, YStack } from 'tamagui';
-import { FieldSlider } from './FieldSlider';
-import { action } from '@storybook/addon-actions';
-import { useForm } from '@tanstack/react-form';
-import type { FieldSliderProps } from './FieldSlider';
+import { action } from "@storybook/addon-actions";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Button, Text, YStack } from "tamagui";
+import type { FieldSliderProps } from "./FieldSlider";
+import { FieldSlider } from "./FieldSlider";
 
 export default {
-  title: 'forms/FieldSlider',
+  title: "forms/FieldSlider",
   component: FieldSlider,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
-export const main = (args) => <FieldSlider onValueChange={action(`onValueChange`)} {...args} />;
+export const main = (args) => (
+  <FieldSlider onValueChange={action("onValueChange")} {...args} />
+);
 const mainArgs: FieldSliderProps = {
-  label: 'film',
+  label: "film",
   error: undefined,
-  helperText: 'please check this slider',
+  helperText: "please check this slider",
   value: undefined,
 };
 main.args = mainArgs;
 
 export const form = () => {
-  const [sliderValue, setSliderValue] = React.useState<number[]>([0]);
+  const [sliderValue, setSliderValue] = useState<number[]>([0]);
 
   const form = useForm({
     defaultValues: {
       sliderValue: [0],
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (
     <YStack padding="$4" justifyContent="center" space>
       <Text>{[sliderValue]}</Text>
-      <FieldSlider form={form} name="sliderValue" label="formSlider" onValueChange={(e) => setSliderValue(e)} />
+      <FieldSlider
+        form={form}
+        name="sliderValue"
+        label="formSlider"
+        onValueChange={(e) => setSliderValue(e)}
+      />
       <Button onPress={form.handleSubmit}>Submit</Button>
     </YStack>
   );

package/src/forms/Slider/FieldSlider.tsx

@@ -19,37 +19,67 @@
  * limitations under the License.
  */
 
-import React, { useId } from 'react';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { FieldComponentProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import type { SliderProps } from './Slider';
-import type { SliderThumbProps } from 'tamagui';
-import { FormField } from '../FormField';
-import { Slider } from './Slider';
-import { useForm, Field } from '@tanstack/react-form';
-import { useProps } from 'tamagui';
+import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
+import { Field, useForm } from "@tanstack/react-form";
+import { useId } from "react";
+import type { SliderThumbProps } from "tamagui";
+import { useProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
+import type { SliderProps } from "./Slider";
+import { Slider } from "./Slider";
 
 export type FieldSliderProps<
   TParentData = any,
   TName extends DeepKeys<TParentData> = any,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = Omit<FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children' | 'field'> &
-  Pick<SliderProps, 'value' | 'onValueChange'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    sliderProps?: Omit<SliderProps, 'value' | 'id' | 'onValueChange'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<SliderProps, "value" | "onValueChange"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    sliderProps?: Omit<SliderProps, "value" | "id" | "onValueChange">;
     thumbProps?: SliderThumbProps;
   };
 
 export function FieldSlider<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
->(props: FieldSliderProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldSliderProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -73,11 +103,23 @@ export function FieldSlider<
   if (!form || !name) {
     return (
       <FormField {...fieldProps} id={id} onBlur={onBlur}>
-        <Slider {...sliderProps} id={id} defaultValue={defaultValue as number[]} onValueChange={onValueChange}>
+        <Slider
+          {...sliderProps}
+          id={id}
+          defaultValue={defaultValue as number[]}
+          onValueChange={onValueChange}
+        >
           <Slider.Track>
             <Slider.TrackActive />
           </Slider.Track>
-          <Slider.Thumb bordered circular elevate size="$2" index={0} {...thumbProps} />
+          <Slider.Thumb
+            bordered
+            circular
+            elevate
+            size="$2"
+            index={0}
+            {...thumbProps}
+          />
         </Slider>
       </FormField>
     );
@@ -96,7 +138,9 @@ export function FieldSlider<
       validators={validators}
     >
       {(field) => {
-        const error = field.state.meta.errors.length ? field.state.meta.errors.join(', ') : fieldProps.error;
+        const error = field.state.meta.errors.length
+          ? field.state.meta.errors.join(", ")
+          : fieldProps.error;
         return (
           <FormField
             error={error}
@@ -119,7 +163,14 @@ export function FieldSlider<
               <Slider.Track>
                 <Slider.TrackActive />
               </Slider.Track>
-              <Slider.Thumb bordered circular elevate size="$2" index={0} {...thumbProps} />
+              <Slider.Thumb
+                bordered
+                circular
+                elevate
+                size="$2"
+                index={0}
+                {...thumbProps}
+              />
             </Slider>
           </FormField>
         );

package/src/forms/Slider/Slider.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export type { SliderProps } from 'tamagui';
-export { Slider } from 'tamagui';
+export type { SliderProps } from "tamagui";
+export { Slider } from "tamagui";

package/src/forms/Slider/index.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export * from './FieldSlider';
-export * from './Slider';
+export * from "./FieldSlider";
+export * from "./Slider";

package/src/forms/Switch/FieldSwitch.stories.tsx

@@ -19,27 +19,28 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FieldSwitchProps } from './FieldSwitch';
-import { FieldSwitch } from './FieldSwitch';
-import { action } from '@storybook/addon-actions';
-import { useForm } from '@tanstack/react-form';
-import { Button, YStack } from 'tamagui';
+import { action } from "@storybook/addon-actions";
+import { useForm } from "@tanstack/react-form";
+import { Button, YStack } from "tamagui";
+import type { FieldSwitchProps } from "./FieldSwitch";
+import { FieldSwitch } from "./FieldSwitch";
 
 export default {
-  title: 'forms/FieldSwitch',
+  title: "forms/FieldSwitch",
   component: FieldSwitch,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
-export const main = (args) => <FieldSwitch onCheckedChange={action('onCheckedChange')} {...args} />;
+export const main = (args) => (
+  <FieldSwitch onCheckedChange={action("onCheckedChange")} {...args} />
+);
 const mainArgs: FieldSwitchProps<any, any> = {
   asyncAlways: true,
   asyncDebounceMs: 500,
   defaultValue: false,
-  mode: 'array',
+  mode: "array",
 };
 main.args = mainArgs;
 
@@ -49,7 +50,7 @@ export const form = () => {
       switch: false,
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (

package/src/forms/Switch/FieldSwitch.tsx

@@ -19,35 +19,65 @@
  * limitations under the License.
  */
 
-import React, { useId } from 'react';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { FieldComponentProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import type { SwitchProps, SwitchThumbProps } from 'tamagui';
-import { FormField } from '../FormField';
-import { Switch, useProps } from 'tamagui';
-import { useForm, Field } from '@tanstack/react-form';
+import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
+import { Field, useForm } from "@tanstack/react-form";
+import { useId } from "react";
+import type { SwitchProps, SwitchThumbProps } from "tamagui";
+import { Switch, useProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
 
 export type FieldSwitchProps<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = Omit<FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children' | 'field'> &
-  Pick<SwitchProps, 'checked' | 'onCheckedChange'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    switchProps?: Omit<SwitchProps, 'checked' | 'id' | 'onCheckedChange'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<SwitchProps, "checked" | "onCheckedChange"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    switchProps?: Omit<SwitchProps, "checked" | "id" | "onCheckedChange">;
     thumbStyle?: SwitchThumbProps;
   };
 
 export function FieldSwitch<
   TParentData = any,
   TName extends DeepKeys<TParentData> = any,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
->(props: FieldSwitchProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldSwitchProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -96,7 +126,9 @@ export function FieldSwitch<
       validators={validators}
     >
       {(field) => {
-        const error = field.state.meta.errors.length ? field.state.meta.errors.join(', ') : fieldProps.error;
+        const error = field.state.meta.errors.length
+          ? field.state.meta.errors.join(", ")
+          : fieldProps.error;
         return (
           <FormField
             error={error}

package/src/forms/Switch/Switch.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export type { SwitchProps, SwitchThumbProps } from 'tamagui';
-export { Switch } from 'tamagui';
+export type { SwitchProps, SwitchThumbProps } from "tamagui";
+export { Switch } from "tamagui";

package/src/forms/Switch/index.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export * from './Switch';
-export * from './FieldSwitch';
+export * from "./Switch";
+export * from "./FieldSwitch";

package/src/forms/TextArea/FieldTextArea.stories.tsx

@@ -19,30 +19,34 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FieldTextAreaProps } from './FieldTextArea';
-import { Button, YStack } from 'tamagui';
-import { FieldTextArea } from './FieldTextArea';
-import { action } from '@storybook/addon-actions';
-import { useForm } from '@tanstack/react-form';
+import { action } from "@storybook/addon-actions";
+import { useForm } from "@tanstack/react-form";
+import { Button, YStack } from "tamagui";
+import type { FieldTextAreaProps } from "./FieldTextArea";
+import { FieldTextArea } from "./FieldTextArea";
 
 export default {
-  title: 'forms/FieldTextArea',
+  title: "forms/FieldTextArea",
   component: FieldTextArea,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
 export const main = () => (
-  <FieldTextArea label="Description" name="description" defaultValue="" onChangeText={action('onChangeText')} />
+  <FieldTextArea
+    label="Description"
+    name="description"
+    defaultValue=""
+    onChangeText={action("onChangeText")}
+  />
 );
 
 export const form = (args: FieldTextAreaProps) => {
   const form = useForm({
     defaultValues: {
-      textArea: '',
+      textArea: "",
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (
@@ -54,11 +58,11 @@ export const form = (args: FieldTextAreaProps) => {
 };
 
 form.args = {
-  label: 'Sample Text Area',
-  defaultValue: 'This is a sample text area',
-  onChangeText: action('onChangeText'),
+  label: "Sample Text Area",
+  defaultValue: "This is a sample text area",
+  onChangeText: action("onChangeText"),
   textAreaProps: {
-    placeholder: 'Enter some text here...',
+    placeholder: "Enter some text here...",
     disabled: false,
   },
 };