@multiplatform.one/components 4.1.1 → 4.1.8

package/src/forms/Select/FieldSelectSimple.tsx

@@ -21,7 +21,7 @@
 
 import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
 import { Field, useForm } from "@tanstack/react-form";
-import React, { useId } from "react";
+import { useId } from "react";
 import { useProps } from "tamagui";
 import type { FormFieldProps } from "../FormField";
 import { FormField } from "../FormField";

package/src/forms/Select/SelectSimple.stories.tsx

@@ -1,5 +1,4 @@
 import { action } from "@storybook/addon-actions";
-import React from "react";
 import { Select } from "tamagui";
 import { SelectSimple } from "./SelectSimple";
 

package/src/forms/Select/SelectSimple.tsx

@@ -19,7 +19,6 @@
  * limitations under the License.
  */
 
-import React from "react";
 import type { ReactNode } from "react";
 import type { SelectTriggerProps } from "tamagui";
 import { styled } from "tamagui";

package/src/forms/SelectButton/OptionButton.tsx

@@ -19,7 +19,7 @@
  * limitations under the License.
  */
 
-import React, { useContext, useState, useEffect, useCallback } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import type { ComponentProps } from "react";
 import type { GestureResponderEvent } from "react-native";
 import { styled } from "tamagui";

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

@@ -1,5 +1,4 @@
 import { action } from "@storybook/addon-actions";
-import React from "react";
 import { Text } from "tamagui";
 import { SelectButton } from "./SelectButton";
 

package/src/forms/SelectButton/SelectButton.tsx

@@ -19,7 +19,7 @@
  * limitations under the License.
  */
 
