import { Meta } from '@storybook/blocks';

<Meta title="Introduction/Installation" />

### spirit-web-react is a [React](https://reactjs.org) component library for [Spirit Design System](https://github.com/lmc-eu/spirit-design-system)

## Getting Started

### Install spirit-web-react:

```sh
npm install @lmc-eu/spirit-web-react react react-dom
```

**spirit-web-react** currently requires React 16.8 or higher.

### Include spirit-web

Either:

1. Import spirit-web in your application code:

```sh
npm install --save @lmc-eu/spirit-web
```

```javascript
import '@lmc-eu/spirit-web/css/components.min.css';
```

### Import components:

```jsx
import React from 'react';
import { Button } from '@lmc-eu/spirit-web-react';

export default (props) => {
  return <Button color="danger">Danger!</Button>;
};
```

## About

Unlike some component libraries, **spirit-web-react** does not embed its own styles, and instead depends on the **spirit-web**
css framework for its styles.
This allows you to have consistent styles across your React-based components and static parts of your site, and allows
you to include your own custom spirit brand when needed.

Unlike using Spirit in HTML, **spirit-web-react** exports all the correct spirit-web classes automatically, and don't need
to use or include **spirit-web**'s JavaScript files or add data attributes to trigger functionality. Instead, components
are defined in React-friendly components with appropriate props for you to control.

So instead of:

```html
<!-- HTML -->
<div class="Container">
  <div class="Stack">
    <div class="TextField TextField--fluid">
      <label for="name" class="TextField__label">Name</label>
      <input type="text" id="name" class="TextField__input" value="" />
    </div>
    <div class="PasswordField PasswordField--fluid">
      <label for="password" class="PasswordField__label">Password</label>
      <input type="password" id="password" class="PasswordField__input" value="" />
    </div>
    <label class="CheckboxField"
      ><input type="checkbox" class="CheckboxField__input" value="" />
      <span class="CheckboxField__text">
        <span class="CheckboxField__label">Stay Logged In</span>
      </span>
    </label>
    <button type="button" class="Button Button--primary Button--medium Button--block">Login</button>
  </div>
</div>
```

You can use:

```jsx
// React
import { Container, Stack, TextField, CheckboxField, Button } from '@lmc-eu/spirit-web-react';
...
<Container>
  <Stack>
    <TextField type="text" id="name" label="Name" isFluid />
    <TextField type="password" id="password" label="Password" isFluid />
    <CheckboxField label="Stay Logged In" />
    <Button isBlock>Login</Button>
  </Stack>
</Container>
```
