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

package/src/libs/Steps/StepsHorizontal.tsx

@@ -1,189 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,16 +0,0 @@
-{
-    "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

@@ -1,16 +0,0 @@
-#!/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

@@ -1,46 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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;
-};