@momo-kits/foundation 1.0.1 → 1.0.4

package/Playground/index.tsx

@@ -0,0 +1,249 @@
+import React, {FC, useContext, useEffect, useState} from 'react';
+import {FlatList, TouchableOpacity, View} from 'react-native';
+import {CheckBox, Input, Radio, Text} from '@momo-kits/foundation';
+import {PlaygroundProps, PropValue} from './types';
+import styles from './styles';
+import {Colors, Radius, Spacing} from '../Consts';
+import {ApplicationContext} from '../Navigation';
+import {ScreenSection, SectionItem} from '../Layout';
+import {Icon, IconSources} from '../Icon';
+import {string} from 'prop-types';
+
+const ChooseOptionScreen = (
+  data: string[] = [],
+  optionType: 'color' | 'icon' | 'text' = 'text',
+  onPress: (value: string) => void,
+) => {
+  const {theme} = useContext(ApplicationContext);
+
+  let mapData = data;
+  if (optionType === 'color') {
+    mapData = Object.values(Colors);
+  }
+  if (optionType === 'icon') {
+    mapData = Object.keys(IconSources);
+  }
+  const renderItemView = (item: string) => {
+    switch (optionType) {
+      case 'color': {
+        return (
+          <View
+            style={{
+              width: 36,
+              height: 36,
+              borderRadius: Radius.M,
+              backgroundColor: item,
+              marginRight: Spacing.S,
+            }}
+          />
+        );
+      }
+      case 'icon': {
+        return <Icon source={item} style={{marginRight: Spacing.S}} />;
+      }
+    }
+  };
+
+  const renderItem = ({item, index}) => {
+    const iconSource: {[key: string]: {uri: string}} = IconSources;
+    let key = item;
+    let chosenItem = item;
+    if (optionType === 'color') key = Object.keys(Colors)[index];
+    if (optionType === 'icon') chosenItem = iconSource[key].uri;
+    return (
+      <TouchableOpacity
+        key={`${item.toString()} ${index}`}
+        onPress={() => onPress(chosenItem)}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: Spacing.M,
+          borderBottomWidth: index !== mapData.length - 1 ? 1 : 0,
+          borderColor: theme.colors.border.default,
+          paddingBottom: Spacing.M,
+        }}>
+        {renderItemView(item)}
+        <Text typography={'description_default'}>{key}</Text>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <ScreenSection>
+      <SectionItem widthSpan={12}>
+        <FlatList
+          data={mapData}
+          renderItem={renderItem}
+          keyExtractor={(item, index) => `${item.toString()} ${index}`}
+          showsVerticalScrollIndicator={false}
+        />
+      </SectionItem>
+    </ScreenSection>
+  );
+};
+
+const Playground: FC<PlaygroundProps> = ({params}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const {props} = params;
+  const [compProps, setCompProps] = useState<{[key: string]: any}>({});
+  useEffect(() => {
+    initProps();
+    return () => {};
+  }, [props]);
+
+  const initProps = () => {
+    let newProps = {};
+    Object.keys(props).forEach(i => {
+      newProps = {...newProps, [i]: props[i].value};
+    });
+    setCompProps(newProps);
+  };
+
+  const onChangeOptions = (
+    value: string | boolean | undefined,
+    key: string,
+  ) => {
+    const newProps = {...compProps, [key]: value};
+    setCompProps(newProps);
+  };
+
+  const onCheckUndefined = (value: boolean, key: string) => {
+    let newValue = !value ? undefined : props?.[key]?.value;
+    const newProps = {...compProps, [key]: newValue};
+    setCompProps(newProps);
+  };
+
+  const showOptions = (prop: any, key: string) => {
+    navigator?.showBottomSheet({
+      options: {
+        title: 'Choose option',
+      },
+      screen: () =>
+        ChooseOptionScreen(prop.data, prop.optionType, optionValue => {
+          onChangeOptions(optionValue, key);
+          navigator?.pop();
+        }),
+    });
+  };
+
+  const generateView = (key: string, prop: PropValue) => {
+    let PlayGroundView = <View />;
+    switch (prop.type) {
+      case 'enum': {
+        PlayGroundView = (
+          <View style={styles.radioView}>
+            {prop?.options?.map(option => {
+              return (
+                <Radio
+                  label={option}
+                  value={option}
+                  onChange={() => onChangeOptions(option, key)}
+                  groupValue={compProps?.[key]}
+                  style={{marginBottom: Spacing.S}}
+                />
+              );
+            })}
+          </View>
+        );
+        break;
+      }
+      case 'string': {
+        PlayGroundView = (
+          <Input
+            size={'small'}
+            floatingValue={key}
+            value={compProps?.[key]}
+            onChangeText={text => onChangeOptions(text, key)}
+          />
+        );
+        break;
+      }
+      case 'bool': {
+        let label = compProps?.[key] === true ? 'True' : 'False';
+        if (compProps?.[key] === undefined) {
+          label = 'undefined';
+        }
+        PlayGroundView = (
+          <CheckBox
+            label={label}
+            value={compProps?.[key]}
+            onChange={value => onChangeOptions(value, key)}
+          />
+        );
+        break;
+      }
+      case 'options': {
+        PlayGroundView = (
+          <TouchableOpacity
+            style={{
+              width: '100%',
+              height: 48,
+              borderRadius: Radius.M,
+              borderColor: theme.colors.border.default,
+              borderWidth: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'row',
+              backgroundColor: theme.colors.background.surface,
+            }}
+            onPress={() => showOptions(prop, key)}>
+            <Text typography={'description_default'}>{compProps?.[key]}</Text>
+            <View style={{position: 'absolute', right: Spacing.M}}>
+              <Icon source={'arrow_chevron_down_small'} size={24} />
+            </View>
+          </TouchableOpacity>
+        );
+      }
+    }
+
+    return (
+      <View
+        style={[
+          styles.propView,
+          {backgroundColor: theme.colors.background.surface},
+        ]}>
+        <Text style={styles.propTitle} typography={'header_default'}>
+          {key}
+        </Text>
+        {PlayGroundView}
+        {typeof compProps?.[key] !== 'boolean' && (
+          <CheckBox
+            style={{marginTop: Spacing.M}}
+            label={'Is undefined'}
+            value={!compProps?.[key]}
+            onChange={value => onCheckUndefined(!value, key)}
+          />
+        )}
+      </View>
+    );
+  };
+
+  const Component = params.component ?? <View />;
+  const propsKeys = Object.keys(props);
+
+  return (
+    <View>
+      <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>
+        Component
+      </Text>
+      <View
+        style={[
+          styles.propView,
+          {
+            backgroundColor: theme.colors.background.surface,
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+        ]}>
+        <Component {...compProps} />
+      </View>
+      <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>
+        Props
+      </Text>
+      {propsKeys.map(prop => {
+        return generateView(prop, props[prop]);
+      })}
+    </View>
+  );
+};
+
+export default Playground;

package/Playground/styles.ts

@@ -0,0 +1,16 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  radioView: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
+  propView: {
+    borderRadius: Radius.M,
+    padding: Spacing.M,
+    marginBottom: Spacing.M,
+  },
+  propTitle: {marginBottom: Spacing.S, textTransform: 'capitalize'},
+});

