@multiplatform.one/components 0.2.16 → 0.7.0

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormSwitch } from './index';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormSwitch',
@@ -10,5 +11,11 @@ export default {
 };
 
 export const main = () => (
-  <FormSwitch label="Example Switch" name="exampleSwitch" helperText="This is an example switch" defaultValue={false} />
+  <FormSwitch
+    label="Example Switch"
+    name="exampleSwitch"
+    helperText="This is an example switch"
+    defaultValue={false}
+    onCheckedChange={action('onCheckedChange')}
+  />
 );

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormTextArea } from './index';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormTextArea',
@@ -10,5 +11,11 @@ export default {
 };
 
 export const main = () => (
-  <FormTextArea label="Description" name="description" defaultValue="" rules={{ required: true }} />
+  <FormTextArea
+    label="Description"
+    name="description"
+    defaultValue=""
+    rules={{ required: true }}
+    onChangeText={action('onChangeText')}
+  />
 );

package/src/forms/SimpleForm/SimpleForm.stories.tsx

@@ -3,6 +3,9 @@ import { SimpleForm } from './index';
 import { FormInput } from '../FormInput';
 import { FormSelectSimple } from '../FormSelectSimple';
 import { FormSubmitButton } from '../FormSubmitButton';
+import { FormTextArea } from '../FormTextArea';
+import { FormSwitch } from '../FormSwitch';
+import { FormRadioGroup } from '../FormRadioGroup';
 import { Select } from 'tamagui';
 import { action } from '@storybook/addon-actions';
 
@@ -41,6 +44,18 @@ export const main = () => (
         <Select.ItemText>Violet</Select.ItemText>
       </Select.Item>
     </FormSelectSimple>
+    <FormTextArea name="bio" label="Bio" />
+    <FormSwitch name="isAwesome" label="Is Awesome" />
+    <FormRadioGroup
+      radioElements={[
+        { label: 'male', value: 'male' },
+        { label: 'female', value: 'female' },
+      ]}
+      name="Gender"
+      label="Gender"
+      horizontal
+      spacingProps={{ space: true }}
+    />
     <FormSubmitButton onSubmit={action('onSubmit')}>Submit</FormSubmitButton>
   </SimpleForm>
 );

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

@@ -1,26 +1,20 @@
-import type { Asset as ExpoAsset } from 'expo-asset';
-import type { Asset } from './types';
+import type { Asset } from 'expo-asset';
+import type { StaticImageData } from 'next/dist/client/image';
 import { useAssets as expoUseAssets } from 'expo-asset';
 
 const logger = console;
 
