Skip to content

Commit aa3f5c0

Browse files
darbyjackdarbyjack
authored
Merge pull request #1 from HelpChat/retheme
2 parents 08cd0f8 + 19d74ff commit aa3f5c0

29 files changed

+932
-803
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# HelpChat ToolBox
1+
# HelpChat Toolbox
22

33
## What is it?
44

5-
HelpChat ToolBox is a toolbox of useful tools for HelpChat's Minecraft plugins, configs, and more!
5+
HelpChat Toolbox is a toolbox of useful tools for HelpChat's Minecraft plugins, configs, and more!
66

77
It currently includes the following features:
88

@@ -17,7 +17,7 @@ It currently includes the following features:
1717

1818
### Usage
1919

20-
HelpChat's ToolBox is hosted at [toolbox.helpch.at](https://toolbox.helpch.at/).
20+
HelpChat's Toolbox is hosted at [toolbox.helpch.at](https://toolbox.helpch.at/).
2121

2222
## Development
2323

‎cli/generateschema.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const directory = fs
1010
directory.forEach((f: string) => {
1111
const file = fs.readFileSync(`./converters/types/${f}`, "utf8");
1212

13-
const regex = /\/\/ @ToolBox - ([a-zA-Z]{1,30})/;
13+
const regex = /\/\/ @Toolbox - ([a-zA-Z]{1,30})/;
1414
const match = file.match(regex);
1515

1616
if (!match || match.length < 2) return;

‎components/Converter.tsx

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import Head from "next/head";
2+
import tw, { css } from "twin.macro";
3+
import { TextBox } from "./TextBox";
4+
import { useEffect, useState } from "react";
5+
import { ConversionError } from "../converters/converter";
6+
7+
const Converter = ({
8+
inputConfigs,
9+
outputConfigs,
10+
title,
11+
description,
12+
parser,
13+
}: {
14+
inputConfigs: Record<
15+
string,
16+
{
17+
language: string;
18+
name: string;
19+
}
20+
>;
21+
outputConfigs: Record<
22+
string,
23+
{
24+
name: string;
25+
}
26+
>;
27+
title: string;
28+
description: string;
29+
parser: (
30+
input: Record<string, string>
31+
) => ConversionError | { error: false; data: Record<string, string> };
32+
}) => {
33+
const [configs, setConfigs] = useState<Record<string, string>>(
34+
Object.assign(
35+
Object.keys(inputConfigs).map((key) => ({
36+
[key]: "",
37+
}))
38+
)
39+
);
40+
const [parsedConfigs, setParsedConfigs] = useState<
41+
undefined | Record<string, string>
42+
>({});
43+
const [error, setError] = useState<false | string>(false);
44+
45+
useEffect(() => {
46+
const parsed = parser(configs);
47+
if (parsed.error) {
48+
setError(parsed.message);
49+
setParsedConfigs(undefined);
50+
} else {
51+
setError(false);
52+
setParsedConfigs(parsed.data);
53+
}
54+
}, [configs]);
55+
56+
return (
57+
<div>
58+
<Head>
59+
<title>{title}</title>
60+
<meta name="description" content={description} />
61+
</Head>
62+
63+
<main
64+
css={css`
65+
${tw`flex flex-col min-height[calc(100vh - 3.5rem)]`}
66+
`}
67+
>
68+
<div css={tw`w-full md:px-8 p-16 h-48 text-center`}>
69+
<p css={tw`text-3xl font-bold`}>HelpChat</p>
70+
<p css={tw`text-lg`}>{title}</p>
71+
</div>
72+
<div
73+
css={tw`p-4 m-2 md:mx-6 lg:mx-12 bg-white/20 backdrop-blur-sm drop-shadow-lg rounded-lg`}
74+
>
75+
<div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full`}>
76+
<div
77+
css={css`
78+
height: calc(100vh - 18.5em);
79+
${tw`md:w-1/2 p-4 pt-1 md:pr-2 md:max-width[50vw] flex flex-col`}
80+
`}
81+
>
82+
{Object.keys(inputConfigs).map((key) => {
83+
const config = inputConfigs[key];
84+
return (
85+
<div
86+
key={key}
87+
css={css`
88+
${tw`h-full`};
89+
@media (min-width: 768px) {
90+
height: ${Math.floor(
91+
100 / Object.keys(inputConfigs).length
92+
)}%;
93+
}
94+
`}
95+
>
96+
<TextBox
97+
title={config.name}
98+
language={config.language}
99+
code={configs ? configs[key] ?? "" : ""}
100+
editor={(config: string) => {
101+
setConfigs({
102+
...configs,
103+
[key]: config,
104+
});
105+
}}
106+
/>
107+
</div>
108+
);
109+
})}
110+
</div>
111+
<div
112+
css={css`
113+
height: calc(100vh - 18.5em);
114+
${tw`md:w-1/2 p-4 pt-1 md:pr-2 md:max-width[50vw] flex flex-col`}
115+
`}
116+
>
117+
{error || !parsedConfigs ? (
118+
<div css={tw`flex flex-col h-full w-full pt-1`}>
119+
<div css={tw`flex flex-row md:pl-2`}>
120+
<p css={tw`text-xl font-semibold mx-auto mb-2`}>
121+
Validation Errors
122+
</p>
123+
</div>
124+
<div
125+
css={css`
126+
${tw`rounded-md overflow-auto h-full`} background-color: #2a2734
127+
`}
128+
>
129+
<div css={tw`py-2 px-4 text-base`}>
130+
<span
131+
css={css`
132+
${tw`text-base whitespace-pre`}
133+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
134+
`}
135+
>
136+
{error}
137+
</span>
138+
</div>
139+
</div>
140+
</div>
141+
) : (
142+
Object.keys(outputConfigs).map((key) => {
143+
const config = outputConfigs[key];
144+
return (
145+
<div
146+
key={key}
147+
css={css`
148+
${tw`h-full`};
149+
@media (min-width: 768px) {
150+
height: ${Math.floor(
151+
100 / Object.keys(outputConfigs).length
152+
)}%;
153+
}
154+
`}
155+
>
156+
<TextBox
157+
key={config.name}
158+
title={config.name}
159+
language={"yaml"}
160+
code={parsedConfigs ? parsedConfigs[key] ?? "" : ""}
161+
/>
162+
</div>
163+
);
164+
})
165+
)}
166+
</div>
167+
</div>
168+
</div>
169+
</main>
170+
</div>
171+
);
172+
};
173+
174+
export default Converter;

‎components/GlobalStyles.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { createGlobalStyle } from "styled-components";
2-
import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro";
3-
4-
const CustomStyles = createGlobalStyle({
5-
body: {
6-
WebkitTapHighlightColor: theme`colors.purple.500`,
7-
...tw`antialiased`,
8-
},
9-
});
2+
import tw, { GlobalStyles as BaseStyles } from "twin.macro";
103

4+
const CustomStyles = createGlobalStyle`
5+
body {
6+
${tw`antialiased`}
7+
}
8+
.svg-inline--fa {
9+
height: 1em;
10+
}
11+
`;
1112
const GlobalStyles = () => (
1213
<>
1314
<BaseStyles />

‎components/TextBox.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ export const TextBox = ({
2121
}: {
2222
title: string;
2323
code: string;
24-
editor?: Dispatch<SetStateAction<string>>;
24+
editor?: Dispatch<SetStateAction<string>> | ((config: string) => void);
2525
language: string;
2626
}) => {
2727
if (!editor) {
2828
return (
29-
<div css={tw`flex flex-col h-full w-full pt-1`}>
30-
<div css={tw`flex flex-row pl-2`}>
29+
<div css={tw`flex flex-col h-full w-full pt-1 text-white`}>
30+
<div css={tw`flex flex-row pl-8`}>
3131
<p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p>
32-
<div css={tw`flex flex-row h-8`}>
32+
<div css={tw`flex flex-row h-8 w-8`}>
3333
<div
3434
css={tw`py-1 px-2 bg-green-400 rounded-md hover:cursor-pointer`}
3535
onClick={() => {
@@ -51,7 +51,7 @@ export const TextBox = ({
5151
);
5252
} else {
5353
return (
54-
<div css={tw`flex flex-col h-full w-full pt-1`}>
54+
<div css={tw`flex flex-col h-full w-full pt-1 text-white`}>
5555
<p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p>
5656
<div
5757
css={css`

0 commit comments

Comments
 (0)