@momo-kits/foundation 1.0.0 → 1.0.1

package/Navigation/index.ts

@@ -1,10 +1,12 @@
-import {NavigationContainer, NavigationContext} from './NavigationContainer';
-import ScreenContainer from './ScreenContainer';
+import {NavigationContainer, ApplicationContext} from './NavigationContainer';
+import ScreenContainer from '../Layout/ScreenContainer';
 import NavigationButton from './NavigationButton';
+import {HeaderRightAction} from './Components';
 
 export {
   NavigationContainer,
-  NavigationContext,
+  ApplicationContext,
   ScreenContainer,
   NavigationButton,
+  HeaderRightAction,
 };

package/Navigation/types.ts

@@ -1,42 +1,60 @@
-import {ViewStyle} from 'react-native';
-import React, {ReactNode} from 'react';
+import {ViewProps} from 'react-native';
+import React from 'react';
 import Navigator from './Navigator';
-import {Source} from 'react-native-fast-image';
 import Navigation from './Navigation';
 
 export type Theme = {
   dark: boolean;
   colors: {
-    background_default: string;
-    background_surface: string;
-    background_pressed: string;
-    background_selected: string;
-    background_disable: string;
-    background_primary: string;
-    background_tonal: string;
-    text_default: string;
-    text_secondary: string;
-    text_hint: string;
-    text_disable: string;
-    text_white: string;
-    text_primary: string;
-    text_interactive: string;
-    text_highlight: string;
-    text_success: string;
-    text_warning: string;
-    text_error: string;
-    border_default: string;
-    border_disable: string;
-    border_primary: string;
-    border_primary_disable: string;
-    border_error: string;
-    border_error_disable: string;
-    border_success: string;
-    border_success_disable: string;
+    primary: string;
+    secondary: string;
+    background: {
+      default: string;
+      surface: string;
+      tonal: string;
+      pressed: string;
+      selected: string;
+      disable: string;
+    };
+    text: {
+      default: string;
+      secondary: string;
+      hint: string;
+      disable: string;
+    };
+    border: {
+      default: string;
+      disable: string;
+    };
+    success: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+    warning: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+    error: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+    highlight: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+    interactive: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
   };
   font: string;
   assets?: {
-    headerBackground?: Source | number;
+    headerBackground?: string;
   };
 };
 
@@ -46,20 +64,19 @@ export type Context = {
 };
 
 export type NavigationContainerProps = {
-  useNative?: boolean;
   screen: React.ElementType;
+  isBottomSheet?: boolean;
   theme: Theme;
-  onDismiss: () => void;
+  onDismiss?: () => void;
 };
 
-export type ScreenContainerProps = {
-  style?: ViewStyle;
-  children: ReactNode;
+export interface ScreenContainerProps extends ViewProps {
   navigation: Navigation;
   options?: NavigationOptions;
   edges?: any[];
   enableKeyboardAvoidingView?: boolean;
-};
+  scrollable: boolean;
+}
 
 export type ScreenParams = {
   [key: string]: any;

package/Navigation/utils.tsx

@@ -1,58 +1,60 @@
 import React from 'react';
-import {Colors, NavigationButton, Text, Theme} from '../index';
-import {HeaderBackground} from './Components';
 import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
+import {HeaderBackground} from './Components';
+import {Theme} from './types';
+import {Colors} from '../Consts';
+import {NavigationButton} from './index';
+import {Text} from '../Text';
 
 const renderTitle = (props: any) => {
   return (
     <Text
       {...props}
-      typography="h4"
+      typography="headerText_default"
       weight="bold"
-      style={{color: props.tintColor}}
+      color={props.tintColor}
     />
   );
 };
 
-const getHeaderBackground = (theme: Theme): any => {
+const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
     return {
-      headerBackground: HeaderBackground,
+      headerTintColor: Colors.black_01,
     };
   }
+  return {
+    headerTintColor: theme.colors.text.default,
+  };
 };
 
 const getStackOptions = (
   theme: Theme,
-  goBack: () => void,
+  options: StackNavigationOptions,
 ): StackNavigationOptions => {
   return {
-    headerTintColor: Colors.black_01,
     headerTitleAlign: 'center',
     headerTitle: renderTitle,
-    headerLeft: props => (
-      <NavigationButton icon="ic_back" {...props} onPress={goBack} />
-    ),
-    ...getHeaderBackground(theme),
+    headerBackground: HeaderBackground,
+    ...getTintColor(theme),
+    ...options,
   };
 };
 
 const getDialogOptions = (
   theme: Theme,
-  goBack: () => void,
+  options: StackNavigationOptions,
 ): StackNavigationOptions => {
   return {
-    headerTintColor: Colors.black_01,
     headerTitleAlign: 'center',
     headerTitle: renderTitle,
-    headerLeft: props => (
-      <NavigationButton icon="ic_close" {...props} onPress={goBack} />
-    ),
+    headerBackground: HeaderBackground,
+    ...getTintColor(theme),
     ...TransitionPresets.ModalTransition,
-    ...getHeaderBackground(theme),
+    ...options,
   };
 };
 

