The monorepo for Dialpad's design system Dialtone.

All packages of the monorepo are combined into a single Dialtone package for ease of use, however all separate packages of dialtone are also deployed individually. If you would like to use an individual package rather than the combined Dialtone package, you can find documentation for each package in the readme under the respective packages folder. The below usage instructions are for the combined package.

npm install @dialpad/dialtone@latest @tiptap/vue-3

npm install @dialpad/dialtone@latest @linusborg/vue-simple-portal @tiptap/vue-2

Dialtone CSS includes all utility classes as well as tokens.

• CSS

@import "@dialpad/dialtone/css";

• Javascript

import "@dialpad/dialtone/css";

If you are using the Vue components, then import either Vue 2 or Vue 3 css:

• CSS

@import "@dialpad/dialtone/vue2/css";
/* Or */
@import "@dialpad/dialtone/vue3/css";

• Javascript

import "@dialpad/dialtone/vue2/css";
/* Or */
import "@dialpad/dialtone/vue3/css";

• Vue 2:

// Named import
import { DtIconArrowUp } from '@dialpad/dialtone-icons/vue2';

// Default import (Prefered if using webpack as it is tree-shakeable by default)
import DtIconArrowUp from '@dialpad/dialtone-icons/vue2/arrow-up';

• Vue 3:

// Named import
import { DtIconArrowUp } from '@dialpad/dialtone-icons/vue3';

// Default import (Prefered if using webpack as it is tree-shakeable by default)
import DtIconArrowUp from '@dialpad/dialtone-icons/vue3/arrow-up';

• Vue 2

// Named import
import { DtButton } from "@dialpad/dialtone/vue2"

// Default import (Prefered if using webpack as it is tree-shakeable by default)
import { DtButton } from "@dialpad/dialtone/vue2/lib/button"

• Vue 3

// Named import
import { DtButton } from "@dialpad/dialtone/vue3"

// Default import (Prefered if using webpack as it is tree-shakeable by default)
import { DtButton } from "@dialpad/dialtone/vue3/lib/button"

Dialtone tokens doesn't have a default export, so you need to access the files directly as following:

• CSS

@import "@dialpad/dialtone/tokens/variables-light.css" // Light tokens
@import "@dialpad/dialtone/tokens/variables-dark.css" // Dark tokens

• LESS

@import "@dialpad/dialtone/tokens/variables-light.less" // Light tokens
@import "@dialpad/dialtone/tokens/variables-dark.less" // Dark tokens

• JSON

import "@dialpad/dialtone/tokens/tokens-light.json" // Light tokens
import "@dialpad/dialtone/tokens/tokens-dark.json" // Dark tokens

The @dialpad/dialtone repository is a monorepo composed of Dialtone NPM packages and apps.

The following is a list of packages included in this monorepo. Note that libraries (packages folder) are separated from apps (apps folder):

dialtone/
|--- .github                      # Github configuration and workflows
|--- apps                         # Apps
  |--- dialtone-documentation     # Documentation site
|--- packages                     # NPM packages
  |--- dialtone-css               # CSS library
  |--- dialtone-emojis            # Emoji assets
  |--- dialtone-vue2              # Vue component library compatible with vue@2
  |--- dialtone-vue3              # Vue component library compatible with vue@3
  |--- dialtone-icons             # SVG icons library
  |--- dialtone-tokens            # Tokens library
  |--- eslint-plugin-dialtone     # Custom ESLint rules for Dialtone users
  |--- stylelint-plugin-dialtone  # Custom Stylelint rules for Dialtone users
|--- scripts                      # Shared scripts

Please read our contributing guide before submitting a pull request.

If you would like to contribute to Dialtone without having to do any local environment setup, you can use GitHub Codespaces. You can initialize a new Codespace by clicking the green "Code" button at the top right of the Dialtone GitHub page.

Please see the Codespaces docs for more information.

PNPM (Performant NPM) is a package management solution designed to address the challenges posed by traditional package managers.

We use PNPM to manage everything related to NPM, adding, installing, removing and publishing packages.

You will need to install PNPM locally to contribute to this project. https://pnpm.io/installation

npm install -g pnpm

Use PNPM to manage package dependencies

pnpm add eslint --filter dialtone-icons

Run package scripts with PNPM, this will not use NX cache and pipelines, so you might end up missing dependencies that needed to be built before.

pnpm run --filter dialtone-css build

Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.

NX manages the scheduling and caching of our PNPM scripts.

We still rely on the package installation and package linking mechanism that PNPM workspaces provide us, but use Nx instead to run our tasks in the most efficient way.

One of the main benefits of adding Nx to our PNPM workspace is speed via caching.

Running commands via NX will enable us to do several things:

• Setup the project dependencies to other projects command, if they need to run before a specific command.
• Improve the speed of the command execution by saving its output to cache.
• Run the command on the affected projects only.

⚠️ You can run the commands with PNPM too, but it's not advisable as You'll lose the advantages that NX provides.

For more information, check setup a monorepo with PNPM workspaces and NX

It is recommended to install NX globally via:

pnpm add --global nx@latest

Use NX to run scripts, this will use cache, improve the performance, and build any dependency needed before running your command.

nx run dialtone-css:build

Try installing packages with NX, this doesn't work at all, please use PNPM instead.

nx add eslint --filter dialtone-icons

First, install the dependencies for all the monorepo packages and apps.

pnpm install

nx start:dialtone

This will start the documentation site and watch the library for changes, it will be live updated with any changes.

Access the local server at http://localhost:4000

nx start:dialtone-vue2

Access the local storybook server for Dialtone Vue 2 via http://localhost:9010/

nx start:dialtone-vue3

Access the local storybook server for Dialtone Vue 3 via http://localhost:9011/

nx build

nx test

nx test dialtone-vue2

nx test dialtone-vue3

Use the --filter flag to run commands for a specific package or app.

pnpm add <dependency> --filter <package or app name>

Example:

pnpm add eslint --filter dialtone-icons

To install a local dependency, just add the --workspace flag

pnpm add <dependency> --filter <package or app name> --workspace

Example:

pnpm add @dialpad/dialtone-tokens --filter dialtone-icons --workspace

You can run commands like build, test, start for individual packages from the root of the project with:

nx <command> <package/app>

Example:

nx build dialtone-documentation

Currently, Dialtone packages are being release in two different ways: scheduled and manually. The scheduled release will only release changes to production while manually you can choose to release alpha, beta or next branches.

On every Tuesday at 10:00 am UTC, release action will trigger the production release process which automatically release all packages that need to be released following the next steps:

1. Run the nx release on every project.
2. Merge the release commits created by the semantic release bot on staging to production branch.
3. Push the production branch.
4. An action will publish the packages with its corresponding tag.

In case you need to release earlier than the next scheduled date, you can trigger the release via Run workflow on GitHub.

1. Select staging branch.
2. Select the package that you want to release or leave it empty to release all of them.

This will trigger the release action, release changes on staging and automatically publish the selected packages following the next steps:

1. Run the nx release on selected packages (all if package is empty).
2. Merge the release commits created by the semantic release bot on staging to production branch.
3. Push the production branch.
4. An action will publish the packages with its corresponding tag.

nx run release

1. Merge your changes to the branch you want to release, commit and push to origin.
2. Go to GitHub and click on Run workflow.
3. Select alpha, beta or next branch.
4. Select the package that you want to release or leave it empty to release all of them.

This will trigger the release action, release changes on the selected branch and automatically publish the selected packages following the next steps:

1. Run the nx release on selected packages (all if package is empty).
2. An action will publish the packages with its corresponding tag.