feat(components): add "Device Mockups" #1410
Conversation
🦋 Changeset detectedLatest commit: 6e1c6e0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe recent changes introduce customizable themes for various mockup components in the Changes
Poem
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 Configuration File (
|
SutuSebastian
changed the title
coderabbitai
bot
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (27)
- .changeset/spicy-eels-press.md (1 hunks)
- apps/web/components/mdx.tsx (1 hunks)
- apps/web/content/docs/components/device-mockups.mdx (1 hunks)
- apps/web/data/docs-sidebar.ts (1 hunks)
- apps/web/examples/index.ts (1 hunks)
- apps/web/examples/mockup/index.ts (1 hunks)
- apps/web/examples/mockup/mockup.colors.tsx (1 hunks)
- apps/web/examples/mockup/mockup.desktop.tsx (1 hunks)
- apps/web/examples/mockup/mockup.googlePixel.tsx (1 hunks)
- apps/web/examples/mockup/mockup.iPhone12.tsx (1 hunks)
- apps/web/examples/mockup/mockup.laptop.tsx (1 hunks)
- apps/web/examples/mockup/mockup.root.tsx (1 hunks)
- apps/web/examples/mockup/mockup.smartwatch.tsx (1 hunks)
- apps/web/examples/mockup/mockup.tablet.tsx (1 hunks)
- packages/ui/src/components/Flowbite/FlowbiteTheme.ts (2 hunks)
- packages/ui/src/components/Mockup/DefaultMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/DesktopMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/GooglePixelMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/IPhone12Mockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/LaptopMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/Mockup.stories.tsx (1 hunks)
- packages/ui/src/components/Mockup/SmartwatchMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/TabletMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/index.ts (1 hunks)
- packages/ui/src/components/Mockup/theme.ts (1 hunks)
- packages/ui/src/index.ts (1 hunks)
- packages/ui/src/theme.ts (4 hunks)
Files skipped from review due to trivial changes (5)
- apps/web/content/docs/components/device-mockups.mdx
- apps/web/data/docs-sidebar.ts
- apps/web/examples/index.ts
- apps/web/examples/mockup/index.ts
- packages/ui/src/components/Mockup/index.ts
Additional Context Used
Biome (17)
apps/web/components/mdx.tsx (2)
68-68: Unexpected any. Specify a different type.
69-69: Change to an optional chain.
apps/web/examples/mockup/mockup.colors.tsx (1)
2-3: All these imports are only used as types.
apps/web/examples/mockup/mockup.desktop.tsx (1)
1-2: All these imports are only used as types.
apps/web/examples/mockup/mockup.googlePixel.tsx (1)
1-2: All these imports are only used as types.
apps/web/examples/mockup/mockup.iPhone12.tsx (1)
1-2: All these imports are only used as types.
apps/web/examples/mockup/mockup.laptop.tsx (1)
1-2: All these imports are only used as types.
apps/web/examples/mockup/mockup.root.tsx (1)
1-2: All these imports are only used as types.
apps/web/examples/mockup/mockup.smartwatch.tsx (1)
1-2: All these imports are only used as types.
apps/web/examples/mockup/mockup.tablet.tsx (1)
1-2: All these imports are only used as types.
packages/ui/src/components/Mockup/DefaultMockup.tsx (1)
1-1: All these imports are only used as types.
packages/ui/src/components/Mockup/DesktopMockup.tsx (1)
1-1: All these imports are only used as types.
packages/ui/src/components/Mockup/GooglePixelMockup.tsx (1)
1-1: All these imports are only used as types.
packages/ui/src/components/Mockup/IPhone12Mockup.tsx (1)
1-1: All these imports are only used as types.
packages/ui/src/components/Mockup/LaptopMockup.tsx (1)
1-1: All these imports are only used as types.
packages/ui/src/components/Mockup/SmartwatchMockup.tsx (1)
1-1: All these imports are only used as types.
packages/ui/src/components/Mockup/TabletMockup.tsx (1)
1-1: All these imports are only used as types.
Additional comments not posted (33)
.changeset/spicy-eels-press.md (1)
5-5: The changeset description is clear and concise.packages/ui/src/components/Mockup/DesktopMockup.tsx (1)
11-23: The implementation ofDesktopMockupis clean and follows best practices for prop spreading and default parameters.packages/ui/src/components/Mockup/LaptopMockup.tsx (1)
11-24: TheLaptopMockupcomponent is well-implemented with clear prop spreading and default parameter usage.packages/ui/src/components/Mockup/SmartwatchMockup.tsx (1)
11-25: The structure ofSmartwatchMockupis robust, utilizing best practices for React component development.packages/ui/src/components/Mockup/TabletMockup.tsx (1)
12-24:TabletMockupis implemented effectively, adhering to React best practices and clean code principles.packages/ui/src/components/Mockup/IPhone12Mockup.tsx (1)
12-24: TheIPhone12Mockupcomponent is well-crafted, demonstrating good practices in React component design.packages/ui/src/components/Mockup/DefaultMockup.tsx (1)
8-24: The implementation ofDefaultMockuplooks clean and follows best practices for theme customization and class merging.packages/ui/src/components/Mockup/GooglePixelMockup.tsx (1)
8-25: TheGooglePixelMockupcomponent is well-implemented, with attention to device-specific details like the notch.packages/ui/src/index.ts (1)
27-27: The export of theMockupcomponent is correctly added, enabling its use in external projects.apps/web/examples/mockup/mockup.root.tsx (1)
4-81: The example usage ofDefaultMockupis well-documented and effectively demonstrates the component's capabilities in different themes.apps/web/examples/mockup/mockup.iPhone12.tsx (1)
4-81: The example usage ofIPhone12Mockupis well-documented and effectively demonstrates the component's capabilities in different themes.apps/web/examples/mockup/mockup.tablet.tsx (1)
4-81: The example usage ofTabletMockupis well-documented and effectively demonstrates the component's capabilities in different themes.apps/web/examples/mockup/mockup.googlePixel.tsx (2)
4-81: The JSX code for the Google Pixel mockup is well-structured and clear.
48-63: The component definition for displaying the Google Pixel mockup is correctly implemented.apps/web/examples/mockup/mockup.smartwatch.tsx (3)
4-81: The JSX code for the Smartwatch mockup is well-structured and clear.
48-63: The component definition for displaying the Smartwatch mockup is correctly implemented.
1-2: Ensure imports are correctly used as types if they are not instantiated.Verification successful
Ensure imports are correctly used as types if they are not instantiated.
The
SmartwatchMockupimport is instantiated in the JSX, andCodeDatais used as a type. Therefore, the imports are correctly used.
SmartwatchMockupis used in JSX elements.CodeDatais used as a type.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the imports in `mockup.smartwatch.tsx` are used as types only. # Test: Search for non-type usage of imports. Expect: No occurrences. rg --type tsx --files-with-matches 'SmartwatchMockup|CodeData' apps/web/examples/mockup/mockup.smartwatch.tsxLength of output: 139
Script:
#!/bin/bash # Description: Verify that the imports in `mockup.smartwatch.tsx` are used as types only. # Test: Search for non-type usage of imports. Expect: No occurrences. rg 'SmartwatchMockup|CodeData' apps/web/examples/mockup/mockup.smartwatch.tsxLength of output: 365
apps/web/examples/mockup/mockup.laptop.tsx (2)
4-81: The JSX code for the Laptop mockup is well-structured and clear.
48-63: The component definition for displaying the Laptop mockup is correctly implemented.apps/web/examples/mockup/mockup.desktop.tsx (2)
4-81: The JSX code for the Desktop mockup is well-structured and clear.
48-63: The component definition for displaying the Desktop mockup is correctly implemented.apps/web/components/mdx.tsx (2)
Line range hint
1-11: The imports inmdx.tsxare correctly used and structured.
71-71: TheMdxfunction is correctly implemented to render MDX components dynamically.apps/web/examples/mockup/mockup.colors.tsx (3)
5-84: The JSX code for the Colors mockup is well-structured and clear, with appropriate theme customization.
51-66: The component definition for displaying the Colors mockup with theme customization is correctly implemented.
1-3: Ensure imports are correctly used as types if they are not instantiated.packages/ui/src/theme.ts (2)
71-71: Integration ofmockupThemeinto the main theme object is correctly implemented.
25-25: Ensure that themockupThemeimport path is correct and consistent with the project structure.Verification successful
The import path for
mockupThemeis correct, and it is properly used within the theme object.
packages/ui/src/theme.ts: The import path and usage ofmockupThemeare verified and correct.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the import path for `mockupTheme`. # Test: Check if the file exists at the specified path. Expect: File exists. if [ -f "packages/ui/src/components/Mockup/theme.ts" ]; then echo "The import path for mockupTheme is correct." else echo "The import path for mockupTheme is incorrect." fiLength of output: 152
Script:
#!/bin/bash # Description: Verify the usage of `mockupTheme` within the theme object. # Test: Check if `mockupTheme` is used in the theme object in `packages/ui/src/theme.ts`. rg 'mockupTheme' packages/ui/src/theme.tsLength of output: 121
packages/ui/src/components/Mockup/Mockup.stories.tsx (2)
12-14: Story configuration for Mockup components is correctly set up in Storybook.
16-28: All mockup stories are correctly implemented, showcasing various device mockups with appropriate images and classes.Also applies to: 31-43, 46-58, 61-73, 76-88, 91-103, 106-118, 121-133
packages/ui/src/components/Flowbite/FlowbiteTheme.ts (2)
73-73: Integration ofFlowbiteMockupThemeinto theFlowbiteThemeinterface is correctly implemented.
25-25: Ensure that theFlowbiteMockupThemeimport path is correct and consistent with the project structure.packages/ui/src/components/Mockup/theme.ts (1)
3-12: All mockup themes are defined with appropriate styles and properties, ensuring a consistent and visually appealing presentation across different devices.Also applies to: 14-23, 25-35, 37-46, 48-56, 58-65, 67-79, 81-89
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (7)
- packages/ui/src/components/Mockup/DefaultMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/DesktopMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/GooglePixelMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/IPhone12Mockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/LaptopMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/SmartwatchMockup.tsx (1 hunks)
- packages/ui/src/components/Mockup/TabletMockup.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (7)
- packages/ui/src/components/Mockup/DefaultMockup.tsx
- packages/ui/src/components/Mockup/DesktopMockup.tsx
- packages/ui/src/components/Mockup/GooglePixelMockup.tsx
- packages/ui/src/components/Mockup/IPhone12Mockup.tsx
- packages/ui/src/components/Mockup/LaptopMockup.tsx
- packages/ui/src/components/Mockup/SmartwatchMockup.tsx
- packages/ui/src/components/Mockup/TabletMockup.tsx
SutuSebastian
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- apps/web/examples/mockup/mockup.desktop.tsx (1 hunks)
- apps/web/examples/mockup/mockup.googlePixel.tsx (1 hunks)
- apps/web/examples/mockup/mockup.laptop.tsx (1 hunks)
- apps/web/examples/mockup/mockup.smartwatch.tsx (1 hunks)
- apps/web/examples/mockup/mockup.tablet.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (5)
- apps/web/examples/mockup/mockup.desktop.tsx
- apps/web/examples/mockup/mockup.googlePixel.tsx
- apps/web/examples/mockup/mockup.laptop.tsx
- apps/web/examples/mockup/mockup.smartwatch.tsx
- apps/web/examples/mockup/mockup.tablet.tsx
fix(storybook): example
…torybook examples
1 participant
Changes
flowbite-reactResult
Summary by CodeRabbit
New Features
DefaultMockup,DesktopMockup,GooglePixelMockup,IPhone12Mockup,LaptopMockup, andSmartwatchMockup.Documentation