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