@sensorario/sg-components 0.0.67 → 0.0.69

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/dist/index.es.js +126 -43
  2. package/dist/sg-components.css +1 -1
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,21 +1,21 @@
1
- import { useState as e } from "react";
2
- import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
1
+ import { useEffect as e, useState as t } from "react";
2
+ import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
3
3
  //#region src/components/Button/Button.tsx
4
- var i = ({ label: e, ...t }) => /* @__PURE__ */ n("button", {
4
+ var a = ({ label: e, ...t }) => /* @__PURE__ */ r("button", {
5
5
  className: "custom-button",
6
6
  ...t,
7
7
  children: e
8
- }), a = ({ copyright: e = "© 2026 My Company", href: t = "#", links: i = [] }) => /* @__PURE__ */ r("footer", {
8
+ }), o = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ i("footer", {
9
9
  className: "footer",
10
- children: [/* @__PURE__ */ n("span", { children: /* @__PURE__ */ n("a", {
10
+ children: [/* @__PURE__ */ r("span", { children: /* @__PURE__ */ r("a", {
11
11
  href: t,
12
12
  children: e
13
- }) }), i.length > 0 && /* @__PURE__ */ n("nav", { children: i.map(({ label: e, href: t }) => /* @__PURE__ */ n("a", {
13
+ }) }), n.length > 0 && /* @__PURE__ */ r("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ r("a", {
14
14
  href: t,
15
15
  style: { marginLeft: "16px" },
16
16
  children: e
17
17
  }, t)) })]
18
- }), o = [
18
+ }), s = [
19
19
  {
20
20
  label: "guitar",
21
21
  href: "https://guitar.simonegentili.com"
@@ -36,109 +36,192 @@ var i = ({ label: e, ...t }) => /* @__PURE__ */ n("button", {
36
36
  label: "code2image",
37
37
  href: "https://code2image.simonegentili.com"
38
38
  }
39
- ], s = () => /* @__PURE__ */ n(a, {
39
+ ], c = () => /* @__PURE__ */ r(o, {
40
40
  href: "https://simonegentili.com",
41
41
  copyright: "© 2026 simonegentili.com",
42
- links: o
43
- }), c = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: r = "home" }) => /* @__PURE__ */ n("header", {
42
+ links: s
43
+ }), l = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: a }) => /* @__PURE__ */ r("header", {
44
44
  className: "header",
45
- children: /* @__PURE__ */ n("div", {
45
+ children: /* @__PURE__ */ i("div", {
46
46
  className: "header-container",
47
- children: /* @__PURE__ */ n("div", {
47
+ children: [/* @__PURE__ */ r("div", {
48
48
  className: "logo",
49
49
  onClick: () => {
50
- e?.(r);
50
+ e?.(n);
51
51
  },
52
- children: /* @__PURE__ */ n("h1", {
52
+ children: /* @__PURE__ */ r("h1", {
53
53
  className: "logo-text",
54
54
  children: t
55
55
  })
56
- })
56
+ }), a && /* @__PURE__ */ r("div", {
57
+ className: "header-actions",
58
+ children: a
59
+ })]
57
60
  })
58
- }), l = ({ onNavigate: e }) => /* @__PURE__ */ n(c, {
61
+ }), u = ({ onNavigate: e }) => /* @__PURE__ */ r(l, {
59
62
  onNavigate: e,
60
63
  title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
61
64
  homePageKey: "home"
62
- }), u = ({ isLoggedIn: e, handleLogin: r, handleLogout: i }) => /* @__PURE__ */ n(t, { children: e ? /* @__PURE__ */ n("button", {
65
+ }), d = ({ isLoggedIn: e, handleLogin: t, handleLogout: i }) => /* @__PURE__ */ r(n, { children: e ? /* @__PURE__ */ r("button", {
63
66
  onClick: i,
64
67
  style: {
65
68
  fontSize: "0.9rem",
66
69
  padding: "0.4rem 1rem"
67
70
  },
68
71
  children: "logout"
69
- }) : /* @__PURE__ */ n("button", {
70
- onClick: r,
72
+ }) : /* @__PURE__ */ r("button", {
73
+ onClick: t,
71
74
  style: {
72
75
  fontSize: "0.9rem",
73
76
  padding: "0.4rem 1rem"
74
77
  },
75
78
  children: "Login"
76
- }) }), d = ({ open: e, onClose: t, title: i, children: a }) => e ? /* @__PURE__ */ n("div", {
79
+ }) }), f = ({ open: e, onClose: t, title: n, children: a }) => e ? /* @__PURE__ */ r("div", {
77
80
  className: "modal-overlay",
78
- children: /* @__PURE__ */ r("div", {
81
+ children: /* @__PURE__ */ i("div", {
79
82
  className: "modal-content",
80
83
  children: [
81
- i && /* @__PURE__ */ n("h2", {
84
+ n && /* @__PURE__ */ r("h2", {
82
85
  className: "modal-title",
83
- children: i
86
+ children: n
84
87
  }),
85
- /* @__PURE__ */ n("button", {
88
+ /* @__PURE__ */ r("button", {
86
89
  className: "modal-close",
87
90
  onClick: t,
88
91
  children: "×"
89
92
  }),
90
- /* @__PURE__ */ n("div", {
93
+ /* @__PURE__ */ r("div", {
91
94
  className: "modal-children",
92
95
  children: a
93
96
  })
94
97
  ]
95
98
  })
96
- }) : null, f = ({ label: e, ...t }) => /* @__PURE__ */ r("div", {
99
+ }) : null, p = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ i("div", {
100
+ className: "input-wrapper",
101
+ children: [e && /* @__PURE__ */ r("label", {
102
+ className: "input-label",
103
+ children: e
104
+ }), /* @__PURE__ */ r("input", {
105
+ className: `input-field${t ? " input-field--invalid" : ""}`,
106
+ ...n
107
+ })]
108
+ }), m = ({ label: e, ...t }) => /* @__PURE__ */ i("div", {
97
109
  className: "input-wrapper",
98
- children: [e && /* @__PURE__ */ n("label", {
110
+ children: [e && /* @__PURE__ */ r("label", {
99
111
  className: "input-label",
100
112
  children: e
101
- }), /* @__PURE__ */ n("input", {
113
+ }), /* @__PURE__ */ r("input", {
102
114
  type: "password",
103
115
  className: "input-field",
104
116
  ...t
105
117
  })]
106
- }), p = ({ open: t, onClose: a, onSubmit: o }) => {
107
- let [s, c] = e(""), [l, u] = e(""), [p, m] = e("");
108
- return /* @__PURE__ */ n(d, {
109
- open: t,
110
- onClose: a,
118
+ }), h = ({ open: e, onClose: n, onLogin: o }) => {
119
+ let [s, c] = t(""), [l, u] = t("");
120
+ return /* @__PURE__ */ r(f, {
121
+ open: e,
122
+ onClose: n,
123
+ title: "Login",
124
+ children: /* @__PURE__ */ i("form", {
125
+ onSubmit: (e) => {
126
+ e.preventDefault(), o(s, l);
127
+ },
128
+ children: [
129
+ /* @__PURE__ */ r(p, {
130
+ label: "Username",
131
+ value: s,
132
+ onChange: (e) => c(e.target.value),
133
+ autoFocus: !0
134
+ }),
135
+ /* @__PURE__ */ r(m, {
136
+ label: "Password",
137
+ value: l,
138
+ onChange: (e) => u(e.target.value)
139
+ }),
140
+ /* @__PURE__ */ r(a, {
141
+ label: "Login",
142
+ type: "submit",
143
+ style: { width: "100%" }
144
+ })
145
+ ]
146
+ })
147
+ });
148
+ }, g = "simonegentili.com-access-token", _ = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), v = (e) => {
149
+ let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
150
+ return t ? t.slice(e.length + 1) : null;
151
+ }, y = (e, t) => {
152
+ try {
153
+ return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
154
+ } catch {
155
+ return null;
156
+ }
157
+ }, b = ({ title: a = "Quadrato", homePageKey: o = "home", onNavigate: s, cookieName: c = g, username: u = null, usernameJwtField: f = "sub", onLogin: p, onLogout: m, onUserAuthenticated: b }) => {
158
+ let [x, S] = t(() => _(c)), [C, w] = t(!1), T = u ?? (x ? y(v(c) ?? "", f) : null);
159
+ return e(() => {
160
+ b?.(x, x ? T : null);
161
+ }, []), /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(l, {
162
+ onNavigate: s,
163
+ title: a,
164
+ homePageKey: o,
165
+ children: /* @__PURE__ */ i("div", {
166
+ className: "quadrato-header-auth",
167
+ children: [x && T && /* @__PURE__ */ r("span", {
168
+ className: "quadrato-header-username",
169
+ children: T
170
+ }), /* @__PURE__ */ r(d, {
171
+ isLoggedIn: x,
172
+ handleLogin: () => w(!0),
173
+ handleLogout: () => {
174
+ m?.();
175
+ let e = _(c);
176
+ S(e), b?.(e, null);
177
+ }
178
+ })]
179
+ })
180
+ }), /* @__PURE__ */ r(h, {
181
+ open: C,
182
+ onClose: () => w(!1),
183
+ onLogin: async (e, t) => {
184
+ await p(e, t);
185
+ let n = _(c);
186
+ S(n), w(!1), b?.(n, n ? u ?? e : null);
187
+ }
188
+ })] });
189
+ }, x = ({ open: e, onClose: n, onSubmit: o }) => {
190
+ let [s, c] = t(""), [l, u] = t(""), [d, p] = t("");
191
+ return /* @__PURE__ */ r(f, {
192
+ open: e,
193
+ onClose: n,
111
194
  title: "Imposta una nuova password",
112
- children: /* @__PURE__ */ r("form", {
195
+ children: /* @__PURE__ */ i("form", {
113
196
  className: "set-password-modal-form",
114
197
  onSubmit: (e) => {
115
198
  if (e.preventDefault(), s === "" || l === "") {
116
- m("Inserisci ed conferma la nuova password.");
199
+ p("Inserisci ed conferma la nuova password.");
117
200
  return;
118
201
  }
119
202
  if (s !== l) {
120
- m("Le password non coincidono.");
203
+ p("Le password non coincidono.");
121
204
  return;
122
205
  }
123
- m(""), o(s);
206
+ p(""), o(s);
124
207
  },
125
208
  children: [
126
- /* @__PURE__ */ n(f, {
209
+ /* @__PURE__ */ r(m, {
127
210
  label: "Nuova password",
128
211
  value: s,
129
212
  onChange: (e) => c(e.target.value),
130
213
  autoFocus: !0
131
214
  }),
132
- /* @__PURE__ */ n(f, {
215
+ /* @__PURE__ */ r(m, {
133
216
  label: "Conferma password",
134
217
  value: l,
135
218
  onChange: (e) => u(e.target.value)
136
219
  }),
137
- p && /* @__PURE__ */ n("p", {
220
+ d && /* @__PURE__ */ r("p", {
138
221
  className: "set-password-modal-error",
139
- children: p
222
+ children: d
140
223
  }),
141
- /* @__PURE__ */ n(i, {
224
+ /* @__PURE__ */ r(a, {
142
225
  label: "Salva password",
143
226
  type: "submit",
144
227
  style: { width: "100%" }
@@ -148,4 +231,4 @@ var i = ({ label: e, ...t }) => /* @__PURE__ */ n("button", {
148
231
  });
149
232
  };
150
233
  //#endregion
151
- export { u as Authenticator, i as Button, a as Footer, c as Header, s as SGFooter, l as SGHeader, p as SetPasswordModal };
234
+ export { d as Authenticator, a as Button, o as Footer, l as Header, b as QuadratoHeader, c as SGFooter, u as SGHeader, x as SetPasswordModal };
package/dist/sg-components.css CHANGED
@@ -1,2 +1,2 @@
1
- .custom-button{border-radius:var(--primary-radius);border:1px solid var(--primary-border);background:var(--primary-bg);cursor:pointer;font-size:var(--primary-font);font-family:var(--font-family);padding:8px 16px;transition:background .2s}.custom-button:hover{background:var(--primary-hover-bg)}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-children{font-family:var(--font-family);padding:16px}.modal-content{background:var(--modal-bg);font-size:var(--primary-font);border-radius:8px;min-width:320px;position:relative;box-shadow:0 2px 16px #00000026}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);background-color:var(--primary-bg);font-size:var(--primary-font);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);margin-top:0;padding:16px}.modal-close{cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:8px;right:8px}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5)}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}
1
+ .custom-button{border-radius:var(--primary-radius);border:1px solid var(--primary-border);background:var(--primary-bg);cursor:pointer;font-size:var(--primary-font);font-family:var(--font-family);padding:8px 16px;transition:background .2s}.custom-button:hover{background:var(--primary-hover-bg)}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-children{font-family:var(--font-family);padding:16px}.modal-content{background:var(--modal-bg);font-size:var(--primary-font);border-radius:8px;min-width:320px;position:relative;box-shadow:0 2px 16px #00000026}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);background-color:var(--primary-bg);font-size:var(--primary-font);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);margin-top:0;padding:16px}.modal-close{cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:8px;right:8px}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5)}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sensorario/sg-components",
3
- "version": "0.0.67",
3
+ "version": "0.0.69",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {