@schrodinger/ui

@schrodinger/ui

A React component library for Schrodinger.

Check out the Storybook on github-pages, under the Environments heading →

Usage

Components may be imported from the entire library or à la carte. Both ES6 modules and CommonJS are supported.

ES6 Modules

import { Dropdown } from '@schrodinger/ui'
import { Dropdown } from '@schrodinger/ui-dropdown'

CommmonJS

const Dropdown = require('@schrodinger/ui').Dropdown
const Dropdown = require('@schrodinger/ui-dropdown').Dropdown

Development

Component Organization

The component organization philosophy used here is highly inspired by Brad Frost's Atomic Design, and is worth a read.

Particles

A Particle is the smallest individual building block that can be used to compose a component. Think of them as being similar to single html elements: an input, checkbox, heading, button, etc.

Atoms

An Atom is a combination of Particles which represent a small and simple component. For example, you might combine an input, label, and button Particle to create a row in a form. Atoms should "do one thing, and do it well."

Molecules

A molecule is a complex combination of Atoms to create more complex components. If a button and an input are Particles, a dropdown menu an Atom, then an entire would be a Molecule.

Suggested Workflow

Storybook is where the primary development work should take place, and is a very straightforward process:

• Copy an existing Particle component to a new a new directory and rename it
• Add an export for the new component under <@schrodinger/ui>/src/index
• Develop your component as usual, publish a PR, merge, etc.
• Run yarn deploy to update the live storybook on github-pages

Integrating UI Library components in other projects, in development

You will likely at some point want to integrate library components into other external applications, before that component is published to the repo / npm. This is a little bit trickier, and there are two approaches suggested:

Yarn Workspaces

Take advantage of yarn workspaces, which is quite seamless and abstracts much of the work in maintaining dependency links. Essentially, you would simply need to add your external project to the workspace entry, in the top-level package.json.

"workspaces": [
  "packages/**/*",
  "my-cra-project/"
],

Then you would just run:

lerna link

In order to symlink the repositories. Your project should now reflect any changes to components in the @schrodinger/ui library.

Yalc

Alternatively, you can use Yalc if it is not feasible to colocate the consuming application within the UI Library directory. First you need to install yalc:

yarn global add yalc

Then "install" (symlink) the library (or individual component) with your project::

cd <path/to/my-cra-project>
yalc <add|link> @schrodinger/ui
yalc check

Note: yalc add will modify your project's package.json to point to the local copy of the library / library component, which is useful when you are adding a new component into the library and it hasn't been published to the repo / npm yet. Conversely, yalc link will not modify the package.json, but will simply use the local Yalc repository on your system to fetch the desired component or the library. This is useful when your project's package.json already contains the dependency (ie, editing an existing component in the library).

After making changes to a library component, the workflow for this looks like:

yarn build
cd <path/to/@schrodinger/ui>/packages/ui
yalc push # Will update all yalc'd packages on your system