import { Meta } from "@storybook/addon-docs";
import { PackageInstallationSnippet, Banner, ExternalLink } from "@stories/components";
import { Message } from "@components/message";

<Meta
    title="Installation"
    id="installation"
/>

# Installation

<Banner>If you are starting a new project with Workleap, you should use <ExternalLink href="https://wl-orbiter-website.netlify.app/">Orbiter</ExternalLink>.</Banner>

Multiple [NPM packages](https://www.npmjs.com/settings/orbit-ui/packages) compose Orbit. By creating a bundle package named [@sharegate/orbit-ui](https://www.npmjs.com/package/@sharegate/orbit-ui), we simplify the installation process and allow you to install Orbit with just a single package.

> We assume you've already set up [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom). Otherwise, you'll get a warning at installation.

## Install packages

To install Orbit, open a terminal at the root of your project workspace and run the following command:

<PackageInstallationSnippet packageName="bundle" />

To install Orbit's experimental components, open a terminal at the root of your project workspace and run the following command:

<PackageInstallationSnippet packageName="experimental" />

## Import styles

Orbit styles include the ShareGate font, a [CSS bootstrap](https://github.com/gsoft-inc/sg-orbit/tree/master/packages/css/src) and of course the component's styles.

To import Orbit styles, add the following import declaration to your root stylesheet:

```css
/* index.css */

@import "@sharegate/orbit-ui/index.css";
```

To import Orbit experimental components styles, also add the following import declaration to your root stylesheet:

```css
/* index.css */

@import "@orbit-ui/experimental/index.css";
```

## Set up your tooling environment

Orbit offer an ESLint plugin to see in-context help in your IDE. This includes accessibility pointers, deprecation notices, and other helpful tips.

> This config is designed to complement the [suggested Workleap ESLint Configuration](https://github.com/gsoft-inc/wl-web-configs).

First, add the ESlint plugin to your dependencies:

<PackageInstallationSnippet workspaceFolder="tooling" packageName="eslint-plugin" />

Then, add the plugin to your ESlint config. For example, your `.eslintrc.json` file may look like this:

```json
{
    "$schema": "https://json.schemastore.org/eslintrc",
    "plugins": ["@orbit-ui"],
    "extends": [
        "plugin:@orbit-ui/recommended"
    ]
}
```

More about [ESlint configuration](https://eslint.org/docs/latest/use/configure/configuration-files)

## Configure your application

Below is an example of how to configure an application with a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbit) ShareGate theme object:

```tsx
// index.ts

import { createThemeVars, ShareGateTheme, ThemeProvider } from "@sharegate/orbit-ui";
import { createRoot } from "react-dom/client";
import App from "./App";

createThemeVars([ShareGateTheme]);

const root = createRoot(document.getElementById("root")!);
root.render(
    <ThemeProvider theme={ShareGateTheme} colorScheme="light">
        <App />
    </ThemeProvider>
);
```

Instead of harcoding the foundation values in Orbit, we choose to implement a [theming system](?path=/docs/theming--page) allowing applications to supply their core values to Orbit.

The theming system introduced a concept of theme object. To configure Orbit, you'll need to build your own theme object or import a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbit) one from Orbit. The theme object will be used to render the foundation variables with the `createThemeVars` function and define a [theme provider](?path=/docs/theme-provider--default-story) at the root of your application.

### Start creating components

You're all set! You can start creating your application with Orbit:

```jsx
import { Div, Text } from "@sharegate/orbit-ui";

export const App = () => (
  <Div backgroundColor="alias-warning">
    <Text color="alias-primary">Hello World!</Text>
  </Div>
);
```
