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
101 const dependencies: Dependency[] = [];
102 if (ext.manifest.dependencies != null) {
103 dependencies.push(
104 ...ext.manifest.dependencies.map((dep) => ({
105 id: dep,
106 type: DependencyType.Dependency
107 }))
108 );
109 }
110
111 if (ext.manifest.suggested != null) {
112 dependencies.push(
113 ...ext.manifest.suggested.map((dep) => ({
114 id: dep,
115 type: DependencyType.Optional
116 }))
117 );
118 }
119
120 if (ext.manifest.incompatible != null) {
121 dependencies.push(
122 ...ext.manifest.incompatible.map((dep) => ({
123 id: dep,
124 type: DependencyType.Incompatible
125 }))
126 );
127 }
128
129 return (
130 <>
131 {authors != null && (
132 <InfoSection title="Authors">
133 {authors.map((author, i) => {
134 const comma = i !== authors.length - 1 ? ", " : "";
135 if (typeof author === "string") {
136 return (
137 <span key={i}>
138 {author}
139 {comma}
140 </span>
141 );
142 } else {
143 // TODO: resolve IDs
144 return (
145 <span key={i}>
146 {author.name}
147 {comma}
148 </span>
149 );
150 }
151 })}
152 </InfoSection>
153 )}
154
155 {tags != null && (
156 <InfoSection title="Tags">
157 {tags.map((tag, i) => {
158 const name = tagNames[tag];
159
160 return (
161 <Badge
162 key={i}
163 color={
164 tag === ExtensionTag.DangerZone
165 ? "var(--red-400)"
166 : "var(--brand-500)"
167 }
168 >
169 {name}
170 </Badge>
171 );
172 })}
173 </InfoSection>
174 )}
175
176 {dependencies.length > 0 && (
177 <InfoSection title="Dependencies">
178 {dependencies.map((dep) => {
179 const colors = {
180 [DependencyType.Dependency]: "var(--brand-500)",
181 [DependencyType.Optional]: "var(--orange-400)",
182 [DependencyType.Incompatible]: "var(--red-400)"
183 };
184 const color = colors[dep.type];
185 const name = MoonbaseSettingsStore.getExtensionName(dep.id);
186 return (
187 <Badge color={color} key={dep.id}>
188 {name}
189 </Badge>
190 );
191 })}
192 </InfoSection>
193 )}
194 </>
195 );
196 }
197
198 return {
199 InfoSection,
200 ExtensionInfo
201 };
202};