-import React, { useState, useMemo, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { ButtonProps, YStackProps } from "tamagui";
 import { XStack, YStack } from "tamagui";
 import type { OptionButtonProps } from "./OptionButton";

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
@@ -42,10 +42,10 @@
 
 import { action } from "@storybook/addon-actions";
 import { useForm } from "@tanstack/react-form";
-import React from "react";
+import { useState } from "react";
 import { Button, Text, YStack } from "tamagui";
-import { FieldSlider } from "./FieldSlider";
 import type { FieldSliderProps } from "./FieldSlider";
+import { FieldSlider } from "./FieldSlider";
 
 export default {
   title: "forms/FieldSlider",
@@ -67,7 +67,7 @@ const mainArgs: FieldSliderProps = {
 main.args = mainArgs;
 
 export const form = () => {
-  const [sliderValue, setSliderValue] = React.useState<number[]>([0]);
+  const [sliderValue, setSliderValue] = useState<number[]>([0]);
 
   const form = useForm({
     defaultValues: {

package/src/forms/Slider/FieldSlider.tsx

@@ -21,7 +21,7 @@
 
 import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
 import { Field, useForm } from "@tanstack/react-form";
-import React, { useId } from "react";
+import { useId } from "react";
 import type { SliderThumbProps } from "tamagui";
 import { useProps } from "tamagui";
 import type { FormFieldProps } from "../FormField";

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

@@ -21,7 +21,6 @@
 
 import { action } from "@storybook/addon-actions";
 import { useForm } from "@tanstack/react-form";
-import React from "react";
 import { Button, YStack } from "tamagui";
 import type { FieldSwitchProps } from "./FieldSwitch";
 import { FieldSwitch } from "./FieldSwitch";

package/src/forms/Switch/FieldSwitch.tsx

@@ -21,7 +21,7 @@
 
 import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
 import { Field, useForm } from "@tanstack/react-form";
-import React, { useId } from "react";
+import { useId } from "react";
 import type { SwitchProps, SwitchThumbProps } from "tamagui";
 import { Switch, useProps } from "tamagui";
 import type { FormFieldProps } from "../FormField";

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

@@ -21,7 +21,6 @@
 
 import { action } from "@storybook/addon-actions";
 import { useForm } from "@tanstack/react-form";
-import React from "react";
 import { Button, YStack } from "tamagui";
 import type { FieldTextAreaProps } from "./FieldTextArea";
 import { FieldTextArea } from "./FieldTextArea";

package/src/forms/TextArea/FieldTextArea.tsx

@@ -21,7 +21,7 @@
 
 import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
 import { Field, useForm } from "@tanstack/react-form";
-import React, { useId } from "react";
+import { useId } from "react";
 import type { TextAreaProps } from "tamagui";
 import { TextArea, useProps } from "tamagui";
 import type { FormFieldProps } from "../FormField";

package/src/forms/types.ts

@@ -23,12 +23,32 @@ import type {
   DeepKeys,
   DeepValue,
   FieldApi,
+  FieldApiOptions,
   Validator,
 } from "@tanstack/form-core";
-import type {
-  NodeType,
-  UseFieldOptions,
-} from "@tanstack/react-form/dist/esm/types";
+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,

package/src/helpers.tsx

@@ -1,6 +1,5 @@
 import { isText } from "multiplatform.one";
 import type { ComponentType, ReactNode } from "react";
-import React from "react";
 import { Text } from "tamagui";
 
 export function useAutoText(

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

@@ -1,9 +1,10 @@
 import type { Asset } from "expo-asset";
 import { useAssets as expoUseAssets } from "expo-asset";
-import type { StaticImageData } from "next/image";
 
 const logger = console;
 
+type StaticImageData = any;
+
 export function useAssets(
   modules: any | any[],
 ): (StaticImageData | undefined)[] {

package/src/hooks/useAssets/index.ts

@@ -1,4 +1,5 @@
-import type { StaticImageData } from "next/image";
+// TODO: remove this
+type StaticImageData = any;
 
 export function useAssets(
   modules: any | any[],

package/src/icons/CheckRegular.tsx

@@ -20,8 +20,8 @@
  * limitations under the License.
  */
 
+import { Polyline, Rect, Svg } from "@tamagui/react-native-svg";
 import { memo } from "react";
-import { Polyline, Rect, Svg } from "react-native-svg";
 import { themed } from "./themed";
 
 function Icon({ color = "black", size = 24, ...otherProps }) {

package/src/icons/themed.tsx

@@ -20,7 +20,6 @@
  * limitations under the License.
  */
 
-import React from "react";
 import type { FC } from "react";
 import {
   getTokens,

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

@@ -19,10 +19,12 @@
  * limitations under the License.
  */
 
-import React from "react";
 import { YStack } from "tamagui";
 import { useAssets } from "../../hooks";
-import { type Props, SimpleImage } from "./index";
+import { SimpleImage } from "./index";
+
+// TODO: Fix this type
+export type Props = any;
 
 export default {
   title: "images/SimpleImage",
@@ -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'],
 //     },
 //   },

package/src/images/SimpleImage/index.tsx

@@ -19,186 +19,4 @@
  * limitations under the License.
  */
 
-import type { Image } from "expo-image";
-import type { StaticImageData } from "next/image";
-import React, { useMemo, forwardRef, useRef } from "react";
-import type { ComponentProps, Ref } from "react";
-import { StyleSheet } from "react-native";
-import type { SolitoImageProps } from "solito/build/image/image.types";
-import { SolitoImage } from "solito/image";
-import type { StackProps } from "tamagui";
-import { Stack, createComponent } from "tamagui";
-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 (
-          Number.parseInt(width || "0", 10) / Number.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,4 +1,3 @@
-import React from "react";
 import { Path } from "react-native-svg";
 import { Svg } from "./index";
 

package/src/images/SvgUri/index.tsx

@@ -19,7 +19,6 @@
  * limitations under the License.
  */
 
-import React from "react";
 import type { UriProps } from "react-native-svg";
 import type { StackProps } from "tamagui";
 

package/src/layouts/Debug/DebugLayout.stories.tsx

@@ -20,7 +20,6 @@
  */
 
 import { action } from "@storybook/addon-actions";
-import React from "react";
 import { Button } from "tamagui";
 import { withDebugLayout } from "./index";
 

package/src/layouts/Debug/index.tsx

@@ -19,14 +19,12 @@
  * limitations under the License.
  */
 
-import { useLocale, useSupportedLocales } from "@multiplatform.one/locales";
-// @ts-ignore
-import { config } from "app/config";
+import i18n from "i18next";
 import type { WithLayout } from "multiplatform.one";
-// import { SelectSimple } from '../../forms/SelectSimple';
-import { createWithLayout } from "multiplatform.one";
+import { config } from "multiplatform.one";
+import { createWithLayout, useLanguage } from "multiplatform.one";
 import { useTheme } from "multiplatform.one/theme";
-import React from "react";
+// import { SelectSimple } from '../../forms/SelectSimple';
 import type { ComponentType, ReactNode } from "react";
 import type { ThemeName } from "tamagui";
 import { Adapt, Circle, Popover, Select, XStack, YStack } from "tamagui";
@@ -63,8 +61,7 @@ export function DebugLayout<DebugViewProps>({
   const { familiesNames, setFamily, name } = useTint();
   const DebugView = debugView;
   const [theme, setTheme] = useTheme();
-  const [locale, setLocale] = useLocale();
-  const supportedLocales = useSupportedLocales();
+  const [language, setLanguage] = useLanguage();
 
   function handleSubThemeChange(subTheme: ThemeName) {
     setTheme({ sub: subTheme });
@@ -94,8 +91,9 @@ export function DebugLayout<DebugViewProps>({
     });
   }
 
+  // TODO: fix this
   function renderLocaleItems() {
-    return (supportedLocales || []).map((name: string, i: number) => {
+    return (i18n?.languages || []).map((name: string, i: number) => {
       return (
         <Select.Item key={i + name} index={i} value={name}>
           <Select.ItemText>{name}</Select.ItemText>
@@ -160,8 +158,8 @@ export function DebugLayout<DebugViewProps>({
                 width={96}
                 placeholder={locale}
                 backgroundColor="$color10"
-                value={locale}
-                onValueChange={setLocale}
+                value={language}
+                onValueChange={setLanguage}
               >
                 {renderLocaleItems()}
               </SelectSimple>
@@ -196,7 +194,8 @@ export function createWithDebugLayout<DebugViewProps>(
   extraLayouts?: WithLayout<any>[],
   debugLayoutProps: CreateWithDebugLayout<DebugViewProps> = {},
 ) {
-  return createWithLayout(DebugLayout, extraLayouts, debugLayoutProps);
+  // TODO: Fix this type
+  return createWithLayout(DebugLayout, extraLayouts, debugLayoutProps as any);
 }
 
 export const withDebugLayout = createWithDebugLayout();

package/src/mdx/ExternalIcon/ExternalIcon.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta } from "@storybook/react";
-import React from "react";
 import { ExternalIcon } from "./index";
 
 const meta: Meta = {

package/src/mdx/ExternalIcon/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Path, Svg } from "react-native-svg";
 
 export function ExternalIcon() {

package/src/mdx/HR/HR.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { HR } from "./index";
 
 export default {

package/src/mdx/HR/index.tsx

@@ -19,7 +19,6 @@
  * limitations under the License.
  */
 
-import React from "react";
 import { EnsureFlexed, YStack } from "tamagui";
 
 export const HR = () => (

package/src/mdx/LI/LI.stories.tsx

@@ -19,7 +19,6 @@
  * limitations under the License.
  */
 
-import React from "react";
 import { Text } from "tamagui";
 import { LI } from "./index";
 

package/src/mdx/MDX/MDX.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta } from "@storybook/react";
-import React from "react";
 import { MDX } from "./index";
 
 const meta: Meta = {

package/src/mdx/MDX/index.tsx

@@ -20,9 +20,8 @@
  */
 
 import { useMDXComponents } from "@mdx-js/react";
-import type { MDXComponents } from "@mdx-js/react/lib";
 import type { DebugProp } from "@tamagui/web";
-import React from "react";
+import type { MDXComponents } from "mdx/types";
 import { mdxComponents } from "../components";
 import { useCompileAndEvaluateMdx } from "../hooks";
 

package/src/mdx/MDXCodeBlock/MDXCodeBlock.stories.tsx

@@ -20,7 +20,6 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 import { Text, XStack } from "tamagui";
 import { MDXCodeBlock } from "./index";
 

package/src/mdx/MDXCodeBlock/index.tsx

@@ -21,8 +21,8 @@
 
 import { LinearGradient } from "@tamagui/linear-gradient";
 import { CheckCircle, Clipboard } from "@tamagui/lucide-icons";
-import React, { useEffect, useRef, useState, useContext } from "react";
-import { ScrollView } from "react-native";
+import { useContext, useEffect, useRef, useState } from "react";
+import { ScrollView } from "tamagui";
 import {
   Button,
   Spacer,

package/src/mdx/UL/UL.stories.tsx

@@ -19,7 +19,6 @@
  * limitations under the License.
  */
 
-import React from "react";
 import { Text } from "tamagui";
 import { UL } from "./index";
 

package/src/mdx/components.tsx

@@ -19,11 +19,11 @@
  * limitations under the License.
  */
 
-import type { MDXComponents } from "@mdx-js/react/lib";
 import { Link as IconLink } from "@tamagui/lucide-icons";
-import React from "react";
-import { Platform } from "react-native";
-import { Link } from "solito/link";
+import type { MDXComponents } from "mdx/types";
+import { MultiPlatform } from "multiplatform.one";
+import { Link } from "one";
+import { Children } from "react";
 import type { XStackProps } from "tamagui";
 import {
   H1,
@@ -130,7 +130,7 @@ export const mdxComponents: MDXComponents = {
   ul: ({ children }) => (
     // @ts-ignore
     <UL marginVertical="$4">
-      {React.Children.toArray(children).map((x) =>
+      {Children.toArray(children).map((x) =>
         typeof x === "string" ? null : x,
       )}
     </UL>
@@ -151,7 +151,8 @@ export const mdxComponents: MDXComponents = {
     </YStack>
   ),
   pre: ({ children }) => <>{children}</>,
-  code,
+  // TODO: Fix this type
+  code: code as any,
   blockquote: ({ children, ...props }) => (
     <YStack
       borderColor="$borderColor"
@@ -177,7 +178,7 @@ export const mdxComponents: MDXComponents = {
       </Paragraph>
     </YStack>
   ),
-  ...(Platform.OS === "web"
+  ...(MultiPlatform.isWeb
     ? {}
     : {
         div: (props) => <Text {...sanitizeProps(props)} />,
@@ -213,7 +214,7 @@ const LinkHeading = ({
 );
 
 const getNonTextChildren = (children) => {
-  return React.Children.map(children, (x) => {
+  return Children.map(children, (x) => {
     if (typeof x === "string") return null;
     if (x.type === code) return null;
     return x;
@@ -221,6 +222,5 @@ const getNonTextChildren = (children) => {
 };
 
 function sanitizeProps<P>(props: any): P {
-  if (Platform.OS !== "web") return props;
   return props;
 }