@edu-tosel/design 1.0.19 → 1.0.20
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/card/index.d.ts +0 -1
- package/card/index.js +0 -1
- package/card/template/AddCard.js +1 -1
- package/card/template/ChartCard.js +1 -1
- package/card/template/InfoCard.d.ts +11 -16
- package/card/template/InfoCard.js +81 -4
- package/card/template/NavCard.js +1 -1
- package/card/template/TableCard.d.ts +6 -2
- package/card/template/TableCard.js +18 -20
- package/card/widget/Card.design.d.ts +1 -1
- package/card/widget/Card.design.js +3 -3
- package/card/widget/InfoCard.design.js +1 -1
- package/card/widget/NavCard.design.d.ts +1 -1
- package/card/widget/NavCard.design.js +13 -7
- package/card/widget/TableCard.design.d.ts +4 -0
- package/card/widget/TableCard.design.js +23 -0
- package/globals.css +3 -0
- package/hook/index.d.ts +2 -0
- package/hook/index.js +2 -0
- package/hook/useEase.d.ts +1 -0
- package/hook/useEase.js +11 -0
- package/hook/useEvents.d.ts +3 -0
- package/{util/hooks.js → hook/useEvents.js} +1 -11
- package/interaction/template/NoData.d.ts +6 -0
- package/interaction/template/NoData.js +5 -0
- package/interaction/widget/Sign.design.d.ts +5 -0
- package/interaction/widget/Sign.design.js +10 -0
- package/interface/Card.d.ts +46 -2
- package/interface/Property.d.ts +3 -1
- package/interface/Widget.d.ts +2 -0
- package/layout/index.d.ts +1 -1
- package/layout/index.js +1 -1
- package/layout/template/Dashboard.d.ts +5 -0
- package/layout/template/Dashboard.js +5 -0
- package/layout/template/Row.d.ts +5 -1
- package/layout/template/Row.js +4 -3
- package/layout/widget/Row.design.js +2 -2
- package/layout/widget/dashboard/Header.js +23 -0
- package/layout/widget/dashboard/Layout.d.ts +2 -0
- package/layout/{template/dashboard/index.js → widget/dashboard/Layout.js} +1 -5
- package/layout/widget/dashboard/Menu.d.ts +4 -0
- package/layout/widget/dashboard/Menu.js +20 -0
- package/modal/widget/Modal.design.d.ts +1 -1
- package/modal/widget/Modal.design.js +7 -1
- package/navigation/Navigation.js +1 -1
- package/package.json +1 -1
- package/tailwind.config.ts +4 -0
- package/util/colors.d.ts +8 -0
- package/util/colors.js +5 -0
- package/util/index.d.ts +1 -2
- package/util/index.js +1 -2
- package/version.txt +1 -1
- package/layout/template/dashboard/Header.js +0 -19
- package/layout/template/dashboard/index.d.ts +0 -6
- package/util/hooks.d.ts +0 -4
- /package/layout/{template → widget}/dashboard/Header.d.ts +0 -0
package/card/index.d.ts
CHANGED
|
@@ -3,4 +3,3 @@ export { default as ChartCard } from "./template/ChartCard";
|
|
|
3
3
|
export { default as InfoCard } from "./template/InfoCard";
|
|
4
4
|
export { default as NavCard } from "./template/NavCard";
|
|
5
5
|
export { default as TableCard } from "./template/TableCard";
|
|
6
|
-
export { default as TrumpCard } from "./widget/NavCard.design";
|
package/card/index.js
CHANGED
|
@@ -3,4 +3,3 @@ export { default as ChartCard } from "./template/ChartCard";
|
|
|
3
3
|
export { default as InfoCard } from "./template/InfoCard";
|
|
4
4
|
export { default as NavCard } from "./template/NavCard";
|
|
5
5
|
export { default as TableCard } from "./template/TableCard";
|
|
6
|
-
export { default as TrumpCard } from "./widget/NavCard.design";
|
package/card/template/AddCard.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../../util";
|
|
3
|
-
import
|
|
3
|
+
import Card from "../widget/Card.design";
|
|
4
4
|
export default function AddCard({ title, icon, onClick, options, }) {
|
|
5
5
|
const { width } = options ?? {};
|
|
6
6
|
const container = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Area, Bar, ComposedChart, Legend, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
|
|
3
|
-
import
|
|
3
|
+
import Card from "../widget/Card.design";
|
|
4
4
|
export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, average, }) {
|
|
5
5
|
const { width, height } = options ?? {};
|
|
6
6
|
return (_jsxs(Card, { options: {
|
|
@@ -1,23 +1,18 @@
|
|
|
1
|
-
import { InfoCardExamProps, InfoCardProductProps,
|
|
1
|
+
import { InfoCardPersonalInformationProps, InfoCardExamProps, InfoCardGradeProps, InfoCardItemProps, InfoCardProductProps, InfoCardExamDataREGProps, InfoCardExamDataOLYProps } from "../../interface";
|
|
2
|
+
declare function PersonalInformation({ titles, data, }: InfoCardPersonalInformationProps): import("react/jsx-runtime").JSX.Element;
|
|
2
3
|
declare function Exam({ titles, data }: InfoCardExamProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function ExamDataREG({ titles, data }: InfoCardExamDataREGProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function ExamDataOLY({ titles, data }: InfoCardExamDataOLYProps): import("react/jsx-runtime").JSX.Element;
|
|
3
6
|
declare function Product({ titles, data }: InfoCardProductProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
declare function Item({ titles, data
|
|
5
|
-
|
|
6
|
-
item: string;
|
|
7
|
-
};
|
|
8
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
declare function Grade({ titles, data, }: Omit<InfoCardProps, "children"> & {
|
|
10
|
-
data: {
|
|
11
|
-
level?: string;
|
|
12
|
-
levelString?: string;
|
|
13
|
-
levelColor?: string;
|
|
14
|
-
profileImage?: string;
|
|
15
|
-
score?: number;
|
|
16
|
-
grade?: number;
|
|
17
|
-
};
|
|
18
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function Item({ titles, data }: InfoCardItemProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function Grade({ titles, data }: InfoCardGradeProps): import("react/jsx-runtime").JSX.Element;
|
|
19
9
|
declare const InfoCard: {
|
|
10
|
+
PersonalInformation: typeof PersonalInformation;
|
|
20
11
|
Exam: typeof Exam;
|
|
12
|
+
ExamData: {
|
|
13
|
+
REG: typeof ExamDataREG;
|
|
14
|
+
OLY: typeof ExamDataOLY;
|
|
15
|
+
};
|
|
21
16
|
Product: typeof Product;
|
|
22
17
|
Item: typeof Item;
|
|
23
18
|
Grade: typeof Grade;
|
|
@@ -1,11 +1,35 @@
|
|
|
1
1
|
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useNavigate } from "react-router-dom";
|
|
3
3
|
import { InfoCardDesign } from "../widget/InfoCard.design";
|
|
4
|
-
import { Label } from "../..";
|
|
5
|
-
import { cn } from "../../util";
|
|
4
|
+
import { Events, Label, NoData } from "../..";
|
|
5
|
+
import { cn, gradient } from "../../util";
|
|
6
6
|
const label = {
|
|
7
7
|
positions: "absolute bottom-5 right-5",
|
|
8
8
|
};
|
|
9
|
+
function PersonalInformation({ titles, data, }) {
|
|
10
|
+
const body = {
|
|
11
|
+
container: "flex flex-col pt-5.75",
|
|
12
|
+
belong: "text-crimson-burgundy",
|
|
13
|
+
username: "text-gray-dim font-bold",
|
|
14
|
+
name: "text-xl font-bold text-crimson-burgundy",
|
|
15
|
+
subInfo: {
|
|
16
|
+
displays: "flex flex-col mt-7.5",
|
|
17
|
+
fonts: "text-xs text-gray-dim",
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
return (_jsx(InfoCardDesign, { titles: titles, options: {
|
|
21
|
+
titleBorder: "border-crimson-burgundy",
|
|
22
|
+
width: "md",
|
|
23
|
+
height: "md",
|
|
24
|
+
background: gradient.bg.greenToRedSoft,
|
|
25
|
+
boundary: "border-3 border-crimson-burgundy/30",
|
|
26
|
+
}, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsxs("div", { className: cn(body.belong), children: [data.school, "/", data.academy] }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), _jsx(Label.Button, { title: "\uD559\uC6D0 \uB4F1\uB85D\uD558\uAE30", onClick: () => { }, options: {
|
|
27
|
+
width: "md",
|
|
28
|
+
background: "bg-crimson-burgundy",
|
|
29
|
+
text: "text-white",
|
|
30
|
+
className: cn(label),
|
|
31
|
+
} })] }) }));
|
|
32
|
+
}
|
|
9
33
|
function Exam({ titles, data }) {
|
|
10
34
|
const { status, isPublic, manager, examDate, endDate } = data;
|
|
11
35
|
const container = {
|
|
@@ -20,6 +44,54 @@ function Exam({ titles, data }) {
|
|
|
20
44
|
height: "xs",
|
|
21
45
|
}, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: status, onClick: () => navigate("/admin/grades/1"), options: { width: "sm", height: "xs", className: cn(label) } })] }) }));
|
|
22
46
|
}
|
|
47
|
+
function ExamDataREG({ titles, data }) {
|
|
48
|
+
const container = {
|
|
49
|
+
positions: "relative",
|
|
50
|
+
displays: "flex flex-col gap-5",
|
|
51
|
+
sizes: "h-36.75 w-50 pt-5",
|
|
52
|
+
};
|
|
53
|
+
const dataBox = {
|
|
54
|
+
container: "flex justify-between",
|
|
55
|
+
rightBox: "flex items-end",
|
|
56
|
+
score: "text-4xl font-bold leading-none",
|
|
57
|
+
};
|
|
58
|
+
const arr = [
|
|
59
|
+
["part 1", data && data?.scores[0], "text-crimson-burgundy"],
|
|
60
|
+
["part 2", data && data?.scores[1], "text-crimson-burgundy"],
|
|
61
|
+
[
|
|
62
|
+
"total",
|
|
63
|
+
data && data?.scores[0] + data?.scores[1],
|
|
64
|
+
"text-gray-dim border-t border-dashed border-gray-dim pt-1",
|
|
65
|
+
],
|
|
66
|
+
];
|
|
67
|
+
return (_jsx(InfoCardDesign, { titles: titles, options: {
|
|
68
|
+
width: "xs",
|
|
69
|
+
height: "md",
|
|
70
|
+
titleBorder: "border-crimson-burgundy",
|
|
71
|
+
}, children: _jsx(Events.Replace, { widgets: [
|
|
72
|
+
[
|
|
73
|
+
!data,
|
|
74
|
+
_jsx(NoData.Sign, { script: "\uC774\uC804 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", color: "#910023", className: "text-[#910023] mt-12" }),
|
|
75
|
+
],
|
|
76
|
+
], children: _jsx("div", { className: cn(container), children: arr.map(([part, score, styles]) => (_jsxs("div", { className: cn(dataBox.container, styles), children: [_jsx("div", { children: part }), _jsxs("div", { className: cn(dataBox.rightBox), children: [_jsx("div", { className: "text-4xl font-bold leading-none", children: score }), _jsx("div", { children: "\uC810" })] })] }))) }) }) }));
|
|
77
|
+
}
|
|
78
|
+
function ExamDataOLY({ titles, data }) {
|
|
79
|
+
const container = {
|
|
80
|
+
displays: "flex justify-center",
|
|
81
|
+
sizes: "w-full",
|
|
82
|
+
margins: "mt-11.375",
|
|
83
|
+
};
|
|
84
|
+
const body = {
|
|
85
|
+
displays: "flex flex-col justify-between items-center",
|
|
86
|
+
sizes: "h-20",
|
|
87
|
+
};
|
|
88
|
+
return (_jsx(InfoCardDesign, { titles: titles, options: { width: "xs", height: "md", titleBorder: "border-green-dark" }, children: _jsx(Events.Replace, { widgets: [
|
|
89
|
+
[
|
|
90
|
+
!data,
|
|
91
|
+
_jsx(NoData.Sign, { script: "\uC774\uC804 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", color: "#105652", className: "text-[#105652] mt-12" }),
|
|
92
|
+
],
|
|
93
|
+
], children: _jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-end text-green-dark", children: [_jsx("div", { className: "text-4xl font-bold leading-none ", children: data?.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "text-gray-dim", children: [data?.prize, "\uC744 \uC218\uC0C1\uD558\uC600\uC2B5\uB2C8\uB2E4."] })] }) }) }) }));
|
|
94
|
+
}
|
|
23
95
|
function Product({ titles, data }) {
|
|
24
96
|
const { date, status, receiver, requester } = data;
|
|
25
97
|
const container = {
|
|
@@ -39,7 +111,7 @@ function Product({ titles, data }) {
|
|
|
39
111
|
text: "hover:text-white",
|
|
40
112
|
} })] }) }));
|
|
41
113
|
}
|
|
42
|
-
function Item({ titles, data
|
|
114
|
+
function Item({ titles, data }) {
|
|
43
115
|
const { item } = data;
|
|
44
116
|
return (_jsx(InfoCardDesign, { titles: titles, options: {
|
|
45
117
|
titleBorder: "border-blue-navy",
|
|
@@ -47,7 +119,7 @@ function Item({ titles, data, }) {
|
|
|
47
119
|
height: "xs",
|
|
48
120
|
}, children: _jsx("div", { children: item }) }));
|
|
49
121
|
}
|
|
50
|
-
function Grade({ titles, data
|
|
122
|
+
function Grade({ titles, data }) {
|
|
51
123
|
const container = {
|
|
52
124
|
positions: "relative",
|
|
53
125
|
displays: "flex flex-col justify-between mt-2.5",
|
|
@@ -72,7 +144,12 @@ function Grade({ titles, data, }) {
|
|
|
72
144
|
} }), _jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: data.profileImage }) }) })] }) }));
|
|
73
145
|
}
|
|
74
146
|
const InfoCard = {
|
|
147
|
+
PersonalInformation,
|
|
75
148
|
Exam,
|
|
149
|
+
ExamData: {
|
|
150
|
+
REG: ExamDataREG,
|
|
151
|
+
OLY: ExamDataOLY,
|
|
152
|
+
},
|
|
76
153
|
Product,
|
|
77
154
|
Item,
|
|
78
155
|
Grade,
|
package/card/template/NavCard.js
CHANGED
|
@@ -33,7 +33,7 @@ function BannerAndButtonInLay({ banner, buttonInLay, }) {
|
|
|
33
33
|
...buttonInLay,
|
|
34
34
|
options: { ...buttonInLay.options, noShadow: true },
|
|
35
35
|
};
|
|
36
|
-
return (_jsxs("div", { className: "flex", children: [_jsx("div", { className: "box-shadow rounded-xl", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "box-shadow rounded-xl", children: _jsx(ButtonInLay, { ...buttonInLayProps }) })] }));
|
|
36
|
+
return (_jsxs("div", { className: "flex w-full", children: [_jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(ButtonInLay, { ...buttonInLayProps }) })] }));
|
|
37
37
|
}
|
|
38
38
|
const NavCard = {
|
|
39
39
|
Banner,
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { TableCardProps } from "../../interface";
|
|
2
|
-
|
|
2
|
+
declare function TableCard<K extends string, T extends {
|
|
3
3
|
[p in K]: any;
|
|
4
|
-
}>(
|
|
4
|
+
}>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare namespace TableCard {
|
|
6
|
+
var Log: <K extends string, T extends { [p in K]: any; }>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
}
|
|
8
|
+
export default TableCard;
|
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import { Card } from "../widget/Card.design";
|
|
6
|
-
import { DataField, Row } from "../../layout";
|
|
7
|
-
export default function TableCard({ dataSets, dataField, options }) {
|
|
8
|
-
const { width, height } = options ?? {};
|
|
9
|
-
const { order, setOrder } = useWidgetStore();
|
|
10
|
-
const id = useId();
|
|
11
|
-
const orders = order[id] ?? [];
|
|
12
|
-
const container = {
|
|
13
|
-
paddings: "pt-4 pb-14",
|
|
14
|
-
};
|
|
15
|
-
return (_jsx(Card, { header: _jsx(DataField.Card, { id: id, dataField: dataField }), options: {
|
|
16
|
-
classNames: cn(container),
|
|
17
|
-
width: width ?? "full",
|
|
18
|
-
height: height ?? "lg",
|
|
19
|
-
overflow: "y-scroll",
|
|
20
|
-
noPadding: true,
|
|
21
|
-
}, children: sortByOrder(dataSets, orders).map((dataSet, index) => (_jsx(Row.Card, { dataSet: dataSet, dataField: dataField }, id + index))) }));
|
|
2
|
+
import TableCardDesign from "../widget/TableCard.design";
|
|
3
|
+
function TableCard(props) {
|
|
4
|
+
return _jsx(TableCardDesign, { ...props });
|
|
22
5
|
}
|
|
6
|
+
function Log(props) {
|
|
7
|
+
return (_jsx(TableCardDesign, { dataField: props.dataField, dataSets: props.dataSets, options: {
|
|
8
|
+
...props.options,
|
|
9
|
+
rowHeight: "h-5",
|
|
10
|
+
onClick: props.options?.onClick,
|
|
11
|
+
text: "text-white",
|
|
12
|
+
padding: "p-7.5",
|
|
13
|
+
noHeader: true,
|
|
14
|
+
noHover: true,
|
|
15
|
+
noRowPadding: true,
|
|
16
|
+
className: "flex flex-col gap-2.5",
|
|
17
|
+
} }));
|
|
18
|
+
}
|
|
19
|
+
TableCard.Log = Log;
|
|
20
|
+
export default TableCard;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CardProps } from "../../interface/Card";
|
|
2
|
-
export
|
|
2
|
+
export default function CardDesign({ header, children, options, debug, }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -21,7 +21,7 @@ const heightSize = {
|
|
|
21
21
|
full: "h-full",
|
|
22
22
|
auto: "h-auto min-h-80",
|
|
23
23
|
};
|
|
24
|
-
export function
|
|
24
|
+
export default function CardDesign({ header, children, options, debug, }) {
|
|
25
25
|
const { setIsOwn } = useWidgetStore();
|
|
26
26
|
const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, noShadow, } = options ?? {};
|
|
27
27
|
const setBoundary = () => {
|
|
@@ -29,8 +29,8 @@ export function Card({ header, children, options, debug }) {
|
|
|
29
29
|
return "";
|
|
30
30
|
if (boundary === "shadow")
|
|
31
31
|
return "box-shadow";
|
|
32
|
-
if (boundary
|
|
33
|
-
return
|
|
32
|
+
if (boundary?.includes("border"))
|
|
33
|
+
return boundary;
|
|
34
34
|
if (boundary === "none")
|
|
35
35
|
return "";
|
|
36
36
|
return "box-shadow";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../../util";
|
|
3
|
-
import
|
|
3
|
+
import Card from "./Card.design";
|
|
4
4
|
export function InfoCardDesign({ titles: { title, subtitle }, debug, options, children, }) {
|
|
5
5
|
const { titleBorder, text } = options ?? {};
|
|
6
6
|
const container = {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { NavCardProps } from "../../interface";
|
|
2
|
-
export default function
|
|
2
|
+
export default function NavCardDesign({ titles, options }: NavCardProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Label } from "../../html";
|
|
3
3
|
import { LineBreaks } from "../../text";
|
|
4
4
|
import { cn } from "../../util";
|
|
5
|
-
import
|
|
6
|
-
export default function
|
|
7
|
-
const { title, subtitle, color
|
|
5
|
+
import Card from "./Card.design";
|
|
6
|
+
export default function NavCardDesign({ titles, options }) {
|
|
7
|
+
const { title, subtitle, color, titleColor, subtitleColor } = titles;
|
|
8
8
|
const { width, image, buttonInLay } = options ?? {};
|
|
9
9
|
const { path, size } = image ?? { size: "sub" };
|
|
10
10
|
const flag = !buttonInLay && width === "xl";
|
|
@@ -13,17 +13,23 @@ export default function NavCard({ titles, options }) {
|
|
|
13
13
|
positons: `absolute z-10 ${flag ? "left-12 top-0" : "top-7.5 left-7.5"}`,
|
|
14
14
|
sizes: flag && "h-full",
|
|
15
15
|
displays: `flex flex-col ${flag ? "gap-7.5 justify-center" : "gap-2.5"}`,
|
|
16
|
-
styles: `${
|
|
16
|
+
styles: `${color ?? "text-gray-dim"}`,
|
|
17
|
+
},
|
|
18
|
+
title: {
|
|
19
|
+
fonts: `${flag ? "text-2xl h-6.75" : "text-xl h-6"} font-bold`,
|
|
20
|
+
styles: (!color && titleColor) ?? "text-gray-dim",
|
|
21
|
+
},
|
|
22
|
+
subtitle: {
|
|
23
|
+
fonts: "text-base h-10",
|
|
24
|
+
styles: (!color && subtitleColor) ?? "text-gray-dim",
|
|
17
25
|
},
|
|
18
|
-
title: `${flag ? "text-2xl h-6.75" : "text-xl h-6"} font-bold`,
|
|
19
|
-
subtitle: "text-base h-10",
|
|
20
26
|
};
|
|
21
27
|
const imageClassNames = () => {
|
|
22
28
|
if (size === "full")
|
|
23
29
|
return "w-full h-full object-cover";
|
|
24
30
|
return "absolute bottom-0 right-0 w-full xs:w-auto max-w-120 z-0 max-h-44 object-contain";
|
|
25
31
|
};
|
|
26
|
-
return (_jsxs(Card, { options: options, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className:
|
|
32
|
+
return (_jsxs(Card, { options: options, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, options: {
|
|
27
33
|
disabled: buttonInLay.disabled,
|
|
28
34
|
className: "absolute bottom-7.5 left-7.5",
|
|
29
35
|
background: buttonInLay?.background,
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from "react";
|
|
3
|
+
import { useWidgetStore } from "../../store";
|
|
4
|
+
import { cn, sortByOrder } from "../../util";
|
|
5
|
+
import Card from "../widget/Card.design";
|
|
6
|
+
import { DataField, Row } from "../../layout";
|
|
7
|
+
export default function TableCardDesign({ dataSets, dataField, options }) {
|
|
8
|
+
const { width, height } = options ?? {};
|
|
9
|
+
const { order } = useWidgetStore();
|
|
10
|
+
const id = useId();
|
|
11
|
+
const orders = order[id] ?? [];
|
|
12
|
+
const container = {
|
|
13
|
+
paddings: options?.padding ?? "pt-4 pb-14",
|
|
14
|
+
className: options?.className,
|
|
15
|
+
};
|
|
16
|
+
return (_jsx(Card, { header: !options?.noHeader && _jsx(DataField.Card, { id: id, dataField: dataField }), options: {
|
|
17
|
+
classNames: cn(container),
|
|
18
|
+
width: width ?? "full",
|
|
19
|
+
height: height ?? "lg",
|
|
20
|
+
overflow: "y-scroll",
|
|
21
|
+
noPadding: true,
|
|
22
|
+
}, children: sortByOrder(dataSets, orders).map((dataSet, index) => (_jsx(Row.Card, { dataSet: dataSet, dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }));
|
|
23
|
+
}
|
package/globals.css
CHANGED
package/hook/index.d.ts
ADDED
package/hook/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useEase(inTime: number, outTime: number): readonly [boolean, number];
|
package/hook/useEase.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
export default function useEase(inTime, outTime) {
|
|
3
|
+
const [flag, setFlag] = useState(false);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
const id = setTimeout(() => {
|
|
6
|
+
setFlag((prev) => !prev);
|
|
7
|
+
}, flag ? inTime : outTime);
|
|
8
|
+
return () => clearTimeout(id);
|
|
9
|
+
}, [flag, inTime, outTime]);
|
|
10
|
+
return [flag, flag ? inTime : outTime];
|
|
11
|
+
}
|
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
import { useEffect, useState } from "react";
|
|
2
|
-
export function
|
|
3
|
-
const [flag, setFlag] = useState(false);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
const id = setTimeout(() => {
|
|
6
|
-
setFlag((prev) => !prev);
|
|
7
|
-
}, flag ? inTime : outTime);
|
|
8
|
-
return () => clearTimeout(id);
|
|
9
|
-
}, [flag, inTime, outTime]);
|
|
10
|
-
return [flag, flag ? inTime : outTime];
|
|
11
|
-
}
|
|
12
|
-
export function useEvents(args) {
|
|
2
|
+
export default function useEvents(args) {
|
|
13
3
|
const [events, setEvents] = useState([]);
|
|
14
4
|
args.forEach(([flag, event]) => {
|
|
15
5
|
useEffect(() => {
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
declare function Script(): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare function Sign(props: {
|
|
3
|
+
script: string;
|
|
4
|
+
color?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
2
7
|
declare const NoData: {
|
|
3
8
|
Script: typeof Script;
|
|
9
|
+
Sign: typeof Sign;
|
|
4
10
|
};
|
|
5
11
|
export default NoData;
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import ScriptDesign from "../widget/Script.design";
|
|
3
|
+
import SignDesign from "../widget/Sign.design";
|
|
3
4
|
function Script() {
|
|
4
5
|
return _jsx(ScriptDesign, { script: "No Data" });
|
|
5
6
|
}
|
|
7
|
+
function Sign(props) {
|
|
8
|
+
return _jsx(SignDesign, { ...props });
|
|
9
|
+
}
|
|
6
10
|
const NoData = {
|
|
7
11
|
Script,
|
|
12
|
+
Sign,
|
|
8
13
|
};
|
|
9
14
|
export default NoData;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../util";
|
|
3
|
+
export default function SignDesign({ script, color, className, }) {
|
|
4
|
+
const container = {
|
|
5
|
+
displays: "flex flex-col justify-center items-center gap-2",
|
|
6
|
+
sizes: "w-full h-16.25",
|
|
7
|
+
className,
|
|
8
|
+
};
|
|
9
|
+
return (_jsxs("div", { className: cn(container), children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [_jsx("path", { d: "M8.75 23.75H31.25M8.75 23.75C7.42392 23.75 6.15215 23.2232 5.21447 22.2855C4.27678 21.3479 3.75 20.0761 3.75 18.75M8.75 23.75C7.42392 23.75 6.15215 24.2768 5.21447 25.2145C4.27678 26.1521 3.75 27.4239 3.75 28.75C3.75 30.0761 4.27678 31.3479 5.21447 32.2855C6.15215 33.2232 7.42392 33.75 8.75 33.75H31.25C32.5761 33.75 33.8479 33.2232 34.7855 32.2855C35.7232 31.3479 36.25 30.0761 36.25 28.75C36.25 27.4239 35.7232 26.1521 34.7855 25.2145C33.8479 24.2768 32.5761 23.75 31.25 23.75M31.25 23.75C32.5761 23.75 33.8479 23.2232 34.7855 22.2855C35.7232 21.3479 36.25 20.0761 36.25 18.75M3.75 18.75C3.75 17.4239 4.27678 16.1521 5.21447 15.2145C6.15215 14.2768 7.42392 13.75 8.75 13.75H31.25C32.5761 13.75 33.8479 14.2768 34.7855 15.2145C35.7232 16.1521 36.25 17.4239 36.25 18.75M3.75 18.75C3.75 17.1272 4.27633 15.5482 5.25 14.25L9.56167 8.5C10.0856 7.8014 10.765 7.23438 11.5461 6.84385C12.3272 6.45332 13.1884 6.25 14.0617 6.25M36.25 18.75C36.25 17.1272 35.7237 15.5482 34.75 14.25L30.4383 8.5C29.375 7.08333 27.7083 6.25 25.9383 6.25M31.25 28.75H31.2633V28.7633H31.25V28.75ZM31.25 18.75H31.2633V18.7633H31.25V18.75ZM26.25 28.75H26.2633V28.7633H26.25V28.75ZM26.25 18.75H26.2633V18.7633H26.25V18.75Z", stroke: color ?? "#910023", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M18 4L22 8M22 4L18 8", stroke: color ?? "#910023", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("div", { className: "text-sm", children: script })] }));
|
|
10
|
+
}
|
package/interface/Card.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Button, DataField, ImageSize, OnClick, Size, Titles } from "./Property";
|
|
2
2
|
interface CardOptions {
|
|
3
3
|
classNames?: string;
|
|
4
|
-
boundary?:
|
|
4
|
+
boundary?: string;
|
|
5
5
|
rounded?: string;
|
|
6
6
|
height?: Size;
|
|
7
7
|
width?: Size;
|
|
@@ -11,6 +11,7 @@ interface CardOptions {
|
|
|
11
11
|
onClick?: OnClick;
|
|
12
12
|
overflow?: "hiden" | "y-scroll" | "auto";
|
|
13
13
|
noPadding?: boolean;
|
|
14
|
+
padding?: string | false;
|
|
14
15
|
noShadow?: boolean;
|
|
15
16
|
}
|
|
16
17
|
export interface CardProps {
|
|
@@ -74,6 +75,16 @@ export interface InfoCardProps extends CardProps {
|
|
|
74
75
|
titleBorder?: string;
|
|
75
76
|
} & CardOptions;
|
|
76
77
|
}
|
|
78
|
+
export interface InfoCardPersonalInformationProps extends Omit<InfoCardProps, "children"> {
|
|
79
|
+
data: {
|
|
80
|
+
school: string;
|
|
81
|
+
academy: string;
|
|
82
|
+
username: string;
|
|
83
|
+
name: string;
|
|
84
|
+
email: string;
|
|
85
|
+
phone: string;
|
|
86
|
+
};
|
|
87
|
+
}
|
|
77
88
|
export interface InfoCardExamProps extends Omit<InfoCardProps, "children"> {
|
|
78
89
|
data: {
|
|
79
90
|
status: string;
|
|
@@ -83,6 +94,17 @@ export interface InfoCardExamProps extends Omit<InfoCardProps, "children"> {
|
|
|
83
94
|
isPublic: boolean;
|
|
84
95
|
};
|
|
85
96
|
}
|
|
97
|
+
export interface InfoCardExamDataREGProps extends Omit<InfoCardProps, "children"> {
|
|
98
|
+
data?: {
|
|
99
|
+
scores: number[];
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
export interface InfoCardExamDataOLYProps extends Omit<InfoCardProps, "children"> {
|
|
103
|
+
data?: {
|
|
104
|
+
score: number;
|
|
105
|
+
prize: string | null;
|
|
106
|
+
};
|
|
107
|
+
}
|
|
86
108
|
export interface InfoCardProductProps extends Omit<InfoCardProps, "children"> {
|
|
87
109
|
data: {
|
|
88
110
|
date?: string;
|
|
@@ -92,6 +114,21 @@ export interface InfoCardProductProps extends Omit<InfoCardProps, "children"> {
|
|
|
92
114
|
button?: Button;
|
|
93
115
|
};
|
|
94
116
|
}
|
|
117
|
+
export interface InfoCardItemProps extends Omit<InfoCardProps, "children"> {
|
|
118
|
+
data: {
|
|
119
|
+
item: string;
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
export interface InfoCardGradeProps extends Omit<InfoCardProps, "children"> {
|
|
123
|
+
data: {
|
|
124
|
+
level?: string;
|
|
125
|
+
levelString?: string;
|
|
126
|
+
levelColor?: string;
|
|
127
|
+
profileImage?: string;
|
|
128
|
+
score?: number;
|
|
129
|
+
grade?: number;
|
|
130
|
+
};
|
|
131
|
+
}
|
|
95
132
|
export interface AddCardProps extends Omit<CardProps, "children"> {
|
|
96
133
|
title?: string;
|
|
97
134
|
icon?: string;
|
|
@@ -102,6 +139,13 @@ export interface TableCardProps<T> extends Omit<CardProps, "children"> {
|
|
|
102
139
|
dataField: {
|
|
103
140
|
[p in keyof T]?: Partial<DataField>;
|
|
104
141
|
};
|
|
105
|
-
options?: CardOptions
|
|
142
|
+
options?: CardOptions & {
|
|
143
|
+
className?: string;
|
|
144
|
+
limit?: number;
|
|
145
|
+
rowHeight?: string;
|
|
146
|
+
noHover?: boolean;
|
|
147
|
+
noRowPadding?: boolean;
|
|
148
|
+
noHeader?: boolean;
|
|
149
|
+
};
|
|
106
150
|
}
|
|
107
151
|
export {};
|
package/interface/Property.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
|
|
|
34
34
|
* @property {"sub"} sub - Sub size
|
|
35
35
|
* @property {"full"} full - Full size
|
|
36
36
|
*/
|
|
37
|
-
export type OnClick = () => unknown | (() => Promise<unknown>);
|
|
37
|
+
export type OnClick<T = unknown> = (prop?: T) => unknown | ((prop?: T) => Promise<unknown>);
|
|
38
38
|
export type Button = [string, OnClick];
|
|
39
39
|
export type Scripts = {
|
|
40
40
|
script: string;
|
|
@@ -45,6 +45,8 @@ export type Titles = {
|
|
|
45
45
|
subtitle?: string | string[];
|
|
46
46
|
isSub?: boolean;
|
|
47
47
|
color?: string;
|
|
48
|
+
titleColor?: string;
|
|
49
|
+
subtitleColor?: string;
|
|
48
50
|
};
|
|
49
51
|
export type DataField = {
|
|
50
52
|
title: string | number;
|
package/interface/Widget.d.ts
CHANGED
package/layout/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Events } from "./template/Events";
|
|
2
|
-
export { default as Dashboard } from "./template/
|
|
2
|
+
export { default as Dashboard } from "./template/Dashboard";
|
|
3
3
|
export { default as DataField } from "./template/DataField";
|
|
4
4
|
export { default as Gallery } from "./template/Gallery";
|
|
5
5
|
export { default as Row } from "./template/Row";
|
package/layout/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Events } from "./template/Events";
|
|
2
|
-
export { default as Dashboard } from "./template/
|
|
2
|
+
export { default as Dashboard } from "./template/Dashboard";
|
|
3
3
|
export { default as DataField } from "./template/DataField";
|
|
4
4
|
export { default as Gallery } from "./template/Gallery";
|
|
5
5
|
export { default as Row } from "./template/Row";
|
package/layout/template/Row.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { RowProps } from "../../interface";
|
|
2
2
|
declare function Board<T extends Record<string, any>>({ dataSet, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
declare function Card<T extends Record<string, any>>({ dataSet, dataField, onClick, }: RowProps<T
|
|
3
|
+
declare function Card<T extends Record<string, any>>({ dataSet, dataField, onClick, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
|
|
4
|
+
height?: string;
|
|
5
|
+
noPadding?: boolean;
|
|
6
|
+
noHover?: boolean;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
4
8
|
declare const Row: {
|
|
5
9
|
Board: typeof Board;
|
|
6
10
|
Card: typeof Card;
|
package/layout/template/Row.js
CHANGED
|
@@ -9,12 +9,13 @@ function Board({ dataSet, dataField, onClick, }) {
|
|
|
9
9
|
text: "text-xl",
|
|
10
10
|
} }, id));
|
|
11
11
|
}
|
|
12
|
-
function Card({ dataSet, dataField, onClick, }) {
|
|
12
|
+
function Card({ dataSet, dataField, onClick, height, noPadding, noHover, }) {
|
|
13
13
|
const id = useId();
|
|
14
14
|
return (_jsx(RowDesign, { onClick: onClick, dataSet: dataSet, dataField: dataField, options: {
|
|
15
|
-
size:
|
|
16
|
-
padding: "px-2 xs:px-4 xl:px-7.5",
|
|
15
|
+
size: `w-full ${height ?? "h-12"}`,
|
|
16
|
+
padding: !noPadding ? "px-2 xs:px-4 xl:px-7.5" : "",
|
|
17
17
|
text: "text-base",
|
|
18
|
+
noHover,
|
|
18
19
|
} }, id));
|
|
19
20
|
}
|
|
20
21
|
const Row = {
|
|
@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useId } from "react";
|
|
3
3
|
import { cn } from "../../util";
|
|
4
4
|
export default function RowDesign({ dataSet, dataField, options, onClick, }) {
|
|
5
|
-
const { size, padding, text } = options ?? {};
|
|
5
|
+
const { size, padding, text, noHover } = options ?? {};
|
|
6
6
|
const id = useId();
|
|
7
7
|
const container = {
|
|
8
8
|
displays: "flex items-center ",
|
|
9
9
|
sizes: size,
|
|
10
10
|
paddings: padding,
|
|
11
11
|
text: text,
|
|
12
|
-
styles: "hover:bg-gray-100 duration-100",
|
|
12
|
+
styles: !noHover && "hover:bg-gray-100 duration-100",
|
|
13
13
|
};
|
|
14
14
|
return (_jsx("div", { className: cn(container), onClick: onClick, children: dataField &&
|
|
15
15
|
Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: dataSet[key] }, id + key))) }));
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../../util";
|
|
3
|
+
import { useWidgetStore } from "../../../store";
|
|
4
|
+
import Menu from "./Menu";
|
|
5
|
+
import { Events } from "../..";
|
|
6
|
+
export function Header({ title, logo, options }) {
|
|
7
|
+
const { events, setView, setIsOwn } = useWidgetStore();
|
|
8
|
+
const { text, background, className } = options ?? {};
|
|
9
|
+
const { isDark, setDark } = useWidgetStore();
|
|
10
|
+
const container = {
|
|
11
|
+
positions: "fixed xl:static top-0 left-0 z-40",
|
|
12
|
+
displays: "flex items-center justify-between ",
|
|
13
|
+
sizes: "h-15 w-full",
|
|
14
|
+
background: `${background ?? "bg-white"} dark:bg-black`,
|
|
15
|
+
text: `${text ?? "text-black"} dark:text-white`,
|
|
16
|
+
styles: "px-5 xl:px-8 2xl:px-16 ",
|
|
17
|
+
className,
|
|
18
|
+
};
|
|
19
|
+
return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? (_jsx("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [["menu", _jsx(Menu, { image: "/images/hani.png" })]], children: [_jsx("svg", { className: "cursor-pointer", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
|
|
20
|
+
setIsOwn(true);
|
|
21
|
+
return setView("menu");
|
|
22
|
+
}, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));
|
|
23
|
+
}
|
|
@@ -4,7 +4,7 @@ import { NavigationContainer } from "../../../navigation";
|
|
|
4
4
|
import { Header } from "./Header";
|
|
5
5
|
import { cn } from "../../../util";
|
|
6
6
|
import { useWidgetStore } from "../../../store";
|
|
7
|
-
function Layout({ header, navigations, children, options }) {
|
|
7
|
+
export default function Layout({ header, navigations, children, options, }) {
|
|
8
8
|
const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
|
|
9
9
|
const { title, options: headerOptions, logo } = header;
|
|
10
10
|
const { background } = options ?? {};
|
|
@@ -27,7 +27,3 @@ function Layout({ header, navigations, children, options }) {
|
|
|
27
27
|
};
|
|
28
28
|
return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
|
|
29
29
|
}
|
|
30
|
-
const Dashboard = {
|
|
31
|
-
Layout,
|
|
32
|
-
};
|
|
33
|
-
export default Dashboard;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useTransition, animated } from "react-spring";
|
|
3
|
+
import { cn } from "../../../util";
|
|
4
|
+
import { useWidgetStore } from "../../../store";
|
|
5
|
+
export default function Menu({ isVisible, image, }) {
|
|
6
|
+
const { setIsOwn } = useWidgetStore();
|
|
7
|
+
const container = {
|
|
8
|
+
displays: "flex flex-col",
|
|
9
|
+
positions: "absolute top-8 right-0 z-45 ",
|
|
10
|
+
sizes: "w-72 ",
|
|
11
|
+
styles: " bg-white box-shadow",
|
|
12
|
+
};
|
|
13
|
+
const transitions = useTransition(isVisible, {
|
|
14
|
+
from: { opacity: 0 },
|
|
15
|
+
enter: { opacity: 1 },
|
|
16
|
+
leave: { opacity: 0 },
|
|
17
|
+
config: { duration: 200 },
|
|
18
|
+
});
|
|
19
|
+
return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-48 flex gap-12 justify-center items-center text-black", children: [_jsx("img", { src: image, className: "rounded-full w-20 h-20" }), _jsxs("div", { children: [_jsx("div", { children: "\uD31C\uD558\uB2C8" }), _jsx("div", { className: "text-xs", children: "\uB274\uC9C4\uC2A4 \uCD08\uB4F1\uD559\uAD50" })] })] }), _jsx("a", { href: "/user", className: "flex justify-center py-3 px-5 hover:bg-gray-light", children: "\uB300\uC2DC\uBCF4\uB4DC" }), _jsx("a", { href: "/mypage", className: "flex justify-center py-3 px-5 hover:bg-gray-light", children: "My Page" })] })));
|
|
20
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ModalProps } from "../../interface/Modal";
|
|
2
|
-
export default function ModalDesign({ isVisible, event, children, options, debug, }: ModalProps): import("react").ReactPortal;
|
|
2
|
+
export default function ModalDesign({ isVisible, event, children, options, debug, }: ModalProps): import("react").ReactPortal | null;
|
|
@@ -4,6 +4,7 @@ import { useTransition, animated } from "react-spring";
|
|
|
4
4
|
import { useWidgetStore } from "../../store";
|
|
5
5
|
import { cn } from "../../util";
|
|
6
6
|
import isDebug from "../../util/isDebug";
|
|
7
|
+
import { useEffect, useState } from "react";
|
|
7
8
|
const widthSize = {
|
|
8
9
|
xs: "w-2/3 min-w-76 max-w-176",
|
|
9
10
|
sm: "w-2/3 min-w-76 max-w-176",
|
|
@@ -24,7 +25,11 @@ const heightSize = {
|
|
|
24
25
|
};
|
|
25
26
|
export default function ModalDesign({ isVisible, event, children, options, debug, }) {
|
|
26
27
|
const { buttons, width, height, closeButtonColor, isCloseButton } = options ?? {};
|
|
28
|
+
const [detection, setDetection] = useState(null);
|
|
27
29
|
const { setIsOwn, removeModal } = useWidgetStore();
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
setDetection(document.getElementById("portal"));
|
|
32
|
+
}, []);
|
|
28
33
|
const background = {
|
|
29
34
|
positions: "z-50 fixed top-0 left-0",
|
|
30
35
|
displays: "flex items-center justify-center ",
|
|
@@ -60,5 +65,6 @@ export default function ModalDesign({ isVisible, event, children, options, debug
|
|
|
60
65
|
leave: { opacity: 0 },
|
|
61
66
|
config: { duration: 200 },
|
|
62
67
|
});
|
|
63
|
-
return
|
|
68
|
+
return (detection &&
|
|
69
|
+
ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsxs("div", { className: cn(container), children: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && event && (_jsx("button", { className: cn(closeButton), onClick: () => removeModal(event), children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body));
|
|
64
70
|
}
|
package/navigation/Navigation.js
CHANGED
|
@@ -8,7 +8,7 @@ export const buttonClassNames = (href, nowPath, color) => {
|
|
|
8
8
|
const container = {
|
|
9
9
|
displays: "flex flex-row items-center justify-center xl:justify-start gap-2.5",
|
|
10
10
|
sizes: " w-full xl:w-51 h-11 ",
|
|
11
|
-
styles: "xl:rounded-
|
|
11
|
+
styles: "xl:rounded-lg xl:pl-5 font-bold ",
|
|
12
12
|
};
|
|
13
13
|
const toggle = checkPathMatch(href, nowPath)
|
|
14
14
|
? !isDark
|
package/package.json
CHANGED
package/tailwind.config.ts
CHANGED
|
@@ -49,6 +49,7 @@ export default {
|
|
|
49
49
|
"white-off": "#F5F5F5",
|
|
50
50
|
"red-burgundy": "#933652",
|
|
51
51
|
"crimson-burgundy": "#910023",
|
|
52
|
+
"crimson-burgundy-light": "#EDDFE2",
|
|
52
53
|
"crimson-dark": "#760023",
|
|
53
54
|
"red-crimson": "#760023",
|
|
54
55
|
"red-velvet": "#AC647A",
|
|
@@ -91,6 +92,7 @@ export default {
|
|
|
91
92
|
4.25: "1.0625rem",
|
|
92
93
|
4.75: "1.1875rem",
|
|
93
94
|
5.25: "1.3125rem",
|
|
95
|
+
5.75: "1.4375rem",
|
|
94
96
|
6.25: "1.5625rem",
|
|
95
97
|
6.4: "1.6rem",
|
|
96
98
|
6.5: "1.625rem",
|
|
@@ -102,6 +104,7 @@ export default {
|
|
|
102
104
|
10.25: "2.5625rem",
|
|
103
105
|
11: "2.75rem",
|
|
104
106
|
11.25: "2.8125rem",
|
|
107
|
+
11.375: "2.84375rem",
|
|
105
108
|
12: "3rem",
|
|
106
109
|
13.25: "3.3125rem",
|
|
107
110
|
13.75: "3.4375rem",
|
|
@@ -131,6 +134,7 @@ export default {
|
|
|
131
134
|
30: "7.5rem",
|
|
132
135
|
34: "8.5rem",
|
|
133
136
|
36: "9rem",
|
|
137
|
+
36.75: "9.1875rem",
|
|
134
138
|
38: "9.5rem",
|
|
135
139
|
40: "10rem",
|
|
136
140
|
41: "10.25rem",
|
package/util/colors.d.ts
CHANGED
|
@@ -10,10 +10,18 @@ export declare const gradientBackground: {
|
|
|
10
10
|
greenToRed: string;
|
|
11
11
|
greenToRedSoft: string;
|
|
12
12
|
};
|
|
13
|
+
export declare const gradientBorder: {
|
|
14
|
+
greenToRed: string;
|
|
15
|
+
greenToRedSoft: string;
|
|
16
|
+
};
|
|
13
17
|
export declare const gradient: {
|
|
14
18
|
bg: {
|
|
15
19
|
lab: string;
|
|
16
20
|
greenToRed: string;
|
|
17
21
|
greenToRedSoft: string;
|
|
18
22
|
};
|
|
23
|
+
border: {
|
|
24
|
+
greenToRed: string;
|
|
25
|
+
greenToRedSoft: string;
|
|
26
|
+
};
|
|
19
27
|
};
|
package/util/colors.js
CHANGED
|
@@ -10,6 +10,11 @@ export const gradientBackground = {
|
|
|
10
10
|
greenToRed: "bg-gradient-to-r from-green-dark to-red-crimson",
|
|
11
11
|
greenToRedSoft: "bg-gradient-to-r from-green-dark/20 to-red-crimson/20",
|
|
12
12
|
};
|
|
13
|
+
export const gradientBorder = {
|
|
14
|
+
greenToRed: "border-gradient-to-r from-green-dark to-crimson-burgundy",
|
|
15
|
+
greenToRedSoft: "border-gradient-to-r from-green-dark/20 to-red-crimson/20",
|
|
16
|
+
};
|
|
13
17
|
export const gradient = {
|
|
14
18
|
bg: gradientBackground,
|
|
19
|
+
border: gradientBorder,
|
|
15
20
|
};
|
package/util/index.d.ts
CHANGED
|
@@ -4,7 +4,6 @@ export { default as isDebug } from "./isDebug";
|
|
|
4
4
|
export { default as sortByOrder } from "./sortByOrder";
|
|
5
5
|
export { default as checkPathMatch } from "./checkPathMatch";
|
|
6
6
|
export * from "./colors";
|
|
7
|
-
export * from "./hooks";
|
|
8
7
|
export * from "./pattern";
|
|
9
8
|
export * from "./shape";
|
|
10
|
-
export * from "
|
|
9
|
+
export * from "../hook";
|
package/util/index.js
CHANGED
|
@@ -4,7 +4,6 @@ export { default as isDebug } from "./isDebug";
|
|
|
4
4
|
export { default as sortByOrder } from "./sortByOrder";
|
|
5
5
|
export { default as checkPathMatch } from "./checkPathMatch";
|
|
6
6
|
export * from "./colors";
|
|
7
|
-
export * from "./hooks";
|
|
8
7
|
export * from "./pattern";
|
|
9
8
|
export * from "./shape";
|
|
10
|
-
export * from "
|
|
9
|
+
export * from "../hook";
|
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.20
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { cn } from "../../../util";
|
|
4
|
-
import { useWidgetStore } from "../../../store";
|
|
5
|
-
export function Header({ title, logo, options }) {
|
|
6
|
-
const { text, background, className } = options ?? {};
|
|
7
|
-
const { isDark, setDark } = useWidgetStore();
|
|
8
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
9
|
-
const container = {
|
|
10
|
-
positions: "fixed xl:static top-0 left-0 z-40",
|
|
11
|
-
displays: "flex items-center justify-between ",
|
|
12
|
-
sizes: "h-15 w-full",
|
|
13
|
-
background: `${background ?? "bg-white"} dark:bg-black`,
|
|
14
|
-
text: `${text ?? "text-black"} dark:text-white`,
|
|
15
|
-
styles: "px-5 xl:px-8 2xl:px-16 ",
|
|
16
|
-
className,
|
|
17
|
-
};
|
|
18
|
-
return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? (_jsx("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold", children: title })] }), _jsx("button", { onClick: setDark, children: "DARK" })] }));
|
|
19
|
-
}
|
package/util/hooks.d.ts
DELETED
|
File without changes
|