package/Radio/index.tsx

@@ -0,0 +1,34 @@
+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';
+
+const Radio: FC<RadioProps> = props => {
+  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;
+  if (disabled) {
+    borderColor = selected
+      ? theme.colors.background.tonal
+      : theme.colors.text.disable;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={onChange}
+      disabled={disabled}
+      style={{
+        flexDirection: 'row',
+      }}>
+      <View style={[styles.radio, {borderWidth, borderColor}]} />
+      <Text typography={'description_default'}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export {Radio};

package/Radio/styles.ts

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

package/Radio/types.ts

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

package/Switch/index.tsx

@@ -0,0 +1,37 @@
+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;
+
+  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}]}>
+      <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 interface 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} 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 {TextProps, Typography, TypographyWeight} from './types';
+import {ApplicationContext} from '../Navigation';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -52,103 +19,55 @@ 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';
-  }
-
-  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,
+  textAlign,
   ...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={[
+        textStyle,
+        {color: color ?? theme.colors.text.default, textAlign},
+      ]}>
       {children ?? ''}
     </RNText>
   );
@@ -156,9 +75,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'},
+  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: {
     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

@@ -41,7 +41,9 @@ export type Typography =
   | 'action_xs'
   | 'action_s';
 
+export type TextAlign = 'left' | 'right' | 'center' | 'auto';
 export interface TextProps extends RNTextProps {
   typography: Typography;
   color?: string;
+  textAlign?: TextAlign;
 }

package/index.ts

@@ -1,9 +1,18 @@
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+import LinearGradient from 'react-native-linear-gradient';
 import Button from './Button';
 
 export {Button};
 
-export * from './Layout';
+export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
+
 export * from './Consts';
+export * from './Layout';
+export * from './Layout/types';
 export * from './Text';
 export * from './Text/types';
 export * from './Navigation';
@@ -16,3 +25,11 @@ export * from './Image';
 export * from './Image/types';
 export * from './ContentLoader';
 export * from './ContentLoader/types';
+export * from './Input';
+export * from './Input/types';
+export * from './CheckBox';
+export * from './CheckBox/types';
+export * from './Radio';
+export * from './Radio/types';
+export * from './Switch';
+export * from './Switch/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {

package/publish.sh

@@ -4,7 +4,6 @@ mkdir dist
 
 cp . ./dist
 
-
 # GET VERSION from mck_package.json
 VERSIONSTRING=( v$(jq .version package.json) )
 VERSION=(${VERSIONSTRING//[\"]/})
@@ -12,15 +11,18 @@ echo VERSION: $VERSION
 
 rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
 
-#babel component to dist
+# #babel component to dist
 #babel ./dist -d dist --copy-files
 
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
 cd dist
 npm publish --tag beta --access=public
-
-#clear dist and package json
 cd ..
 rm -rf dist
 
-
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/core new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/core"}'
+#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/foundation new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/foundation"}'