@momo-kits/step 0.77.4 → 0.77.5-beta.1

package/StepsHorizontal.tsx

@@ -12,7 +12,7 @@ const StepsHorizontal: FC<StepsProps> = ({steps, size, activeIndex}) => {
     let typoStyle = getStepTypo(activeIndex, ii, error, size);
 
     return (
-      <View style={{flex: 1, alignItems: 'center'}}>
+      <View key={`Step ${ii}`} style={{flex: 1, alignItems: 'center'}}>
         {!!time && (
           <Text
             style={styles.textCenter}

package/StepsVertical.tsx

@@ -21,6 +21,7 @@ const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
         : theme.colors.background.default;
     return (
       <View
+        key={`Step ${ii}`}
         style={{
           flexDirection: 'row',
           marginBottom: Spacing.XS,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.77.4",
+    "version": "0.77.5-beta.01",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/styles.ts

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '@momo-kits/foundation';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
 
 export default StyleSheet.create({
   stepIcon: {

package/types.ts

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