@yourdash/uikit 1.0.1 → 1.0.3
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/components/box/box.module.scss +1 -1
- package/components/box/box.tsx +3 -3
- package/components/button/button.module.scss +3 -3
- package/components/button/button.tsx +2 -1
- package/components/buttonLink/buttonLink.module.scss +5 -1
- package/components/buttonLink/buttonLink.tsx +13 -12
- package/components/buttonWithIcon/buttonWithIcon.module.scss +56 -0
- package/components/buttonWithIcon/buttonWithIcon.tsx +36 -0
- package/components/card/card.module.scss +6 -6
- package/components/card/card.tsx +23 -20
- package/components/container/container.module.scss +20 -0
- package/components/container/container.tsx +22 -0
- package/components/contextMenu/contextMenu.tsx +1 -1
- package/components/contextMenu/contextMenuRoot.module.scss +1 -1
- package/components/contextMenu/contextMenuRoot.tsx +83 -83
- package/components/flex/flex.module.scss +31 -19
- package/components/flex/flex.tsx +23 -2
- package/components/heading/heading.module.scss +1 -1
- package/components/heading/heading.tsx +1 -1
- package/components/icon/icon.tsx +1 -1
- package/components/iconButton/iconButton.module.scss +1 -1
- package/components/iconButton/iconButton.tsx +3 -3
- package/components/image/image.module.scss +72 -1
- package/components/image/image.tsx +65 -10
- package/components/link/link.module.scss +1 -1
- package/components/link/link.tsx +1 -1
- package/components/progressBar/progressBar.module.scss +25 -0
- package/components/progressBar/progressBar.tsx +21 -0
- package/components/redirect/redirect.tsx +1 -1
- package/components/separator/separator.module.scss +9 -4
- package/components/separator/separator.tsx +3 -3
- package/components/spinner/spinner.module.scss +1 -6
- package/components/spinner/spinner.tsx +1 -1
- package/components/subtext/subtext.module.scss +1 -1
- package/components/subtext/subtext.tsx +1 -1
- package/components/tag/tag.module.scss +13 -0
- package/components/tag/tag.tsx +21 -0
- package/components/text/text.module.scss +1 -1
- package/components/text/text.tsx +1 -1
- package/components/textButton/textButton.module.scss +1 -1
- package/components/textButton/textButton.tsx +1 -1
- package/components/textInput/textInput.module.scss +1 -1
- package/components/textInput/textInput.tsx +40 -10
- package/components/toast/toast.module.scss +71 -31
- package/components/toast/toast.ts +12 -0
- package/components/toast/toastAction.ts +12 -0
- package/components/toast/toastContext.ts +5 -3
- package/components/toast/toasts.tsx +99 -0
- package/core/decrementLevel.tsx +13 -13
- package/core/incrementLevel.tsx +1 -1
- package/core/level.tsx +1 -1
- package/core/remToPx.ts +8 -0
- package/core/root.tsx +26 -32
- package/core/toast.ts +18 -17
- package/imports.d.ts +81 -0
- package/package.json +9 -40
- package/theme/defaultTheme.module.scss +16 -4
- package/theme/themeValues.scss +8 -5
- package/tsconfig.json +19 -9
- package/utilityComponent/hasBeenShown/hasBeenShown.tsx +47 -0
- package/utilityComponent/onInView/onInView.tsx +83 -0
- package/views/carousel/carousel.module.scss +77 -0
- package/views/carousel/carousel.tsx +138 -0
- package/views/header/header.module.scss +16 -0
- package/views/header/header.tsx +28 -0
- package/views/infiniteScroll/infiniteScroll.module.scss +26 -0
- package/views/infiniteScroll/infiniteScroll.tsx +90 -0
- package/views/navBar/components/navImage/navImage.module.scss +7 -0
- package/views/navBar/components/navImage/navImage.tsx +15 -0
- package/views/navBar/components/navTitle/navTitle.tsx +13 -0
- package/views/navBar/navBar.module.scss +22 -0
- package/views/navBar/navBar.tsx +37 -0
- package/views/onBoarding/onBoarding.module.scss +84 -0
- package/views/onBoarding/onBoarding.tsx +138 -0
- package/views/panAndZoom/panAndZoom.tsx +121 -114
- package/views/sidebar/Sidebar.module.scss +49 -0
- package/views/sidebar/Sidebar.tsx +30 -0
- package/views/sidebar/SidebarContainer.module.scss +22 -0
- package/views/sidebar/SidebarContainer.tsx +38 -0
- package/views/sidebar/SidebarContext.tsx +15 -0
- package/views/sidebar/SidebarToggleButton.tsx +25 -0
- package/components/toast/toast.tsx +0 -65
@@ -0,0 +1,12 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import { UKIcon } from "../icon/iconDictionary.ts";
|
7
|
+
|
8
|
+
export default interface IToastAction {
|
9
|
+
label: string;
|
10
|
+
icon?: UKIcon;
|
11
|
+
onClick: () => void;
|
12
|
+
}
|
@@ -1,12 +1,14 @@
|
|
1
1
|
/*
|
2
|
-
* Copyright ©2024 Ewsgit<https://
|
3
|
-
* YourDash is licensed under the MIT License. (https://ewsgit.
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
4
|
*/
|
5
5
|
|
6
6
|
import React from "react";
|
7
|
+
import Toast from "./toast.ts";
|
7
8
|
|
8
9
|
const ToastContext = React.createContext({
|
9
|
-
|
10
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
11
|
+
showToast: (data: Toast) => {
|
10
12
|
/* empty */
|
11
13
|
},
|
12
14
|
});
|
@@ -0,0 +1,99 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import generateUUID from "@yourdash/shared/web/helpers/uuid.ts";
|
7
|
+
import Heading from "../heading/heading.tsx";
|
8
|
+
import Separator from "../separator/separator.tsx";
|
9
|
+
import type ToastInterface from "./toast.ts";
|
10
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
11
|
+
import { FC, useState } from "react";
|
12
|
+
import Card from "../card/card.tsx";
|
13
|
+
import { UKIcon } from "../icon/iconDictionary.ts";
|
14
|
+
import IconButton from "../iconButton/iconButton.tsx";
|
15
|
+
import Text from "../text/text.tsx";
|
16
|
+
import ToastContext from "./toastContext.ts";
|
17
|
+
import * as React from "react";
|
18
|
+
// @ts-ignore
|
19
|
+
import styles from "./toast.module.scss";
|
20
|
+
|
21
|
+
const TOAST_DISPLAY_TIME = 5000;
|
22
|
+
|
23
|
+
const Toasts: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
|
24
|
+
const [toasts, setToasts] = useState<(ToastInterface & { uuid: string; animatingOut: boolean })[]>([]);
|
25
|
+
|
26
|
+
return (
|
27
|
+
<>
|
28
|
+
<ToastContext.Provider
|
29
|
+
value={{
|
30
|
+
showToast: (data: ToastInterface) => {
|
31
|
+
const uuid = generateUUID();
|
32
|
+
|
33
|
+
setToasts((t) => [...t, { ...data, uuid: uuid, animatingOut: false }]);
|
34
|
+
|
35
|
+
if (!data.persist) {
|
36
|
+
setTimeout(() => {
|
37
|
+
setToasts((t) =>
|
38
|
+
t.map((toast) => {
|
39
|
+
if (uuid === toast.uuid) {
|
40
|
+
return {
|
41
|
+
...toast,
|
42
|
+
animatingOut: true,
|
43
|
+
};
|
44
|
+
}
|
45
|
+
|
46
|
+
return toast;
|
47
|
+
}),
|
48
|
+
);
|
49
|
+
}, TOAST_DISPLAY_TIME - 500);
|
50
|
+
|
51
|
+
setTimeout(() => {
|
52
|
+
setToasts((t) => t.filter((toast) => toast.uuid !== uuid));
|
53
|
+
}, TOAST_DISPLAY_TIME);
|
54
|
+
}
|
55
|
+
},
|
56
|
+
}}
|
57
|
+
>
|
58
|
+
<div className={styles.container}>
|
59
|
+
{toasts.map((t) => {
|
60
|
+
return (
|
61
|
+
<Card
|
62
|
+
key={t.uuid}
|
63
|
+
actions={
|
64
|
+
t.persist ? (
|
65
|
+
<IconButton
|
66
|
+
accessibleLabel={"Close toast"}
|
67
|
+
icon={UKIcon.X}
|
68
|
+
onClick={() => setToasts((toasts) => toasts.filter((x) => x.uuid !== t.uuid))}
|
69
|
+
/>
|
70
|
+
) : null
|
71
|
+
}
|
72
|
+
className={clippy(styles.cardContent, t.type && styles[t.type])}
|
73
|
+
containerClassName={clippy(
|
74
|
+
styles.component,
|
75
|
+
t.persist && styles.pointerEvents,
|
76
|
+
t.animatingOut ? "animate__animated animate__fadeOutRightBig" : "animate__animated animate__fadeInDown",
|
77
|
+
)}
|
78
|
+
>
|
79
|
+
<Heading
|
80
|
+
className={styles.heading}
|
81
|
+
level={3}
|
82
|
+
text={t.content.title}
|
83
|
+
/>
|
84
|
+
<Separator direction={"column"} />
|
85
|
+
<Text
|
86
|
+
className={styles.body}
|
87
|
+
text={t.content.body}
|
88
|
+
/>
|
89
|
+
</Card>
|
90
|
+
);
|
91
|
+
})}
|
92
|
+
</div>
|
93
|
+
{children}
|
94
|
+
</ToastContext.Provider>
|
95
|
+
</>
|
96
|
+
);
|
97
|
+
};
|
98
|
+
|
99
|
+
export default Toasts;
|
package/core/decrementLevel.tsx
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
/*
|
2
|
-
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
-
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
-
*/
|
5
|
-
|
6
|
-
import LevelContext, { useLevel } from "./level";
|
7
|
-
import { FC } from "react";
|
8
|
-
|
9
|
-
const DecrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
|
10
|
-
return <LevelContext.Provider value={useLevel() - 1}>{props.children}</LevelContext.Provider>;
|
11
|
-
};
|
12
|
-
|
13
|
-
export default DecrementLevel;
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import LevelContext, { useLevel } from "./level.tsx";
|
7
|
+
import { FC } from "react";
|
8
|
+
|
9
|
+
const DecrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
|
10
|
+
return <LevelContext.Provider value={useLevel() - 1}>{props.children}</LevelContext.Provider>;
|
11
|
+
};
|
12
|
+
|
13
|
+
export default DecrementLevel;
|
package/core/incrementLevel.tsx
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import LevelContext, { useLevel } from "./level";
|
6
|
+
import LevelContext, { useLevel } from "./level.tsx";
|
7
7
|
import { FC } from "react";
|
8
8
|
|
9
9
|
const IncrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
|
package/core/level.tsx
CHANGED
package/core/remToPx.ts
ADDED
@@ -0,0 +1,8 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
|
+
*/
|
5
|
+
|
6
|
+
export default function remToPx(rem: number) {
|
7
|
+
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
8
|
+
}
|
package/core/root.tsx
CHANGED
@@ -1,32 +1,26 @@
|
|
1
|
-
/*
|
2
|
-
* Copyright ©2024 Ewsgit<https://
|
3
|
-
* YourDash is licensed under the MIT License. (https://ewsgit.
|
4
|
-
*/
|
5
|
-
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
7
|
-
import isMobileDevice from "@yourdash/shared/web/helpers/isPhone.
|
8
|
-
import ContextMenuRoot from "../components/contextMenu/contextMenuRoot.
|
9
|
-
import
|
10
|
-
import
|
11
|
-
import
|
12
|
-
import
|
13
|
-
|
14
|
-
const UIKitRoot: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
</ContextMenuRoot>
|
28
|
-
</div>
|
29
|
-
);
|
30
|
-
};
|
31
|
-
|
32
|
-
export default UIKitRoot;
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
|
+
import isMobileDevice from "@yourdash/shared/web/helpers/isPhone.ts";
|
8
|
+
import ContextMenuRoot from "../components/contextMenu/contextMenuRoot.tsx";
|
9
|
+
import Toasts from "../components/toast/toasts.tsx";
|
10
|
+
import styles from "../theme/defaultTheme.module.scss";
|
11
|
+
import React from "react";
|
12
|
+
import LevelContext from "./level.tsx";
|
13
|
+
|
14
|
+
const UIKitRoot: React.FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
|
15
|
+
return (
|
16
|
+
<div className={clippy(styles.theme, styles.level0, isMobileDevice() && styles.mobile)}>
|
17
|
+
<ContextMenuRoot>
|
18
|
+
<Toasts>
|
19
|
+
<LevelContext.Provider value={0}>{props.children}</LevelContext.Provider>
|
20
|
+
</Toasts>
|
21
|
+
</ContextMenuRoot>
|
22
|
+
</div>
|
23
|
+
);
|
24
|
+
};
|
25
|
+
|
26
|
+
export default UIKitRoot;
|
package/core/toast.ts
CHANGED
@@ -1,17 +1,18 @@
|
|
1
|
-
/*
|
2
|
-
* Copyright ©2024 Ewsgit<https://
|
3
|
-
* YourDash is licensed under the MIT License. (https://ewsgit.
|
4
|
-
*/
|
5
|
-
|
6
|
-
import React from "react";
|
7
|
-
import
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
}
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import React from "react";
|
7
|
+
import Toast from "../components/toast/toast.ts";
|
8
|
+
import ToastContext from "../components/toast/toastContext.ts";
|
9
|
+
|
10
|
+
export default function useToast() {
|
11
|
+
const toastCtx = React.useContext(ToastContext);
|
12
|
+
|
13
|
+
return {
|
14
|
+
create(data: Toast) {
|
15
|
+
toastCtx.showToast(data);
|
16
|
+
},
|
17
|
+
};
|
18
|
+
}
|
package/imports.d.ts
ADDED
@@ -0,0 +1,81 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2023 @Ewsgit and YourDash contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
+
*/
|
5
|
+
|
6
|
+
// Declare common file imports as shared for the Typescript Language Server
|
7
|
+
|
8
|
+
declare module "*.module.css" {
|
9
|
+
const content: { [className: string]: string };
|
10
|
+
export default content;
|
11
|
+
}
|
12
|
+
|
13
|
+
declare module "*.module.scss" {
|
14
|
+
const content: { [className: string]: string };
|
15
|
+
export default content;
|
16
|
+
}
|
17
|
+
|
18
|
+
declare module "*.jpg" {
|
19
|
+
const value: string;
|
20
|
+
export default value;
|
21
|
+
}
|
22
|
+
|
23
|
+
declare module "*.png" {
|
24
|
+
const value: string;
|
25
|
+
export default value;
|
26
|
+
}
|
27
|
+
|
28
|
+
declare module "*.svg" {
|
29
|
+
const value: string;
|
30
|
+
export default value;
|
31
|
+
}
|
32
|
+
|
33
|
+
declare module "*.avif" {
|
34
|
+
const value: string;
|
35
|
+
export default value;
|
36
|
+
}
|
37
|
+
|
38
|
+
declare module "*.css" {
|
39
|
+
const value: string;
|
40
|
+
export default value;
|
41
|
+
}
|
42
|
+
|
43
|
+
declare module "*.scss" {
|
44
|
+
const value: string;
|
45
|
+
export default value;
|
46
|
+
}
|
47
|
+
|
48
|
+
declare module "*.json" {
|
49
|
+
const content: { [className: string]: string };
|
50
|
+
export default content;
|
51
|
+
}
|
52
|
+
|
53
|
+
declare module "*.obj" {
|
54
|
+
const value: string;
|
55
|
+
export default value;
|
56
|
+
}
|
57
|
+
|
58
|
+
declare module "*.glb" {
|
59
|
+
const value: string;
|
60
|
+
export default value;
|
61
|
+
}
|
62
|
+
|
63
|
+
declare module "*.gltf" {
|
64
|
+
const value: string;
|
65
|
+
export default value;
|
66
|
+
}
|
67
|
+
|
68
|
+
declare module "*.md" {
|
69
|
+
const value: string;
|
70
|
+
export default value;
|
71
|
+
}
|
72
|
+
|
73
|
+
declare module "*.mdx" {
|
74
|
+
const value: string;
|
75
|
+
export default value;
|
76
|
+
}
|
77
|
+
|
78
|
+
declare module "*.wasm" {
|
79
|
+
const value: string;
|
80
|
+
export default value;
|
81
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yourdash/uikit",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.3",
|
4
4
|
"license": "MIT",
|
5
5
|
"type": "module",
|
6
6
|
"engines": {
|
@@ -8,44 +8,13 @@
|
|
8
8
|
},
|
9
9
|
"author": "Ewsgit <ewsgit@duck.com>",
|
10
10
|
"dependencies": {
|
11
|
-
"@loadable/component": "^5.15.3",
|
12
|
-
"@remix-run/router": "^1.15.3",
|
13
|
-
"@tailwindcss/container-queries": "^0.1.1",
|
14
|
-
"@types/express": "^4.17.21",
|
15
|
-
"@types/loadable__component": "^5.13.7",
|
16
|
-
"@types/minimist": "^1.2.2",
|
17
|
-
"@types/node": "^20.1.4",
|
18
|
-
"@types/path-browserify": "^1.0.0",
|
19
|
-
"@types/react": "^18.2.21",
|
20
|
-
"@types/react-dom": "^18.2.7",
|
21
|
-
"@typescript-eslint/eslint-plugin": "^5.59.11",
|
22
|
-
"@typescript-eslint/parser": "^5.59.11",
|
23
|
-
"@vitejs/plugin-react-swc": "^3.3.2",
|
24
|
-
"animate.css": "^4.1.1",
|
25
|
-
"autoprefixer": "^10.4.15",
|
26
|
-
"clsx": "^2.0.0",
|
27
|
-
"concurrently": "^8.2.2",
|
28
|
-
"cross-env": "^7.0.3",
|
29
|
-
"es-abstract": "^1.22.1",
|
30
|
-
"eslint": "^8.47.0",
|
31
|
-
"minimist": "^1.2.8",
|
32
|
-
"path": "^0.12.7",
|
33
|
-
"path-browserify": "^1.0.1",
|
34
|
-
"path-to-regexp": "^6.2.1",
|
35
|
-
"postcss": "^8.4.27",
|
36
11
|
"react": "^18.3.1",
|
37
|
-
"react-dom": "^18.
|
38
|
-
"react
|
39
|
-
"react-
|
40
|
-
"
|
41
|
-
"
|
42
|
-
"
|
43
|
-
"
|
44
|
-
"vite": "^4.4.9",
|
45
|
-
"vite-plugin-dynamic-import": "^1.5.0",
|
46
|
-
"web-tree-sitter": "^0.20.8",
|
47
|
-
"xml2js": "^0.6.2",
|
48
|
-
"yarn": "^1.22.19",
|
49
|
-
"@yourdash/shared": "^1.0.0"
|
12
|
+
"react-dom": "^18.3.1",
|
13
|
+
"@types/react": "^18.3.5",
|
14
|
+
"@types/react-dom": "^18.3.0",
|
15
|
+
"typescript": "^5.6.2",
|
16
|
+
"sass": "^1.78.0",
|
17
|
+
"vite": "^5.4.5",
|
18
|
+
"@yourdash/shared": "workspace:*"
|
50
19
|
}
|
51
|
-
}
|
20
|
+
}
|
@@ -6,14 +6,23 @@
|
|
6
6
|
@import "./themeValues";
|
7
7
|
|
8
8
|
.theme {
|
9
|
+
overflow-x: hidden;
|
10
|
+
overflow-y: auto;
|
11
|
+
height: 100%;
|
12
|
+
|
13
|
+
background: var(#{$theme+$background});
|
9
14
|
#{$theme}-author: "Ewsgit";
|
10
15
|
#{$theme}-name: "YourDash Classic Dark";
|
11
16
|
#{$theme}-version: "0.0.1";
|
12
17
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
18
|
+
::-webkit-scrollbar {
|
19
|
+
width: var(#{$theme+$scrollbar+$width});
|
20
|
+
border-radius: 0;
|
21
|
+
}
|
22
|
+
|
23
|
+
::-webkit-scrollbar-thumb {
|
24
|
+
border-radius: var(#{$theme+$scrollbar+$radius});
|
25
|
+
}
|
17
26
|
}
|
18
27
|
|
19
28
|
.level0 {
|
@@ -28,8 +37,11 @@
|
|
28
37
|
#{$theme+$padding}: 1rem;
|
29
38
|
#{$theme+$gap}: 0.5rem;
|
30
39
|
#{$theme+$transition}: all 200ms ease-in-out;
|
40
|
+
#{$theme+$transition+$transition}: 200ms ease-in-out;
|
31
41
|
#{$theme+$separator+$size}: 0.125rem;
|
32
42
|
#{$theme+$separator+$color}: #444444;
|
43
|
+
#{$theme+$scrollbar+$width}: 0.4rem;
|
44
|
+
#{$theme+$scrollbar+$radius}: 0.1rem;
|
33
45
|
|
34
46
|
// heading
|
35
47
|
#{$theme+$heading+$h1+$weight}: 900;
|
package/theme/themeValues.scss
CHANGED
@@ -15,16 +15,17 @@ $subcolor: "scl";
|
|
15
15
|
$color: "col";
|
16
16
|
$background: "bgn";
|
17
17
|
$gap: "gap";
|
18
|
-
$transition: "
|
19
|
-
$font: "
|
20
|
-
$size: "
|
18
|
+
$transition: "trans";
|
19
|
+
$font: "font";
|
20
|
+
$size: "size";
|
21
21
|
$weight: "wgt";
|
22
22
|
$family: "fam";
|
23
|
-
$vertical: "
|
24
|
-
$horizontal: "
|
23
|
+
$vertical: "vert";
|
24
|
+
$horizontal: "horiz";
|
25
25
|
$header: "hed";
|
26
26
|
$separator: "sep";
|
27
27
|
$height: "hei";
|
28
|
+
$width: "wid";
|
28
29
|
$heading: "hed";
|
29
30
|
$input: "inp";
|
30
31
|
$focus: "foc";
|
@@ -35,6 +36,8 @@ $h3: "he3";
|
|
35
36
|
$h4: "he4";
|
36
37
|
$h5: "he5";
|
37
38
|
$h6: "he6";
|
39
|
+
$scrollbar: "scrlbr";
|
40
|
+
|
38
41
|
|
39
42
|
$sizeMobile: 440px;
|
40
43
|
$sizeLargeMobile: 560px;
|
package/tsconfig.json
CHANGED
@@ -1,20 +1,30 @@
|
|
1
1
|
{
|
2
2
|
"compilerOptions": {
|
3
|
-
"strict": true,
|
4
3
|
"target": "ESNext",
|
5
4
|
"module": "ESNext",
|
6
|
-
"
|
5
|
+
"useDefineForClassFields": true,
|
6
|
+
"lib": [
|
7
|
+
"DOM",
|
8
|
+
"DOM.Iterable",
|
9
|
+
"ESNext"
|
10
|
+
],
|
11
|
+
"allowJs": false,
|
12
|
+
"skipLibCheck": true,
|
13
|
+
"esModuleInterop": false,
|
7
14
|
"allowSyntheticDefaultImports": true,
|
8
|
-
"
|
9
|
-
"
|
10
|
-
"
|
11
|
-
"
|
12
|
-
"
|
15
|
+
"strict": true,
|
16
|
+
"forceConsistentCasingInFileNames": true,
|
17
|
+
"resolveJsonModule": true,
|
18
|
+
"moduleResolution": "bundler",
|
19
|
+
"allowImportingTsExtensions": true,
|
13
20
|
"isolatedModules": true,
|
21
|
+
"moduleDetection": "force",
|
22
|
+
"noEmit": true,
|
23
|
+
"jsx": "react-jsx"
|
14
24
|
},
|
15
25
|
"include": [
|
16
26
|
"./**/*",
|
17
|
-
"../
|
18
|
-
"../
|
27
|
+
"../shared/**/*",
|
28
|
+
"../web"
|
19
29
|
]
|
20
30
|
}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import { FC, useEffect, useRef, useState } from "react";
|
7
|
+
|
8
|
+
const HasBeenShown: FC<{
|
9
|
+
className?: string;
|
10
|
+
onSeen: () => void;
|
11
|
+
}> = ({ className, onSeen }) => {
|
12
|
+
const [hasBeenSeen, setHasBeenSeen] = useState(false);
|
13
|
+
const ref = useRef<HTMLDivElement>(null);
|
14
|
+
|
15
|
+
useEffect(() => {
|
16
|
+
if (!ref.current) return;
|
17
|
+
|
18
|
+
const current = ref.current;
|
19
|
+
|
20
|
+
const observer = new IntersectionObserver((interaction) => {
|
21
|
+
if (interaction[0].isIntersecting) {
|
22
|
+
onSeen();
|
23
|
+
observer.disconnect();
|
24
|
+
setHasBeenSeen(true);
|
25
|
+
}
|
26
|
+
});
|
27
|
+
|
28
|
+
observer.observe(current);
|
29
|
+
|
30
|
+
return () => {
|
31
|
+
observer.disconnect();
|
32
|
+
};
|
33
|
+
}, []);
|
34
|
+
|
35
|
+
if (hasBeenSeen) {
|
36
|
+
return null;
|
37
|
+
}
|
38
|
+
|
39
|
+
return (
|
40
|
+
<div
|
41
|
+
ref={ref}
|
42
|
+
className={className}
|
43
|
+
/>
|
44
|
+
);
|
45
|
+
};
|
46
|
+
|
47
|
+
export default HasBeenShown;
|
@@ -0,0 +1,83 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import { FC, useEffect, useRef } from "react";
|
7
|
+
|
8
|
+
const OnInView: FC<{
|
9
|
+
className?: string;
|
10
|
+
onEnterView?: (direction: "up" | "down" | "left" | "right") => void;
|
11
|
+
onLeaveView?: (direction: "up" | "down" | "left" | "right") => void;
|
12
|
+
}> = ({ className, onEnterView, onLeaveView }) => {
|
13
|
+
const isInView = useRef(false);
|
14
|
+
const ref = useRef<HTMLDivElement>(null);
|
15
|
+
|
16
|
+
useEffect(() => {
|
17
|
+
if (!ref.current) return;
|
18
|
+
|
19
|
+
const current = ref.current;
|
20
|
+
|
21
|
+
const handleScroll = () => {
|
22
|
+
const { top, bottom, left, right } = current.getBoundingClientRect();
|
23
|
+
|
24
|
+
if (!isInView.current) {
|
25
|
+
if (top < 0) {
|
26
|
+
onEnterView?.("up");
|
27
|
+
isInView.current = true;
|
28
|
+
return;
|
29
|
+
} else if (bottom > window.innerHeight) {
|
30
|
+
onEnterView?.("down");
|
31
|
+
isInView.current = true;
|
32
|
+
return;
|
33
|
+
} else if (left < 0) {
|
34
|
+
onEnterView?.("left");
|
35
|
+
isInView.current = true;
|
36
|
+
return;
|
37
|
+
} else if (right > window.innerWidth) {
|
38
|
+
onEnterView?.("right");
|
39
|
+
isInView.current = true;
|
40
|
+
return;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
if (top > window.innerHeight) {
|
45
|
+
onLeaveView?.("down");
|
46
|
+
isInView.current = false;
|
47
|
+
return;
|
48
|
+
} else if (bottom < 0) {
|
49
|
+
onLeaveView?.("up");
|
50
|
+
isInView.current = false;
|
51
|
+
return;
|
52
|
+
} else if (left > window.innerWidth) {
|
53
|
+
onLeaveView?.("right");
|
54
|
+
isInView.current = false;
|
55
|
+
return;
|
56
|
+
} else if (right < 0) {
|
57
|
+
onLeaveView?.("left");
|
58
|
+
isInView.current = false;
|
59
|
+
return;
|
60
|
+
}
|
61
|
+
};
|
62
|
+
|
63
|
+
const observer = new IntersectionObserver(() => {
|
64
|
+
handleScroll();
|
65
|
+
});
|
66
|
+
|
67
|
+
observer.observe(current);
|
68
|
+
|
69
|
+
return () => {
|
70
|
+
observer.disconnect();
|
71
|
+
};
|
72
|
+
}, []);
|
73
|
+
|
74
|
+
return (
|
75
|
+
<div
|
76
|
+
ref={ref}
|
77
|
+
style={{ height: 1, width: 1 }}
|
78
|
+
className={className}
|
79
|
+
/>
|
80
|
+
);
|
81
|
+
};
|
82
|
+
|
83
|
+
export default OnInView;
|