Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added Circular Progress #1488

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

dhavalveera
Copy link
Contributor

@dhavalveera dhavalveera commented Sep 15, 2024

Added Circular Progress component to flowbite-react for visualizing progress with circular markers. Enhances feedback with a clear and versatile progress display.

Summary by CodeRabbit

Release Notes

  • New Features

    • Introduced circular progress bar components with options for displaying progress values and text labels.
    • Enhanced documentation for implementing circular progress variations.
    • Added new examples for circular progress and circular progress with text.
  • Bug Fixes

    • Improved accessibility by ensuring unique identifiers for circular progress components.
  • Documentation

    • Expanded documentation to include detailed implementation guides for new circular progress features.
  • Style

    • Introduced a new theme configuration for circular progress indicators, enhancing visual customization options.

Copy link

changeset-bot bot commented Sep 15, 2024

⚠️ No Changeset found

Latest commit: 3b66c5f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Sep 15, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flowbite-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 7, 2024 9:07am
flowbite-react-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 7, 2024 9:07am

Copy link
Contributor

coderabbitai bot commented Sep 15, 2024

Walkthrough

The changes introduce new documentation and components for circular progress indicators in a UI library. Two new sections in the documentation detail the implementation of circular progress bars, including options for displaying text labels. New React components are created for circular progress and circular progress with text, along with corresponding exports. Additionally, updates to the existing progress component and theme configurations enhance the overall modularity and styling options for progress indicators.

Changes

File Path Change Summary
apps/web/content/docs/components/progress.mdx Added documentation for circular progress and circular progress with text, including usage examples.
apps/web/examples/progress/index.ts Added exports for circularProgress and circularProgressWithText.
apps/web/examples/progress/progress.circular.tsx Introduced CircularProgress component with fixed progress value and code examples for client/server rendering.
apps/web/examples/progress/progress.circularWithText.tsx Introduced CircularProgressWithText component with text label and code examples for client/server rendering.
packages/ui/src/components/Progress/CircularProgress.stories.tsx Added Storybook stories for CircularProgress and CircularProgressWithText.
packages/ui/src/components/Progress/Progress.tsx Updated FlowbiteProgressTheme to include a circular property; refactored main Progress component.
packages/ui/src/components/Progress/ProgressCircular.tsx Defined CircularProgress component with props for progress and labels, utilizing SVG for rendering.
packages/ui/src/components/Progress/theme.ts Added circular property in progressTheme for styling circular progress indicators.

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
Loading

🐰 In the garden where progress flows,
A circular dance, as the rabbit knows.
With labels bright and colors bold,
New tales of progress, joyfully told.
Hop along, dear friends, and see,
The magic of circularity! 🌼

Possibly related PRs

  • feat: add HR component #1346: The changes in this PR focus on the addition of a new HR component, which is unrelated to the circular progress functionality described in the main PR.

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
🪧 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Outside diff range and nitpick comments (2)
apps/web/examples/progress/progress.circular.tsx (1)

22-24: Consider accepting the progress value as a prop.

The Component function correctly uses the Progress.Circular component. However, to make it more reusable, consider accepting the progress value as a prop instead of using a fixed value.

Here's an example of how you can modify the Component function:

-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 textLabel and labelText props 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

Commits

Files that changed from the base of the PR and between 38913e5 and 61b6e73.

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 the progress prop 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 circularProgress from ./progress.circular is correctly implemented and aligns with the PR objective of introducing a Circular Progress component.


2-2: LGTM!

The export of circularProgressWithText from ./progress.circularWithText is 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 circularProgress object.


4-20: LGTM!

The code examples for client-side and server-side rendering are consistent with the Component function implementation.


26-42: LGTM!

The circularProgress object correctly follows the structure of the CodeData type and provides all the necessary metadata and rendering capabilities for the Component function.

apps/web/examples/progress/progress.circularWithText.tsx (4)

4-20: LGTM!

The code snippets provide clear examples of how to use the Progress.Circular component 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 Component function correctly wraps the Progress.Circular component and sets the progress value and text label. It serves as a reusable component for the code demo.


