@dialpad/dialtone 9.35.0-alpha.6 → 9.35.0-beta.2

package/README.md

@@ -2,6 +2,104 @@
 
 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.
+
+## Usage
+
+### Install it via NPM:
+
+#### Vue 3
+
+```shell
+npm install @dialpad/dialtone@next @tiptap/vue-3
+```
+
+#### Vue 2
+
+```shell
+npm install @dialpad/dialtone@next @linusborg/vue-simple-portal @tiptap/vue-2
+```
+
+### Import packages:
+
+#### Dialtone CSS
+
+Dialtone CSS includes all utility classes as well as tokens.
+
+- CSS
+
+```css
+@import "@dialpad/dialtone/css";
+```
+
+- Javascript
+
+```js
+import "@dialpad/dialtone/css";
+```
+
+If you are using the Vue components, then import either Vue 2 or Vue 3 css:
+
+- CSS
+
+```css
+@import "@dialpad/dialtone/vue2/css";
+/* Or */
+@import "@dialpad/dialtone/vue3/css";
+```
+
+- Javascript
+
+```js
+import "@dialpad/dialtone/vue2/css";
+/* Or */
+import "@dialpad/dialtone/vue3/css";
+```
+
+#### Dialtone icons
+
+- Vue 2:
+
+```js
+// 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:
+
+```js
+// 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';
+```
+
+#### Dialtone Vue components
+
+- Vue 2
+
+```js
+// 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
+
+```js
+// 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"
+```
+
 ## About this repo
 
 The @dialpad/dialtone repository is a monorepo composed of Dialtone NPM packages and apps.
@@ -16,6 +114,7 @@ dialtone/
   |--- 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
@@ -25,33 +124,55 @@ dialtone/
 |--- scripts                      # Shared scripts
 ```
 
-## Tooling
+## Contributing
+
+Please read our [contributing guide](.github/CONTRIBUTING.md) **before submitting a pull request**.
+
+### Quick start
+
+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.
+
+![Creating a codespace](./.github/new_codespace.png)
+
+Please see the [Codespaces docs](./.github/codespaces.md) for more information.
+
+### Local development
 
-### PNPM
+#### PNPM
 
 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**.
 
-#### Do
+You will need to install PNPM locally to contribute to this project. <https://pnpm.io/installation>
+
+##### Installation
+
+```bash
+npm install -g pnpm
+```
 
-Use PNPM to manage packages dependencies
+##### Do
+
+Use PNPM to manage package dependencies
 
 ```bash
 pnpm add eslint --filter dialtone-icons
 ```
 
-#### Don't
+##### Don't
 
 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.
 
 ```bash
-pnpm run --filter packages/dialtone-css build
+pnpm run --filter dialtone-css build
 ```
 
-### NX
+#### NX
 
 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.
@@ -74,7 +195,15 @@ if they need to run before a specific command.
 
 For more information, check [setup a monorepo with PNPM workspaces and NX](https://blog.nrwl.io/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx-bc5d97258a7e#d69f)
 
-#### Do
+##### Installation
+
+It is recommended to install NX globally via:
+
+```bash
+pnpm add --global nx@latest
+```
+
+##### Do
 
 Use NX to run scripts, this will use cache, improve the performance,
 and build any dependency needed before running your command.
@@ -83,7 +212,7 @@ and build any dependency needed before running your command.
 nx run dialtone-css:build
 ```
 
-#### Don't
+##### Don't
 
 Try installing packages with NX, this doesn't work at all, please use PNPM instead.
 
@@ -91,87 +220,95 @@ Try installing packages with NX, this doesn't work at all, please use PNPM inste
 nx add eslint --filter dialtone-icons
 ```
 
-## Quick start
-
-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.
-
-![Creating a codespace](./.github/new_codespace.png)
+#### Running the projects
 
-Please see the [Codespaces docs](./.github/codespaces.md) for more information.
+First, install the dependencies for all the monorepo packages and apps.
 
-### Local environment setup
+```bash
+pnpm install
+```
 
-- We use [pnpm](https://pnpm.io) for managing dependencies, so you need to have it installed
-in order to be able to manage the packages. In order to install it, run the following command
-or follow its [installation guide](https://pnpm.io/installation):
+##### Dialtone documentation site
 
 ```bash
-npm install -g pnpm
+nx start:dialtone
 ```
 
-Once pnpm is installed, install nx globally to make sure you can run commands such as `nx run build`
-without having to prefix them with `pnpm` or `pnpm exec`:
+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`
+
+##### Dialtone Vue 2 storybook
 
 ```bash
-pnpm add --global nx@latest
+nx start:dialtone-vue2
 ```
 