-export function useAssets(modules: any | any[]): (Asset | undefined)[] {
+export function useAssets(modules: any | any[]): (StaticImageData | undefined)[] {
   const modulesArr = (Array.isArray(modules) ? modules : [modules]).map((module: any) => {
-    if (typeof module.default !== 'undefined' && module.__esModule === true) return module.default;
+    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);
-  return assets.map((asset: ExpoAsset) => ({
-    type: asset.type,
-    uri: asset.uri,
-    width: asset.width || undefined,
-    height: asset.height || undefined,
-    name: asset.name,
-    hash: asset.hash,
-    localUri: asset.localUri,
-    downloading: asset.downloading,
-    downloaded: asset.downloaded,
+  return assets.map((asset: Asset) => ({
+    height: asset.height!,
+    src: asset.uri,
+    width: asset.width!,
   }));
 }

package/src/hooks/useAssets/index.ts

@@ -1,31 +1,11 @@
-import type { Asset } from './types';
+import type { StaticImageData } from 'next/dist/client/image';
 
-export function useAssets(modules: any | any[]): (Asset | undefined)[] {
-  const modulesArr = (Array.isArray(modules) ? modules : [modules]).map((module: any) => {
-    if (typeof module.default !== 'undefined' && module.__esModule === true) return module.default;
-    return module;
-  });
-  return modulesArr.map((module: WebModule) =>
-    typeof module === 'string'
-      ? {
-          uri: module,
-        }
-      : {
-          uri: module.src,
-          height: module.height,
-          blurDataURL: module.blurDataURL,
-          width: module.width,
-        },
+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;
 }
-
-type WebModule =
-  | string
-  | {
-      blurDataURL?: string;
-      height?: 850;
-      src: string;
-      width?: 1024;
-    };
-
-export type { Asset };

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Platform } from 'react-native';
 import { useAssets } from '../../hooks';
 import { SimpleImage } from './index';
+import { YStack } from 'tamagui';
 
 export default {
   title: 'images/SimpleImage',
@@ -53,3 +54,28 @@ function WithRequire() {
   );
 }
 export const withRequire = () => <WithRequire />;
+
+export const withYStack = () => (
+  <YStack>
+    <YStack width="50%" height={200} bg="red" />
+    <YStack width="50%" height={200} bg="blue" />
+    <SimpleImage
+      bg="green"
+      height={200}
+      resizeMode="stretch"
+      src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Inukshuk_Park_05.jpg/500px-Inukshuk_Park_05.jpg"
+      width="50%"
+    />
+  </YStack>
+);
+
+export const withTamagui = () => (
+  <YStack>
+    <SimpleImage
+      bg="$green9"
+      h="$19"
+      src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Inukshuk_Park_05.jpg/500px-Inukshuk_Park_05.jpg"
+      w="100%"
+    />
+  </YStack>
+);

package/src/images/SimpleImage/index.tsx

@@ -1,162 +1,149 @@
-import React, { useEffect, useState } from 'react';
-import type { ImageProps, YStackProps } from 'tamagui';
-import type { ImageURISource, ImageResizeMode } from 'react-native';
-import type { SvgUriProps } from '../SvgUri';
-import { MultiPlatform } from 'multiplatform.one';
-import { Platform, Image as RNImage } from 'react-native';
-import { SvgUri } from '../SvgUri';
-import { XMLParser } from 'fast-xml-parser';
-import { YStack, Image } from 'tamagui';
+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/dist/client/image';
+import { SolitoImage } from 'solito/image';
+import { Stack, createComponent } from 'tamagui';
+import { StyleSheet } from 'react-native';
 import { useAssets } from '../../hooks/useAssets';
-import { useMemo } from 'react';
 
-export type SimpleImageProps = Omit<ImageProps, 'src' | 'width' | 'height' | 'source'> & {
-  src?: ImageURISource | string;
-  width?: string | number;
-  height?: string | number;
-  svg?: boolean;
-};
+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;
+  };
 
-export function SimpleImage({ src, svg, width, height, resizeMode, aspectRatio, ...imageProps }: SimpleImageProps) {
-  const preserveAspectRatio = useMemo(() => getPreserveAspectRatio(resizeMode), [resizeMode]);
-  let source: string | number | ImageURISource | undefined = src;
-  if ((typeof src === 'object' && typeof (src as ImageURISource).uri === 'undefined') || typeof src === 'number') {
-    [source] = useAssets(src);
-  }
-  const [imageAspectRatio, setImageAspectRatio] = useState(
-    typeof source === 'object' && source.width && source.height ? source.width / source.height : undefined,
-  );
-  if (!Number.isFinite(aspectRatio)) aspectRatio = imageAspectRatio;
-  const uri = typeof source === 'object' ? source.uri : source;
-  const origin = uri?.replace(/\?.+/g, '');
-  // fixes bug on web where width is calculated differently than on native
-  if (
-    Platform.OS === 'web' &&
-    typeof aspectRatio === 'number' &&
-    typeof height === 'number' &&
-    Number.isFinite(height) &&
-    (!Number.isFinite(width) || width === 'auto')
-  ) {
-    width = height * aspectRatio;
-  }
-  if (Number.isFinite(height) && Number.isFinite(width)) aspectRatio = undefined;
-  const isSvg =
-    svg ||
-    (((src as any)?.type === 'svg' || origin?.substring(origin.length - 4) === '.svg') && typeof svg === 'undefined');
+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]);
 
-  useEffect(() => {
-    if (Platform.OS !== 'web' && isSvg) {
-      (async () => {
-        const meta = await getSvgMeta(uri);
-        const height = Number.isFinite(meta.height) ? meta.height : meta.viewBox?.[3];
-        const width = Number.isFinite(meta.width) ? meta.width : meta.viewBox?.[2];
-        if (
-          typeof height === 'number' &&
-          Number.isFinite(height) &&
-          typeof width === 'number' &&
-          Number.isFinite(width)
-        ) {
-          setImageAspectRatio(width / height);
-        }
-      })();
-    } else if (typeof uri !== 'number' && uri /* && calculateHeight */) {
-      RNImage.getSize(uri, (width: number, height: number) => {
-        const ratio = width / height;
-        if (Number.isFinite(ratio)) setImageAspectRatio(ratio);
-      });
-    }
-  }, [uri]);
+    const mAspectRatio = useMemo(() => {
+      const sAspectRatio = aspectRatio || style.aspectRatio;
+      if (typeof sAspectRatio === 'string') {
+        const [width, height] = sAspectRatio.split(':');
+        return parseInt(width, 10) / parseInt(height, 10);
+      }
+      return sAspectRatio;
+    }, [aspectRatio, style.aspectRatio]);
 
-  if (!uri) {
-    return <YStack {...(imageProps as YStackProps)} width={width} height={height} aspectRatio={aspectRatio} />;
-  }
-  if (!MultiPlatform.isWeb && isSvg) {
-    return (
-      <SvgUri
-        {...(imageProps as Partial<SvgUriProps>)}
-        width={Number.isFinite(width) ? width : Number.isFinite(height) ? undefined : '100%'}
-        height={height}
-        preserveAspectRatio={preserveAspectRatio}
-        aspectRatio={aspectRatio}
-        uri={uri}
-      />
-    );
-  }
-  return (
-    <Image
-      zIndex={undefined}
-      {...imageProps}
-      // @ts-ignore
-      width={width}
-      // @ts-ignore
-      height={height}
-      aspectRatio={aspectRatio}
-      resizeMode={resizeMode}
-      source={{ uri }}
-    />
-  );
-}
+    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]);
 
