@amityco/ulta-ui-kit 4.0.0-alpha.2 → 4.0.0-alpha.4
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/dist/esm/index.css +1 -1
- package/dist/esm/index.js +776 -776
- package/dist/index.css +1 -1
- package/dist/index.js +850 -850
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/package.json +3 -2
- package/readme.md +164 -10
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amityco/ulta-ui-kit",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.4",
|
|
4
4
|
"engines": {
|
|
5
5
|
"node": ">=20",
|
|
6
6
|
"pnpm": "9"
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"react-dom": ">=17.0.2"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
+
"@amityco/ts-sdk": "6.32.3-b2bd351.0",
|
|
32
33
|
"@eslint/js": "^9.4.0",
|
|
33
34
|
"@storybook/addon-a11y": "^7.6.7",
|
|
34
35
|
"@storybook/addon-actions": "^7.6.7",
|
|
@@ -89,7 +90,7 @@
|
|
|
89
90
|
"vite-tsconfig-paths": "^4.2.3"
|
|
90
91
|
},
|
|
91
92
|
"dependencies": {
|
|
92
|
-
"@amityco/ts-sdk": "
|
|
93
|
+
"@amityco/ts-sdk": "6.32.3-a2e735a.0",
|
|
93
94
|
"@hookform/error-message": "^2.0.1",
|
|
94
95
|
"@hookform/resolvers": "^3.3.4",
|
|
95
96
|
"@lexical/link": "^0.18.0",
|
package/readme.md
CHANGED
|
@@ -1,21 +1,175 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Ulta-Social-Cloud-Ui-Kit for Web
|
|
2
2
|
|
|
3
3
|
## Getting started
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
https://ekoapp.atlassian.net/wiki/spaces/UP/pages/2443706407/ASC+Web+UIKit+V4+Governance
|
|
5
|
+
The AmityUIKit provides a comprehensive user interface toolkit to quickly integrate Amity Social features into new or existing websites. This toolkit simplifies the incorporation of social interactions within your projects through an iframe-based integration.
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
### Prerequisites
|
|
8
|
+
|
|
9
|
+
Before you begin, ensure you have the following installed:
|
|
10
|
+
|
|
11
|
+
• Node.js (>= 20.x)
|
|
12
|
+
• React.js (>= 18.x)
|
|
9
13
|
|
|
10
14
|
### Installation
|
|
11
15
|
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
With npm: `npm install --save @amityco/ulta-ui-kit`
|
|
17
|
+
|
|
18
|
+
With yarn: `yarn add @amityco/ulta-ui-kit`
|
|
19
|
+
|
|
20
|
+
### Basic Usage
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ulta-ui-kit";
|
|
24
|
+
|
|
25
|
+
import "@amityco/ulta-ui-kit/dist/index.css";
|
|
26
|
+
|
|
27
|
+
export default function App() {
|
|
28
|
+
// Retrieve userId from query parameters
|
|
29
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
30
|
+
const userId = urlParams.get("userId");
|
|
31
|
+
const apiKey = "<your API key here>";
|
|
32
|
+
const apiRegion = "<your API region here>";
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<>
|
|
36
|
+
<AmityUiKitProvider
|
|
37
|
+
key={userId}
|
|
38
|
+
apiKey={apiKey}
|
|
39
|
+
userId={userId}
|
|
40
|
+
apiRegion={apiRegion}
|
|
41
|
+
ultaConfig={{
|
|
42
|
+
faqCommunityId: "66bc52c4ab826560b11cd899",
|
|
43
|
+
newsCommunityId: "66bc52eec1eeb3bcfc61443e",
|
|
44
|
+
termsAndConditionsUrl: "https://www.ulta.com/foo",
|
|
45
|
+
privacyAndPolicyUrl: "https://www.ulta.com/bar",
|
|
46
|
+
allowUpdateDisplayName: true,
|
|
47
|
+
defaultTab?: 'newsfeed'
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
<div
|
|
51
|
+
style={{
|
|
52
|
+
position: "absolute",
|
|
53
|
+
left: 0,
|
|
54
|
+
top: 0,
|
|
55
|
+
width: "100vw",
|
|
56
|
+
height: "100dvh",
|
|
57
|
+
}}
|
|
58
|
+
>
|
|
59
|
+
<AmityUiKitSocial />
|
|
60
|
+
</div>
|
|
61
|
+
</AmityUiKitProvider>
|
|
62
|
+
</>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Iframe Post Message Integration
|
|
68
|
+
|
|
69
|
+
In React, the component’s state dictates the behavior and rendering of the component. When the state changes, React automatically triggers a re-render of the component, updating the DOM where necessary. In your application, the userId is stored in the component’s state using the useState hook. This state determines the URL of the iframe where the Amity UIKit is loaded. When the userId state changes, React recognizes this change and re-renders the component, including the iframe, with the updated URL.
|
|
70
|
+
|
|
71
|
+
When an anonymous user click on any buttons to interact within community, the UIKit will emit a ‘anonymousNeedsLogin’ postMessage event. Below is a code example demonstrating how to receive this postMessage event from the UIKit Iframe:
|
|
72
|
+
|
|
73
|
+
```sh
|
|
74
|
+
import React, { useState, useEffect } from 'react';
|
|
75
|
+
|
|
76
|
+
export default function App() {
|
|
77
|
+
// `userId` is managed as a state variable and will be updated post-login
|
|
78
|
+
const [userId, setUserId] = useState('public-xxxx');
|
|
79
|
+
|
|
80
|
+
// Handle the postMessage event from the iframe
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
const handleIframeMessage = event => {
|
|
83
|
+
if (event.data === 'anonymousNeedsLogin') {
|
|
84
|
+
// Prompt user to log in
|
|
85
|
+
// Logic to display login dialog should be implemented here
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
if (event.data ==== 'uikitRendered') {
|
|
89
|
+
// Logic to handle after uikit has been rendered
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
if (event.data ==== 'explorePageLoaded') {
|
|
93
|
+
// Logic to handle after Explore page has been loaded
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
if (event.data ==== 'parentNeedsScrollToTop') {
|
|
98
|
+
// `parentNeedsScrollToTop` will be posted from iFrame when the Nickname dialog is opened
|
|
99
|
+
window.scrollTo(0,0);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
// Listen for messages from the iframe
|
|
105
|
+
window.addEventListener('message', handleIframeMessage);
|
|
106
|
+
|
|
107
|
+
// Cleanup the event listener on component unmount
|
|
108
|
+
return () => {
|
|
109
|
+
window.removeEventListener('message', handleIframeMessage);
|
|
110
|
+
};
|
|
111
|
+
}, []);
|
|
112
|
+
|
|
113
|
+
// Function to handle setting a new `userId` after the user logs in
|
|
114
|
+
const handleSetUserId = newValue => {
|
|
115
|
+
setUserId(newValue);
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
return (
|
|
119
|
+
<div>
|
|
120
|
+
// Assume that this is Ulta login prompt
|
|
121
|
+
<input
|
|
122
|
+
type="text"
|
|
123
|
+
id="name"
|
|
124
|
+
placeholder="Enter new User ID"
|
|
125
|
+
onChange={(e) => handleSetUserId(e.target.value)}
|
|
126
|
+
/>
|
|
127
|
+
<button onClick={() => handleSetUserId(document.getElementById('name').value)}>
|
|
128
|
+
Set User ID
|
|
129
|
+
</button>
|
|
130
|
+
<iframe
|
|
131
|
+
style={{ width: '100%', height: '80vh' }}
|
|
132
|
+
title="Communities"
|
|
133
|
+
src={`https://urlToUikit.com?userId=${userId}`}
|
|
134
|
+
/>
|
|
135
|
+
</div>
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Anonymous User Flow
|
|
141
|
+
|
|
142
|
+
**Authenticated Users**
|
|
143
|
+
|
|
144
|
+
1. Access and Authentication:
|
|
145
|
+
|
|
146
|
+
- Users enter Ulta Web and navigate to the community tab.
|
|
147
|
+
- Ulta Web contacts Ulta Authentication Service to verify if the user is logged in.
|
|
148
|
+
|
|
149
|
+
2. Token Handling:
|
|
150
|
+
|
|
151
|
+
- If authenticated, Ulta Web requests an Amity authentication token from Ulta Server.
|
|
152
|
+
- Ulta Server forwards this request to Amity Server, which returns the token.
|
|
153
|
+
|
|
154
|
+
3. UIKit Initialization:
|
|
155
|
+
|
|
156
|
+
- Ulta Web instructs Ulta Iframe to initialize Amity UIKit using the authenticated Ulta User ID and token.
|
|
157
|
+
- Amity UIKit is then presented to the user, allowing continued interaction under their Ulta ID.
|
|
158
|
+
|
|
159
|
+
**Anonymous Users**
|
|
160
|
+
|
|
161
|
+
1. Access as Anonymous:
|
|
162
|
+
|
|
163
|
+
- If not logged in, the same token request is made to handle session management.
|
|
164
|
+
- Amity UIKit is initialized as ‘public’, allowing limited interaction.
|
|
165
|
+
|
|
166
|
+
2. Exceeded Interaction Limit:
|
|
14
167
|
|
|
15
|
-
|
|
168
|
+
- If anonymous interactions exceed limits, Amity UIKit informs Ulta Iframe, triggering a notification to Ulta Web.
|
|
169
|
+
- A login dialogue is presented to the user.
|
|
16
170
|
|
|
17
|
-
|
|
171
|
+
3. Login Decision:
|
|
18
172
|
|
|
19
|
-
|
|
173
|
+
- If the user logs in, Ulta Authentication Service authenticates the user, and the token process repeats to reinitialize Amity UIKit with the Ulta User ID.
|
|
20
174
|
|
|
21
|
-
|
|
175
|
+
|