customer-components

FitX Vue 3 Component and Widget Library. Overview

Use Package 🐨

Requirements

Install

$ npm install @fitx/customer-components --save

Use

<script lang="ts" setup>
  import { FitxButton } from '@fitx/customer-components';
</script>
<template>
  <fitx-button>Nice</fitx-button>
</template>

Import Styles

Normally via main.ts

import '@fitx/customer-components/styles.css';

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Type-Check, Compile and Minify for Package Release

npm run build:lib

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug

Lint with ESLint

npm run lint

Start Storybook local

npm run storybook

Build Storybook

npm run build-storybook

Development

For Local Component Testing see Sandbox Implementation.

Update Lib

Make sure to update component index file after add new Components. and run

npm run build:lib

Publish Lib

npm publish --access public

Release to NPM and publish to netlify

As soon as you merge or push into branch 'release' GitHub Actions starts a workflow:

• run unit tests

• after success:

• publish to NPM

• netlify will trigger build for manually deployment

• On update Master, Netlify will build and deploy automatically

❗ If version in package.json is not updated, NPM release will fail ❗