this repo has no description
notnite.com
1import WebpackRequire from "@moonlight-mod/types/discord/require";
2import { DetectedExtension, 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");
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 } = require("moonbase_stores") as ReturnType<
28 typeof import("../stores")["stores"]
29 >;
30
31 function InfoSection({
32 title,
33 children
34 }: {
35 title: string;
36 children: React.ReactNode;
37 }) {
38 return (
39 <div
40 style={{
41 marginRight: "1em"
42 }}
43 >
44 <CommonComponents.Text
45 variant="eyebrow"
46 className={UserInfoClasses.userInfoSectionHeader}
47 >
48 {title}
49 </CommonComponents.Text>
50
51 <CommonComponents.Text variant="text-sm/normal">
52 {children}
53 </CommonComponents.Text>
54 </div>
55 );
56 }
57
58 function Badge({
59 color,
60 children
61 }: {
62 color: string;
63 children: React.ReactNode;
64 }) {
65 return (
66 <span
67 style={{
68 borderRadius: ".1875rem",
69 padding: "0 0.275rem",
70 marginRight: "0.4em",
71 backgroundColor: color,
72 color: "#fff"
73 }}
74 >
75 {children}
76 </span>
77 );
78 }
79
80 function ExtensionInfo({ ext }: { ext: MoonbaseExtension }) {
81 const { Flex, Text } = CommonComponents;
82 const authors = ext.manifest?.meta?.authors;
83 const tags = ext.manifest?.meta?.tags;
84
85 const dependencies: Dependency[] = [];
86 if (ext.manifest.dependencies != null) {
87 dependencies.push(
88 ...ext.manifest.dependencies.map((dep) => ({
89 id: dep,
90 type: DependencyType.Dependency
91 }))
92 );
93 }
94
95 if (ext.manifest.suggested != null) {
96 dependencies.push(
97 ...ext.manifest.suggested.map((dep) => ({
98 id: dep,
99 type: DependencyType.Optional
100 }))
101 );
102 }
103
104 if (ext.manifest.incompatible != null) {
105 dependencies.push(
106 ...ext.manifest.incompatible.map((dep) => ({
107 id: dep,
108 type: DependencyType.Incompatible
109 }))
110 );
111 }
112
113 return (
114 <>
115 {authors != null && (
116 <InfoSection title="Authors">
117 {authors.map((author, i) => {
118 const comma = i !== authors.length - 1 ? ", " : "";
119 if (typeof author === "string") {
120 return (
121 <span>
122 {author}
123 {comma}
124 </span>
125 );
126 } else {
127 // TODO: resolve IDs
128 return (
129 <span>
130 {author.name}
131 {comma}
132 </span>
133 );
134 }
135 })}
136 </InfoSection>
137 )}
138
139 {tags != null && (
140 <InfoSection title="Tags">
141 {tags.map((tag, i) => {
142 const names: Record<ExtensionTag, string> = {
143 [ExtensionTag.Accessibility]: "Accessibility",
144 [ExtensionTag.Appearance]: "Appearance",
145 [ExtensionTag.Chat]: "Chat",
146 [ExtensionTag.Commands]: "Commands",
147 [ExtensionTag.ContextMenu]: "Context Menu",
148 [ExtensionTag.DangerZone]: "Danger Zone",
149 [ExtensionTag.Development]: "Development",
150 [ExtensionTag.Fixes]: "Fixes",
151 [ExtensionTag.Fun]: "Fun",
152 [ExtensionTag.Markdown]: "Markdown",
153 [ExtensionTag.Voice]: "Voice",
154 [ExtensionTag.Privacy]: "Privacy",
155 [ExtensionTag.Profiles]: "Profiles",
156 [ExtensionTag.QualityOfLife]: "Quality of Life",
157 [ExtensionTag.Library]: "Library"
158 };
159 const name = names[tag];
160
161 return (
162 <Badge
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 <Badge color={color}>{name}</Badge>;
187 })}
188 </InfoSection>
189 )}
190 </>
191 );
192 }
193
194 return {
195 InfoSection,
196 ExtensionInfo
197 };
198};