Updated timeline molecule and atom, added one more state as failure

[rachana-egov]

No description provided.

[coderabbitai]

Walkthrough

The pull request introduces several changes across multiple files, primarily focusing on enhancing the TimelineStepState enum by adding a failed state. The DigitTimeline widget has been refactored to improve localization and theming, while the TimelineMolecule class now includes a showAllSteps property. Additionally, story functions for timelines have been updated to reflect new states and simplify existing stories.

Changes

File	Change Summary
flutter/digit-ui-components/digit_components/lib/enum/app_enums.dart	Updated TimelineStepState enum to include a failed state.
flutter/digit-ui-components/digit_components/lib/widgets/atoms/timeline.dart	Refactored DigitTimeline widget for localization and theming; changed certain properties to nullable types.
flutter/digit-ui-components/digit_components/lib/widgets/molecules/digit_timeline_molecule.dart	Added showAllSteps property to TimelineMolecule class; modified display logic for timeline steps.
flutter/digit-ui-components/storybook/lib/widgets/atoms/timeline_stories.dart	Updated timeLineStories function with new stories for timeline states.
flutter/digit-ui-components/storybook/lib/widgets/molecules/timeline_molecule_stories.dart	Simplified timelineMoleculeStories function by consolidating story variants.

Possibly related PRs

• Updated label value field story, selection card story and switch story #139: The changes in the LabelValueItem class and the SelectionCard class are related to the main PR as they involve updates to widget properties and structures that may interact with the TimelineStepState enum in terms of displaying states in the UI.

Suggested reviewers

• naveen-egov

Poem

Hop, hop, hooray, a new state to see,
With failed in the enum, as clear as can be.
The timeline now dances, with colors so bright,
In stories we share, all steps in the light.
A showAllSteps feature, how grand it will be,
Let's celebrate changes, come join in with glee! 🐇✨

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[naveen-egov]

please make the changes requested

[coderabbitai]

Actionable comments posted: 13

🧹 Outside diff range and nitpick comments (3)

flutter/digit-ui-components/storybook/lib/widgets/molecules/timeline_molecule_stories.dart (1)

Line range hint 1-107: Overall improvements in story structure with room for enhanced content

The changes to the timelineMoleculeStories() function have significantly improved the structure and focus of the TimelineMolecule stories:

1. Reducing the number of story variants from 4 to 2 simplifies the storybook and makes it easier to maintain.
2. The remaining stories now clearly demonstrate two main use cases: a basic timeline and a collapsible timeline, providing a good overview of the component's capabilities.
3. The standardized step structure across both stories improves consistency and readability.

These changes align well with the PR objective of updating the timeline molecule and atom. However, to fully showcase the new capabilities, including the added failure state mentioned in the PR title, consider the following suggestions:

1. Include an example of the new failure state in one of the stories to demonstrate this new capability.
2. Enhance the diversity of the step states in both stories. Currently, they follow a pattern of completed, present, and future states. Adding examples of the failure state and mixing up the order would provide a more comprehensive demonstration.
3. Consider adding a third story that showcases a more complex, real-world scenario. This could include a mix of all possible states, including the new failure state, and more diverse content for labels and descriptions.

Example of including a failure state:

TimelineStep(
  label: 'Document Verification',
  description: ['Document verification failed due to missing information'],
  state: TimelineStepState.failed,
),

These enhancements would provide a more comprehensive showcase of the TimelineMolecule's capabilities, including the new features mentioned in the PR objectives.

flutter/digit-ui-components/digit_components/lib/widgets/molecules/digit_timeline_molecule.dart (1)

Line range hint 209-257: Refactor the sortSteps function for clarity and efficiency

The current implementation of the sortSteps function is complex and may not efficiently sort steps while preserving the positions of failed steps. Consider refactoring the function to improve clarity and ensure correct behavior.

Here's an example of how you might simplify the function:

List<TimelineStep> sortSteps(List<TimelineStep> steps) {
  // Separate failed steps to preserve their original positions
  List<int> failedIndices = [];
  List<TimelineStep> nonFailedSteps = [];

  for (int i = 0; i < steps.length; i++) {
    if (steps[i].state == TimelineStepState.failed) {
      failedIndices.add(i);
    } else {
      nonFailedSteps.add(steps[i]);
    }
  }

  // Sort non-failed steps based on desired order
  nonFailedSteps.sort((a, b) => _stepOrder(a.state).compareTo(_stepOrder(b.state)));

  // Re-insert failed steps at their original positions
  for (int index in failedIndices) {
    nonFailedSteps.insert(index, steps[index]);
  }

  return nonFailedSteps;
}

