Ovation UI Component Library

Using Library

TODO: This section should describe how to use the compiled npm package in individual service projects.

# Register with GitLab npm registry
# Reload npm config?
# npm install this package

Setup

1. git clone [email protected]:services/library/ui-component-library.git and cd ui-component-library
2. npm ci
3. npm run storybook for storybook and npm run test to watch tests.

Component Structure

All components are inside src/components, and should follow the naming convention CxmDemo where Demo is the component name. This will make it easier for users of the library to use the components, knowing they are all namespaced to cxm.

Storybook

Each component should have a corresponding storybook in the src/stories directory. To run storybook, run npm run storybook. Build a static version of Storybook with npm run build-storybook.

Testing

Testing is done with a combination of vitest, testing-library/vue, and happy-dom.

Commands

• npm run test - Runs vitest in watch mode
• npm run test:ci - Runs vitest once, for CI pipeline purposes
• npm run test:ui - Runs Vitest in watch mode, additionally opening a web portal to view test status

Linting and Formatting

Linting and formatting are both done with eslint, configured inside of package.json eslintConfig configuration property. Your IDE should be able to pick up this eslint configuration and format/lint automatically.

Building and Publishing

TODO

npm run build outputs to the dist directory.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

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 TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.