26-42: LGTM!

The circularProgressWithText constant correctly defines the CodeData structure 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 CodeData structure 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 CircularProgressBar story is appropriately set up using the template function, and the story name and arguments are properly defined.


25-31: LGTM!

The CircularProgressBarWithText story 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 circular property to the progressTheme object is a great enhancement to the Progress component. The structure of the circular property is consistent with the existing theme and provides comprehensive styling options for the circular progress indicator.

The use of the createTheme helper function ensures seamless integration with the existing codebase. The comprehensive styling attributes defined within the circular property 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 progress prop 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 the progress prop 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 circular property to the FlowbiteProgressTheme interface is necessary to accommodate circular progress styles and is correctly implemented.


Line range hint 43-89: LGTM!

The refactoring of the main Progress component into a ProgressComponent is 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 ProgressComponent is a good practice for clarity and debugging purposes. The display name is correctly assigned.


91-93: LGTM!

The modification of the Progress export to include the Circular component using Object.assign is a good approach to allow users to access both linear and circular progress components under the same namespace. The export modification is correctly implemented.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 progress prop 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 the progress prop 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

Commits

Files that changed from the base of the PR and between 61b6e73 and ff0487a.

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 the progress prop 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 textLabel and labelText props to set the label text and progress text respectively. The example effectively demonstrates the usage and enhances the documentation.

@dhavalveera
Copy link
Contributor Author

@SutuSebastian --- can you please review this PR, if you've time to?

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 circularProgress and circularProgressWithText are 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 Component function effectively demonstrates the usage of Progress.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 ProgressCircular for server-side rendering.

  1. 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.

  2. 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 textLabel prop that generates the label based on the current progress.

packages/ui/src/components/Progress/theme.ts (3)

29-30: LGTM: Clear base and bar styling

The base and bar properties 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-90 class 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 suggestion

The color scheme for the circular progress bar is well-defined and consistent with the existing theme. The use of stroke-current with Tailwind CSS color classes provides flexibility and easy customization.

Consider separating the bgColor property into light and dark mode colors for better consistency with the barColor approach:

-      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 accessibility

The 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-label or aria-labelledby attribute 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 progress prop 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 textLabel and labelText props.

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 Progress component to ProgressComponent is appropriate given the new export structure. However, to maintain consistency with React naming conventions, consider using PascalCase for the entire name.

Consider renaming ProgressComponent to ProgressLinear to 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.assign is a good approach for combining linear and circular progress components. However, there are a couple of improvements to consider:

  1. Update the displayName to match the new component name for consistency.
  2. 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 displayName matches the component name and adds type safety to the exported object.

packages/ui/src/components/Progress/ProgressCircular.tsx (2)

42-54: Validate progress prop to be within 0 to 100

To prevent unexpected behavior or rendering issues, consider adding validation to ensure that the progress prop is within the range of 0 to 100. This guards against invalid values that could affect the calculation of offset.

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 adding aria-valuemin and aria-valuemax

To improve accessibility, consider adding aria-valuemin="0" and aria-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

📥 Commits

Files that changed from the base of the PR and between ff0487a and 3b66c5f.

📒 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 Progress component from "flowbite-react" and the CodeData type 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 circularProgress object of type CodeData is 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 Progress from flowbite-react and the CodeData type are correctly defined and necessary for the component implementation.


26-42: LGTM: Metadata structure is appropriate. Verify GitHub slug.

The circularProgressWithText constant 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:

  1. The client-side uses Progress.Circular while the server-side uses ProgressCircular.
  2. 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 theme

The new circular property 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 FlowbiteCircularProgressTheme and CircularProgress are correctly added and necessary for implementing the circular progress feature.


17-17: LGTM: FlowbiteProgressTheme interface updated.

The addition of the circular property to the FlowbiteProgressTheme interface is consistent with the new circular progress feature and allows for proper theme customization.

