@leaflink/stash

@leaflink/stash

Interactive building blocks for creating user interfaces.

Stash is a collection of primitive, product-agnostic elements that help encapsulate LeafLink's look and feel at base level. This project is intended to be used across our digital product portfolio.

Getting Started

There are several ways to configure the framework to suit your specific needs. Configurable items include:

• components: core LL components maybe be bundled à la carte, or in their entirety (see list).
• directives: configure which directives are bundled.
• i18n: translation options, language and locale.
• theme: configure theme-specific options. (coming soon)
• storage: setup methods to persist user-settings. There are several LocalStorage helpers which may be overridden.

The generated entry file will load all components by default. However, you may configure the framework with a few options:

const options = {
  components: ... // provide components "à la carte"
  directives: ... // provide directives "à la carte"
  i18n: {         // i18n options
    locale: ...
    t: ...
  }
  theme: ...      // theming options
  storage: ...    // override localstorage persistence options
}

A sample configuration might look something like:

// plugins/stash/index.js

import Vue from 'vue';
import stash, { LLButton, LLCheckbox } from '@leaflink/stash';
import i18n, { locale } from 'path/to/i18n';
import theme from 'path/to/themes/dark.json';

Vue.use(stash, {
  theme,
  i18n: {
    locale,
    t: (key, value) => i18n.t(key, value)
  },
  components: {
    LLButton,
    LLCheckbox,
  },
});

export default stash;

This example will load the core i18n options, a dark theme, and the LLButton and LLCheckbox components.

Then, in your app's setup, simply:

import stash from '@/plugins/stash';

// ...

Vue.use(stash);

Finally, import the /styles/main.scss file into an scss base file to provides styles and style utils.

Developer Notes:

Resources

• index.js: this is the "install" entry point, for use with Vue.use(...).
• components: all components
• composables: similar to mixins or React's "Hooks", but for a Vue component
• constants: LeafLink global constants
• directives: Vue directives
• styles: SCSS, CSS, style utils, etc.
• types: TypeScript type declarations
• utils: includes various helpers for internal and external use

Core files & Entry Points

• framework.js: is the framework install function (and any other framework-specific things). It registers components, themes, etc. with your Vue app.
• index.js is used as the main entry point to the framework. It also exports each component individually, for an à la carte build. You may pull in the default export directly and Vue.use it (to quickly get up and running w/ all components and features); or, you may wish configure it with particular options, components, or features.

Testing

Testing the framework uses @vue-test-utils under the hood. We use Jest (via @vue/cli-plugin-unit-jest) to run our unit-tests.

• test command npm test

Contribution:

Contribution guidelines