Storybook update

[Swathi-eGov]

No description provided.

[coderabbitai]

Warning

Review failed

The pull request is closed.

Walkthrough

This update introduces significant changes and improvements to the react/css and react/ui-components modules, including new components, extensive style adjustments, and enhanced functionality. Key highlights are the addition of new CSS styling components, renaming and refactoring tags to chips within UI components, and improvements to storybook stories. These changes enhance styling consistency, component reusability, and user experience.

Changes

| Files / Paths                                                                 | Change Summaries                                                                                                                          |
|-------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|
| react/css/CHANGELOG.md                                                        | Documented removal of unused CSS and addition of new styles for uploaded file and backLink components in version 0.0.2-beta.2             |
| react/css/src/digitv2/components/backLinkV2.scss                              | Introduced styling for back link component in React, including icon, label, and disabled states.                                          |
| react/css/src/digitv2/components/chipV2.scss                                  | Added `.nonclickable` class to disable pointer events and change the cursor.                                                             |
| react/css/src/digitv2/components/errorMessageV2.scss                          | Updated `.digit-error-icon-message-wrap` class with `word-break` and `cursor` properties.                                                 |
| react/css/src/digitv2/components/popUpV2.scss                                 | Replaced hardcoded values with theme variables and added consistent color themes and typography styles.                                    |
| react/css/src/digitv2/components/stepperV2.scss                               | Enhanced styles for `.digit-stepper-content`, `.stepper-label`, `.stepper-connect`, and scrollbar adjustments.                             |
| react/css/src/digitv2/components/uploaderV2.scss                              | Added styles for `.error`, adjusted error handling styles, and improved image preview styles.                                              |
| react/css/src/digitv2/index.scss                                              | Replaced import of `removeableTagV2.scss` with `chipV2.scss`.                                                                              |
| react/css/src/digitv2/typography.scss                                         | Changed `font-family` for `heading-xl` class to `digitv2.fontFamily.rc`.                                                                  |
| react/css/src/pages/employee/index.scss                                       | Changed `z-index` value from `10000` to `999`.                                                                                            |
| react/example/public/index.html                                               | Updated CSS stylesheet link for `@egovernments/digit-ui-components-css` to version `0.0.2-beta.3`.                                         |
| react/ui-components/CHANGELOG.md                                              | Documented renaming of `BackButton` to `BackLink`, updated Storybook, and updated Popup Classname in various versions.                    |
| react/ui-components/src/atoms/BackLink.js                                     | Introduced new `BackLink` component with customizable styling and behavior.                                                               |
| react/ui-components/src/atoms/Chip.js                                         | Renamed `RemoveableTag` to `Chip`, added `onErrorClick` prop and enhanced error handling.                                                 |
| react/ui-components/src/atoms/MultiSelectDropdown.js                          | Replaced `RemoveableTag` with `Chip`.                                                                                                     |
| react/ui-components/src/atoms/PopUp.js                                        | Added new imports for animations, enhanced handling for Enter key, and adjusted rendering logic.                                          |
| react/ui-components/src/atoms/UploadFile.js                                   | Replaced `RemoveableTag` with `Chip`.                                                                                                     |
| react/ui-components/src/atoms/UploadImage.js                                  | Added imports for document upload icons, refactored `getFileUploadIcon` function, and modified image preview logic and styles.             |
| react/ui-components/src/atoms/UploadPopup.js                                  | Updated class name conditionally based on errors and SVG element size adjustments.                                                        |
| react/ui-components/src/atoms/Uploader.js                                     | Replaced `RemoveableTag` with `Chip`, refactored file upload logic, and improved error handling.                                          |
| react/ui-components/src/atoms/index.js                                        | Renamed `BackButton` to `BackLink` and `RemoveableTag` to `Chip`.                                                                         |
| react/ui-components/src/atoms/stories/Animation.stories.js                    | Added new animation imports, updated component title, adjusted background settings, and added new animation stories.                      |
| react/ui-components/src/atoms/stories/BackLink.stories.js                     | Introduced storybook stories for `BackLink` component with different variants and configurations.                                         |
| react/ui-components/src/atoms/stories/Button.stories.js                       | Added new controls for storybook, including variations in `variation`, `size`, and `isSuffix`, and added various story variants.           |
| react/ui-components/src/atoms/stories/CheckBox.stories.js                     | Refactored component to use `FieldV1` HOC instead of direct component usage and adjusted arguments and configurations.                     |
| react/ui-components/src/atoms/stories/Chip.stories.js                         | Renamed `RemoveableTag` to `Chip`, updated story titles and control types, and adjusted text values and classNames.                        |
| react/ui-components/src/atoms/stories/InfoCard.stories.js                     | Added new components and enhanced `argTypes`, introduced new story variants for `InfoCard`.                                               |
| react/ui-components/src/atoms/stories/Panels.stories.js                       | Added control options, introduced panel templates, and created different panel variations and responses for success and error panels.      |
| react/ui-components/src/atoms/stories/PopUp.stories.js                        | Added functionality for customizable PopUp component, including popup types and argument controls.                                         |
| react/ui-components/src/atoms/stories/RadioButtons.stories.js                 | Refactored to use `CustomDropdown` and manage state, introduced logic for option selection and wrapped in `QueryClientProvider`.           |
| react/ui-components/src/atoms/stories/SVG.stories.js                          | Introduced dynamic rendering of icon components based on the `icon` property and updated `fill` property.                                  |
| react/ui-components/src/atoms/stories/Stepper.stories.js                      | Updated `Stepper` import structure and modified story title.                                                                              |
| react/ui-components/src/atoms/stories/TextBlock.stories.js                    | Reorganized import path for `TextBlock` and adjusted component structure.                                                                  |
| react/ui-components/src/atoms/stories/TextInput.stories.js                    | Introduced new state management, refactored to use `FieldV1`, added argument types, and updated various input scenarios.                   |
| react/ui-components/src/atoms/stories/Timeline.stories.js                     | Updated import paths and modified story title to reflect new structure.                                                                    |
| react/ui-components/src/atoms/stories/Toast.stories.js                        | Updated imports, modified story title, defined `argTypes` options, and added `transitionTime` property.                                    |
| react/ui-components/src/atoms/stories/Toggle.stories.js                       | Updated import statements and changed default value for the `label` prop.                                                                  |
| react/ui-components/src/atoms/stories/Typography.stories.js                   | Updated `argTypes` options, added new typographic styles, and adjusted components to reflect these changes.                                |
| react/ui-components/src/atoms/stories/Uploader.stories.js                     | Updated import path for `Uploader` and corrected title and function typo.                                                                  |
| react/ui-components/src/index.js                                              | Renamed `BackButton` to `BackLink` and `RemoveableTag` to `Chip`.                                                                         |

Sequence Diagram(s)

Poem

Amidst the code, new styles arise,
BackLink shines with elegance in its eyes.
Chips replace tags, so neat and bright,
PopUps and uploads gleam in the night.
Storybook tales with animations anew,
A world well-crafted, all just for you.
Here's to change, with CSS in bloom,
And UI components that now consume.

(\(\ 
( -.-) 
o_(")(")

---

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>.
  • 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 generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @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 as 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.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration 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.