A djangster story on Storybook

import React from 'react'import { Popover } from './Popover'export default {
title: 'Popover',
component: Popover
const Template = (args) => (
<Popover {...args}>
export const Default = Template.bind({})export const Focused = Template.bind({})
Focused.args = {
autoFocus: true

Increased Productivity

Improved testing

How the story is displayed in the browser, including interactive component elements such as popovers. A great example of how powerful Storybook can be can be seen at https://react.ui.audi.



  • First you have to make sure that any global changes made to the app are also made in Storybook. This also indicates that you should avoid global styles in favour of component styles whenever possible.
  • Make sure that the app and Storybook use the same version of webpack because bad things will happen if they do not.
  • MSW, which stands for Mock Service Worker, but could be Magic Sea Weed (jury is still out), is your friend and will make testing components that call APIs a breeze

Client perspective




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store



djangsters are human-friendly IT professionals, who develop web applications, tailored to the individual needs of their customers. https://www.djangsters.de