@multiplatform.one/components 0.2.0

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SelectButton } from './index';
+import { Text } from 'tamagui';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'forms/SelectButton',
+  component: SelectButton,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <SelectButton onValueChange={action('onValueChange')} space>
+    <SelectButton.OptionButton index={0} value="bmw">
+      <Text>BMW</Text>
+    </SelectButton.OptionButton>
+    <SelectButton.OptionButton index={1} value="audi">
+      <Text>AUDI</Text>
+    </SelectButton.OptionButton>
+    <SelectButton.OptionButton index={2} value="ford">
+      <Text>FORD</Text>
+    </SelectButton.OptionButton>
+    <SelectButton.OptionButton index={3} value="suzuki">
+      <Text>SUZUKI</Text>
+    </SelectButton.OptionButton>
+  </SelectButton>
+);
+
+export const x = () => (
+  <SelectButton onValueChange={action('onValueChange')} space xStack>
+    <SelectButton.OptionButton index={0} value="bmw">
+      <Text>BMW</Text>
+    </SelectButton.OptionButton>
+    <SelectButton.OptionButton index={1} value="audi">
+      <Text>AUDI</Text>
+    </SelectButton.OptionButton>
+    <SelectButton.OptionButton index={2} value="ford">
+      <Text>FORD</Text>
+    </SelectButton.OptionButton>
+    <SelectButton.OptionButton index={3} value="suzuki">
+      <Text>SUZUKI</Text>
+    </SelectButton.OptionButton>
+  </SelectButton>
+);

package/src/forms/SelectButton/context.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps } from 'tamagui';
+import type { Dispatch, SetStateAction } from 'react';
+import { createContext } from 'react';
+
+export const SelectButtonContext = createContext<SelectButtonContextValue>({ values: {} });
+
+interface SelectButtonContextValue {
+  selectedIndex?: number;
+  selectedStyle?: ButtonProps;
+  setSelectedIndex?: Dispatch<SetStateAction<number | undefined>>;
+  setValues?: Dispatch<SetStateAction<Record<string, string>>>;
+  values: Record<string, string>;
+}

package/src/forms/SelectButton/index.tsx

@@ -0,0 +1,69 @@
+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';
+
+export type SelectButtonProps = YStackProps & {
+  onValueChange?: (value: string) => unknown;
+  selectedStyle?: ButtonProps;
+  selectedValue?: string;
+  xStack?: boolean;
+};
+
+export function SelectButton({
+  selectedValue,
+  xStack,
+  selectedStyle,
+  onValueChange,
+  ...stackProps
+}: SelectButtonProps) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [selectedIndex, setSelectedIndex] = useState<number>();
+
+  const contextValue = useMemo(
+    () => ({
+      selectedIndex,
+      selectedStyle,
+      setSelectedIndex,
+      setValues,
+      values,
+    }),
+    [selectedIndex, setSelectedIndex, setValues, values, selectedStyle],
+  );
+
+  useEffect(() => {
+    const selectedIndexStr = selectedIndex?.toString();
+    if (
+      onValueChange &&
+      typeof selectedIndex !== 'undefined' &&
+      typeof selectedIndexStr !== 'undefined' &&
+      selectedIndexStr in values
+    ) {
+      onValueChange(values[selectedIndexStr]);
+    }
+  }, [selectedIndex]);
+
+  useEffect(() => {
+    if (typeof selectedValue === 'undefined') return;
+    for (const [index, value] of Object.entries(values)) {
+      const indexNum = Number(index);
+      if (value === selectedValue && !Number.isNaN(indexNum)) {
+        setSelectedIndex(indexNum);
+        return;
+      }
+    }
+    setSelectedIndex(undefined);
+  }, [selectedValue]);
+
+  return (
+    <SelectButtonContext.Provider value={contextValue}>
+      {xStack ? <XStack {...stackProps} /> : <YStack {...stackProps} />}
+    </SelectButtonContext.Provider>
+  );
+}
+
+SelectButton.OptionButton = OptionButton;
+
+export type { OptionButtonProps };

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Select } from 'tamagui';
+import { SelectSimple } from './index';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'forms/SelectSimple',
+  component: SelectSimple,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <SelectSimple onValueChange={action('onValueChange')}>
+    <Select.Item index={0} value="bmw">
+      <Select.ItemText>BMW</Select.ItemText>
+    </Select.Item>
+    <Select.Item index={1} value="audi">
+      <Select.ItemText>AUDI</Select.ItemText>
+    </Select.Item>
+    <Select.Item index={2} value="ford">
+      <Select.ItemText>FORD</Select.ItemText>
+    </Select.Item>
+    <Select.Item index={3} value="suzuki">
+      <Select.ItemText>SUZUKI</Select.ItemText>
+    </Select.Item>
+  </SelectSimple>
+);

