microsoft / fluidstorybook

StorybookJS integration with the Fluid Framework

fluidstorybook

This project provides "stories" for different Fluid examples. In addition to being able to view the rendered Fluid Objects, a source code viewer is also included to make it easy to see how the Fluid Objects works.

Run the following to get started:

• npm install
• npm start

Acknowledgements

This is built using StorybookJs

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.

Trademark

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos 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.

fluidstorybook's Issues

Microsoft All rights reserved Copyright header

Complete the Readme

Explain Directory Structure
Acknowledgements to Storybook team
Instructions for adding a story
Explaination for "Why Loader is needed"

window goes into the footer

the display window overflows into the footer on the docs page.

Modify build-storybook log levels

Log levels currently show warnings but shouldn't. See https://storybook.js.org/docs/react/api/cli-options and the --loglevel switch.

Update .NPMRC to point to npmjs

Figure out difference between storybook build vs storybook start

Start is much more relaxed on build/linting requirements. Start and build should be the same.

tsconfig should actually inherit from fluidframework repo

Make Props/Server adjustable via Fluid Loader React Component

Remove Warning about React state update on unmounted component

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in SourceCodePanel (created by render) in render (created by Context.Consumer) in Location (created by QueryLocation) in QueryLocation (created by Preview)

Issue seems to be located in .storybook/sourcecode-addon/storybookPanel.jsx:

  useEffect(() => {
    channel.on('sourcecode/selectedStory', path => {
      if (rawSources) {
        handleFileChange(path, rawSources);

        // Filter files shown in drop-down to files associated with the files in the same base folder as "path"
        const filteredPaths = Object.keys(rawSources).filter((file, index) => {
          // Grab first part of path
          let firstOfPath = path.split('/').slice(2,4).join('/').toLowerCase();
          return file.toLowerCase().startsWith(firstOfPath);
        });
        setFilteredFiles(filteredPaths);
      }
    })
    return () => channel.removeListener('sourcecode/selectedStory');
  }, [rawSources]);

Looks like removing the call to handleFileChange(path, rawSources); stops the error from showing and diving further it looks like setFileState({ history: newHistory, idx: newIdx }); is the potential culprit.

window browser wrapper not scaling horizontally

the window browser doesn't scale correctly for most the examples.

Add MSFT Headers

Fix source viewer when a user only clicks on the Docs tab

If the user clicks on the Docs tab but not the Canvas tab no emit is fired with the current story file name. This is done through a decorator in .storybook/sourcecode-addon/storybookDecorator.js. Need to find a way to trigger the same emit for MDX/Docs.

Modify theme to fit-in with FluidFramework.com

Need to modify the theme to better fit-in with https://fluidframework.com site. Started initial process.

Update Documentation Links

The https address used for the story MDX links to the documentation currently reference the Azure version of the website domain. We'll need to update it to https://www.fluidframework.com once it's ready or figure out a different way to make that more dynamic (possibly during build with an env variable).

npm start is not working

Hey, I am following the steps mentioned in the readme to run npm install and then run npm start. While install went fine with some warns but start won't work.

I am getting the below issue:

[email protected] start C:\passion\fluid\FluidStorybook
start-storybook -p 9009 -s public

'start-storybook' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: start-storybook -p 9009 -s public
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Reduce vendor bundle size

Due to the number of stories and packages associated with a given story the vendor bundle size has grown large. We need to research dynamic imports and see if we can shrink that down so that a given story can be "lazy loaded".

CI/CD loop

• Add npm build check for PRs

Make Hugo Build Script work across LTS version of node

Currently only 12+