@momo-kits/foundation 1.0.0 → 1.0.3

package/Popup/types.ts

@@ -0,0 +1,23 @@
+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;
+  onIconClose?: () => void;
+};
+
+type PopupAction = {
+  title: string;
+  onPress: () => void;
+};
+
+type PopupActionDirection = 'row' | 'column' | 'auto';

package/Radio/index.tsx

@@ -0,0 +1,42 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+
+import {RadioProps} from './types';
+import {Text} from '../Text';
+import styles from './styles';
+import {ApplicationContext} from '../Navigation';
+import {Spacing} from '../Consts';
+
+const Radio: FC<RadioProps> = ({
+  value,
+  groupValue,
+  disabled,
+  onChange,
+  label,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const selected = value === groupValue;
+  const borderWidth = selected ? 6 : 2;
+  let borderColor = selected ? theme.colors.primary : theme.colors.text.default;
+  if (disabled) {
+    borderColor = selected
+      ? theme.colors.background.tonal
+      : theme.colors.text.disable;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => onChange?.(value)}
+      disabled={disabled}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: Spacing.S,
+      }}>
+      <View style={[styles.radio, {borderWidth, borderColor}]} />
+      <Text typography={'description_default'}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export {Radio};

package/Radio/styles.ts

@@ -0,0 +1,12 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  radio: {
+    height: 20,
+    width: 20,
+    borderRadius: Radius.M,
+    marginRight: Spacing.S,
+  },
+  container: {flex: 1, backgroundColor: 'red'},
+});

package/Radio/types.ts

@@ -0,0 +1,7 @@
+export type RadioProps = {
+  value: string;
+  disabled?: boolean;
+  label?: string;
+  onChange: (newValue?: string) => void;
+  groupValue: string;
+};

package/Switch/index.tsx

@@ -0,0 +1,35 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+import {SwitchProps} from './types';
+import styles from './styles';
+import {ApplicationContext} from '../Navigation';
+import {Colors} from '../Consts';
+
+const Switch: FC<SwitchProps> = props => {
+  const {theme} = useContext(ApplicationContext);
+  const {value, onChange, disabled} = 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;
+  if (disabled) {
+    backgroundColor = value ? theme.colors.background.tonal : Colors.black_05;
+  }
+
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      onPress={() => onChange?.(!value)}
+      style={[styles.container, {backgroundColor, alignItems: circleAlign}]}>
+      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+        <View style={[styles.circleSmall, {backgroundColor}]} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+Switch.defaultProps = {
+  value: false,
+  disabled: false,
+};
+export {Switch};

package/Switch/styles.ts

@@ -0,0 +1,23 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    width: 38,
+    height: 24,
+    borderRadius: 20,
+    justifyContent: 'center',
+    paddingHorizontal: 4,
+  },
+  circle: {
+    width: 14,
+    height: 14,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circleSmall: {
+    width: 6,
+    height: 6,
+    borderRadius: 4,
+  },
+});

package/Switch/types.ts

@@ -0,0 +1,5 @@
+export type SwitchProps = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled: boolean;
+};

package/Text/index.tsx

@@ -1,41 +1,8 @@
 import React, {useContext} from 'react';
-import {StyleSheet, Text as RNText} from 'react-native';
-import {
-  NavigationContext,
-  // FontWeight,
-  TextProps,
-  Typography,
-  TypographyWeight,
-} from '../index';
+import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
-
-const ProximaNova: TypographyWeight = {
-  100: 'Thin',
-  200: 'Thin',
-  300: 'Thin',
-  400: 'Regular',
-  500: 'Regular',
-  600: 'Regular',
-  700: 'Bold',
-  800: 'ExtraBold',
-  900: 'Black',
-  normal: 'Regular',
-  bold: 'Bold',
-};
-
-const Raleway: TypographyWeight = {
-  100: 'Thin',
-  200: 'ExtraLight',
-  300: 'Light',
-  400: 'Regular',
-  500: 'Medium',
-  600: 'SemiBold',
-  700: 'Bold',
-  800: 'ExtraBold',
-  900: 'Black',
-  normal: 'Regular',
-  bold: 'Bold',
-};
+import {Typography, TypographyWeight} from './types';
+import {ApplicationContext} from '../Navigation';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -52,103 +19,57 @@ const SFProText: TypographyWeight = {
 };
 
 const FontStyle: {[key: string]: string} = {
-  normal: '',
   italic: 'Italic',
+  normal: '',
 };
 
