Skip to content

#790 Refactor components organization#799

Open
NoelDeMartin wants to merge 3 commits into
SolidOS:stagingfrom
NoelDeMartin:790-restructure-components
Open

#790 Refactor components organization#799
NoelDeMartin wants to merge 3 commits into
SolidOS:stagingfrom
NoelDeMartin:790-restructure-components

Conversation

@NoelDeMartin

@NoelDeMartin NoelDeMartin commented Jun 16, 2026

Copy link
Copy Markdown
Member
  • Move all components to src/components
  • Moved common component styles to WebComponent base class
  • Renamed styles.css to theme.css
  • Added @/ imports and aliases
  • Export component utils
  • Rollback exporting design system components
  • Rollback design system header feature

@NoelDeMartin NoelDeMartin requested a review from timea-solid June 16, 2026 15:47
@NoelDeMartin NoelDeMartin force-pushed the 790-restructure-components branch from 6a70864 to 786b234 Compare June 16, 2026 15:53
@NoelDeMartin NoelDeMartin linked an issue Jun 16, 2026 that may be closed by this pull request
@NoelDeMartin NoelDeMartin self-assigned this Jun 16, 2026
@bourgeoa bourgeoa requested a review from Copilot June 16, 2026 16:19

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.css and 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

  • CloseDialogEvent handler is calling dialog?.closed(event.data), but src/lib/dialogs/Dialog has no closed() method and CloseDialogEvent has no data property. This will fail typechecking and can break dialog cleanup at runtime. Since CloseDialogEvent is already used to remove the dialog from this.dialogs, the extra lookup/call should be removed (or implement closed() + 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.

@NoelDeMartin NoelDeMartin force-pushed the 790-restructure-components branch from 786b234 to 5b3928b Compare June 16, 2026 18:22
- 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
The code is still there, but the library no longer exports it in order to remain backwards compatible before the upcoming release
Temporarily turned off for the upcoming release
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Restructure Web Components

2 participants