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

<Meta title="Docs/Getting Started" />

# Getting Started

## Installation

```bash
npm install @volvo-cars/ced-os-react-components
```

## Usage

### React

JSONArticle is the main entry point for to use the renderer. To render a document just pass the JSON-data to the `data`
prop of the component. The JSON data needs adhere to this general format `{ title, description, body, externalId }`,
more on that [here](https://github.com/volvo-cars/support-shared/blob/master/docs/JSON_FORMAT.md)

```jsx
import "@volvo-cars/ced-onboarding-support-components/lib/index.css";
import "@volvo-cars/ced-onboarding-support-components/lib/theme-volvo.css";

import React from 'react';
import { createRoot } from 'react-dom/client';
import { JSONArticle, Theme } from "@volvo-cars/ced-onboarding-support-components";
import jsonDocument from '../samples/example-article.json';

const domContainer = document.querySelector('#root');
const root = createRoot(domContainer);

root.render(<JSONArticle data={ jsonDocument } theme={ Theme.VOLVO_SPA2 } />);

```

### Styles

Include these styles in your application.

* Base styles: `@volvo-cars/ced-onboarding-support-components/lib/index.css`
* Theme styles: `@volvo-cars/ced-onboarding-support-components/lib/theme-volvo.css`
* @font-face styles. Make sure the fonts needed for the theme are loaded. This is not handled by this library and is
  most likely already loaded in your application.

***

Next: [Configuration](/story/docs-configuration--page)