Storybook: Polis

The purpose of this Storybook component environment is to allow more lightweight and inclusive development of the Polis UI by both designers and developers, with particular intention toward improving accessibility. A secondary goal is to allow for more rapid iteration on the experience of interacting with Polis.

We automatically deploy the most recent version on GitHub Pages:
https://civictechto.github.io/polis-storybook/

Goals

• Display all React components in Storybook.
  • Any React components within Polis' client apps: admin, participation & report.
  • Only React components, not legacy BackboneJS views.
• Make minimal changes to upstream Polis codebase to get Storybook working. (diff)
• Allow any frontend designer with NodeJS installed to work on Polis UI locally within minutes.
• Avoid forcing contributors to set up and run Docker.

Development

Requirements:

• :white_check_mark: NodeJS v18 (tested on v18.17.1)
• :white_check_mark: Git
• :x: Docker (not needed)

git checkout https://github.com/CivicTechTO/polis-storybook
cd polis-storybook

git submodule update --init
npm install

npm run storybook

A browser window will open automatically: http://localhost:6006

(If you have the make command installed, you may run make to see the helper tasks it can help you run.)

Technologies Used

• Storybook. A frontend workshop for building UI components and pages in isolation.
• React.
• GitHub Pages.
• GitHub Actions.
• BackboneJS. (legacy) A lightweight MVC framework for structuring JS apps.
• Handlebones. (legacy) A tiny Backbone + Handlebars view framework.

License

GNU Affero General Public License v3.0 (See LICENSE)