npm package: @felix-health/vue-components
Description: A Vue CLI project that contains all of Felix Health's vue components and documentation for those components.
Latest version: 3.9.13

# 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](https://www.npmjs.com/package/@felix-health/felix-app-tailwind-design-system)).`

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

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

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

```js
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:

```js
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](https://www.notion.so/felixforus/Vue2-Vue3-components-tracking-list-8075d2ce18dd4cd691e789ffebd2da6e))
  - 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](https://www.notion.so/felixforus/Vue2-Vue3-components-tracking-list-8075d2ce18dd4cd691e789ffebd2da6e) 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](https://testing-library.com/docs/vue-testing-library/intro) with [Jest](https://jestjs.io/) 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](https://cli.vuejs.org/config/).

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