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:

npm i @springtree/eva-suite-composite

Installation

Install the following packages as peer dependencies for using this library:

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:

git clone [email protected]/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

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.