@legion-ui-kit/react-core/README.md

<div align="center"> <img height="108" width="116" src="https://legion.digitaltelkom.id/favicon.svg?v=4643a71fb65fa61a5f2b266b769ea7b1" /> <h1 align="center">Legion UI Kit - React Core</h1> </div>

<div align="center">
<img height="108" width="116" src="https://legion.digitaltelkom.id/favicon.svg?v=4643a71fb65fa61a5f2b266b769ea7b1" />
<h1 align="center">Legion UI Kit - React Core</h1>
</div>

**Legion UI Kit - React Core** is a library UI components that built to make your life easier when building web applications with React. It provides a set of reusable and customizable components that follow the token from Legion Design System.

## Installation

To install the package into your project:

```bash
npm install @legion-ui-kit/react-core
```

## How to Use

1. Import the main css file in your root layout / page project:

    ```javascript
    import '@legion-ui-kit/react-core/style.css'
    ```

2. Add the token styles from Legion Design System to your project.

    a. Copy paste the css [Legion style token](https://legion.digitaltelkom.id/theme-generator) to your global / main css file:

    ```css
    :root {
      --color-base-white: #ffffffff;
      --color-base-black: #212121ff;
      --color-base-transparent: #ffffff00;
      ...
    }
    ```
    b. Then import the css file in your root layout / page project:

    ```javascript
    import './path/to/your/css/global.css'
    ```
   
3. Your Legion components is ready to use inside your project!
    ```javascript
    import { Button } from '@legion-ui-kit/react-core';
    
    function App() {
      return (
        <div>
          <Button>Click Me</Button>
        </div>
      );
    }
    export default App;
    ```
   
## React Server and Client Components

**Legion UI Kit - React Core** supports both React Server and Client Components. You can use the components in either type of component without any issues. But for framework that strictly differentiate between Server and Client Components, you need to import the components from different paths.

The main path `@legion-ui-kit/react-core` contains all of Legion components that can be used in both Server and Client Components but it will trigger a warning if used in a strictly RSC framework like Next.js. To avoid this warning, here are the specific import paths you can use:

```javascript
import { Button } from '@legion-ui-kit/react-core'; // For both Server and Client Components
import { Button } from '@legion-ui-kit/react-core/client'; // For Client Components
import { Button } from '@legion-ui-kit/react-core/server'; // For Server Components
```

And here are the list of components that are available in each path:

| Component | Main<sup>*</sup> | Server<sup>*</sup> | Client<sup>*</sup> |
|-----------|------|--------|--------|
| Accordion | ✅ |  | ✅ |
| Alert | ✅ | ✅ |  |
| Anchor | ✅ | ✅ |  |
| Avatar | ✅ | ✅ |  |
| Badge | ✅ | ✅ |  |
| Breadcrumb | ✅ | ✅ |  |
| Button | ✅ | ✅ |  |
| Card | ✅ | ✅ |  |
| Checkbox | ✅ | ✅ |  |
| Chip | ✅ | ✅ |  |
| Divider | ✅ | ✅ |  |
| Dropdown | ✅ |  | ✅ |
| Modal | ✅ |  | ✅ |
| Navbar | ✅ | ✅ |  |
| Pagination | ✅ |  | ✅ |
| Progress Bar | ✅ | ✅ |  |
| Radio | ✅ | ✅ |  |
| Rating | ✅ | ✅ |  |
| Select | ✅ |  | ✅ |
| Sidebar | ✅ |  | ✅ |
| Snackbar | ✅ |  | ✅ |
| Spinner | ✅ | ✅ |  |
| Stepper | ✅ | ✅ |  |
| Switch | ✅ | ✅ |  |
| Table | ✅ | ✅ |  |
| Tabs | ✅ |  | ✅ |
| Text | ✅ | ✅ |  |
| TextArea | ✅ | ✅ |  |
| TextField | ✅ | ✅ |  |
| Tooltip | ✅ |  | ✅ |

<sup>*Main: The main path `@legion-ui-kit/react-core`</sup><br />
<sup>*Server: The path for Server Components `@legion-ui-kit/react-core/server`</sup><br />
<sup>*Client: The path for Client Components `@legion-ui-kit/react-core/client`</sup>