@crimson-education/replit-sdk 1.0.2-beta-14 → 1.0.2-beta-16
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
CHANGED
|
@@ -1,68 +1,107 @@
|
|
|
1
|
-
|
|
1
|
+
# Replit SDK for Crimson App
|
|
2
2
|
|
|
3
3
|
This SDK facilitates the rapid integration of Replit-hosted applications into the Crimson ecosystem.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Core Principle
|
|
6
6
|
|
|
7
|
-
The integration
|
|
7
|
+
The integration works by passing environment variables and user parameters via URL parameters (query string or hash) to the Replit frontend. This data is stored in-memory and persists until the current session ends, providing a seamless iframe integration experience.
|
|
8
8
|
|
|
9
|
-
Project Structure
|
|
9
|
+
## Project Structure
|
|
10
10
|
|
|
11
|
-
- api
|
|
11
|
+
- **`api`**:
|
|
12
|
+
- `bindApi(app)`: Binds `/api/function` routes to an Express app for forwarding GraphQL requests.
|
|
13
|
+
- `graphqlProxySchema`: Zod schema for the proxy request body.
|
|
14
|
+
- **`components`**:
|
|
15
|
+
- `ExternalLink`: A specialized component designed to handle navigation to external URLs (out of iframe).
|
|
16
|
+
- **`hooks`**:
|
|
17
|
+
- `useUrlParams()`: Extracts and stores essential data (Auth Tokens, API endpoints) from the URL.
|
|
18
|
+
- `getStoredParam(key)` / `setStoredParams(values)`: Utilities for managing persisted parameters.
|
|
19
|
+
- **`functions`**:
|
|
20
|
+
- Implementations for fundamental Crimson API calls like `fetchLoginUser` and `fetchMyStudents`.
|
|
21
|
+
- **`utils`**:
|
|
22
|
+
- `initDatadog(config)`: Manages Datadog initialization.
|
|
23
|
+
- `trackEvent(name)`: Analytics utility.
|
|
24
|
+
- `apiRequest(query, variables)`: A pre-configured GraphQL request client wrapper.
|
|
12
25
|
|
|
13
|
-
|
|
26
|
+
## Quick Integration Guide
|
|
14
27
|
|
|
15
|
-
|
|
28
|
+
To integrate your Replit app into the Crimson ecosystem, follow these steps:
|
|
16
29
|
|
|
17
|
-
|
|
30
|
+
### 1. Install the SDK
|
|
18
31
|
|
|
19
|
-
|
|
32
|
+
```bash
|
|
33
|
+
npm install @crimson-education/replit-sdk@1.0.2-beta-15
|
|
34
|
+
```
|
|
20
35
|
|
|
21
|
-
|
|
36
|
+
### 2. Wrap your App with DevProvider
|
|
22
37
|
|
|
23
|
-
|
|
38
|
+
Initialize the context at the top level of your application.
|
|
24
39
|
|
|
25
|
-
|
|
40
|
+
```tsx
|
|
41
|
+
import { IDevProvider } from '@crimson-education/replit-sdk/lib/context/dev-context';
|
|
26
42
|
|
|
27
|
-
|
|
43
|
+
function App() {
|
|
44
|
+
return (
|
|
45
|
+
<IDevProvider>
|
|
46
|
+
<YourAppRoutes />
|
|
47
|
+
</IDevProvider>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
28
51
|
|
|
29
|
-
|
|
52
|
+
### 3. Setup Express Proxy
|
|
30
53
|
|
|
31
|
-
|
|
54
|
+
In your server-side code (e.g., `server/routes.ts`), bind the API proxy:
|
|
32
55
|
|
|
33
|
-
|
|
56
|
+
```typescript
|
|
57
|
+
import { bindApi } from '@crimson-education/replit-sdk';
|
|
34
58
|
|
|
35
|
-
|
|
59
|
+
export function registerRoutes(app: Express) {
|
|
60
|
+
bindApi(app);
|
|
61
|
+
// ... other routes
|
|
62
|
+
}
|
|
63
|
+
```
|
|
36
64
|
|
|
37
|
-
###
|
|
65
|
+
### 4. Use URL Parameters Hook
|
|
38
66
|
|
|
39
|
-
|
|
67
|
+
In your main component, use the hook to sync URL parameters to memory:
|
|
40
68
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
69
|
+
```tsx
|
|
70
|
+
import { useUrlParams } from '@crimson-education/replit-sdk/lib/hooks/use-url-params';
|
|
71
|
+
|
|
72
|
+
function MainComponent() {
|
|
45
73
|
useUrlParams();
|
|
46
|
-
return
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
6.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
trackEvent('
|
|
67
|
-
|
|
68
|
-
|
|
74
|
+
return <div>My Content</div>;
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### 5. Handle External Links
|
|
79
|
+
|
|
80
|
+
Use the `ExternalLink` component for any links that should open outside the iframe:
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { ExternalLink } from '@crimson-education/replit-sdk';
|
|
84
|
+
|
|
85
|
+
<ExternalLink href="https://app.crimsoneducation.org">Go to Crimson App</ExternalLink>;
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### 6. Initialize Analytics (Optional)
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
import { init as datadogInit, trackEvent } from '@crimson-education/replit-sdk';
|
|
92
|
+
|
|
93
|
+
datadogInit({ app: 'your-replit-app-name' });
|
|
94
|
+
trackEvent('APP_LAUNCHED');
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### 7. Fetch Crimson Data
|
|
98
|
+
|
|
99
|
+
Use the built-in functions to fetch user or student data:
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
import { fetchLoginUser, fetchMyStudents } from '@crimson-education/replit-sdk/lib/functions';
|
|
103
|
+
|
|
104
|
+
const user = await fetchLoginUser();
|
|
105
|
+
// you may get multiple roles, just keep one of 'STRATEGIST', 'CASE_MANAGER', 'TUTOR',
|
|
106
|
+
const students = await fetchMyStudents(user.userId, ['STRATEGIST']);
|
|
107
|
+
```
|
|
@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
|
|
|
8
8
|
const use_url_params_1 = require("../hooks/use-url-params");
|
|
9
9
|
const datadog_1 = require("../utils/datadog");
|
|
10
10
|
function ExternalLink({ href, replit, children, eventName = 'external_link_click', onClick, ...props }) {
|
|
11
|
-
const isReplit = replit !== null && replit !== void 0 ? replit : (href.
|
|
11
|
+
const isReplit = replit !== null && replit !== void 0 ? replit : (href.includes('replit.app') || href.includes('replit.com/t'));
|
|
12
12
|
const parentDomain = (0, use_url_params_1.getStoredParam)('parentDomain') || '';
|
|
13
13
|
const finalHref = isReplit && parentDomain ? parentDomain + '/replit/t?redirect=' + encodeURIComponent(href) : href;
|
|
14
14
|
const handleClick = (event) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dev-context.d.ts","sourceRoot":"","sources":["../../src/context/dev-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2B,SAAS,EAAa,MAAM,OAAO,CAAC;AAU7E,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"dev-context.d.ts","sourceRoot":"","sources":["../../src/context/dev-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2B,SAAS,EAAa,MAAM,OAAO,CAAC;AAU7E,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6EpD,CAAC"}
|
|
@@ -70,7 +70,14 @@ const IDevProvider = ({ children }) => {
|
|
|
70
70
|
return (react_1.default.createElement("div", { style: modalOverlayStyle },
|
|
71
71
|
react_1.default.createElement("div", { style: modalContentStyle },
|
|
72
72
|
react_1.default.createElement("h3", null, "Developer Authentication"),
|
|
73
|
-
react_1.default.createElement("p", null, "Please enter your Crimson Token to continue
|
|
73
|
+
react_1.default.createElement("p", null, "Please enter your Crimson Token to continue "),
|
|
74
|
+
react_1.default.createElement("p", null,
|
|
75
|
+
"Go to",
|
|
76
|
+
' ',
|
|
77
|
+
react_1.default.createElement("a", { href: "https://staging.app.crimsoneducation.org/replit/key" }, "https://staging.app.crimsoneducation.org/replit/key"),
|
|
78
|
+
' ',
|
|
79
|
+
"to copy the token",
|
|
80
|
+
' '),
|
|
74
81
|
react_1.default.createElement("textarea", { value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: "Paste your JWT Token here...", style: textareaStyle, rows: 5 }),
|
|
75
82
|
react_1.default.createElement("div", { style: { marginTop: '10px' } },
|
|
76
83
|
react_1.default.createElement("button", { onClick: handleConfirm, style: buttonStyle }, "Confirm & Access")))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dev-context.js","sourceRoot":"","sources":["../../src/context/dev-context.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,4DAAqG;AAOrG,MAAM,UAAU,GAAG,IAAA,qBAAa,EAA8B,SAAS,CAAC,CAAC;AAMlE,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAEzD,IAAA,6BAAY,GAAE,CAAC;IAEf,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,IAAA,+BAAc,GAAE,CAAC;QACrC,IAAI,WAAW,EAAE,CAAC;YAChB,QAAQ,CAAC,WAAW,CAAC,CAAC;QACxB,CAAC;QACD,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC;YACtB,QAAQ,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC;YAC5B,IAAA,+BAAc,EAAC,OAAO,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,aAAa,CAAC,EAAE,CAAC,CAAC;QAClB,IAAA,+BAAc,EAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,KAAK,GAAoB;QAC7B,QAAQ,EAAE,KAAK,IAAI,EAAE;QACrB,UAAU,EAAE,WAAW;KACxB,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,IAAA,6BAAY,GAAE,KAAK,QAAQ,EAAE,CAAC;QAC1C,OAAO,CACL,uCAAK,KAAK,EAAE,iBAAiB;YAC3B,uCAAK,KAAK,EAAE,iBAAiB;gBAC3B,qEAAiC;gBACjC,
|
|
1
|
+
{"version":3,"file":"dev-context.js","sourceRoot":"","sources":["../../src/context/dev-context.tsx"],"names":[],"mappings":"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"}
|