Skip to content

README.md

Latest commit

 

History

History
87 lines (59 loc) · 2.88 KB

README.md

File metadata and controls

87 lines (59 loc) · 2.88 KB

opentrons components library

React components for Opentrons' applications. Visit the Opentrons Components Library to see available components.

example usage

import { PrimaryButton } from '@opentrons/components'

export default function CowButton(props) {
  return <PrimaryButton onClick={() => console.log('🐄')} />
}

setup

Usage requirements for dependent projects:

  • Node v12 and yarn
  • The following dependencies (peer dependencies of @opentrons/components)
    • react: 17.0.1,
    • react-router-dom: ^4.2.2,
    • classnames: ^2.2.5,
    • lodash: ^4.17.4

new project setup (optional)

If you ever need to set up a new project in the monorepo that depends on the components library:

  1. Add the new project to workspaces in the repository's package.json
  2. Ensure the required peer dependencies (listed above) are also in dependencies 
    yarn workspace new-project add react@17.0.1 react-router-dom@^4.2.2 classnames@^2.2.5 lodash@^4.17.4
  3. Add @opentrons/components at the current version to dependencies in the new project's package.json
  4. Run yarn

If you use the base webpack config in @opentrons/webpack-config, the project should import and bundle components from the components library correctly.

contributing

Make sure you have read the top-level Contributing Guide.

unit tests

Unit tests are run with the rest of the repositories unit tests from the top level of the project.

make test-js

Unit tests live in a __tests__ directory in the same directory as the module under test. When writing unit tests for components, we've found the following tests to be the most useful:

  • DOM tests

    • Make sure the component renders the correct node type
    • Make sure DOM attributes are mapped correctly
    • Make sure handlers fire correctly

  • Render tests

    make test-js updateSnapshot=true

Flow definitions

While the components library is written in TypeScript, some dependents of the components library are not yet converted. To ease the conversion effort, components/flow-types contains automatically generated Flow type definitions from the TypeScript typings generated by tsc.

To generate these definitions

# ensure all TypeScript definitions are built
make build-ts

# build flow definitions (this may take a while!)
make -C components flow-types

# you can also build individual files if you're testing out small changes
make -C components flow-types/buttons/Button.js.flow