@every-app/sdk 0.0.7 → 0.0.9

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 (4) hide show
  1. package/dist/client/GatewayRequiredError.d.ts.map +1 -1
  2. package/dist/client/GatewayRequiredError.js +16 -22
  3. package/package.json +1 -1
  4. package/src/client/GatewayRequiredError.tsx +25 -36
package/dist/client/GatewayRequiredError.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GatewayRequiredError.d.ts","sourceRoot":"","sources":["../../src/client/GatewayRequiredError.tsx"],"names":[],"mappings":"AAEA,UAAU,yBAAyB;IACjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAwFD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,KAAK,GACN,EAAE,yBAAyB,2CAmD3B"}
1
+ {"version":3,"file":"GatewayRequiredError.d.ts","sourceRoot":"","sources":["../../src/client/GatewayRequiredError.tsx"],"names":[],"mappings":"AAEA,UAAU,yBAAyB;IACjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAmFD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,KAAK,GACN,EAAE,yBAAyB,2CA6C3B"}
package/dist/client/GatewayRequiredError.js CHANGED
@@ -1,7 +1,4 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- // Button gradient styles
3
- const BUTTON_GRADIENT = "linear-gradient(180deg, #424242 0%, #353535 50%, #2a2a2a 100%)";
4
- const BUTTON_GRADIENT_HOVER = "linear-gradient(180deg, #4d4d4d 0%, #404040 50%, #353535 100%)";
5
2
  // CSS custom properties for theming
6
3
  const CSS_VARIABLES = `
7
4
  @media (prefers-color-scheme: light) {
@@ -10,7 +7,7 @@ const CSS_VARIABLES = `
10
7
  --gateway-text: oklch(0% 0 0);
11
8
  --gateway-text-muted: oklch(40% 0 0);
12
9
  --gateway-icon-bg: oklch(94% 0 0);
13
- --gateway-icon-stroke: oklch(55% 0.22 25);
10
+ --gateway-icon-stroke: oklch(80% 0.18 90);
14
11
  --gateway-border: oklch(94% 0 0);
15
12
  }
16
13
  }
@@ -20,7 +17,7 @@ const CSS_VARIABLES = `
20
17
  --gateway-text: oklch(92% 0 0);
21
18
  --gateway-text-muted: oklch(60% 0 0);
22
19
  --gateway-icon-bg: oklch(22% 0 0);
23
- --gateway-icon-stroke: oklch(65% 0.2 25);
20
+ --gateway-icon-stroke: oklch(85% 0.18 90);
24
21
  --gateway-border: oklch(30% 0 0);
25
22
  }
26
23
  }
@@ -39,7 +36,7 @@ const styles = {
39
36
  colorScheme: "light dark",
40
37
  },
41
38
  content: {
42
- maxWidth: "380px",
39
+ maxWidth: "520px",
43
40
  width: "100%",
44
41
  textAlign: "left",
45
42
  },
@@ -67,16 +64,17 @@ const styles = {
67
64
  color: "var(--gateway-text-muted, oklch(40% 0 0))",
68
65
  marginBottom: "20px",
69
66
  },
70
- button: {
71
- display: "inline-block",
72
- padding: "10px 20px",
67
+ urlText: {
73
68
  fontSize: "14px",
74
- fontWeight: 500,
75
- color: "#ffffff",
76
- background: BUTTON_GRADIENT,
77
- borderRadius: "0.25rem",
78
- textDecoration: "none",
79
- border: "none",
69
+ lineHeight: 1.5,
70
+ color: "var(--gateway-text-muted, oklch(40% 0 0))",
71
+ wordBreak: "break-all",
72
+ },
73
+ urlLink: {
74
+ color: "rgb(168, 162, 158)",
75
+ textDecoration: "underline",
76
+ textDecorationColor: "rgb(87, 83, 78)",
77
+ textUnderlineOffset: "2px",
80
78
  },
81
79
  };
82
80
  /**
@@ -87,11 +85,7 @@ const styles = {
87
85
  * the app through the Gateway and provides a link to do so.
88
86
  */
89
87
  export function GatewayRequiredError({ gatewayOrigin, appId, }) {
90
- const displayName = appId || "This app";
91
- const gatewayUrl = `${gatewayOrigin}/apps/${appId}${window.location.pathname}`;
92
- return (_jsxs("div", { style: styles.container, children: [_jsx("style", { children: CSS_VARIABLES }), _jsxs("div", { style: styles.content, children: [_jsx("div", { style: styles.iconContainer, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gateway-icon-stroke, oklch(55% 0.22 25))", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }) }), _jsx("h1", { style: styles.title, children: "Gateway Required" }), _jsxs("p", { style: styles.description, children: [displayName, " needs to be accessed through the Gateway for authentication to work properly."] }), _jsx("a", { href: gatewayUrl, style: styles.button, onMouseOver: (e) => {
93
- e.currentTarget.style.background = BUTTON_GRADIENT_HOVER;
94
- }, onMouseOut: (e) => {
95
- e.currentTarget.style.background = BUTTON_GRADIENT;
96
- }, children: "Open in Gateway" })] })] }));
88
+ const isLocalhost = window.location.hostname === "localhost";
89
+ const gatewayUrl = `${gatewayOrigin}/apps/${appId}${window.location.pathname}${isLocalhost ? "dev" : ""}`;
90
+ return (_jsxs("div", { style: styles.container, children: [_jsx("style", { children: CSS_VARIABLES }), _jsxs("div", { style: styles.content, children: [_jsx("div", { style: styles.iconContainer, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gateway-icon-stroke, oklch(55% 0.22 25))", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }) }), _jsx("h1", { style: styles.title, children: "Open in Gateway" }), _jsx("p", { style: styles.description, children: "The Gateway handles sign in and user auth. Access your app from there so this works properly." }), _jsxs("p", { style: styles.urlText, children: ["Go to", " ", _jsx("a", { href: gatewayUrl, style: styles.urlLink, children: gatewayUrl })] })] })] }));
97
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@every-app/sdk",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "type": "module",
5
5
  "main": "./dist/client/index.js",
6
6
  "types": "./dist/client/index.d.ts",
package/src/client/GatewayRequiredError.tsx CHANGED
@@ -11,12 +11,6 @@ interface GatewayRequiredErrorProps {
11
11
  appId: string;
12
12
  }
13
13
 
14
- // Button gradient styles
15
- const BUTTON_GRADIENT =
16
- "linear-gradient(180deg, #424242 0%, #353535 50%, #2a2a2a 100%)";
17
- const BUTTON_GRADIENT_HOVER =
18
- "linear-gradient(180deg, #4d4d4d 0%, #404040 50%, #353535 100%)";
19
-
20
14
  // CSS custom properties for theming
21
15
  const CSS_VARIABLES = `
