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

jupyterlab-dev-mode bot commented Dec 4, 2019

Thanks for making a pull request to JupyterLab!

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

@blink1073 blink1073 force-pushed the storybook-ui-extensions branch from 3c79bac to eaa217e Compare Dec 12, 2019
@blink1073 blink1073 force-pushed the storybook-ui-extensions branch from 89d9fbb to ed48150 Compare Dec 12, 2019
@telamonian
Copy link
Member

telamonian commented Dec 12, 2019

I'm trying this out right now

@telamonian
Copy link
Member

telamonian commented Dec 12, 2019

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

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 Mar 29, 2020
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