@dialpad/dialtone 9.1.0 → 9.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -8
- package/dist/css/dialtone.css +2 -2
- package/dist/tokens/android/java/tokens-dark.kt +1 -1
- package/dist/tokens/android/java/tokens-light.kt +1 -1
- package/dist/tokens/android/res/values/colors-dark.xml +1 -1
- package/dist/tokens/android/res/values/colors-light.xml +1 -1
- package/dist/tokens/android/res/values/dimens.xml +1 -1
- package/dist/tokens/css/variables-dark.css +1 -1
- package/dist/tokens/css/variables-light.css +1 -1
- package/dist/tokens/ios/tokens-dark.swift +1 -1
- package/dist/tokens/ios/tokens-light.swift +1 -1
- package/dist/tokens/less/variables-dark.less +1 -1
- package/dist/tokens/less/variables-light.less +1 -1
- package/dist/vue2/types/common/storybook_utils.d.ts +12 -2
- package/dist/vue2/types/common/storybook_utils.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,9 +4,10 @@ The monorepo for Dialpad's design system Dialtone.
|
|
|
4
4
|
|
|
5
5
|
## About this repo
|
|
6
6
|
|
|
7
|
-
The @dialpad/dialtone repository is a monorepo composed of
|
|
7
|
+
The @dialpad/dialtone repository is a monorepo composed of Dialtone NPM packages and apps.
|
|
8
8
|
|
|
9
|
-
The following is a list of packages included in this monorepo. Note that libraries (packages folder) are separated from
|
|
9
|
+
The following is a list of packages included in this monorepo. Note that libraries (packages folder) are separated from
|
|
10
|
+
apps (apps folder):
|
|
10
11
|
|
|
11
12
|
```sh
|
|
12
13
|
dialtone/
|
|
@@ -14,16 +15,20 @@ dialtone/
|
|
|
14
15
|
|--- apps # Apps
|
|
15
16
|
|--- dialtone-documentation # Documentation site
|
|
16
17
|
|--- packages # NPM packages
|
|
17
|
-
|--- dialtone
|
|
18
|
-
|--- dialtone-
|
|
19
|
-
|--- dialtone-
|
|
18
|
+
|--- dialtone-css # CSS library
|
|
19
|
+
|--- dialtone-vue2 # Vue component library compatible with vue@2
|
|
20
|
+
|--- dialtone-vue3 # Vue component library compatible with vue@3
|
|
21
|
+
|--- dialtone-icons # SVG icons library
|
|
22
|
+
|--- dialtone-tokens # Tokens library
|
|
20
23
|
|--- eslint-plugin-dialtone # Custom ESLint rules for Dialtone users
|
|
21
24
|
|--- scripts # Shared scripts
|
|
22
25
|
```
|
|
23
26
|
|
|
24
27
|
## Quick start
|
|
25
28
|
|
|
26
|
-
If you would like to contribute to Dialtone without having to do any local environment setup, you can use GitHub
|
|
29
|
+
If you would like to contribute to Dialtone without having to do any local environment setup, you can use GitHub
|
|
30
|
+
Codespaces. You can initialize a new Codespace by clicking the green "Code" button at the top right of the Dialtone
|
|
31
|
+
GitHub page.
|
|
27
32
|
|
|
28
33
|
|
|
29
34
|
|
|
@@ -32,7 +37,7 @@ Please see the [Codespaces docs](./.github/codespaces.md) for more information.
|
|
|
32
37
|
### Local environment setup
|
|
33
38
|
|
|
34
39
|
- We use [Nx](https://nx.dev/) as build system for improved speed and easier monorepo administration.
|
|
35
|
-
nx is installed as a dev dependency in the root of the project.
|
|
40
|
+
nx is installed as a dev dependency in the root of the project.
|
|
36
41
|
- We use [pnpm](https://pnpm.io) for managing workspaces
|
|
37
42
|
|
|
38
43
|
If you do not have pnpm installed, you can install it with:
|
|
@@ -109,7 +114,80 @@ pnpm nx build dialtone-documentation
|
|
|
109
114
|
### Releasing
|
|
110
115
|
|
|
111
116
|
```bash
|
|
112
|
-
pnpm run release:
|
|
117
|
+
pnpm run release:affected
|
|
113
118
|
```
|
|
114
119
|
|
|
115
120
|
This will automatically release all packages that need to be released.
|
|
121
|
+
|
|
122
|
+
## Usage
|
|
123
|
+
|
|
124
|
+
### Install it via NPM:
|
|
125
|
+
|
|
126
|
+
```shell
|
|
127
|
+
npm install @dialpad/dialtone@next
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Import packages:
|
|
131
|
+
|
|
132
|
+
#### Dialtone CSS
|
|
133
|
+
|
|
134
|
+
- CSS
|
|
135
|
+
|
|
136
|
+
```css
|
|
137
|
+
@import "@dialpad/dialtone/css";
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
- Javascript
|
|
141
|
+
|
|
142
|
+
```js
|
|
143
|
+
import "@dialpad/dialtone/css";
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
#### Dialtone eslint-plugin
|
|
147
|
+
|
|
148
|
+
```js
|
|
149
|
+
import dialtone from "@dialpad/dialtone/eslint-plugin"
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
#### Dialtone icons
|
|
153
|
+
|
|
154
|
+
⚠️ *You should avoid importing the icons directly*, please use `DtIcon` vue component instead. ⚠️
|
|
155
|
+
|
|
156
|
+
In case you cannot use vue components, import the files directly under the `dist/` folder as following:
|
|
157
|
+
|
|
158
|
+
- Importing icons:
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
import IconArrowUp from '@dialpad/dialtone/dist/icons/svg/arrow-up.svg';
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
- Importing json files
|
|
165
|
+
|
|
166
|
+
```js
|
|
167
|
+
import keywords from '@dialpad/dialtone/dist/icons/keywords.json';
|
|
168
|
+
import iconsList from '@dialpad/dialtone/dist/icons/icons.json';
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
#### Dialtone Vue
|
|
172
|
+
|
|
173
|
+
- Vue 2
|
|
174
|
+
|
|
175
|
+
```js
|
|
176
|
+
import { DtButton } from "@dialpad/dialtone/vue2"
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
- Vue 3
|
|
180
|
+
|
|
181
|
+
```js
|
|
182
|
+
import { DtButton } from "@dialpad/dialtone/vue3"
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
#### Dialtone Tokens
|
|
186
|
+
|
|
187
|
+
Dialtone tokens doesn't have a default export, so you need to access
|
|
188
|
+
the files directly under the dist/ folder as following:
|
|
189
|
+
|
|
190
|
+
```css
|
|
191
|
+
@import "@dialpad/dialtone/dist/tokens/css/variables-light.css" // Light tokens
|
|
192
|
+
@import "@dialpad/dialtone/dist/tokens/css/variables-dark.css" // Dark tokens
|
|
193
|
+
```
|
package/dist/css/dialtone.css
CHANGED
|
@@ -7426,7 +7426,7 @@ body {
|
|
|
7426
7426
|
}
|
|
7427
7427
|
/**
|
|
7428
7428
|
* Do not edit directly
|
|
7429
|
-
* Generated on
|
|
7429
|
+
* Generated on Wed, 03 Jan 2024 18:10:43 GMT
|
|
7430
7430
|
*/
|
|
7431
7431
|
|
|
7432
7432
|
.dialtone-theme-light {
|
|
@@ -8223,7 +8223,7 @@ body {
|
|
|
8223
8223
|
|
|
8224
8224
|
/**
|
|
8225
8225
|
* Do not edit directly
|
|
8226
|
-
* Generated on
|
|
8226
|
+
* Generated on Wed, 03 Jan 2024 18:10:44 GMT
|
|
8227
8227
|
*/
|
|
8228
8228
|
|
|
8229
8229
|
.dialtone-theme-dark {
|
|
@@ -1,9 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Will use a Vue SFC to render the template rather than a template string.
|
|
3
|
+
* This is useful for more complex components that are hard to work with and
|
|
4
|
+
* get messy when rendered via a template string. Will pass args and argTypes
|
|
5
|
+
* into the component so it is able to be live edited with storybook controls addon.
|
|
6
|
+
* @param component this will get the component name
|
|
7
|
+
* @param defaultTemplate we will mount in this component
|
|
8
|
+
* @param argsData storybook control args
|
|
9
|
+
* @returns {component} the template component with props and args added.
|
|
10
|
+
*/
|
|
11
|
+
export function createRenderConfig(component: any, defaultTemplate: any, argsData: any): any;
|
|
1
12
|
/**
|
|
2
13
|
* Gets the full list of icon component names from the dialtone package
|
|
3
14
|
* @returns {string[]} icon component names
|
|
4
15
|
*/
|
|
5
16
|
export function getIconNames(): string[];
|
|
6
|
-
export function createTemplateFromVueFile(args: object, argTypes: object, templateComponent: component): component;
|
|
7
17
|
export function generateTemplate(component: any, { props, excludeProps, customProps, childTemplate }?: {
|
|
8
18
|
props?: any[] | undefined;
|
|
9
19
|
excludeProps?: any[] | undefined;
|
|
@@ -12,8 +22,8 @@ export function generateTemplate(component: any, { props, excludeProps, customPr
|
|
|
12
22
|
}): string;
|
|
13
23
|
declare namespace _default {
|
|
14
24
|
export { generateTemplate };
|
|
15
|
-
export { createTemplateFromVueFile };
|
|
16
25
|
export { getIconNames };
|
|
26
|
+
export { createRenderConfig };
|
|
17
27
|
}
|
|
18
28
|
export default _default;
|
|
19
29
|
//# sourceMappingURL=storybook_utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"storybook_utils.d.ts","sourceRoot":"","sources":["../../../common/storybook_utils.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"storybook_utils.d.ts","sourceRoot":"","sources":["../../../common/storybook_utils.js"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,6FAQC;AAED;;;GAGG;AACH,gCAFa,MAAM,EAAE,CAIpB;AAEM;;;;;WAoBN"}
|