Add PackageUpload component

Also add Markdown, FileUpload and StickyFooter

.eslintrc.json

@@ -26,6 +26,7 @@
     "plugin:prettier/recommended"
   ],
   "rules": {
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off"
   }
 }

thunderstore-components/package.json

@@ -13,8 +13,17 @@
     "@chakra-ui/react": "^1.3.3",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "adm-zip": "^0.5.3",
+    "chakra-ui-markdown-renderer": "^1.1.0",
     "framer-motion": "^3.7.0",
-    "react-hook-form": "^6.15.4"
+    "jszip": "^3.6.0",
+    "react-hook-form": "^6.15.4",
+    "react-markdown": "^5.0.3",
+    "remark-gfm": "^1.0.0",
+    "slate": "^0.59.0",
+    "slate-react": "^0.59.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/adm-zip": "^0.4.33"
+  }
 }

thunderstore-components/src/components/FileUpload.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const FileUpload: React.FC<React.HTMLAttributes<HTMLInputElement>> = ({
+  ...props
+}) => {
+  return <input type="file" name="file" {...props} />;
+};

thunderstore-components/src/components/Markdown.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+import ChakraUIRenderer from "chakra-ui-markdown-renderer";
+
+interface MarkdownProps {
+  children: string;
+}
+
+export const Markdown: React.FC<MarkdownProps> = ({ children }) => {
+  return (
+    <ReactMarkdown plugins={[gfm]} renderers={ChakraUIRenderer()}>
+      {children}
+    </ReactMarkdown>
+  );
+};

thunderstore-components/src/components/PackageUpload.tsx

@@ -1,7 +1,142 @@
-import React from "react";
+import {
+  Box,
+  Button,
+  Center,
+  CloseButton,
+  Heading,
+  Select,
+  Slide,
+  Text,
+  useColorModeValue,
+  useToast,
+} from "@chakra-ui/react";
+import JSZip from "jszip";
+import React, { useEffect, useState } from "react";
+import { FileUpload } from "./FileUpload";
+import { Markdown } from "./Markdown";
+import { StickyFooter } from "./StickyFooter";
 
-interface PackageUploadProps {}
+export const PackageUpload: React.FC<never> = () => {
+  const [file, setFile] = useState<File | null>(null);
+  const [zip, setZip] = useState<JSZip | null>(null);
+  const [readmeContent, setReadmeContent] = useState<string | null>(null);
+  const [isOnSubmitForm, setIsOnSubmitForm] = useState(false);
+  // const [isSubmitting, setIsSubmitting] = useState(false);
+  const toast = useToast();
+  const bg = useColorModeValue("white", "gray");
 
-export const PackageUpload: React.FC<PackageUploadProps> = ({}) => {
-  return <div>Hello, World!</div>;
+  useEffect(() => {
+    onUpload();
+  }, [file]);
+
+  useEffect(() => {
+    onZip();
+  }, [zip]);
+
+  const reset = () => {
+    setFile(null);
+    setZip(null);
+  };
+
+  const onUpload = async () => {
+    if (file === null) {
+      return;
+    }
+    const zip = new JSZip();
+    await zip.loadAsync(file);
+    setZip(zip);
+  };
+
+  const onZip = async () => {
+    if (zip === null) {
+      return;
+    }
+    console.log(zip);
+    console.log(await zip.file("manifest.json")?.async("string"));
+    const errors: string[] = [];
+    ["manifest.json", "README.md", "icon.png"].forEach((fileName) => {
+      if (zip.files[fileName] === undefined) {
+        errors.push(`Missing ${fileName}`);
+      }
+    });
+    if (errors.length > 0) {
+      errors.map((error) => {
+        toast({
+          title: "Invalid mod zip",
+          description: error,
+          status: "error",
+          isClosable: true,
+        });
+      });
+      reset();
+      return;
+    }
+    const readmeContent = await zip.file("README.md")?.async("string");
+    if (!readmeContent) {
+      toast({
+        title: "Invalid mod zip",
+        description: "Invalid README.md",
+        status: "error",
+        isClosable: true,
+      });
+      reset();
+      return;
+    }
+    setReadmeContent(readmeContent);
+  };
+
+  if (!file) {
+    // First state, has not selected a file
+    return (
+      <FileUpload
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          if (!event.target.files) {
+            return;
+          }
+          setFile(event.target.files[0]);
+        }}
+      />
+    );
+  } else if (!zip) {
+    // Second state, has selected a file but it has not been decompressed
+    return <Text>Decompressing...</Text>;
+  } else if (readmeContent !== null) {
+    // Third state, the file has been validated and decompressed
+    return (
+      <>
+        <Heading>Markdown Preview</Heading>
+        <Box borderWidth="1px" borderRadius="lg" m={1} p={2}>
+          <Markdown>{readmeContent}</Markdown>
+        </Box>
+        <Slide direction="bottom" in={isOnSubmitForm} style={{ zIndex: 10 }}>
+          <Box bg={bg} p={1}>
+            <CloseButton
+              float="right"
+              mb={1}
+              onClick={() => setIsOnSubmitForm(false)}
+            />
+            <Text>Team</Text>
+            <Select>
+              <option value="Team1">Team1</option>
+              <option value="Team2">Team2</option>
+              <option value="Team3">Team3</option>
+            </Select>
+            <Text>Categories</Text>
+            <Select>
+              <option value="category-slug-1">Category name 1</option>
+              <option value="category-slug-2">Category name 2</option>
+              <option value="category-slug-3">Category name 3</option>
+            </Select>
+          </Box>
+        </Slide>
+        <StickyFooter>
+          <Center>
+            <Button onClick={() => setIsOnSubmitForm(true)}>Upload</Button>
+          </Center>
+        </StickyFooter>
+      </>
+    );
+  } else {
+    return <Text>Loading...</Text>;
+  }
 };

thunderstore-components/src/components/StickyFooter.tsx

@@ -0,0 +1,17 @@
+import { Box, useColorModeValue } from "@chakra-ui/react";
+import {} from "@chakra-ui/theme";
+import React from "react";
+
+interface StickyFooterProps {
+  children: React.ReactNode;
+}
+
+export const StickyFooter: React.FC<StickyFooterProps> = ({ children }) => {
+  const bg = useColorModeValue("white", "gray");
+
+  return (
+    <Box position="sticky" bottom={0} p={4} bg={bg}>
+      {children}
+    </Box>
+  );
+};

thunderstore-components/src/index.ts

@@ -1,2 +1,5 @@
 export { theme } from "./theme";
-export { PackageUpload } from "./components/PackageUpload";
+export * from "./components/FileUpload";
+export * from "./components/Markdown";
+export * from "./components/PackageUpload";
+export * from "./components/StickyFooter";