-SimpleImage.defaultProps = {
-  resizeMode: 'cover',
-};
+    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]);
 
-function getPreserveAspectRatio(resizeMode?: ImageResizeMode): string {
-  switch (resizeMode) {
-    case 'stretch': {
-      return 'none';
-    }
-    case 'contain': {
-      return 'xMidYMid meet';
-    }
-  }
-  return 'xMidYMid slice';
-}
+    const fill = useMemo(() => {
+      if (typeof solitoWidth === 'undefined' || typeof solitoHeight === 'undefined') {
+        return true;
+      }
+      return false;
+    }, [solitoWidth, solitoHeight]);
 
-const logger = console;
-const parser = new XMLParser({
-  ignoreAttributes: false,
-  attributeNamePrefix: '@_',
-  allowBooleanAttributes: true,
-});
+    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>
+    );
+  },
+);
 
-async function getSvgMeta(uri?: string | number) {
-  const meta: SvgMeta = {};
-  if (Platform.OS === 'web' || typeof uri === 'number' || !uri) return meta;
-  const res = await fetch(uri);
-  try {
-    const xml = parser.parse(await res.text());
-    const width = parseInt(xml?.svg?.['@_width'], 10);
-    const height = parseInt(xml?.svg?.['@_height'], 10);
-    const viewBox = xml?.svg?.['@_viewBox']
-      ?.toString()
-      .split(' ')
-      .reduce(
-        (viewBox: SvgViewBox | undefined, itemStr: string, i: number) => {
-          if (!viewBox) return {};
-          const itemNum = parseInt(itemStr, 10);
-          if (!Number.isFinite(itemNum)) return {};
-          viewBox[i] = itemNum;
-          return viewBox;
-        },
-        [0, 0, 0, 0],
-      ) as SvgViewBox;
-    if (typeof width === 'number' && Number.isFinite(width)) meta.width = width;
-    if (typeof height === 'number' && Number.isFinite(height)) meta.height = height;
-    if (viewBox) meta.viewBox = viewBox;
-    return meta;
-  } catch (err) {
-    logger.error(err);
-  }
-  return meta;
+export const SimpleImage = createComponent<ComponentProps<typeof SimpleImageComponent>>(
+  {
+    Component: SimpleImageComponent as any,
+    acceptsClassName: true,
+  },
+  SimpleImageComponent,
+);
+
+export interface StaticRequire {
+  default: StaticImageData;
 }
 
-type Width = number;
-type Height = number;
-export type SvgViewBox = [number, number, Width, Height];
+export type StaticImport = StaticRequire | StaticImageData;
 
-export interface SvgMeta {
-  height?: number;
-  viewBox?: SvgViewBox;
-  width?: number;
-}
+export type SimpleImageProps = ComponentProps<typeof SimpleImage>;

package/src/images/index.ts

@@ -1,2 +1,2 @@
-export * from './SimpleImage';
+export * from './SimpleImage/index';
 export * from './Svg';

package/src/organize/SimpleTabs/SimpleTabs.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { SimpleTabs, TabContent, TabsList, Tab } from './index';
+import { H5, SizableText } from 'tamagui';
+
+export default {
+  title: 'organize/SimpleTabs',
+  component: SimpleTabs,
+  parameters: {
+    status: {
+      type: 'beta',
+    },
+  },
+};
+
+export const horizontalTabs = () => (
+  <SimpleTabs defaultRoute="contact" fullScreen>
+    <TabsList>
+      <Tab path="home">Home</Tab>
+      <Tab path="about">About</Tab>
+      <Tab path="contact">Contact</Tab>
+      <Tab path="description">
+        <SizableText textAlign="center">Description</SizableText>
+      </Tab>
+    </TabsList>
+    <TabContent route="home">
+      <H5>Home</H5>
+    </TabContent>
+    <TabContent route="about">
+      <H5>About</H5>
+    </TabContent>
+    <TabContent route="contact">
+      <H5>Contact</H5>
+    </TabContent>
+    <TabContent route="description" jc="center" ai="center">
+      <H5>Default</H5>
+    </TabContent>
+  </SimpleTabs>
+);
+
+export const verticalTabs = () => (
+  <SimpleTabs defaultRoute="about" orientation="vertical" width="100%" height="100%">
+    <TabsList fullHeight={false}>
+      <Tab path="home">Home</Tab>
+      <Tab path="about">About</Tab>
+      <Tab path="contact">Contact</Tab>
+      <Tab path="description">
+        <SizableText textAlign="center">Description</SizableText>
+      </Tab>
+    </TabsList>
+    <TabContent route="home">
+      <H5>Home</H5>
+    </TabContent>
+    <TabContent route="about">
+      <H5>About</H5>
+    </TabContent>
+    <TabContent route="contact">
+      <H5>Contact</H5>
+    </TabContent>
+    <TabContent route="description" jc="center" ai="center">
+      <H5>Default</H5>
+    </TabContent>
+  </SimpleTabs>
+);

package/src/organize/SimpleTabs/index.tsx

@@ -0,0 +1,118 @@
+import type { PropsWithChildren } from 'react';
+import React, { useMemo } from 'react';
+import type { TabsProps, TabsContentProps, TabsTabProps, TabsListProps, ThemeValueFallback, SizeTokens } from 'tamagui';
+import { SizableText } from 'tamagui';
+import { Separator } from 'tamagui';
+import { Tabs } from 'tamagui';
+
+export type SimpleTabsProps = Omit<TabsProps, 'defaultValue'> & { fullScreen?: boolean } & { defaultRoute?: string };
+
+export type ContentProps = Omit<TabsContentProps, 'value'> & { route: string };
+
+export type TabProps = Omit<TabsTabProps, 'value'> & { path: string };
+
+export type ListProps = TabsListProps & { fullHeight?: boolean };
+
+interface SimpleTabsContextProps extends PropsWithChildren {
+  orientation: 'horizontal' | 'vertical' | undefined;
+  width: SizeTokens | ThemeValueFallback | undefined;
+}
+
+interface TabListContextProps extends PropsWithChildren {
+  fullHeight: boolean;
+}
+
+const SimpleTabsContext = React.createContext<SimpleTabsContextProps | null>(null);
+
+const TabsListContext = React.createContext<TabListContextProps | null>(null);
+
+export function SimpleTabs({
+  width,
+  height,
+  fullScreen,
+  defaultRoute,
+  orientation = 'horizontal',
+  ...props
+}: SimpleTabsProps) {
+  const contextValue = useMemo(() => ({ orientation, width }), [orientation, width]);
+
+  return (
+    <SimpleTabsContext.Provider value={contextValue}>
+      <Tabs
+        borderRadius="$4"
+        borderWidth="$0.25"
+        overflow="hidden"
+        borderColor="$borderColor"
+        flexDirection={orientation === 'vertical' ? 'row' : 'column'}
+        defaultValue={defaultRoute}
+        {...props}
+        width={fullScreen ? '100%' : width ?? 300}
+        height={fullScreen ? '100%' : height ?? 150}
+      >
+        {props.children}
+      </Tabs>
+    </SimpleTabsContext.Provider>
+  );
+}
+
+export function TabsList({ fullHeight = false, ...props }: ListProps) {
+  const context = React.useContext(SimpleTabsContext);
+  if (!context) throw new Error('TabsList must be used inside SimpleTabs');
+  const { orientation } = context;
+  const contextValue = useMemo(() => ({ fullHeight }), [fullHeight]);
+
+  return (
+    <TabsListContext.Provider value={contextValue}>
+      <Tabs.List
+        separator={<Separator vertical={orientation === 'horizontal'} />}
+        disablePassBorderRadius={orientation === 'horizontal' ? 'bottom' : 'end'}
+        aria-label="Manage your account"
+        flex={0}
+        style={orientation === 'vertical' ? { display: 'flex', flexDirection: 'column' } : {}}
+        {...props}
+      >
+        {props.children}
+      </Tabs.List>
+    </TabsListContext.Provider>
+  );
+}
+
+export function TabContent({ route, ...props }: ContentProps) {
+  return (
+    <Tabs.Content
+      backgroundColor="$background"
+      key={route}
+      padding="$2"
+      flex={1}
+      borderColor="$background"
+      borderRadius="$2"
+      borderTopLeftRadius={0}
+      borderTopRightRadius={0}
+      borderWidth="$2"
+      value={route}
+      {...props}
+    >
+      {props.children}
+    </Tabs.Content>
+  );
+}
+
+export function Tab({ path, ...props }: TabProps) {
+  const context = React.useContext(SimpleTabsContext);
+  const listContext = React.useContext(TabsListContext);
+  if (!context) throw new Error('Tab must be used inside TabList');
+  const { orientation } = context;
+  if (!listContext) throw new Error('Tab must be used inside TabList');
+  const { fullHeight } = listContext;
+
+  return (
+    <Tabs.Tab
+      key={path}
+      f={orientation === 'horizontal' || (orientation === 'vertical' && fullHeight) ? 1 : 0}
+      value={path}
+      {...props}
+    >
+      {typeof props.children === 'string' ? <SizableText>{props.children}</SizableText> : props.children}
+    </Tabs.Tab>
+  );
+}