@kiosinc/commons-rn 0.1.7

package/src/components/SelectionDialog.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Dialog, RadioButton, Text, useTheme } from 'react-native-paper';
+import { t } from 'i18next';
+import { Button } from './Button';
+import { View } from './View';
+
+interface ButtonProps {
+  label: string;
+  onPress?: (number: number) => void;
+  mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal';
+}
+
+interface SelectionDialogParams {
+  title?: string;
+  description?: string;
+  isDismissable?: boolean;
+  buttons?: ButtonProps[];
+  selectionOptions?: Array<string>;
+}
+
+interface SelectionDialogHandle {
+  show: (params: SelectionDialogParams) => void;
+}
+
+const useSelectionDialogHook = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [params, setParams] = useState<SelectionDialogParams>({});
+  const {
+    title = '',
+    description = '',
+    isDismissable = true,
+    buttons = [],
+    selectionOptions = [],
+  } = params;
+
+  const show = useCallback((parameters: SelectionDialogParams) => {
+    setParams(parameters);
+    setIsVisible(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  return {
+    isVisible,
+    show,
+    hide,
+    title,
+    description,
+    isDismissable,
+    buttons,
+    selectionOptions,
+  };
+};
+
+let rootLevelRef: SelectionDialogHandle | null = null;
+
+export const SelectionDialog = () => {
+  const {
+    isVisible,
+    show,
+    hide,
+    buttons,
+    isDismissable,
+    selectionOptions,
+    title,
+    description,
+  } = useSelectionDialogHook();
+  const theme = useTheme();
+
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
+
+  useEffect(() => {
+    if (isVisible) {
+      setSelectedOptionIndex(0);
+    }
+  }, [isVisible]);
+
+  const [
+    button1 = {
+      label: t('ok'),
+      onPress: () => {},
+      mode: 'text',
+    },
+    button2,
+    button3,
+  ] = buttons;
+
+  const ref: any = React.useRef(null);
+
+  React.useImperativeHandle(
+    ref,
+    React.useCallback(
+      () => ({
+        show,
+      }),
+      [show]
+    )
+  );
+
+  React.useEffect(() => {
+    rootLevelRef = ref.current;
+  }, [ref]);
+
+  return (
+    <Dialog
+      style={{
+        backgroundColor: theme.colors.background,
+      }}
+      dismissable={isDismissable}
+      dismissableBackButton={isDismissable}
+      onDismiss={() => {
+        if (isVisible) {
+          hide();
+        }
+      }}
+      visible={isVisible}
+    >
+      {Boolean(title) && (
+        <Dialog.Content>
+          <Text variant="titleMedium">{title}</Text>
+        </Dialog.Content>
+      )}
+      {Boolean(description) && (
+        <Dialog.Content>
+          <Text variant="bodyMedium">{description}</Text>
+        </Dialog.Content>
+      )}
+      <Dialog.Content>
+        {selectionOptions.map((option: string, index) => {
+          return (
+            <View flexDirection="row" alignItems="center">
+              <RadioButton.Android
+                value=""
+                status={selectedOptionIndex === index ? 'checked' : 'unchecked'}
+                onPress={() => setSelectedOptionIndex(index)}
+              />
+              <Text variant="bodyMedium">{option}</Text>
+            </View>
+          );
+        })}
+      </Dialog.Content>
+      <Dialog.Actions>
+        {button3 && (
+          <Button
+            mx="8"
+            mode={button3?.mode || 'text'}
+            onPress={() => {
+              hide();
+              button3?.onPress?.(selectedOptionIndex);
+            }}
+          >
+            {button3.label}
+          </Button>
+        )}
+        {button2 && (
+          <Button
+            ml="2"
+            mode={button2?.mode || 'text'}
+            onPress={() => {
+              hide();
+              button2?.onPress?.(selectedOptionIndex);
+            }}
+          >
+            {button2?.label}
+          </Button>
+        )}
+        {button1 && (
+          <Button
+            ml="2"
+            mode={button1?.mode || 'text'}
+            onPress={() => {
+              hide();
+              button1?.onPress?.(selectedOptionIndex);
+            }}
+          >
+            {button1.label}
+          </Button>
+        )}
+      </Dialog.Actions>
+    </Dialog>
+  );
+};
+
+SelectionDialog.displayName = 'SelectionDialog';
+
+//@ts-ignore
+SelectionDialog.show = (params: SelectionDialogParams) => {
+  rootLevelRef?.show(params);
+};

package/src/components/Snackbar.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Snackbar as PSnackbar } from 'react-native-paper';
+
+interface SnackbarParams {
+  title?: string;
+  action?: {
+    label: string;
+    onPress?: () => void;
+  };
+}
+
+interface AlertHandle {
+  show: (params: SnackbarParams) => void;
+}
+
+const useAlertHook = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [params, setParams] = useState<SnackbarParams>({});
+  const { title = '', action } = params;
+
+  const show = useCallback((parameters: SnackbarParams) => {
+    setParams(parameters);
+    setIsVisible(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  return {
+    isVisible,
+    show,
+    hide,
+    title,
+    action,
+  };
+};
+
+let rootLevelRef: AlertHandle | null = null;
+
+export const Snackbar = () => {
+  const { t } = useTranslation();
+  const { isVisible, show, hide, title, action } = useAlertHook();
+
+  const ref: any = React.useRef(null);
+
+  React.useImperativeHandle(
+    ref,
+    React.useCallback(
+      () => ({
+        show,
+      }),
+      [show]
+    )
+  );
+
+  React.useEffect(() => {
+    rootLevelRef = ref.current;
+  }, [ref]);
+
+  return (
+    <PSnackbar
+      visible={isVisible}
+      onDismiss={hide}
+      action={
+        action ?? {
+          label: t('close'),
+          onPress: hide,
+        }
+      }
+    >
+      {title}
+    </PSnackbar>
+  );
+};
+
+Snackbar.displayName = 'Snackbar';
+
+//@ts-ignore
+Snackbar.show = (params: SnackbarParams) => {
+  rootLevelRef?.show(params);
+};

package/src/components/Surface.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Surface as S, type SurfaceProps } from 'react-native-paper';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps & SurfaceProps;
+
+export const Surface = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  return <S {...props} />;
+};

package/src/components/Text.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text as T, type TextProps } from 'react-native-paper';
+import {
+  useRestyle,
+  spacing,
+  border,
+  composeRestyleFunctions,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  backgroundColor,
+  backgroundColorShorthand,
+  color,
+  layout,
+  position,
+  typography,
+  spacingShorthand,
+  type ColorProps,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  type TypographyProps,
+  type BackgroundColorShorthandProps,
+  opacity,
+  type OpacityProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+import { typescale } from '../theme/tokens';
+
+type RestyleProps = ColorProps<ThemeType> &
+  SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  OpacityProps<ThemeType> &
+  TypographyProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  color,
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  opacity,
+  typography,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+interface Props extends Omit<RestyleProps & TextProps<any>, 'variant'> {
+  variant?: keyof typeof typescale;
+  children: React.ReactNode;
+}
+
+export const Text: React.FC<Props & TextProps<any>> = ({
+  children,
+  ...rest
+}) => {
+  const restyleProps = useRestyle(restyleFunctions, rest);
+
+  return (
+    <T {...(restyleProps as Omit<typeof restyleProps, 'variant'>)}>
+      {children}
+    </T>
+  );
+};

package/src/components/TextInput.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  TextInput as T,
+  type TextInputProps,
+  ToggleButton,
+  useTheme,
+} from 'react-native-paper';
+import { View } from './View';
+import { IconButton } from './IconButton';
+import { Text } from './Text';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps &
+  TextInputProps & {
+    errorMessage?: string;
+  };
+
+export const TextInputStyled = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest);
+
+  return <T {...props} />;
+};
+
+export const TextInput: React.FC<Props> = ({
+  errorMessage,
+  secureTextEntry,
+  ...rest
+}) => {
+  const [status, setStatus] = React.useState('checked');
+
+  const onButtonToggle = () => {
+    setStatus(status === 'checked' ? 'unchecked' : 'checked');
+  };
+
+  const shouldShowPassword = status === 'checked';
+  const theme = useTheme();
+  return (
+    <View>
+      <View justifyContent="center">
+        <TextInputStyled
+          width="100%"
+          secureTextEntry={shouldShowPassword && secureTextEntry}
+          {...rest}
+        />
+        {secureTextEntry && (
+          <View
+            pt="4"
+            justifyContent="center"
+            alignSelf="flex-end"
+            position="absolute"
+            width={48}
+          >
+            <ToggleButton
+              icon={shouldShowPassword ? 'eye' : 'eye-off'}
+              size={20}
+              onPress={onButtonToggle}
+            />
+          </View>
+        )}
+      </View>
+
+      {!!errorMessage && (
+        <>
+          <View flexDirection="row" alignItems="center" pb="2">
+            <IconButton
+              icon="alert-circle-outline"
+              size={14}
+              width={20}
+              margin="0"
+              iconColor={theme.colors.error}
+            />
+            <Text variant="bodySmall" color="error">
+              {errorMessage}
+            </Text>
+          </View>
+        </>
+      )}
+    </View>
+  );
+};

