Contents
React components built using Material-UI for GRAIL's internal applications.
Contributing
This is an open source package. Initial approval by SMEs in https://phabricator.grailbio.com/T26323
All content must be non-proprietary. For example:
- Do not include GRAIL assets, like GRAIL Logo, or commercially sourced images.
- Do not include content that has trade secrets or anything that should remain internal to GRAIL.
Also, all content must be compatible with the contents of the Apache 2.0 license, as defined in LICENSE
file.
For common private GRAIL code, use @grail/common-private
or other internal locations.
Modify CHANGELOG.md to reflect contributions to this code.
Distributing to GitHub
URL: https://github.com/grailbio/ui-components
Once code is merged into GRAIL repo - master
branch, replicate the commit to github.
TODO: Document how to use grit
, or refer to how it automatically pushes to github using
$GRAIL/phabricator/shipit/sync.bash
Publishing to NPM
URL: https://www.npmjs.com/package/@grailbio/components
You will need to be a member: https://www.npmjs.com/settings/grailbio/members
Recommend turning on 2FA.
To publish:
- Bump the package version following semantic versioning guidelines (https://semver.org/)
yarn version --patch --no-git-tag-version
- For non-patch release, update
CHANGELOG.md
version. -
npm publish
- Optionally, you can pass in 2FA code using
--otp ######
- Optionally, you can pass in 2FA code using
Installation and Usage
yarn add react
yarn add @material-ui/core @material-ui/icons
- If using NPM packages:
yarn add @grailbio/lib @grailbio/components
- To use the
DateInput
andDateTimeInput
components:- Wrap your application in the
wrapPickerUtilProvider
component.
- Wrap your application in the
GRAIL Theme
- Wrap your application in the
StyleWrapper
component.
Running StyleGuide
cd $GRAIL/ui/components
yarn styleguide
Using Released Components
import { COMPONENT } from "@grailbio/components";
- See
@grailbio/lib
for GRAIL utilities and constants. e.g.import { UTILITY } from "@grailbio/lib";
Using Dev Components
-
import { DEV_COMPONENT } from "../dev";
NOTE: Dev components are unstable and may introduce breaking changes at any given time.
Implementing New Components
Add/maintain new components to $GRAIL/ui/components/src/dev
until they are thoroughly tested and approved
for production.
Update styleguide.config.js
to add the V2 component.
Update $GRAIL/ui/lims/client/cypress/integration/styleguide
to add the new component.
Implementing V2 Components
To add a V2 version of an existing component, separate the V1 and V2 files into their own folder. e.g.
src/
some-component/
index.js /* export v1 and v2 components. */
v1/
/* the V1 component jsx, CSS, unit test files. */
v2/
/* the V2 component jsx, CSS, unit test files. */
Follow the guidelines for building new components for building V2 component.
Production Component Approval Criteria
- Unit tests.
- At least 25% line coverage.
-
README.md
- Working examples showing all use cases and functionality.
- Component jsx file
- Comments above each prop explaining the prop.
- Cypress tests for any interactive components.
- Note: These Cypress tests rely on working examples in the
README
s.
- Note: These Cypress tests rely on working examples in the
When introducing new code, you must include an index.js
, which exports to the
index.js
of the src
directory.
Building
yarn build # follow instructions from the prompt