@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

package/src/libs/Steps/StepsHorizontal.tsx

@@ -0,0 +1,189 @@
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
+import React, {FC, useContext, useState} from 'react';
+import {
+  FlexAlignType,
+  LayoutChangeEvent,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import StepIcon from './StepIcon';
+import styles from './styles';
+import {Step, StepsProps} from './types';
+import {GetStepColor, GetStepTypo} from './utils';
+
+type TextAlign = 'left' | 'right' | 'center';
+
+const StepsHorizontal: FC<StepsProps> = ({
+  steps,
+  size,
+  activeIndex,
+  useNumber = false,
+  align = 'center',
+  customIcon,
+  onPress,
+  disabled,
+  accessibilityLabel = 'steps-horizontal',
+}) => {
+  const [timeHeight, setTimeHeight] = useState(0);
+  const { theme } = useContext(ApplicationContext);
+
+  const renderStepItem = (item: Step, index: number) => {
+    const {title, description, error, time} = item;
+    let typoStyle = GetStepTypo(activeIndex, index, error, size, 'horizontal');
+    let alignItems: FlexAlignType = 'center';
+    let textAlign: TextAlign = 'center';
+
+    if (align === 'left') {
+      alignItems = 'flex-start';
+      textAlign = 'left';
+    } else if (align === 'right') {
+      alignItems = 'flex-end';
+      textAlign = 'right';
+    } else if (align === 'stretch') {
+      if (index === 0) {
+        alignItems = 'flex-start';
+        textAlign = 'left';
+      } else if (index === steps.length - 1) {
+        textAlign = 'right';
+        alignItems = 'flex-end';
+      }
+    }
+
+    const onTimesLayout = (e: LayoutChangeEvent) => {
+      const {height} = e.nativeEvent.layout;
+      if (height !== timeHeight && height > timeHeight) setTimeHeight(height);
+    };
+
+    const haveMarginRight =
+      index !== steps.length - 1 && align !== 'center' && align !== 'stretch';
+
+    return (
+      <TouchableOpacity
+        key={`Step ${index}`}
+        style={{
+          flex: 1,
+          alignItems,
+          marginRight: haveMarginRight ? Spacing.XS : 0,
+        }}
+        disabled={disabled || !onPress}
+        onPress={() => onPress && onPress(item, index)}
+        accessibilityLabel={`${accessibilityLabel}-touch-${index}`}>
+        <View
+          style={{
+            minHeight: timeHeight,
+            justifyContent: 'flex-end',
+          }}>
+          {!!time && (
+            <Text
+              onLayout={onTimesLayout}
+              style={{textAlign}}
+              color={
+                disabled ? theme.colors.text.disable : typoStyle.time.color
+              }
+              typography={typoStyle.time.typography}
+              accessibilityLabel={`${accessibilityLabel}-time-${index}`}>
+              {time}
+            </Text>
+          )}
+        </View>
+        {renderStepIcon(item, index, align, disabled)}
+        {!!title && (
+          <Text
+            style={[styles.title, {textAlign}]}
+            color={disabled ? theme.colors.text.disable : typoStyle.title.color}
+            typography={typoStyle.title.typography}
+            accessibilityLabel={`${accessibilityLabel}-title-${index}`}>
+            {title}
+          </Text>
+        )}
+        {!!description && (
+          <Text
+            style={{textAlign}}
+            color={
+              disabled ? theme.colors.text.disable : typoStyle.description.color
+            }
+            typography={typoStyle.description.typography}
+            accessibilityLabel={`${accessibilityLabel}-description-${index}`}>
+            {description}
+          </Text>
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  const renderStepIcon = (
+    item: Step,
+    index: number,
+    align: string = 'center',
+    disabled?: boolean
+  ) => {
+    const {error} = item;
+
+    const stepStyle = GetStepColor(
+      activeIndex,
+      index,
+      error,
+      steps.length,
+      disabled
+    );
+    const {backgroundColor, borderColor, lineColorRight, lineColorLeft} =
+      stepStyle;
+
+    const lineLeftHide =
+      (align === 'stretch' && index === 0) || align === 'left';
+    const lineRightHide =
+      (align === 'stretch' && index === steps.length - 1) || align === 'right';
+
+    return (
+      <View style={styles.rowStep}>
+        {!lineLeftHide && (
+          <View
+            style={[
+              styles.lineHorizontal,
+              styles.radiusRight,
+              {
+                backgroundColor: lineColorLeft,
+              },
+            ]}
+          />
+        )}
+        <StepIcon
+          size={size}
+          error={error}
+          backgroundColor={disabled ? Colors.pink_08 : backgroundColor}
+          borderColor={disabled ? Colors.pink_10 : borderColor}
+          style={{
+            marginRight: !lineRightHide ? Spacing.XS : 0,
+            marginLeft: !lineLeftHide ? Spacing.XS : 0,
+            marginVertical: Spacing.XS,
+          }}
+          index={index}
+          useNumber={useNumber}
+          isActive={activeIndex === index}
+          customIcon={customIcon}
+        />
+        {!lineRightHide && (
+          <View
+            style={[
+              styles.lineHorizontal,
+              styles.radiusLeft,
+              {
+                backgroundColor: lineColorRight,
+              },
+            ]}
+          />
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <View style={{flexDirection: 'row'}}>
+      {steps.map((item, index) => {
+        return renderStepItem(item, index);
+      })}
+    </View>
+  );
+};
+
+export default StepsHorizontal;

package/src/libs/Steps/StepsVertical.tsx

@@ -0,0 +1,133 @@
+import {
+  ApplicationContext,
+  Colors,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+import React, { FC, useContext } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import StepIcon from './StepIcon';
+import styles from './styles';
+import { Step, StepsProps } from './types';
+import { GetStepColor, GetStepTypo } from './utils';
+
+const StepsVertical: FC<StepsProps> = ({
+  steps,
+  activeIndex,
+  size,
+  useNumber = false,
+  onPress,
+  disabled,
+  accessibilityLabel = 'steps-vertical',
+}) => {
+  const { theme } = useContext(ApplicationContext);
+
+  const renderStepItem = (item: Step, index: number) => {
+    const { error, description, title, time } = item;
+
+    const stepStyle = GetStepColor(activeIndex, index, error, steps.length);
+    const typoStyle = GetStepTypo(activeIndex, index, error, size, 'vertical');
+
+    const { backgroundColor, borderColor } = stepStyle;
+    const lineColor =
+      activeIndex > index
+        ? theme.colors.primary + '33'
+        : theme.colors.background.default;
+
+    /**
+     * build description
+     */
+    const buildDescription = () => {
+      if (typeof description === 'string') {
+        return (
+          <Text
+            color={disabled ? theme.colors.text.disable : typoStyle.title.color}
+            typography={typoStyle.description.typography}
+            accessibilityLabel={`${accessibilityLabel}-description-${index}`}
+          >
+            {description}
+          </Text>
+        );
+      }
+      return description;
+    };
+
+    return (
+      <TouchableOpacity
+        key={`Step ${index}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: Spacing.XS,
+        }}
+        disabled={disabled || !onPress}
+        onPress={() => onPress && onPress(item, index)}
+        accessibilityLabel={`${accessibilityLabel}-touch-${index}`}
+      >
+        <View
+          style={{
+            alignItems: 'center',
+            marginRight: Spacing.M,
+            minHeight: 48,
+          }}
+        >
+          <StepIcon
+            size={size}
+            error={error}
+            backgroundColor={disabled ? Colors.pink_08 : backgroundColor}
+            borderColor={disabled ? Colors.pink_10 : borderColor}
+            useNumber={useNumber}
+            index={index}
+            isActive={activeIndex === index}
+          />
+          {index !== 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={
+                disabled ? theme.colors.text.disable : typoStyle.title.color
+              }
+              typography={typoStyle.title.typography}
+              accessibilityLabel={`${accessibilityLabel}-title-${index}`}
+            >
+              {title}
+            </Text>
+            <Text
+              color={
+                disabled ? theme.colors.text.disable : typoStyle.time.color
+              }
+              typography={typoStyle.time.typography}
+              accessibilityLabel={`${accessibilityLabel}-time-${index}`}
+            >
+              {time}
+            </Text>
+          </View>
+          {buildDescription()}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <View style={{ width: '100%' }}>
+      {steps.map((item, index: number) => {
+        return renderStepItem(item, index);
+      })}
+    </View>
+  );
+};
+
+export default StepsVertical;

package/src/libs/Steps/index.tsx

@@ -0,0 +1,20 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {Step, StepsProps, Align} 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, Align};

package/src/libs/Steps/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/step",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {}
+}

package/src/libs/Steps/publish.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)

package/src/libs/Steps/styles.ts

@@ -0,0 +1,46 @@
+import {Radius, Spacing} from '@momo-kits/foundation';
+import {StyleSheet} from 'react-native';
+export default StyleSheet.create({
+  stepIcon: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderRadius: Radius.L,
+  },
+  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',
+  },
+  currIcon: {
+    backgroundColor: 'white',
+    borderRadius: Radius.L,
+    aspectRatio: 1,
+  },
+});

package/src/libs/Steps/types.ts

@@ -0,0 +1,159 @@
+import {ViewStyle} from 'react-native';
+import React from 'react';
+
+/**
+ * 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;
+
+  /**
+   * Optional. If `true`, the step numbers are displayed within the step icons.
+   */
+  useNumber?: boolean;
+
+  /**
+   * Optional. Specifies the alignment of the steps within the component.
+   */
+  align?: Align;
+
+  /**
+   * Optional. If `true`, the step descriptions are displayed below the step titles.
+   */
+  customIcon?: string;
+
+  /**
+   * Optional. If `true`, the step descriptions are displayed below the step titles.
+   */
+  onPress?: (item: Step, index: number) => void;
+
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Steps component.
+   */
+  disabled?: boolean;
+
+  accessibilityLabel?: string;
+};
+
+export type Align = 'left' | 'right' | 'center' | 'stretch';
+
+/**
+ * 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 | React.ReactNode;
+
+  /**
+   * 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;
+
+  /**
+   * Optional. If `true`, the step number is displayed within the step icon.
+   */
+  useNumber?: boolean;
+
+  /**
+   * Optional. The number to display within the step icon.
+   */
+  index: number;
+
+  /**
+   * Optional. If `true`, the step icon is marked as active.
+   */
+  isActive?: boolean;
+
+  /**
+   * Optional. Custom active icon
+   */
+  customIcon?: string;
+};
+
+/**
+ * Properties for the ProgressInfo component, which displays a progress bar
+ */
+export type ProgressInfoProps = {
+  steps: Step[];
+  horizontal?: boolean;
+  size?: 'small' | 'large';
+  useNumber?: boolean;
+  align?: 'left' | 'right' | 'center' | 'stretch' | undefined;
+  showDescription?: boolean;
+  customIcon?: string;
+};