22
16
  @media (prefers-color-scheme: light) {
@@ -25,7 +19,7 @@ const CSS_VARIABLES = `
25
19
  --gateway-text: oklch(0% 0 0);
26
20
  --gateway-text-muted: oklch(40% 0 0);
27
21
  --gateway-icon-bg: oklch(94% 0 0);
28
- --gateway-icon-stroke: oklch(55% 0.22 25);
22
+ --gateway-icon-stroke: oklch(80% 0.18 90);
29
23
  --gateway-border: oklch(94% 0 0);
30
24
  }
31
25
  }
@@ -35,7 +29,7 @@ const CSS_VARIABLES = `
35
29
  --gateway-text: oklch(92% 0 0);
36
30
  --gateway-text-muted: oklch(60% 0 0);
37
31
  --gateway-icon-bg: oklch(22% 0 0);
38
- --gateway-icon-stroke: oklch(65% 0.2 25);
32
+ --gateway-icon-stroke: oklch(85% 0.18 90);
39
33
  --gateway-border: oklch(30% 0 0);
40
34
  }
41
35
  }
@@ -56,7 +50,7 @@ const styles = {
56
50
  colorScheme: "light dark",
57
51
  } satisfies CSSProperties,
58
52
  content: {
59
- maxWidth: "380px",
53
+ maxWidth: "520px",
60
54
  width: "100%",
61
55
  textAlign: "left",
62
56
  } satisfies CSSProperties,
@@ -84,16 +78,17 @@ const styles = {
84
78
  color: "var(--gateway-text-muted, oklch(40% 0 0))",
85
79
  marginBottom: "20px",
86
80
  } satisfies CSSProperties,
87
- button: {
88
- display: "inline-block",
89
- padding: "10px 20px",
81
+ urlText: {
90
82
  fontSize: "14px",
91
- fontWeight: 500,
92
- color: "#ffffff",
93
- background: BUTTON_GRADIENT,
94
- borderRadius: "0.25rem",
95
- textDecoration: "none",
96
- border: "none",
83
+ lineHeight: 1.5,
84
+ color: "var(--gateway-text-muted, oklch(40% 0 0))",
85
+ wordBreak: "break-all",
86
+ } satisfies CSSProperties,
87
+ urlLink: {
88
+ color: "rgb(168, 162, 158)",
89
+ textDecoration: "underline",
90
+ textDecorationColor: "rgb(87, 83, 78)",
91
+ textUnderlineOffset: "2px",
97
92
  } satisfies CSSProperties,
98
93
  };
99
94
 
@@ -108,8 +103,8 @@ export function GatewayRequiredError({
108
103
  gatewayOrigin,
109
104
  appId,
110
105
  }: GatewayRequiredErrorProps) {
111
- const displayName = appId || "This app";
112
- const gatewayUrl = `${gatewayOrigin}/apps/${appId}${window.location.pathname}`;
106
+ const isLocalhost = window.location.hostname === "localhost";
107
+ const gatewayUrl = `${gatewayOrigin}/apps/${appId}${window.location.pathname}${isLocalhost ? "dev" : ""}`;
113
108
 
114
109
  return (
115
110
  <div style={styles.container}>
@@ -134,27 +129,21 @@ export function GatewayRequiredError({
134
129
  </div>
135
130
 
136
131
  {/* Title */}
137
- <h1 style={styles.title}>Gateway Required</h1>
132
+ <h1 style={styles.title}>Open in Gateway</h1>
138
133
 
139
134
  {/* Description */}
140
135
  <p style={styles.description}>
141
- {displayName} needs to be accessed through the Gateway for
142
- authentication to work properly.
136
+ The Gateway handles sign in and user auth. Access your app from there
137
+ so this works properly.
143
138
  </p>
144
139
 
145
- {/* Redirect Link/Button - Metallic style */}
146
- <a
147
- href={gatewayUrl}
148
- style={styles.button}
149
- onMouseOver={(e) => {
150
- e.currentTarget.style.background = BUTTON_GRADIENT_HOVER;
151
- }}
152
- onMouseOut={(e) => {
153
- e.currentTarget.style.background = BUTTON_GRADIENT;
154
- }}
155
- >
156
- Open in Gateway
157
- </a>
140
+ {/* URL Link */}
141
+ <p style={styles.urlText}>
142
+ Go to{" "}
143
+ <a href={gatewayUrl} style={styles.urlLink}>
144
+ {gatewayUrl}
145
+ </a>
146
+ </p>
158
147
  </div>
159
148
  </div>
160
149
  );