upgrade vulcan

VulcanJS · Nov 26, 2021 · 8cd0446 · 8cd0446
1 parent a5d8101
commit 8cd0446
Show file tree

Hide file tree

Showing 4 changed files with 484 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "test:unit": "jest --testPathIgnorePatterns=tests/vn",
     "test:vn": "jest --testPathPattern=tests/vn # run tests for Vulcan Next itself, eg scripts (long) ",
     "test": "npm run test:unit && npm run test:e2e",
+    "upgrade:vulcan": "yarn upgrade --pattern '@vulcanjs/*'",
     "typecheck-watch": "tsc --noEmit --p src/tsconfig.json -w",
     "typecheck": "tsc --noEmit --p src/tsconfig.json # in case of error with @vulcanjs/* package, check that src/types (eg simpl-schema) are up-to-date with vulcan-npm",
     "update-link-vulcan": "yalc update"
@@ -73,7 +74,7 @@
     "@vulcanjs/meteor-legacy": "^0.4.0",
     "@vulcanjs/mongo": "^0.4.0",
     "@vulcanjs/react-hooks": "^0.4.0",
-    "@vulcanjs/react-ui": "^0.4.0",
+    "@vulcanjs/react-ui": "^0.4.2",
     "apollo-server-express": "2.14.2",
     "babel-jest": "26.0.1",
     "babel-plugin-istanbul": "6.0.0",

diff --git a/src/components/vn/learn/Steps.tsx b/src/components/vn/learn/Steps.tsx
@@ -1,4 +1,4 @@
-import { List, ListItem, ListItemButton, Typography } from "@mui/material";
+import { List, ListItem, Switch, FormControlLabel } from "@mui/material";
 import { ReactNode, useEffect, useState } from "react";
 import { useMulti } from "@vulcanjs/react-hooks";
 import { User } from "~/models/user";
@@ -78,26 +78,42 @@ const useCurrentStep = () => {
   return currentStep[1];
 };
 export const Steps = () => {
+  const [enableAllSteps, setEnableAllSteps] = useState(false);
   const maxStep = useMaxStep();
   const currentStep = useCurrentStep();
   // TODO: also associate a link to step
   // be careful with step 0, that happens online
   return (
-    <List>
-      {steps.map((step, stepIdx) => {
-        return (
-          <ListItem key={step.name}>
-            <NextMuiListItemButton
-              href={step.path}
-              disabled={stepIdx > maxStep}
-              selected={stepIdx === currentStep}
-            >
-              {step.name}
-            </NextMuiListItemButton>
-          </ListItem>
-        );
-      })}
-    </List>
+    <>
+      <div>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={enableAllSteps}
+              onChange={(evt) => {
+                setEnableAllSteps(evt.target.checked);
+              }}
+            />
+          }
+          label={enableAllSteps ? "Stop cheating :)" : "Enable all steps"}
+        />
+      </div>
+      <List>
+        {steps.map((step, stepIdx) => {
+          return (
+            <ListItem key={step.name}>
+              <NextMuiListItemButton
+                href={step.path}
+                disabled={stepIdx > maxStep}
+                selected={stepIdx === currentStep}
+              >
+                {step.name}
+              </NextMuiListItemButton>
+            </ListItem>
+          );
+        })}
+      </List>
+    </>
   );
 };
 

diff --git a/src/pages/docs/[[...filePath]].tsx b/src/pages/docs/[[...filePath]].tsx
@@ -67,64 +67,74 @@ interface PageArguments {
   filePath: string;
   source: MDXRemoteSerializeResult;
 }
+
+const MarkdownPage = ({ source, filePath }) => (
+  <div className="MDXProvider root">
+    {header}
+    <PreviousPageLink filePath={filePath} />
+    {indexLink}
+    <hr style={{ margin: "32px auto" }}></hr>
+    <MDXRemote {...source} components={components} />
+    <hr style={{ margin: "32px auto" }}></hr>
+    <PreviousPageLink filePath={filePath} />
+    {indexLink}
+    <style jsx>{`
+      .MDXProvider.root {
+        margin: 32px auto;
+        max-width: 1000px;
+      }
+    `}</style>
+  </div>
+);
+
+const FolderTableOfContent = ({
+  filePath,
+  pages,
+}: {
+  filePath: string;
+  pages: Array<string>;
+}) => (
+  <div style={{ margin: "32px auto", maxWidth: "1000px" }}>
+    {header}
+    <Typography
+      style={{ margin: "32px auto", textTransform: "capitalize" }}
+      variant="h2"
+    >
+      {" "}
+      {filePath.slice(0, -1)}{" "}
+    </Typography>{" "}
+    {/* Print the subfolders we're in */}
+    <List>
+      {pages.map((pageName) => (
+        <NextLink key={pageName} href={`/docs/${filePath}${pageName}`}>
+          <ListItem button key={pageName}>
+            <Typography style={{ textTransform: "capitalize" }}>
+              {
+                pageName.replace(
+                  /-/g,
+                  " "
+                ) /* we don't use the front matter of the file at this point to simplify loading, so we have to cleanup the name manually */
+              }
+            </Typography>
+          </ListItem>
+        </NextLink>
+      ))}
+      <hr></hr>
+      <PreviousPageLink filePath={filePath} />
+      {filePath ===
+      "" /* Back home if we're in /docs, back to /docs if we're in a subfolder */
+        ? homeLink
+        : indexLink}
+    </List>
+  </div>
+);
 export default function DocPage({ pages, filePath, source }: PageArguments) {
   if (source) {
     // It's a file, not a folder
-    return (
-      <div className="MDXProvider root">
-        {header}
-        <PreviousPageLink filePath={filePath} />
-        {indexLink}
-        <hr style={{ margin: "32px auto" }}></hr>
-        <MDXRemote {...source} components={components} />
-        <hr style={{ margin: "32px auto" }}></hr>
-        <PreviousPageLink filePath={filePath} />
-        {indexLink}
-        <style jsx>{`
-          .MDXProvider.root {
-            margin: 32px auto;
-            max-width: 1000px;
-          }
-        `}</style>
-      </div>
-    );
+    return <MarkdownPage source={source} filePath={filePath} />;
   } else {
     // It's a folder
-    return (
-      <div style={{ margin: "32px auto", maxWidth: "1000px" }}>
-        {header}
-        <Typography
-          style={{ margin: "32px auto", textTransform: "capitalize" }}
-          variant="h2"
-        >
-          {" "}
-          {filePath.slice(0, -1)}{" "}
-        </Typography>{" "}
-        {/* Print the subfolders we're in */}
-        <List>
-          {pages.map((pageName) => (
-            <NextLink key={pageName} href={`/docs/${filePath}${pageName}`}>
-              <ListItem button key={pageName}>
-                <Typography style={{ textTransform: "capitalize" }}>
-                  {
-                    pageName.replace(
-                      /-/g,
-                      " "
-                    ) /* we don't use the front matter of the file at this point to simplify loading, so we have to cleanup the name manually */
-                  }
-                </Typography>
-              </ListItem>
-            </NextLink>
-          ))}
-          <hr></hr>
-          <PreviousPageLink filePath={filePath} />
-          {filePath ===
-          "" /* Back home if we're in /docs, back to /docs if we're in a subfolder */
-            ? homeLink
-            : indexLink}
-        </List>
-      </div>
-    );
+    return <FolderTableOfContent filePath={filePath} pages={pages} />;
   }
 }