@multiplatform.one/components 5.0.1 → 5.0.4

package/src/forms/TextArea/FieldTextArea.tsx

@@ -19,34 +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 { TextAreaProps } from 'tamagui';
-import { FormField } from '../FormField';
-import { useForm, Field } from '@tanstack/react-form';
-import { useProps, TextArea } from 'tamagui';
+import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
+import { Field, useForm } from "@tanstack/react-form";
+import { useId } from "react";
+import type { TextAreaProps } from "tamagui";
+import { TextArea, useProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
 
 export type FieldTextAreaProps<
   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<TextAreaProps, 'value' | 'onChange' | 'onChangeText'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    textAreaProps?: Omit<TextAreaProps, 'value' | 'id' | 'onChange' | 'onChangeText'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<TextAreaProps, "value" | "onChange" | "onChangeText"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    textAreaProps?: Omit<
+      TextAreaProps,
+      "value" | "id" | "onChange" | "onChangeText"
+    >;
   };
 
 export function FieldTextArea<
   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: FieldTextAreaProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldTextAreaProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -93,7 +126,9 @@ export function FieldTextArea<
       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/TextArea/TextArea.ts

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

package/src/forms/TextArea/index.ts

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

package/src/forms/index.ts

@@ -19,15 +19,16 @@
  * limitations under the License.
  */
 
-export * from './Button';
-export * from './Checkbox';
-export * from './FormField';
-export * from './Input';
-export * from './Progress';
-export * from './RadioGroup';
-export * from './RadioGroup';
-export * from './Select';
-export * from './SelectButton';
-export * from './Slider';
-export * from './Switch';
-export * from './TextArea';
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./FormField";
+export * from "./Input";
+export * from "./Progress";
+export * from "./RadioGroup";
+export * from "./RadioGroup";
+export * from "./Select";
+export * from "./SelectButton";
+export * from "./Slider";
+export * from "./Switch";
+export * from "./TextArea";
+export * from "./Form";

package/src/forms/types.ts

@@ -19,15 +19,55 @@
  * limitations under the License.
  */
 