-Then, install the dependencies for all the monorepo packages and apps.
+Access the local storybook server for Dialtone Vue 2 via `http://localhost:9010/`
+
+##### Dialtone Vue 3 storybook
 
 ```bash
-pnpm install
+nx start:dialtone-vue3
 ```
 
-### Running the projects
+Access the local storybook server for Dialtone Vue 3 via `http://localhost:9011/`
+
+#### Common Commands
 
-#### Dialtone
+##### Production build the root project
 
 ```bash
-nx start:dialtone
+nx build
 ```
 
-This will start the documentation site and watch the library changes, so it is live updated.
+##### Run all Vue unit tests
 
-Access the local server at `http://localhost:4000`
+```bash
+nx test
+```
 
-#### Dialtone Vue 2:
+##### Run Vue 2 tests
 
 ```bash
-nx start:dialtone-vue2
+nx test dialtone-vue2
 ```
 
-Access the local storybook server for Dialtone Vue 2 via `http://localhost:9010/`
-
-#### Dialtone Vue 3:
+##### Run Vue 3 tests
 
 ```bash
-nx start:dialtone-vue3
+nx test dialtone-vue3
 ```
 
-Access the local storybook server for Dialtone Vue 3 via `http://localhost:9011/`
+Use the `--filter` flag to run commands for a specific package or app.
 
-## Local development
+##### Adding dependencies for individual packages
 
-Use the `--filter` flag to run commands
-for a specific package or app.
+```bash
+pnpm add <dependency> --filter <package or app name>
+```
 
-### Adding dependencies for individual packages
+Example:
 
 ```bash
-pnpm add <dependency> --filter <package/app>
+pnpm add eslint --filter dialtone-icons
 ```
 
 To install a local dependency, just add the `--workspace` flag
 
 ```bash
-pnpm add <dependency> --filter <package/app> --workspace
+pnpm add <dependency> --filter <package or app name> --workspace
+```
+
+Example:
+
+```bash
+pnpm add @dialpad/dialtone-tokens --filter dialtone-icons --workspace
 ```
 
-### Running commands for individual packages
+##### Running commands for individual packages
 
-You can run commands like `build`, `test`, `start` from
+You can run commands like `build`, `test`, `start` for individual packages from
 the root of the project with:
 
 ```bash
@@ -186,52 +323,53 @@ nx build dialtone-documentation
 
 ### Releasing
 
-Running these commands will call [release.sh](./scripts/release.sh) which
-automatically release all packages that need to be released.
+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.
 
-Once done, a GitHub Action will be triggered, you can check the progress here:
-[release.yml](https://github.com/dialpad/dialtone/actions/workflows/release.yml)
+#### Production
 
-If something goes wrong, and you need to re-run the release, you can run the workflow manually through the `Run workflow`
-option on GitHub.
+##### Scheduled
 
-Select the `production` branch and pass the `commit SHA` which you would like to be the base to detect the changes or
-choose a `package` to release individually.
+On every Tuesday at 10:00 am UTC, [release action](.github/workflows/release.yml) will trigger the production release process which
+automatically release all packages that need to be released following the next steps:
 
-#### Production
+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](https://github.com/dialpad/dialtone/actions/workflows/publish.yml) will publish the packages with its corresponding tag.
+
+##### Manually
+
+In case you need to release earlier than the next scheduled date, you can trigger the release via `Run workflow` on [GitHub](https://github.com/dialpad/dialtone/actions/workflows/release.yml).
 
-This can only be run while on **staging** branch. After running the command, it will execute the following steps:
+  1. Select `staging` branch.
+  2. Select the `package` that you want to release or leave it empty to release all of them.
 
-1. Run build on the affected projects to improve the speed of the next step.
-2. Run release-local script on the affected projects to verify and increase the version according to commits.
-3. Merge `staging` version changes to `production`
-4. Push `production` branch.
-   - A GHA will publish the release on npm and GitHub with `@latest` tag.
-5. Merge changes from `production` back to `staging`
+This will trigger the [release action](.github/workflows/release.yml), 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](https://github.com/dialpad/dialtone/actions/workflows/publish.yml) will publish the packages with its corresponding tag.
 
 ```bash
