SW-1431: Refactor code structure and enhance theme management across components#45
Open
owilliams-tetrascience wants to merge 29 commits intomainfrom
Open
SW-1431: Refactor code structure and enhance theme management across components#45owilliams-tetrascience wants to merge 29 commits intomainfrom
owilliams-tetrascience wants to merge 29 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…oved readability, maintainability, and build times
- Implemented CodeEditor component with support for multiple languages and themes. - Added SCSS styling for CodeEditor. - Created stories for CodeEditor showcasing various use cases including default, light mode, and interactive examples. - Introduced TDPLink component for navigation with context provider and utility functions for constructing TDP URLs. - Updated existing stories for AlertDialog, Dialog, Drawer, and Sheet to enhance documentation parameters. - Refactored index.ts to include new components and removed unused exports. - Adjusted tsconfig.json to remove isolatedModules setting.
- Implemented a new hook `usePlotlyTheme` to manage Plotly theme colors based on the document's dark mode class. - Removed the old CSS file `index.css` and replaced it with a more modular approach. - Updated component imports in `index.ts` to reflect new paths. - Deleted unused `main.tsx` and SCSS files to streamline the codebase. - Adjusted Tailwind CSS variables for dark mode to improve color contrast. - Removed the old theme provider and related types to simplify theming. - Cleaned up TypeScript configuration by removing obsolete path aliases.
- Changed appPreviewBg color in the dark theme from #11183D to #212948. - Introduced a new story for ComponentExample showcasing various UI components. - Removed the old ComponentExample implementation. - Updated TdpSearch styles to use new color variables and removed unnecessary font-family declarations. - Refactored TdpSearchServer story to align with new design tokens. - Deleted unused example and chart components. - Removed global styles from index.scss and adjusted index.ts exports for better organization. - Updated tailwind.css to use oklch color values for improved color management.
…omponent consistency
owilliams-tetrascience
force-pushed
the
feat/chacn
branch
from
be7ec76 to
29170af
Compare
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
…le files - Added missing imports for components in various story files. - Moved imports to maintain consistency and readability in component files. - Removed redundant imports and ensured proper usage of React and utility functions. - Updated state initialization in the useIsMobile hook for better clarity. - Adjusted Vite configuration for improved plugin management.
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
There was a problem hiding this comment.
Pull request overview
This PR migrates the UI kit from legacy custom components/styles to a shadcn/ui + Lucide-based component system, while updating Storybook theming and moving charts toward theme-aware rendering.
Changes:
- Replaced many legacy atoms/molecules (and associated SCSS/assets) with shadcn/ui components and
lucide-reacticons. - Updated Storybook configuration to support light/dark theme synchronization and new story organization.
- Introduced theme-aware Plotly helpers (
usePlotlyTheme) across chart components.
Reviewed changes
Copilot reviewed 246 out of 450 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/molecules/ProtocolConfiguration/ProtocolConfiguration.scss | Removed legacy SCSS styling for ProtocolConfiguration molecule. |
| src/components/molecules/Navbar/Navbar.scss | Removed legacy Navbar SCSS styling. |
| src/components/molecules/Menu/index.ts | Removed legacy Menu barrel export. |
| src/components/molecules/Menu/Menu.tsx | Removed legacy styled-components Menu implementation. |
| src/components/molecules/Menu/Menu.scss | Removed legacy Menu SCSS styling. |
| src/components/molecules/LaunchContent/LaunchContent.scss | Removed legacy LaunchContent SCSS styling. |
| src/components/molecules/FormField/index.ts | Removed legacy FormField barrel export. |
| src/components/molecules/FormField/FormField.tsx | Removed legacy FormField implementation. |
| src/components/molecules/FormField/FormField.scss | Removed legacy FormField SCSS styling. |
| src/components/molecules/CodeScriptEditorButton/CodeScriptEditorButton.scss | Removed legacy CodeScriptEditorButton SCSS styling. |
| src/components/molecules/CardSidebar/index.ts | Removed legacy CardSidebar barrel export. |
| src/components/molecules/CardSidebar/CardSidebar.scss | Removed legacy CardSidebar SCSS styling. |
| src/components/molecules/ButtonControlGroup/index.ts | Removed legacy ButtonControlGroup barrel export. |
| src/components/molecules/ButtonControlGroup/ButtonControlGroup.tsx | Removed legacy ButtonControlGroup implementation. |
| src/components/molecules/ButtonControlGroup/ButtonControlGroup.scss | Removed legacy ButtonControlGroup SCSS styling. |
| src/components/molecules/AssistantModal/AssistantModal.scss | Removed legacy AssistantModal SCSS styling. |
| src/components/composed/tdp-url.test.ts | Updated test import to new tdp-url module path. |
| src/components/composed/tdp-link.tsx | Updated imports/types to new tdp-url module path. |
| src/components/composed/tdp-link.stories.tsx | Updated story import path and Storybook title. |
| src/components/composed/TdpSearch/types.ts | Replaced DropdownOption usage with inline option shape. |
| src/components/composed/TdpSearch/components/DefaultSearchBar.tsx | Added new default search bar using shadcn Input/Button and lucide icon. |
| src/components/composed/TdpSearch/components/DefaultFilters.tsx | Added new default filter row using shadcn Select components. |
| src/components/composed/TdpSearch/TdpSearchStandalone.stories.tsx | Updated Storybook title grouping. |
| src/components/composed/TdpSearch/TdpSearchServer.stories.tsx | Updated Storybook title and moved styling to semantic tokens. |
| src/components/composed/TdpSearch/TdpSearch.tsx | Replaced legacy ErrorAlert with shadcn Alert + lucide icons. |
| src/components/composed/TdpSearch/TdpSearch.scss | Updated styling to use semantic theme tokens and removed legacy font/color rules. |
| src/components/composed/Sidebar/index.ts | Added composed Sidebar barrel export (renaming default export to AppSidebar). |
| src/components/composed/Sidebar/Sidebar.tsx | Migrated icons from custom Icon to lucide icon component type. |
| src/components/composed/Sidebar/Sidebar.stories.tsx | Updated Sidebar story to use lucide icons + new title + renamed component. |
| src/components/composed/PythonEditorModal/PythonEditorModal.tsx | Migrated modal UI from legacy Modal to shadcn Dialog parts + shadcn CodeEditor/Button. |
| src/components/composed/PythonEditorModal/PythonEditorModal.stories.tsx | Updated story to wrap modal in Dialog and use shadcn Button. |
| src/components/composed/ProtocolYamlCard/ProtocolYamlCard.tsx | Migrated UI controls to shadcn Select/Switch/Button/Label and shadcn CodeEditor. |
| src/components/composed/ProtocolYamlCard/ProtocolYamlCard.stories.tsx | Updated story title and option typings. |
| src/components/composed/ProtocolConfiguration/ProtocolConfiguration.stories.tsx | Updated story title grouping. |
| src/components/composed/Navbar/Navbar.tsx | Migrated icons from custom Icon to lucide icons. |
| src/components/composed/Navbar/Navbar.stories.tsx | Updated story title grouping. |
| src/components/composed/Main/ProtocolConfigurationPanel.tsx | Added new ProtocolConfigurationPanel using shadcn Card/Switch/Button. |
| src/components/composed/Main/MainTabBar.tsx | Added new MainTabBar using shadcn Tabs components. |
| src/components/composed/Main/MainSidebar.tsx | Added new MainSidebar using shadcn Sidebar primitives. |
| src/components/composed/Main/MainNavbar.tsx | Added new MainNavbar using lucide icons and styled-components layout. |
| src/components/composed/Main/MainHeader.tsx | Added new MainHeader using shadcn Avatar/Button for header actions. |
| src/components/composed/Main/Main.stories.tsx | Updated story title grouping. |
| src/components/composed/Main/Main.scss | Removed legacy background/border colors in layout styles. |
| src/components/composed/LaunchContent/LaunchContent.stories.tsx | Updated story title grouping. |
| src/components/composed/CodeScriptEditorButton/CodeScriptEditorButton.tsx | Migrated modal implementation from legacy Modal to shadcn Dialog. |
| src/components/composed/CodeScriptEditorButton/CodeScriptEditorButton.stories.tsx | Updated story title grouping and parameters. |
| src/components/composed/AssistantModal/AssistantModal.stories.tsx | Updated story to use shadcn Dialog/Button wrappers. |
| src/components/composed/AppLayout/AppLayout.tsx | Migrated sidebar icons to lucide and swapped Sidebar import to composed AppSidebar. |
| src/components/composed/AppLayout/AppLayout.stories.tsx | Updated LineGraph import path and story title grouping. |
| src/components/composed/AppLayout/AppLayout.scss | Removed legacy background/border colors. |
| src/components/composed/AppHeader/AppHeader.tsx | Added new AppHeader using shadcn Avatar/Button/Separator. |
| src/components/composed/AppHeader/AppHeader.stories.tsx | Updated story title grouping. |
| src/components/composed/AppHeader/AppHeader.scss | Removed legacy header border/background colors. |
| src/components/charts/ScatterGraph/ScatterGraph.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/PlateMap/PlateMap.tsx | Added theme-aware Plotly rendering via usePlotlyTheme. |
| src/components/charts/PlateMap/PlateMap.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/PlateMap/PlateMap.scss | Removed legacy container background wrapper styles. |
| src/components/charts/PieChart/PieChart.tsx | Added theme-aware Plotly rendering and import path aliasing. |
| src/components/charts/PieChart/PieChart.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/PieChart/PieChart.scss | Removed legacy card container/typography colors. |
| src/components/charts/LineGraph/LineGraph.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/Histogram/Histogram.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/Histogram/Histogram.scss | Removed legacy container colors; retained typography tokens. |
| src/components/charts/Heatmap/Heatmap.stories.tsx | Moved deprecated chart story under Charts grouping. |
| src/components/charts/DotPlot/DotPlot.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/ChromatogramChart/ChromatogramChart.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/Chromatogram/Chromatogram.tsx | Added theme-aware Plotly rendering and updated base-color logic. |
| src/components/charts/Chromatogram/Chromatogram.stories.tsx | Moved chart stories under Charts grouping and removed explicit sizing args. |
| src/components/charts/Chromatogram/Chromatogram.scss | Removed legacy background/border colors; adjusted sizing. |
| src/components/charts/Boxplot/Boxplot.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/BarGraph/BarGraph.stories.tsx | Moved chart stories under Charts grouping. |
| src/components/charts/AreaGraph/AreaGraph.stories.tsx | Normalized chart story title casing and grouping. |
| src/components/atoms/Tooltip/index.ts | Removed legacy Tooltip barrel export. |
| src/components/atoms/Tooltip/Tooltip.stories.tsx | Removed legacy Tooltip stories. |
| src/components/atoms/Tooltip/Tooltip.scss | Removed legacy Tooltip SCSS styling. |
| src/components/atoms/Toggle/index.ts | Removed legacy Toggle barrel export. |
| src/components/atoms/Toggle/Toggle.tsx | Removed legacy Toggle implementation. |
| src/components/atoms/Toggle/Toggle.stories.tsx | Removed legacy Toggle stories. |
| src/components/atoms/Toggle/Toggle.scss | Removed legacy Toggle SCSS styling. |
| src/components/atoms/Toast/index.ts | Removed legacy Toast barrel export. |
| src/components/atoms/Toast/Toast.stories.tsx | Removed legacy Toast stories. |
| src/components/atoms/Toast/Toast.scss | Removed legacy Toast SCSS styling. |
| src/components/atoms/Textarea/index.ts | Removed legacy Textarea barrel export. |
| src/components/atoms/Textarea/Textarea.tsx | Removed legacy Textarea implementation. |
| src/components/atoms/Textarea/Textarea.stories.tsx | Removed legacy Textarea stories. |
| src/components/atoms/Textarea/Textarea.scss | Removed legacy Textarea SCSS styling. |
| src/components/atoms/TableHeaderCell/index.ts | Removed legacy TableHeaderCell barrel export. |
| src/components/atoms/TableCell/index.ts | Removed legacy TableCell barrel export. |
| src/components/atoms/TableCell/TableCell.tsx | Removed legacy TableCell implementation. |
| src/components/atoms/TableCell/TableCell.stories.tsx | Removed legacy TableCell stories. |
| src/components/atoms/Tab/index.ts | Removed legacy Tab barrel export. |
| src/components/atoms/Tab/Tab.tsx | Removed legacy Tab implementation. |
| src/components/atoms/Tab/Tab.stories.tsx | Removed legacy Tab stories. |
| src/components/atoms/Tab/Tab.scss | Removed legacy Tab SCSS styling. |
| src/components/atoms/TDPLink/index.ts | Removed legacy TDPLink barrel export. |
| src/components/atoms/SupportiveText/index.ts | Removed legacy SupportiveText barrel export. |
| src/components/atoms/SupportiveText/SupportiveText.tsx | Removed legacy SupportiveText implementation. |
| src/components/atoms/SupportiveText/SupportiveText.stories.tsx | Removed legacy SupportiveText stories. |
| src/components/atoms/SupportiveText/SupportiveText.scss | Removed legacy SupportiveText SCSS styling. |
| src/components/atoms/PopConfirm/index.ts | Removed legacy PopConfirm barrel export. |
| src/components/atoms/Modal/index.ts | Removed legacy Modal barrel export. |
| src/components/atoms/MenuItem/index.ts | Removed legacy MenuItem barrel export. |
| src/components/atoms/MenuItem/MenuItem.tsx | Removed legacy MenuItem implementation. |
| src/components/atoms/MenuItem/MenuItem.scss | Removed legacy MenuItem SCSS styling. |
| src/components/atoms/MarkdownDisplay/index.ts | Removed legacy MarkdownDisplay barrel export. |
| src/components/atoms/MarkdownDisplay/MarkdownDisplay.stories.tsx | Removed legacy MarkdownDisplay stories. |
| src/components/atoms/MarkdownDisplay/MarkdownDisplay.scss | Removed legacy MarkdownDisplay SCSS styling. |
| src/components/atoms/Label/index.ts | Removed legacy Label barrel export. |
| src/components/atoms/Label/Label.tsx | Removed legacy Label implementation. |
| src/components/atoms/Label/Label.stories.tsx | Removed legacy Label stories. |
| src/components/atoms/Label/Label.scss | Removed legacy Label SCSS styling. |
| src/components/atoms/Input/index.ts | Removed legacy Input barrel export. |
| src/components/atoms/Input/Input.scss | Removed legacy Input SCSS styling. |
| src/components/atoms/Icon/index.ts | Removed legacy Icon barrel export. |
| src/components/atoms/Icon/Icon.stories.tsx | Removed legacy Icon stories. |
| src/components/atoms/ErrorAlert/index.ts | Removed legacy ErrorAlert barrel export. |
| src/components/atoms/ErrorAlert/ErrorAlert.scss | Removed legacy ErrorAlert SCSS styling. |
| src/components/atoms/Dropdown/index.ts | Removed legacy Dropdown barrel export. |
| src/components/atoms/CodeEditor/index.ts | Removed legacy CodeEditor barrel export. |
| src/components/atoms/Checkbox/index.ts | Removed legacy Checkbox barrel export. |
| src/components/atoms/Checkbox/Checkbox.tsx | Removed legacy Checkbox implementation. |
| src/components/atoms/Checkbox/Checkbox.scss | Removed legacy Checkbox SCSS styling. |
| src/components/atoms/Card/index.ts | Removed legacy Card barrel export. |
| src/components/atoms/Card/Card.tsx | Removed legacy Card implementation. |
| src/components/atoms/Card/Card.scss | Removed legacy Card SCSS styling. |
| src/components/atoms/ButtonControl/index.ts | Removed legacy ButtonControl barrel export. |
| src/components/atoms/ButtonControl/ButtonControl.tsx | Removed legacy ButtonControl implementation. |
| src/components/atoms/ButtonControl/ButtonControl.stories.tsx | Removed legacy ButtonControl stories. |
| src/components/atoms/ButtonControl/ButtonControl.scss | Removed legacy ButtonControl SCSS styling. |
| src/components/atoms/Button/index.ts | Removed legacy Button barrel export. |
| src/components/atoms/Button/Button.scss | Removed legacy Button SCSS styling. |
| src/components/atoms/Badge/index.ts | Removed legacy Badge barrel export. |
| src/components/atoms/Badge/Badge.tsx | Removed legacy Badge implementation. |
| src/components/atoms/Badge/Badge.scss | Removed legacy Badge SCSS styling. |
| src/assets/icon/ViewfinderCircle.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Trash.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Text.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Sitemap.tsx | Removed legacy SVG icon component. |
| src/assets/icon/SearchSQL.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Search.tsx | Removed legacy SVG icon component. |
| src/assets/icon/RocketLaunch.tsx | Removed legacy SVG icon component. |
| src/assets/icon/QuestionCircle.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Profile.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Plus.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Pipeline.tsx | Removed legacy SVG icon component. |
| src/assets/icon/PieChart.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Pencil.tsx | Removed legacy SVG icon component. |
| src/assets/icon/PaperPlane.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Minus.tsx | Removed legacy SVG icon component. |
| src/assets/icon/LockOpen.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Lamp.tsx | Removed legacy SVG icon component. |
| src/assets/icon/InformationCircleMicro.tsx | Removed legacy SVG icon component. |
| src/assets/icon/InformationCircle.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Inbox.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Home.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Hashtag.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Globe.tsx | Removed legacy SVG icon component. |
| src/assets/icon/ExclamationTriangle.tsx | Removed legacy SVG icon component. |
| src/assets/icon/ExclamationCircle.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Database.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Cube.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Copy.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Computer.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Close.tsx | Removed legacy SVG icon component. |
| src/assets/icon/ChevronDown.tsx | Removed legacy SVG icon component. |
| src/assets/icon/CheckSquare.tsx | Removed legacy SVG icon component. |
| src/assets/icon/CheckCircle.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Check.tsx | Removed legacy SVG icon component. |
| src/assets/icon/Bars3BottomLeft.tsx | Removed legacy SVG icon component. |
| skills-lock.json | Added shadcn skill lock metadata. |
| package.json | Added shadcn/ui + theming + chart dependencies and Storybook addon-themes. |
| eslint.config.js | Relaxed lint rules for TSX components (inline styles/magic numbers). |
| components.json | Added shadcn/ui configuration and path aliases. |
| CONTRIBUTING.md | Removed legacy alias documentation section content. |
| .storybook/theme/tetra-science.light.theme.ts | Added custom light Storybook theme file. |
| .storybook/theme/tetra-science.dark.theme.ts | Added custom dark Storybook theme file. |
| .storybook/theme/index.css | Added Storybook docs theming CSS using semantic tokens. |
| .storybook/preview.ts | Added theme decorator + TooltipProvider + Toaster and updated CSS imports/sort. |
| .storybook/manager.ts | Added manager theme sync between addon-themes globals and Storybook chrome. |
| .storybook/main.ts | Updated staticDirs location and added addon-themes. |
| .storybook/font.css | Removed Google-font CSS injection. |
| .agents/skills/shadcn/rules/icons.md | Added icon usage rules for the shadcn skill. |
| .agents/skills/shadcn/mcp.md | Added documentation for shadcn MCP server usage. |
| .agents/skills/shadcn/evals/evals.json | Added evaluation prompts/expectations for shadcn skill. |
| .agents/skills/shadcn/agents/openai.yml | Added agent registration metadata for shadcn skill. |
Comments suppressed due to low confidence (1)
src/components/composed/Sidebar/Sidebar.tsx:1
- The Sidebar removed explicit background/text/icon colors, but no replacement theme tokens were added. This risks unreadable UI depending on the surrounding layout (e.g., dark sidebar with default text color). If the goal is theme-driven styling, consider setting
background-colorandcolorusing semantic CSS variables (e.g.var(--sidebar),var(--sidebar-foreground)) or migrating fully to the shadcnSidebarprimitives likeMainSidebardoes.
import React from "react";
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+36
to
38
| <DialogContent | ||
| className="min-w-[600px]" | ||
| > |
src/components/composed/CodeScriptEditorButton/CodeScriptEditorButton.tsx
Outdated
Show resolved
Hide resolved
Comment on lines
+95
to
+96
| <Dialog open={isModalOpen} {...modalProps}> | ||
| <DialogContent className="min-w-[80%]"> |
Comment on lines
+109
to
+116
| <DialogFooter> | ||
| <DialogClose asChild> | ||
| <Button variant="outline" onClick={handleCancel}>Close</Button> | ||
| </DialogClose> | ||
| <Button onClick={handleSave}>Save changes</Button> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> |
darwinboersma
requested changes
Mar 13, 2026
| @@ -0,0 +1,94 @@ | |||
| # shadcn MCP Server | |||
Contributor
There was a problem hiding this comment.
Praise: Nice! I'd love to see a demo of this
| @@ -0,0 +1,24 @@ | |||
| import { addons } from 'storybook/manager-api'; | |||
|
|
|||
| import { tetrascienceDark } from './theme/tetra-science.dark.theme'; | |||
| files: ["src/components/**/*.tsx"], | ||
| rules: { | ||
| "react/forbid-component-props": "off", | ||
| "no-magic-numbers": "off", |
Contributor
There was a problem hiding this comment.
Q: Why allow magic numbers on all UI components?
Collaborator
Author
There was a problem hiding this comment.
yeah good question. One of the components pulled from chadcn had some magic numbers. I would definitely say magic numbers is not a great practice. ill factor those out and remove this eslint change
| ) | ||
| } | ||
|
|
||
| export const Default: Story = { |
Contributor
There was a problem hiding this comment.
Refactor: We seem to have lost the zephyr ids during migration, for example zephyr: { testCaseId: "SW-T863" } on this one. Those are used to sync storybook tests, even on these simple rendering stories -- each story becomes a test that (at minimal) listens for console warns/errors after mounting the component.
Collaborator
Author
There was a problem hiding this comment.
good catch! ill run the zephyr sync script so that we have test cases on all of these components
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
|
Warning Endor Labs detected 1 policy violations associated with this pull request. Please review the findings that caused the policy violations.
|
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
owilliams-tetrascience
deployed
to
artifactory-prod
GitHub Actions
Active
Collaborator
blee-tetrascience
left a comment
blee-tetrascience
left a comment
There was a problem hiding this comment.
Code Review — Recommendations
1. Bump version to 1.0.0
This PR is a full breaking change — ~50+ previously-exported symbols are removed, component APIs are incompatible (e.g. Button variant values changed, Table went from data-driven to raw HTML wrappers, Card became compound components), and the CSS variable namespace changed entirely. Every existing data app consumer will break on upgrade.
The ^0.3.0 pinning in downstream apps accidentally prevents auto-upgrade, but semver clarity is essential. This should ship as 1.0.0 to signal the breaking change explicitly.
(Remaining recommendations are posted as inline comments on specific files below.)
| "rehype-raw": "^7.0.0", | ||
| "remark-gfm": "^4.0.1", | ||
| "styled-components": "^6.1.18" | ||
| "shadcn": "^3.8.5", |
Collaborator
There was a problem hiding this comment.
Move build tools to devDependencies
shadcn is a CLI scaffolding tool — it has zero runtime value and adds ~35 transitive dependencies to every consumer's install. It should be in devDependencies.
Same applies to:
@tailwindcss/vite(line 101) — Vite build plugintailwindcss(line 132) — CSS framework processed at build time
Since the Vite config externalizes everything in dependencies, keeping these here forces consumers to npm install build tools they'll never use.
| @@ -0,0 +1,47 @@ | |||
| import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react" | |||
Collaborator
There was a problem hiding this comment.
Remove or replace next-themes dependency
This file imports useTheme() from next-themes, but this library targets Vite — not Next.js. next-themes expects its own ThemeProvider higher in the tree; without it, useTheme() returns { theme: undefined } and the toast theme silently falls back to "system".
This affects:
- All current data apps (none use
next-themes) - Storybook (no
next-themesprovider in the decorator chain — toast theme won't sync with the theme switcher)
Consider replacing with a simpler approach, e.g. reading the dark class from document.documentElement directly, or adding a lightweight theme context that the library controls.
| @@ -1,12 +1,14 @@ | |||
| import { CodeEditor } from "@atoms/CodeEditor"; | |||
| import { Modal } from "@atoms/Modal"; | |||
| import React, { useState } from "react"; | |||
Collaborator
There was a problem hiding this comment.
Fix Dialog/Modal control pattern
This component renders <DialogContent> without wrapping it in a <Dialog> root, relying on the consumer to provide the wrapper. But the component's story wires open state independently of the Dialog's internal state, so:
- Clicking the trigger opens the dialog via
DialogTrigger, butonCancelonly updates local React state — the dialog won't actually close on cancel/ESC/overlay click. - The
openprop passed in the story is never consumed by the component interface.
Recommend either:
- (a) Make this component own its
<Dialog>and acceptopen/onOpenChangeprops, or - (b) Rename to
PythonEditorDialogContentand document that consumers must provide the controlled<Dialog>wrapper.
Same pattern issue exists in AssistantModal — it manually checks if (!open) return null instead of using Dialog's built-in open/close mechanism.
| @@ -1,4 +1,4 @@ | |||
| @use "../../../styles/variables.scss"; | |||
| @use "../../styles/variables.scss"; | |||
Collaborator
There was a problem hiding this comment.
Fix orphaned CSS variable references
The old colors.scss (--grey-*, --blue-*, --black-*, --white-*) is no longer imported — src/index.scss was deleted and the new entry point is src/index.css (Tailwind-based). But 20+ files still reference the old variables, which will resolve to undefined at runtime → invisible text, missing borders, broken charts.
This file references var(--grey-200), var(--grey-50), var(--grey-800). Other affected files include:
src/components/composed/Sidebar/Sidebar.tsx—var(--white-100),var(--white-50)src/components/composed/Navbar/Navbar.tsx—var(--grey-400)src/components/composed/CodeScriptEditorButton/CodeScriptEditorButton.tsx—var(--grey-400)src/components/composed/tdp-link.tsx—var(--theme-primary),var(--blue-600)src/components/composed/AssistantModal/AssistantModal.tsx—var(--black-50),var(--blue-900),var(--blue-600)- All chart SCSS files via
variables.scss→colors.scss
Either migrate all remaining references to the new Tailwind/CSS variable system, or re-include colors.scss in the build so old variables are still defined.
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
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.
PR: Feature: Add shadcn/ui Integration & Components Library Refactor
Summary
This PR introduces comprehensive shadcn/ui integration to the TetraScience UI Kit, replacing custom component implementations with a modern, production-ready component library. The update includes a complete registry configuration, multiple shadcn components, and the addition of essential dependencies for a robust component ecosystem.
Key Changes
🎨 New shadcn/ui Setup
🎯 Added Components
📦 New Dependencies
🎭 Storybook Updates
🗑️ Removed Legacy Code
📋 Configuration Updates
📖 Documentation
Migration Guide
For Developers
bg-primary,text-muted-foreground).agents/skills/shadcn/For Storybook
Component Mapping
Benefits
✅ Production-ready components with accessibility built-in
✅ Reduced maintenance burden (community-maintained)
✅ Better TypeScript support and type safety
✅ Consistent design system across all components
✅ Built-in dark mode support
✅ Extensive customization via CSS variables
✅ Active community and regular updates
Testing
Notes
Checklist: