React Fluent UI integration with Storybook

Question

The fluent UI components are breaking inside storybook view. Do we need to add any specific addons inside storybook main.js ?

Please find below the details:

.storybook/main.js

  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  "docs": {
    "source": {
      "excludeDecorators": true,
    },
  },
  "webpackFinal": async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.resolve.modules.push('app');

    // Return the altered config
    return config;
  },
}

package.json

"@fluentui/react-icons-northstar": "^0.60.1",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-docs": "^6.5.16",
"@storybook/addon-essentials": "^6.5.16",
"@storybook/addon-interactions": "^6.5.16",
"@storybook/addon-links": "^6.5.16",
"@storybook/builder-webpack5": "^6.5.16",
"@storybook/manager-webpack5": "^6.5.16",
"@storybook/react": "^6.5.16"

Can any one help on this please

Answer 1

Fluent UI components need to be wrapped in a FluentProvider. One way to do this globally in storybook is to add a decorator in the .storybook/preview.(js/ts/jsx/tsx) file:

Note: Besure to rename the preview file extension with jsx or tsx.

Reference: Context For Mocking

import React from 'react';

import type { Preview } from '@storybook/react';
import { FluentProvider, teamsLightTheme } from '@fluentui/react-components';

const preview: Preview = {
  decorators: [
    (Story) => (
      <FluentProvider theme={teamsLightTheme}>
        {/*  Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
        <Story />
      </FluentProvider>
    ),
  ],
  ... other stuff
};

export default preview;