Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add storybook to ui-components #7588

Merged
merged 9 commits into from Dec 16, 2019

Conversation

blink1073
Copy link
Member

@blink1073 blink1073 commented Dec 4, 2019

References

Fixes #6799

Storybook is an app that allows hot-reloading of components to enable fast iteration of design, especially for React components.
The included story imports the @jupyterlab/light-theme-extension so that a themed component can be created quickly.

image

Code changes

Adds storybook infrastructure and a simple story to ui-components.

User-facing changes

Backwards-incompatible changes

@jupyterlab-dev-mode
Copy link

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link: Binder

@telamonian
Copy link
Member

I'm trying this out right now

@telamonian
Copy link
Member

Had a heck of a time getting storybook to work with our own Button component from ui-components/src/blueprint.tsx. I kept running into a million errors of the form:

ERROR in [at-loader] ./src/icon/iconimports.ts:41:21
    TS2307: Cannot find module '../../style/icons/toolbar/save.svg'.

Turned out there were two problems:

  • The include path in ui-components/.storybook/tsconfig.json was wrong
  • Storybook automatically adds a rule to the webpack build that loads .svg files using file-loader

I fixed the include path, and I made sure that the expected raw-loader is used for at least the .svg files in ui-components/style.

I've also added a new story for the React version of our icons.

Copy link
Member

@telamonian telamonian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! From my perspective, I think this PR is good to go. I'll add more stories as I go through and fix things in ui-components (I have to rename a bunch of components as part of removing Blueprint and fixing icons anyway)

@telamonian telamonian merged commit 3f3cba0 into jupyterlab:master Dec 16, 2019
@lock lock bot added the status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Jan 15, 2020
@lock lock bot locked as resolved and limited conversation to collaborators Jan 15, 2020
@blink1073 blink1073 deleted the storybook-ui-extensions branch March 29, 2020 09:59
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. tag:Design and UX
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Incorporate Storybook
2 participants