@aics/aics-react-labkey

AICS LabKey React Components

This repo hosts React components created by AICS that are used in multiple LabKey modules.

Components

• AicsBlockUi
• AicsGrid
• LabKeyOptionSelector

Usage

Install:

npm install @aics/aics-react-labkey --save

Import into JavaScript file (must have tooling such as Webpack/Babel set up):

import '@aics/aics-react-labkey/dist/styles.css';
import { AicsGrid, AicsBlockUi, LabKeyOptionSelector } from '@aics/aics-react-labkey';

LabKeyOptionSelector props

LabKeyOptionSelector wraps react-select, and renames the following props:

• old name -> new name
• name -> id
• value -> selected
• labelKey -> optionNameKey
• valueKey -> optionIdKey
• onChange -> onOptionSelection
• multi -> multiSelect

LabKeyOptionSelector adds some additional props related to the Bootstrap Form Group that surrounds it, which can be seen in the Selector demo.

It will also forward any props you pass to it to the underlying react-select component, which means you can pass any of the possible props, keeping in mind the renamed ones above.

LabKeyOptionSelector Async Mode

LabKeyOptionSelector can be configured to run in "async" mode if the async prop is set to true. Look at LabKeyOptionSelectorDemo.jsx for an example of how this works.

In "async" mode, LabKeyOptionSelector will also use the following props:

• loadOptions (required)
• autoload
• cache

These props get forwarded to the underlying react-select component. Look at the documentation for more information.

Additionally, the options prop is not used in "async" mode.

LabKeyOptionSelector Creatable Mode

LabKeyOptionSelector can also be configured to run in "creatable" mode if the creatable prop is set to true. "Creatable" mode can only be used if not in "async" mode, and vice versa.

You can find more information about "creatable" mode and additional props in the react-select documentation.

View Examples

Install dependencies:

npm install

Start up Webpack Dev Server:

npm run dev

Changes will be live-reloaded.

Examples of how to use these components can be found in the examples/ directory.

Test Local Changes

While developing this library, it is common to want to test your changes in other repos that use this library without publishing your changes. This can easily be accomplished with npm link.

In this repo, run:

npm link

In the repo that you want to test your changes in, run:

npm link @aics/aics-react-labkey

This will create an entry in node_modules in the second repo that is symlinked to your copy of this repo.

To remove the link, run:

npm unlink @aics/aics-react-labkey

You may need to update the css loader to resolve to this path ('../labkey-aics-react-components/dist/styles.css') as opposed to just /node_modules/

 {
     test: /\.css$/,
     include: [/node_modules/, path.resolve(__dirname, '../labkey-aics-react-components/dist/styles.css')],
     use: [
         'style-loader',
         'css-loader'
     ]
 }

You may need to add aliases for react and react-dom to the Webpack config in the project you are testing in, as these libraries are only peer dependencies in aics-react-labkey.

resolve: {
    alias: {
        react: path.resolve('./node_modules/react'),
        'react-dom': path.resolve('./node_modules/react-dom')
    }
}

Publishing Changes

Publishing can be accomplished via the master branch on Jenkins:

https://jenkins.corp.alleninstitute.org/job/node-packages/job/aics-react-labkey/.

Once changes are in master, click "Build with Parameters". Check PUBLISH to true and set VERSION_TO_INCREMENT to one of the three drop down values: "patch", "minor", "major". Look up npm semantic versioning for more information. Additionally, this will also create a version commit and tag in git, and will push these to origin.

Finally, click Build to initiate process.