@momo-kits/foundation 0.75.1-beta.10

package/Text/index.tsx

@@ -0,0 +1,123 @@
+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 {
+  /**
+   * Represents the typography style applied to the Text component.
+   * It defines the appearance of the text in terms of font size, weight, line height etc.
+   */
+  typography: Typography;
+
+  /**
+   * Optional. Represents the color of the text in the Text component.
+   * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
+   */
+  color?: string;
+
+  /**
+   * Optional. Represents the width of the Text component in terms of span numbers.
+   * It can be used to set a specific width for the text based on a predefined grid system.
+   */
+  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.10",
+    "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"}'