🤖 Bip Bop - Fusion React Components Release

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@equinor/fusion-react-styles@2.0.0

Major Changes

• 15eacdf: Remove @material-ui/styles dependency and replace with custom JSS-based implementation for React 19 compatibility.

  ref: React 19: Remove Material-UI from @equinor/fusion-react-styles (v1.0.0) fusion-framework#3698

  Breaking Changes

  • Removed @material-ui/styles dependency - replaced with direct JSS integration
  • All Material-UI v4 styling APIs are now implemented internally
  • No API changes - existing code should work without modifications

  Added

  • Custom makeStyles implementation using JSS directly
  • Custom StylesProvider with enhanced scope isolation via seed prefixes
  • Custom ThemeProvider with React 19 compatibility
  • Comprehensive test suite with Vitest (52 tests, 100% statement coverage)
  • Utility modules in src/utils/:
    • jss-setup.ts - JSS instance configuration
    • class-name-generator.ts - Class name generation logic
    • sheet-manager.ts - Stylesheet caching and management
    • contexts.ts - React context definitions
  • TSDoc documentation for all exported APIs
  • Updated README with comprehensive documentation

  Changed

  • Package now uses JSS directly instead of Material-UI wrapper
  • Improved TypeScript types with better inference
  • Enhanced class name isolation for micro-frontend scenarios

  Technical Details

  • React 19 compatible (tested with React ^18 || ^19)
  • Uses JSS v10 with all necessary plugins
  • Maintains backward compatibility with existing API surface
  • Full test coverage with Vitest and React Testing Library

Minor Changes

• 15eacdf: Enhanced theme system with support for extending FusionTheme with custom properties, improved nested theme composition, and comprehensive documentation.

  Added

  • Theme Extension Support: FusionTheme now supports extending with custom properties using generics:

    type MyTheme = FusionTheme<{ colors: { primary: ColorStyleProperty } }>;

  • Custom Base Theme Merging: createTheme now accepts an optional baseTheme parameter for merging with custom base themes:

    const extendedTheme = createTheme(
      { colors: { ui: { background__danger: newColor } } },
      outerTheme,
    );

  • Deep Merging Improvements: Enhanced deepMerge function properly handles nested theme properties, Record types, and StyleProperty instances
  • Type Exports: Explicitly exported ThemeProviderProps, StylesProviderProps, FusionTheme, StyleDefinition, and createTheme for better TypeScript support
  • Complete TSDoc Documentation: All exported functions, types, and interfaces now have comprehensive TSDoc comments with examples, parameter descriptions, and usage patterns
  • 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

  Changed

  • createTheme signature now accepts optional baseTheme parameter (backward compatible)
  • Improved type inference for extended themes in ThemeProvider, useTheme, and makeStyles
  • Better handling of nested theme composition when using theme functions in nested ThemeProvider components
  • 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.
  • README Updated: Updated all documentation examples to use correct getVariable() API for theme properties

  Technical Details

  • Deep merging now correctly handles StyleProperty instances (replaces instead of merging)
  • Theme composition works correctly with nested ThemeProvider components
  • All types are properly exported and documented with complete TSDoc comments
  • Typography properties accessed via .style.fontSize, .style.fontWeight, etc. for proper CSS value extraction
  • Color properties accessed via .getVariable('color') method to get CSS variable strings
  • Spacing properties accessed via .getVariable('padding') method to get CSS variable strings
  • makeStyles now returns Record<ClassKey, string> where ClassKey is inferred from style rules, providing type-safe access to class names when using createStyles

@equinor/fusion-react-context-selector@2.0.1

Patch Changes

• Updated dependencies [15eacdf]
• Updated dependencies [15eacdf]
  • @equinor/fusion-react-styles@2.0.0

@equinor/fusion-react-errorboundary@2.0.1

Patch Changes

• Updated dependencies [15eacdf]
• Updated dependencies [15eacdf]
  • @equinor/fusion-react-styles@2.0.0

@equinor/fusion-react-filter@2.0.1

Patch Changes

• Updated dependencies [15eacdf]
• Updated dependencies [15eacdf]
  • @equinor/fusion-react-styles@2.0.0

@equinor/fusion-react-hanging-garden@2.0.1

Patch Changes

• Updated dependencies [15eacdf]
• Updated dependencies [15eacdf]
  • @equinor/fusion-react-styles@2.0.0

@equinor/fusion-react-components-stories@5.0.1

Patch Changes

• 15eacdf: Add comprehensive Storybook documentation and stories for @equinor/fusion-react-styles package.

  ref: React 19: Remove Material-UI from @equinor/fusion-react-styles (v1.0.0) fusion-framework#3698

  Added

  • Styles Documentation (styles.mdx): Comprehensive MDX documentation page showcasing all styling features
  • Story Groups: Organized stories into logical groups:
    • Basic Usage: Basic styles, dynamic styles, and theme-based styles
    • Scope Isolation: Demonstrates critical micro-frontend style isolation with nested and side-by-side StylesProvider examples
    • Advanced Features: Nested selectors, multiple style rules, and style caching
    • Theme System: Theme composition, useTheme hook examples, and Theme Extension guide
    • Utilities: createStyles helper examples
  • Visual Demonstrations: Interactive stories showing:
    • Class name generation and isolation
    • Dynamic style updates based on props
    • Theme integration using actual Fusion theme CSS values
    • CSS features like nested selectors and hover states
    • Theme Extension: Step-by-step guide for extending FusionTheme with custom properties

  Changed

  • Storybook port updated to 3000
  • Removed @material-ui/styles dependency from Storybook package
  • 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

• Updated dependencies [15eacdf]

• Updated dependencies [15eacdf]

  • @equinor/fusion-react-styles@2.0.0
  • @equinor/fusion-react-context-selector@2.0.1
  • @equinor/fusion-react-errorboundary@2.0.1
  • @equinor/fusion-react-filter@2.0.1
  • @equinor/fusion-react-hanging-garden@2.0.1