package/src/components/ToggleButton.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ToggleButton as TB, type ToggleButtonProps } from 'react-native-paper';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps & ToggleButtonProps;
+
+export const ToggleButton = ({ ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions as any, rest as any);
+
+  return <TB {...(props as Props)} />;
+};

package/src/components/Video.tsx

@@ -0,0 +1,37 @@
+import { View } from './View';
+import React, { useState } from 'react';
+import { ActivityIndicator } from 'react-native-paper';
+import { IconButton } from './IconButton';
+
+import VideoOriginal, { type VideoProperties } from 'react-native-video';
+
+export const Video = ({ ...rest }: VideoProperties) => {
+  const [status, setStatus] = useState<'loading' | 'failed' | 'success'>(
+    'loading'
+  );
+  return (
+    <View flex={1}>
+      <VideoOriginal
+        {...rest}
+        onLoad={() => {
+          setStatus('success');
+        }}
+        onError={() => {
+          setStatus('failed');
+        }}
+      />
+      <View
+        top={0}
+        bottom={0}
+        right={0}
+        left={0}
+        position="absolute"
+        alignItems="center"
+        justifyContent="center"
+      >
+        {status === 'loading' && <ActivityIndicator />}
+        {status === 'failed' && <IconButton icon="image-broken-variant" />}
+      </View>
+    </View>
+  );
+};

