@archbee/app-widget 1.1.0

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.
Files changed (3) hide show
  1. package/README.md +107 -0
  2. package/env.local +2 -0
  3. package/package.json +71 -0
package/README.md ADDED
@@ -0,0 +1,107 @@
1
+ # Archbee React Component Widget
2
+
3
+ ## Table of Contents
4
+
5
+ * [Installation](#installation)
6
+ * [API documentation](#api-documentation)
7
+ * [Examples](#examples)
8
+
9
+ ## Installation
10
+
11
+ To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
12
+
13
+
14
+ $ npm install --save @archbee/app-widget
15
+ $ yarn add @archbee/app-widget
16
+
17
+ If you need to install Archbee Contextual Widget SDK, you can find more details [here](https://docs.archbee.com/app-widget).
18
+
19
+ ## API documentation
20
+
21
+ The primary documentation for Archbee React component Widget can be found in
22
+ [docs](https://docs.archbee.com/app-widget), which describes the API
23
+ and gives examples of its usage.
24
+
25
+ ## Examples
26
+
27
+ Here is a simple example of Archbee React widget being used in an app with some action variations:
28
+
29
+ ```tsx
30
+ import React from 'react';
31
+ import { ArchbeeAppWidget } from '@archbee/app-widget'
32
+
33
+ function App() {
34
+ return (
35
+ <div>
36
+ <ArchbeeAppWidget
37
+ spaceId={ /** published space id **/ }
38
+ onWidgetOpen={() => { /** ... **/ }} // callback function called after widget has open
39
+ // onWidgetClose={() => { /** ... **/ }} // callback function called after widget has open
40
+ >
41
+ <button type='button'>
42
+ Open
43
+ </button>
44
+ </ArchbeeAppWidget>
45
+ </div>
46
+ );
47
+ }
48
+
49
+ ReactDOM.render(<App />, appElement);
50
+ ```
51
+
52
+ Can also be used with ref for a more programmatic approach:
53
+
54
+ ```tsx
55
+ import React from 'react';
56
+ import { ArchbeeAppWidget, ArchbeeWidget } from '@archbee/app-widget'
57
+
58
+ function App() {
59
+ const widgetRef = useRef<ArchbeeWidget>(null);
60
+
61
+ return (
62
+ <div>
63
+ <ArchbeeAppWidget
64
+ ref={widgetRef}
65
+ spaceId={ /** published space id **/ }
66
+ onWidgetOpen={() => { /** ... **/ }} // callback function called after widget has open
67
+ onWidgetClose={() => { /** ... **/ }} // callback function called after widget has open
68
+ >
69
+ <button type='button' onClick={() => {
70
+ <!-- Opens widget -->
71
+ widgetRef.current?.open();
72
+ }}>
73
+ Open
74
+ </button>
75
+
76
+ <button type='button' onClick={() => {
77
+ <!-- Closes widget -->
78
+ widgetRef.current?.close();
79
+ }}>
80
+ Close
81
+ </button>
82
+
83
+ <button type='button' onClick={() => {
84
+ <!-- Gets the instance of the widget if needed for various event manipulations. -->
85
+ widgetRef.current?.instance();
86
+ }}>
87
+ Get widget instance
88
+ </button>
89
+ </ArchbeeAppWidget>
90
+ </div>
91
+ );
92
+ }
93
+
94
+ ReactDOM.render(<App />, appElement);
95
+ ```
96
+
97
+ If `ref` is not passed to `ArchbeeAppWidget`, the children will automatically open the modal popup upon click.
98
+
99
+ You can find more examples in the `examples` directory, which you can run in a
100
+ local development server using `npm start` or `yarn run start`.
101
+
102
+ ## Demos
103
+
104
+ Down below is a demo setup in [CodePen](https://codepen.io), which
105
+ demonstrate various features of archbee-app:
106
+
107
+ * [Demo](https://codesandbox.io/s/funny-austin-gndp8w?file=/src/App.tsx)
package/env.local ADDED
@@ -0,0 +1,2 @@
1
+ REACT_APP_ARCHBEE_IFRAME_URL=http://localhost:3000/public
2
+ REACT_APP_CSS_PATH=https://qa-widget.archbee.com/v1
package/package.json ADDED
@@ -0,0 +1,71 @@
1
+ {
2
+ "name": "@archbee/app-widget",
3
+ "version": "1.1.0",
4
+ "private": false,
5
+ "license": "UNLICENSED",
6
+ "author": {
7
+ "name": "Archbee",
8
+ "email": "support@archbee.com"
9
+ },
10
+ "dependencies": {
11
+ "react-modal": "^3.16.1"
12
+ },
13
+ "peerDependencies": {
14
+ "react": "^18.2.0",
15
+ "react-dom": "^18.2.0"
16
+ },
17
+ "devDependencies": {
18
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
19
+ "@craco/craco": "^7.1.0",
20
+ "@parcel/packager-ts": "^2.10.3",
21
+ "@parcel/transformer-typescript-types": "^2.10.3",
22
+ "@testing-library/jest-dom": "^5.17.0",
23
+ "@testing-library/react": "^13.4.0",
24
+ "@testing-library/user-event": "^13.5.0",
25
+ "@types/jest": "^29.5.3",
26
+ "@types/node": "^20.9.0",
27
+ "@types/react": "^18.2.15",
28
+ "@types/react-dom": "^18.2.7",
29
+ "@types/react-modal": "^3.16.0",
30
+ "autoprefixer": "^10.4.14",
31
+ "craco-plugin-env": "^1.0.5",
32
+ "mini-css-extract-plugin": "^2.7.6",
33
+ "parcel": "^2.10.3",
34
+ "parcel-resolver-ignore": "^2.1.5",
35
+ "postcss": "^8.4.26",
36
+ "prettier": "^3.0.0",
37
+ "ts-loader": "^9.4.1",
38
+ "typescript": "^4.9.5",
39
+ "web-vitals": "^2.1.4"
40
+ },
41
+ "scripts": {
42
+ "clean": "rm -rf dist build",
43
+ "start": "craco start",
44
+ "build": "npm run clean && npm run build:widget && npm run build:react",
45
+ "build:widget": "REACT_APP_SDK=true craco build && parcel build src/index.tsx --no-source-maps && mkdir -p build/v1 && cp dist/* build/v1/",
46
+ "build:react": "./react-build.script.sh",
47
+ "test": "craco test",
48
+ "format": "prettier --write src/**/*.ts{,x}",
49
+ "pub": "npm publish",
50
+ "prebuild": "npm run clean",
51
+ "eject": "craco eject"
52
+ },
53
+ "eslintConfig": {
54
+ "extends": [
55
+ "react-app",
56
+ "react-app/jest"
57
+ ]
58
+ },
59
+ "browserslist": {
60
+ "production": [
61
+ ">0.2%",
62
+ "not dead",
63
+ "not op_mini all"
64
+ ],
65
+ "development": [
66
+ "last 1 chrome version",
67
+ "last 1 firefox version",
68
+ "last 1 safari version"
69
+ ]
70
+ }
71
+ }