TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published


    React components built using Material-UI for GRAIL's internal applications.


    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 ######

    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 and DateTimeInput components:
      • Wrap your application in the wrapPickerUtilProvider component.
    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.

        index.js /* export v1 and v2 components. */
          /* the V1 component jsx, CSS, unit test files. */
          /* 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 READMEs.

    When introducing new code, you must include an index.js, which exports to the index.js of the src directory.


    yarn build # follow instructions from the prompt




    npm i @grailbio/components

    DownloadsWeekly Downloads






    Unpacked Size

    2.05 MB

    Total Files


    Last publish


    • aayush-k
    • arinehouse
    • elijahcarrel
    • luckymargi7
    • richhx
    • lkong