# UI Library

## Installation

```
yarn add @plesk/ui-library
```

## Usage

Here is an example of how to use the UI Library with `create-react-app`.

```shell
yarn create react-app example
cd example
yarn add @plesk/ui-library
yarn start
```

Replace the contents of the `src/App.js` file with the following code:

```js
import { Layout, Button } from '@plesk/ui-library';
import '@plesk/ui-library/dist/plesk-ui-library.css';

function App() {
    return (
        <Layout>
            <Button>{'Hello World!'}</Button>
        </Layout>
    );
}

export default App;
```

## Development

Sometimes you need to fix UI Library bug that fires in your project using UI Library.

There is a way to test dev version of the UI Library with your project. You need to use `yarn link` command,
but there are some details.

* First, you need to run `yarn link` in your UI Library working copy root directory.
* Then, you need to run `yarn link @plesk/ui-library` in your project working copy root directory.
* Third. There is a bug with a React library that makes us to do additional steps. Run `yarn link` in your
project's `node_modules/react` and `node_modules/react-dom` directories.
* Then, run `yarn link react` and `yarn link react-dom` in your UI Library working copy root directory.

So, in this setup, your project will use the dev copy of UI Library. And UI Library will use React from your project.