package/src/forms/SelectSimple/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { SelectProps, SelectTriggerProps } from 'tamagui';
+import { Select, styled } from 'tamagui';
+
+const StyledSelectTrigger = styled(Select.Trigger, {
+  paddingVertical: 0,
+});
+
+export type SelectSimpleProps = SelectTriggerProps &
+  Pick<SelectProps, 'onOpenChange' | 'onValueChange' | 'id' | 'value'> & { placeholder?: ReactNode };
+
+export function SelectSimple({
+  children,
+  placeholder,
+  onOpenChange,
+  onValueChange,
+  value,
+  id,
+  ...triggerProps
+}: SelectSimpleProps) {
+  return (
+    <Select id={id} onOpenChange={onOpenChange} onValueChange={onValueChange} value={value}>
+      <StyledSelectTrigger {...triggerProps}>
+        <Select.Value placeholder={placeholder} />
+      </StyledSelectTrigger>
+      <Select.Adapt when="sm" platform="touch">
+        <Select.Sheet modal dismissOnSnapToBottom>
+          <Select.Sheet.Frame>
+            <Select.Sheet.ScrollView>
+              <Select.Adapt.Contents />
+            </Select.Sheet.ScrollView>
+          </Select.Sheet.Frame>
+          <Select.Sheet.Overlay />
+        </Select.Sheet>
+      </Select.Adapt>
+      <Select.Content zIndex={200000}>
+        <Select.Viewport>{children}</Select.Viewport>
+      </Select.Content>
+    </Select>
+  );
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { SimpleForm } from './index';
+import { FormInput } from '../FormInput';
+import { FormSelectSimple } from '../FormSelectSimple';
+import { FormSubmitButton } from '../FormSubmitButton';
+import { Select } from 'tamagui';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'forms/SimpleForm',
+  component: SimpleForm,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <SimpleForm padding="$4" space>
+    <FormInput name="firstName" label="First Name" />
+    <FormInput name="lastName" label="Last Name" />
+    <FormSelectSimple name="favoriteColor" label="Favorite Color">
+      <Select.Item index={0} value="red">
+        <Select.ItemText>Red</Select.ItemText>
+      </Select.Item>
+      <Select.Item index={1} value="orange">
+        <Select.ItemText>Orange</Select.ItemText>
+      </Select.Item>
+      <Select.Item index={2} value="yellow">
+        <Select.ItemText>Yellow</Select.ItemText>
+      </Select.Item>
+      <Select.Item index={3} value="green">
+        <Select.ItemText>Green</Select.ItemText>
+      </Select.Item>
+      <Select.Item index={3} value="blue">
+        <Select.ItemText>Blue</Select.ItemText>
+      </Select.Item>
+      <Select.Item index={3} value="indigo">
+        <Select.ItemText>Indigo</Select.ItemText>
+      </Select.Item>
+      <Select.Item index={3} value="violet">
+        <Select.ItemText>Violet</Select.ItemText>
+      </Select.Item>
+    </FormSelectSimple>
+    <FormSubmitButton onSubmit={action('onSubmit')}>Submit</FormSubmitButton>
+  </SimpleForm>
+);

package/src/forms/SimpleForm/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { StackProps } from '@tamagui/core';
+import type { UseFormProps } from 'react-hook-form';
+import { Form as TForm } from 'tamagui';
+import { FormProvider as RhfFormProvider, useForm } from 'react-hook-form';
+
+export type FormProviderProps = UseFormProps & StackProps;
+
+export function SimpleForm({
+  children,
+  context,
+  criteriaMode,
+  defaultValues,
+  delayError,
+  mode,
+  reValidateMode,
+  resetOptions,
+  resolver,
+  shouldFocusError,
+  shouldUnregister,
+  shouldUseNativeValidation,
+  values,
+  ...formProps
+}: FormProviderProps) {
+  const methods = useForm({
+    context,
+    criteriaMode,
+    defaultValues,
+    delayError,
+    mode,
+    reValidateMode,
+    resetOptions,
+    resolver,
+    shouldFocusError,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    values,
+  });
+  return (
+    <RhfFormProvider {...methods}>
+      <TForm {...(formProps as any)}>{children}</TForm>
+    </RhfFormProvider>
+  );
+}

package/src/forms/index.ts

@@ -0,0 +1,12 @@
+export * from './FormCheckBox';
+export * from './FormField';
+export * from './FormInput';
+export * from './FormRadioGroup';
+export * from './FormSelectSimple';
+export * from './FormSlider';
+export * from './FormSubmitButton';
+export * from './FormSwitch';
+export * from './FormTextArea';
+export * from './SelectButton';
+export * from './SelectSimple';
+export * from './SimpleForm';

package/src/forms/types.ts

@@ -0,0 +1,3 @@
+import type { ControllerProps } from 'react-hook-form';
+
+export type FormControllerProps = Pick<ControllerProps, 'name' | 'control' | 'rules' | 'defaultValue'>;

