genesys-react-components 0.1.0-alpha.4 → 0.1.0-alpha.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/README.md +56 -8
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,16 +1,54 @@
|
|
|
1
1
|
# Genesys React Components
|
|
2
2
|
|
|
3
|
-
A React component library containing standardized form elements.
|
|
4
|
-
|
|
3
|
+
A React component library containing standardized form elements. Check out the live demo and full documenation at https://purecloudlabs.github.io/genesys-react-components/
|
|
5
4
|
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
+
```sh
|
|
8
|
+
npm i genesys-react-components
|
|
9
|
+
# install peer dependencies if necessary
|
|
10
|
+
npm i genesys-dev-icons uuid
|
|
7
11
|
|
|
12
|
+
# or
|
|
8
13
|
|
|
14
|
+
yarn add genesys-react-components
|
|
15
|
+
# install peer dependencies if necessary
|
|
16
|
+
yarn add genesys-dev-icons uuid
|
|
17
|
+
```
|
|
9
18
|
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
import React, { useRef } from 'react';
|
|
23
|
+
import { DxTextbox } from 'genesys-react-components';
|
|
24
|
+
import { GenesysDevIcons } from 'genesys-dev-icons';
|
|
25
|
+
|
|
26
|
+
export default function App() {
|
|
27
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
|
28
|
+
return (
|
|
29
|
+
<div className='app'>
|
|
30
|
+
<DxTextbox
|
|
31
|
+
label='1000ms debounce (default 300), removes focus on value change via onChange callback'
|
|
32
|
+
placeholder='Focus will clear 1 second after you stop typing'
|
|
33
|
+
icon={GenesysDevIcons.AppZoomZoomRight}
|
|
34
|
+
clearButton={true}
|
|
35
|
+
onChange={(value: string) => {
|
|
36
|
+
console.log('1000ms debouncer triggered, clearing focus', value);
|
|
37
|
+
inputRef.current?.blur();
|
|
38
|
+
}}
|
|
39
|
+
changeDebounceMs={1000}
|
|
40
|
+
inputRef={inputRef}
|
|
41
|
+
onFocus={() => console.log('focus')}
|
|
42
|
+
onBlur={() => console.log('blur')}
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
10
48
|
|
|
11
|
-
|
|
49
|
+
## Building Locally
|
|
12
50
|
|
|
13
|
-
|
|
51
|
+
### `genesys-react-components` package
|
|
14
52
|
|
|
15
53
|
In the root of the repo, run:
|
|
16
54
|
|
|
@@ -19,11 +57,11 @@ npm i
|
|
|
19
57
|
npm run build
|
|
20
58
|
```
|
|
21
59
|
|
|
22
|
-
This clears the build folder and rebuilds the package from source using the rollup configuration to produce single-file libraries.
|
|
60
|
+
This clears the build folder and rebuilds the package from source using the rollup configuration to produce single-file libraries.
|
|
23
61
|
|
|
24
62
|
When validating the package locally, run `npm link` in the root of this repo to create a local symlink in npm for `genesys-react-components` that points to the locally built package. Take note of the _Error: Invalid hook call_ notice in the troubleshooting section below.
|
|
25
63
|
|
|
26
|
-
|
|
64
|
+
### Demo app
|
|
27
65
|
|
|
28
66
|
To build and serve the demo app locally, run:
|
|
29
67
|
|
|
@@ -44,9 +82,19 @@ yarn start
|
|
|
44
82
|
|
|
45
83
|
Run `yarn unlinklib` to revert to using the latest published version of the package.
|
|
46
84
|
|
|
47
|
-
|
|
85
|
+
#### Publishing the demo app
|
|
86
|
+
|
|
87
|
+
Run the following command to publish the demo app to the GitHub Pages site:
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
cd app
|
|
91
|
+
yarn unlink
|
|
92
|
+
yarn publish
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Troubleshooting
|
|
48
96
|
|
|
49
|
-
|
|
97
|
+
### Error: Invalid hook call
|
|
50
98
|
|
|
51
99
|
The following error may be encountered at runtime while running a React app locally when using `npm link genesys-react-components` to load the local package:
|
|
52
100
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "genesys-react-components",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.5",
|
|
4
4
|
"description": "A React component library containing standardized form elements.",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"module": "build/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"bugs": {
|
|
21
21
|
"url": "https://github.com/purecloudlabs/genesys-react-components/issues"
|
|
22
22
|
},
|
|
23
|
-
"homepage": "https://github.
|
|
23
|
+
"homepage": "https://purecloudlabs.github.io/genesys-react-components",
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@rollup/plugin-commonjs": "^21.0.1",
|
|
26
26
|
"@rollup/plugin-node-resolve": "^13.0.6",
|