this repo has no description
notnite.com
1import WebpackRequire from "@moonlight-mod/types/discord/require";
2import { ExtensionTag } from "@moonlight-mod/types";
3import { MoonbaseExtension } from "../types";
4
5type Dependency = {
6 id: string;
7 type: DependencyType;
8};
9
10enum DependencyType {
11 Dependency = "dependency",
12 Optional = "optional",
13 Incompatible = "incompatible"
14}
15
16export default (require: typeof WebpackRequire) => {
17 const React = require("common_react");
18 const spacepack = require("spacepack_spacepack").spacepack;
19
20 const CommonComponents = require("common_components");
21 const UserInfoClasses = spacepack.findByCode(
22 "infoScroller",
23 "userInfoSection",
24 "userInfoSectionHeader"
25 )[0].exports;
26
27 const { MoonbaseSettingsStore } =
28 require("moonbase_stores") as typeof import("../webpackModules/stores");
29
30 function InfoSection({
31 title,
32 children
33 }: {
34 title: string;
35 children: React.ReactNode;
36 }) {
37 return (
38 <div
39 style={{
40 marginRight: "1em"
41 }}
42 >
43 <CommonComponents.Text
44 variant="eyebrow"
45 className={UserInfoClasses.userInfoSectionHeader}
46 >
47 {title}
48 </CommonComponents.Text>
49
50 <CommonComponents.Text variant="text-sm/normal">
51 {children}
52 </CommonComponents.Text>
53 </div>
54 );
55 }
56
57 function Badge({
58 color,
59 children
60 }: {
61 color: string;
62 children: React.ReactNode;
63 }) {
64 return (
65 <span
66 style={{
67 borderRadius: ".1875rem",
68 padding: "0 0.275rem",
69 marginRight: "0.4em",
70 backgroundColor: color,
71 color: "#fff"
72 }}
73 >
74 {children}
75 </span>
76 );
77 }
78
79 function ExtensionInfo({ ext }: { ext: MoonbaseExtension }) {
80 const authors = ext.manifest?.meta?.authors;
81 const tags = ext.manifest?.meta?.tags;
82
83 const dependencies: Dependency[] = [];
84 if (ext.manifest.dependencies != null) {
85 dependencies.push(
86 ...ext.manifest.dependencies.map((dep) => ({
87 id: dep,
88 type: DependencyType.Dependency
89 }))
90 );
91 }
92
93 if (ext.manifest.suggested != null) {
94 dependencies.push(
95 ...ext.manifest.suggested.map((dep) => ({
96 id: dep,
97 type: DependencyType.Optional
98 }))
99 );
100 }
101
102 if (ext.manifest.incompatible != null) {
103 dependencies.push(
104 ...ext.manifest.incompatible.map((dep) => ({
105 id: dep,
106 type: DependencyType.Incompatible
107 }))
108 );
109 }
110
111 return (
112 <>
113 {authors != null && (
114 <InfoSection title="Authors">
115 {authors.map((author, i) => {
116 const comma = i !== authors.length - 1 ? ", " : "";
117 if (typeof author === "string") {
118 return (
119 <span key={i}>
120 {author}
121 {comma}
122 </span>
123 );
124 } else {
125 // TODO: resolve IDs
126 return (
127 <span key={i}>
128 {author.name}
129 {comma}
130 </span>
131 );
132 }
133 })}
134 </InfoSection>
135 )}
136
137 {tags != null && (
138 <InfoSection title="Tags">
139 {tags.map((tag, i) => {
140 const names: Record<ExtensionTag, string> = {
141 [ExtensionTag.Accessibility]: "Accessibility",
142 [ExtensionTag.Appearance]: "Appearance",
143 [ExtensionTag.Chat]: "Chat",
144 [ExtensionTag.Commands]: "Commands",
145 [ExtensionTag.ContextMenu]: "Context Menu",
146 [ExtensionTag.DangerZone]: "Danger Zone",
147 [ExtensionTag.Development]: "Development",
148 [ExtensionTag.Fixes]: "Fixes",
149 [ExtensionTag.Fun]: "Fun",
150 [ExtensionTag.Markdown]: "Markdown",
151 [ExtensionTag.Voice]: "Voice",
152 [ExtensionTag.Privacy]: "Privacy",
153 [ExtensionTag.Profiles]: "Profiles",
154 [ExtensionTag.QualityOfLife]: "Quality of Life",
155 [ExtensionTag.Library]: "Library"
156 };
157 const name = names[tag];
158
159 return (
160 <Badge
161 key={i}
162 color={
163 tag === ExtensionTag.DangerZone
164 ? "var(--red-400)"
165 : "var(--brand-500)"
166 }
167 >
168 {name}
169 </Badge>
170 );
171 })}
172 </InfoSection>
173 )}
174
175 {dependencies.length > 0 && (
176 <InfoSection title="Dependencies">
177 {dependencies.map((dep) => {
178 const colors = {
179 [DependencyType.Dependency]: "var(--brand-500)",
180 [DependencyType.Optional]: "var(--orange-400)",
181 [DependencyType.Incompatible]: "var(--red-400)"
182 };
183 const color = colors[dep.type];
184 const name = MoonbaseSettingsStore.getExtensionName(dep.id);
185 return (
186 <Badge color={color} key={dep.id}>
187 {name}
188 </Badge>
189 );
190 })}
191 </InfoSection>
192 )}
193 </>
194 );
195 }
196
197 return {
198 InfoSection,
199 ExtensionInfo
200 };
201};