Skip to content

#790 Refactor components organization - #799

Merged
NoelDeMartin merged 1 commit into
SolidOS:stagingfrom
NoelDeMartin:790-restructure-components
Jun 22, 2026
Merged

#790 Refactor components organization#799
NoelDeMartin merged 1 commit into
SolidOS:stagingfrom
NoelDeMartin:790-restructure-components

Conversation

@NoelDeMartin

@NoelDeMartinNoelDeMartin 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

@NoelDeMartin
NoelDeMartinforce-pushed the 790-restructure-components branch from 6a70864 to 786b234CompareJune 16, 2026 15:53
@NoelDeMartinNoelDeMartin linked an issue Jun 16, 2026 that may be closed by this pull request
@NoelDeMartinNoelDeMartin self-assigned this Jun 16, 2026
@bourgeoa
bourgeoa requested a review from CopilotJune 16, 2026 16:19

CopilotAI 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
FileDescription
vite.config.tsEnables TS path resolving in Vite config and treats @/ imports as internal for bundling.
vite-config/styles.tsUpdates “styles” build mode to emit theme.css from src/styles/theme.css.
vite-config/cdn.tsEnables TS path resolving for CDN builds and keeps browser-friendly aliases.
vite-config/babel.tsAdjusts Babel override include paths to match new src/components structure.
tsconfig.jsonAdds baseUrl + @/* paths and includes src/types in typeRoots.
src/v2/components/layout/header/Header.tsSwitches header to import provider/account via @/components/*.
src/types/polyfills.d.tsAdds global CSS typing for anchor positioning-related properties.
src/types/env.d.tsCentralizes TS triple-slash references for Vite + lit-css + icons types.
src/styles/theme.cssNew global design tokens stylesheet (replaces previous variables sources).
src/styles.cssRemoves old imports of design-system/primitives variables (superseded by theme.css).
src/storybook/internals.tsAdds helper typing utilities to access internal members in stories.
src/storybook/index.tsRe-exports storybook helper modules from a single entry.
src/storybook/helpers.tsMoves story rendering helpers out of index.ts into a dedicated module.
src/storybook/components/StorybookProvider.tsRefactors to use new exported @/lib/* modules and @/components/*.
src/storybook/auth/StorybookAuth.tsRefactors to use new @/lib/auth exports.
src/primitives/styles/variables.cssRemoves old primitives variable tokens (now in theme.css).
src/primitives/styles/common.styles.cssRemoves old shared primitives styles (now handled via base WebComponent styles).
src/primitives/components/signup-button/SignupButton.styles.cssRemoves import of deleted common styles.
src/primitives/components/logout-button/LogoutButton.styles.cssRemoves import of deleted common styles.
src/primitives/components/login-button/LoginButton.styles.cssRemoves import of deleted common styles.
src/lib/menus/index.tsAdds export barrel for menus.
src/lib/menus/context.tsIntroduces menuContext for menu-related components.
src/lib/env.d.tsRemoves old env reference file (moved to src/types/env.d.ts).
src/lib/dialogs/index.tsAdds export barrel for dialogs utilities/classes/events.
src/lib/dialogs/helpers.tsAdds showDialog() helper to dispatch dialog open events and await element mount.
src/lib/dialogs/events/show-dialog.tsDefines and types global solid-ui:show-dialog event.
src/lib/dialogs/events/index.tsAdds event export barrel.
src/lib/dialogs/events/close-dialog.tsDefines and types global solid-ui:close-dialog event.
src/lib/dialogs/Dialog.tsRefactors dialog model to use generateId() from @/lib/components.
src/lib/dialogs/context.tsAdds dialogContext for dialog components/providers.
src/lib/components/web-component/WebComponent.tsMoves shared component styles into base class via finalizeStyles.
src/lib/components/web-component/WebComponent.styles.cssAdds Tailwind preflight + shared .sr-only utility styles.
src/lib/components/web-component/index.tsAdds barrel export for WebComponent.
src/lib/components/index.tsAdds barrel export for component utilities (decorators, ids, base class).
src/lib/components/ids.tsAdds generateId() utility (used by dialogs/menus/combobox).
src/lib/components/decorators.tsAdds safe customElement() decorator that avoids duplicate registrations.
src/lib/auth/SolidAuth.tsRefactors imports to use new @/lib/* exports and @/components/login-modal.
src/lib/auth/NoopAuth.tsAdds default auth implementation that throws when used without a provider.
src/lib/auth/index.tsAdds auth barrel exports.
src/lib/auth/context.tsAdds exported auth context + default auth instance.
src/lib/auth/Account.tsAdds Account model.
src/index.tsRe-exports new lib/* modules at the package root.
src/design-system/styles/variables.cssRemoves old design system variables (now in theme.css).
src/design-system/styles/common.styles.cssRemoves old design system shared styles (now in base WebComponent styles).
src/design-system/shims.d.tsRemoves old *.styles.css shim (now handled via vite-plugin-lit-css types).
src/design-system/components/combobox/index.tsRemoves old DS combobox barrel (replaced by src/components/combobox).
src/design-system/components/button/index.tsRemoves old DS button barrel (replaced by src/components/button).
src/components/signup-button/SignupButton.tsRefactors to @/lib/auth, uses design-system solid-ui-button, and renames tag to solid-ui-signup-button.
src/components/signup-button/SignupButton.stories.tsUpdates story imports/tags to new alias + new component tag.
src/components/signup-button/index.tsAdds component barrel.
src/components/provider/Provider.tsRefactors to @/lib/auth and imports dialogs root from @/components.
src/components/provider/index.tsAdds component barrel.
src/components/menu/Menu.tsRefactors to @/lib/components + @/lib/menus and updates imports.
src/components/menu/Menu.stories.tsUpdates story imports to aliases and new component paths.
src/components/menu/index.tsAdds component barrel.
src/components/menu-items/MenuItems.tsRefactors to @/lib/components + @/lib/menus.
src/components/menu-items/MenuItems.styles.cssRemoves import of old common styles.
src/components/menu-items/index.tsAdds component barrel.
src/components/menu-item/MenuItem.tsRefactors to @/lib/components.
src/components/menu-item/MenuItem.styles.cssRemoves import of old common styles.
src/components/menu-item/index.tsAdds component barrel.
src/components/logout-button/LogoutButton.tsRefactors to @/lib/auth, uses solid-ui-button, renames tag to solid-ui-logout-button.
src/components/logout-button/LogoutButton.stories.tsUpdates story imports/tags to new alias + new component tag.
src/components/logout-button/index.tsAdds component barrel.
src/components/login-modal/LoginModal.tsRefactors imports to @/lib/auth and replaces DS button/combobox/dialog imports with @/components/*.
src/components/login-modal/LoginModal.styles.cssRemoves import of old common styles.
src/components/login-modal/LoginModal.stories.tsUpdates to new storybook helpers and new showDialog import path.
src/components/login-modal/index.tsAdds component barrel.
src/components/login-button/LoginButton.tsRefactors to @/lib/auth, uses solid-ui-button, renames tag to solid-ui-login-button.
src/components/login-button/LoginButton.stories.tsUpdates story imports/tags to new alias + new component tag.
src/components/login-button/index.tsAdds component barrel.
src/components/guard/index.tsAdds component barrel.
src/components/guard/Guard.tsRefactors auth imports to @/lib/auth.
src/components/guard/Guard.stories.tsUpdates story imports to aliases.
src/components/dialogs-root/index.tsAdds component barrel.
src/components/dialogs-root/DialogsRoot.tsRefactors dialogs root to new dialogs event model and provider component.
src/components/dialog/index.tsAdds component barrel.
src/components/dialog/Dialog.tsRefactors to @/lib/components and @/components/* dependencies.
src/components/dialog/Dialog.styles.cssRemoves import of old common styles.
src/components/dialog-provider/index.tsAdds component barrel.
src/components/dialog-provider/DialogProvider.tsRefactors to @/lib/dialogs/context and @/lib/components.
src/components/dialog-header/index.tsAdds component barrel.
src/components/dialog-header/DialogHeader.tsRefactors to @/lib/components.
src/components/dialog-header/DialogHeader.styles.cssRemoves import of old common styles.
src/components/dialog-footer/index.tsAdds component barrel.
src/components/dialog-footer/DialogFooter.tsRefactors to @/lib/components.
src/components/dialog-footer/DialogFooter.styles.cssRemoves import of old common styles.
src/components/dialog-content/index.tsAdds component barrel.
src/components/dialog-content/DialogContent.tsRefactors to @/lib/components.
src/components/dialog-content/DialogContent.styles.cssRemoves import of old common styles.
src/components/combobox/index.tsReplaces v2 re-export with new component barrel.
src/components/combobox/Combobox.tsRefactors to @/lib/components, imports combobox option class, and keeps styles local.
src/components/combobox/Combobox.styles.cssRemoves old common styles import and tweaks label font weight.
src/components/combobox/Combobox.stories.tsUpdates story imports to aliases and ensures combobox-option is registered.
src/components/combobox-option/index.tsAdds component barrel.
src/components/combobox-option/ComboboxOption.tsRefactors to @/lib/components.
src/components/button/index.tsReplaces v2 re-export with new component barrel.
src/components/button/Button.tsRefactors to @/lib/components and keeps styles local.
src/components/button/Button.styles.cssRemoves old common styles import.
src/components/button/Button.stories.tsUpdates story imports to aliases and story title grouping.
src/components/avatar/index.tsAdds component barrel.
src/components/avatar/Avatar.tsRefactors to @/lib/auth, renames tag to solid-ui-avatar, and removes dependency on common styles.
src/components/avatar/Avatar.styles.cssUpdates CSS variables to new --solid-ui-* token names.
src/components/avatar/Avatar.stories.tsUpdates story imports/tags to new alias + new component tag.
src/components/account/index.tsAdds component barrel.
src/components/account/Account.tsRefactors imports to @/lib/auth and switches to new component tags (login/logout/signup/avatar).
src/components/account/Account.styles.cssUpdates selector to solid-ui-avatar and removes old common styles import.
src/components/account/Account.stories.tsUpdates story imports to aliases and story title grouping.
README.mdUpdates docs to reference theme.css instead of styles.css.
package.jsonUpdates package export style path to dist/theme.css and pins tailwindcss version.
package-lock.jsonLocks tailwindcss to 4.3.0 at top-level while retaining nested 4.3.1 instances.
examples/matrix/index.htmlUpdates example to load dist/theme.css.
examples/header/index.htmlUpdates example to load dist/theme.css.
.storybook/preview.tsUpdates 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.

CopilotAI 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

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

  • MenuItems is imported as a type-only import, which removes the runtime side effect of registering the <solid-ui-menu-items> custom element. If consumers import only menu (a common pattern), the referenced element may not be defined at runtime. Add an explicit side-effect import to ensure registration.

Comment threadsrc/storybook/auth/StorybookAuth.ts
@NoelDeMartin
NoelDeMartin marked this pull request as draft June 19, 2026 10:29
Comment threadpackage.json
@NoelDeMartin
NoelDeMartinforce-pushed the 790-restructure-components branch from 6bcaff4 to 717627dCompareJune 22, 2026 07:34
@NoelDeMartin
NoelDeMartin marked this pull request as ready for review June 22, 2026 07:34
- 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
@NoelDeMartin
NoelDeMartinforce-pushed the 790-restructure-components branch from 717627d to 8a2b643CompareJune 22, 2026 07:56
@NoelDeMartin
NoelDeMartin merged commit 5b3c012 into SolidOS:stagingJun 22, 2026
6 of 7 checks passed
@NoelDeMartinNoelDeMartin linked an issue Jul 9, 2026 that may be closed by this pull request
Sign up for freeto 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 Export new Web Components

3 participants

@NoelDeMartin@timea-solid