npm package: @springtree/eva-suite-composite
Description: This package contains reusable UI composite components meant for EVA-Suite modules and should be used in React (>=16.8.0). The goal of this package is to provide developers using @springtree/eva-suite-ui components a list of composite components to re-use
Author: Jan van den Berg
Latest version: 2.68.0

# EVA Suite composite

This package contains reusable UI composite components meant for EVA-Suite modules and should be used in React (>=16.8.0). The goal of this package is to provide developers using @springtree/eva-suite-ui components a list of composite components to re-use in EVA-Suite modules.

## Usage
Install the EVA Suite UI module from npm:
```bash
npm i @springtree/eva-suite-composite
```

## Installation
Install the following packages as peer dependencies for using this library:
```bash
npm i
  @azure/msal-browser
  @springtree/eva-sdk-react-recoil
  firebase
  url-parse
```

Please check the documentation for component details.

## Development
Check out the repository and run npm install to get started:

```bash
git clone git@github.com/springtreesolutions/eva-suite-composite.git
cd eva-suite-composite
npm install
```

This repository is divided in 3 sections:
1. The built version of the components (/dist)
2. A playground environment where you can render the components (/playground)
3. Storybook 

### Spotlight
EVA Spotlight is a power user feature where you can initiate EVA suite intents from a convenient popup dialog. Modeled after Mac OS Spotlight feature. An action inside the Spotlight autocomplete are called shortcuts. There are four types of shortcuts:
1. **navigate**. This will navigate to another module. Restores the current session there and links you to the correct place inside that module.
2. **open**. This will open a certain type of data by ID. You have to provide the ID, and you jump to the module where that information is displayed.
3. **search**. This will jump to a search page inside another module and allows you to provide a search query directly inside Spotlight
4. **update**. Same as open but in this case brings you to the edit page of an certain type of data. Again by its ID.

Spotlight shortcuts are automatically discovered by looking for the eva-spotlight.json file inside a EVA Suite module. This file is generated at build time for each module. A Spotlight shortcut is a simple JSX element the module. For example:

```
        <SpotlightShortcut
          type="search"
          nameI18nKey="spotlight.shortcut.search.discount.title"
          descriptionI18nKey="spotlight.shortcut.search.discount.description"
          intent={EIntentAction.searchDiscount}
        />
```
These are the properties of this React element:
1. **type**. Specify the type of shortcut
2. **nameI18nKey**. The translation key for the name of this shortcut. It will look at the `/assets/i18n` folder for translation files (JSON)
3. **nameI18nKey** (optional). The translation key for the description of this shortcut. It will look at the `/assets/i18n` folder for translation files (JSON)
4. **intent**. The EVA suite intent that needs to be used for this shortcut. For more information about EVA Intents click [here](https://www.npmjs.com/package/@springtree/eva-suite-uri-parser)

### Commands

- `npm start` => This command will build and watch the exported components from `src/index.ts`. Although when you render the components in playground, it is not really needed.
- `npm run build` => This command will make a build in the `/dist` folder.
- `npm run lint` => This command will make run the linter code.
- `cd playground && npm run start` => This command will run the playground and you can test your components.

## Playground environment

While creating new composite components, or making adjustments to existing components it would be nice to have an environment where you can see them.
An environment has been added for this purpose in the playground folder.
To use the playground application you need to do the following:

1. `cd example` and then you can add `npm i`.
2. Now you can run `npm start` and you will open up a window for you.

## Storybook
### Use storybook to build your component
- `npm run storybook`
- Create filename with `*.stories.tsx`

### Build storybook
- `npm run build-storybook``
- The storybook-static folder contains the build files.
-