package/src/components/View.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View as V, type ViewProps } from 'react-native';
+import {
+  useRestyle,
+  spacing,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+  type SpacingProps,
+  type BorderProps,
+  type BackgroundColorProps,
+  composeRestyleFunctions,
+  type SpacingShorthandProps,
+  type LayoutProps,
+  type PositionProps,
+  spacingShorthand,
+  layout,
+  position,
+  type BackgroundColorShorthandProps,
+  type ShadowProps,
+  shadow,
+  opacity,
+  type OpacityProps,
+} from '@shopify/restyle';
+import { type ThemeType } from '../theme';
+
+type RestyleProps = SpacingProps<ThemeType> &
+  SpacingShorthandProps<ThemeType> &
+  LayoutProps<ThemeType> &
+  PositionProps<ThemeType> &
+  ShadowProps<ThemeType> &
+  OpacityProps<ThemeType> &
+  BorderProps<ThemeType> &
+  BackgroundColorProps<ThemeType> &
+  BackgroundColorShorthandProps<ThemeType>;
+
+const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
+  spacing,
+  spacingShorthand,
+  layout,
+  position,
+  shadow,
+  opacity,
+  border,
+  backgroundColor,
+  backgroundColorShorthand,
+]);
+
+type Props = RestyleProps & ViewProps;
+
+export const View = ({ children, ...rest }: Props) => {
+  const props = useRestyle(restyleFunctions, rest);
+
+  return <V {...props}>{children}</V>;
+};

package/src/components/index.ts

@@ -0,0 +1,24 @@
+export { Alert } from './Alert';
+export { Badge } from './Badge';
+export { BottomSheet } from './BottomSheet';
+export { Button } from './Button';
+export { Card } from './Card';
+export { Divider } from './Divider';
+export { FAB } from './FAB';
+export { Header } from './Header';
+export { IconButton } from './IconButton';
+export { Image } from './Image';
+export { KeyboardAvoidingView } from './KeyboardAvoidingView';
+export { LineLoader } from './LineLoader';
+export { LinkButton } from './LinkButton';
+export { OtpInputs } from './OtpInputs';
+export { ParentView } from './ParentView';
+export { Searchbar } from './Searchbar';
+export { SelectionDialog } from './SelectionDialog';
+export { Snackbar } from './Snackbar';
+export { Surface } from './Surface';
+export { Text } from './Text';
+export { TextInput } from './TextInput';
+export { ToggleButton } from './ToggleButton';
+export { Video } from './Video';
+export { View } from './View';

package/src/index.tsx

@@ -0,0 +1,5 @@
+export function multiply(a: number, b: number): Promise<number> {
+  return Promise.resolve(a * b);
+}
+export * from './components';
+export * from './auth';