@amp-labs/react 1.0.0 → 1.0.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 +5 -104
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Ampersand React library
|
|
2
2
|
|
|
3
3
|
## Overview
|
|
4
|
-
Ampersand is a config-first platform for SaaS builders who are creating user-facing integrations
|
|
4
|
+
Ampersand is a config-first platform for SaaS builders who are creating user-facing integrations.
|
|
5
5
|
|
|
6
6
|
This repository contains the Ampersand React library, a set of React components that allow your end users to install and manage Ampersand integrations.
|
|
7
7
|
|
|
@@ -18,69 +18,14 @@ In your repo, use `npm` to install the package:
|
|
|
18
18
|
npm install @amp-labs/react
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
If you
|
|
22
|
-
|
|
21
|
+
If you are using yarn, you'll have to also install the peer dependencies.
|
|
23
22
|
```
|
|
24
|
-
|
|
23
|
+
yarn add @amp-labs/react @chakra-ui/react @emotion/react @emotion/styled framer-motion
|
|
25
24
|
```
|
|
26
25
|
|
|
27
26
|
## Usage
|
|
28
27
|
|
|
29
|
-
|
|
30
|
-
`<AmpersandProvider />` takes these props:
|
|
31
|
-
- `apiKey`: an API key to access Ampersand services. Please contact the team to obtain a key.
|
|
32
|
-
- `projectId`: your project ID. Please contact the team to obtain your project ID.
|
|
33
|
-
|
|
34
|
-
Currently, we offer the following component(s):
|
|
35
|
-
- `<InstallIntegration>`: Leads customers through installing Salesforce connection for an integration. Prompt users to provide their Salesforce credentials and guide them through the configuration of this integration. If the user had previously provided their Salesforce credentials already, this component will skip to the configuration step directly.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
This library was created with [Chakra UI](https://chakra-ui.com/).
|
|
39
|
-
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
Here's a full example
|
|
43
|
-
:
|
|
44
|
-
```tsx
|
|
45
|
-
import { AmpersandProvider, InstallIntegration } from '@amp-labs/react';
|
|
46
|
-
import { Routes, Route } from 'react-router-dom';
|
|
47
|
-
|
|
48
|
-
const options = {
|
|
49
|
-
projectId: 'PROJECT_ID', // Your Ampersand project ID.
|
|
50
|
-
apiKey: 'API_KEY',// Your Ampersand API key.
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
function App() {
|
|
55
|
-
// Name of the integration that you've defined in amp.yaml.
|
|
56
|
-
const integration = 'read-accounts-and-contacts-from-salesforce';
|
|
57
|
-
// The ID/REF that your app uses to identify this end user.
|
|
58
|
-
const consumerRef = 'CONSUMER_REF';
|
|
59
|
-
// The ID/REF that your app uses to identify a company, team, or workspace.
|
|
60
|
-
// All member of the group has access to its integrations, and only
|
|
61
|
-
// one member needs to install the integration.
|
|
62
|
-
const groupRef = 'GROUP_REF';
|
|
63
|
-
const groupName = 'GROUP_NAME';
|
|
64
|
-
|
|
65
|
-
return (
|
|
66
|
-
// Wrap your app with AmpersandProvider.
|
|
67
|
-
<AmpersandProvider options={options}>
|
|
68
|
-
<Routes>
|
|
69
|
-
<Route path = '/install' element =
|
|
70
|
-
// Connect credentials and configure integration.
|
|
71
|
-
{<InstallIntegration
|
|
72
|
-
integration={integration}
|
|
73
|
-
consumerName={userName}
|
|
74
|
-
consumerRef={consumerRef}
|
|
75
|
-
groupRef={groupRef}
|
|
76
|
-
groupName={groupName}
|
|
77
|
-
/>}
|
|
78
|
-
/>
|
|
79
|
-
</Routes>
|
|
80
|
-
</AmpersandProvider>
|
|
81
|
-
)
|
|
82
|
-
}
|
|
83
|
-
```
|
|
28
|
+
Please visit [our documentation](https://docs.withampersand.com/v1.0/docs/embeddable-ui-components) to learn more about how to use this library.
|
|
84
29
|
|
|
85
30
|
## License
|
|
86
31
|
|
|
@@ -91,48 +36,4 @@ To read this license, please see [LICENSE.md](https://github.com/amp-labs/react/
|
|
|
91
36
|
|
|
92
37
|
## Local Development
|
|
93
38
|
|
|
94
|
-
|
|
95
|
-
To generate the server api sdk from the swagger spec:
|
|
96
|
-
|
|
97
|
-
#### Java
|
|
98
|
-
java is required for sdk generation (```yarn generate-api```)
|
|
99
|
-
|
|
100
|
-
To install java on Mac
|
|
101
|
-
```
|
|
102
|
-
brew install java
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
Then check your installation by running
|
|
106
|
-
|
|
107
|
-
```
|
|
108
|
-
java -version
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
if you see this:
|
|
112
|
-
|
|
113
|
-
```
|
|
114
|
-
The operation couldn’t be completed. Unable to locate a Java Runtime.
|
|
115
|
-
Please visit http://www.java.com for information on installing Java.
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
Then you need to create a symlink for the system Java wrappers to find this JDK:
|
|
119
|
-
|
|
120
|
-
```
|
|
121
|
-
sudo ln -sfn /opt/homebrew/opt/openjdk/libexec/openjdk.jdk \
|
|
122
|
-
/Library/Java/JavaVirtualMachines/openjdk.jdk
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
[https://stackoverflow.com/a/65601197](https://stackoverflow.com/a/65601197)
|
|
126
|
-
|
|
127
|
-
#### clone server repo
|
|
128
|
-
We need to first clone the `server` repo as a sibliing directory [https://github.com/amp-labs/server](https://github.com/amp-labs/server)
|
|
129
|
-
```
|
|
130
|
-
- amp-labs
|
|
131
|
-
-- server
|
|
132
|
-
-- react
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
#### to generate an updated sdk
|
|
136
|
-
cd into `react` directory and generate open-api from sdk
|
|
137
|
-
|
|
138
|
-
```yarn generate-api```
|
|
39
|
+
Please see [CONTRIBUTING.md](https://github.com/amp-labs/react/blob/main/CONTRIBUTING.md).
|