UI Library

Installation

yarn add @plesk/ui-library

Usage

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

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:

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.