@storybook/mui is a component library based on MUI. It is the ideal package to use for building Storyblok extensions with React as it takes care of the task of styling your components and lets you focus on building business logic. Thus, extensions built with @storybook/mui will seamlessly, visually integrate into Storyblok.

Find the full documentation for this package here.

What is MUI?

From mui.com:

MUI is an open-source React component library that implements Google's Material Design.

It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box.

What is included in this package?

@storybook/mui consists of a MUI theme that styles the MUI standard components according to Storyblok's design system. Since @storybook/mui is based on MUI, all the MUI standard components are available. Some of these components are visualised in the MUI Components section.

@storybook/mui also provides some additional components that are unique to this package. For example, the <AppLayout /> component is great for building custom application extensions. The documentation for all these components is located here.

Getting Started

The steps below explains how to include @storyblok/mui in your project.

Prerequisites

First of all, set up MUI with the help of MUI's official documentation.

With npm:

npm install @mui/material @emotion/react @emotion/styled

With yarn:

yarn add @mui/material @emotion/react @emotion/styled

Installation

Install @storyblok/mui:

npm install --save-exact @storyblok/mui

With yarn:

yarn add --exact @storyblok/mui

Wrap your application within a <ThemeProvider /> component:

import { lightTheme } from '@storyblok/mui'
import {
  CssBaseline,
  Button,
  ThemeProvider
} from "@mui/material";

const App = () => (
    <ThemeProvider theme={lightTheme}>
      <CssBaseline />
      <Button>
        Hello
      </Button>
    </ThemeProvider>
)

Releasing

Releases are automated with release-please. There is no manual version bumping, tagging, or publishing.

1. Merge pull requests into main with a conventional commit title. The title becomes the commit message on main, so it is what determines the next version:
   • fix: → patch release
   • feat: → minor release
   • feat!: / BREAKING CHANGE: → minor release, while the package is still pre-1.0.0
   • chore:, docs:, refactor:, test:, ci:, build:, style: → no release
2. release-please opens and maintains a chore(main): release x.y.z pull request that bumps package.json and updates CHANGELOG.md.
3. (Optional) Update the release notes in the pull request description, which will be used for the GitHub release notes.
4. Merging that pull request tags the release as @storyblok/[email protected], creates the GitHub release, and publishes the package to NPM.