Comment on lines +22 to +24
export function Component() {
return <Progress.Circular progress={45} />;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider parameterizing the progress value for better reusability.

The exported Component function correctly implements the circular progress component. However, the hardcoded progress value limits its reusability.

Consider modifying the component to accept a progress prop:

-export function Component() {
+export function Component({ progress = 45 }) {
-  return <Progress.Circular progress={45} />;
+  return <Progress.Circular progress={progress} />;
 }

This change would make the component more flexible and reusable across different contexts.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export function Component() {
return <Progress.Circular progress={45} />;
}
export function Component({ progress = 45 }) {
return <Progress.Circular progress={progress} />;
}

Comment on lines +22 to +24
export function Component() {
return <Progress.Circular progress={45} labelText textLabel="45%" />;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider making the Component more flexible.

The current implementation of the Component function uses hardcoded values for progress and textLabel. To improve reusability, consider accepting these as props:

-export function Component() {
+export function Component({ progress = 45, textLabel = "45%" }) {
-  return <Progress.Circular progress={45} labelText textLabel="45%" />;
+  return <Progress.Circular progress={progress} labelText textLabel={textLabel} />;
}

This change would allow users of the component to specify custom progress values and labels.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export function Component() {
return <Progress.Circular progress={45} labelText textLabel="45%" />;
}
export function Component({ progress = 45, textLabel = "45%" }) {
return <Progress.Circular progress={progress} labelText textLabel={textLabel} />;
}

Comment on lines +69 to +70
strokeDasharray="100"
strokeDashoffset={offset}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Set strokeDasharray to circumference for accurate progress rendering

Currently, strokeDasharray is set to "100", which does not correspond with the calculated circumference. This can result in incorrect rendering of the progress indicator. To ensure the progress is displayed correctly, set strokeDasharray to use the circumference value.

Apply this diff to fix the issue:

             strokeWidth="2"
-            strokeDasharray="100"
+            strokeDasharray={circumference}
             strokeDashoffset={offset}
             strokeLinecap="round"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
strokeDasharray="100"
strokeDashoffset={offset}
strokeWidth="2"
strokeDasharray={circumference}
strokeDashoffset={offset}
strokeLinecap="round"

color = "cyan",
labelText = false,
progress,
textLabel = "65%",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Default textLabel to reflect progress value

The textLabel currently defaults to "65%", which may not match the actual progress value provided. Consider defaulting textLabel to ${progress}% to ensure it accurately reflects the progress when no custom label is supplied.

Apply this diff to adjust the default:

   progress,
-  textLabel = "65%",
+  textLabel = `${progress}%`,
   theme: customTheme = {},

Alternatively, you may calculate textLabel within the component:

   theme: customTheme = {},
   ...props
 }) => {
+  const displayTextLabel = textLabel ?? `${progress}%`;

And update the usage in the JSX:

-              {textLabel}
+              {displayTextLabel}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
textLabel = "65%",
progress,
textLabel = `${progress}%`,
theme: customTheme = {},

Comment on lines +31 to +36
export interface CircularProgressProps extends ComponentProps<"div"> {
labelText?: boolean;
progress: number;
textLabel?: string;
theme?: DeepPartial<FlowbiteCircularProgressTheme>;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add and type the color prop in CircularProgressProps interface

The color prop is used in the component but is not declared in the CircularProgressProps interface. This omission can lead to lack of TypeScript type checking and may cause confusion about which color values are acceptable.

Apply this diff to include and type the color prop:

 export interface CircularProgressProps extends ComponentProps<"div"> {
   labelText?: boolean;
   progress: number;
   textLabel?: string;
   theme?: DeepPartial<FlowbiteCircularProgressTheme>;
+  color?: keyof CircularProgressColor;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export interface CircularProgressProps extends ComponentProps<"div"> {
labelText?: boolean;
progress: number;
textLabel?: string;
theme?: DeepPartial<FlowbiteCircularProgressTheme>;
}
export interface CircularProgressProps extends ComponentProps<"div"> {
labelText?: boolean;
progress: number;
textLabel?: string;
theme?: DeepPartial<FlowbiteCircularProgressTheme>;
color?: keyof CircularProgressColor;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant