Felix Health Vue Component Library

A Vue CLI project that contains all of Felix Health's vue components and documentation for those components.

To consume in a project

1. npm i @felix-health/vue-components

2. Currently this project depends on TailwindCSS (and our Tailwind design system).`

3. Import the library css into your main css file:

@import '@felix-health/vue-components/dist/components-library.css';

4. Import all of the components in your main js file:

import * as FelixComponents from '@felix-health/vue-components';

// Global registration in your main.js/App.vue file
Object.entries(FelixComponents).forEach((name, component) => {
  Vue.component([name, component]);
});

Note that some components depend on things like the document or window object to work. We have an option to separate component imports between ones that work on server side, and ones that work on the client so that you can deal with them differently. This is helpful in frameworks like Nuxt where you want to be able to register compatable components on the server. You can import them like this:

import * as ServerComponents from '@felix-health/vue-components/dist/server-components/components-library-server.umd';
import * as ClientComponents from '@felix-health/vue-components/dist/client-components/components-library-client.umd';

Note: If you are adding a net new component to this repo ensure you are exporting it in either the ServerComponents or ClientComponents index.js file.

Branch naming

• For vue-3 only changes (i.e. merging to vue-3-only branch), prefix the branch name with v3_ to skip styleguidist preview step in github action

To add / update a component

• To update any existing shared components (i.e. components that are not in this list)
  • If changes do not involve vue2->vue3 breaking change (e.g. v-model usage, render fucntion, $parent $children, vue2 only 3rd party packages), then no change is needed on vue-3-only branch, since we rebase regularly, these changes should reflect there after a rebase
  • If changes are not vue-3 friendly, please add a separate component (see steps below) / create a ticket to add that later
• To add / update any vue-3 specific components (these components DO NOT exist in main branch in the time being)
  • Checkout vue-3-only branch, rebase latest main branch onto this branch (there'll most likely be conflicts, just make sure the package name i.e. @felix-health/vue-components-vue3 and version number is not overwritten by changes from main)
  • Push to remote after rebase is successful
  • Checkout out a new branch for the changes you'll be adding (branch off from vue-3-only ), prefix the branch name with v3_ to skip styleguidist preview step in github action
  • All the vue-3 only components live under a /v3 directory from the existing component directory, if it doesn't already exist, please create one
  • If the changes you're making is on an existing vue-3 component, you can push up your branch for review!
  • If the changes you're making is splitting an existing SHARED component into vue-2 and vue-3, remove that component export in /{client-build/server-build}/index.js , add the export in /{client-build/server-build}/vue2Components.js and /{client-build/server-build}/vue3Components.js accordingly, push up for review, add the component to the list for tracking, push up for review!
  • If the changes you're making is solely adding a new vue-3 component, just add the export in /{client-build/server-build}/vue2Components.js, push up for review!

  Note that the styleguidist doesn't work with vue 3, so as a temporary way to test out components, we use the /styleguide pages in Charm. For more details please refer to the readme in vue-3-only branch.

To publish a new version

1. Bump the version in package.json
2. Make a PR
3. Merge into the main branch
4. yarn build-lib and then npm publish --access public

Project local setup

yarn install

Run unit tests

We use Vue Testing Library with Jest for unit testing. To write a new test, add a .spec.js file next to the component file you're working in.

# run test in watch mode
yarn test

# run test full test suite
yarn test:unit

Spin up the documentation

yarn styleguide
hosted on http://0.0.0.0:6060/

Build the documentation for production

yarn styleguide:build

This adds a docs folder which can be served as a static website.

Compiles and minifies for production npm build (Ensure to do this before publishing to npm!!)

yarn build-lib

Lints and fixes files

We also lint staged files before every commit using lint-staged and husky

yarn lint

Format files

We also format staged files before every commit using lint-staged and husky

# checks files for formatting issues
yarn format:check

# fixes formatting issues
yarn format:write

Customize configuration

See Configuration Reference.

Built from guide here: https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00