Added Panels, Panel Card, Popup #71
Conversation
WalkthroughThe recent updates introduce enhancements and new features to the Changes
Tip Early Access Features
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
Outside diff range and nitpick comments (8)
react/css/README.md (2)
45-45: Update the changelog to reflect the latest changes accurately. Consider adding more descriptive text about what was added or changed for each version.
Line range hint
1-96: Consider revising the README to improve formatting and grammatical clarity. For example, ensure proper spacing around headings and correct the use of bare URLs.- Digit Core Repo (https://github.com/egovernments/Digit-Core/tree/digit-ui-core) + Digit Core Repo: [Digit-Core](https://github.com/egovernments/Digit-Core/tree/digit-ui-core)react/ui-components/README.md (6)
Line range hint
18-18: Consider adding a comma for clarity.- This Package is more specific to DIGIT-UI's can be used across mission's + This Package is more specific to DIGIT-UI's, can be used across mission's
Line range hint
43-43: Remove trailing spaces to maintain clean code formatting.- <MultiSelectDropdown restrictSelection={true} /> + <MultiSelectDropdown restrictSelection={true}/>Also applies to: 95-95
Line range hint
57-57: Multiple consecutive blank lines should be reduced to a single blank line.-Also applies to: 104-104, 105-105, 125-125, 144-144
Line range hint
42-42: Headings should be surrounded by blank lines for better readability.+ # Syntax for importing any components +
Line range hint
98-98: Fenced code blocks should be surrounded by blank lines.+ ```bash yarn install
Also applies to: 112-112, 116-116, 118-118 --- Line range hint `128-128`: Bare URLs should be formatted as links for better accessibility. ```diff - Digit Core Repo (https://github.com/egovernments/Core-Platform/tree/digit-ui-core) + Digit Core Repo [here](https://github.com/egovernments/Core-Platform/tree/digit-ui-core)Also applies to: 136-136
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (9)
react/css/package.jsonis excluded by!**/*.jsonreact/example/package.jsonis excluded by!**/*.jsonreact/modules/Project/package.jsonis excluded by!**/*.jsonreact/modules/core/package.jsonis excluded by!**/*.jsonreact/modules/sample/package.jsonis excluded by!**/*.jsonreact/package.jsonis excluded by!**/*.jsonreact/ui-components/package.jsonis excluded by!**/*.jsonreact/ui-components/src/animations/error.jsonis excluded by!**/*.jsonreact/ui-components/src/animations/success.jsonis excluded by!**/*.json
Files selected for processing (23)
- react/css/README.md (1 hunks)
- react/css/src/digitv2/components/panelcard.scss (1 hunks)
- react/css/src/digitv2/components/panels.scss (1 hunks)
- react/css/src/digitv2/components/popUpV2.scss (1 hunks)
- react/css/src/digitv2/components/textblock.scss (1 hunks)
- react/css/src/digitv2/index.scss (1 hunks)
- react/css/src/digitv2/typography.scss (1 hunks)
- react/example/public/index.html (1 hunks)
- react/ui-components/README.md (1 hunks)
- react/ui-components/src/atoms/Animation.js (1 hunks)
- react/ui-components/src/atoms/Panels.js (1 hunks)
- react/ui-components/src/atoms/PopUp.js (2 hunks)
- react/ui-components/src/atoms/TextBlock.js (1 hunks)
- react/ui-components/src/atoms/index.js (2 hunks)
- react/ui-components/src/atoms/stories/Panels.stories.js (1 hunks)
- react/ui-components/src/hoc/stories/Animation.stories.js (1 hunks)
- react/ui-components/src/hoc/stories/Panels.stories.js (1 hunks)
- react/ui-components/src/hoc/stories/PopUp.stories.js (1 hunks)
- react/ui-components/src/hoc/stories/TextBlock.stories.js (1 hunks)
- react/ui-components/src/index.js (4 hunks)
- react/ui-components/src/molecules/PanelCard.js (1 hunks)
- react/ui-components/src/molecules/index.js (2 hunks)
- react/ui-components/src/molecules/stories/PanelCard.stories.js (1 hunks)
Files skipped from review due to trivial changes (10)
- react/css/src/digitv2/components/panelcard.scss
- react/css/src/digitv2/components/panels.scss
- react/css/src/digitv2/index.scss
- react/css/src/digitv2/typography.scss
- react/example/public/index.html
- react/ui-components/src/atoms/TextBlock.js
- react/ui-components/src/atoms/index.js
- react/ui-components/src/atoms/stories/Panels.stories.js
- react/ui-components/src/hoc/stories/Animation.stories.js
- react/ui-components/src/hoc/stories/TextBlock.stories.js
Additional Context Used
LanguageTool (3)
react/css/README.md (2)
Near line 20: Possible missing comma found.
Context: ...it UI's ``` ## Usage After adding the dependency make sure you have this dependency in ...
Rule ID: AI_HYDRA_LEO_MISSING_COMMA
Near line 91: This phrase is duplicated. You should probably use “DIGIT Core” only once.
Context: ...ishnakole-wtt-egov] ## Published from DIGIT Core Digit Core Repo (https://github.com/egovernments/D...
Rule ID: PHRASE_REPETITIONreact/ui-components/README.md (1)
Near line 18: Possible missing comma found.
Context: ...ssion's ``` ## Usage After adding the dependency make sure you have this dependency in ...
Rule ID: AI_HYDRA_LEO_MISSING_COMMA
Markdownlint (23)
react/css/README.md (9)
89: Expected: 0 or 2; Actual: 1
Trailing spaces
91: Expected: 0 or 2; Actual: 1
Trailing spaces
42: Expected: 1; Actual: 0; Above
Headings should be surrounded by blank lines
87: Expected: 1; Actual: 0; Above
Headings should be surrounded by blank lines
91: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines
41: null
Fenced code blocks should be surrounded by blank lines
86: null
Fenced code blocks should be surrounded by blank lines
92: null
Bare URL used
96: null
Files should end with a single newline characterreact/ui-components/README.md (14)
43: Expected: 0 or 2; Actual: 1
Trailing spaces
95: Expected: 0 or 2; Actual: 1
Trailing spaces
57: Expected: 1; Actual: 2
Multiple consecutive blank lines
104: Expected: 1; Actual: 2
Multiple consecutive blank lines
105: Expected: 1; Actual: 3
Multiple consecutive blank lines
125: Expected: 1; Actual: 2
Multiple consecutive blank lines
144: Expected: 1; Actual: 2
Multiple consecutive blank lines
42: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines
98: null
Fenced code blocks should be surrounded by blank lines
112: null
Fenced code blocks should be surrounded by blank lines
116: null
Fenced code blocks should be surrounded by blank lines
118: null
Fenced code blocks should be surrounded by blank lines
128: null
Bare URL used
136: null
Bare URL used
Biome (53)
react/ui-components/src/atoms/Panels.js (12)
20-20: Do not use template literals if interpolation and special-character handling are not needed.
23-26: This else clause can be omitted because previous branches break early.
47-51: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
53-59: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
64-68: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
70-76: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
78-78: Do not use template literals if interpolation and special-character handling are not needed.
81-81: Do not use template literals if interpolation and special-character handling are not needed.
82-82: Do not use template literals if interpolation and special-character handling are not needed.
86-86: Do not use template literals if interpolation and special-character handling are not needed.
10-10: This let declares a variable that is only assigned once.
86-86: Missing key property for this element in iterable.
react/ui-components/src/atoms/PopUp.js (9)
77-80: This else clause can be omitted because previous branches break early.
184-188: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
34-34: This hook does not specify all of its dependencies: checkOverflow
34-34: This hook specifies more dependencies than necessary: props.children
51-51: This hook does not specify all of its dependencies: checkOverflow
51-51: This hook does not specify all of its dependencies: onResize
62-62: This let declares a variable that is only assigned once.
63-63: This let declares a variable that is only assigned once.
64-64: This let declares a variable that is only assigned once.
react/ui-components/src/hoc/stories/PopUp.stories.js (20)
106-112: Missing key property for this element in iterable.
113-119: Missing key property for this element in iterable.
123-129: Missing key property for this element in iterable.
133-139: Missing key property for this element in iterable.
140-146: Missing key property for this element in iterable.
147-153: Missing key property for this element in iterable.
154-160: Missing key property for this element in iterable.
161-167: Missing key property for this element in iterable.
168-174: Missing key property for this element in iterable.
178-178: Missing key property for this element in iterable.
179-183: Missing key property for this element in iterable.
187-187: Missing key property for this element in iterable.
188-192: Missing key property for this element in iterable.
193-197: Missing key property for this element in iterable.
198-202: Missing key property for this element in iterable.
203-207: Missing key property for this element in iterable.
208-212: Missing key property for this element in iterable.
213-217: Missing key property for this element in iterable.
218-222: Missing key property for this element in iterable.
223-227: Missing key property for this element in iterable.
react/ui-components/src/molecules/PanelCard.js (1)
56-56: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
react/ui-components/src/molecules/stories/PanelCard.stories.js (11)
92-98: Missing key property for this element in iterable.
99-105: Missing key property for this element in iterable.
109-115: Missing key property for this element in iterable.
119-125: Missing key property for this element in iterable.
126-132: Missing key property for this element in iterable.
133-139: Missing key property for this element in iterable.
140-146: Missing key property for this element in iterable.
147-153: Missing key property for this element in iterable.
154-160: Missing key property for this element in iterable.
164-167: Missing key property for this element in iterable.
171-174: Missing key property for this element in iterable.
Additional comments not posted (8)
react/ui-components/src/atoms/Animation.js (1)
4-20: The implementation of theAnimationcomponent usingreact-lottieis clean and follows best practices for optional prop handling.react/ui-components/src/molecules/index.js (1)
Line range hint
17-36: The addition ofPanelCardto the exports is correctly implemented and aligns with the PR's objectives to enhance the library with new components.react/css/src/digitv2/components/textblock.scss (1)
1-47: The CSS for theTextBlockcomponent is well-structured, making good use of modern CSS practices and responsive design techniques.react/ui-components/src/molecules/PanelCard.js (1)
1-95: ThePanelCardcomponent is well-implemented with responsive behavior and dynamic sorting of footer buttons. Good use of React hooks and conditional rendering.react/ui-components/src/hoc/stories/Panels.stories.js (2)
4-43: The Storybook configuration for thePanelscomponent is comprehensive and well-structured, effectively demonstrating the component's capabilities.
45-134: The stories for thePanelscomponent are well-implemented, showcasing various states and configurations effectively.react/ui-components/src/index.js (1)
233-233: New componentPanelCardadded to exports.This ensures that the
PanelCardcomponent is available for import in other parts of the application.react/css/src/digitv2/components/popUpV2.scss (1)
2-2: Styling updates to.digit-popup-wrapenhance the visual presentation and responsiveness.These changes ensure that the popup adapts to various screen sizes and maintains a consistent style across devices.
Also applies to: 4-4, 5-5, 6-6, 7-7
There was a problem hiding this comment.
Actionable comments posted: 6
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- react/ui-components/src/atoms/Panels.js (1 hunks)
- react/ui-components/src/atoms/PopUp.js (2 hunks)
Additional Context Used
Biome (12)
react/ui-components/src/atoms/Panels.js (6)
23-26: This else clause can be omitted because previous branches break early.
47-51: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
53-59: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
64-68: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
70-76: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
86-86: Missing key property for this element in iterable.
react/ui-components/src/atoms/PopUp.js (6)
77-80: This else clause can be omitted because previous branches break early.
184-188: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
34-34: This hook does not specify all of its dependencies: checkOverflow
34-34: This hook specifies more dependencies than necessary: props.children
51-51: This hook does not specify all of its dependencies: checkOverflow
51-51: This hook does not specify all of its dependencies: onResize
There was a problem hiding this comment.
Actionable comments posted: 7
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- react/css/src/digitv2/components/panelcard.scss (1 hunks)
- react/ui-components/src/atoms/Panels.js (1 hunks)
- react/ui-components/src/hoc/stories/Panels.stories.js (1 hunks)
- react/ui-components/src/molecules/PanelCard.js (1 hunks)
- react/ui-components/src/molecules/stories/PanelCard.stories.js (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- react/css/src/digitv2/components/panelcard.scss
- react/ui-components/src/hoc/stories/Panels.stories.js
Additional Context Used
Biome (26)
react/ui-components/src/atoms/Panels.js (10)
23-26: This else clause can be omitted because previous branches break early.
47-51: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
53-59: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
57-57: Unnecessary use of boolean literals in conditional expression.
58-58: Unnecessary use of boolean literals in conditional expression.
64-68: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
70-76: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
74-74: Unnecessary use of boolean literals in conditional expression.
75-75: Unnecessary use of boolean literals in conditional expression.
86-86: Missing key property for this element in iterable.
react/ui-components/src/molecules/PanelCard.js (5)
90-90: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
33-33: This hook does not specify all of its dependencies: checkOverflow
33-33: This hook specifies more dependencies than necessary: props.children
49-49: This hook does not specify all of its dependencies: checkOverflow
49-49: This hook does not specify all of its dependencies: onResize
react/ui-components/src/molecules/stories/PanelCard.stories.js (11)
95-101: Missing key property for this element in iterable.
102-108: Missing key property for this element in iterable.
112-118: Missing key property for this element in iterable.
122-128: Missing key property for this element in iterable.
129-135: Missing key property for this element in iterable.
136-142: Missing key property for this element in iterable.
143-149: Missing key property for this element in iterable.
150-156: Missing key property for this element in iterable.
157-163: Missing key property for this element in iterable.
167-171: Missing key property for this element in iterable.
175-179: Missing key property for this element in iterable.
No description provided.