feat(docs): add interactivity to Builder, sync with command, add sonner toast

docs/components/builder-sections/ckan-extensions.tsx

@@ -0,0 +1,107 @@
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { SailboatIcon, TerminalSquareIcon } from "lucide-react";
+import { Config, selectedCardClasses } from "../builder";
+import { toast } from "sonner";
+
+const getExtensionClassName = (config: Config, extensionName: string) => {
+  return config.extensions.includes(extensionName) ? selectedCardClasses : "";
+};
+
+const updateExtensions = (
+  config: Config,
+  setConfig: any,
+  extensions: string[] | string,
+  mode?: "add" | "remove",
+) => {
+  const extensionsArray = Array.isArray(extensions) ? extensions : [extensions];
+  if (mode === "add") {
+    setConfig({
+      ...config,
+      extensions: [...new Set([...config.extensions, ...extensionsArray])],
+    });
+    return;
+  }
+  for (const extensionName of extensionsArray) {
+    if (config.extensions.includes(extensionName))
+      setConfig({
+        ...config,
+        extensions: config.extensions.filter(
+          (extension) => extension !== extensionName,
+        ),
+      });
+    else if (!config.extensions.includes(extensionName))
+      setConfig({
+        ...config,
+        extensions: [...config.extensions, extensionName],
+      });
+  }
+};
+
+export default function CKANExtensionsBuilderSection({
+  config,
+  setConfig,
+}: {
+  config: Config;
+  setConfig: any;
+}) {
+  const { Card, Cards } = defaultMdxComponents;
+
+  return (
+    <>
+      <h3>CKAN extensions</h3>
+      <Cards>
+        <Card
+          className={getExtensionClassName(config, "ckanext-scheming")}
+          icon={<TerminalSquareIcon />}
+          title="ckanext-scheming"
+          onClick={() => {
+            if (
+              config.extensions.includes("DataPusher+") &&
+              config.extensions.includes("ckanext-scheming")
+            ) {
+              toast.error(
+                "You cannot remove the ckanext-scheming extension because the DataPusher+ extension depends on it.",
+              );
+              return;
+            }
+            updateExtensions(config, setConfig, "ckanext-scheming");
+          }}
+        ></Card>
+        <Card
+          className={getExtensionClassName(config, "DataStore")}
+          icon={<TerminalSquareIcon />}
+          title="DataStore"
+          onClick={() => {
+            if (
+              config.extensions.includes("DataPusher+") &&
+              config.extensions.includes("DataStore")
+            ) {
+              toast.error(
+                "You cannot remove the DataStore extension because the DataPusher+ extension depends on it.",
+              );
+              return;
+            }
+            updateExtensions(config, setConfig, "DataStore");
+          }}
+        ></Card>
+        <Card
+          className={getExtensionClassName(config, "DataPusher+")}
+          icon={<TerminalSquareIcon />}
+          title="DataPusher+"
+          onClick={() => {
+            if (config.extensions.includes("DataPusher+")) {
+              updateExtensions(config, setConfig, "DataPusher+");
+            } else {
+              updateExtensions(
+                config,
+                setConfig,
+                ["DataPusher+", "ckanext-scheming", "DataStore"],
+                "add",
+              );
+            }
+          }}
+        ></Card>
+      </Cards>
+    </>
+  );
+}

docs/components/builder-sections/ckan-version.tsx

@@ -0,0 +1,39 @@
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { SailboatIcon } from "lucide-react";
+import { selectedCardClasses } from "../builder";
+
+export default function CKANVersionBuilderSection({ config, setConfig }: any) {
+  const { Card, Cards } = defaultMdxComponents;
+
+  return (
+    <>
+      <h3>CKAN version</h3>
+      <Cards>
+        <Card
+          icon={<SailboatIcon />}
+          title="2.11.3"
+          className={
+            config.ckanVersion === "2.11.3"
+              ? selectedCardClasses
+              : "cursor-pointer"
+          }
+          onClick={() => {
+            setConfig({ ...config, ckanVersion: "2.11.3" });
+          }}
+        ></Card>
+        <Card
+          icon={<SailboatIcon />}
+          title="2.10.8"
+          className={
+            config.ckanVersion === "2.10.8"
+              ? selectedCardClasses
+              : "cursor-pointer"
+          }
+          onClick={() => {
+            setConfig({ ...config, ckanVersion: "2.10.8" });
+          }}
+        ></Card>
+      </Cards>
+    </>
+  );
+}

docs/components/builder-sections/features.tsx

@@ -0,0 +1,48 @@
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { SailboatIcon, TerminalSquareIcon } from "lucide-react";
+import { Config, selectedCardClasses } from "../builder";
+
+const getFeatureClassName = (config: Config, featureName: string) => {
+  return config.features.includes(featureName) ? selectedCardClasses : "";
+};
+
+const updateFeatures = (
+  config: Config,
+  setConfig: any,
+  featureName: string,
+) => {
+  if (config.features.includes(featureName))
+    setConfig({
+      ...config,
+      features: config.features.filter((feature) => feature !== featureName),
+    });
+  else setConfig({ ...config, features: [...config.features, featureName] });
+};
+
+export default function FeaturesBuilderSection({
+  config,
+  setConfig,
+}: {
+  config: Config;
+  setConfig: any;
+}) {
+  const { Card, Cards } = defaultMdxComponents;
+
+  return (
+    <>
+      <h3>Features</h3>
+      <Cards>
+        <Card
+          className={getFeatureClassName(config, "enable-ssh")}
+          icon={<TerminalSquareIcon />}
+          title="Enable SSH"
+          onClick={() => {
+            updateFeatures(config, setConfig, "enable-ssh");
+          }}
+        >
+          Installs the openssh-server package.
+        </Card>
+      </Cards>
+    </>
+  );
+}

docs/components/builder-sections/presets.tsx

@@ -0,0 +1,63 @@
+import { Config, selectedCardClasses } from "../builder";
+import { BarChartBigIcon, SailboatIcon } from "lucide-react";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+
+export default function PresetsBuilderSection({
+  config,
+  setConfig,
+}: {
+  config: Config;
+  setConfig: any;
+}) {
+  const { Card, Cards } = defaultMdxComponents;
+
+  return (
+    <>
+      <h3>Presets</h3>
+      <Cards className="grid-cols-2">
+        <Card
+          className={
+            config.preset === "ckan-only" &&
+            config.extensions.length === 0 &&
+            config.features.length === 0
+              ? selectedCardClasses
+              : "cursor-pointer"
+          }
+          icon={<SailboatIcon />}
+          title="CKAN-only"
+          onClick={() => {
+            setConfig({
+              ...config,
+              preset: "ckan-only",
+              extensions: [],
+              features: [],
+            });
+          }}
+        >
+          Installs CKAN with ckan-compose. No CKAN extensions and extra features
+          are installed.
+        </Card>
+        <Card
+          className={
+            config.preset === "dathere-default"
+              ? selectedCardClasses
+              : "cursor-pointer"
+          }
+          icon={<BarChartBigIcon />}
+          title="datHere Default"
+          onClick={() => {
+            setConfig({
+              ...config,
+              preset: "dathere-default",
+              ckanVersion: "2.11.3",
+              extensions: ["ckanext-scheming", "DataStore", "DataPusher+"],
+              features: ["enable-ssh"],
+            });
+          }}
+        >
+          datHere's default preset featuring the DataPusher+ extension.
+        </Card>
+      </Cards>
+    </>
+  );
+}