adl-primevue-component-library-test

v0.0.18

Published

9 months ago

## Usage ### Package Setup 1. Consuming repos need to be configured to point to the @services:registry, instructions: https://git.goboomtown.com/services/library/ui-component-library/-/packages/4702 2. Run `npm install @services/ui-component-library --sav

Downloads

0High
0Medium
0Low

jeffkynaston

Ovation UI Component Library

Usage

Package Setup

Consuming repos need to be configured to point to the @services:registry, instructions: https://git.goboomtown.com/services/library/ui-component-library/-/packages/4702
Run npm install @services/ui-component-library --save
Import styles into a css file, or directly into main.ts inside a vue application

@import '@services/ui-component-library/styles';
@import '/app.css'

import '@services/ui-component-library/styles'
import App from "./App.vue";

Note: Import ui-component-library styles above application styles to allow local component styles to override theme defaults

Add wrapper class for CSS styles

<body class="dx-viewport">
   <App/>
</body>

Note: DevExtreme uses globally scoped classnames and requires the .dx-viewport class in a parent container.

Component Usage

Import components and use within SFCs in vue applications.

<script setup>
import { CxmButton } from '@services/ui-component-library'
</script>

<template>
   <CxmButton text="Submit"/>
</template>

Development

Development Setup

git clone [email protected]:services/library/ui-component-library.git and cd ui-component-library
npm ci
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.

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

Vite is configured to output a compiled library in esm and cjs formats
Types are automatically generated and published with the npm package.
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
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)
Reload the VSCode window by running Developer: Reload Window from the command palette.