@felix-health/vue-components-vue3 v1.2.20

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-vue3

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-vue3/dist/style.css';

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

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

// 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.js';
import * as ClientComponents from '@felix-health/vue-components/dist/client.js';

Add a new component

1. make sure you are up to date with the latest main branch
2. add the component under a v3 directory under the corresponding component directory (e.g. src/components/accordion/v3/)
3. export your component in vue3Components.js under server-build or client-build folder accordingly

Branch naming

• For vue-3 only changes (i.e. merging to vue-3-only branch), prefix the branch name with mbl 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 mbl 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 vue-3-only branch
4. yarn build and then npm publish --access public

Project local setup

yarn install

To test and run components for functionality and styling check (): 1. run pwd to get local path 2. go to the consumer project directory, run npm install {path from above} 3. Or you can add this to package.json manually, for example:

// For absolute path
"@felix-health/vue-components-vue3": "/Users/{username}/felix/vue-components"

// For relative path (from the pr-testing-components branch example)
"@felix-health/vue-components-vue3": "file:../vue-components"

To test in charm (nuxt 3), pull this branch pr-testing-components and check out the test pages inside pages/components/

This is a temporary solution before we implement a proper style library like Storybook

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

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