package/Playground/types.ts

@@ -0,0 +1,16 @@
+import {ReactElement} from 'react';
+
+export type PropValue = {
+  value: any;
+  options?: string[];
+  type: 'string' | 'options' | 'enum' | 'bool';
+  description?: string;
+  data?: {[key: string]: string}[];
+  optionType?: 'icon' | 'color';
+};
+export type PlaygroundProps = {
+  params: {
+    component: ReactElement;
+    props: {[key: string]: PropValue};
+  };
+};

package/Popup/PopupNotify.tsx

@@ -0,0 +1,210 @@
+import React, {useContext} from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {PopupNotifyProps} from './types';
+import {Radius, Spacing, Styles} from '../Consts';
+import {Image} from '../Image';
+import {Text} from '../Text';
+import {ApplicationContext} from '../Navigation';
+import {Button} from '../Button';
+import {Icon} from '../Icon';
+
+const PopupNotify: React.FC<PopupNotifyProps> = ({
+  image,
+  title,
+  description,
+  information,
+  secondary,
+  primary,
+  buttonDirection,
+  onIconClose,
+}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+
+  /**
+   * on action popup
+   * @param callback
+   */
+  const onAction = (callback?: () => void) => {
+    navigator?.pop();
+    callback?.();
+  };
+
+  /**
+   *  build main action of popup
+   */
+  const buildAction = () => {
+    const renderRow = () => {
+      return (
+        <View style={Styles.row}>
+          {secondary?.title && (
+            <>
+              <View style={Styles.flex}>
+                <Button
+                  title={secondary.title}
+                  type="text"
+                  size="medium"
+                  onPress={() => {
+                    onAction(secondary?.onPress);
+                  }}
+                />
+              </View>
+              <View style={styles.buttonSpace} />
+            </>
+          )}
+          <View style={Styles.flex}>
+            <Button
+              title={primary.title}
+              size="medium"
+              onPress={() => {
+                onAction(primary.onPress);
+              }}
+            />
+          </View>
+        </View>
+      );
+    };
+    const renderColumn = () => {
+      return (
+        <View style={Styles.columnCenter}>
+          <Button
+            title={primary.title}
+            size="medium"
+            onPress={() => {
+              onAction(primary.onPress);
+            }}
+          />
+          {secondary?.title && (
+            <>
+              <View style={styles.buttonSpace} />
+              <Button
+                title={secondary.title}
+                type="text"
+                size="medium"
+                onPress={() => {
+                  onAction(secondary?.onPress);
+                }}
+              />
+            </>
+          )}
+        </View>
+      );
+    };
+
+    if (buttonDirection == 'auto') {
+      if (
+        secondary?.title &&
+        (secondary.title.length > 12 || primary.title.length > 12)
+      ) {
+        return renderColumn();
+      }
+      return renderRow();
+    }
+    if (buttonDirection == 'row') {
+      return renderRow();
+    }
+    return renderColumn();
+  };
+
+  /**
+   * build close action
+   */
+  const buildCloseIcon = () => {
+    return (
+      <View style={styles.iconCloseContainer}>
+        <TouchableOpacity
+          onPress={() => onAction(onIconClose)}
+          style={[
+            styles.iconClose,
+            {
+              backgroundColor: theme.colors.text.default,
+              borderColor: theme.colors.background.surface,
+            },
+          ]}>
+          <Icon
+            source="navigation_close"
+            color={theme.colors.background.surface}
+            size={14}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {backgroundColor: theme.colors.background.surface},
+      ]}>
+      {image && <Image source={{uri: image}} style={styles.image} />}
+      <View style={styles.content}>
+        <Text typography={'title_xs'} numberOfLines={1}>
+          {title}
+        </Text>
+        <View style={styles.description}>
+          <Text typography={'paragraph_default'} numberOfLines={3}>
+            {description}
+          </Text>
+        </View>
+        {information && (
+          <View style={styles.information}>
+            <Text typography={'description_xs'} numberOfLines={1}>
+              {information}
+            </Text>
+          </View>
+        )}
+      </View>
+      <View style={styles.contentAction}>{buildAction()}</View>
+      {buildCloseIcon()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: Radius.L,
+  },
+  image: {
+    borderTopLeftRadius: Radius.L,
+    borderTopRightRadius: Radius.L,
+    aspectRatio: 1.7777,
+  },
+  content: {padding: Spacing.XL},
+  description: {
+    marginTop: Spacing.S,
+  },
+  information: {
+    marginTop: Spacing.S,
+  },
+  contentAction: {
+    paddingHorizontal: Spacing.XL,
+    paddingBottom: Spacing.L,
+  },
+  buttonSpace: {
+    width: Spacing.S,
+    height: Spacing.S,
+  },
+  iconCloseContainer: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -Spacing.S,
+  },
+  iconClose: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.M,
+    borderWidth: 2,
+  },
+});
+
+PopupNotify.defaultProps = {
+  title: 'Title',
+  primary: {
+    title: 'Primary',
+    onPress: () => {},
+  },
+};
+
+export default PopupNotify;

