@momo-kits/foundation 1.0.0

package/Text/index.tsx

@@ -0,0 +1,164 @@
+import React, {useContext} from 'react';
+import {StyleSheet, Text as RNText} from 'react-native';
+import {
+  NavigationContext,
+  // FontWeight,
+  TextProps,
+  Typography,
+  TypographyWeight,
+} from '../index';
+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',
+};
+
+const SFProText: TypographyWeight = {
+  100: 'Thin',
+  200: 'Ultralight',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Semibold',
+  700: 'Bold',
+  800: 'Heavy',
+  900: 'Black',
+  normal: 'Regular',
+  bold: 'Bold',
+};
+
+const FontStyle: {[key: string]: string} = {
+  normal: '',
+  italic: 'Italic',
+};
+
+/**
+ * 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,
+  ...rest
+}) => {
+  const {theme} = useContext(NavigationContext);
+
+  /**
+   * typography style
+   * @return {*}
+   */
+  const getTypography = (value: Typography) => {
+    const typo: {
+      [key: string]: object;
+    } = styles;
+    return typo[value];
+  };
+
+  /**
+   * 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'};
+    }
+  };
+*/
+
+  const textStyle: any = StyleSheet.flatten([
+    {fontFamily: theme.font, color: color ?? theme.colors},
+    getTypography(typography),
+    // getFontWeight(weight),
+    style,
+  ]);
+
+  textStyle.fontFamily = getFontFamily({
+    fontFamily: textStyle.fontFamily,
+    // fontWeight: textStyle.fontWeight,
+    // fontStyle,
+  });
+
+  return (
+    <RNText {...rest} style={textStyle}>
+      {children ?? ''}
+    </RNText>
+  );
+};
+
+Text.defaultProps = {
+  typography: 'paragraph_default',
+  // weight: 'regular',
+  color: undefined,
+  // fontStyle: 'normal',
+};
+
+export {Text, getFontFamily};

package/Text/styles.ts

@@ -0,0 +1,34 @@
+export 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': {
+    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'},
+};

package/Text/types.ts

@@ -0,0 +1,47 @@
+import {TextProps as RNTextProps} from 'react-native';
+
+export interface TypographyWeight {
+  [key: string]: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  normal: string;
+  bold: string;
+}
+
+export type Typography =
+  | 'headline_default'
+  | 'headline_s'
+  | 'headline_l'
+  | 'headline_xl'
+  | 'title_default'
+  | 'title_xs'
+  | 'title_s'
+  | 'headerText_default'
+  | 'headerText_xs'
+  | 'headerText_s'
+  | 'paragraph_default'
+  | 'paragraph_bold'
+  | 'paragraph_italic'
+  | 'description_default'
+  | 'description_xs'
+  | 'description_s'
+  | 'label_default'
+  | 'label_xxs'
+  | 'label_xs'
+  | 'label_s'
+  | 'action_default'
+  | 'action_xxs'
+  | 'action_xs'
+  | 'action_s';
+
+export interface TextProps extends RNTextProps {
+  typography: Typography;
+  color?: string;
+}

package/TextInput/index.js

