Deskhero ui is component library, based on Deskhero design system and Vue 3.
Preview the latest changes on Chromatic
Install the component library
npm i @deskhero/dh_ui
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 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
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
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
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.
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.