int _stepOrder(TimelineStepState state) {
  switch (state) {
    case TimelineStepState.completed:
      return 1;
    case TimelineStepState.present:
      return 2;
    case TimelineStepState.future:
      return 3;
    default:
      return 4;
  }
}

This refactored function separates failed steps to maintain their original positions and sorts the other steps based on the defined order.

flutter/digit-ui-components/storybook/lib/widgets/atoms/timeline_stories.dart (1)

Line range hint 98-183: Eliminate duplicated code in the 'Completed' story

The 'Completed' story replicates much of the code from the 'Ongoing' story, including knobs and widget lists. This duplication can lead to inconsistencies and increased maintenance efforts.

Utilize the helper functions created for the 'Ongoing' story to refactor this story as well:

1. Use the Knobs Helper Functions

   builder: (context) {
     final showAdditionalWidget = getShowAdditionalWidget(context);
     final showAdditionalCollapsibleWidget = getShowAdditionalCollapsibleWidget(context);
   
     return DigitTimeline(
       currentStep: TimelineStepState.completed,
       label: context.knobs.text(label: "label", initial: 'Completed state'),
       description: const ['18 / 02 / 2023'],
       additionalWidgets: buildAdditionalWidgets(showAdditionalWidget),
       additionalHideWidgets: buildAdditionalHideWidgets(showAdditionalCollapsibleWidget),
     );
   }

2. Ensure Reusable Widget Lists

   The buildAdditionalWidgets and buildAdditionalHideWidgets functions can be reused here without modification.

Refactoring in this manner reduces code redundancy and enhances consistency across your stories.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 46bf4ce and 2b41d28.

📒 Files selected for processing (5)

• flutter/digit-ui-components/digit_components/lib/enum/app_enums.dart (1 hunks)
• flutter/digit-ui-components/digit_components/lib/widgets/atoms/timeline.dart (4 hunks)
• flutter/digit-ui-components/digit_components/lib/widgets/molecules/digit_timeline_molecule.dart (4 hunks)
• flutter/digit-ui-components/storybook/lib/widgets/atoms/timeline_stories.dart (2 hunks)
• flutter/digit-ui-components/storybook/lib/widgets/molecules/timeline_molecule_stories.dart (1 hunks)

🧰 Additional context used

🔇 Additional comments (3)

flutter/digit-ui-components/digit_components/lib/enum/app_enums.dart (1)

68-68: LGTM! Verify usage in related components.

The addition of the failed state to the TimelineStepState enum aligns with the PR objective and provides more flexibility in representing timeline steps. This change enhances the granularity of possible states, which can improve user feedback in timeline-related UI components.

To ensure this change is properly integrated, please run the following script to identify components that use this enum and may need updates:

This script will help identify components that may need to be updated to handle the new failed state.

✅ Verification successful

LGTM! Changes to TimelineStepState have been successfully integrated across relevant components.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Find usages of TimelineStepState enum in the codebase

# Search for TimelineStepState usage
echo "Files using TimelineStepState:"
rg --type dart "TimelineStepState" ./lib

# Search for specific state usages
echo "\nUsage of completed state:"
rg --type dart "TimelineStepState.completed" ./lib
echo "\nUsage of present state:"
rg --type dart "TimelineStepState.present" ./lib
echo "\nUsage of future state:"
rg --type dart "TimelineStepState.future" ./lib

# Note: The new 'failed' state won't have existing usages, 
# but developers should consider adding it where appropriate

Length of output: 628

---

Script:

#!/bin/bash
# Description: Find usages of TimelineStepState enum in the entire codebase

# Search for TimelineStepState usage
echo "Files using TimelineStepState:"
rg --type dart "TimelineStepState"

# Search for specific state usages
echo "\nUsage of completed state:"
rg --type dart "TimelineStepState\\.completed"

echo "\nUsage of present state:"
rg --type dart "TimelineStepState\\.present"

echo "\nUsage of future state:"
rg --type dart "TimelineStepState\\.future"

# Note: The new 'failed' state won't have existing usages,
# but developers should consider adding it where appropriate

Length of output: 18775

flutter/digit-ui-components/digit_components/lib/widgets/atoms/timeline.dart (2)

40-40: Verify proper implementation of LocalizedState

By extending LocalizedState<DigitTimeline>, ensure that all localization features are correctly implemented and that any necessary localization context is properly provided to child widgets.

Please confirm that:

• All text displayed by _TimelineState uses the localization context.
• Any overridden methods from LocalizedState are properly implemented.

---

288-292: Confirm localization keys exist for default texts

When viewDetailText and hideDetailText are null, default localized strings are used. Ensure that the localization keys i18.common.viewDetails and i18.common.hideDetails are defined in your localization files to avoid runtime errors.

Please check that your localization files include these keys:

• i18.common.viewDetails
• i18.common.hideDetails