package/Popup/PopupPromotion.tsx

@@ -0,0 +1,62 @@
+import React, {useContext} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {PopupPromotionProps} from './types';
+import {ApplicationContext} from '../Navigation';
+import {Image} from '../Image';
+import {Button} from '../Button';
+import {Spacing} from '../Consts';
+
+const PopupPromotion: React.FC<PopupPromotionProps> = ({image, primary}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+
+  /**
+   * on action popup
+   * @param callback
+   */
+  const onAction = (callback?: () => void) => {
+    navigator?.pop();
+    callback?.();
+  };
+
+  return (
+    <>
+      <Image
+        style={styles.container}
+        source={{
+          uri: image,
+        }}
+      />
+      <View style={styles.actionContainer}>
+        <Button
+          title={primary?.title}
+          onPress={() => {
+            onAction(primary?.onPress);
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    aspectRatio: 0.66,
+  },
+  actionContainer: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    paddingVertical: Spacing.XL,
+    paddingHorizontal: Spacing.L,
+  },
+});
+
+PopupPromotion.defaultProps = {
+  image: 'https://google.com',
+  primary: {
+    title: 'Primary',
+    onPress: () => {},
+  },
+};
+
+export default PopupPromotion;

package/Popup/index.tsx

@@ -0,0 +1,4 @@
+import PopupNotify from './PopupNotify';
+import PopupPromotion from './PopupPromotion';
+
+export {PopupNotify, PopupPromotion};