@@ -0,0 +1,225 @@
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {TextInput, TouchableOpacity, View} from 'react-native';
+import PropTypes from 'prop-types';
+import {
+  ApplicationContext,
+  getFontFamily,
+  Index,
+  SizedBox,
+  Text,
+} from '@components';
+import styles from './styles';
+import {Opacity} from '@configs';
+
+const Index = forwardRef((props, ref) => {
+  const {theme, font} = useContext(ApplicationContext);
+  const {
+    style,
+    size,
+    label,
+    info,
+    onPressInfo,
+    onChangeText,
+    error,
+    trailing,
+    numberOfLines,
+  } = props;
+
+  const inputRef = useRef();
+  const [focus, setFocus] = useState(false);
+
+  useImperativeHandle(ref, () => inputRef.current);
+
+  /**
+   * get border color
+   */
+  const getBorderColor = () => {
+    if (error) {
+      return theme.colors.error;
+    }
+    if (focus) {
+      return theme.colors.primary;
+    }
+    return theme.colors.border;
+  };
+
+  /**
+   * get size style
+   */
+  const getSizeStyle = () => {
+    if (numberOfLines > 1) {
+      return [styles.small, {height: numberOfLines * 24}];
+    }
+    switch (size) {
+      case 'large':
+        return styles.large;
+      case 'small':
+        return styles.small;
+
+      default:
+        return styles.large;
+    }
+  };
+
+  /**
+   * get text style
+   */
+  const getTextStyle = () => {
+    let textStyle;
+    switch (size) {
+      case 'large':
+        textStyle = styles.textLarge;
+        break;
+      case 'small':
+        textStyle = styles.textSmall;
+        break;
+      default:
+        textStyle = styles.textLarge;
+        break;
+    }
+
+    return {
+      ...textStyle,
+      fontFamily: getFontFamily({
+        fontFamily: font,
+        fontWeight: textStyle.fontWeight,
+      }),
+    };
+  };
+
+  /**
+   * on clear text
+   */
+  const onClear = () => {
+    inputRef?.current?.clear?.();
+    onChangeText?.('');
+  };
+
+  /**
+   * on blur
+   */
+  const onBlur = () => {
+    setFocus(false);
+    props.onBlur?.();
+  };
+
+  /**
+   * on forcus
+   */
+  const onFocus = () => {
+    setFocus(true);
+    props.onFocus?.();
+  };
+
+  /**
+   * render info icon button
+   */
+  const renderInfo = () => {
+    if (info) {
+      return (
+        <TouchableOpacity style={styles.rowInfo} onPress={onPressInfo}>
+          <Index
+            name="information-outline"
+            color={theme.colors.secondary}
+            size={16}
+          />
+        </TouchableOpacity>
+      );
+    }
+  };
+
+  /**
+   * render clear action
+   */
+  const renderClear = () => {
+    if (focus) {
+      return (
+        <TouchableOpacity onPress={onClear}>
+          <Index name="close-circle" />
+        </TouchableOpacity>
+      );
+    }
+  };
+
+  /**
+   * render trailing
+   */
+  const renderTrailing = () => {
+    if (trailing) {
+      return <View style={styles.trailingContent}>{trailing}</View>;
+    }
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={[getSizeStyle(), {borderColor: getBorderColor()}]}>
+        <View style={styles.rowContent}>
+          <TextInput
+            {...props}
+            ref={inputRef}
+            multiline={numberOfLines > 1}
+            textAlignVertical={numberOfLines > 1 ? 'top' : 'center'}
+            style={[
+              styles.inputContent,
+              {color: theme.colors.text},
+              numberOfLines > 1 && styles.multilineContent,
+              getTextStyle(),
+            ]}
+            placeholderTextColor={theme.colors.textSecondary + Opacity['40']}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+          {renderClear()}
+          {renderTrailing()}
+          <View
+            style={[styles.infoContent, {backgroundColor: theme.colors.card}]}>
+            <Text typography="subtitle" type="secondary">
+              {label}
+            </Text>
+            {renderInfo()}
+          </View>
+        </View>
+      </View>
+      {error && (
+        <>
+          <SizedBox height={4} />
+          <Text typography="subtitle" color="error">
+            {error}
+          </Text>
+        </>
+      )}
+    </View>
+  );
+});
+
+Index.propTypes = {
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  size: PropTypes.oneOf(['large', 'small']),
+  label: PropTypes.string,
+  error: PropTypes.string,
+  info: PropTypes.bool,
+  autoCorrect: PropTypes.bool,
+  spellCheck: PropTypes.bool,
+  onPressInfo: PropTypes.func,
+  trailing: PropTypes.element,
+};
+
+Index.defaultProps = {
+  style: {},
+  size: 'large',
+  label: 'Label',
+  error: null,
+  info: false,
+  autoCorrect: false,
+  spellCheck: false,
+  onPressInfo: () => {},
+  trailing: null,
+};
+
+export default Index;

package/TextInput/styles.js

@@ -0,0 +1,55 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  large: {
+    height: 60,
+    width: '100%',
+    borderWidth: 1,
+    borderRadius: 8,
+  },
+  small: {
+    height: 50,
+    width: '100%',
+    borderWidth: 1,
+    borderRadius: 8,
+  },
+  inputContent: {flex: 1, height: '100%'},
+  textLarge: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  textSmall: {fontSize: 16},
+  rowInfo: {
+    paddingLeft: 4,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  infoContent: {
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    left: 8,
+    top: -8,
+    height: 16,
+    paddingHorizontal: 8,
+    overflow: 'hidden',
+  },
+  trailingContent: {
+    marginLeft: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  multilineContent: {
+    paddingTop: 12,
+  },
+});

package/index.ts

@@ -0,0 +1,18 @@
+import Button from './Button';
+
+export {Button};
+
+export * from './Layout';
+export * from './Consts';
+export * from './Text';
+export * from './Text/types';
+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';

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@momo-kits/foundation",
+  "version": "1.0.0",
+  "description": "React Native Component Kits",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "@momo-kits/foundation"
+  ],
+  "dependencies": {
+    "react-native-safe-area-context": "3.1.4",
+    "@react-navigation/bottom-tabs": "5.11.15",
+    "@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"
+  },
+  "peerDependencies": {
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/runtime": "^7.12.5",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@types/jest": "26.0.23",
+    "@types/react-native": "0.64.4",
+    "@types/react-test-renderer": "16.9.2",
+    "babel-jest": "^26.6.3",
+    "eslint": "^7.14.0",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.64.0",
+    "react-test-renderer": "17.0.1",
+    "typescript": "^4.0.3"
+  },
+  "author": "@momo-kits/foundation",
+  "license": "ISC"
+}

package/publish.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+rm -rf dist
+mkdir dist
+
+cp . ./dist
+
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+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 ./dist -d dist --copy-files
+
+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"}'