https://github.com/ezy/govtnz-ds-storybook

A light-weight POC with the aim of producing a govt front-end component library using storybook, built on top of the GovtNZ Design System (Alpha).
https://github.com/ezy/govtnz-ds-storybook

design-system gov government govt javascript nodejs storybook

Last synced: 17 days ago
JSON representation

A light-weight POC with the aim of producing a govt front-end component library using storybook, built on top of the GovtNZ Design System (Alpha).

• Host: GitHub
• URL: https://github.com/ezy/govtnz-ds-storybook
• Owner: ezy
• Created: 2020-06-30T22:57:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-03T04:28:39.000Z (over 4 years ago)
• Last Synced: 2024-11-24T14:12:05.831Z (3 months ago)
• Topics: design-system, gov, government, govt, javascript, nodejs, storybook
• Language: CSS
• Homepage: https://ezra.keddell.nz/govtnz-ds-storybook
• Size: 4.5 MB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Custom theming for GovtNZ Design System

This is a light-weight POC with the aim of producing a govt front-end component library using storybook, built on top of the [GovtNZ Design System (Alpha)](https://github.com/GOVTNZ/govtnz-design-system).

[See the storybook demo](https://ezra.keddell.nz/govtnz-ds-storybook)

## Abstract

The philosophy behind it's build aims to:

- Use only html and css for core story templates

- Leverage the govtnz design system via npm package `@govtnz/ds`

- Provide a framework for customising components

- Be simple enough for a junior dev to operate at a low level

## Method

It uses the html and css templates in the npm package `@govtnz/ds` to:

- Auto-import govtnz templates with `yarn update:govtnz`

- Auto-generate templates with `yarn build:govtnz` from the govtnz html and css output components in `src/template-sources/govtnz-import`

Once the templates have been imported you can overide and customise them:

- Overide templates with any custom elements with `src/template-sources/custom`

- Use a namespaced set of html, css and mdx files to generate stories with docs (eg. `A.html, A.css, A.mdx`)

- Auto-generate a storybook component library from the merged template files with `yarn build:stories`

Then you can generate a storybook component library using `yarn storybook`

## Generate component export

You can generate components from all the templates using `yarn build:components`. They'll build to `dist/`. You can select which type you'll build in `bin/build-templates.js` by adjusting `const generateFilesOfType = "REACT";`. The list of types exist as a map in `templateType()`.