package/Popup/types.ts

@@ -0,0 +1,22 @@
+export type PopupNotifyProps = {
+  image?: string;
+  title: string;
+  description: string;
+  information?: string;
+  secondary?: PopupAction;
+  primary: PopupAction;
+  buttonDirection: PopupActionDirection;
+  onIconClose?: () => void;
+};
+
+export type PopupPromotionProps = {
+  image: string;
+  primary: PopupAction;
+};
+
+type PopupAction = {
+  title: string;
+  onPress: () => void;
+};
+
+type PopupActionDirection = 'row' | 'column' | 'auto';

package/Radio/index.tsx

@@ -1,14 +1,21 @@
 import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
-import {ApplicationContext} from '../index';
+
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
+import {ApplicationContext} from '../Navigation';
+import {Spacing} from '../Consts';
 
-const Radio: FC<RadioProps> = props => {
+const Radio: FC<RadioProps> = ({
+  value,
+  groupValue,
+  disabled,
+  onChange,
+  label,
+  style,
+}) => {
   const {theme} = useContext(ApplicationContext);
-  const {value, groupValue, disabled, onChange, label} = props;
-
   const selected = value === groupValue;
   const borderWidth = selected ? 6 : 2;
   let borderColor = selected ? theme.colors.primary : theme.colors.text.default;
@@ -22,11 +29,20 @@ const Radio: FC<RadioProps> = props => {
     <TouchableOpacity
       onPress={onChange}
       disabled={disabled}
-      style={{
-        flexDirection: 'row',
-      }}>
-      <View style={[styles.radio, {borderWidth, borderColor}]} />
-      <Text typography={'description_default'}>{label}</Text>
+      style={[
+        style,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      ]}>
+      <View
+        style={[
+          styles.radio,
+          {borderWidth, borderColor, marginRight: !!label ? Spacing.XS : 0},
+        ]}
+      />
+      {!!label && <Text typography={'description_default'}>{label}</Text>}
     </TouchableOpacity>
   );
 };

package/Radio/types.ts

@@ -1,7 +1,10 @@
-export interface RadioProps {
+import {ViewStyle} from 'react-native';
+
+export type RadioProps = {
   value: string;
   disabled?: boolean;
   label?: string;
   onChange: () => void;
   groupValue: string;
-}
+  style?: ViewStyle;
+};

package/Switch/index.tsx

@@ -7,22 +7,24 @@ import {Colors} from '../Consts';
 
 const Switch: FC<SwitchProps> = props => {
   const {theme} = useContext(ApplicationContext);
-  const {value, onChange, disabled} = props;
+  const {value, onChange, disabled, style} = props;
+  const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
+  const circleAlign = value ? 'flex-end' : 'flex-start';
 
   let backgroundColor = value ? theme.colors.primary : Colors.black_07;
-
-  const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   if (disabled) {
     backgroundColor = value ? theme.colors.background.tonal : Colors.black_05;
   }
 
-  const circleAlign = value ? 'flex-end' : 'flex-start';
-
   return (
     <TouchableOpacity
       disabled={disabled}
       onPress={() => onChange?.(!value)}
-      style={[styles.container, {backgroundColor, alignItems: circleAlign}]}>
+      style={[
+        style,
+        styles.container,
+        {backgroundColor, alignItems: circleAlign},
+      ]}>
       <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
         <View style={[styles.circleSmall, {backgroundColor}]} />
       </View>

package/Switch/types.ts

@@ -1,5 +1,8 @@
-export interface SwitchProps {
+import {ViewStyle} from 'react-native';
+
+export type SwitchProps = {
   value: boolean;
   onChange: (value: boolean) => void;
-  disabled: boolean;
-}
+  disabled?: boolean;
+  style?: ViewStyle;
+};