import Link from '../../components/Link';
import { linkTo } from '@storybook/addon-links';

<Meta
  title="Getting started/Using the 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 following guidelines assume that you have already installed the Kit. If you haven't done it yet, please check our [step-by-step guide on how to install the Kit](https://uikit.wfp.org/docs/index.html?path=/docs/getting-started-installing-the-kit--page).

There are **different ways you can use the Kit** in your applications.

## Usage with React

**Default and recommended usage.** All components are available as modules and you can use them as any other React component.

```jsx
// Import the Button component
import { Button } from '@wfp/ui';

// Use the Button component
<Button>Button label</Button>;
```

If you need to import the stylesheet of the component, here is the complete example:

```jsx
// Import the Button component and its style
import { Button } from '@wfp/ui';
// Import the stylesheet of the Button component
import '@wfp/ui/src/components/Button/button.scss';

// Use the Button component
<Button>Button label</Button>;
```

The Kit also provides a basic **template** to kickstart your project, please have a look at the [page template](https://uikit.wfp.org/docs/index.html?path=/docs/templates-application-page--default).

## Usage with vanilla JS

The JS components are built using React, but that **does not limit their usage
to just React applications**. You can render any component in any JavaScript
application with `ReactDOM.render`. Think of it like using a jQuery plugin.
Make sure you have embedded the CSS of the UI Kit in your project.

```js
import ReactDOM from 'react-dom';
import { Button } from '@wfp/ui';

const myContainerElement = document.getElementById('container');

// with JSX
ReactDOM.render(<Button>Simple Button</Button>, myContainerElement);

// with vanilla JS, use React.createElement
ReactDOM.render(
  React.createElement(Button, {
    className: Classes.SMALL,
    children: 'Simple button',
  }),
  myContainerElement
);
```

To remove the component from the DOM and clean up, unmount it:

```
ReactDOM.unmountComponentAtNode(myContainerElement);
```

Check out the [React API docs](https://reactjs.org/docs/react-api.html) for more details.

## Usage with pure HTML

**You can grab the HTML of every component or template** directly from these docs: simply navigate to the item you are looking for, search for the in-page preview under the "Documentation" tab and click on the HTML tab. For the styling, you can [load the CSS through the WFP CDN](https://uikit.wfp.org/docs/index.html?path=/docs/getting-started-installing-the-kit--page#3-load-the-css). We are currently evaluating to expose the CSS for the single components and templates.

## Using the Kit SCSS

When using scss you can import the SCSS sources from the node_module.
This allows you to use only parts of the SCSS, reuse common variables
and functions from WFP UI or to override settings.

```css
// Sample overriding settings
$input-border-radius: 5px;
$button-border-radius: 60px;
$button-font-size: 25px;
$button-padding: 10px 25px;
// new css variables used for colours
--interactive-01: #0076FF;

// Disable css reset
$css--reset==false

// Only use variables
@import "~@wfp/ui/src/globals/scss/vars.scss";
```
