feat: connect storybook with figma #1303
Conversation
WalkthroughThis pull request standardizes string delimiters and component variants across the project. It updates Storybook configuration by switching to single quotes and adds a new Storybook addon. The Button component is enhanced with a new optional icon prop, and its variants are reworked, while the Badge component variants are streamlined. Several views throughout the web application have their components switched from a specialized BrandButton to the generic Button component, along with prop and template adjustments. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Storybook
participant Button
User->>Storybook: Open "ButtonLeftIcon" story
Storybook->>Button: Render Button with icon (ArrowDownTrayIcon)
Button->>Storybook: Display Button with icon
sequenceDiagram
participant User
participant Storybook
participant Button
User->>Storybook: Open "ButtonIcon" story
Storybook->>Button: Render icon-only Button (RocketLaunchIcon)
Button->>Storybook: Display icon-only Button
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🪧 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: 1
🧹 Nitpick comments (1)
unraid-ui/src/components/common/button/Button.vue (1)
10-10: New icon prop added to ButtonProps interface.The addition of an optional
iconprop typed asanyallows for flexibility but might benefit from a more specific type definition for better type safety.Consider defining a more specific type for the icon prop:
- icon?: any; + icon?: Component | FunctionalComponent;You'll need to add the appropriate import:
+import { Component, FunctionalComponent } from 'vue';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (20)
unraid-ui/.storybook/main.ts(2 hunks)unraid-ui/package.json(1 hunks)unraid-ui/src/components/brand/BrandButton.vue(4 hunks)unraid-ui/src/components/brand/brand-button.variants.ts(1 hunks)unraid-ui/src/components/common/badge/badge.variants.ts(1 hunks)unraid-ui/src/components/common/button/Button.vue(2 hunks)unraid-ui/src/components/common/button/button.variants.ts(1 hunks)unraid-ui/stories/components/common/Badge.stories.ts(3 hunks)unraid-ui/stories/components/common/Button.stories.ts(3 hunks)web/components/Activation/Modal.vue(5 hunks)web/components/Auth.ce.vue(2 hunks)web/components/ConnectSettings/AllowedOrigins.vue(2 hunks)web/components/ConnectSettings/ConnectSettings.ce.vue(2 hunks)web/components/DownloadApiLogs.ce.vue(2 hunks)web/components/KeyActions.vue(2 hunks)web/components/Registration.ce.vue(2 hunks)web/components/Registration/KeyLinkedStatus.vue(3 hunks)web/components/SsoButton.ce.vue(2 hunks)web/components/WelcomeModal.ce.vue(2 hunks)web/pages/index.vue(4 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
unraid-ui/src/components/brand/brand-button.variants.ts (2)
unraid-ui/src/index.ts (1)
brandButtonVariants(86-86)unraid-ui/src/components/brand/index.ts (1)
brandButtonVariants(2-2)
unraid-ui/src/components/common/button/button.variants.ts (2)
unraid-ui/src/index.ts (1)
buttonVariants(92-92)unraid-ui/src/components/common/button/index.ts (1)
buttonVariants(2-2)
🪛 GitHub Check: Build Web App
web/pages/index.vue
[failure] 3-3:
'buttonVariants' is defined but never used. Allowed unused vars must match /^_/u
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build API
- GitHub Check: Cloudflare Pages
🔇 Additional comments (53)
unraid-ui/package.json (1)
59-59: Addition of Storybook Design addon for Figma integrationThis is a good addition that enables connecting Storybook with Figma, allowing you to embed Figma designs alongside your components in Storybook.
web/components/Auth.ce.vue (2)
3-7: Import reorganization looks goodThe imports are properly organized, with clear separation between external libraries and internal modules.
22-31: Button component replacement enhances consistencyGood migration from BrandButton to Button with appropriate variant. The change to use slot content instead of a text prop is a better practice in Vue components.
unraid-ui/.storybook/main.ts (3)
1-10: String delimiter standardization and addon additionThe change from double quotes to single quotes is consistent with standardization efforts. The addition of the Storybook design addon enables Figma integration.
11-23: Consistent string delimiter updatesThe string delimiters have been consistently updated to single quotes throughout the configuration, which improves code style consistency.
49-49: Export format standardizationExport statement now uses single quotes, maintaining consistency with the rest of the file.
web/components/ConnectSettings/AllowedOrigins.vue (2)
2-2: Component import updateThe import has been updated to use Button instead of BrandButton, which aligns with the standardization efforts across the codebase.
45-45: Button component migration with appropriate variantGood migration from BrandButton to Button with the secondary variant. The button content is now provided as a slot rather than a text prop, which follows Vue best practices.
unraid-ui/src/components/common/button/Button.vue (1)
25-25: Icon rendering properly implemented.The conditional rendering of the icon component with appropriate sizing classes works well for the button enhancement.
web/components/ConnectSettings/ConnectSettings.ce.vue (2)
8-8: Import statement updated to include Button component.The import has been correctly updated to include the
Buttoncomponent from@unraid/ui.
122-130: BrandButton replaced with Button component.The component has been appropriately migrated from
BrandButtontoButtonwith updated props. The variant was changed fromoutline-primarytooutline-brandand size from12pxtomd.web/components/DownloadApiLogs.ce.vue (2)
2-5: Updated imports to use Button component.The import statements have been correctly modified to use the new
Buttoncomponent instead ofBrandButton.
30-39: BrandButton replaced with Button and updated props.The component has been properly migrated from
BrandButtontoButtonwith variant set to "brand" and size to "md". The button text is now correctly rendered inside the component tags rather than as a text prop.web/components/Registration.ce.vue (2)
22-22: Updated import to use Button component.The import statement has been properly updated to include the
Buttoncomponent from@unraid/ui.
290-298: BrandButton replaced with Button component.The component has been correctly migrated from
BrandButtontoButtonwith appropriate props. The button text is now properly rendered inside the component tags rather than as a text prop, consistent with the other changes in this PR.web/components/KeyActions.vue (2)
5-5: Updated import from BrandButton to ButtonThe import has been updated to use the
Buttoncomponent from@unraid/uiinstead ofBrandButton, aligning with the standardization efforts across the project.
50-62: Button component replaced BrandButton with improved content renderingThe specialized
BrandButtoncomponent has been replaced with the more genericButtoncomponent, and the text content is now rendered using a slot instead of the:textprop. This approach follows modern component design patterns where content is preferred in slots rather than props for better flexibility.web/components/SsoButton.ce.vue (2)
2-2: Updated import from BrandButton to ButtonThe import has been updated to use the
Buttoncomponent from@unraid/uiinstead ofBrandButton, matching similar changes throughout the codebase.
141-147: Button component replaced BrandButtonThe component has been updated from
BrandButtontoButtonwhile maintaining all the same props and functionality. This change ensures consistency in button usage across the application.unraid-ui/stories/components/common/Badge.stories.ts (2)
1-2: Standardized string delimiters to single quotesString delimiters have been standardized from double quotes to single quotes throughout the file, creating consistency with other files in the project.
Also applies to: 5-5, 15-19
20-25: Added Figma design integrationAdded parameters with Figma design URL, establishing a direct connection between the Storybook component and its Figma design source. This enhances the development experience by making design references easily accessible to developers.
unraid-ui/src/components/brand/BrandButton.vue (4)
3-4: Reordered import statementsImport statements have been rearranged for better organization, separating the Vue import from the local imports.
46-49: Improved code formatting for readabilityThe
cnfunction call in theclassescomputed property has been formatted across multiple lines, improving readability without changing functionality.
80-80: Condensed component rendering conditionalThe component rendering for the icon has been condensed to a single line, making the code more compact without affecting functionality.
90-91: Improved conditional class formattingThe conditional class assignment for
iconRighthas been reformatted across two lines for better readability, maintaining the same functionality.unraid-ui/src/components/brand/brand-button.variants.ts (6)
1-1: Standardized import statement with single quotesThe import statement has been updated to use single quotes instead of double quotes, improving consistency with other files in the project.
8-24: Consistent string format and improved styling definitionsThe variant definitions have been standardized to use single quotes consistently. This improves code readability and maintains style consistency across the codebase.
27-32: Modernized size definitions with Tailwind classesSize definitions have been updated from pixel-specific values to Tailwind's responsive utility classes (e.g., 'text-xs', 'text-sm'). This approach improves maintainability and consistency with the design system.
35-37: Standardized padding definitionsPadding definitions have been updated to use single quotes for consistency with the rest of the file.
42-70: Updated compound variants for consistent string formatCompound variants have been updated to use single quotes, maintaining format consistency throughout the component definition.
73-75: Standardized default variantsDefault variants have been updated to use single quotes, completing the string format standardization throughout the file.
web/components/WelcomeModal.ce.vue (2)
5-5: Component replacement: BrandButton → ButtonThe import statement has been updated to use the generic
Buttoncomponent instead of the specializedBrandButtoncomponent. This change supports standardization of button usage across the application.
102-102: Updated button implementationThe button has been updated to use the new component structure:
- Changed from
BrandButtontoButtonwith a 'brand' variant- Modified from using a text prop to using slot content
This change maintains the same functionality while following the new component pattern.
web/components/Registration/KeyLinkedStatus.vue (4)
5-5: Updated import statement for Button componentThe import statement has been updated to use the
Buttoncomponent instead ofBrandButton, aligning with the application-wide standardization of button components.
23-39: Component replacement and variant updateThe button implementation has been changed from
BrandButtontoButtonwith the appropriate 'link' variant. The component structure has also been updated to use content slots instead of thetextprop.
45-57: Updated first button in flex containerThe first button in the flex container has been updated to use the new
Buttoncomponent with 'link' variant and content passed via slot instead of thetextprop.
58-68: Updated second button in flex containerThe second button in the flex container has been updated to the new
Buttoncomponent with 'link' variant and content passed via slot. This change maintains consistency with the updated button component usage pattern.unraid-ui/src/components/common/button/button.variants.ts (3)
1-1: Enhanced type imports for better type safetyThe import statement has been updated to explicitly import the
VariantPropstype, improving type safety and code clarity.
4-4: Improved base button stylingThe base button styling has been enhanced with:
- Added
gap-2for consistent spacing between icon and text- Added
whitespace-nowrapto prevent text wrapping- Updated font size from
text-basetotext-smfor better UI consistencyThese changes improve the default appearance and behavior of buttons throughout the application.
8-12: Completely reworked button variantsThe button variants have been significantly redesigned:
primary: Now uses a gradient background with opacity transitions for hover/focus statessecondary: Enhanced with border styling and complex hover effects including color transitionslink: Simplified to use black text with underline on hoverThe removal of variants like 'destructive', 'outline', and 'ghost' suggests a more focused and streamlined design system.
web/components/Activation/Modal.vue (5)
5-7: Updated Button component import and types to align with UI standardization.The changes from BrandButton to Button are consistent with the broader effort to standardize button implementation across the application.
27-27: String delimiter standardization looks good.Changing to template literals with backticks improves consistency with the project's coding style.
30-49: Button variant updates are correctly implemented.The changes from 'underline' to 'link' variant and from '14px' to 'md' size align with the new Button component's variant system. This ensures consistent button styling throughout the application.
111-113: Button component implementation correctly uses slot content.The migration from BrandButton to Button is well implemented, properly using the icon prop and slot content for the button text.
122-122: Button component with v-for implementation is correct.The update properly binds all button properties while iterating through the docsButtons array.
unraid-ui/stories/components/common/Button.stories.ts (4)
1-9: Storybook configuration updates align with Figma integration.The changes to the title structure and addition of 'autodocs' tag improve the Storybook documentation. The import updates are also correctly implemented.
17-20: String delimiter standardization in button arguments.Changing to single quotes improves consistency with the project's standardization efforts.
38-61: New ButtonLeftIcon story showcases the icon prop functionality.This story correctly demonstrates how to use the new icon prop with the Button component. The implementation follows the same pattern as the base Button story.
63-84: New ButtonIcon story for icon-only button implementation.This story correctly demonstrates how to create an icon-only button using the 'icon' size variant. The implementation is consistent with the other button stories.
web/pages/index.vue (3)
83-93: Button variant array updated to match new component variants.The new
displayableButtonVariantsarray correctly defines the available button variants for the updated Button component.
165-168: Button component with external link properly implemented.The update from BrandButton to Button maintains the same functionality while using the standardized component.
176-180: Button variant display implementation updated correctly.The implementation now uses the new displayableButtonVariants array and properly includes the icon prop with the ExclamationTriangleIcon.
unraid-ui/src/components/common/badge/badge.variants.ts (1)
17-22: Badge size variants updated to use Tailwind utility classes.The change from pixel-based sizing (
text-12px, etc.) to Tailwind's relative sizing (text-xs, etc.) improves consistency and maintainability. The padding and gap values have also been appropriately adjusted to match the new size system.
mdatelle
force-pushed
the
feat/connect-storybook-with-figma
branch
from
932ac21 to
d06ec6f
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
unraid-ui/src/components/common/button/button.variants.ts (2)
10-11: Remove duplicated hover classes in secondary variant.The secondary variant has duplicated hover classes which should be removed.
- 'text-orange bg-transparent border-orange border-2 hover:text-white focus:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange hover:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange transition-[background,color,opacity] duration-300 ease-in-out rounded-md hover:opacity-100 focus:opacity-100', + 'text-orange bg-transparent border-orange border-2 hover:text-white focus:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange transition-[background,color,opacity] duration-300 ease-in-out rounded-md hover:opacity-100 focus:opacity-100',
12-12: Consider dark mode compatibility for link variant.The link variant uses
text-blackwhich may not be visible in dark mode. Consider using a color that works in both light and dark modes or implement a dark mode alternative.- link: 'text-black underline-offset-4 hover:underline', + link: 'text-foreground underline-offset-4 hover:underline',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (20)
unraid-ui/.storybook/main.ts(2 hunks)unraid-ui/package.json(1 hunks)unraid-ui/src/components/brand/BrandButton.vue(4 hunks)unraid-ui/src/components/brand/brand-button.variants.ts(1 hunks)unraid-ui/src/components/common/badge/badge.variants.ts(1 hunks)unraid-ui/src/components/common/button/Button.vue(2 hunks)unraid-ui/src/components/common/button/button.variants.ts(1 hunks)unraid-ui/stories/components/common/Badge.stories.ts(3 hunks)unraid-ui/stories/components/common/Button.stories.ts(3 hunks)web/components/Activation/Modal.vue(5 hunks)web/components/Auth.ce.vue(2 hunks)web/components/ConnectSettings/AllowedOrigins.vue(2 hunks)web/components/ConnectSettings/ConnectSettings.ce.vue(2 hunks)web/components/DownloadApiLogs.ce.vue(2 hunks)web/components/KeyActions.vue(2 hunks)web/components/Registration.ce.vue(2 hunks)web/components/Registration/KeyLinkedStatus.vue(3 hunks)web/components/SsoButton.ce.vue(2 hunks)web/components/WelcomeModal.ce.vue(2 hunks)web/pages/index.vue(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (18)
- unraid-ui/.storybook/main.ts
- web/components/Auth.ce.vue
- web/components/ConnectSettings/ConnectSettings.ce.vue
- unraid-ui/src/components/common/button/Button.vue
- web/components/Registration.ce.vue
- web/components/SsoButton.ce.vue
- unraid-ui/src/components/brand/BrandButton.vue
- unraid-ui/package.json
- web/components/DownloadApiLogs.ce.vue
- unraid-ui/stories/components/common/Badge.stories.ts
- unraid-ui/src/components/brand/brand-button.variants.ts
- web/components/ConnectSettings/AllowedOrigins.vue
- web/components/KeyActions.vue
- web/components/WelcomeModal.ce.vue
- web/components/Registration/KeyLinkedStatus.vue
- unraid-ui/stories/components/common/Button.stories.ts
- web/components/Activation/Modal.vue
- unraid-ui/src/components/common/badge/badge.variants.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (5)
unraid-ui/src/components/common/button/button.variants.ts (3)
1-1: Good TypeScript practice.Explicitly importing
type VariantPropsmakes it clear that you're importing a type rather than a value, which improves code readability.
4-4: Button base styles improved.The addition of
gap-2andwhitespace-nowrapclasses improves the button's appearance. Gap ensures consistent spacing between icon and text, while whitespace-nowrap prevents awkward text wrapping.
28-28: Good export of ButtonVariants type.Exporting the
ButtonVariantstype makes it available to other components, enabling better type checking and developer experience.web/pages/index.vue (2)
177-179: Good use of icon prop.The Button component now uses the icon prop which aligns with the updated component design. This is consistent with the changes made to the button's base styles which include
gap-2for proper spacing between icon and text.
165-167: Good transition from BrandButton to Button.Successfully replaced the specialized BrandButton with the generic Button component, aligning with the PR objectives.
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
|
@mdatelle if you rebase this I'll throw you a review today! |
|
@mdatelle what's the plan w/ this PR? |
Summary by CodeRabbit
New Features
Refactor
Chores