@multiplatform.one/components 0.2.17 → 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,174 +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 { getTokens } 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' | 'source'> & {
-  src?: ImageURISource | string;
-  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({
-  aspectRatio,
-  h,
-  height,
-  resizeMode,
-  src,
-  svg,
-  w,
-  width,
-  ...imageProps
-}: SimpleImageProps) {
-  const tokens = getTokens();
-  height = tokens.size[(height || h) as string]?.val || height || h;
-  width = tokens.size[(width || w) as string]?.val || width || w;
-  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 as number) : Number.isFinite(height) ? undefined : '100%'}
-        height={height as number}
-        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>
+);