ThreeFlow Shared UI Components

A collection of shared components, mixins, and scss variables to be used across the TF sites.

Sharing utilities

• Utilities/helpers can be included in two places; lib.js and shared.js.
• Shared.js makes things a part of the Vue instance, either components or, in the case of utils/helpers, exposed through $TF.
• Additional imports + exports in lib.js supply the functionality that allows an import from vanilla JS with a import { Foo } from 'watchtower-benefits-shared-components'

Installation

npm install watchtower-shared-components

In your main vue file:

import Watchtower from 'watchtower-benefits-shared-components'
import 'watchtower-benefits-shared-components/lib/watchtower-benefits-shared-components.css'
Vue.use(Watchtower)

Build Setup

Get up and running

1. On initial setup, add the following entry to your hosts file (mac: /etc/hosts): 127.0.0.1 components-dev.threeflow.com
2. On first load, run npm install in terminal to get everything installed.
3. Run npm run serve in terminal to start the local server. You browser will open to https://components-dev.threeflow.com:8085/ automatically.

Copying to other applications

1. On the application level (admin, broker, carrier), delete the "node_modules/.vite/deps" folder (rm -rf ./node_modules/.vite/deps/watchtower-benefits-shared-components.*)
2. On the shared repo, copy to applications (npm run copy)
3. On the application level, start the server (npm run dev)

Common Commands

| Terminal Command | Description | |--|--| |npm run serve|serve with hot reload at localhost:8085 (our example site). This will spin up a dev server with examples, the source code is located in /example/src. |npm run serve-build|serve with rollup watch/hot reload. this will spin up rollup, which will watch all the library components, and a vue-cli-service serve instance that will be restarted when rollup's watch detects changes. This way, you can test components in the same way that it will be used in in the other TF sites. |npm run build|build for production with minification (to push out to our example site) |npm run unit|run unit tests |npm run lib|build a package to publish |npm publish|Publish

Publishing:

When merging into the main, CircleCI and the threeflow-orb will:

1. Automatically update the package version one minor version,
2. Create a new github release,
3. Publish new version to the npm registry.