@momo-kits/foundation 0.75.1-beta.3

package/Tag/index.tsx

@@ -0,0 +1,79 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {TagProps} from './types';
+import styles from './styles';
+import {Colors} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+
+const backgroundColor = {
+  default: Colors.black_04,
+  orange: Colors.orange_08,
+  green: Colors.green_08,
+  red: Colors.red_08,
+  blue: Colors.blue_08,
+  grey: Colors.black_04,
+};
+
+const textColor = {
+  default: Colors.black_17,
+  orange: Colors.orange_03,
+  green: Colors.green_03,
+  red: Colors.red_03,
+  blue: Colors.blue_03,
+  grey: Colors.black_12,
+};
+
+const Tag: FC<TagProps> = ({
+  label = 'Label',
+  icon,
+  color = 'default',
+  size = 'large',
+  style,
+  customColor,
+}) => {
+  let labelColor = textColor[color];
+  let tagColor = backgroundColor[color];
+  let sizeStyle = styles.mediumContainer;
+  //Check if custom color is [color]_03 (only check in dev mode)
+  const validateCustomColor = (color: string) => {
+    if (__DEV__) {
+      const colorCore: {[key: string]: string} = Colors;
+      const primaryColors = Object.keys(Colors)
+        .map(i => {
+          if (i.includes('_03')) {
+            return colorCore[i];
+          }
+        })
+        .filter(color => color);
+      return primaryColors.includes(color);
+    }
+    return true;
+  };
+
+  if (size === 'large') {
+    sizeStyle = styles.container;
+  }
+  if (customColor && validateCustomColor(customColor)) {
+    labelColor = Colors.black_01;
+    tagColor = customColor;
+  }
+
+  return (
+    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+      {!!icon && (
+        <Icon
+          style={styles.icon}
+          size={16}
+          source={icon as string}
+          color={labelColor}
+        />
+      )}
+      <Text color={labelColor} typography={'label_s'}>
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+export {Tag};

package/Tag/styles.ts

@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  container: {
+    paddingHorizontal: Spacing.S,
+    borderRadius: Radius.S,
+    flexDirection: 'row',
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mediumContainer: {
+    paddingHorizontal: Spacing.S,
+    borderRadius: Radius.S,
+    height: 18,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: Spacing.XS,
+  },
+});

package/Tag/types.ts

@@ -0,0 +1,10 @@
+import {ViewStyle} from 'react-native';
+
+export type TagProps = {
+  label: string;
+  size?: 'medium' | 'large';
+  icon?: string;
+  color?: 'default' | 'orange' | 'green' | 'red' | 'blue' | 'grey';
+  style?: ViewStyle;
+  customColor?: string;
+};

package/Text/index.tsx

@@ -0,0 +1,110 @@
+import React, {useContext} from 'react';
+import {Text as RNText, TextProps as RNTextProps} from 'react-native';
+import styles from './styles';
+import {Typography, TypographyWeight} from './types';
+import {ApplicationContext} from '../Navigation';
+import {GridContext} from '../Layout';
+
+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 AlegreyaSans: TypographyWeight = {
+  100: 'Thin',
+  200: 'Thin',
+  300: 'Thin',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Bold',
+  800: 'Black',
+  900: 'Black',
+  normal: 'Regular',
+  bold: 'Bold',
+};
+
+const FontStyle: {[key: string]: string} = {
+  italic: 'Italic',
+  normal: '',
+};
+
+export interface TextProps extends RNTextProps {
+  typography: Typography;
+  color?: string;
+  widthSpan?: number;
+}
+
+const Text: React.FC<TextProps> = ({
+  typography,
+  color,
+  children,
+  style,
+  widthSpan,
+  ...rest
+}) => {
+  const grid = useContext(GridContext);
+  const {theme} = useContext(ApplicationContext);
+
+  const getTypoStyle = (typo: Typography) => {
+    const styleSheet: {
+      [key: string]: any;
+    } = styles;
+    const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
+    const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
+    const style = FontStyle[fontStyle ?? 'normal'];
+    let fontFamily: string;
+
+    switch (theme.font) {
+      case 'SFProText': {
+        fontFamily = `${theme.font}-${SFProText[fontWeight]}${style}`;
+        break;
+      }
+      case 'AlegreyaSans': {
+        fontFamily = `${theme.font}-${AlegreyaSans[fontWeight]}${style}`;
+        break;
+      }
+      default: {
+        fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
+      }
+    }
+
+    return {
+      fontFamily,
+      fontSize,
+      lineHeight,
+      fontStyle,
+    };
+  };
+
+  const textStyle = getTypoStyle(typography);
+  const spanStyle = widthSpan ? {width: grid.getSizeSpan(widthSpan)} : {};
+  return (
+    <RNText
+      {...rest}
+      accessibilityLabel={`Text/${children}`}
+      style={[
+        style,
+        textStyle,
+        spanStyle,
+        {color: color ?? theme.colors.text.default},
+      ]}>
+      {children ?? ''}
+    </RNText>
+  );
+};
+
+Text.defaultProps = {
+  typography: 'paragraph_default',
+};
+
+export {Text};

package/Text/styles.ts

@@ -0,0 +1,35 @@
+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'},
+  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'},
+  action_s: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
+};

package/Text/types.ts

@@ -0,0 +1,40 @@
+export type 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'
+  | 'header_default'
+  | 'header_xs'
+  | 'header_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';

package/index.ts

@@ -0,0 +1,38 @@
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import LinearGradient from 'react-native-linear-gradient';
+
+export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
+
+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 './Image';
+export * from './Image/types';
+export * from './Skeleton';
+export * from './Skeleton/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';
+export * from './Divider';
+export * from './Tag';
+export * from './Tag/types';
+export * from './Pagination';
+export * from './Pagination/types';

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@momo-kits/foundation",
+  "version": "0.75.1-beta.3",
+  "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-native-linear-gradient": "2.5.6",
+    "@react-navigation/bottom-tabs": "git+https://gitlab.com/dung.huynh1/react-navigation-bottom-tabs.git#main",
+    "@react-navigation/core": "5.16.1",
+    "@react-navigation/native": "5.9.8",
+    "@react-navigation/routers": "5.7.4",
+    "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main",
+    "@gorhom/bottom-sheet": "2.4.1"
+  },
+  "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"}'