adl-vue-components-2
v0.0.22
Published
## Using Library _TODO:_ This section should describe how to use the compiled npm package in individual service projects.
Downloads
5
Readme
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
git clone [email protected]:services/library/ui-component-library.git
andcd ui-component-library
npm ci
npm run storybook
for storybook andnpm 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 modenpm run test:ci
- Runs vitest once, for CI pipeline purposesnpm 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:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.