#790 Refactor components organization#799
Open
NoelDeMartin wants to merge 1 commit into
Open
Conversation
NoelDeMartin
commented
Jun 16, 2026
Member
- Move all components to src/components
- Replace the following components for design system versions: button and combobox
- Moved common component styles to WebComponent base class
- Renamed styles.css to theme.css
- Added @/ imports and aliases
- Export component utils
6a70864 to
786b234
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR reorganizes the component architecture by moving/standardizing components under src/components, introducing @/ import aliases, and consolidating shared styling into the WebComponent base. It also renames the distributed global stylesheet from styles.css to theme.css and updates build/export wiring accordingly.
Changes:
- Add
@/* -> src/*TypeScript path mapping and update component imports to use@/aliases. - Rename global stylesheet to
src/styles/theme.cssand update Vite “styles” build mode, package exports, docs, and examples. - Introduce/export new shared lib modules (
auth,components,dialogs,menus) and refactor components to consume them.
Reviewed changes
Copilot reviewed 79 out of 114 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Enables TS path resolving in Vite config and treats @/ imports as internal for bundling. |
| vite-config/styles.ts | Updates “styles” build mode to emit theme.css from src/styles/theme.css. |
| vite-config/cdn.ts | Enables TS path resolving for CDN builds and keeps browser-friendly aliases. |
| vite-config/babel.ts | Adjusts Babel override include paths to match new src/components structure. |
| tsconfig.json | Adds baseUrl + @/* paths and includes src/types in typeRoots. |
| src/v2/components/layout/header/Header.ts | Switches header to import provider/account via @/components/*. |
| src/types/polyfills.d.ts | Adds global CSS typing for anchor positioning-related properties. |
| src/types/env.d.ts | Centralizes TS triple-slash references for Vite + lit-css + icons types. |
| src/styles/theme.css | New global design tokens stylesheet (replaces previous variables sources). |
| src/styles.css | Removes old imports of design-system/primitives variables (superseded by theme.css). |
| src/storybook/internals.ts | Adds helper typing utilities to access internal members in stories. |
| src/storybook/index.ts | Re-exports storybook helper modules from a single entry. |
| src/storybook/helpers.ts | Moves story rendering helpers out of index.ts into a dedicated module. |
| src/storybook/components/StorybookProvider.ts | Refactors to use new exported @/lib/* modules and @/components/*. |
| src/storybook/auth/StorybookAuth.ts | Refactors to use new @/lib/auth exports. |
| src/primitives/styles/variables.css | Removes old primitives variable tokens (now in theme.css). |
| src/primitives/styles/common.styles.css | Removes old shared primitives styles (now handled via base WebComponent styles). |
| src/primitives/components/signup-button/SignupButton.styles.css | Removes import of deleted common styles. |
| src/primitives/components/logout-button/LogoutButton.styles.css | Removes import of deleted common styles. |
| src/primitives/components/login-button/LoginButton.styles.css | Removes import of deleted common styles. |
| src/lib/menus/index.ts | Adds export barrel for menus. |
| src/lib/menus/context.ts | Introduces menuContext for menu-related components. |
| src/lib/env.d.ts | Removes old env reference file (moved to src/types/env.d.ts). |
| src/lib/dialogs/index.ts | Adds export barrel for dialogs utilities/classes/events. |
| src/lib/dialogs/helpers.ts | Adds showDialog() helper to dispatch dialog open events and await element mount. |
| src/lib/dialogs/events/show-dialog.ts | Defines and types global solid-ui:show-dialog event. |
| src/lib/dialogs/events/index.ts | Adds event export barrel. |
| src/lib/dialogs/events/close-dialog.ts | Defines and types global solid-ui:close-dialog event. |
| src/lib/dialogs/Dialog.ts | Refactors dialog model to use generateId() from @/lib/components. |
| src/lib/dialogs/context.ts | Adds dialogContext for dialog components/providers. |
| src/lib/components/web-component/WebComponent.ts | Moves shared component styles into base class via finalizeStyles. |
| src/lib/components/web-component/WebComponent.styles.css | Adds Tailwind preflight + shared .sr-only utility styles. |
| src/lib/components/web-component/index.ts | Adds barrel export for WebComponent. |
| src/lib/components/index.ts | Adds barrel export for component utilities (decorators, ids, base class). |
| src/lib/components/ids.ts | Adds generateId() utility (used by dialogs/menus/combobox). |
| src/lib/components/decorators.ts | Adds safe customElement() decorator that avoids duplicate registrations. |
| src/lib/auth/SolidAuth.ts | Refactors imports to use new @/lib/* exports and @/components/login-modal. |
| src/lib/auth/NoopAuth.ts | Adds default auth implementation that throws when used without a provider. |
| src/lib/auth/index.ts | Adds auth barrel exports. |
| src/lib/auth/context.ts | Adds exported auth context + default auth instance. |
| src/lib/auth/Account.ts | Adds Account model. |
| src/index.ts | Re-exports new lib/* modules at the package root. |
| src/design-system/styles/variables.css | Removes old design system variables (now in theme.css). |
| src/design-system/styles/common.styles.css | Removes old design system shared styles (now in base WebComponent styles). |
| src/design-system/shims.d.ts | Removes old *.styles.css shim (now handled via vite-plugin-lit-css types). |
| src/design-system/components/combobox/index.ts | Removes old DS combobox barrel (replaced by src/components/combobox). |
| src/design-system/components/button/index.ts | Removes old DS button barrel (replaced by src/components/button). |
| src/components/signup-button/SignupButton.ts | Refactors to @/lib/auth, uses design-system solid-ui-button, and renames tag to solid-ui-signup-button. |
| src/components/signup-button/SignupButton.stories.ts | Updates story imports/tags to new alias + new component tag. |
| src/components/signup-button/index.ts | Adds component barrel. |
| src/components/provider/Provider.ts | Refactors to @/lib/auth and imports dialogs root from @/components. |
| src/components/provider/index.ts | Adds component barrel. |
| src/components/menu/Menu.ts | Refactors to @/lib/components + @/lib/menus and updates imports. |
| src/components/menu/Menu.stories.ts | Updates story imports to aliases and new component paths. |
| src/components/menu/index.ts | Adds component barrel. |
| src/components/menu-items/MenuItems.ts | Refactors to @/lib/components + @/lib/menus. |
| src/components/menu-items/MenuItems.styles.css | Removes import of old common styles. |
| src/components/menu-items/index.ts | Adds component barrel. |
| src/components/menu-item/MenuItem.ts | Refactors to @/lib/components. |
| src/components/menu-item/MenuItem.styles.css | Removes import of old common styles. |
| src/components/menu-item/index.ts | Adds component barrel. |
| src/components/logout-button/LogoutButton.ts | Refactors to @/lib/auth, uses solid-ui-button, renames tag to solid-ui-logout-button. |
| src/components/logout-button/LogoutButton.stories.ts | Updates story imports/tags to new alias + new component tag. |
| src/components/logout-button/index.ts | Adds component barrel. |
| src/components/login-modal/LoginModal.ts | Refactors imports to @/lib/auth and replaces DS button/combobox/dialog imports with @/components/*. |
| src/components/login-modal/LoginModal.styles.css | Removes import of old common styles. |
| src/components/login-modal/LoginModal.stories.ts | Updates to new storybook helpers and new showDialog import path. |
| src/components/login-modal/index.ts | Adds component barrel. |
| src/components/login-button/LoginButton.ts | Refactors to @/lib/auth, uses solid-ui-button, renames tag to solid-ui-login-button. |
| src/components/login-button/LoginButton.stories.ts | Updates story imports/tags to new alias + new component tag. |
| src/components/login-button/index.ts | Adds component barrel. |
| src/components/guard/index.ts | Adds component barrel. |
| src/components/guard/Guard.ts | Refactors auth imports to @/lib/auth. |
| src/components/guard/Guard.stories.ts | Updates story imports to aliases. |
| src/components/dialogs-root/index.ts | Adds component barrel. |
| src/components/dialogs-root/DialogsRoot.ts | Refactors dialogs root to new dialogs event model and provider component. |
| src/components/dialog/index.ts | Adds component barrel. |
| src/components/dialog/Dialog.ts | Refactors to @/lib/components and @/components/* dependencies. |
| src/components/dialog/Dialog.styles.css | Removes import of old common styles. |
| src/components/dialog-provider/index.ts | Adds component barrel. |
| src/components/dialog-provider/DialogProvider.ts | Refactors to @/lib/dialogs/context and @/lib/components. |
| src/components/dialog-header/index.ts | Adds component barrel. |
| src/components/dialog-header/DialogHeader.ts | Refactors to @/lib/components. |
| src/components/dialog-header/DialogHeader.styles.css | Removes import of old common styles. |
| src/components/dialog-footer/index.ts | Adds component barrel. |
| src/components/dialog-footer/DialogFooter.ts | Refactors to @/lib/components. |
| src/components/dialog-footer/DialogFooter.styles.css | Removes import of old common styles. |
| src/components/dialog-content/index.ts | Adds component barrel. |
| src/components/dialog-content/DialogContent.ts | Refactors to @/lib/components. |
| src/components/dialog-content/DialogContent.styles.css | Removes import of old common styles. |
| src/components/combobox/index.ts | Replaces v2 re-export with new component barrel. |
| src/components/combobox/Combobox.ts | Refactors to @/lib/components, imports combobox option class, and keeps styles local. |
| src/components/combobox/Combobox.styles.css | Removes old common styles import and tweaks label font weight. |
| src/components/combobox/Combobox.stories.ts | Updates story imports to aliases and ensures combobox-option is registered. |
| src/components/combobox-option/index.ts | Adds component barrel. |
| src/components/combobox-option/ComboboxOption.ts | Refactors to @/lib/components. |
| src/components/button/index.ts | Replaces v2 re-export with new component barrel. |
| src/components/button/Button.ts | Refactors to @/lib/components and keeps styles local. |
| src/components/button/Button.styles.css | Removes old common styles import. |
| src/components/button/Button.stories.ts | Updates story imports to aliases and story title grouping. |
| src/components/avatar/index.ts | Adds component barrel. |
| src/components/avatar/Avatar.ts | Refactors to @/lib/auth, renames tag to solid-ui-avatar, and removes dependency on common styles. |
| src/components/avatar/Avatar.styles.css | Updates CSS variables to new --solid-ui-* token names. |
| src/components/avatar/Avatar.stories.ts | Updates story imports/tags to new alias + new component tag. |
| src/components/account/index.ts | Adds component barrel. |
| src/components/account/Account.ts | Refactors imports to @/lib/auth and switches to new component tags (login/logout/signup/avatar). |
| src/components/account/Account.styles.css | Updates selector to solid-ui-avatar and removes old common styles import. |
| src/components/account/Account.stories.ts | Updates story imports to aliases and story title grouping. |
| README.md | Updates docs to reference theme.css instead of styles.css. |
| package.json | Updates package export style path to dist/theme.css and pins tailwindcss version. |
| package-lock.json | Locks tailwindcss to 4.3.0 at top-level while retaining nested 4.3.1 instances. |
| examples/matrix/index.html | Updates example to load dist/theme.css. |
| examples/header/index.html | Updates example to load dist/theme.css. |
| .storybook/preview.ts | Updates Storybook preview to import @/styles/theme.css. |
Comments suppressed due to low confidence (1)
src/components/dialogs-root/DialogsRoot.ts:30
CloseDialogEventhandler is callingdialog?.closed(event.data), butsrc/lib/dialogs/Dialoghas noclosed()method andCloseDialogEventhas nodataproperty. This will fail typechecking and can break dialog cleanup at runtime. SinceCloseDialogEventis already used to remove the dialog fromthis.dialogs, the extra lookup/call should be removed (or implementclosed()+ payload on the event if you actually need a close result).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Move all components to src/components - Replace the following components for design system versions: button and combobox - Moved common component styles to WebComponent base class - Renamed styles.css to theme.css - Added @/ imports and aliases - Export component utils
786b234 to
5b3928b
Compare
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.