SW-1431: Refactor code structure and enhance theme management across components#45
SW-1431: Refactor code structure and enhance theme management across components#45owilliams-tetrascience wants to merge 37 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
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
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
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.
Sorry, Claude went a little crazy with the comments on Friday. I don't think we version bump to 1.0.0 is warranted (yet). We can discuss this with the group but I think keeping this package below 1.0.0 (given it's still a bit "unstable") is fine and we can just bump the minor version for now. Open to discussion though
(Remaining recommendations are posted as inline comments on specific files below.)
| @@ -1,12 +1,14 @@ | |||
| import { CodeEditor } from "@atoms/CodeEditor"; | |||
| import { Modal } from "@atoms/Modal"; | |||
| import React, { useState } from "react"; | |||
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.
src/components/ui/code-editor.scss
Outdated
| @@ -1,4 +1,4 @@ | |||
| @use "../../../styles/variables.scss"; | |||
| @use "../../styles/variables.scss"; | |||
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.
…wind CSS classes - Updated Navbar component to use Tailwind CSS for styling instead of styled-components. - Refactored ProtocolConfiguration component to utilize Tailwind CSS for layout and styling. - Modified ProtocolYamlCard to replace styled-components with Tailwind CSS classes. - Adjusted PythonEditorModal and its story to remove styled-components in favor of Tailwind CSS. - Refactored Sidebar component to eliminate styled-components and implement Tailwind CSS. - Updated TDPLink component to remove styled-components and use Tailwind CSS for styling. - Refactored CodeEditor component to replace styled-components with Tailwind CSS classes. - Removed unused styled-components from input-group and sidebar components. - Updated yarn.lock to reflect changes in dependencies and versions.
owilliams-tetrascience
had a problem deploying
to
artifactory-prod
GitHub Actions
Failure
…me hook and update related components
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
owilliams-tetrascience
had a problem deploying
to
artifactory-prod
GitHub Actions
Failure
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
…seTheme with useCodeEditorTheme in CodeEditor and Toaster components
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
owilliams-tetrascience
deployed
to
artifactory-prod
GitHub Actions
Active
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: