A Django module integrating Storybook pattern library and Django
Project description
django-storybook
A Django module to intergrate the Storybook pattern library and django
Installation
pip install django-storybook && pip install django-cors-headers
Follow the setup for django-cors-headers here.
Config
Settings.dev
Please note django_storybook disables CSRF protection to allow for local development using Docker. This should not be used in production.
# Enable django_storybook
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = default_headers + ("Access-Control-Allow-Origin", "csrftoken")
URLs
Add the following to your debug urls:
if settings.debug:
urlpatterns += url(r"", include(django_storybook_urls)),
Storybook
Add the following to your webpack.config.js:
"django-storybook": "start-storybook -p 6006 & webpack --mode development --progress --watch",
While your development environment is running:
npm run django-storybook
Templating
To render django templates, template tags and pass in context you simply import the base template and create props that mimic the expected context. The template variable is the relative path to you desired template.
import React from 'react';
import BaseTemplate from '../../../../../django_storybook/static_src/js/base-template.js';
// Set storybook title
export default { title: 'Card' };
// Create props for context
var props = {
template: 'components/atoms/card/card.html',
context: {
card: {
description: "A super cool company I've worked with",
url: "https://wwww.google.com",
button_title: "Vist website"
},
card_image: {
url: "https://via.placeholder.com/250x150?text=William+Blackie"
}
},
}
// Export
export const card = () => (
<BaseTemplate {...props}/>
)
Deployment
Due to disabling CSRF django_storybook is not safe for production. However, deploying a static storybook using storybook deployer is a good alternative.
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django_storybook-0.1.2-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | c9d8d4beb9da93fd9a1e0d2e091dd9f6ce4d09ce99eea814c85c29da79efac3b |
|
MD5 | e56b094530267a872e0299513c0a74df |
|
BLAKE2b-256 | f816503e1624bcab0aaef33abde91a5a19cb69c263c464f63afdaa628e3ffc17 |