cropwise-react-ui-kit · 

A React/Typescript UI Library that provides components used on the Syngenta base platform

Installing on your apps

The library deployment is WIP. When done, you should be able to install it using the following command:

npm install --save cropwise-react-ui-kit --registry {PRIVATE_NPM_REGISTRY}

For local installation, see the section below

Basic usage

In your react code:

import { Button, ButtonType } from 'cropwise-react-ui-kit';

const MyAwesomeApp = () => (
  <>
    <Button type={ButtonType.primary} onClick={() => { alert('Clicked'); }}>Beautiful!</Button>
  </>
);

Setting up for development

Configuring node dependencies

Suggested node version: 10.13.x Use the following procedure to setup the dev environment:

• Run npm install

Developing

Component preview and Stories

This project uses Storybook for previewing and documenting component use cases.

Use the following command to start the Storybook application:

npm run storybook

Bundling

Webpack is a highly customizable JS application bundler.

To create a bundle under dist, run the following command:

npm run build

Installing locally

If you want to make changes on the library and test them on your app without deploying it, go through the setup and build steps, then use npm link.

Example:

cd cropwise-react-ui-kit # this is the directory you've cloned and configured the lib project
npm run build
cd dist
npm link

cd {YOUR_APP_REPO}
npm link cropwise-react-ui-kit

This will create a symbolic link of the library into your node modules.

Note: Optionally, you can add it to you package.json, so you can import it in your code with a new version, but it will break every time you run npm install.

Languages & tools

JavaScript base dependencies

• React Main JS Library.
• Typescript Superset of javascript that compiles to plain javascript
• TSLint An extensible linter for the TypeScript language.
• antd Support UI Components library.
• Storybook Storybook is an open source tool for developing UI components in isolation

CSS

• LESS CSS extension language used by antd