@momo-kits/foundation 1.0.1 → 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

@@ -1,14 +1,20 @@
 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';
+import {ApplicationContext} from '../Navigation';
+import {Spacing} from '../Consts';
 
-const Radio: FC<RadioProps> = props => {
+const Radio: FC<RadioProps> = ({
+  value,
+  groupValue,
+  disabled,
+  onChange,
+  label,
+}) => {
   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;
@@ -20,10 +26,12 @@ const Radio: FC<RadioProps> = props => {
 
   return (
     <TouchableOpacity
-      onPress={onChange}
+      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>

package/Radio/styles.ts

@@ -6,6 +6,7 @@ export default StyleSheet.create({
     height: 20,
     width: 20,
     borderRadius: Radius.M,
+    marginRight: Spacing.S,
   },
   container: {flex: 1, backgroundColor: 'red'},
 });

package/Radio/types.ts

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

package/Switch/index.tsx

@@ -8,16 +8,14 @@ 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;
-
-  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}

package/Switch/types.ts

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

package/Text/index.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
-import {Text as RNText} from 'react-native';
+import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
-import {TextProps, Typography, TypographyWeight} from './types';
+import {Typography, TypographyWeight} from './types';
 import {ApplicationContext} from '../Navigation';
 
 const SFProText: TypographyWeight = {
@@ -23,11 +23,16 @@ const FontStyle: {[key: string]: string} = {
   normal: '',
 };
 
+export interface TextProps extends RNTextProps {
+  typography: Typography;
+  color?: string;
+}
+
 const Text: React.FC<TextProps> = ({
   typography,
   color,
   children,
-  textAlign,
+  style,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -64,10 +69,7 @@ const Text: React.FC<TextProps> = ({
   return (
     <RNText
       {...rest}
-      style={[
-        textStyle,
-        {color: color ?? theme.colors.text.default, textAlign},
-      ]}>
+      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>
   );

package/Text/styles.ts

@@ -10,9 +10,9 @@ export default {
   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'},
+  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: {

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,10 +38,3 @@ export type Typography =
   | 'action_xxs'
   | '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

@@ -4,32 +4,32 @@ import {
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
-import Button from './Button';
-
-export {Button};
+import Playground from './Playground';
+export {Playground};
 
 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 './IconButton/types';
 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';
+export * from './Input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.1",
+  "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/publish.sh

@@ -4,6 +4,7 @@ mkdir dist
 
 cp . ./dist
 
+
 # GET VERSION from mck_package.json
 VERSIONSTRING=( v$(jq .version package.json) )
 VERSION=(${VERSIONSTRING//[\"]/})
@@ -11,18 +12,15 @@ 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/foundation new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/foundation"}'
+
+#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"}'

package/ActivityIndicator.tsx

@@ -1,244 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  Easing,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Whether to show the indicator or hide it.
-   */
-  animating?: boolean;
-  /**
-   * The color of the spinner.
-   */
-  color?: string;
-  /**
-   * Size of the indicator.
-   */
-  size?: 'small' | 'large' | number;
-  /**
-   * Whether the indicator should hide when not animating.
-   */
-  hidesWhenStopped?: boolean;
-  /**
-   * Style for position indicator.
-   */
-  style?: StyleProp<ViewStyle>;
-};
-
-const DURATION = 2400;
-
-/**
- * Activity indicator is used to present progress of some activity in the app.
- * It can be used as a drop-in for the ActivityIndicator shipped with React Native.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ActivityIndicator, MD2Colors } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <ActivityIndicator animating={true} color={MD2Colors.red800} />
- * );
- *
- * export default MyComponent;
- * ```
- */
-const ActivityIndicator = ({
-  animating = true,
-  color: indicatorColor,
-  hidesWhenStopped = true,
-  size: indicatorSize = 'small',
-  style,
-  ...rest
-}: Props) => {
-  const { current: timer } = React.useRef<Animated.Value>(
-    new Animated.Value(0)
-  );
-  const { current: fade } = React.useRef<Animated.Value>(
-    new Animated.Value(!animating && hidesWhenStopped ? 0 : 1)
-  );
-
-  const rotation = React.useRef<Animated.CompositeAnimation | undefined>(
-    undefined
-  );
-
-  const startRotation = React.useCallback(() => {
-    // Show indicator
-    Animated.timing(fade, {
-      duration: 200,
-      toValue: 1,
-      isInteraction: false,
-      useNativeDriver: true,
-    }).start();
-
-    // Circular animation in loop
-    if (rotation.current) {
-      timer.setValue(0);
-      // $FlowFixMe
-      Animated.loop(rotation.current).start();
-    }
-  }, [fade, timer]);
-
-  const stopRotation = () => {
-    if (rotation.current) {
-      rotation.current.stop();
-    }
-  };
-
-  React.useEffect(() => {
-    if (rotation.current === undefined) {
-      // Circular animation in loop
-      rotation.current = Animated.timing(timer, {
-        duration: DURATION,
-        easing: Easing.linear,
-        // Animated.loop does not work if useNativeDriver is true on web
-        useNativeDriver: Platform.OS !== 'web',
-        toValue: 1,
-        isInteraction: false,
-      });
-    }
-
-    if (animating) {
-      startRotation();
-    } else if (hidesWhenStopped) {
-      // Hide indicator first and then stop rotation
-      Animated.timing(fade, {
-        duration: 200,
-        toValue: 0,
-        useNativeDriver: true,
-        isInteraction: false,
-      }).start(stopRotation);
-    } else {
-      stopRotation();
-    }
-  }, [animating, fade, hidesWhenStopped, startRotation, timer]);
-
-  const color = indicatorColor || 'red';
-  const size =
-    typeof indicatorSize === 'string'
-      ? indicatorSize === 'small'
-        ? 24
-        : 48
-      : indicatorSize
-      ? indicatorSize
-      : 24;
-
-  const frames = (60 * DURATION) / 1000;
-  const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
-  const containerStyle = {
-    width: size,
-    height: size / 2,
-    overflow: 'hidden' as const,
-  };
-
-  return (
-    <View
-      style={[styles.container, style]}
-      {...rest}
-      accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: animating }}
-    >
-      <Animated.View
-        style={[{ width: size, height: size, opacity: fade }]}
-        collapsable={false}
-      >
-        {[0, 1].map((index) => {
-          // Thanks to https://github.com/n4kz/react-native-indicators for the great work
-          const inputRange = Array.from(
-            new Array(frames),
-            (_, frameIndex) => frameIndex / (frames - 1)
-          );
-          const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
-            let progress = (2 * frameIndex) / (frames - 1);
-            const rotation = index ? +(360 - 15) : -(180 - 15);
-
-            if (progress > 1.0) {
-              progress = 2.0 - progress;
-            }
-
-            const direction = index ? -1 : +1;
-
-            return `${direction * (180 - 30) * easing(progress) + rotation}deg`;
-          });
-
-          const layerStyle = {
-            width: size,
-            height: size,
-            transform: [
-              {
-                rotate: timer.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`],
-                }),
-              },
-            ],
-          };
-
-          const viewportStyle = {
-            width: size,
-            height: size,
-            transform: [
-              {
-                translateY: index ? -size / 2 : 0,
-              },
-              {
-                rotate: timer.interpolate({ inputRange, outputRange }),
-              },
-            ],
-          };
-
-          const offsetStyle = index ? { top: size / 2 } : null;
-
-          const lineStyle = {
-            width: size,
-            height: size,
-            borderColor: color,
-            borderWidth: size / 10,
-            borderRadius: size / 2,
-          };
-
-          return (
-            <Animated.View key={index} style={[styles.layer]}>
-              <Animated.View style={layerStyle}>
-                <Animated.View
-                  style={[containerStyle, offsetStyle]}
-                  collapsable={false}
-                >
-                  <Animated.View style={viewportStyle}>
-                    <Animated.View style={containerStyle} collapsable={false}>
-                      <Animated.View style={lineStyle} />
-                    </Animated.View>
-                  </Animated.View>
-                </Animated.View>
-              </Animated.View>
-            </Animated.View>
-          );
-        })}
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  layer: {
-    ...StyleSheet.absoluteFillObject,
-
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default ActivityIndicator;

package/Button/types.ts

@@ -1,27 +0,0 @@
-import {
-  TouchableNativeFeedbackProps,
-  TouchableOpacityProps,
-} from 'react-native';
-
-export type ButtonType =
-  | 'primary'
-  | 'secondary'
-  | 'tonal'
-  | 'outline'
-  | 'danger'
-  | 'text'
-  | 'disabled';
-
-export type ButtonSize = 'large' | 'medium' | 'small';
-
-export interface ButtonProps
-  extends TouchableOpacityProps,
-    TouchableNativeFeedbackProps {
-  type?: ButtonType;
-  size?: ButtonSize;
-  full?: boolean;
-  iconRight?: string;
-  iconLeft?: string;
-  title: string;
-  useTintColor?: boolean;
-}

package/IconButton/types.ts

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

package/Input/types.ts

@@ -1,23 +0,0 @@
-import {TextInputProps} from 'react-native';
-
-export type InputSize = 'small' | 'large';
-export interface InputProps extends TextInputProps {
-  size: InputSize;
-  floatingValue: string;
-  floatingIcon: string;
-  errorMessage: string;
-  icon: string;
-  disabled: boolean;
-  floatingIconColor: string;
-  iconColor: string;
-}
-
-export interface TextAreaProps extends TextInputProps {
-  errorMessage: string;
-  floatingValue: string;
-  floatingIcon: string;
-  disabled: boolean;
-  floatingIconColor: string;
-  placeholder: string;
-  height: number;
-}