# `@schrodinger/ui`

A React component library for Schrodinger. 

[Check out the Storybook](https://schrodinger.github.io/ui/) 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
```js
import { Dropdown } from '@schrodinger/ui'
import { Dropdown } from '@schrodinger/ui-dropdown'
```

CommmonJS
```js
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](https://bradfrost.com/blog/post/atomic-web-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](https://yarnpkg.com/features/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](https://github.com/schrodinger/ui/blob/master/package.json#12). 
  ```json
  "workspaces": [
    "packages/**/*",
    "my-cra-project/"
  ],
  ```
  Then you would just run:
  ```
  lerna link
  ```
  In order to [symlink the repositories](https://github.com/lerna/lerna/tree/main/commands/link#readme). Your project should now reflect any changes to components in the @schrodinger/ui library.

#### Yalc
Alternatively, you can use [Yalc](https://github.com/wclr/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:

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