feat: Add dark mode support to JigsawStackIcon#9013
Merged
Conversation
… mode state in JigsawStackIcon component
dosubot
Bot
added
the
size:XS
Contributor
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe Changes
Possibly related PRs
Suggested labels
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
github-actions
Bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/frontend/src/icons/JigsawStack/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
`src/frontend/**/*.{ts,tsx}`: Use React 18 with TypeScript for all UI components and frontend logic.
src/frontend/**/*.{ts,tsx}: Use React 18 with TypeScript for all UI components and frontend logic.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/JigsawStack/index.tsx
`src/frontend/**/*.{ts,tsx,js,jsx,css,scss}`: Use Tailwind CSS for styling all frontend components.
src/frontend/**/*.{ts,tsx,js,jsx,css,scss}: Use Tailwind CSS for styling all frontend components.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/JigsawStack/index.tsx
`src/frontend/src/icons/**/*.{ts,tsx,js,jsx}`: Use Lucide React for icons in frontend components.
src/frontend/src/icons/**/*.{ts,tsx,js,jsx}: Use Lucide React for icons in frontend components.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/JigsawStack/index.tsx
`src/frontend/src/icons/*/*`: Create a new directory for your icon in `src/front...
src/frontend/src/icons/*/*: Create a new directory for your icon insrc/frontend/src/icons/YourIconName/and add your SVG as a React component (e.g.,YourIconName.jsx) that uses theisdarkprop to support both light and dark mode.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/JigsawStack/index.tsx
`src/frontend/src/icons/*/index.tsx`: Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isdark` prop.
src/frontend/src/icons/*/index.tsx: Create anindex.tsxin your icon directory that exports your icon usingforwardRefand passes theisdarkprop.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/JigsawStack/index.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/*.jsx : Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG component.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Dark mode support should be implemented using a dedicated Zustand store (e.g., useDarkStore), and toggled via a custom hook (e.g., useDarkMode) that exposes isDark and toggle.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/* : Create a new directory for your icon in `src/frontend/src/icons/YourIconName/` and add your SVG as a React component (e.g., `YourIconName.jsx`) that uses the `isdark` prop to support both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Verify the icon appears correctly in the UI in both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: All changes must be tested in both light and dark mode before committing.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isdark` prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Use a utility like 'stringToBool' to reliably interpret the 'isdark' prop when toggling SVG colors for light/dark mode support.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: All changes must be tested in both light and dark mode to ensure consistent appearance and functionality.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in frontend components.
Learnt from: luisfucros
PR: langflow-ai/langflow#8940
File: src/frontend/src/icons/SambaNova/SambaNovaLogo.jsx:13-47
Timestamp: 2025-07-09T20:32:24.915Z
Learning: In the SambaNova icon component, only the white text paths should change based on theme (white in dark mode, black in light mode), while the colored gradient paths should remain unchanged to maintain brand consistency.
src/frontend/src/icons/JigsawStack/index.tsx (11)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/*.jsx : Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG component.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isdark` prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/* : Create a new directory for your icon in `src/frontend/src/icons/YourIconName/` and add your SVG as a React component (e.g., `YourIconName.jsx`) that uses the `isdark` prop to support both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Dark mode support should be implemented using a dedicated Zustand store (e.g., useDarkStore), and toggled via a custom hook (e.g., useDarkMode) that exposes isDark and toggle.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in frontend components.
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Use a utility like 'stringToBool' to reliably interpret the 'isdark' prop when toggling SVG colors for light/dark mode support.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Use Zustand for state management in React components within the frontend; stores should expose both state and setter functions, and be imported via hooks (e.g., useMyStore).
🧬 Code Graph Analysis (1)
src/frontend/src/icons/JigsawStack/index.tsx (2)
src/frontend/src/stores/darkStore.ts (1)
useDarkStore(7-53)src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx (1)
JigsawStackIconSVG(1-43)
🪛 Biome (1.9.4)
src/frontend/src/icons/JigsawStack/index.tsx
[error] 7-7: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: autofix
🔇 Additional comments (3)
src/frontend/src/icons/JigsawStack/index.tsx (3)
1-1: LGTM - Import follows established patternThe import statement correctly brings in the
useDarkStorehook for dark mode support.
7-7: Static analysis hint is a false positive - current type is correctThe static analysis tool suggests avoiding
{}as a type, butReact.PropsWithChildren<{}>is the established pattern used consistently across hundreds of icon files in this codebase, as confirmed by the retrieved learnings.
5-11: Overall architecture follows established patternsThe component correctly:
- Uses
forwardReffor proper ref forwarding- Follows the established prop type pattern
- Integrates with the dark mode store
- Passes the theme state to the child SVG component
mfortman11
requested changes
Jul 11, 2025
…nverted to a boolean before being used in the fill color logic
github-actions
Bot
added
enhancement
mfortman11
approved these changes
Jul 11, 2025
Contributor
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a small enhancement to the
JigsawStackIconcomponent by integrating a dark mode state from theuseDarkStore.src/frontend/src/icons/JigsawStack/index.tsx: AddeduseDarkStoreto retrieve thedarkstate and pass it as theisdarkprop toJigsawStackIconSVG.Summary by CodeRabbit