package/src/global.ts

@@ -0,0 +1,8 @@
+// @ts-ignore
+import type { config } from 'ui';
+
+export type Config = typeof config;
+
+declare module 'tamagui' {
+  interface TamaguiCustomConfig extends Config {}
+}

package/src/helpers.tsx

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

package/src/hooks/index.ts

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

package/src/hooks/useAnimationDriverToggle.ts

@@ -0,0 +1,8 @@
+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');
+  return contextValue;
+};

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

@@ -0,0 +1,26 @@
+import type { Asset as ExpoAsset } from 'expo-asset';
+import type { Asset } from './types';
+import { useAssets as expoUseAssets } from 'expo-asset';
+
+const logger = console;
+
+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;
+  });
+  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,
+  }));
+}

package/src/hooks/useAssets/index.ts

@@ -0,0 +1,31 @@
+import type { Asset } from './types';
+
+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,
+        },
+  );
+}
+
+type WebModule =
+  | string
+  | {
+      blurDataURL?: string;
+      height?: 850;
+      src: string;
+      width?: 1024;
+    };
+
+export type { Asset };

package/src/hooks/useAssets/types.ts

@@ -0,0 +1,3 @@
+import type { ImageURISource } from 'react-native';
+
+export type Asset = ImageURISource;

package/src/hooks/useClipboard.ts

@@ -0,0 +1,25 @@
+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) {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  const onCopy = useEvent(async () => {
+    await copyToClipboard(text);
+    setHasCopied(true);
+  });
+
+  useEffect(() => {
+    if (!hasCopied) return;
+    const id = setTimeout(() => {
+      setHasCopied(false);
+    }, timeout);
+    return () => clearTimeout(id);
+  }, [timeout, hasCopied]);
+
+  return { value: text, onCopy, hasCopied };
+}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { useAssets } from '../../hooks';
+import { SimpleImage } from './index';
+
+export default {
+  title: 'images/SimpleImage',
+  component: SimpleImage,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = (args: any[]) => <SimpleImage src={require('../../../assets/poker-game-1894.png')} {...args} />;
+main.args = {
+  aspectRatio: undefined,
+  height: undefined,
+  width: undefined,
+  bg: 'black',
+};
+
+export const withSvg = (args: any[]) => <SimpleImage src={require('../../../assets/pentagon.svg')} {...args} />;
+withSvg.args = {
+  aspectRatio: undefined,
+  height: undefined,
+  bg: 'black',
+  width: undefined,
+  resizeMode: undefined,
+};
+withSvg.argTypes = {
+  resizeMode: {
+    control: {
+      type: Platform.OS === 'web' ? 'select' : 'text',
+      options: ['contain', 'cover', 'stretch'],
+    },
+  },
+};
+
+function WithUseAssets() {
+  const [pokerGame1894Png] = useAssets([require('../../../assets/poker-game-1894.png')]);
+  return <SimpleImage width={400} height={400} backgroundColor="black" src={pokerGame1894Png} />;
+}
+export const withUseAssets = () => <WithUseAssets />;
+
+function WithRequire() {
+  return (
+    <SimpleImage
+      width={400}
+      height={400}
+      backgroundColor="black"
+      src={require('../../../assets/poker-game-1894.png')}
+    />
+  );
+}
+export const withRequire = () => <WithRequire />;

package/src/images/SimpleImage/index.tsx

@@ -0,0 +1,161 @@
+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 { 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;
+};
+
+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');
+
+  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]);
+
+  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
+      {...imageProps}
+      // @ts-ignore
+      width={width}
+      // @ts-ignore
+      height={height}
+      aspectRatio={aspectRatio}
+      resizeMode={resizeMode}
+      source={{ uri }}
+    />
+  );
+}
+
+SimpleImage.defaultProps = {
+  resizeMode: 'cover',
+};
+
+function getPreserveAspectRatio(resizeMode?: ImageResizeMode): string {
+  switch (resizeMode) {
+    case 'stretch': {
+      return 'none';
+    }
+    case 'contain': {
+      return 'xMidYMid meet';
+    }
+  }
+  return 'xMidYMid slice';
+}
+
+const logger = console;
+const parser = new XMLParser({
+  ignoreAttributes: false,
+  attributeNamePrefix: '@_',
+  allowBooleanAttributes: true,
+});
+
+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;
+}
+
+type Width = number;
+type Height = number;
+export type SvgViewBox = [number, number, Width, Height];
+
+export interface SvgMeta {
+  height?: number;
+  viewBox?: SvgViewBox;
+  width?: number;
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { Svg } from './index';
+
+export default {
+  title: 'images/Svg',
+  component: Svg,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <Svg width={304} height={290}>
+    <Path
+      d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z"
+      fill="#FB2"
+      stroke="#BBB"
+      strokeWidth={15}
+      strokeLinejoin="round"
+    />
+  </Svg>
+);