@postscript/components

Postscript Component Library

Storybook

The main branch is used to create a Storybook instance at components.postscript.io, via Chromatic.

NPM package usage

This repo generates an NPM package of components. Use components by importing them individually.

npm i @postscript/components

import { Button } from '@postscript/components';

const App = () => <Button>A Happy Button</Button>;

Local repo usage

CSS variables, reset, and design tokens

Import our base CSS once in your project.

import '@postscript/components/dist/esm/main.css';

Contributing

• Jira project
• Slack #front-end

Testing changes in other repos

Currently, the easiest way to test changes from a feature branch in another repo is to publish a one-off, unique version of the package under a tag specific to you. View instructions

Versioning

Commits to main will publish a new @postscript/components package version. Use one of the following conventions when commiting/titling PRs to control semantic versioning.

• Major: your commit introduces any breaking change
  • add a BREAKING CHANGE: prefix to the commit message (bumps the major version X.#.#)
  • e.g. changes to existing props, component refactors, module naming
• Minor: your commit adds new functionality in a backward compatible way
  • add a feature: or feat: prefix to your commit message (bumps the minor version #.Y.#)
  • e.g. add net new feature
• Patch: your commit changes something that already existed in a backward-compatible way
  • do not include either of the above in your commit message or description (bumps the patch version #.#.Z)
  • e.g. add/update minor styles, fix a bug, update a piece of documentation

Follow your commits to postscript-frontend, and address any changes needed to bump version.

Pull requests

PRs require one engineer approval. If working with a designer, tag them as well. Directly requesting review from those with good knowledge of your changes is helpful if they're available.

Additionally, post for review in #pull-requests and #front-end.

How to add a new Icon

We utilize SVGR CLI to turn SVGs into React components. See .svgrrc.js for our config.

1. Add SVG(s) to src/icons/
2. Run npm run svgr
3. Upon success, a summary will be logged
4. Add import * as React from 'react'; to the new module(s)
5. Delete the original SVG file
6. Export the JSX component in src/icons/index.ts; IconSet uses this barrel
7. Run Storybook, and you should see the new component(s) in the Icon story examples automatically if everything has worked correctly

We utilize the following automatic transformations.

Creating components

Create your component with Typescript, its corresponding Storybook file, and a unit test file.

!! Be sure to add your new component to the exports list in src/index.ts and organize its display order in .storybook/preview.js