Skip to content

update v9#22

Merged
gfazioli merged 5 commits into
masterfrom
update-v9
Apr 4, 2026
Merged

update v9#22
gfazioli merged 5 commits into
masterfrom
update-v9

Conversation

@gfazioli
Copy link
Copy Markdown
Owner

@gfazioli gfazioli commented Apr 4, 2026

  • *** 📦 build(deps): upgrade to Mantine v9, React 19, and modernize tooling**
  • *** ♻️ refactor: update source code and tests for Mantine v9 and React 19 compatibility**
  • *** ✨ feat(window): add withScrollArea, controlsPosition, and controlsOrder props**
  • *** ✅ test(window): add tests and stories for withScrollArea, controlsPosition, and controlsOrder**

gfazioli added 4 commits April 4, 2026 18:53
* Upgrade @mantine/core and @mantine/hooks to 9.0.0 and update package keyword to mantine-v9
* Replace ESLint with oxlint and Prettier with oxfmt for faster linting and formatting
* Upgrade Yarn from 4.12.0 to 4.13.0 and TypeScript to 6.0.2
* Upgrade Storybook from v8 to v10 with updated addons and framework packages
* Update Window component, hooks, and WindowGroup for Mantine v9 API compatibility
* Upgrade docs dependencies including Next.js 15.5.14, shiki, and @mantinex packages
* Update README to reference Mantine 9.x and React 19 requirements
* Remove deprecated eslint.config.mjs, .prettierrc.mjs, and tsconfig.eslint.json
* Add oxlint.config.ts with comprehensive rules for React, TypeScript, JSX a11y, and Jest
* Refresh CLAUDE.md with updated commands reflecting the new oxfmt and oxlint toolchain
…19 compatibility

* Update hook signatures to use React 19 RefObject<T | null> generic pattern
* Adapt WindowGroup to Mantine v9 factory pattern with updated useProps and useResizeObserver APIs
* Align use-mantine-window orchestrator with new useMergedRef from @mantine/hooks v9
* Update use-window-dimensions to use useMounted and useViewportSize from Mantine v9 hooks
* Refactor use-window-state to match Mantine v9 persistence and state management patterns
* Update Storybook preview to work with MantineProvider from @mantine/core v9
* Adapt Window.test.tsx to use React 19 createRef and updated testing patterns
* Ensure SSR hydration safety with Mantine v9 hook lifecycle changes
…rder props

* Add `withScrollArea` prop (default `true`) to optionally replace ScrollArea with a plain Box for custom scrolling
* Add `controlsPosition` prop (`left`/`right`) for macOS-style or Windows-style header button placement
* Add `controlsOrder` prop to allow custom ordering of close, collapse, and tools buttons
* Add `windowToolsButton` Styles API selector and `data-controls-position` modifier to header
* Create `Window.demo.controlsPosition.tsx` demo showcasing left, right, and custom order configurations
* Create `Window.demo.withScrollArea.tsx` demo comparing ScrollArea vs clipped overflow behavior
* Update configurator demo with new controls for withScrollArea, controlsPosition, collapsed, and fullSizeResizeHandles
* Update `docs.mdx` with new "Disable ScrollArea" and "Controls Position" documentation sections
* Update Styles API definitions, CLAUDE.md architecture docs, and README features list
…osition, and controlsOrder

* Add Storybook stories for WithoutScrollArea comparing ScrollArea vs plain Box content
* Add Storybook stories for ControlsRight demonstrating macOS vs Windows-style button placement
* Add Storybook stories for CustomControlsOrder showing custom button arrangement
* Add unit tests verifying ScrollArea renders by default and is absent when withScrollArea is false
* Add unit tests for controlsPosition left/right with DOM order assertions
* Add unit tests for custom controlsOrder ensuring correct button sequence
* Update root package.json devDependencies to align with Mantine v9 and Storybook 10.x
* Regenerate yarn.lock to reflect updated dependency tree
* Ensure all new tests use the existing renderWithMantine helper for consistency
* Cover edge case: children still render correctly when withScrollArea is false
Copilot AI review requested due to automatic review settings April 4, 2026 19:09
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

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 upgrades the library and its tooling to Mantine v9 + React 19, while extending the Window component API with new header-controls options and optional internal scrolling.

