microsoft / fluentui-storybook-addons

Repository for custom addons used in Storybook for Fluent UI React

Project

This repository contains Storybook addons and their dependencies for Fluent UI React Storybook.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

fluentui-storybook-addons's Issues

`context.story` is not stable enough to be used as the export name

Previously the addon used context.story as the name of the export for
codoesandbox. However the below example shows how this value can be
incorrect

export const MyStory = () => {/* story */}
MyStory.storyName = 'My custom story name'

This will break the export as the index.ts will include the following

import * as ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';
import { My custom story as Example } from './example';
//
// You can edit this example in "example.tsx".
//
ReactDOM.render(
    <FluentProvider theme={webLightTheme}>
        <Example />
    </FluentProvider>,
    document.getElementById('root'),
);

The solution should be to use a babel transform to find the actual name of the exported function and make it available as a parameter for the addon to consume. This can simply be added as another plugin similary to the modifyImports plugin

Babel plugin: separate package + unit tests

Babel plugin in storybook-addon-export-to-codesandbox/.storybook/babel.plugin.js should be exported as a separate package and set as a peer dependency of storybook-addon-export-to-codesandbox .

We should also add unit tests for it via https://github.com/babel-utils/babel-plugin-tester.

Error on running yarn start

Cloned repo
ran yarn
yarn start

and i get the following

Tried several other commands as well (build, storybook, etc) same result

10:25:51 AM - Starting compilation in watch mode...
[0] [1] 
[0] [0] Browserslist: caniuse-lite is outdated. Please run:
[0] [0] npx browserslist@latest --update-db
[0] [0] 
[0] [0] Why you should do it regularly:
[0] [0] https://github.com/browserslist/browserslist#browsers-data-updating
[1] info @storybook/react v6.3.6
[1] info 
[1] info => Loading presets
[0] [0] Successfully compiled 23 files with Babel (749ms).
[1] info => Loading 1 config file in "/home/micahgodbolt/git/fluentui-storybook-addons/storybook-addon-export-to-codesandbox/.storybook"
[1] info => Loading 9 other files in "/home/micahgodbolt/git/fluentui-storybook-addons/storybook-addon-export-to-codesandbox/.storybook"
[1] info => Adding stories defined in "/home/micahgodbolt/git/fluentui-storybook-addons/storybook-addon-export-to-codesandbox/.storybook/main.js"
[1] info => Using implicit CSS loaders
[1] ERR! Error: Cannot find module '../src/babel.plugin'

Automatic detection of dependencies versions

If dependency version is not set manually, we currently require:

• version ^9.0.0-alpha for @flunentui/react- packages
• latest version for all other packages

We want to change this behavior so the version would be automatically inferred from yarn.lock