Deskhero ui

Deskhero ui is component library, based on Deskhero design system and Vue 3.

Preview the latest changes on Chromatic

Installation

Install the component library

npm i @deskhero/dh_ui

Usage

You can import from the main bundle:

import { DhIcon } from "@deskhero/dh_ui";

then on html:

<dh-icon :icon-name="'search'" :size="24" />

You also need to import Main CSS file to your project

import "@deskhero/dh_ui/dist/style.css";

Storybook

Storybook helps you build UI components in isolation from your app's business logic, data, and context. That makes it easy to develop hard-to-reach states. Save these UI states as stories to revisit during development, testing, or QA.

We are using storybook in order to develop the components independently from any consumer. run this to build & run the storybook locally:

First install the node packages:

npm install

then serve storybook application

npm run storybook

the storybook will be served on http://localhost:6006

Developing locally with your consumer application

When developing locally we are using a npm functionality called npm link, this allows us to work locally on our package and use it in a different project without publishing. This functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.

From dh_ui

npm run build && npm link

Then on your project

npm link @deskhero/dh_ui

VS Code IntelliSense for Deskhero UI

You can enable richer autocomplete and hover information for Deskhero components and utility classes by pointing VS Code to the generated custom data manifests.

After building the library (or running npm run build:all), the following files are created:

• dist/vscode.css-custom-data.json – CSS classes (e.g. flex, items-center) with descriptions where available.
• dist/vscode.html-custom-data.json – Vue component tags (e.g. dh-advanced-filter) with descriptions from component docs.

In your consumer application, add a workspace-level .vscode/settings.json (or extend your existing one) and reference these files with paths relative to your app:

{
  "css.customData": [
    "../dh-ui/dist/vscode.css-custom-data.json"
  ],
  "html.customData": [
    "../dh-ui/dist/vscode.html-custom-data.json"
  ]
}

Adjust the ../dh-ui segment to match where this library lives relative to your consumer app. Once configured, VS Code will offer:

• Tag completion and hover for Deskhero components in Vue SFC templates.
• Class name completion and hover for Deskhero utility classes in templates and styles.

Recommended IDE Setup

VSCode + 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.

Types

if your component use a specific model/type, please export it by adding it on the /src/models/index.ts. You can use the DropdownMenuItem as an example.