-/**
- * export font fontFamily for font
- * @return {*}
- */
-const getFontFamily = ({
-  fontFamily = 'SFProText',
-  fontWeight = '400',
-  fontStyle = 'normal',
-}) => {
-  let style = FontStyle[fontStyle];
-  if (style === 'Italic' && fontWeight === '400') {
-    fontWeight = 'bold';
-  }
+export interface TextProps extends RNTextProps {
+  typography: Typography;
+  color?: string;
+}
 
-  switch (fontFamily) {
-    case 'ProximaNova':
-      return `${fontFamily}-${ProximaNova[fontWeight]}${style}`;
-    case 'Raleway':
-      return `${fontFamily}-${Raleway[fontWeight]}${style}`;
-    case 'SFProText':
-      return `${fontFamily}-${SFProText[fontWeight]}${style}`;
-    default:
-      return `${fontFamily}-${SFProText[fontWeight]}${style}`;
-  }
-};
 const Text: React.FC<TextProps> = ({
   typography,
-  // weight,
   color,
-  // fontStyle,
   children,
   style,
   ...rest
 }) => {
-  const {theme} = useContext(NavigationContext);
+  const {theme} = useContext(ApplicationContext);
 
-  /**
-   * typography style
-   * @return {*}
-   */
-  const getTypography = (value: Typography) => {
-    const typo: {
-      [key: string]: object;
+  const getTypoStyle = (typo: Typography) => {
+    const styleSheet: {
+      [key: string]: any;
     } = styles;
-    return typo[value];
-  };
+    const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
+    const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
+    let fontFamily: string;
+    const style = FontStyle[fontStyle ?? 'normal'];
 
-  /**
-   * weight style
-   * @return {*}
-   */
-  /*
-  const getFontWeight = (value: FontWeight | undefined) => {
-    switch (value) {
-      case 'thin':
-        return {fontWeight: '100'};
-      case 'ultraLight':
-        return {fontWeight: '200'};
-      case 'light':
-        return {fontWeight: '300'};
-      case 'regular':
-        return {fontWeight: '400'};
-      case 'medium':
-        return {fontWeight: '500'};
-      case 'semibold':
-        return {fontWeight: '600'};
-      case 'bold':
-        return {fontWeight: '700'};
-      case 'heavy':
-        return {fontWeight: '800'};
-      case 'black':
-        return {fontWeight: '900'};
-      default:
-        return {fontWeight: '400'};
+    switch (theme.font) {
+      case 'SFProText': {
+        fontFamily = `${theme.font}-${SFProText[fontWeight]}${style}`;
+        break;
+      }
+      default: {
+        fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
+      }
     }
-  };
-*/
 
-  const textStyle: any = StyleSheet.flatten([
-    {fontFamily: theme.font, color: color ?? theme.colors},
-    getTypography(typography),
-    // getFontWeight(weight),
-    style,
-  ]);
+    return {
+      fontFamily,
+      fontSize,
+      lineHeight,
+      fontStyle,
+    };
+  };
 
-  textStyle.fontFamily = getFontFamily({
-    fontFamily: textStyle.fontFamily,
-    // fontWeight: textStyle.fontWeight,
-    // fontStyle,
-  });
+  const textStyle = getTypoStyle(typography);
 
   return (
-    <RNText {...rest} style={textStyle}>
+    <RNText
+      {...rest}
+      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>
   );
@@ -156,9 +77,6 @@ const Text: React.FC<TextProps> = ({
 
 Text.defaultProps = {
   typography: 'paragraph_default',
-  // weight: 'regular',
-  color: undefined,
-  // fontStyle: 'normal',
 };
 
-export {Text, getFontFamily};
+export {Text};

package/Text/styles.ts

@@ -1,34 +1,35 @@
 export default {
-  'headline-default': {
+  headline_default: {
     fontSize: 28,
     lineHeight: 34,
     fontWeight: '600',
   },
-  'headline-s': {fontSize: 24, lineHeight: 32, fontWeight: '600'},
-  'headline-l': {fontSize: 32, lineHeight: 36, fontWeight: '600'},
-  'headline-xl': {fontSize: 36, lineHeight: 44, fontWeight: '600'},
-  'title-default': {fontSize: 20, lineHeight: 28, fontWeight: '700'},
-  'title-xs': {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  'title-s': {fontSize: 18, lineHeight: 28, fontWeight: '700'},
-  'headerText-default': {fontSize: 15, lineHeight: 22, fontWeight: '600'},
-  'headerText-xs': {fontSize: 12, lineHeight: 16, fontWeight: '600'},
-  'headerText-s': {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  'paragraph-default': {fontSize: 15, lineHeight: 22, fontWeight: '400'},
-  'paragraph-bold': {fontSize: 15, lineHeight: 22, fontWeight: '700'},
-  'paragraph-italic': {
+  headline_s: {fontSize: 24, lineHeight: 32, fontWeight: '600'},
+  headline_l: {fontSize: 32, lineHeight: 36, fontWeight: '600'},
+  headline_xl: {fontSize: 36, lineHeight: 44, fontWeight: '600'},
+  title_default: {fontSize: 20, lineHeight: 28, fontWeight: '700'},
+  title_xs: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
+  title_s: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
+  header_default: {fontSize: 15, lineHeight: 22, fontWeight: '600'},
+  header_xs: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
+  header_s: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
+  paragraph_default: {fontSize: 15, lineHeight: 22, fontWeight: '400'},
+  paragraph_bold: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
+  paragraph_italic: {
     fontSize: 15,
     lineHeight: 22,
     fontWeight: '400',
     fontStyle: 'italic',
   },
-  'description-default': {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  'description-xs': {fontSize: 10, lineHeight: 14, fontWeight: '400'},
-  'description-s': {fontSize: 12, lineHeight: 16, fontWeight: '400'},
-  'label-default': {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  'label-xxs': {fontSize: 8, lineHeight: 12, fontWeight: '500'},
-  'label-xs': {fontSize: 10, lineHeight: 14, fontWeight: '500'},
-  'label-s': {fontSize: 12, lineHeight: 16, fontWeight: '500'},
-  'action-default': {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  'action-xxs': {fontSize: 10, lineHeight: 14, fontWeight: '700'},
-  'action-xs': {fontSize: 12, lineHeight: 16, fontWeight: '700'},
+  description_default: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  description_xs: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_s: {fontSize: 12, lineHeight: 16, fontWeight: '400'},
+  label_default: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
+  label_xxs: {fontSize: 8, lineHeight: 12, fontWeight: '500'},
+  label_xs: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
+  label_s: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
+  action_default: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
+  action_xxs: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  action_xs: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
+  action_s: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
 };

package/Text/types.ts

@@ -1,6 +1,4 @@
-import {TextProps as RNTextProps} from 'react-native';
-
-export interface TypographyWeight {
+export type TypographyWeight = {
   [key: string]: string;
   100: string;
   200: string;
@@ -13,7 +11,7 @@ export interface TypographyWeight {
   900: string;
   normal: string;
   bold: string;
-}
+};
 
 export type Typography =
   | 'headline_default'
@@ -23,9 +21,9 @@ export type Typography =
   | 'title_default'
   | 'title_xs'
   | 'title_s'
-  | 'headerText_default'
-  | 'headerText_xs'
-  | 'headerText_s'
+  | 'header_default'
+  | 'header_xs'
+  | 'header_s'
   | 'paragraph_default'
   | 'paragraph_bold'
   | 'paragraph_italic'
@@ -40,8 +38,3 @@ export type Typography =
   | 'action_xxs'
   | 'action_xs'
   | 'action_s';
-
-export interface TextProps extends RNTextProps {
-  typography: Typography;
-  color?: string;
-}

package/index.ts

@@ -1,18 +1,35 @@
-import Button from './Button';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+import LinearGradient from 'react-native-linear-gradient';
+import Playground from './Playground';
+export {Playground};
 
-export {Button};
+export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
 
-export * from './Layout';
 export * from './Consts';
+export * from './Layout';
+export * from './Layout/types';
+export * from './Popup';
+export * from './Popup/types';
 export * from './Text';
 export * from './Text/types';
+export * from './Button';
 export * from './Navigation';
 export * from './Navigation/types';
 export * from './Icon';
 export * from './Icon/types';
 export * from './IconButton';
-export * from './IconButton/types';
 export * from './Image';
 export * from './Image/types';
 export * from './ContentLoader';
 export * from './ContentLoader/types';
+export * from './CheckBox';
+export * from './CheckBox/types';
+export * from './Radio';
+export * from './Radio/types';
+export * from './Switch';
+export * from './Switch/types';
+export * from './Input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {
@@ -15,9 +15,8 @@
     "@react-navigation/core": "5.16.1",
     "@react-navigation/native": "5.9.8",
     "@react-navigation/routers": "5.7.4",
-    "@react-navigation/stack": "5.14.9",
-    "@gorhom/bottom-sheet": "2.4.1",
-    "react-native-screens": "git+https://gitlab.com/dung.huynh1/react-native-screens.git#main"
+    "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main",
+    "@gorhom/bottom-sheet": "2.4.1"
   },
   "peerDependencies": {
     "react-native": "*"

package/Button/types.ts

@@ -1,18 +0,0 @@
-import {
-  TouchableNativeFeedbackProps,
-  TouchableOpacityProps,
-} from 'react-native';
-
-export type ButtonType =
-  | 'primary'
-  | 'secondary'
-  | 'tonal'
-  | 'outline'
-  | 'disable'
-  | 'text';
-
-export type ButtonSize = 'large' | 'medium' | 'small';
-
-export interface ButtonProps
-  extends TouchableOpacityProps,
-    TouchableNativeFeedbackProps {}

package/CheckBox/index.js

@@ -1,74 +0,0 @@
-import React, {useContext} from 'react';
-import {TouchableOpacity} from 'react-native';
-import PropTypes from 'prop-types';
-import {ApplicationContext, Index} from '@components';
-
-const Index = props => {
-  const {theme} = useContext(ApplicationContext);
-  const {style, value, disabled, size, shape, onPress} = props;
-
-  /**
-   * export icon name
-   */
-  const getIconName = () => {
-    switch (shape) {
-      case 'circle':
-        if (value) {
-          return 'checkbox-marked-circle';
-        }
-        return 'checkbox-blank-circle-outline';
-      case 'rectangle':
-        if (value) {
-          return 'checkbox-marked';
-        }
-        return 'checkbox-blank-outline';
-
-      default:
-        return 'checkbox-blank-outline';
-    }
-  };
-
-  /**
-   * export icon color
-   */
-  const getIconColor = () => {
-    if (disabled) {
-      return theme.colors.textSecondary;
-    }
-    if (value) {
-      return theme.colors.primary;
-    }
-    return theme.colors.text;
-  };
-
-  return (
-    <TouchableOpacity disabled={disabled} onPress={onPress}>
-      <Index
-        name={getIconName()}
-        size={size}
-        color={getIconColor()}
-        style={style}
-      />
-    </TouchableOpacity>
-  );
-};
-
-Index.propTypes = {
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  value: PropTypes.bool,
-  disabled: PropTypes.bool,
-  size: PropTypes.number,
-  onPress: PropTypes.func,
-  shape: PropTypes.oneOf(['circle', 'rectangle']),
-};
-
-Index.defaultProps = {
-  style: {},
-  value: false,
-  disabled: false,
-  size: 24,
-  onPress: () => {},
-  shape: 'circle',
-};
-
-export default Index;

package/CheckBox/styles.js

@@ -1,3 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export default StyleSheet.create({});

package/IconButton/types.ts

@@ -1,17 +0,0 @@
-import {TouchableOpacityProps} from 'react-native';
-
-export type IconButtonType =
-  | 'primary'
-  | 'tonal'
-  | 'secondary'
-  | 'outline'
-  | 'disabled';
-export type IconButtonSize = 'large' | 'small';
-export type IconButtonShape = 'circle' | 'rectangle';
-
-export interface IconButtonProps extends TouchableOpacityProps {
-  icon: string;
-  type?: IconButtonType;
-  size?: IconButtonSize;
-  shape?: IconButtonShape;
-}

package/Layout/Row.tsx

@@ -1,42 +0,0 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
-import styles from './styles';
-import {MMSectionContext} from './Section';
-import {DEFAULT_SCREEN_PADDING, screenWidth} from './utils';
-
-const MMRow: React.FC<any> = props => {
-  const haveMargin = useContext(MMSectionContext);
-  const rowWidth = haveMargin
-    ? screenWidth - DEFAULT_SCREEN_PADDING * 4
-    : screenWidth - DEFAULT_SCREEN_PADDING * 2;
-
-  const {children} = props;
-  let totalGap = 0;
-  return (
-    <View
-      style={[
-        styles.row,
-        {
-          width: rowWidth,
-        },
-      ]}>
-      {React.Children.map(children, (child, index) => {
-        let isEndLine = false;
-        totalGap += child.props.span;
-        if (totalGap >= 12) {
-          totalGap = 0;
-          isEndLine = true;
-        }
-        if (totalGap + children[index + 1]?.props?.span > 12) {
-          totalGap = 0;
-        }
-        return React.cloneElement(child, {
-          isEndLine: isEndLine,
-          isRowChild: true,
-        });
-      })}
-    </View>
-  );
-};
-
-export default MMRow;