Update version#792
Open
timea-solid wants to merge 18 commits into
Open
Conversation
This has been implemented as a swappable interface to support other environments easily, and particularly in order to eventually converge on an interoperable system for all Web Component libraries in the Solid ecosystem
Prompt: We're using the tailwindcss preflight resets in @src/primitives/styles/common.styles.css, but they have an overly aggressive selector that resets the margin and padding of any element. This is a problem because styling web component elements using :host in their own styles take less precedence in the situations were nested components are rendered. Use the patch-package utility to modify the built-in preflight and remove the padding and margin resets in the * selector. Instead, create a new rule that only resets padding and margin for built-in elements. Summary of Changes: 1. Modified Preflight Styles: Updated preflight.css to: • Remove margin: 0; and padding: 0; from the universal * selector rule. • Create a new rule resetting margins and paddings only for standard built-in HTML tags and pseudo-elements (such as ::after , ::before , ::backdrop , ::file-selector-button ). 2. Generated Patch: Ran npx patch-package tailwindcss to generate the patch file at tailwindcss+4.3.0.patch. 3. Staged and Verified: • Verified that npm run typecheck && npm run build and npm run test compile and pass without issues. • Staged the patch file along with the formatting tweak in package.json. Co-Authored-By: Antigravity CLI (Gemini 3.5 Flash) <bot@antigravity.local>
Implement a generic dialog system, see https://noeldemartin.com/blog/the-problems-with-modals-and-how-to-solve-them
…count #769 Update account components in header
Contributor
There was a problem hiding this comment.
Pull request overview
This PR goes beyond a version bump by introducing a new Lit-based primitives/design-system layer (auth context, dialogs, menus, buttons, etc.), updating build tooling (Babel decorators, unplugin-icons, lit-css-loader + PostCSS/Tailwind), and refactoring Storybook support while removing a large set of legacy Storybook stories/docs.
Changes:
- Bump package version to
3.1.2and expand package exports/files to include distributed CSS variables. - Add new primitives + design-system components (auth context/provider, account UI, dialogs, menus, combobox, button, avatar, guard) and a feature flag to switch the v2 header user area.
- Update build/test/storybook configuration for Lit decorators, icon imports, and
.styles.cssprocessing; remove legacy Storybook stories/MDX pages.
Reviewed changes
Copilot reviewed 143 out of 147 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.mjs | Adds decorators Babel rule, icons plugin, and lit-css-loader pipeline |
| tsconfig.json | Enables useDefineForClassFields for decorator compatibility |
| src/v2/components/layout/header/Header.ts | Feature-flagged switch to design-system account area |
| src/v2/components/layout/header/header.test.ts | Forces feature flag off in tests |
| src/utils/objects.ts | Adds typed objectEntries helper |
| src/storybook/stubs.ts | Adds Storybook user stubs/control options |
| src/storybook/index.ts | Adds Storybook render/control utilities and provider wrapper |
| src/storybook/components/StorybookProvider.ts | Provides auth context for Storybook rendering |
| src/storybook/auth/StorybookAuth.ts | Implements Storybook auth context stub |
| src/stories/Widgets.stories.js | Removes legacy Storybook story |
| src/stories/Widgets.mdx | Removes legacy Storybook docs page |
| src/stories/Tabs.stories.js | Removes legacy Storybook story |
| src/stories/Tabs.mdx | Removes legacy Storybook docs page |
| src/stories/RdfUtils.stories.js | Removes legacy Storybook story |
| src/stories/RdfUtils.mdx | Removes legacy Storybook docs page |
| src/stories/Notepad.stories.js | Removes legacy Storybook story |
| src/stories/Notepad.mdx | Removes legacy Storybook docs page |
| src/stories/MediaTypes.stories.js | Removes legacy Storybook story |
| src/stories/MediaTypes.mdx | Removes legacy Storybook docs page |
| src/stories/Matrix.stories.js | Removes legacy Storybook story |
| src/stories/Matrix.mdx | Removes legacy Storybook docs page |
| src/stories/Log.stories.js | Removes legacy Storybook story |
| src/stories/Log.mdx | Removes legacy Storybook docs page |
| src/stories/Interactive.stories.js | Removes legacy Storybook story |
| src/stories/Interactive.mdx | Removes legacy Storybook docs page |
| src/stories/Images.stories.js | Removes legacy Storybook story |
| src/stories/Images.mdx | Removes legacy Storybook docs page |
| src/stories/iconForClass.stories.js | Removes legacy Storybook story |
| src/stories/iconForClass.mdx | Removes legacy Storybook docs page |
| src/stories/Header.stories.js | Removes legacy Storybook story |
| src/stories/Header.mdx | Removes legacy Storybook docs page |
| src/stories/forms/Options.stories.js | Removes legacy Storybook story |
| src/stories/forms/Options.mdx | Removes legacy Storybook docs page |
| src/stories/forms/Intro.mdx | Removes legacy Storybook docs page |
| src/stories/forms/Forms.stories.js | Removes legacy Storybook story |
| src/stories/forms/Forms.mdx | Removes legacy Storybook docs page |
| src/stories/forms/Fields.stories.js | Removes legacy Storybook story |
| src/stories/forms/Fields.mdx | Removes legacy Storybook docs page |
| src/stories/Events.stories.js | Removes legacy Storybook story |
| src/stories/Events.mdx | Removes legacy Storybook docs page |
| src/stories/DragAndDrop.stories.js | Removes legacy Storybook story |
| src/stories/DragAndDrop.mdx | Removes legacy Storybook docs page |
| src/stories/DomManipulation.stories.js | Removes legacy Storybook story |
| src/stories/DomManipulation.mdx | Removes legacy Storybook docs page |
| src/stories/Display.stories.js | Removes legacy Storybook story |
| src/stories/Display.mdx | Removes legacy Storybook docs page |
| src/stories/DateTime.stories.js | Removes legacy Storybook story |
| src/stories/DateTime.mdx | Removes legacy Storybook docs page |
| src/stories/Buttons.stories.js | Removes legacy Storybook story |
| src/stories/Buttons.mdx | Removes legacy Storybook docs page |
| src/primitives/styles/variables.css | Adds primitives CSS variables export |
| src/primitives/styles/common.styles.css | Adds shared primitives styling baseline |
| src/primitives/lib/WebComponent.ts | Adds Lit base class w/ internals + state support |
| src/primitives/lib/auth/NoopAuth.ts | Adds default auth context implementation |
| src/primitives/lib/auth/context.ts | Defines auth context interface + Lit context |
| src/primitives/lib/auth/Account.ts | Adds Account value object |
| src/primitives/components/signup-button/SignupButton.ts | Adds signup button primitive |
| src/primitives/components/signup-button/SignupButton.styles.css | Adds primitive styles import |
| src/primitives/components/signup-button/SignupButton.stories.ts | Adds Storybook story for signup button |
| src/primitives/components/signup-button/index.ts | Adds barrel export |
| src/primitives/components/logout-button/LogoutButton.ts | Adds logout button primitive |
| src/primitives/components/logout-button/LogoutButton.styles.css | Adds primitive styles import |
| src/primitives/components/logout-button/LogoutButton.stories.ts | Adds Storybook story for logout button |
| src/primitives/components/logout-button/index.ts | Adds barrel export |
| src/primitives/components/login-button/LoginButton.ts | Adds login button primitive |
| src/primitives/components/login-button/LoginButton.styles.css | Adds primitive styles import |
| src/primitives/components/login-button/LoginButton.stories.ts | Adds Storybook story for login button |
| src/primitives/components/login-button/index.ts | Adds barrel export |
| src/primitives/components/guard/index.ts | Adds barrel export |
| src/primitives/components/guard/Guard.ts | Adds auth guard primitive |
| src/primitives/components/guard/Guard.stories.ts | Adds Storybook story for guard |
| src/primitives/components/avatar/index.ts | Adds barrel export |
| src/primitives/components/avatar/Avatar.ts | Adds avatar primitive consuming auth context |
| src/primitives/components/avatar/Avatar.styles.css | Adds avatar styling + fallback state |
| src/primitives/components/avatar/Avatar.stories.ts | Adds Storybook story for avatar |
| src/features.ts | Adds feature flag configuration |
| src/design-system/styles/variables.css | Adds design-system CSS variables export |
| src/design-system/styles/common.styles.css | Adds design-system shared styles (sr-only, preflight) |
| src/design-system/shims.d.ts | Adds TS shim for *.styles.css imports |
| src/design-system/polyfills/css-anchor-positioning.ts | Adds TS typing for anchor-positioning CSS props |
| src/design-system/lib/menus/context.ts | Adds menu context for trigger/items coordination |
| src/design-system/lib/internals.ts | Adds typed internal access helper |
| src/design-system/lib/ids.ts | Adds ID generation helper |
| src/design-system/lib/dialogs/index.ts | Adds showDialog API |
| src/design-system/lib/dialogs/events/show-dialog.ts | Adds dialog open event |
| src/design-system/lib/dialogs/events/close-dialog.ts | Adds dialog close event |
| src/design-system/lib/dialogs/Dialog.ts | Adds dialog model bridging template and mounted element |
| src/design-system/lib/dialogs/context.ts | Adds dialog context for child components |
| src/design-system/lib/auth/SolidAuth.ts | Implements real Solid auth integration + login modal |
| src/design-system/components/provider/Provider.ts | Adds provider component that supplies auth context |
| src/design-system/components/provider/index.ts | Adds barrel export |
| src/design-system/components/menu/Menu.ts | Adds menu component coordinating trigger + popover |
| src/design-system/components/menu/Menu.stories.ts | Adds Storybook story for menu |
| src/design-system/components/menu/index.ts | Adds barrel export |
| src/design-system/components/menu-items/MenuItems.ts | Adds menu items popover component |
| src/design-system/components/menu-items/MenuItems.styles.css | Adds menu items styles/positioning |
| src/design-system/components/menu-items/index.ts | Adds barrel export |
| src/design-system/components/menu-item/MenuItem.ts | Adds menu item component (button/link) |
| src/design-system/components/menu-item/MenuItem.styles.css | Adds menu item styling |
| src/design-system/components/menu-item/index.ts | Adds barrel export |
| src/design-system/components/login-modal/LoginModal.ts | Adds login modal UI and submission logic |
| src/design-system/components/login-modal/LoginModal.styles.css | Adds login modal styling |
| src/design-system/components/login-modal/LoginModal.stories.ts | Adds Storybook stories for modal states |
| src/design-system/components/login-modal/index.ts | Adds barrel export |
| src/design-system/components/dialogs-root/index.ts | Adds barrel export |
| src/design-system/components/dialogs-root/DialogsRoot.ts | Adds root that renders dialogs from global events |
| src/design-system/components/dialog/index.ts | Adds barrel export |
| src/design-system/components/dialog/Dialog.ts | Adds dialog wrapper over native <dialog> |
| src/design-system/components/dialog/Dialog.styles.css | Adds dialog styling |
| src/design-system/components/dialog-provider/index.ts | Adds barrel export |
| src/design-system/components/dialog-provider/DialogProvider.ts | Provides dialog context + mounted event |
| src/design-system/components/dialog-header/index.ts | Adds barrel export |
| src/design-system/components/dialog-header/DialogHeader.ts | Adds dialog header component |
| src/design-system/components/dialog-header/DialogHeader.styles.css | Adds header styling |
| src/design-system/components/dialog-footer/index.ts | Adds barrel export |
| src/design-system/components/dialog-footer/DialogFooter.ts | Adds dialog footer component |
| src/design-system/components/dialog-footer/DialogFooter.styles.css | Adds footer styling |
| src/design-system/components/dialog-content/index.ts | Adds barrel export |
| src/design-system/components/dialog-content/DialogContent.ts | Adds dialog content component |
| src/design-system/components/dialog-content/DialogContent.styles.css | Adds content styling |
| src/design-system/components/combobox/index.ts | Adds barrel export |
| src/design-system/components/combobox/Combobox.ts | Adds combobox component w/ popover options |
| src/design-system/components/combobox/Combobox.styles.css | Adds combobox styling |
| src/design-system/components/combobox/Combobox.stories.ts | Adds Storybook story for combobox |
| src/design-system/components/combobox-option/index.ts | Adds barrel export |
| src/design-system/components/combobox-option/ComboboxOption.ts | Adds combobox option element |
| src/design-system/components/button/index.ts | Adds barrel export |
| src/design-system/components/button/Button.ts | Adds design-system button component |
| src/design-system/components/button/Button.styles.css | Adds button styling + variants |
| src/design-system/components/button/Button.stories.ts | Adds Storybook stories for button variants |
| src/design-system/components/account/index.ts | Adds barrel export |
| src/design-system/components/account/Account.ts | Adds auth-aware account UI with menu/actions |
| src/design-system/components/account/Account.styles.css | Adds account styling |
| src/design-system/components/account/Account.stories.ts | Adds Storybook story for account |
| patches/tailwindcss+4.3.0.patch | Adds patch-package patch for Tailwind preflight |
| package.json | Bumps version; adds deps/tooling; adds CSS exports |
| jest.config.mjs | Mocks ~icons/* imports for Jest |
| config/webpack.mjs | Adds helper to exclude paths from existing rules |
| config/postcss.mjs | Adds PostCSS + Tailwind processing for lit-css-loader |
| config/icons.mjs | Adds custom unplugin-icons compiler/customizer |
| config/babel.mjs | Adds Babel config for Lit decorators + path resolution |
| babel.config.mjs | Applies Lit decorator overrides for selected paths |
| .storybook/preview.js | Imports new CSS variable files into Storybook |
| .storybook/main.js | Adds decorators/icons/lit-css-loader to Storybook webpack |
| .gitignore | Stops ignoring lib/ directory |
| mocks/iconsMock.js | Adds Jest mock module for icon imports |
Comments suppressed due to low confidence (1)
package.json:3
- The PR title is "Update version", but this change set also introduces a large design-system/primitives/storybook refactor and new build tooling (Tailwind, unplugin-icons, patch-package, new components). Consider updating the PR title/description so reviewers and release notes reflect the actual scope.
"version": "3.1.2",
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+64
to
+67
| <solid-ui-button | ||
| variant="secondary" | ||
| @click="${() => this.dialog?.close()}" | ||
| > |
Comment on lines
+49
to
+52
| <solid-ui-button variant="ghost" @click=${this.close}> | ||
| <span class="sr-only">Close</span> | ||
| <icon-lucide-x slot="icon"></icon-lucide-x> | ||
| </solid-ui-button> |
Comment on lines
+22
to
+26
| protected firstUpdated () { | ||
| const slot = this.shadowRoot?.lastChild as HTMLSlotElement | undefined | ||
|
|
||
| this.dispatchEvent(new CustomEvent('mounted', { bubbles: true, composed: true, detail: slot?.assignedElements()[0] })) | ||
| } |
Comment on lines
+8
to
+28
| protected willUpdate (changedProperties: Map<string, any>) { | ||
| super.willUpdate(changedProperties) | ||
|
|
||
| const states = this.static().states | ||
|
|
||
| if (!states) { | ||
| return | ||
| } | ||
|
|
||
| const internals = this.getInternals() | ||
|
|
||
| for (const [state, condition] of Object.entries(states)) { | ||
| const matches = condition(this) | ||
|
|
||
| if (matches && !internals.states.has(state)) { | ||
| internals.states.add(state) | ||
| } else if (!matches && internals.states.has(state)) { | ||
| internals.states.delete(state) | ||
| } | ||
| } | ||
| } |
Comment on lines
+5
to
+7
| get account (): Account | null { | ||
| throw new Error('Can\'t use auth, missing context provider') | ||
| } |
Comment on lines
+11
to
+29
| export default class DialogsRoot extends WebComponent { | ||
| @state() | ||
| private accessor dialogs: Dialog[] = [] | ||
|
|
||
| connectedCallback (): void { | ||
| super.connectedCallback() | ||
|
|
||
| window.addEventListener(ShowDialogEvent.eventName, (event) => { | ||
| event.stopImmediatePropagation() | ||
|
|
||
| this.dialogs = [...this.dialogs, event.dialog] | ||
| }) | ||
|
|
||
| window.addEventListener(CloseDialogEvent.eventName, (event) => { | ||
| event.stopPropagation() | ||
|
|
||
| this.dialogs = this.dialogs.filter(dialog => dialog.id !== event.id) | ||
| }) | ||
| } |
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.
No description provided.