#790 Refactor components organization#799
Conversation
6a70864 to
786b234
Compare
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.
5b3928b to
6bcaff4
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 80 out of 115 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
src/components/menu/Menu.ts:7
MenuItemsis imported as a type-only import, which removes the runtime side effect of registering the<solid-ui-menu-items>custom element. If consumers import onlymenu(a common pattern), the referenced element may not be defined at runtime. Add an explicit side-effect import to ensure registration.
6bcaff4 to
717627d
Compare
- 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
717627d to
8a2b643
Compare
Uh oh!
There was an error while loading. Please reload this page.