import { Meta, Source } from '@storybook/addon-docs/blocks';

<Meta title="Getting Started" />

# Getting Started

**ADEO Design system** is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of **ADEO**.

### Installation

<Source language="bash" dark code="npm i @mozaic-ds/web-components" />

Or with **Yarn**:

<Source language="bash" dark code="yarn add @mozaic-ds/web-components" />

### Web Components

The Mozaic Web Component library provides a suite of **Web Components** built with **Svelte's custom element API**. These components allow you to integrate the **ADEO Design System** seamlessly, regardless of the front-end framework or stack you are using.

#### 📝 Usage

Once installed, you can directly use the web components in your HTML or any front-end framework (React, Vue, Angular, etc.):

Simply call the component as follows:

- Import the component

<Source
  language="javascript"
  dark
  code="import '@mozaic-ds/web-components/components/button/Button.js';"
/>

- Use the component

<Source
  language="html"
  dark
  code='<m-button appearance="accent">This is an accent button</m-button>'
/>

#### 🛠️ Framework Integration

These web components are framework-agnostic. Here are a few resources to help you integrate them:

- React Integration: Use the components directly in JSX (ensure to use className instead of class if needed).
- Vue Integration: Register them globally or locally in your Vue app.[Official documentation](https://vuejs.org/guide/extras/web-components)
- Angular Integration: Add CUSTOM_ELEMENTS_SCHEMA to your NgModule. [Official documentation](https://angular.dev/guide/components/advanced-configuration#custom-element-schemas)

### Svelte

In addition to Web Components, **@mozaic-ds/web-components** package also exposes native **Svelte Components**, offering an even smoother developer experience when working within **Svelte-based applications**.

Why Use Native Svelte Components?

- Full compatibility with Svelte’s reactivity system.
- Simpler syntax, no need to deal with custom element registration.
- Easier to compose with other Svelte components.

#### 📝 Usage

You can import and use the Svelte components directly:

Simply call the component as follows:

<Source
  language='tsx'
  dark
  code={`
<script lang="ts">
  import { Button } from '@mozaic-ds/web-components/svelte';
</script>

<Button appearance="accent">My first svelte Button</Button>
`} />
