npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@springtree/eva-suite-composite

v2.68.0

Published

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

Downloads

8

Readme

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.