@quidgest/ui

@quidgest/ui

Quidgest's UI framework.

Features

• A collection of customizable and reusable Vue 3 components.
• Written in TypeScript for type safety and better developer experience.
• Easily style components using SCSS.
• Documentation and examples.

Install

npm i @quidgest/ui

Usage

Start by installing the framework. We recommend placing this logic in a dedicated file, such as src/plugins/quidgest-ui.ts.

// src/plugins/quidgest-ui.ts

import { createFramework } from '@quidgest/ui'

const framework = createFramework()

export default framework

Then, use the plugin in main.ts, as follows:

// src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

import framework from './plugins/quidgest-ui'

createApp(App).use(framework).mount('#app')

Mount one QDialogProvider and one QToaster in the app root (for example App.vue). useDialog / useToast share a single list per app; mounting a second provider or toaster for the same app throws.

<template>
	<q-dialog-provider />
	<q-toaster />
	<router-view />
</template>

Once installed, components can be used like so:

<template>
	<q-button @click="handleClick">Click me</q-button>
</template>

<script setup lang="ts">
	import { QButton } from '@quidgest/ui/components'

	function handleClick() {
		console.log("Parallel lines have so much in common. It's a shame they'll never meet.")
	}
</script>

Public API metadata

The package ships a machine-readable catalog of the public surface at @quidgest/ui/api (dist/json/api.json):

// Node ESM (and environments that require an import attribute):
import api from '@quidgest/ui/api' with { type: 'json' }

// Bundlers often accept a bare JSON import; TypeScript needs `resolveJsonModule`.
// import api from '@quidgest/ui/api'

api.version // package version
api.components // Vue component docs (props, events, examples)
api.composables // symbols re-exported from `src/composables/index.ts`
api.utils // utils submodules re-exported from `src/utils/index.ts`

The selective barrels are the allowlist: only what those entry files re-export appears under composables and utils. The file is produced by pnpm build:api (also run before Storybook and in the package publish pipeline). Component Storybook docs remain the primary human reference for props; use this export for tooling (codegen, Genio, audits) or the Storybook API/ pages for composables and utils.

Development

The package utilizes Storybook for component development and organization. You can view the components locally in the Storybook documentation explorer.

Execute the following command to run Storybook:

npm run storybook

(You might need to execute pnpm install beforehand if you haven't done so.)

By default, Storybook will be running at http://localhost:6006/.

Running Unit Tests

It's important to run unit tests during development to ensure code quality and correctness. Execute the following command to run the unit tests:

npm run test