@momo-kits/information 0.77.5-beta.1

package/index.tsx

@@ -0,0 +1,87 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+import {InformationProps} from './types';
+import styles from './styles';
+import {
+  ApplicationContext,
+  Button,
+  Colors,
+  Icon,
+  Image,
+  Text,
+} from '@momo-kits/foundation';
+
+const Information: FC<InformationProps> = ({
+  title,
+  description = 'Description',
+  state = 'default',
+  image,
+  onPressCTA,
+  showIcon = true,
+  CTA,
+  style,
+  showIconClose = true,
+  onPressClose,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const getTypeStyle = () => {
+    let borderColor = Colors.blue_07;
+    let backgroundColor = Colors.blue_10;
+    let color = Colors.blue_03;
+    let iconSource = 'notifications_info';
+
+    if (state === 'warning') {
+      borderColor = Colors.yellow_06;
+      backgroundColor = Colors.yellow_09;
+      color = Colors.orange_03;
+      iconSource = '24_notifications_alert_triangle';
+    }
+
+    if (state === 'error') {
+      borderColor = Colors.red_07;
+      backgroundColor = Colors.red_10;
+      color = Colors.red_03;
+      iconSource = '24_notifications_alert_octagon';
+    }
+
+    return {borderColor, backgroundColor, color, iconSource};
+  };
+
+  const {backgroundColor, borderColor, color, iconSource} = getTypeStyle();
+
+  return (
+    <View style={[style, {backgroundColor, borderColor}, styles.container]}>
+      <View style={styles.row}>
+        {!!image && <Image source={{uri: image}} style={styles.image} />}
+        {!image && showIcon && (
+          <Icon
+            color={color}
+            style={styles.icon}
+            size={16}
+            source={iconSource}
+          />
+        )}
+        <View style={styles.flex}>
+          {!!title && <Text typography={'label_default'}>{title}</Text>}
+          <Text typography={'description_s'}>{description}</Text>
+        </View>
+        {showIconClose && (
+          <TouchableOpacity onPress={onPressClose}>
+            <Icon size={16} source={'navigation_close'} />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {!!CTA && onPressCTA && (
+        <TouchableOpacity style={styles.cta} onPress={onPressCTA}>
+          <Text color={color} typography={'action_xs'}>
+            {CTA}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export default Information;

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@momo-kits/information",
+    "version": "0.77.5-beta.01",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2"
+    },
+    "devDependencies": {},
+    "license": "MoMo",
+    "dependencies": {}
+}

package/publish.sh

@@ -0,0 +1,28 @@
+#!/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
+
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
+cd dist
+npm publish --tag beta --access=public
+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/bank new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/avatar`"}'

package/styles.ts

@@ -0,0 +1,29 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  container: {
+    borderRadius: Radius.S,
+    borderWidth: 0.5,
+    padding: Spacing.M,
+  },
+  image: {
+    width: 40,
+    height: 40,
+    borderRadius: Radius.XS,
+    marginRight: Spacing.S,
+  },
+  icon: {
+    marginRight: Spacing.S,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  cta: {
+    width: '100%',
+    alignItems: 'flex-end',
+  },
+  flex: {
+    flex: 1,
+  },
+});

package/types.ts

@@ -0,0 +1,73 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * Props for the Information component. This component is typically used to display a piece of
+ * information with optional actions for the user. It can represent various states and levels
+ * of importance or urgency.
+ */
+export type InformationProps = {
+  /**
+   * Optional. The title for the information block, often used to emphasize the main theme or
+   * to indicate the reason for the message. If not provided, only the description will be shown.
+   */
+  title?: string;
+
+  /**
+   * The main content text of the information block. This text provides the necessary details
+   * and is essential for understanding the context of the message.
+   */
+  description: string;
+
+  /**
+   * Optional. The text for the Call To Action (CTA) button. This is intended to prompt the user
+   * to take some specified action like "Retry", "Learn More", or "Dismiss".
+   */
+  CTA?: string;
+
+  /**
+   * Optional. A callback function that is triggered when the CTA button is pressed. This is
+   * used to handle the user's response to the proposed call to action.
+   */
+  onPressCTA?: () => void;
+
+  /**
+   * Optional. The URL or local file path of an image to be displayed. This is typically used
+   * to provide visual context or support to the information being presented.
+   */
+  image?: string;
+
+  /**
+   * Optional. Specifies the state of the information block, which may influence the block's
+   * styling, such as color coding. The 'default' state is neutral, while 'warning' and 'error'
+   * represent increasing levels of urgency or attention.
+   * Defaults to 'default' if not provided.
+   */
+  state?: 'default' | 'warning' | 'error';
+
+  /**
+   * Optional. If `true`, an icon is displayed within the information block, often used to
+   * visually reinforce the state or content of the block. The type of icon is typically
+   * influenced by the `state` prop.
+   * Defaults to `false` if not provided.
+   */
+  showIcon?: boolean;
+
+  /**
+   * Optional. If `true`, a close icon is displayed, usually in the upper corner of the information
+   * block, indicating that the user can dismiss or remove the block from view.
+   * Defaults to `false` if not provided.
+   */
+  showIconClose?: boolean;
+
+  /**
+   * Optional. A callback function that is triggered when the close icon is pressed. This is
+   * used to handle the dismissal of the information block, often removing it from display.
+   */
+  onPressClose?: () => void;
+
+  /**
+   * Optional. Custom styles to apply to the Information component. Can be used to adjust
+   * the visual presentation or layout beyond the default and state-based styling.
+   */
+  style?: ViewStyle;
+};