-nx run dialtone:release
+nx run release
 ```
 
-#### Alpha/Beta
+#### Alpha/Beta/Next
 
-Needs to be run while on your feature branch. After running the command, it will execute the following steps:
+##### Manually
 
-1. Delete local and remote `alpha/beta` branch.
-2. Checkout to a clean `alpha/beta` branch and push to origin.
-3. Run build on the affected projects to improve the speed of the next step.
-4. Run release-local script on the affected projects to verify and increase the version according to commits.
-5. Push updated `alpha/beta` branch to origin.
-   - A GHA will publish the release on npm and GitHub with `@alpha` or `@beta` tag.
-6. Merge changes from `alpha/beta` back to your feature branch.
+1. Merge your changes to the branch you want to release, commit and push to origin.
+2. Go to [GitHub](https://github.com/dialpad/dialtone/actions/workflows/release.yml) 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.
 
-```bash
-nx run dialtone:release:alpha
-```
+This will trigger the [release action](.github/workflows/release.yml), release changes on the selected branch and automatically publish the selected packages following the next steps:
 
-```bash
-nx run dialtone:release:beta
-```
+1. Run the `nx release` on selected packages (all if `package` is empty).
+2. An [action](https://github.com/dialpad/dialtone/actions/workflows/publish.yml) will publish the packages with its corresponding tag.
 
 ## Usage
 
@@ -293,12 +431,6 @@ import { DtIconArrowUp } from '@dialpad/dialtone-icons/vue3';
 import DtIconArrowUp from '@dialpad/dialtone-icons/vue3/arrow-up';
 ```
 
-- In case you are not using vue, import the svg's directly as following:
-
-```js
-import IconArrowUp from '@dialpad/dialtone-icons/arrow-up.svg';
-```
-
 - Importing json files
 
 ```js

package/package.json

@@ -1,7 +1,58 @@
 {
   "name": "@dialpad/dialtone",
-  "version": "9.35.0-alpha.6",
+  "version": "9.35.0-beta.2",
   "description": "Dialpad's Dialtone design system monorepo",
+  "scripts": {
+    "test:all": "nx run-many --target=test",
+    "build:all": "nx run-many --target=build",
+    "lint:all": "nx run-many --target=lint",
+    "start:dialtone": "nx run-many --target=start --projects=dialtone-css,dialtone-documentation",
+    "start:dialtone-vue3": "nx run-many --target=start --projects=dialtone-css,dialtone-vue3",
+    "start:dialtone-vue2": "nx run-many --target=start --projects=dialtone-css,dialtone-vue2",
+    "prepare": "husky install",
+    "test:vue": "vitest run --test-timeout=10000"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "vue": "^2.6.0 || ^3.3.4",
+        "mem-fs": "^4.0.0",
+        "stylelint": "^15.11.0"
+      }
+    },
+    "packageExtensions": {
+      "@dialpad/dialtone-vue@2": {
+        "peerDependencies": {
+          "vue": "^2.6.0"
+        }
+      },
+      "@dialpad/dialtone-vue@3": {
+        "peerDependencies": {
+          "vue": "^3.3.4"
+        }
+      },
+      "@linusborg/vue-simple-portal": {
+        "peerDependencies": {
+          "vue": "^2.6.6"
+        }
+      },
+      "@tiptap/vue-2": {
+        "peerDependencies": {
+          "vue": "^2.6.0"
+        }
+      },
+      "@tiptap/vue-3": {
+        "peerDependencies": {
+          "vue": "^3.3.4"
+        }
+      },
+      "vue-template-compiler": {
+        "peerDependencies": {
+          "vue": "^2.7.15"
+        }
+      }
+    }
+  },
   "files": [
     "dist"
   ],
@@ -35,6 +86,8 @@
     "./*": "./dist/*"
   },
   "dependencies": {
+    "@dialpad/dialtone-emojis": "workspace:*",
+    "@dialpad/dialtone-icons": "workspace:*",
     "@tiptap/core": "2.3.0",
     "@tiptap/extension-blockquote": "2.3.0",
     "@tiptap/extension-bold": "2.3.0",
@@ -61,9 +114,7 @@
     "emoji-toolkit": "8.0.0",
     "requireindex": "1.2.0",
     "stylelint": "15.11.0",
-    "tippy.js": "6.3.7",
-    "@dialpad/dialtone-emojis": "1.0.3",
-    "@dialpad/dialtone-icons": "4.15.1-alpha.1"
+    "tippy.js": "6.3.7"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
@@ -143,17 +194,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "test:all": "nx run-many --target=test",
-    "build:all": "nx run-many --target=build",
-    "lint:all": "nx run-many --target=lint",
-    "start:dialtone": "nx run-many --target=start --projects=dialtone-css,dialtone-documentation",
-    "start:dialtone-vue3": "nx run-many --target=start --projects=dialtone-css,dialtone-vue3",
-    "start:dialtone-vue2": "nx run-many --target=start --projects=dialtone-css,dialtone-vue2",
-    "release": "./scripts/release.sh",
-    "release:alpha": "./scripts/release.sh alpha",
-    "release:beta": "./scripts/release.sh beta",
-    "test:vitest": "vitest run --test-timeout=10000"
   }
-}
+}