feat: added Circular Progress #1488
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes introduce a new React functional component, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant CircularProgress
participant Theme
User->>UI: Request Circular Progress
UI->>CircularProgress: Render with props
CircularProgress->>Theme: Apply circular styles
CircularProgress-->>UI: Return rendered component
UI-->>User: Display Circular Progress
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/ui/src/components/Progress/ProgressCircular.tsxOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/packages/ui".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in "packages/ui/.eslintrc.cjs". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration 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: 0
Outside diff range and nitpick comments (2)
apps/web/examples/progress/progress.circular.tsx (1)
22-24: Consider accepting theprogressvalue as a prop.The
Componentfunction correctly uses theProgress.Circularcomponent. However, to make it more reusable, consider accepting theprogressvalue as a prop instead of using a fixed value.Here's an example of how you can modify the
Componentfunction:-export function Component() { +export function Component({ progress }: { progress: number }) { - return <Progress.Circular progress={45} />; + return <Progress.Circular progress={progress} />; }apps/web/content/docs/components/progress.mdx (1)
52-56: LGTM!The new section "Circular Progress With Text" provides a clear explanation of how to use the
textLabelandlabelTextprops to add labels to a circular progress bar. The example component is correctly referenced.Consider adding a comma after "React" in the following sentence for better readability:
-Use this Circular progress example to show a progress bar where you can set the progress rate using the `progress` prop from React which should be a number from 1 to 100. +Use this Circular progress example to show a progress bar where you can set the progress rate using the `progress` prop from React, which should be a number from 1 to 100.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (8)
- apps/web/content/docs/components/progress.mdx (1 hunks)
- apps/web/examples/progress/index.ts (1 hunks)
- apps/web/examples/progress/progress.circular.tsx (1 hunks)
- apps/web/examples/progress/progress.circularWithText.tsx (1 hunks)
- packages/ui/src/components/Progress/CircularProgress.stories.tsx (1 hunks)
- packages/ui/src/components/Progress/Progress.tsx (3 hunks)
- packages/ui/src/components/Progress/ProgressCircular.tsx (1 hunks)
- packages/ui/src/components/Progress/theme.ts (1 hunks)
Additional context used
LanguageTool
apps/web/content/docs/components/progress.mdx
[uncategorized] ~48-~48: Possible missing comma found.
Context: ...ess rate using theprogressprop from React which should be a number from 1 to 100....(AI_HYDRA_LEO_MISSING_COMMA)
Additional comments not posted (21)
apps/web/examples/progress/index.ts (2)
1-1: LGTM!The export of
circularProgressfrom./progress.circularis correctly implemented and aligns with the PR objective of introducing a Circular Progress component.
2-2: LGTM!The export of
circularProgressWithTextfrom./progress.circularWithTextis correctly implemented and aligns with the PR objective of introducing a Circular Progress component with text labels.apps/web/examples/progress/progress.circular.tsx (3)
1-3: LGTM!The imports are correctly used for the component and the exported
circularProgressobject.
4-20: LGTM!The code examples for client-side and server-side rendering are consistent with the
Componentfunction implementation.
26-42: LGTM!The
circularProgressobject correctly follows the structure of theCodeDatatype and provides all the necessary metadata and rendering capabilities for theComponentfunction.apps/web/examples/progress/progress.circularWithText.tsx (4)
4-20: LGTM!The code snippets provide clear examples of how to use the
Progress.Circularcomponent for both client-side and server-side rendering. The snippets demonstrate the correct usage of the component with a progress value and a text label.
22-24: LGTM!The
Componentfunction correctly wraps theProgress.Circularcomponent and sets the progress value and text label. It serves as a reusable component for the code demo.
26-42: LGTM!The
circularProgressWithTextconstant correctly defines theCodeDatastructure for the circular progress component. It includes the necessary code snippets, GitHub reference, and the actual component for seamless integration into the code demo.
1-42: Excellent work!The file introduces a new React component for displaying a circular progress indicator with a text label. The code is well-structured, and the usage of the
CodeDatastructure allows for easy integration and demonstration of the component. The provided code snippets cover both client-side and server-side rendering, making it versatile for different use cases.Overall, the file is a great addition to the project and enhances the available progress visualization options.
packages/ui/src/components/Progress/CircularProgress.stories.tsx (4)
1-4: LGTM!The imports are correctly defined and follow the proper syntax. The imported types and component are used in the subsequent code.
5-15: LGTM!The default export is correctly defined and follows the proper syntax. The metadata properties are appropriately set, and the decorator is a valid function that wraps the stories in a flex container for layout purposes.
17-23: LGTM!The template function is correctly defined and follows the proper syntax. The
CircularProgressBarstory is appropriately set up using the template function, and the story name and arguments are properly defined.
25-31: LGTM!The
CircularProgressBarWithTextstory is appropriately set up using the template function. The story name and arguments are properly defined, and the story enhances the circular progress bar by including a text label.packages/ui/src/components/Progress/theme.ts (1)
28-66: LGTM!The addition of the
circularproperty to theprogressThemeobject is a great enhancement to the Progress component. The structure of thecircularproperty is consistent with the existing theme and provides comprehensive styling options for the circular progress indicator.The use of the
createThemehelper function ensures seamless integration with the existing codebase. The comprehensive styling attributes defined within thecircularproperty allow for a more versatile and visually appealing representation of the circular progress indicator.Overall, these changes enhance the visual customization options for the progress component and improve the user experience.
apps/web/content/docs/components/progress.mdx (1)
46-50: LGTM!The new section "Circular Progress" provides a clear explanation of how to use the
progressprop to set the progress rate for a circular progress bar. The example component is correctly referenced.Tools
LanguageTool
[uncategorized] ~48-~48: Possible missing comma found.
Context: ...ess rate using theprogressprop from React which should be a number from 1 to 100....(AI_HYDRA_LEO_MISSING_COMMA)
packages/ui/src/components/Progress/ProgressCircular.tsx (1)
1-88: Excellent work on the CircularProgress component!The implementation of the CircularProgress component is well-structured, follows best practices, and provides a highly customizable and accessible way to display circular progress indicators in the UI. Here are some key highlights:
- The use of TypeScript interfaces ensures type safety and improves code readability.
- The component is highly customizable through the use of props and theme merging, allowing developers to easily adapt it to their specific needs.
- The SVG-based implementation allows for smooth rendering and easy customization of the progress indicator.
- The component is accessible, using appropriate ARIA attributes and linking the progress bar to its label, enhancing the user experience for all users.
Overall, this is a well-implemented and valuable addition to the component library. Great job!
packages/ui/src/components/Progress/Progress.tsx (5)
8-9: LGTM!The imports are necessary to integrate the circular progress functionality and are correctly implemented.
17-17: LGTM!The addition of the
circularproperty to theFlowbiteProgressThemeinterface is necessary to accommodate circular progress styles and is correctly implemented.
Line range hint
43-89: LGTM!The refactoring of the main
Progresscomponent into aProgressComponentis a good approach to enhance the modularity and usability of the progress components. The refactored component retains the original functionality and is correctly implemented.
89-89: LGTM!Assigning a display name to the
ProgressComponentis a good practice for clarity and debugging purposes. The display name is correctly assigned.
91-93: LGTM!The modification of the
Progressexport to include theCircularcomponent usingObject.assignis a good approach to allow users to access both linear and circular progress components under the same namespace. The export modification is correctly implemented.
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
apps/web/content/docs/components/progress.mdx (1)
46-50: Excellent addition to the documentation!The new "Circular Progress" section provides clear instructions on using the
progressprop to set the progress rate. The example enhances the documentation by demonstrating the usage.To improve readability, consider adding a comma after "React" in the following sentence:
-Use this Circular progress example to show a progress bar where you can set the progress rate using the `progress` prop from React which should be a number from 1 to 100. +Use this Circular progress example to show a progress bar where you can set the progress rate using the `progress` prop from React, which should be a number from 1 to 100.Tools
LanguageTool
[uncategorized] ~48-~48: Possible missing comma found.
Context: ...ess rate using theprogressprop from React which should be a number from 1 to 100....(AI_HYDRA_LEO_MISSING_COMMA)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/web/content/docs/components/progress.mdx (1 hunks)
Additional context used
LanguageTool
apps/web/content/docs/components/progress.mdx
[uncategorized] ~48-~48: Possible missing comma found.
Context: ...ess rate using theprogressprop from React which should be a number from 1 to 100....(AI_HYDRA_LEO_MISSING_COMMA)
Additional comments not posted (1)
apps/web/content/docs/components/progress.mdx (1)
52-56: Great job documenting the circular progress with text!The new "Circular Progress With Text" section clearly explains how to use the
textLabelandlabelTextprops to set the label text and progress text respectively. The example effectively demonstrates the usage and enhances the documentation.
|
@SutuSebastian --- can you please review this PR, if you've time to? |
SutuSebastian
force-pushed
the
feat/circular-progress
branch
from
fb1d1a3
to
3b66c5f
Compare
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (15)
apps/web/examples/progress/index.ts (1)
1-2: LGTM! Consider reordering exports alphabetically.The new exports for
circularProgressandcircularProgressWithTextare correctly implemented and align with the PR objectives to add a Circular Progress feature. The naming conventions are consistent with the existing codebase.For better maintainability, consider reordering all exports alphabetically. This would place the new exports in the following order:
export { circularProgress } from "./progress.circular"; export { circularProgressWithText } from "./progress.circularWithText"; export { colors } from "./progress.colors"; export { positioning } from "./progress.positioning"; export { root } from "./progress.root"; export { sizing } from "./progress.sizing"; export { withLabels } from "./progress.withLabels";apps/web/examples/progress/progress.circular.tsx (2)
4-12: LGTM: Client-side code snippet is well-structured. Consider parameterizing the progress value.The client-side code snippet is correctly structured with the "use client" directive and proper imports. The
Componentfunction effectively demonstrates the usage ofProgress.Circular.Consider parameterizing the progress value to make the component more reusable:
export function Component() { - return <Progress.Circular progress={45} />; + return <Progress.Circular progress={props.progress} />; }
14-20: LGTM: Server-side code snippet is correct. Note the naming difference and consider parameterization.The server-side code snippet correctly demonstrates the usage of
ProgressCircularfor server-side rendering.
Note that the component name differs between client-side (
Progress.Circular) and server-side (ProgressCircular). This is likely intentional due to the different rendering contexts, but it's worth highlighting for clarity.As with the client-side snippet, consider parameterizing the progress value for increased flexibility:
export function Component() { - return <ProgressCircular progress={45} />; + return <ProgressCircular progress={props.progress} />; }packages/ui/src/components/Progress/CircularProgress.stories.tsx (3)
1-3: Consider aligning file and import names for consistency.The CircularProgress component is imported from a file named "ProgressCircular". This might lead to confusion. Consider renaming either the import source or the file to maintain consistency.
17-23: LGTM: Well-defined template and story.The CircularTemplate and CircularProgressBar story are correctly implemented.
Consider adding more props to showcase different configurations of the CircularProgress component, such as size or color variations if supported.
25-31: LGTM: Well-defined story with text display.The CircularProgressBarWithText story is correctly implemented with appropriate props for text display.
Consider adding a story that demonstrates dynamic text generation based on the progress value. This could be achieved by passing a function to the
textLabelprop that generates the label based on the current progress.packages/ui/src/components/Progress/theme.ts (3)
29-30: LGTM: Clear base and bar stylingThe
baseandbarproperties are well-defined for the circular progress component. The use of Tailwind CSS utility classes (size-40,size-full) provides a concise way to set dimensions.Consider adding a comment explaining the purpose of the
-rotate-90class for better clarity:base: "relative size-40", -bar: "size-full -rotate-90", +bar: "size-full -rotate-90", // Rotate to start progress at 12 o'clock position
31-47: LGTM: Comprehensive color scheme with a minor suggestionThe color scheme for the circular progress bar is well-defined and consistent with the existing theme. The use of
stroke-currentwith Tailwind CSS color classes provides flexibility and easy customization.Consider separating the
bgColorproperty into light and dark mode colors for better consistency with thebarColorapproach:- bgColor: "stroke-current text-gray-200 dark:text-neutral-700", + bgColor: { + light: "stroke-current text-gray-200", + dark: "stroke-current text-neutral-700", + },This change would allow for more granular control over the background color in different color modes.
48-65: LGTM: Well-structured label styling with a suggestion for accessibilityThe label styling for the circular progress component is comprehensive and well-structured. The positioning technique ensures the label is centered within the circular progress bar, and the color scheme is consistent with the bar colors.
Consider adding an
aria-labeloraria-labelledbyattribute to improve accessibility for screen readers. This could be added to the base component and referenced here:base: "absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", -text: "text-center text-2xl font-bold", +text: "text-center text-2xl font-bold aria-label[Progress percentage]",This addition would provide context for users relying on assistive technologies.
apps/web/content/docs/components/progress.mdx (2)
46-50: LGTM! Consider adding a brief description of use cases.The new section for Circular Progress is well-structured and consistent with the existing documentation. The explanation of the
progressprop is clear and accurate.To enhance the documentation further, consider adding a brief description of common use cases for circular progress bars. This could help developers understand when to choose this component over a linear progress bar.
52-56: LGTM! Minor suggestion for title consistency.The new section for Circular Progress With Text is well-structured and provides clear information on using the
textLabelandlabelTextprops.For consistency with other section titles in the document, consider changing the title to "Circular progress with text" (lowercase "progress" and "with").
packages/ui/src/components/Progress/Progress.tsx (2)
43-43: LGTM: Component renamed to ProgressComponent.The renaming of the
Progresscomponent toProgressComponentis appropriate given the new export structure. However, to maintain consistency with React naming conventions, consider using PascalCase for the entire name.Consider renaming
ProgressComponenttoProgressLinearto clearly distinguish it from the circular variant and maintain PascalCase convention:-const ProgressComponent: FC<ProgressProps> = ({ +const ProgressLinear: FC<ProgressProps> = ({
89-93: Update displayName and consider TypeScript improvements.The new export structure using
Object.assignis a good approach for combining linear and circular progress components. However, there are a couple of improvements to consider:
- Update the
displayNameto match the new component name for consistency.- Consider using TypeScript's satisfies operator to ensure type safety for the exported object.
Apply the following changes:
-ProgressComponent.displayName = "Progress"; +ProgressLinear.displayName = "ProgressLinear"; -export const Progress = Object.assign(ProgressComponent, { +export const Progress = Object.assign(ProgressLinear, { Circular: CircularProgress, -}); +}) satisfies typeof ProgressLinear & { + Circular: typeof CircularProgress; +};This change ensures that the
displayNamematches the component name and adds type safety to the exported object.packages/ui/src/components/Progress/ProgressCircular.tsx (2)
42-54: Validateprogressprop to be within 0 to 100To prevent unexpected behavior or rendering issues, consider adding validation to ensure that the
progressprop is within the range of 0 to 100. This guards against invalid values that could affect the calculation ofoffset.You could add validation like:
progress, textLabel = `${progress}%`, theme: customTheme = {}, ...props }) => { + const safeProgress = Math.min(100, Math.max(0, progress)); const id = useId(); const theme = mergeDeep(getTheme().progress.circular, customTheme); // Calculate the circumference of the Circle const circumference = 2 * Math.PI * 16; // Calculate the stroke-dashoffset - const offset = circumference * (1 - progress / 100); + const offset = circumference * (1 - safeProgress / 100);
57-57: Enhance accessibility by addingaria-valueminandaria-valuemaxTo improve accessibility, consider adding
aria-valuemin="0"andaria-valuemax="100"to the progress bar div. This explicitly defines the progress range for assistive technologies.Apply this diff:
return ( <div id={id} aria-valuenow={progress} + aria-valuemin="0" + aria-valuemax="100" role="progressbar" {...props} > <div className={twMerge(theme.base, className)}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
- apps/web/content/docs/components/progress.mdx (1 hunks)
- apps/web/examples/progress/index.ts (1 hunks)
- apps/web/examples/progress/progress.circular.tsx (1 hunks)
- apps/web/examples/progress/progress.circularWithText.tsx (1 hunks)
- packages/ui/src/components/Progress/CircularProgress.stories.tsx (1 hunks)
- packages/ui/src/components/Progress/Progress.tsx (3 hunks)
- packages/ui/src/components/Progress/ProgressCircular.tsx (1 hunks)
- packages/ui/src/components/Progress/theme.ts (1 hunks)
🧰 Additional context used
🔇 Additional comments (11)
apps/web/examples/progress/progress.circular.tsx (2)
1-2: LGTM: Imports are appropriate and well-structured.The imports are correctly defined, using named imports which is a good practice. The
Progresscomponent from "flowbite-react" and theCodeDatatype from a local path are imported, setting up the file for proper component creation and type usage.
26-42: LGTM: The circularProgress object is well-structured and informative.The exported
circularProgressobject of typeCodeDatais well-organized and provides comprehensive information about the component. It includes:
- Separate code snippets for client and server-side rendering
- A GitHub slug for easy reference
- The actual component for rendering
This structure is helpful for documentation and usage examples.
packages/ui/src/components/Progress/CircularProgress.stories.tsx (2)
5-15: LGTM: Well-structured Storybook configuration.The default export is well-configured with an appropriate title and component. The decorator for wrapping stories in a flex container is a good practice for consistent styling.
1-31: Overall: Well-implemented Storybook stories for CircularProgress component.The file is well-structured and correctly implements Storybook stories for the CircularProgress component. It provides good coverage of component variations and follows Storybook best practices. The suggested minor improvements, if implemented, would further enhance the stories' usefulness for development and documentation purposes.
apps/web/examples/progress/progress.circularWithText.tsx (3)
1-2: LGTM: Imports are appropriate.The imports for
Progressfrom flowbite-react and theCodeDatatype are correctly defined and necessary for the component implementation.
26-42: LGTM: Metadata structure is appropriate. Verify GitHub slug.The
circularProgressWithTextconstant is well-structured and includes necessary metadata for the component. The code snippets for both client and server-side rendering are correctly referenced.Please verify that the GitHub slug
"progress/progress.circularWithText.tsx"is correct and matches the actual file location in the repository. You can use the following script to check:#!/bin/bash # Description: Verify the existence of the file referenced in the GitHub slug # Check if the file exists if [ -f "progress/progress.circularWithText.tsx" ]; then echo "File exists at the specified path." else echo "File not found at the specified path. Please check the GitHub slug." # Search for similar file names echo "Similar files found:" fd -e tsx -e ts "progress.*circular.*with.*text" fi
4-20: Verify the differences between client and server-side implementations.The code snippets for client and server-side rendering have some differences:
- The client-side uses
Progress.Circularwhile the server-side usesProgressCircular.- The import statements differ: client-side imports from "flowbite-react", while server-side imports specifically
ProgressCircular.Please ensure these differences are intentional and consistent with the library's API for server-side rendering.
To verify the correct usage, you can run the following script:
packages/ui/src/components/Progress/theme.ts (1)
28-66: LGTM: Well-structured circular progress themeThe new
circularproperty is well-organized and follows the existing pattern in the file. It provides a comprehensive set of styling options for the circular progress component, including base layout, bar styling, color schemes, and label formatting.apps/web/content/docs/components/progress.mdx (1)
46-57: Great addition of circular progress documentation!The new sections for Circular Progress and Circular Progress With Text are valuable additions to the documentation. They provide clear instructions on how to use these new components, maintaining consistency with the existing documentation structure.
These additions will help developers understand and implement circular progress indicators in their projects, expanding the versatility of the progress bar component in the Flowbite React library.
packages/ui/src/components/Progress/Progress.tsx (2)
8-9: LGTM: New imports for circular progress feature.The new imports for
FlowbiteCircularProgressThemeandCircularProgressare correctly added and necessary for implementing the circular progress feature.
17-17: LGTM: FlowbiteProgressTheme interface updated.The addition of the
circularproperty to theFlowbiteProgressThemeinterface is consistent with the new circular progress feature and allows for proper theme customization.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
packages/ui/src/components/Progress/ProgressCircular.tsx (1)
61-61: Enhance accessibility by addingaria-valueminandaria-valuemaxattributesIncluding
aria-valueminandaria-valuemaxattributes improves accessibility by providing assistive technologies with the progress bar's minimum and maximum values.Apply this diff to add the attributes:
return ( - <div id={id} aria-valuenow={progress} role="progressbar" {...props}> + <div + id={id} + aria-valuenow={progress} + aria-valuemin="0" + aria-valuemax="100" + role="progressbar" + {...props} + >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
packages/ui/src/components/Progress/ProgressCircular.tsx(1 hunks)
🔇 Additional comments (2)
packages/ui/src/components/Progress/ProgressCircular.tsx (2)
44-44: Default textLabel to reflect progress value
The textLabel currently defaults to "65%", which may not match the actual progress value. Consider defaulting textLabel to ${progress}% to ensure it accurately reflects the progress when no custom label is provided.
73-74: Set strokeDasharray to circumference for accurate progress rendering
strokeDasharray is currently set to "100", which may not correspond with the calculated circumference. Use the circumference value to ensure correct rendering of the progress indicator.
|
@SutuSebastian -- I've added |
Added Circular Progress component to
flowbite-reactfor visualizing progress with circular markers. Enhances feedback with a clear and versatile progress display.Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Documentation