Prisma Lens

Prisma Lens is a Design System, Guidelines and Component Library for the family of Prisma projects and products. Both this document and the actual artefacts are a living system that aims to be evolving incrementally and often.

Principles

• Set up for change. The changes to the system should never be dreaded and small, incremental changes should never be expensive to make. The properties that are built with the system should support this philosophy.
• Highly atomic - The individual components of the system should be as simple and generic as possible but not more - there should never be a component with only one usage site in the system
• Visually low level - The system should be recognizable at the level of typography and spacing, to make sure we have flexible theming options
• Code as source of truth - it's more likely that there's going to be some sort of syncing happening from github / react elements to figma than the other way around. What's shipped or in this repository is the system, and also the deliverable. It is on the designers to make tools to support that easier.

Artifacts

Base Theme

Should loosely follow the theme spec with following elements

• Color primitives (spectrums)
• Usage colors
• Typography
• Spacing
• ...

Individual websites and products should extend this theme with overrides, ideally at the level of usage values and not primitives.

Iconography

• Font Awesome

  See all the icons at the Font Awesome website. You'll need to set an environment variable called FONTAWESOME_NPM_AUTH_TOKEN for using the fonts on the website. The value for this token can found in 1Password as Font Awesome NPM Token in Webdev vault.

Local Development

Prisma Lens uses Storybook as a preview mechanism for local development.

yarn dev

You can also use the VSCode task named dev to do the same thing. (Cmd + Shift + P > Tasks: Run Task > dev)

Code Style

Publishing

Publishes to NPM happen automatically when you push to the main branch, either directly, or via a pull request merge.

To publish manually, you should:

npm login # Login to NPM
yarn version patch # Bump up the version
yarn publish # Publish package

To test changes in a local dependent project you can use yalc (https://www.npmjs.com/package/yalc). Install yalc with npm i yalc -g Inside this project root:

yalc publish # Copies the new package version into `~/.yalc`

Inside the dependent project root:

yalc add @prisma/lens@<versionNumber> # Injects the new package from the `~/.yalc` store into the project's package.json
yarn

You should be able to see your changes. Careful not to commit changes to the dependent project's package.json.

Usage in other Prisma projects

Integrating Lens into your project is as simple as wrapping your top level component with LensProvider.

import { LensProvider } from "@prisma/lens"

function YourRootComponent() {
  return <LensProvider>{/* Rest of your app */}</LensProvider>
}

LensProvider takes care of loading styles, fonts, and additional setup needed for SSR.

If your project uses Tailwind, Lens also exports a Tailwind preset that may be imported from @prisma/lens/tailwind. You should add this to your tailwind.config.js. This ensures that all colors etc. in your project match up with Lens.

// tailwind.config.js
module.exports = {
  presets: [require("@prisma/lens/tailwind")],
}