@leaflink/leaflink-ui

leaflink-UI

A design framework housing Leaflink's UI. Includes custom Vue components as well as a suite of CSS utilities.

The Leaflink-UI (or LLUI, or LLLLL) framework best operates as a plugin, where components, directives, theming and storage options may be dynamically configured per environment.

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 esm 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/leaflink-ui/index.js

import '@leaflink/leaflink-ui/dist/leaflink.min.css'; // optional. You may prefer to bundle this elsewhere
import Vue from 'vue';
import LLUI, { LLButton, LLCheckbox } from '@leaflink/leaflink-ui';
import i18n, { locale } from 'path/to/i18n';
import theme from 'path/to/themes/dark.json';

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

export default LLUI;

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

Then, in your app's setup, simply:

import LLUI from '@/plugins/leaflink-ui';

// ...

Vue.use(LLUI);

Developer Notes:

Distributed files

Note that not all files in the repository are bundled when publishing to npm. What is actually happening is: files in /src are used to generate the following:

• dist: bundled / pre-built files for agnostic consumption
  • leaflink-ui.js: In commonjs, esm formats. Regular and minified versions
  • css: Core css from styles, as well as a bundle of component-only css, if useful
  • spritesheet.svg: Our icon spritesheet
• lib: a collection of esm modules that you may consume however you wish
  • index.js: this is the "install" entry point, for use with Vue.use(...).
  • components: all components, transpiled to ES modules
  • directives: coming soon
  • utilities: also coming soon

Bundle

In the package.json there are several things to be aware of:

• entry points:
  • main: points to the cjs build dist/leaflink-ui.common.js
  • module:
  • source
  • style: points to dist/leaflink-ui.css
• files: a list of files that are included when the user installs leaflink-ui. Currently: dist/, lib/ and src/. Note that you won't see testing .spec files in the installed package
• sideEffects: a list of items that are hints to weback to aid in its tree-shaking algorithm (and so it knows to include these files when it might otherwise remove them)

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

Appendix

Component Listing

Visit our docs for a listing

LLLLL

"Live Laugh Love LeafLink UI"