-import type { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { UseFieldOptions, NodeType } from '@tanstack/react-form/dist/esm/types';
+import type {
+  DeepKeys,
+  DeepValue,
+  FieldApi,
+  FieldApiOptions,
+  Validator,
+} from "@tanstack/form-core";
+import type { FunctionComponent } from "rehackt";
+
+export type UseFieldOptions<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = FieldApiOptions<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  TData
+> & {
+  mode?: "value" | "array";
+};
+
+export type NodeType = ReturnType<FunctionComponent>;
 
 export type FieldComponentProps<
   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>,
 > = {
-  children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => NodeType;
+  children: (
+    fieldApi: FieldApi<
+      TParentData,
+      TName,
+      TFieldValidator,
+      TFormValidator,
+      TData
+    >,
+  ) => NodeType;
 } & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;

package/src/helpers.tsx

@@ -1,9 +1,12 @@
-import type { ReactNode, ComponentType } from 'react';
-import React from 'react';
-import { Text } from 'tamagui';
-import { isText } from 'multiplatform.one';
+import { isText } from "multiplatform.one";
+import type { ComponentType, ReactNode } from "react";
+import { Text } from "tamagui";
 
-export function useAutoText(children: any, Component: ComponentType<any> = Text, props?: any): ReactNode {
+export function useAutoText(
+  children: any,
+  Component: ComponentType<any> = Text,
+  props?: any,
+): ReactNode {
   if (isText(children)) {
     return <Component {...props}>{children?.toString()}</Component>;
   }

package/src/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from './useAssets';
-export * from './useClipboard';
+export * from "./useAssets";
+export * from "./useClipboard";

package/src/hooks/useAnimationDriverToggle.ts

@@ -1,8 +1,11 @@
-import { useContext } from 'react';
-import { AnimationDriverTogglerContext } from '../providers/AnimationDriverTogglerContextProvider';
+import { useContext } from "react";
+import { AnimationDriverTogglerContext } from "../providers/AnimationDriverTogglerContextProvider";
 
 export const useAnimationDriverToggler = () => {
   const contextValue = useContext(AnimationDriverTogglerContext);
-  if (!contextValue) throw new Error('Should be used within the AnimationDriverTogglerContext provider');
+  if (!contextValue)
+    throw new Error(
+      "Should be used within the AnimationDriverTogglerContext provider",
+    );
   return contextValue;
 };

package/src/hooks/useAssets/index.native.ts

@@ -1,14 +1,19 @@
-import type { Asset } from 'expo-asset';
-import type { StaticImageData } from 'next/image';
-import { useAssets as expoUseAssets } from 'expo-asset';
+import type { Asset } from "expo-asset";
+import { useAssets as expoUseAssets } from "expo-asset";
 
 const logger = console;
 
-export function useAssets(modules: any | any[]): (StaticImageData | undefined)[] {
-  const modulesArr = (Array.isArray(modules) ? modules : [modules]).map((module: any) => {
-    if (typeof module.default !== 'undefined') return module.default;
-    return module;
-  });
+type StaticImageData = any;
+
+export function useAssets(
+  modules: any | any[],
+): (StaticImageData | undefined)[] {
+  const modulesArr = (Array.isArray(modules) ? modules : [modules]).map(
+    (module: any) => {
+      if (typeof module.default !== "undefined") return module.default;
+      return module;
+    },
+  );
   const [assets, err] = expoUseAssets(modulesArr);
   if (err) logger.error(err);
   if (!assets) return new Array(modulesArr.length);

package/src/hooks/useAssets/index.ts

@@ -1,11 +1,14 @@
-import type { StaticImageData } from 'next/image';
+// TODO: remove this
+type StaticImageData = any;
 
-export function useAssets(modules: any | any[]): (StaticImageData | undefined)[] {
-  const modulesArr: (StaticImageData | undefined)[] = (Array.isArray(modules) ? modules : [modules]).map(
-    (module: any) => {
-      if (typeof module.default !== 'undefined') return module.default;
-      return module;
-    },
-  );
+export function useAssets(
+  modules: any | any[],
+): (StaticImageData | undefined)[] {
+  const modulesArr: (StaticImageData | undefined)[] = (
+    Array.isArray(modules) ? modules : [modules]
+  ).map((module: any) => {
+    if (typeof module.default !== "undefined") return module.default;
+    return module;
+  });
   return modulesArr;
 }

package/src/hooks/useClipboard.ts

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
-import { useEvent } from 'tamagui';
+import { useEffect, useState } from "react";
+import { useEvent } from "tamagui";
 
 export const copyToClipboard = (text: string) => {
   return navigator.clipboard.writeText(text);
 };
 
-export function useClipboard(text = '', timeout = 1500) {
+export function useClipboard(text = "", timeout = 1500) {
   const [hasCopied, setHasCopied] = useState(false);
 
   const onCopy = useEvent(async () => {

package/src/icons/CheckRegular.tsx

@@ -20,11 +20,11 @@
  * limitations under the License.
  */
 
-import { Polyline, Rect, Svg } from 'react-native-svg';
-import { memo } from 'react';
-import { themed } from './themed';
+import { Polyline, Rect, Svg } from "@tamagui/react-native-svg";
+import { memo } from "react";
+import { themed } from "./themed";
 
-function Icon({ color = 'black', size = 24, ...otherProps }) {
+function Icon({ color = "black", size = 24, ...otherProps }) {
   return (
     <Svg viewBox="0 0 256 256" {...otherProps} height={size} width={size}>
       <Rect width="256" height="256" fill="none" />
@@ -39,6 +39,6 @@ function Icon({ color = 'black', size = 24, ...otherProps }) {
     </Svg>
   );
 }
-Icon.displayName = 'CheckRegular';
+Icon.displayName = "CheckRegular";
 const CheckRegular = memo(themed(Icon));
 export { CheckRegular };

package/src/icons/MinusRegular.tsx

@@ -20,11 +20,11 @@
  * limitations under the License.
  */
 
-import { Line, Rect, Svg } from 'react-native-svg';
-import { memo } from 'react';
-import { themed } from './themed';
+import { memo } from "react";
+import { Line, Rect, Svg } from "react-native-svg";
+import { themed } from "./themed";
 
-function Icon({ color = 'black', size = 24, ...otherProps }) {
+function Icon({ color = "black", size = 24, ...otherProps }) {
   return (
     <Svg viewBox="0 0 256 256" {...otherProps} height={size} width={size}>
       <Rect width="256" height="256" fill="none" />
@@ -42,6 +42,6 @@ function Icon({ color = 'black', size = 24, ...otherProps }) {
     </Svg>
   );
 }
-Icon.displayName = 'MinusRegular';
+Icon.displayName = "MinusRegular";
 const MinusRegular = memo(themed(Icon));
 export { MinusRegular };

package/src/icons/index.ts

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

package/src/icons/themed.tsx

@@ -20,9 +20,14 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FC } from 'react';
-import { getTokens, getVariable, getVariableValue, useProps, useTheme } from 'tamagui';
+import type { FC } from "react";
+import {
+  getTokens,
+  getVariable,
+  getVariableValue,
+  useProps,
+  useTheme,
+} from "tamagui";
 
 export function themed<A extends FC>(Component: A) {
   return ((props: any) => {
@@ -32,9 +37,16 @@ export function themed<A extends FC>(Component: A) {
       <Component
         {...props}
         color={getVariable(
-          (color in theme ? theme[color] : undefined) || color || (!disableTheme ? theme.color : null) || '#000',
+          (color in theme ? theme[color] : undefined) ||
+            color ||
+            (!disableTheme ? theme.color : null) ||
+            "#000",
         )}
-        size={typeof size === 'string' ? getVariableValue(getTokens().size[size] || size) : size}
+        size={
+          typeof size === "string"
+            ? getVariableValue(getTokens().size[size] || size)
+            : size
+        }
       />
     );
   }) as A;

package/src/images/SimpleImage/index.stories.tsx

@@ -19,16 +19,18 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { useAssets } from '../../hooks';
-import { Props, SimpleImage } from './index';
-import { YStack } from 'tamagui';
+import { YStack } from "tamagui";
+import { useAssets } from "../../hooks";
+import { SimpleImage } from "./index";
+
+// TODO: Fix this type
+export type Props = any;
 
 export default {
-  title: 'images/SimpleImage',
+  title: "images/SimpleImage",
   component: SimpleImage,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
@@ -51,7 +53,7 @@ export default {
 // withSvg.argTypes = {
 //   resizeMode: {
 //     control: {
-//       type: Platform.OS === 'web' ? 'select' : 'text',
+//       type: MultiPlatform.isWeb ? 'select' : 'text',
 //       options: ['contain', 'cover', 'stretch'],
 //     },
 //   },
@@ -92,10 +94,10 @@ export const withYStack = (args: Props) => (
 
 withYStack.args = {
   height: 200,
-  width: '50%',
-  backgroundColor: 'green',
+  width: "50%",
+  backgroundColor: "green",
   // loader: 'ImageLoader',
-  loading: 'lazy',
+  loading: "lazy",
 };
 
 export const withTamagui = (args: Props) => (
@@ -111,9 +113,9 @@ export const withTamagui = (args: Props) => (
 );
 
 withTamagui.args = {
-  height: '$20',
-  width: '100%',
-  backgroundColor: '$red8',
+  height: "$20",
+  width: "100%",
+  backgroundColor: "$red8",
   // loader: 'ImageLoader',
-  loading: 'lazy',
+  loading: "lazy",
 };

package/src/images/SimpleImage/index.tsx

@@ -19,149 +19,4 @@
  * limitations under the License.
  */
 
-import React, { useMemo, forwardRef, useRef } from 'react';
-import type { ComponentProps, Ref } from 'react';
-import type { Image } from 'expo-image';
-import type { SolitoImageProps } from 'solito/build/image/image.types';
-import type { StackProps } from 'tamagui';
-import type { StaticImageData } from 'next/image';
-import { SolitoImage } from 'solito/image';
-import { Stack, createComponent } from 'tamagui';
-import { StyleSheet } from 'react-native';
-import { useAssets } from '../../hooks/useAssets';
-
-export type Props = Omit<SolitoImageProps, 'height' | 'width' | 'src' | 'fill' | 'style' | 'alt'> &
-  Omit<StackProps, 'height' | 'width'> & {
-    alt?: string;
-    height?: number | string;
-    src?: StaticImport | string | number;
-    width?: number | string;
-  };
-
-const SimpleImageComponent = forwardRef<Image, Props>(
-  (
-    {
-      alt,
-      blurDataURL,
-      contentFit,
-      contentPosition,
-      crossOrigin,
-      height,
-      loader,
-      loading,
-      onLayout,
-      onLoadingComplete,
-      placeholder,
-      priority,
-      quality,
-      aspectRatio,
-      referrerPolicy,
-      resizeMode,
-      sizes,
-      src,
-      unoptimized,
-      width,
-      ...props
-    }: Props,
-    ref: Ref<Image>,
-  ) => {
-    const parentRef = useRef();
-    const style = StyleSheet.flatten(props.style || {});
-    let asset: StaticImageData | undefined;
-    if (typeof src === 'number') [asset] = useAssets([src]);
-    const staticImageData = useMemo(() => {
-      if (typeof src === 'string') return;
-      if (typeof src === 'number') return asset;
-      return (src as { default?: StaticImageData })?.default || (src as StaticImageData);
-    }, [asset, src]);
-
-    const mAspectRatio = useMemo(() => {
-      const sAspectRatio = aspectRatio || style.aspectRatio;
-      if (typeof sAspectRatio === 'string') {
-        const [width, height] = sAspectRatio.split(':');
-        return parseInt(width || '0', 10) / parseInt(height || '0', 10);
-      }
-      return sAspectRatio;
-    }, [aspectRatio, style.aspectRatio]);
-
-    const solitoHeight = useMemo(() => {
-      if (typeof height === 'string') return;
-      if (typeof height === 'number') return height;
-      const w =
-        typeof width === 'number'
-          ? width
-          : typeof style.width !== 'undefined'
-            ? typeof style.width === 'number'
-              ? style.width
-              : undefined
-            : staticImageData?.width;
-      if (typeof w === 'number' && typeof mAspectRatio === 'number') return w / mAspectRatio;
-      return staticImageData?.height;
-    }, [mAspectRatio, staticImageData?.width, staticImageData?.height, style.width, style.height, width, height]);
-
-    const solitoWidth = useMemo(() => {
-      if (typeof width === 'string') return;
-      if (typeof width === 'number') return width;
-      const h =
-        typeof height === 'number'
-          ? height
-          : typeof style.height !== 'undefined'
-            ? typeof style.height === 'number'
-              ? style.height
-              : undefined
-            : staticImageData?.height;
-      if (typeof h === 'number' && typeof mAspectRatio === 'number') return h * mAspectRatio;
-      return staticImageData?.width;
-    }, [mAspectRatio, staticImageData?.width, staticImageData?.height, style.width, style.height, width, height]);
-
-    const fill = useMemo(() => {
-      if (typeof solitoWidth === 'undefined' || typeof solitoHeight === 'undefined') {
-        return true;
-      }
-      return false;
-    }, [solitoWidth, solitoHeight]);
-
-    return (
-      <Stack {...props} aspectRatio={aspectRatio} width={width} height={height} ref={parentRef as any}>
-        {src && (
-          <SolitoImage
-            alt={alt || ''}
-            blurDataURL={blurDataURL}
-            contentFit={contentFit}
-            contentPosition={contentPosition}
-            crossOrigin={crossOrigin}
-            fill={fill}
-            height={fill ? undefined : solitoHeight}
-            loader={loader}
-            loading={loading}
-            onLayout={onLayout}
-            onLoadingComplete={onLoadingComplete}
-            placeholder={placeholder}
-            priority={priority}
-            quality={quality}
-            ref={ref}
-            referrerPolicy={referrerPolicy}
-            resizeMode={resizeMode}
-            sizes={sizes}
-            src={src as any}
-            unoptimized={unoptimized}
-            width={fill ? undefined : solitoWidth}
-          />
-        )}
-      </Stack>
-    );
-  },
-);
-
-export const SimpleImage = createComponent<ComponentProps<typeof SimpleImageComponent>>({
-  Component: SimpleImageComponent as any,
-  acceptsClassName: true,
-});
-
-export interface StaticRequire {
-  default: StaticImageData;
-}
-
-export type StaticImport = StaticRequire | StaticImageData;
-
-export type SimpleImageProps = ComponentProps<typeof SimpleImage>;
+export { Image as SimpleImage } from "tamagui";

package/src/images/Svg/Svg.stories.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
-import { Path } from 'react-native-svg';
-import { Svg } from './index';
+import { Path } from "react-native-svg";
+import { Svg } from "./index";
 
 export default {
-  title: 'images/Svg',
+  title: "images/Svg",
   component: Svg,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 

package/src/images/Svg/index.native.ts

@@ -1,4 +1,4 @@
-import { Svg as RNSvg } from 'react-native-svg';
-import { styled } from 'tamagui';
+import { Svg as RNSvg } from "react-native-svg";
+import { styled } from "tamagui";
 
 export const Svg = styled(RNSvg, {});