LOOM

LOOM is a component library for CARPET. It is built with Vue 3 and Vite.

Component catalog.

The available components are showcased in a Storybook. To run the Storybook locally, clone the repository, install all dependencies with npm i and then run npm run storybook.

Add components.

To add components to the library, create a new sub-directory in the src/components directory with the name of your new component. Eacg component should have its own .vue file for the rendering logic, a .ts file for the business and statemanagement logic (documented with JSDoc-Strings - docs will be built automatically), a .stories.ts file for the visual component documentation in Storybook and a .spec.ts file for unit tests. Vue-components should be written as a SFC (Single File Component) with the composition API. The business logic should be encapsulated in a class that extends from the BaseComponent class in the src/components/BaseComponent.ts. This class provides the component with reactive properties and methods to update them. The entire state of the created component should be handled and exposed via those methods. To include the component in the npm-package, it has to be exported in the index.ts file in the src directory.

Releases and Commit Schema

This repository follows the ConventionalCommits-Schema. This means that every commit should follow this schema:

<type>[optional scope]: <comment>

<long description>

<word-token> #<reference>

Example.

Releases are derived from the commit messages. The versioning is done automatically via Semantic Versioning.

Development

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

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

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint