@oxyhq/services 0.0.60 → 0.0.62
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 +8 -1
- package/dist/assets/dot-icon.d.ts +3 -0
- package/dist/assets/dot-icon.d.ts.map +1 -0
- package/dist/assets/dot-icon.js +6 -0
- package/dist/assets/verified-icon.d.ts +3 -0
- package/dist/assets/verified-icon.d.ts.map +1 -0
- package/dist/assets/verified-icon.js +10 -0
- package/dist/components/assets/oxy-logo.d.ts +3 -0
- package/dist/components/assets/oxy-logo.d.ts.map +1 -0
- package/dist/components/assets/oxy-logo.js +30 -0
- package/dist/components/auth/AccountSwitcherModal.d.ts +5 -0
- package/dist/components/auth/AccountSwitcherModal.d.ts.map +1 -0
- package/dist/components/auth/AccountSwitcherModal.js +71 -0
- package/dist/components/auth/SessionOwnerButton.d.ts +3 -0
- package/dist/components/auth/SessionOwnerButton.d.ts.map +1 -0
- package/dist/components/auth/SessionOwnerButton.js +35 -0
- package/dist/components/auth/SignInButton.d.ts +8 -0
- package/dist/components/auth/SignInButton.d.ts.map +1 -0
- package/dist/components/auth/SignInButton.js +15 -0
- package/dist/components/auth/styles/oavatar.module.css +34 -0
- package/dist/components/auth/styles/oavatar.module.css.map +1 -0
- package/dist/components/auth/styles/session-owner-modal.module.css +35 -0
- package/dist/components/auth/styles/session-owner-modal.module.css.map +1 -0
- package/dist/components/auth/styles/sign-in-button.module.css +30 -0
- package/dist/components/auth/styles/sign-in-button.module.css.map +1 -0
- package/dist/components/elements/button/components/button.d.ts +7 -0
- package/dist/components/elements/button/components/button.d.ts.map +1 -0
- package/dist/components/elements/button/components/button.js +6 -0
- package/dist/components/elements/button/components/styles/button.module.css +25 -0
- package/dist/components/elements/button/components/styles/button.module.css.map +1 -0
- package/dist/components/elements/button/index.d.ts +2 -0
- package/dist/components/elements/button/index.d.ts.map +1 -0
- package/dist/components/elements/button/index.js +1 -0
- package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.d.ts +5 -0
- package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.d.ts.map +1 -0
- package/dist/components/elements/ellipsis-wrapper/components/ellipsis-wrapper.js +4 -0
- package/dist/components/elements/ellipsis-wrapper/components/styles/ellipses-wrapper.module.css +11 -0
- package/dist/components/elements/ellipsis-wrapper/components/styles/ellipses-wrapper.module.css.map +1 -0
- package/dist/components/elements/ellipsis-wrapper/index.d.ts +2 -0
- package/dist/components/elements/ellipsis-wrapper/index.d.ts.map +1 -0
- package/dist/components/elements/ellipsis-wrapper/index.js +1 -0
- package/dist/components/elements/modal/components/confirmation-modal.d.ts +12 -0
- package/dist/components/elements/modal/components/confirmation-modal.d.ts.map +1 -0
- package/dist/components/elements/modal/components/confirmation-modal.js +21 -0
- package/dist/components/elements/modal/components/modal.d.ts +13 -0
- package/dist/components/elements/modal/components/modal.d.ts.map +1 -0
- package/dist/components/elements/modal/components/modal.js +111 -0
- package/dist/components/elements/modal/components/styles/confirmation-modal.module.css +105 -0
- package/dist/components/elements/modal/components/styles/confirmation-modal.module.css.map +1 -0
- package/dist/components/elements/modal/components/styles/modal.module.css +10 -0
- package/dist/components/elements/modal/components/styles/modal.module.css.map +1 -0
- package/dist/components/elements/modal/hooks/use-track-position.d.ts +5 -0
- package/dist/components/elements/modal/hooks/use-track-position.d.ts.map +1 -0
- package/dist/components/elements/modal/hooks/use-track-position.js +35 -0
- package/dist/components/elements/modal/index.d.ts +4 -0
- package/dist/components/elements/modal/index.d.ts.map +1 -0
- package/dist/components/elements/modal/index.js +3 -0
- package/dist/config/index.d.ts +21 -0
- package/dist/config/index.d.ts.map +1 -0
- package/dist/config/index.js +7 -0
- package/dist/features/profile/components/avatar.d.ts +10 -0
- package/dist/features/profile/components/avatar.d.ts.map +1 -0
- package/dist/features/profile/components/avatar.js +7 -0
- package/dist/features/profile/components/styles/avatar.module.css +15 -0
- package/dist/features/profile/components/styles/avatar.module.css.map +1 -0
- package/dist/features/profile/components/styles/user-name.module.css +18 -0
- package/dist/features/profile/components/styles/user-name.module.css.map +1 -0
- package/dist/features/profile/components/styles/user-username.module.css +6 -0
- package/dist/features/profile/components/styles/user-username.module.css.map +1 -0
- package/dist/features/profile/components/user-name.d.ts +7 -0
- package/dist/features/profile/components/user-name.d.ts.map +1 -0
- package/dist/features/profile/components/user-name.js +8 -0
- package/dist/features/profile/components/user-username.d.ts +5 -0
- package/dist/features/profile/components/user-username.d.ts.map +1 -0
- package/dist/features/profile/components/user-username.js +7 -0
- package/dist/features/profile/index.d.ts +4 -0
- package/dist/features/profile/index.d.ts.map +1 -0
- package/dist/features/profile/index.js +3 -0
- package/dist/hooks/get-user.d.ts +2 -0
- package/dist/hooks/get-user.d.ts.map +1 -0
- package/dist/hooks/get-user.js +28 -0
- package/dist/hooks/getUserById.d.ts +11 -0
- package/dist/hooks/getUserById.d.ts.map +1 -0
- package/dist/hooks/getUserById.js +31 -0
- package/dist/hooks/use-user.d.ts +14 -0
- package/dist/hooks/use-user.d.ts.map +1 -0
- package/dist/hooks/use-user.js +8 -0
- package/dist/hooks/useOxySession.d.ts +26 -0
- package/dist/hooks/useOxySession.d.ts.map +1 -0
- package/dist/hooks/useOxySession.js +73 -0
- package/dist/index.css +5 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +6 -0
- package/dist/interfaces/index.d.ts +10 -0
- package/dist/interfaces/index.d.ts.map +1 -0
- package/dist/interfaces/index.js +1 -0
- package/dist/utils/cn.d.ts +3 -0
- package/dist/utils/cn.d.ts.map +1 -0
- package/dist/utils/cn.js +5 -0
- package/package.json +5 -4
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
2
|
+
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
|
3
|
+
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
4
|
+
"use client";
|
|
5
|
+
import { motion } from "framer-motion";
|
|
6
|
+
import React, { useCallback, useLayoutEffect, useRef } from "react";
|
|
7
|
+
import { createPortal } from "react-dom";
|
|
8
|
+
import styles from "./styles/modal.module.css";
|
|
9
|
+
export const Modal = ({ children, onClose, closeOnBackdropClick = true, background, minViewportWidth = null, maxViewportWidth = null, disableScroll = false, focusOnElement = null, focusAfterClose = null, }) => {
|
|
10
|
+
const modalRef = useRef(null);
|
|
11
|
+
const previouslyFocusedElementRef = useRef(null);
|
|
12
|
+
const handleKeyDown = useCallback((e) => {
|
|
13
|
+
if (e.key === "Escape") {
|
|
14
|
+
onClose();
|
|
15
|
+
}
|
|
16
|
+
if (e.key === "Tab") {
|
|
17
|
+
const modal = modalRef.current;
|
|
18
|
+
if (!modal)
|
|
19
|
+
return;
|
|
20
|
+
const focusableElements = Array.from(modal.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'));
|
|
21
|
+
const firstFocusableElement = focusableElements[0];
|
|
22
|
+
const lastFocusableElement = focusableElements[focusableElements.length - 1];
|
|
23
|
+
if (e.shiftKey) {
|
|
24
|
+
if (document.activeElement === firstFocusableElement) {
|
|
25
|
+
lastFocusableElement.focus();
|
|
26
|
+
e.preventDefault();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
if (document.activeElement === lastFocusableElement) {
|
|
31
|
+
firstFocusableElement.focus();
|
|
32
|
+
e.preventDefault();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}, [onClose]);
|
|
37
|
+
const handleScroll = useCallback((e) => {
|
|
38
|
+
if (disableScroll) {
|
|
39
|
+
e.preventDefault();
|
|
40
|
+
}
|
|
41
|
+
}, [disableScroll]);
|
|
42
|
+
const handleDisplay = useCallback(() => {
|
|
43
|
+
const modal = modalRef.current;
|
|
44
|
+
if (!modal)
|
|
45
|
+
return;
|
|
46
|
+
const viewportWidth = window.innerWidth;
|
|
47
|
+
if ((minViewportWidth && viewportWidth < minViewportWidth) ||
|
|
48
|
+
(maxViewportWidth && viewportWidth > maxViewportWidth)) {
|
|
49
|
+
onClose();
|
|
50
|
+
}
|
|
51
|
+
}, [onClose, minViewportWidth, maxViewportWidth]);
|
|
52
|
+
useLayoutEffect(() => {
|
|
53
|
+
const modal = modalRef.current;
|
|
54
|
+
if (!modal)
|
|
55
|
+
return;
|
|
56
|
+
const focusableElements = Array.from(modal.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'));
|
|
57
|
+
const firstFocusableElement = focusableElements?.[0];
|
|
58
|
+
previouslyFocusedElementRef.current = document.activeElement;
|
|
59
|
+
modal?.addEventListener("keydown", handleKeyDown);
|
|
60
|
+
if (focusOnElement) {
|
|
61
|
+
const elementToFocus = modal.querySelector(focusOnElement);
|
|
62
|
+
elementToFocus?.focus();
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
firstFocusableElement?.focus();
|
|
66
|
+
}
|
|
67
|
+
if (disableScroll) {
|
|
68
|
+
document.body.style.overflow = "hidden";
|
|
69
|
+
document.body.style.paddingRight = "11px";
|
|
70
|
+
window.addEventListener("scroll", handleScroll);
|
|
71
|
+
}
|
|
72
|
+
if (minViewportWidth || maxViewportWidth) {
|
|
73
|
+
handleDisplay();
|
|
74
|
+
}
|
|
75
|
+
return () => {
|
|
76
|
+
modal?.removeEventListener("keydown", handleKeyDown);
|
|
77
|
+
if (focusAfterClose) {
|
|
78
|
+
const elementToFocus = document.querySelector(focusAfterClose);
|
|
79
|
+
elementToFocus?.focus();
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
previouslyFocusedElementRef.current?.focus();
|
|
83
|
+
}
|
|
84
|
+
if (disableScroll) {
|
|
85
|
+
document.body.style.overflow = "";
|
|
86
|
+
document.body.style.paddingRight = "";
|
|
87
|
+
window.removeEventListener("scroll", handleScroll);
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
}, [
|
|
91
|
+
onClose,
|
|
92
|
+
disableScroll,
|
|
93
|
+
handleKeyDown,
|
|
94
|
+
handleScroll,
|
|
95
|
+
handleDisplay,
|
|
96
|
+
minViewportWidth,
|
|
97
|
+
maxViewportWidth,
|
|
98
|
+
focusOnElement,
|
|
99
|
+
focusAfterClose,
|
|
100
|
+
]);
|
|
101
|
+
const backdropStyle = {
|
|
102
|
+
backgroundColor: background === "none" ? "transparent" : "var(--clr-modal-background)",
|
|
103
|
+
};
|
|
104
|
+
return createPortal(React.createElement(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: (e) => {
|
|
105
|
+
e.stopPropagation();
|
|
106
|
+
if (e.currentTarget === e.target && closeOnBackdropClick)
|
|
107
|
+
onClose();
|
|
108
|
+
}, onKeyDown: (e) => {
|
|
109
|
+
e.stopPropagation();
|
|
110
|
+
}, ref: modalRef, className: `${styles.container}`, style: backdropStyle, id: "dialog", role: "dialog", "aria-modal": "true" }, children), document.body);
|
|
111
|
+
};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
width: fit-content;
|
|
8
|
+
max-width: 320px;
|
|
9
|
+
height: fit-content;
|
|
10
|
+
margin: auto;
|
|
11
|
+
background-color: var(--clr-background);
|
|
12
|
+
padding: 2em;
|
|
13
|
+
border-radius: 1rem;
|
|
14
|
+
}
|
|
15
|
+
.container .logo {
|
|
16
|
+
display: grid;
|
|
17
|
+
place-items: center;
|
|
18
|
+
margin-bottom: 1em;
|
|
19
|
+
}
|
|
20
|
+
.container .logo svg {
|
|
21
|
+
width: var(--fs-kilo);
|
|
22
|
+
height: var(--fs-kilo);
|
|
23
|
+
fill: var(--clr-primary);
|
|
24
|
+
}
|
|
25
|
+
.container h1 {
|
|
26
|
+
font-size: var(--fs-h2);
|
|
27
|
+
font-weight: var(--fw-700);
|
|
28
|
+
margin-bottom: 0.5em;
|
|
29
|
+
}
|
|
30
|
+
.container p {
|
|
31
|
+
font-size: var(--fs-milli);
|
|
32
|
+
color: var(--clr-tertiary);
|
|
33
|
+
margin-bottom: 2rem;
|
|
34
|
+
line-height: 1.4;
|
|
35
|
+
}
|
|
36
|
+
.container .buttons {
|
|
37
|
+
display: grid;
|
|
38
|
+
gap: 0.8rem;
|
|
39
|
+
}
|
|
40
|
+
.container .buttons button {
|
|
41
|
+
display: grid;
|
|
42
|
+
place-items: center;
|
|
43
|
+
padding: 0.9em;
|
|
44
|
+
border-radius: 100vmax;
|
|
45
|
+
font-size: var(--fs-milli);
|
|
46
|
+
font-weight: var(--fw-700);
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
transition: background-color 0.2s ease;
|
|
49
|
+
}
|
|
50
|
+
.container .buttons .delete {
|
|
51
|
+
background-color: var(--clr-red);
|
|
52
|
+
}
|
|
53
|
+
.container .buttons .delete:hover {
|
|
54
|
+
background-color: var(--clr-red-hover);
|
|
55
|
+
}
|
|
56
|
+
.container .buttons .delete:active {
|
|
57
|
+
background-color: var(--clr-red-active);
|
|
58
|
+
}
|
|
59
|
+
.container .buttons .delete:focus-visible {
|
|
60
|
+
outline: 2px solid var(--clr-secondary);
|
|
61
|
+
background-color: var(--clr-red-hover);
|
|
62
|
+
}
|
|
63
|
+
.container .buttons .unfollow {
|
|
64
|
+
background-color: var(--clr-secondary);
|
|
65
|
+
color: var(--clr-background);
|
|
66
|
+
}
|
|
67
|
+
.container .buttons .unfollow:hover {
|
|
68
|
+
background-color: var(--clr-secondary-hover);
|
|
69
|
+
}
|
|
70
|
+
.container .buttons .unfollow:active {
|
|
71
|
+
background-color: var(--clr-secondary-active);
|
|
72
|
+
}
|
|
73
|
+
.container .buttons .unfollow:focus-visible {
|
|
74
|
+
outline: 2px solid var(--clr-secondary);
|
|
75
|
+
}
|
|
76
|
+
.container .buttons .signout {
|
|
77
|
+
background-color: var(--clr-secondary);
|
|
78
|
+
color: var(--clr-background);
|
|
79
|
+
}
|
|
80
|
+
.container .buttons .signout:hover {
|
|
81
|
+
background-color: var(--clr-signout-logout-hover);
|
|
82
|
+
}
|
|
83
|
+
.container .buttons .signout:active {
|
|
84
|
+
background-color: var(--clr-signout-logout-active);
|
|
85
|
+
}
|
|
86
|
+
.container .buttons .signout:focus-visible {
|
|
87
|
+
outline: 2px solid var(--clr-secondary);
|
|
88
|
+
background-color: var(--clr-signout-logout-hover);
|
|
89
|
+
}
|
|
90
|
+
.container .buttons .cancel {
|
|
91
|
+
color: var(--clr-secondary);
|
|
92
|
+
border: 1px solid var(--clr-tertiary);
|
|
93
|
+
}
|
|
94
|
+
.container .buttons .cancel:hover {
|
|
95
|
+
background-color: var(--clr-trends-hover);
|
|
96
|
+
}
|
|
97
|
+
.container .buttons .cancel:active {
|
|
98
|
+
background-color: var(--clr-trends-active);
|
|
99
|
+
}
|
|
100
|
+
.container .buttons .cancel:focus-visible {
|
|
101
|
+
outline: 2px solid var(--clr-secondary);
|
|
102
|
+
background-color: var(--clr-trends-hover);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/*# sourceMappingURL=confirmation-modal.module.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../../../src/components/elements/modal/components/styles/confirmation-modal.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA","file":"confirmation-modal.module.css"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../../../src/components/elements/modal/components/styles/modal.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA","file":"modal.module.css"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-track-position.d.ts","sourceRoot":"","sources":["../../../../../src/components/elements/modal/hooks/use-track-position.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,gCAG1B;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,mBAuCA,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useState, useLayoutEffect } from "react";
|
|
3
|
+
export const useTrackPosition = ({ buttonRef, trackScroll = false, }) => {
|
|
4
|
+
const [buttonBoundaries, setButtonBoundaries] = useState(buttonRef?.current?.getBoundingClientRect() ?? null);
|
|
5
|
+
useLayoutEffect(() => {
|
|
6
|
+
const handleResize = () => {
|
|
7
|
+
if (buttonRef?.current) {
|
|
8
|
+
setButtonBoundaries(buttonRef.current.getBoundingClientRect());
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
window.addEventListener("resize", handleResize);
|
|
12
|
+
if (trackScroll) {
|
|
13
|
+
window.addEventListener("scroll", handleResize);
|
|
14
|
+
}
|
|
15
|
+
return () => {
|
|
16
|
+
window.removeEventListener("resize", handleResize);
|
|
17
|
+
if (trackScroll) {
|
|
18
|
+
window.removeEventListener("scroll", handleResize);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
}, [
|
|
22
|
+
buttonRef,
|
|
23
|
+
buttonRef.current?.getBoundingClientRect,
|
|
24
|
+
trackScroll,
|
|
25
|
+
setButtonBoundaries,
|
|
26
|
+
]);
|
|
27
|
+
useLayoutEffect(() => {
|
|
28
|
+
setButtonBoundaries(buttonRef.current?.getBoundingClientRect() ?? null);
|
|
29
|
+
}, [
|
|
30
|
+
buttonRef,
|
|
31
|
+
buttonRef.current?.getBoundingClientRect,
|
|
32
|
+
setButtonBoundaries,
|
|
33
|
+
]);
|
|
34
|
+
return buttonBoundaries;
|
|
35
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/elements/modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { z } from "zod";
|
|
2
|
+
declare const envSchema: z.ZodObject<{
|
|
3
|
+
NODE_ENV: z.ZodEnum<["development", "production"]>;
|
|
4
|
+
OXY_AUTH_URL: z.ZodString;
|
|
5
|
+
}, "strip", z.ZodTypeAny, {
|
|
6
|
+
NODE_ENV: "development" | "production";
|
|
7
|
+
OXY_AUTH_URL: string;
|
|
8
|
+
}, {
|
|
9
|
+
NODE_ENV: "development" | "production";
|
|
10
|
+
OXY_AUTH_URL: string;
|
|
11
|
+
}>;
|
|
12
|
+
declare global {
|
|
13
|
+
namespace NodeJS {
|
|
14
|
+
interface ProcessEnv extends z.infer<typeof envSchema> {
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
export declare const NODE_ENV: "development" | "production";
|
|
19
|
+
export declare const OXY_AUTH_URL: string;
|
|
20
|
+
export {};
|
|
21
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,QAAA,MAAM,SAAS;;;;;;;;;EAGb,CAAC;AAEH,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,MAAM,CAAC;QACf,UAAU,UAAW,SAAQ,CAAC,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC;SAAG;KAC1D;CACF;AAED,eAAO,MAAM,QAAQ,8BAAuB,CAAC;AAC7C,eAAO,MAAM,YAAY,QACoD,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { z } from "zod";
|
|
2
|
+
const envSchema = z.object({
|
|
3
|
+
NODE_ENV: z.enum(["development", "production"]),
|
|
4
|
+
OXY_AUTH_URL: z.string().url(),
|
|
5
|
+
});
|
|
6
|
+
export const NODE_ENV = process.env.NODE_ENV;
|
|
7
|
+
export const OXY_AUTH_URL = NODE_ENV === "production" ? "https://auth.oxy.so" : "http://localhost:3001";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface IAvatar extends React.ImgHTMLAttributes<HTMLImageElement> {
|
|
3
|
+
userImage: string | null | undefined;
|
|
4
|
+
className?: string;
|
|
5
|
+
width?: number;
|
|
6
|
+
height?: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const Avatar: ({ userImage, className, ...props }: IAvatar) => React.JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=avatar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/features/profile/components/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,OAAQ,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACjE,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,uCAAwC,OAAO,sBAiBjE,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import Image from "next/image";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { cn } from "../../../utils/cn";
|
|
4
|
+
export const Avatar = ({ userImage, className, ...props }) => {
|
|
5
|
+
return (React.createElement("div", { className: cn("relative aspect-square w-[calc(var(--tw-fs-kilo)+9px)] overflow-hidden rounded-full", className) },
|
|
6
|
+
React.createElement(Image, { ...props, src: userImage || `/user_placeholder.png`, alt: "profile picture", fill: true, className: "block size-full object-cover" })));
|
|
7
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
position: relative;
|
|
3
|
+
width: var(--avatar-width);
|
|
4
|
+
border-radius: 50%;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
aspect-ratio: 1/1;
|
|
7
|
+
}
|
|
8
|
+
.container img {
|
|
9
|
+
display: block;
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
object-fit: cover;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/*# sourceMappingURL=avatar.module.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../../src/features/profile/components/styles/avatar.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA","file":"avatar.module.css"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
font-size: var(--fs-milli);
|
|
3
|
+
font-weight: var(--fw-500);
|
|
4
|
+
color: var(--clr-secondary);
|
|
5
|
+
display: grid;
|
|
6
|
+
grid-auto-flow: column;
|
|
7
|
+
}
|
|
8
|
+
.container span {
|
|
9
|
+
white-space: nowrap;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
text-overflow: ellipsis;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.hover:hover {
|
|
15
|
+
text-decoration: underline;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/*# sourceMappingURL=user-name.module.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../../src/features/profile/components/styles/user-name.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE","file":"user-name.module.css"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../../src/features/profile/components/styles/user-username.module.scss"],"names":[],"mappings":"AAAA;EACE;EACA","file":"user-username.module.css"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"user-name.d.ts","sourceRoot":"","sources":["../../../../src/features/profile/components/user-name.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,QAAQ,iCAIlB;IACD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B,sBAOA,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { VerifiedIcon } from "../../../assets/verified-icon";
|
|
3
|
+
import styles from "./styles/user-name.module.css";
|
|
4
|
+
export const UserName = ({ name, isVerified = false, hover = false, }) => {
|
|
5
|
+
return (React.createElement("div", { className: `${styles.container} ${hover ? styles.hover : ""}` },
|
|
6
|
+
name && React.createElement("span", null, name),
|
|
7
|
+
isVerified && React.createElement(VerifiedIcon, null)));
|
|
8
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"user-username.d.ts","sourceRoot":"","sources":["../../../../src/features/profile/components/user-username.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,YAAY,kBAEtB;IACD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B,sBAEA,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/features/profile/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-user.d.ts","sourceRoot":"","sources":["../../src/hooks/get-user.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,OAAc,MAAM,GAAG,SAAS,iBAsBnD,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import axios from "axios";
|
|
2
|
+
import { OXY_AUTH_URL } from "../config";
|
|
3
|
+
export const getUser = async (id) => {
|
|
4
|
+
try {
|
|
5
|
+
const response = await axios.get(OXY_AUTH_URL + `/api/users/${id}`);
|
|
6
|
+
return response.data;
|
|
7
|
+
}
|
|
8
|
+
catch (error) {
|
|
9
|
+
if (error.response) {
|
|
10
|
+
// The request was made and the server responded with a status code
|
|
11
|
+
// that falls out of the range of 2xx
|
|
12
|
+
console.log(error.response.data);
|
|
13
|
+
console.log(error.response.status);
|
|
14
|
+
console.log(error.response.headers);
|
|
15
|
+
}
|
|
16
|
+
else if (error.request) {
|
|
17
|
+
// The request was made but no response was received
|
|
18
|
+
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
|
|
19
|
+
// http.ClientRequest in node.js
|
|
20
|
+
console.log(error.request);
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
// Something happened in setting up the request that triggered an Error
|
|
24
|
+
console.log("Error", error.message);
|
|
25
|
+
}
|
|
26
|
+
console.log(error.config);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface User {
|
|
2
|
+
id: string;
|
|
3
|
+
username: string;
|
|
4
|
+
name: string;
|
|
5
|
+
email: string;
|
|
6
|
+
role: string;
|
|
7
|
+
avatar: string;
|
|
8
|
+
}
|
|
9
|
+
declare const getUserById: (id?: string | string[], fields?: (keyof User)[]) => Promise<User>;
|
|
10
|
+
export default getUserById;
|
|
11
|
+
//# sourceMappingURL=getUserById.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getUserById.d.ts","sourceRoot":"","sources":["../../src/hooks/getUserById.ts"],"names":[],"mappings":"AAGA,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,QAAe,MAAM,GAAG,MAAM,EAAE,WAAW,CAAC,MAAM,IAAI,CAAC,EAAE,kBA4BzE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import axios from "axios";
|
|
2
|
+
import { OXY_AUTH_URL } from "../config";
|
|
3
|
+
const getUserById = async (id, fields) => {
|
|
4
|
+
try {
|
|
5
|
+
const response = await axios.get(OXY_AUTH_URL + `/api/users/${id}`);
|
|
6
|
+
if (response.status !== 200) {
|
|
7
|
+
throw new Error(`Unexpected response status: ${response.status}`);
|
|
8
|
+
}
|
|
9
|
+
const user = fields
|
|
10
|
+
? fields.reduce((obj, key) => ({ ...obj, [key]: response.data[key] }), {})
|
|
11
|
+
: response.data;
|
|
12
|
+
return user;
|
|
13
|
+
}
|
|
14
|
+
catch (error) {
|
|
15
|
+
if (axios.isAxiosError(error)) {
|
|
16
|
+
if (error.response) {
|
|
17
|
+
throw new Error(`Network error: ${error.message}, Status code: ${error.response.status}`);
|
|
18
|
+
}
|
|
19
|
+
else if (error.request) {
|
|
20
|
+
throw new Error("Network error: No response received from server.");
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
throw new Error(`Network error: ${error.message}`);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
throw new Error("An unknown error occurred while loading the user data.");
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
export default getUserById;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface IUser {
|
|
2
|
+
id: string;
|
|
3
|
+
username: string;
|
|
4
|
+
name: string;
|
|
5
|
+
email: string;
|
|
6
|
+
role: string;
|
|
7
|
+
avatar: string;
|
|
8
|
+
color: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const useUser: ({ id, initialData: IUser, }: {
|
|
11
|
+
id: string | undefined;
|
|
12
|
+
initialData?: IUser;
|
|
13
|
+
}) => Promise<any>;
|
|
14
|
+
//# sourceMappingURL=use-user.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-user.d.ts","sourceRoot":"","sources":["../../src/hooks/use-user.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,OAAO,gCAGjB;IACD,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,iBAMA,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
interface SessionModel {
|
|
2
|
+
user: {
|
|
3
|
+
id: string;
|
|
4
|
+
username: string;
|
|
5
|
+
name: string;
|
|
6
|
+
lastname: string;
|
|
7
|
+
email: string;
|
|
8
|
+
verified: boolean;
|
|
9
|
+
avatar: string;
|
|
10
|
+
created_at: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
type SessionState = {
|
|
14
|
+
session: SessionModel | null;
|
|
15
|
+
status: string;
|
|
16
|
+
error: any;
|
|
17
|
+
fetchSessionData: () => void;
|
|
18
|
+
};
|
|
19
|
+
export declare const useSessionStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SessionState>>;
|
|
20
|
+
declare function useOxySession(): {
|
|
21
|
+
session: SessionModel | null;
|
|
22
|
+
status: string;
|
|
23
|
+
error: any;
|
|
24
|
+
};
|
|
25
|
+
export default useOxySession;
|
|
26
|
+
//# sourceMappingURL=useOxySession.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOxySession.d.ts","sourceRoot":"","sources":["../../src/hooks/useOxySession.ts"],"names":[],"mappings":"AAOA,UAAU,YAAY;IACpB,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;IACX,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,eAAe,2EA4D1B,CAAC;AAEH,iBAAS,aAAa;;;;EAQrB;AAED,eAAe,aAAa,CAAC"}
|