import PrismCode from 'react-prism';
import { linkTo } from '@storybook/addon-links';

import Page from '../Page';
import Blockquote from '../../components/Blockquote';
import Link from '../../components/Link';

<Meta
  title="Getting started/Installing the Kit"
  subTitle="How to use the UI Kit"
  parameters={{
    componentSubtitle: 'Getting started',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

> WFP front-end technology standards
>
> The WFP UI Kit uses [React](https://reactjs.org/) as the underlying JS framework, in line with the [WFP official guidelines for software development](https://newgo.wfp.org/documents/software-solutions-technology-stack). Therefore, **all WFP applications should use it**, together with the UI Kit. The only **exceptions** are off-the-shelf solutions (e.g. Saas) and/or non-apps (e.g. the external corporate website, and/or basic landing pages used for fundraising, etc).

The UI Kit provides developers with **React.js components, scss, css, html and assets**.

## 1. Create a React app

To kickstart your new project with the Kit, we do recommend to **generate a boilerplate React app** with the official [create-react-app](https://github.com/facebook/create-react-app) tool: you will be provided with a solid build setup with zero effort (that is, no configuration needed on your part). An example using the UI-Kit and create-react-app can be found [here](https://github.com/wfp/ui/tree/master/examples/create-react-app).

You can use the [Codesandbox template](https://codesandbox.io/s/wfp-ui-template-5bef8) template to try out the Kit without installing anything.

An example implementation using `create-react-app` and `scss` can be found in our [GitHub repository](https://github.com/wfp/ui/tree/master/examples/create-react-app).

## 2. Add the Kit as a dependency

The next step is to **add the Kit to your project as a dependency**. You can choose to install it through `npm` or `yarn`: they are both valid package managers and we don't want to recommend one over the other, but once you pick your favourite tool, simply stick with it and avoid using them simultaneously.

To install the Kit through `npm`, run:

```bash
npm install @wfp/ui @wfp/icons --save
```

To install the Kit through `yarn`, run:

```bash
yarn add @wfp/ui @wfp/icons
```

## 3. Load the CSS

This is a required step in case you want to load the full UI Kit stylesheet. If this is the case, you can choose between **importing it through React** or **through the CDN**. If this is not the case, you may then want to check the guidelines on [how to include only specific parts of the Kit CSS](https://uikit.wfp.org/docs/index.html?path=/story/getting-started-using-the-kit--page).

To import the full CSS through React, first make sure to have a `scss` loader installed, then use the following code:

```jsx
// Import all stylesheets
import '@wfp/ui/src/globals/scss/styles.scss';
```

To import the complete stylesheet through CDN, use:

> <div>
>   <h5>Uncompressed css (do not use in production):</h5>
>   <a
>     href={`https://uikit.wfp.org/cdn/${process.env.STORYBOOK_NPM_VERSION}/css/styles.css`}
>     target="_blank">
>     https://uikit.wfp.org/cdn/{process.env.STORYBOOK_NPM_VERSION}
>     /css/styles.css
>   </a>
>   <h5>Compressed css (use in production):</h5>
>   <a
>     href={`https://uikit.wfp.org/cdn/${process.env.STORYBOOK_NPM_VERSION}/css/styles.min.css`}
>     target="_blank">
>     https://uikit.wfp.org/cdn/{process.env.STORYBOOK_NPM_VERSION}
>     /css/styles.css
>   </a>
> </div>

The css file can be directly embedded in the `<head/>` section of your application.

```html
<link
  rel="stylesheet"
  type="text/css"
  href="https://uikit.wfp.org/cdn/X.X.X/css/styles.min.css"
/>
```
