Skip to content

Commit 15eacdf

Browse files
odinrgithub-actions[bot]Copilot
authored
feat(styles): remove Material-UI dependency for React 19 compatibility (#2845)
* feat(styles): remove Material-UI dependency for React 19 compatibility - Remove @material-ui/styles dependency and replace with custom JSS implementation - Add comprehensive test suite with Vitest (52 tests, 100% coverage) - Add TSDoc documentation for all exported APIs - Update README with comprehensive documentation - Add utility modules for JSS setup, class name generation, and sheet management - Enhance StylesProvider with seed-based scope isolation - Improve TypeScript types with better inference BREAKING CHANGE: Removed @material-ui/styles dependency Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> * feat(storybook): add comprehensive styles documentation and stories - Add MDX documentation page for styles package - Organize stories into logical groups (Basic Usage, Scope Isolation, Advanced Features, Theme System, Utilities) - Add visual demonstrations of class name isolation for micro-frontends - Update Storybook port to 3000 - Remove @material-ui/styles dependency from Storybook ref: equinor/fusion-framework#3698 * chore: add pre-release workflow for next branch * chore: add pre-release configuration * chore: update pnpm-lock.yaml * Version Packages (preview) (#2846) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: ignore .changeset directory in biome * chore: add changeset:publish:pre-release script * fix: forward arguments to changeset:publish:pre-release script * fix: remove incorrect -- flag from changeset:publish:pre-release * chore: update packageManager to pnpm@10.20.0 * feat(styles): add theme extension support and improve nested theme composition - Add support for extending FusionTheme with custom properties using generics - Enhance createTheme to accept optional baseTheme parameter for nested themes - Improve deep merging to properly handle StyleProperty instances and Record types - Export ThemeProviderProps and StylesProviderProps interfaces for better TypeScript support - Add explicit exports for createTheme, FusionTheme, and StyleDefinition - Update tests to use createTheme instead of plain objects - Fix theme merging in nested ThemeProvider scenarios All changes are backward compatible. Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> * docs: add TSDoc documentation and update Storybook stories - Add comprehensive TSDoc comments to all exported functions, types, and interfaces in styles package - Update all Storybook stories to use theme CSS values instead of custom CSS - Add ThemeExtension story demonstrating how to extend FusionTheme - Update changesets to reflect documentation improvements - Clear pre.json changesets array for re-release * Version Packages (preview) (#2847) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: update changeset:publish:pre-release script to use dynamic NPM tag - Modify the changeset:publish:pre-release script in package.json to include a dynamic NPM tag using the environment variable. - Update GitHub Actions workflow to pass the NPM tag as an environment variable for the publish step. Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> * chore: configure npm authentication in GitHub Actions workflow - Add a step to the GitHub Actions workflow to set up npm authentication using the NPM_AUTH_TOKEN secret. - Ensure the changeset:publish:pre-release script in package.json uses the correct NPM tag format. Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> * chore: update changesets and add TypeScript definitions - Remove unused changeset reference from pre.json. - Add TypeScript definitions path to package.json for better type support. Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> * Version Packages (preview) (#2848) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: update version and enhance makeStyles functionality - Bump version to 2.0.0-preview.3 in package.json. - Introduce unique identifier generation for makeStyles instances to ensure stylesheet isolation. - Implement a simple hash function for generating shorter class names in production. - Update makeStyles to utilize the new unique name generation logic. - Remove outdated create-styles test file and replace it with a comprehensive test suite in create-styles.test.tsx. Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> * fix(styles): update theme API usage to getVariable() and improve type safety - Replace incorrect .css and getAttribute() usage with getVariable() API - Update all storybook stories to use correct theme property access patterns - Enhance makeStyles type inference to return Record<ClassKey, string> - Improve createStyles to preserve literal key types for better type safety - Update README with comprehensive documentation on theme property access - Update changesets to reflect correct API usage - Fix test files to match new API signatures BREAKING CHANGE: Theme properties now require getVariable() method instead of .css property: - Colors: theme.colors.*.getVariable('color') - Spacing: theme.spacing.*.getVariable('padding') - Typography: theme.typography.*.style.* (unchanged) The return type of makeStyles is now Record<ClassKey, string> where ClassKey is inferred from style rules when using createStyles, providing compile-time type safety for class name access. * feat(styles): add hot-reload support and improve sheet management - Add hot-reload detection using style hashing (dev only) - Implement shared sheet detection to prevent premature detachment - Simplify scopeId generation and instance naming - Add warning when name option is missing from makeStyles - Improve sheet cleanup logic to handle shared sheets correctly - Update tsconfig to exclude test files from build - Bump version to 2.0.0-preview.5 * docs(styles): enhance TSDoc comments and inline documentation - Add comprehensive TSDoc comments to all source files - Fix all TSDoc examples to use correct theme API (getVariable) - Add inline maintainer comments explaining complex logic - Add Biome ignore comments for all explicit 'any' types with proper reasoning - Update README with validated examples and comprehensive documentation - Remove ESLint comments (project uses Biome) - Improve code comments throughout the package for better maintainability * fix(styles): make Props optional in makeStyles when not specified Changed default Props type from Record<string, unknown> to {} in makeStyles overloads. This ensures keyof Props evaluates to never when Props is empty, making the conditional type return (props?: Props) instead of requiring props. Fixes build errors where useStyles() was called without arguments but TypeScript required props parameter. * Update .changeset/react-styles-theme-extensions.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: exit pre-release mode * chore: reset package versions and changelogs to main * chore: regen lockfile Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> --------- Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 51413d3 commit 15eacdf

39 files changed

+5699
-218
lines changed

‎.changeset/react-styles-remove-material-ui.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
"@equinor/fusion-react-styles": major
3+
---
4+
5+
Remove `@material-ui/styles` dependency and replace with custom JSS-based implementation for React 19 compatibility.
6+
7+
ref: https://github.com/equinor/fusion-framework/issues/3698
8+
9+
### Breaking Changes
10+
11+
- Removed `@material-ui/styles` dependency - replaced with direct JSS integration
12+
- All Material-UI v4 styling APIs are now implemented internally
13+
- No API changes - existing code should work without modifications
14+
15+
### Added
16+
17+
- Custom `makeStyles` implementation using JSS directly
18+
- Custom `StylesProvider` with enhanced scope isolation via seed prefixes
19+
- Custom `ThemeProvider` with React 19 compatibility
20+
- Comprehensive test suite with Vitest (52 tests, 100% statement coverage)
21+
- Utility modules in `src/utils/`:
22+
- `jss-setup.ts` - JSS instance configuration
23+
- `class-name-generator.ts` - Class name generation logic
24+
- `sheet-manager.ts` - Stylesheet caching and management
25+
- `contexts.ts` - React context definitions
26+
- TSDoc documentation for all exported APIs
27+
- Updated README with comprehensive documentation
28+
29+
### Changed
30+
31+
- Package now uses JSS directly instead of Material-UI wrapper
32+
- Improved TypeScript types with better inference
33+
- Enhanced class name isolation for micro-frontend scenarios
34+
35+
### Technical Details
36+
37+
- React 19 compatible (tested with React ^18 || ^19)
38+
- Uses JSS v10 with all necessary plugins
39+
- Maintains backward compatibility with existing API surface
40+
- Full test coverage with Vitest and React Testing Library

‎.changeset/react-styles-theme-extensions.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
"@equinor/fusion-react-styles": minor
3+
---
4+
5+
Enhanced theme system with support for extending `FusionTheme` with custom properties, improved nested theme composition, and comprehensive documentation.
6+
7+
### Added
8+
9+
- **Theme Extension Support**: `FusionTheme` now supports extending with custom properties using generics:
10+
```typescript
11+
type MyTheme = FusionTheme<{ colors: { primary: ColorStyleProperty } }>;
12+
```
13+
- **Custom Base Theme Merging**: `createTheme` now accepts an optional `baseTheme` parameter for merging with custom base themes:
14+
```typescript
15+
const extendedTheme = createTheme(
16+
{ colors: { ui: { background__danger: newColor } } },
17+
outerTheme
18+
);
19+
```
20+
- **Deep Merging Improvements**: Enhanced `deepMerge` function properly handles nested theme properties, `Record` types, and `StyleProperty` instances
21+
- **Type Exports**: Explicitly exported `ThemeProviderProps`, `StylesProviderProps`, `FusionTheme`, `StyleDefinition`, and `createTheme` for better TypeScript support
22+
- **Complete TSDoc Documentation**: All exported functions, types, and interfaces now have comprehensive TSDoc comments with examples, parameter descriptions, and usage patterns
23+
- **Theme Extension Storybook Story**: New `ThemeExtension` story demonstrating how to extend themes with custom properties, including step-by-step examples for type definition, theme creation, and usage with `useTheme` and `makeStyles`
24+
25+
### Changed
26+
27+
- `createTheme` signature now accepts optional `baseTheme` parameter (backward compatible)
28+
- Improved type inference for extended themes in `ThemeProvider`, `useTheme`, and `makeStyles`
29+
- Better handling of nested theme composition when using theme functions in nested `ThemeProvider` components
30+
- **Storybook Stories Updated**: All stories now consistently use the `.getVariable()` method for accessing theme CSS values (e.g., `theme.colors.*.getVariable('color')`, `theme.spacing.*.getVariable('padding')`). Direct usage of the `.css` property has been replaced to ensure proper integration with Fusion design system tokens and to match the documented API usage.
31+
- **README Updated**: Updated all documentation examples to use correct `getVariable()` API for theme properties
32+
33+
### Technical Details
34+
35+
- Deep merging now correctly handles `StyleProperty` instances (replaces instead of merging)
36+
- Theme composition works correctly with nested `ThemeProvider` components
37+
- All types are properly exported and documented with complete TSDoc comments
38+
- Typography properties accessed via `.style.fontSize`, `.style.fontWeight`, etc. for proper CSS value extraction
39+
- Color properties accessed via `.getVariable('color')` method to get CSS variable strings
40+
- Spacing properties accessed via `.getVariable('padding')` method to get CSS variable strings
41+
- `makeStyles` now returns `Record<ClassKey, string>` where `ClassKey` is inferred from style rules, providing type-safe access to class names when using `createStyles`

‎.changeset/storybook-styles-docs.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
"@equinor/fusion-react-components-stories": patch
3+
---
4+
5+
Add comprehensive Storybook documentation and stories for `@equinor/fusion-react-styles` package.
6+
7+
ref: https://github.com/equinor/fusion-framework/issues/3698
8+
9+
### Added
10+
11+
- **Styles Documentation (`styles.mdx`)**: Comprehensive MDX documentation page showcasing all styling features
12+
- **Story Groups**: Organized stories into logical groups:
13+
- **Basic Usage**: Basic styles, dynamic styles, and theme-based styles
14+
- **Scope Isolation**: Demonstrates critical micro-frontend style isolation with nested and side-by-side `StylesProvider` examples
15+
- **Advanced Features**: Nested selectors, multiple style rules, and style caching
16+
- **Theme System**: Theme composition, `useTheme` hook examples, and **Theme Extension** guide
17+
- **Utilities**: `createStyles` helper examples
18+
- **Visual Demonstrations**: Interactive stories showing:
19+
- Class name generation and isolation
20+
- Dynamic style updates based on props
21+
- Theme integration using actual Fusion theme CSS values
22+
- CSS features like nested selectors and hover states
23+
- **Theme Extension**: Step-by-step guide for extending `FusionTheme` with custom properties
24+
25+
### Changed
26+
27+
- Storybook port updated to 3000
28+
- Removed `@material-ui/styles` dependency from Storybook package
29+
- **All stories now use Fusion theme CSS values**: Replaced hardcoded custom CSS with proper theme values using `getVariable()` API (`theme.colors.*.getVariable('color')`, `theme.spacing.*.getVariable('padding')`, `theme.typography.*.style.*`) for consistent design system integration
30+

‎.github/workflows/next.yml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
name: Fusion React Components Pre-Release
2+
3+
on:
4+
push:
5+
branches-ignore:
6+
- main
7+
8+
concurrency: ${{ github.workflow }}-${{ github.ref }}
9+
permissions:
10+
contents: write
11+
pull-requests: write
12+
13+
jobs:
14+
release-pkg:
15+
name: Version or publish pre-release of packages
16+
runs-on: ubuntu-latest
17+
outputs:
18+
published: ${{ steps.changesets.outputs.published }}
19+
hasChangesets: ${{ steps.changesets.outputs.hasChangesets }}
20+
steps:
21+
- uses: actions/checkout@v5
22+
with:
23+
fetch-depth: 0
24+
25+
- name: Validate pre-release configuration
26+
id: tag
27+
run: |
28+
if [ ! -f ".changeset/pre.json" ]; then
29+
echo "Error: .changeset/pre.json is required for pre-release workflow"
30+
exit 1
31+
fi
32+
TAG=$(node -p "require('./.changeset/pre.json').tag")
33+
echo "tag=$TAG" >> $GITHUB_OUTPUT
34+
echo "Using tag from pre.json: $TAG"
35+
36+
- name: Setup node and install deps
37+
uses: ./.github/workflows/actions/node-setup
38+
39+
- name: Config npm auth
40+
run: pnpm config set '//registry.npmjs.org/:_authToken' "${NPM_AUTH_TOKEN}"
41+
env:
42+
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
43+
44+
- name: Create Release Pull Request or Publish to npm
45+
id: changesets
46+
uses: changesets/action@v1
47+
with:
48+
title: '🤖 Bip Bop - Fusion React Components Pre-Release'
49+
version: pnpm changeset:version
50+
publish: pnpm changeset:publish:pre-release
51+
env:
52+
GITHUB_TOKEN: ${{ github.token }}
53+
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
54+
NPM_TAG: ${{ steps.tag.outputs.tag }}
55+
56+
- name: convert Changeset PR to draft
57+
if: steps.changesets.outputs.published == 'false' && steps.changesets.outputs.pullRequestNumber
58+
run: gh pr ready ${{ steps.changesets.outputs.pullRequestNumber }} --undo
59+
env:
60+
GH_TOKEN: ${{ github.token }}
61+

‎biome.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
},
88
"files": {
99
"ignoreUnknown": false,
10-
"includes": ["**", "!storybook", "!packages/hanging-garden"]
10+
"includes": ["**", "!storybook", "!packages/hanging-garden", "!.changeset"]
1111
},
1212
"formatter": {
1313
"enabled": true,

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"yarn": "please-use-pnpm",
1212
"pnpm": ">=9"
1313
},
14-
"packageManager": "pnpm@9.1.0",
14+
"packageManager": "pnpm@10.20.0",
1515
"scripts": {
1616
"test": "lerna run --no-bail test",
1717
"start": "pnpm run storybook",
@@ -33,7 +33,8 @@
3333
"lerna:update": "lernaupdate",
3434
"lerna:dedupe": "lernaupdate --dedupe",
3535
"changeset:version": "changeset version && pnpm install --lockfile-only",
36-
"changeset:publish": "pnpm changeset tag && pnpm publish -r --no-git-checks"
36+
"changeset:publish": "pnpm changeset tag && pnpm publish -r --no-git-checks",
37+
"changeset:publish:pre-release": "pnpm publish -r --no-git-checks --report-summary --tag ${NPM_TAG}"
3738
},
3839
"repository": {
3940
"type": "git",

0 commit comments

Comments
 (0)