@automattic/vip-design-system 0.34.4 → 0.34.5
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/CONTRIBUTING.md +140 -0
- package/README.md +2 -110
- package/build/system/NewForm/FormAutocomplete.js +28 -9
- package/build/system/NewForm/FormAutocomplete.stories.js +14 -4
- package/package.json +1 -1
- package/src/system/NewForm/FormAutocomplete.js +20 -3
- package/src/system/NewForm/FormAutocomplete.stories.jsx +7 -2
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
## Development
|
|
2
|
+
|
|
3
|
+
### Prerequisites
|
|
4
|
+
|
|
5
|
+
Make sure you have [node.js](https://nodejs.org/) and [NPM](https://docs.npmjs.com/getting-started/what-is-npm) installed. Here's a [handy installer](https://nodejs.org/download/) for Windows, Mac, and Linux.
|
|
6
|
+
|
|
7
|
+
### Install
|
|
8
|
+
|
|
9
|
+
To get setup run the following command in the `vip-design-system` directory:
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Watching for changes
|
|
16
|
+
|
|
17
|
+
You can build it continuously so that every time you make a change, build files are automatically updated:
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
npm run watch
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Testing
|
|
24
|
+
|
|
25
|
+
We can test two ways:
|
|
26
|
+
|
|
27
|
+
**Storybook**
|
|
28
|
+
|
|
29
|
+
For components that include storybooks, we can run `npm run storybook` to view the components in a sandbox-ed storybook environment.
|
|
30
|
+
|
|
31
|
+
**npm link**
|
|
32
|
+
|
|
33
|
+
1. Run `npm link` in your checkout of this repo.
|
|
34
|
+
2. Spin up a local copy of [the VIP Dashboard](https://github.com/automattic/vip-ui) and navigate to a page using the linked components from `@automattic/vip-design-system`
|
|
35
|
+
|
|
36
|
+
Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
|
|
37
|
+
|
|
38
|
+
### Updating the Theme with VIP Design System Tokens
|
|
39
|
+
|
|
40
|
+
You need to update the tokens once the VIP Design System updates the core files.
|
|
41
|
+
|
|
42
|
+
#### How the theming works
|
|
43
|
+
|
|
44
|
+
We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
|
|
45
|
+
|
|
46
|
+
By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The light theme is called: `wpvip-productive-color`, and the dark theme is called `wpvip-productive-color-dark`.
|
|
47
|
+
|
|
48
|
+
Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme-light.json`. This operation generates a small json file with the colors we need already filled in.
|
|
49
|
+
|
|
50
|
+
Once the theme is updated, the file `src/system/theme/index.js` reads the colors and apply to all components.
|
|
51
|
+
|
|
52
|
+
Use the section below to run the script and update the theme.
|
|
53
|
+
|
|
54
|
+
_Important:_ If you change the `generated/valet-theme.json`, make it sure to open a new pull request with these changes and release a new version if needed.
|
|
55
|
+
|
|
56
|
+
#### Update theme script
|
|
57
|
+
|
|
58
|
+
Run this command to update the VIP Valet Theme with the latest `tokens/**` files.
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
npm run theme-update
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Publishing new version
|
|
65
|
+
|
|
66
|
+
The process to release to npm should be started when all pull requests intended for publishing have been merged and the software has been fully tested for publication. You can release either using GitHub Actions or locally.
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
### Versioning Guidelines
|
|
70
|
+
|
|
71
|
+
- `patch`: for non-breaking changes/bugfixes and small updates.
|
|
72
|
+
- `minor`: for some new features, bug fixes, and other non-breaking changes.
|
|
73
|
+
- `major`: for breaking changes.
|
|
74
|
+
|
|
75
|
+
### Note on NPM token
|
|
76
|
+
|
|
77
|
+
Publishing via the GitHub Action requires that the `NPM_TOKEN` be set correctly in GitHub Actions secrets. This should be an npm token generated for a bot user on [the npm @automattic org](https://www.npmjs.com/settings/automattic) that has publish access to this repo.
|
|
78
|
+
|
|
79
|
+
### GitHub Actions (Preferred)
|
|
80
|
+
|
|
81
|
+
This is the preferred method for pushing out the latest release. The workflow runs a bunch of validations, generates a build, bump versions + tags, pushes out to npm, and bumps to the next dev version.
|
|
82
|
+
|
|
83
|
+
1. Initiate the [release process here](https://github.com/Automattic/vip-design-system/actions/workflows/npm-prepare-release.yml).
|
|
84
|
+
1. On the right-hand side, select "Run Workflow".
|
|
85
|
+
1. Pick your preferred version bump.
|
|
86
|
+
1. Click `Run Workflow`.
|
|
87
|
+
1. Wait for a pull request to appear. The pull request will update the version number and shall be assigned to you.
|
|
88
|
+
1. When ready, merge the pull request. This will lead to a new version to be [published on npmjs.com](https://www.npmjs.com/package/@automattic/vip-design-system).
|
|
89
|
+
1. Another pull request will be created to bump to a development version, also assigned to you. Merge it to finish the process.
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
### Local
|
|
93
|
+
|
|
94
|
+
Follow these steps to publish locally:
|
|
95
|
+
|
|
96
|
+
1. Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
|
|
97
|
+
2. Pull all the changes to your local trunk. Make sure you have the latest trunk locally.
|
|
98
|
+
3. We follow the [https://semver.org/](https://semver.org/) versioning. You should run the specific version you are trying to publish:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npm version major|minor|patch
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
4. You should see a version bump in the `package.json` file.
|
|
105
|
+
5. Build the application:
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
npm run build
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
6. Publish the application
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
npm publish
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process. You can also add `--otp=CODE` to the `npm publish` command if you already have the code.
|
|
118
|
+
|
|
119
|
+
7. Push the tags to the repository and trunk updates.
|
|
120
|
+
|
|
121
|
+
```
|
|
122
|
+
git push --tags
|
|
123
|
+
git push origin trunk
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
|
|
127
|
+
|
|
128
|
+
Ps: Add a `BREAKING CHANGES` section to the release. This will avoid folks trying to figure out why their code is not working on the VIP Dashboard or any other system.
|
|
129
|
+
|
|
130
|
+
## Troubleshooting
|
|
131
|
+
|
|
132
|
+
### Dialog + Dropdown usage
|
|
133
|
+
|
|
134
|
+
If you are facing a Dialog overlaping a Dropdown content, add this CSS to your application:
|
|
135
|
+
|
|
136
|
+
```css
|
|
137
|
+
div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
|
|
138
|
+
opacity: 0;
|
|
139
|
+
}
|
|
140
|
+
```
|
package/README.md
CHANGED
|
@@ -4,115 +4,7 @@ Design system components used throughout VIP.
|
|
|
4
4
|
|
|
5
5
|
[Storybook Components](https://vip-design-system-components.netlify.app/)
|
|
6
6
|
|
|
7
|
-
## Development
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
## Contributing
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
### Install
|
|
14
|
-
|
|
15
|
-
To get setup run the following command in the `vip-design-system` directory:
|
|
16
|
-
|
|
17
|
-
```
|
|
18
|
-
npm install
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### Watching for changes
|
|
22
|
-
|
|
23
|
-
You can build it continuously so that every time you make a change, build files are automatically updated:
|
|
24
|
-
|
|
25
|
-
```
|
|
26
|
-
npm run watch
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
### Testing
|
|
30
|
-
|
|
31
|
-
We can test two ways:
|
|
32
|
-
|
|
33
|
-
**Storybook**
|
|
34
|
-
|
|
35
|
-
For components that include storybooks, we can run `npm run storybook` to view the components in a sandbox-ed storybook environment.
|
|
36
|
-
|
|
37
|
-
**npm link**
|
|
38
|
-
|
|
39
|
-
1. Run `npm link` in your checkout of this repo.
|
|
40
|
-
2. Spin up a local copy of [the VIP Dashboard](https://github.com/automattic/vip-ui) and navigate to a page using the linked components from `@automattic/vip-design-system`
|
|
41
|
-
|
|
42
|
-
Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
|
|
43
|
-
|
|
44
|
-
### Updating the Theme with VIP Design System Tokens
|
|
45
|
-
|
|
46
|
-
You need to update the tokens once the VIP Design System updates the core files.
|
|
47
|
-
|
|
48
|
-
#### How the theming works
|
|
49
|
-
|
|
50
|
-
We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
|
|
51
|
-
|
|
52
|
-
By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The light theme is called: `wpvip-productive-color`, and the dark theme is called `wpvip-productive-color-dark`.
|
|
53
|
-
|
|
54
|
-
Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme-light.json`. This operation generates a small json file with the colors we need already filled in.
|
|
55
|
-
|
|
56
|
-
Once the theme is updated, the file `src/system/theme/index.js` reads the colors and apply to all components.
|
|
57
|
-
|
|
58
|
-
Use the section below to run the script and update the theme.
|
|
59
|
-
|
|
60
|
-
_Important:_ If you change the `generated/valet-theme.json`, make it sure to open a new pull request with these changes and release a new version if needed.
|
|
61
|
-
|
|
62
|
-
#### Update theme script
|
|
63
|
-
|
|
64
|
-
Run this command to update the VIP Valet Theme with the latest `tokens/**` files.
|
|
65
|
-
|
|
66
|
-
```bash
|
|
67
|
-
npm run theme-update
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### Publish NPM Package Instructions
|
|
71
|
-
|
|
72
|
-
Once all the changes needed are merged to trunk, and you are ready to release a new version, follow these steps:
|
|
73
|
-
|
|
74
|
-
1. Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
|
|
75
|
-
2. Pull all the changes to your local trunk. Make sure you have the latest trunk locally.
|
|
76
|
-
3. We follow the [https://semver.org/](https://semver.org/) versioning. You should run the specific version you are trying to publish:
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
npm version major|minor|patch
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
4. You should see a version bump in the `package.json` file.
|
|
83
|
-
5. Build the application:
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
npm run build
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
6. Publish the application
|
|
90
|
-
|
|
91
|
-
```
|
|
92
|
-
npm publish
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process. You can also add `--otp=CODE` to the `npm publish` command if you already have the code.
|
|
96
|
-
|
|
97
|
-
7. Push the tags to the repository and trunk updates.
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
git push --tags
|
|
101
|
-
git push origin trunk
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
|
|
105
|
-
|
|
106
|
-
Ps: Add a `BREAKING CHANGES` section to the release. This will avoid folks trying to figure out why their code is not working on the VIP Dashboard or any other system.
|
|
107
|
-
|
|
108
|
-
### Troubleshooting
|
|
109
|
-
|
|
110
|
-
### Dialog + Dropdown usage
|
|
111
|
-
|
|
112
|
-
If you are facing a Dialog overlaping a Dropdown content, add this CSS to your application:
|
|
113
|
-
|
|
114
|
-
```css
|
|
115
|
-
div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
|
|
116
|
-
opacity: 0;
|
|
117
|
-
}
|
|
118
|
-
```
|
|
10
|
+
See [CONTRIBUTING.md](https://github.com/Automattic/vip-design-system/blob/trunk/CONTRIBUTING.md) for details on development, testing, publishing, etc.
|
|
@@ -181,13 +181,17 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
|
|
|
181
181
|
isDirty = _useState[0],
|
|
182
182
|
setIsDirty = _useState[1];
|
|
183
183
|
|
|
184
|
-
var _useState2 = (0, _react.useState)(
|
|
185
|
-
|
|
186
|
-
|
|
184
|
+
var _useState2 = (0, _react.useState)(null),
|
|
185
|
+
sourceDebounceTimeout = _useState2[0],
|
|
186
|
+
setSourceDebounceTimeout = _useState2[1];
|
|
187
187
|
|
|
188
|
-
var _useState3 = (0, _react.useState)(value),
|
|
189
|
-
|
|
190
|
-
|
|
188
|
+
var _useState3 = (0, _react.useState)(value || ''),
|
|
189
|
+
selectedValue = _useState3[0],
|
|
190
|
+
setSelectedValue = _useState3[1];
|
|
191
|
+
|
|
192
|
+
var _useState4 = (0, _react.useState)(value),
|
|
193
|
+
inputQuery = _useState4[0],
|
|
194
|
+
setInputQuery = _useState4[1];
|
|
191
195
|
|
|
192
196
|
var debounceTimeout;
|
|
193
197
|
|
|
@@ -300,10 +304,25 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
|
|
|
300
304
|
setInputQuery(query); // user function to fetch the results has the precedence
|
|
301
305
|
|
|
302
306
|
if (source) {
|
|
303
|
-
|
|
304
|
-
|
|
307
|
+
if (!debounce) {
|
|
308
|
+
source(query, populateResults);
|
|
309
|
+
return;
|
|
310
|
+
}
|
|
305
311
|
|
|
306
|
-
|
|
312
|
+
if (sourceDebounceTimeout) {
|
|
313
|
+
clearTimeout(sourceDebounceTimeout);
|
|
314
|
+
setSourceDebounceTimeout(null);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
if (!query.length || query.length >= minLength) {
|
|
318
|
+
setSourceDebounceTimeout(setTimeout(function () {
|
|
319
|
+
source(query, populateResults);
|
|
320
|
+
setSourceDebounceTimeout(null);
|
|
321
|
+
}, debounce));
|
|
322
|
+
}
|
|
323
|
+
} else {
|
|
324
|
+
suggest(query, populateResults);
|
|
325
|
+
}
|
|
307
326
|
};
|
|
308
327
|
|
|
309
328
|
(0, _react.useEffect)(function () {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
exports.__esModule = true;
|
|
6
|
-
exports["default"] = exports.
|
|
6
|
+
exports["default"] = exports.WithSlowSearchAndDebounce = exports.WithSearchIcon = exports.WithLoading = exports.WithErrors = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.WithCustomArrow = exports.WithArrow = exports.Inline = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
9
9
|
|
|
@@ -37,6 +37,15 @@ var _default = {
|
|
|
37
37
|
type: 'text'
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
|
+
debounce: {
|
|
41
|
+
type: {
|
|
42
|
+
name: 'number',
|
|
43
|
+
required: false
|
|
44
|
+
},
|
|
45
|
+
control: {
|
|
46
|
+
type: 'number'
|
|
47
|
+
}
|
|
48
|
+
},
|
|
40
49
|
label: {
|
|
41
50
|
type: {
|
|
42
51
|
name: 'string',
|
|
@@ -149,13 +158,14 @@ var WithDebounce = function WithDebounce() {
|
|
|
149
158
|
};
|
|
150
159
|
|
|
151
160
|
exports.WithDebounce = WithDebounce;
|
|
152
|
-
var
|
|
153
|
-
exports.
|
|
154
|
-
|
|
161
|
+
var WithSlowSearchAndDebounce = DefaultComponent.bind({});
|
|
162
|
+
exports.WithSlowSearchAndDebounce = WithSlowSearchAndDebounce;
|
|
163
|
+
WithSlowSearchAndDebounce.args = (0, _extends2["default"])({}, Default.args, {
|
|
155
164
|
label: 'Label',
|
|
156
165
|
autoFilter: false,
|
|
157
166
|
minLength: 3,
|
|
158
167
|
required: true,
|
|
168
|
+
debounce: 500,
|
|
159
169
|
source: function () {
|
|
160
170
|
var _source = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(query, populateResults) {
|
|
161
171
|
return _regenerator["default"].wrap(function _callee$(_context) {
|
package/package.json
CHANGED
|
@@ -127,7 +127,7 @@ const FormAutocomplete = React.forwardRef(
|
|
|
127
127
|
forwardRef
|
|
128
128
|
) => {
|
|
129
129
|
const [ isDirty, setIsDirty ] = useState( false );
|
|
130
|
-
|
|
130
|
+
const [ sourceDebounceTimeout, setSourceDebounceTimeout ] = useState( null );
|
|
131
131
|
const [ selectedValue, setSelectedValue ] = useState( value || '' );
|
|
132
132
|
const [ inputQuery, setInputQuery ] = useState( value );
|
|
133
133
|
let debounceTimeout;
|
|
@@ -242,9 +242,26 @@ const FormAutocomplete = React.forwardRef(
|
|
|
242
242
|
setInputQuery( query );
|
|
243
243
|
// user function to fetch the results has the precedence
|
|
244
244
|
if ( source ) {
|
|
245
|
-
|
|
245
|
+
if ( ! debounce ) {
|
|
246
|
+
source( query, populateResults );
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
if ( sourceDebounceTimeout ) {
|
|
250
|
+
clearTimeout( sourceDebounceTimeout );
|
|
251
|
+
setSourceDebounceTimeout( null );
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
if ( ! query.length || query.length >= minLength ) {
|
|
255
|
+
setSourceDebounceTimeout(
|
|
256
|
+
setTimeout( () => {
|
|
257
|
+
source( query, populateResults );
|
|
258
|
+
setSourceDebounceTimeout( null );
|
|
259
|
+
}, debounce )
|
|
260
|
+
);
|
|
261
|
+
}
|
|
262
|
+
} else {
|
|
263
|
+
suggest( query, populateResults );
|
|
246
264
|
}
|
|
247
|
-
return suggest( query, populateResults );
|
|
248
265
|
};
|
|
249
266
|
useEffect( () => {
|
|
250
267
|
global.document
|
|
@@ -13,6 +13,10 @@ export default {
|
|
|
13
13
|
type: { name: 'string', required: false },
|
|
14
14
|
control: { type: 'text' },
|
|
15
15
|
},
|
|
16
|
+
debounce: {
|
|
17
|
+
type: { name: 'number', required: false },
|
|
18
|
+
control: { type: 'number' },
|
|
19
|
+
},
|
|
16
20
|
label: {
|
|
17
21
|
type: { name: 'string', required: false },
|
|
18
22
|
control: { type: 'text' },
|
|
@@ -103,13 +107,14 @@ export const WithDebounce = () => {
|
|
|
103
107
|
</>
|
|
104
108
|
);
|
|
105
109
|
};
|
|
106
|
-
export const
|
|
107
|
-
|
|
110
|
+
export const WithSlowSearchAndDebounce = DefaultComponent.bind( {} );
|
|
111
|
+
WithSlowSearchAndDebounce.args = {
|
|
108
112
|
...Default.args,
|
|
109
113
|
label: 'Label',
|
|
110
114
|
autoFilter: false,
|
|
111
115
|
minLength: 3,
|
|
112
116
|
required: true,
|
|
117
|
+
debounce: 500,
|
|
113
118
|
source: async ( query, populateResults ) => {
|
|
114
119
|
if ( ! query || query.length >= 3 ) {
|
|
115
120
|
setTimeout( () => {
|