Changes:

  • Upgrade dependencies/tooling (Mantine v9, React 19, Yarn update, Storybook/CI/tooling modernization).
  • Add withScrollArea, controlsPosition, and controlsOrder props to Window, plus docs/stories/tests.
  • Refactor group/context and hooks to match Mantine v9 changes and reduce unnecessary rerenders.

Reviewed changes

Copilot reviewed 32 out of 36 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
tsconfig.json Switch TS module resolution to bundler for modern tooling compatibility.
tsconfig.eslint.json Remove ESLint-specific TS config (tooling migration).
tsconfig.build.json Narrow build include to package/src and set rootDir for declarations.
README.md Document Mantine 9 / React 19 requirement and new Window props.
package/src/WindowGroup.tsx Memoize context value; adjust factory signature.
package/src/WindowGroup.context.ts Replace Mantine optional context helper with React context.
package/src/Window.tsx Implement withScrollArea, controlsPosition, controlsOrder in the header/content.
package/src/Window.test.tsx Update persistence assertion; add tests for new props.
package/src/Window.story.tsx Add stories demonstrating ScrollArea toggle and control placement/order.
package/src/lib/convert-to-pixels.test.ts Add TS directive for SSR window deletion in tests.
package/src/hooks/use-window-state.ts Add hook-deps lint suppressions with rationale.
package/src/hooks/use-window-drag.ts Update window ref typing to allow null.
package/src/hooks/use-window-dimensions.ts Replace Mantine useResizeObserver usage with manual ResizeObserver.
package/src/hooks/use-mantine-window.ts Fix withinPortal defaulting; add hook-deps lint suppressions.
package/package.json Update keywords to Mantine v9.
package.json Update Yarn version, dependencies, and switch lint/format workflow to oxlint/oxfmt.
oxlint.config.ts Introduce oxlint configuration and rule set.
eslint.config.mjs Remove ESLint config (migration away from ESLint).
docs/tsconfig.json Update TS target and moduleResolution to bundler.
docs/styles-api/Window.styles-api.ts Document new data modifiers for styles API.
docs/package.json Bump docs app dependencies to Mantine v9 / latest Next patch.
docs/docs.mdx Add docs sections for ScrollArea toggle and controls positioning/order.
docs/demos/Window.demo.withScrollArea.tsx Add demo for withScrollArea.
docs/demos/Window.demo.controlsPosition.tsx Add demo for controlsPosition/controlsOrder.
docs/demos/Window.demo.configurator.tsx Expose new props in the configurator demo.
docs/demos/index.ts Export new demos.
CLAUDE.md Update contributor docs for new tooling and new Window props.
.yarnrc.yml Update Yarn release path.
.storybook/preview.tsx Migrate theme switching to Storybook toolbar + Mantine forceColorScheme.
.storybook/main.ts Update Storybook v10 config and addons.
.prettierrc.mjs Remove Prettier config (formatting migration).
.oxfmtrc.json Add oxfmt config including import ordering.
.github/workflows/pull_request.yml Use .nvmrc for Node version and rename workflow.
Comments suppressed due to low confidence (1)

package/src/WindowGroup.tsx:67

  • WindowGroupFactory declares a forwarded ref: HTMLDivElement, but the factory callback no longer accepts the ref parameter, and the rendered <Box> only receives ref={containerRef}. This makes ref on <Window.Group> a no-op (and is inconsistent with the Factory typing). Consider re-adding the ref param and merging it with containerRef, or remove the ref from the factory type if the component is intentionally not ref-forwarding.
export const WindowGroup = factory<WindowGroupFactory>((_props) => {
  const props = useProps('WindowGroup', defaultGroupProps, _props);
  const {
    id: groupId = 'window-group',
    withinPortal = false,
    showToolsButton = true,
    defaultLayout,
    groupRef,
    onLayoutChange,
    children,
    style,
    ...others
  } = props;

Comment thread tsconfig.build.json
Comment thread package.json Outdated
Comment thread package/src/Window.test.tsx
Comment thread CLAUDE.md Outdated
- Clarify that disabling withScrollArea replaces the internal ScrollArea with a Box that clips overflow.
- Remove unused eslint and prettier scripts from package.json to clean up the build configuration.
@gfazioli gfazioli merged commit 576ebf3 into master Apr 4, 2026
1 check passed
@gfazioli gfazioli deleted the update-v9 branch April 4, 2026 19:21
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.

2 participants