@momo-kits/step 0.73.3-beta.5 → 0.74.2-react-native.1

package/StepIcon.tsx

@@ -0,0 +1,31 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {StepIconProps} from './types';
+import styles from './styles';
+import {ApplicationContext, Icon, Colors} from '@momo-kits/foundation';
+
+const StepIcon: FC<StepIconProps> = ({
+  size = 'large',
+  backgroundColor,
+  borderColor,
+  error,
+  style,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let iconStyle = styles.stepIcon;
+  let checkIconSize = 16;
+  let iconSource = error ? 'navigation_close' : 'notifications_check';
+
+  if (size === 'small') {
+    iconStyle = styles.stepIconSmall;
+    checkIconSize = 12;
+  }
+  return (
+    <View
+      style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
+      <Icon size={checkIconSize} color={Colors.black_01} source={iconSource} />
+    </View>
+  );
+};
+
+export default StepIcon;

package/StepsHorizontal.tsx

@@ -0,0 +1,94 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {Step, StepsProps} from './types';
+import StepIcon from './StepIcon';
+import {Spacing, Text} from '@momo-kits/foundation';
+import {getStepColor, getStepTypo} from './utils';
+import styles from './styles';
+
+const StepsHorizontal: FC<StepsProps> = ({steps, size, activeIndex}) => {
+  const renderStepItem = (i: Step, ii: number) => {
+    const {title, description, error, time} = steps[ii];
+    let typoStyle = getStepTypo(activeIndex, ii, error, size);
+
+    return (
+      <View key={`Step ${ii}`} style={{flex: 1, alignItems: 'center'}}>
+        {!!time && (
+          <Text
+            style={styles.textCenter}
+            color={typoStyle.time.color}
+            typography={typoStyle.time.typography}>
+            {time}
+          </Text>
+        )}
+        {renderStepIcon(i, ii)}
+        {!!title && (
+          <Text
+            style={[styles.title, styles.textCenter]}
+            color={typoStyle.title.color}
+            typography={typoStyle.title.typography}>
+            {title}
+          </Text>
+        )}
+        {!!description && (
+          <Text
+            style={styles.textCenter}
+            color={typoStyle.description.color}
+            typography={typoStyle.description.typography}>
+            {description}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const renderStepIcon = (i: Step, ii: number) => {
+    const {error} = steps[ii];
+
+    const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
+    const {backgroundColor, borderColor, lineColorRight, lineColorLeft} =
+      stepStyle;
+
+    return (
+      <View style={styles.rowStep}>
+        {
+          <View
+            style={[
+              styles.lineHorizontal,
+              styles.radiusRight,
+              {
+                backgroundColor: lineColorLeft,
+              },
+            ]}
+          />
+        }
+        <StepIcon
+          size={size}
+          error={error}
+          backgroundColor={backgroundColor}
+          borderColor={borderColor}
+          style={{marginHorizontal: Spacing.XS, marginVertical: Spacing.XS}}
+        />
+        <View
+          style={[
+            styles.lineHorizontal,
+            styles.radiusLeft,
+            {
+              backgroundColor: lineColorRight,
+            },
+          ]}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <View style={{flexDirection: 'row'}}>
+      {steps.map((i, ii) => {
+        return renderStepItem(i, ii);
+      })}
+    </View>
+  );
+};
+
+export default StepsHorizontal;

package/StepsVertical.tsx

@@ -0,0 +1,89 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {Step, StepsProps} from './types';
+import {getStepColor, getStepTypo} from './utils';
+import {ApplicationContext, Spacing, Text} from '@momo-kits/foundation';
+import styles from './styles';
+import StepIcon from './StepIcon';
+
+const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
+  const {theme} = useContext(ApplicationContext);
+  const renderStepItem = (i: Step, ii: number) => {
+    const {error, description, title, time} = steps[ii];
+
+    const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
+    let typoStyle = getStepTypo(activeIndex, ii, error, size);
+
+    const {backgroundColor, borderColor} = stepStyle;
+    const lineColor =
+      activeIndex > ii
+        ? theme.colors.primary + '33'
+        : theme.colors.background.default;
+    return (
+      <View
+        key={`Step ${ii}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: Spacing.XS,
+        }}>
+        <View
+          style={{
+            alignItems: 'center',
+            marginRight: Spacing.M,
+            minHeight: 48,
+          }}>
+          <StepIcon
+            size={size}
+            error={error}
+            backgroundColor={backgroundColor}
+            borderColor={borderColor}
+          />
+          {ii !== steps.length - 1 && (
+            <View
+              style={[
+                styles.lineVertical,
+                {backgroundColor: lineColor, marginVertical: Spacing.XS},
+              ]}
+            />
+          )}
+        </View>
+        <View style={{flex: 1}}>
+          <View
+            style={[
+              {
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              },
+            ]}>
+            <Text
+              numberOfLines={2}
+              style={{marginRight: Spacing.S, flex: 1}}
+              color={typoStyle.title.color}
+              typography={typoStyle.title.typography}>
+              {title}
+            </Text>
+            <Text
+              color={typoStyle.time.color}
+              typography={typoStyle.time.typography}>
+              {time}
+            </Text>
+          </View>
+          <Text
+            color={typoStyle.description.color}
+            typography={typoStyle.description.typography}>
+            {description}
+          </Text>
+        </View>
+      </View>
+    );
+  };
+  return (
+    <View style={{width: '100%'}}>
+      {steps.map((i, ii) => {
+        return renderStepItem(i, ii);
+      })}
+    </View>
+  );
+};
+
+export default StepsVertical;

package/index.tsx

@@ -0,0 +1,20 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {StepsProps, Step} from './types';
+import StepsHorizontal from './StepsHorizontal';
+import StepsVertical from './StepsVertical';
+
+const Steps: FC<StepsProps> = ({horizontal = false, ...props}) => {
+  return (
+    <View>
+      {horizontal ? (
+        <StepsHorizontal {...props} />
+      ) : (
+        <StepsVertical {...props} />
+      )}
+    </View>
+  );
+};
+
+export {Steps};
+export type {StepsProps, Step};

package/package.json

@@ -1,15 +1,17 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.73.3-beta.5",
+    "version": "0.74.2-react-native.1",
     "private": false,
-    "main": "index.js",
-    "dependencies": {},
+    "main": "index.tsx",
     "peerDependencies": {
-        "react-native": ">=0.55",
-        "prop-types": "^15.7.2",
-        "react": "16.9.0",
-        "@momo-kits/core-v2": ">=0.0.5-beta"
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
     },
-    "devDependencies": {},
-    "license": "MoMo"
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
 }

package/publish.sh

@@ -26,4 +26,4 @@ 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/step new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/step"}'
+##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/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'

package/styles.ts

@@ -0,0 +1,48 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  stepIcon: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderRadius: Radius.M,
+  },
+  stepIconSmall: {
+    width: 16,
+    height: 16,
+    borderWidth: 2,
+    borderRadius: Radius.S,
+  },
+  lineHorizontal: {
+    height: 2,
+    flex: 1,
+  },
+  lineVertical: {
+    width: 2,
+    minHeight: 20,
+    flex: 1,
+  },
+  radiusLeft: {
+    borderTopLeftRadius: Radius.S,
+    borderBottomLeftRadius: Radius.S,
+  },
+  radiusRight: {
+    borderTopRightRadius: Radius.S,
+    borderBottomRightRadius: Radius.S,
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowStep: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    marginBottom: Spacing.XS,
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+});

package/types.ts

@@ -0,0 +1,96 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * Properties for the Steps component, a guided progress through a sequence of procedural steps.
+ */
+export type StepsProps = {
+  /**
+   * Optional. If `true`, the steps are laid out in a horizontal manner.
+   * If `false`, the steps are laid out vertically.
+   * Defaults to `false` (vertical) if not provided.
+   */
+  horizontal?: boolean;
+
+  /**
+   * An array of `Step` items representing each individual step in the sequence.
+   * Each `Step` has its own set of properties such as title, description, etc.
+   */
+  steps: Step[];
+
+  /**
+   * Optional. Specifies the size of the steps. Affects all step items within the component.
+   * If not provided, a default size is used.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * The index of the currently active step within the steps sequence,
+   * starting from 0 for the first step.
+   */
+  activeIndex: number;
+};
+
+/**
+ * Represents a single step within the Steps component. Each step has a
+ * title and can have optional properties such as a description or error state.
+ */
+export type Step = {
+  /**
+   * The title of the step, briefly describing the purpose or task of this stage.
+   */
+  title: string;
+
+  /**
+   * Optional. More detailed text about this particular step.
+   * It can provide users with guidance on what to expect or what's required.
+   */
+  description?: string;
+
+  /**
+   * Optional. If `true`, the step is marked as having an error, typically displayed
+   * with an error icon and error styles. Defaults to `false` if not provided.
+   */
+  error?: boolean;
+
+  /**
+   * Optional. A string representing the time associated with this step.
+   * It could be the duration, a specific time, or date, depending on the context.
+   */
+  time?: string;
+};
+
+/**
+ * Properties for the StepIcon component, which displays an icon
+ * representing a step within the Steps component.
+ */
+export type StepIconProps = {
+  /**
+   * Optional. Specifies the size of the step icon. If not provided, a default size is used.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. The background color of the step icon.
+   * If not provided, a default background color is used.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Optional. The border color of the step icon.
+   * If not provided, a default border color is used.
+   */
+  borderColor?: string;
+
+  /**
+   * Optional. If `true`, the step icon is marked as being in an error state,
+   * typically displayed with an error icon and error styles.
+   * Defaults to `false` if not provided.
+   */
+  error?: boolean;
+
+  /**
+   * Optional. Custom styles to apply to the StepIcon component.
+   * Can be used to adjust the visual presentation or layout.
+   */
+  style?: ViewStyle;
+};

package/utils.ts

@@ -0,0 +1,126 @@
+import {useContext} from 'react';
+import {ApplicationContext, Colors, Typography} from '@momo-kits/foundation';
+
+type StepStatus = 'inactive' | 'active' | 'completed' | 'error';
+type StepTypo = {
+  typography: Typography;
+  color: string;
+};
+
+export const getStepTypo = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  size?: 'small' | 'large',
+) => {
+  const {theme} = useContext(ApplicationContext);
+
+  let title: StepTypo = {
+    color: theme.colors.text.default,
+    typography: 'description_default_regular',
+  };
+  let description: StepTypo = {
+    color: theme.colors.text.hint,
+    typography: 'description_default_regular',
+  };
+  let time: StepTypo = {
+    color: theme.colors.text.hint,
+    typography: 'description_xs_regular',
+  };
+
+  let status: StepStatus = 'inactive';
+  if (activeIndex > currentIndex) {
+    status = 'completed';
+  }
+  if (activeIndex === currentIndex) {
+    status = 'active';
+  }
+  if (error) {
+    status = 'error';
+  }
+
+  switch (status) {
+    case 'active': {
+      title.typography = 'header_xs_semibold';
+      break;
+    }
+
+    case 'completed': {
+      title.color = theme.colors.text.disable;
+      description.color = theme.colors.text.disable;
+      time.color = theme.colors.text.disable;
+      break;
+    }
+
+    case 'error': {
+      title.typography = 'header_xs_semibold';
+      title.color = theme.colors.error.primary;
+      break;
+    }
+  }
+
+  if (size === 'small') {
+    description.typography = 'description_xs_regular';
+  }
+
+  return {title, description, time};
+};
+
+export const getStepColor = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  length: number = 1,
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const DEFAULT_LINE_COLOR = theme.colors.background.default;
+  const COMPLETED_LINE_COLOR = theme.colors.primary + '33';
+
+  let backgroundColor = Colors.black_06;
+  let borderColor = theme.colors.border.default;
+  let lineColorLeft = DEFAULT_LINE_COLOR;
+  let lineColorRight = DEFAULT_LINE_COLOR;
+  let status: StepStatus = 'inactive';
+
+  if (activeIndex > currentIndex) {
+    status = 'completed';
+    lineColorLeft = COMPLETED_LINE_COLOR;
+    lineColorRight = COMPLETED_LINE_COLOR;
+  }
+  if (activeIndex === currentIndex) {
+    status = 'active';
+    lineColorLeft = COMPLETED_LINE_COLOR;
+  }
+  if (error) {
+    status = 'error';
+  }
+
+  if (currentIndex === 0) {
+    lineColorLeft = 'transparent';
+  }
+  if (currentIndex === length - 1) {
+    lineColorRight = 'transparent';
+  }
+
+  switch (status) {
+    case 'active': {
+      backgroundColor = theme.colors.primary;
+      borderColor = theme.colors.background.tonal;
+      break;
+    }
+
+    case 'completed': {
+      backgroundColor = theme.colors.primary + '33';
+      borderColor = theme.colors.background.selected;
+      break;
+    }
+
+    case 'error': {
+      backgroundColor = theme.colors.error.primary;
+      borderColor = theme.colors.error.container;
+      break;
+    }
+  }
+
+  return {backgroundColor, borderColor, lineColorLeft, lineColorRight};
+};