Repository files navigation

Paste is a design system used to build accessible, consistent, and high quality customer experiences at Twilio. Paste is open source and contributions are welcome.

For usage guidelines, please see ourdocumentation website.

Clone the repo then run the following commands from within the repo's folder:

yarn build # builds all of Paste

Then you can run a local storybook instance with:

yarn start:storybook

For more commands, please reference thepackage.json file.

Before contributing, please make sure that you read ourContributing Guidelines and agree with ourCode of Conduct.

Each change to a package must come with achangeset. You should have an individual changeset for each package you have touched.

To create a changeset you can run:

yarn changeset

Follow the prompts shown to you in your terminal.

Instructions on how to use the cli tool can be foundhere, but all you should need to do is generate a changeset and commit it with your Pull Request.

Storybook

We use Chromatic to host the Storybook instance.

Paste is a monorepo and has some specific requirements in how it handles dependencies.

Each package can have dev dep requirements, such as typescript. As this is a monorepo using yarn workspaces there is no requirement to list these as package dev deps. All dev deps are hoisted to the monorepo root. Declare them at the root package.json file.

A special note about peer deps: Peer dependencies should be hoisted up the dependency tree. Ifpackage-a listspackage-b as a peer dep, andpackage-b listspackage-c as a peer dep,package-c must also be listed as a peer dep forpackage-a. All the way down the tree.

A real example might be aButton.Button may only have a peer dependency onBox, butBox has a peer dependency onTheme,Design-Tokens, andStyle-Props. These child peer deps need to be hoisted to theButton package. As suchButton deps should look like:

{  "name": "button",  "peerDependencies": {    "@twilio-paste/box": "^0.0.1",    "@twilio-paste/theme": "^0.0.1",    "@twilio-paste/design-tokens": "^0.0.1",    "@twilio-paste/style-props": "^0.0.1"  }}

When a package has a peer dependency on another internal package in the mono repo, it must also be listed as a dev dependency for compilation.

{  "name": "button",  "peerDependencies": {    "react": "^17.0.2",    "react-dom": "^17.0.2"    "@twilio-paste/box": "^0.0.1",    "@twilio-paste/theme": "^0.0.1",    "@twilio-paste/design-tokens": "^0.0.1",    "@twilio-paste/style-props": "^0.0.1"  },  "devDependencies": {    "@twilio-paste/box": "^0.0.1",    "@twilio-paste/theme": "^0.0.1",    "@twilio-paste/design-tokens": "^0.0.1",    "@twilio-paste/style-props": "^0.0.1"  }}

To ensure peer dependencies are listed correctly, a check is run on the monorepo on every build.

yarn packages:check

If missing deps are detected you will be informed of which packages are missing what deps.

To fix missing peer deps, run the fix command.

yarn packages:fix

Releasing Paste happens via CI/CD usingChangesets.

MIT