storybook-django

Develop Django UI components in isolation, with Storybook

Showing:

Popularity

Downloads/wk

20

GitHub Stars

30

Maintenance

Last Commit

2mos ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

1.0KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

Storybook for Django Demo site

npm Build status

Storybook for Django is an experimental UI development environment for your Django UI components. Work on components in isolation from your site or app. Test them with mock data. Document as you go. Have a look at our online demo.

Screenshot of the Storybook UI, with a Django UI component displaying

How it works

Server-side, this uses Django pattern library to mock template context and template tags. Client-side, we use Storybook’s React API to create stories from our templates.

Getting started

Does this sound useful? Great, let’s get you set up. First, start by setting up django-pattern-library. Then, from the root of your project,

npx -p @storybook/cli sb init
# Once the project is set up,
npm install --save-dev storybook-django

Then, copy the code from demo/storybook into your project.

Where this is heading

See torchbox/django-pattern-library#103 – Storybook prototype of the pattern library for more context on this project, and to keep up with changes to it in relation with django-pattern-library.

Demo site

The demo site showcases:

  • storybook-django, storybook-django.herokuapp.com.
  • The equivalent django-pattern-library, storybook-django.herokuapp.com/pattern-library/.
  • Storybook v6 with the docs, controls, a11y, backgrounds, viewport addons.
  • A migration setup dynamically generating Storybook stories from Django pattern library YAML files.
  • Examples of using JS in stories, or displaying Markdown alongside the components in docs mode.
  • Stories for React components alongside the Django ones.

Contributing

See anything you like in here? Anything missing? We welcome all support, whether on bug reports, feature requests, code, design, reviews, tests, documentation, and more. Please have a look at our contribution guidelines.

If you just want to set up the project on your own computer, the contribution guidelines also contain all of the setup commands.

Credits

View the full list of contributors. MIT licensed.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100