plugin system for sidebar panels

Author: loiswells97

src/components/Editor/Project/Project.jsx

@@ -22,6 +22,7 @@ const Project = (props) => {
     withProjectbar = true,
     withSidebar = true,
     sidebarOptions = [],
+    plugins = [],
   } = props;
   const saving = useSelector((state) => state.editor.saving);
   const autosave = useSelector((state) => state.editor.lastSaveAutosave);
@@ -59,7 +60,7 @@ const Project = (props) => {
           "proj-container--wc": webComponent,
         })}
       >
-        {withSidebar && <Sidebar options={sidebarOptions} />}
+        {withSidebar && <Sidebar options={sidebarOptions} plugins={plugins} />}
         <div className="project-wrapper" ref={containerRef}>
           {withProjectbar && <ProjectBar nameEditable={nameEditable} />}
           {!loading && (

src/components/Menus/Sidebar/Sidebar.jsx

@@ -23,8 +23,9 @@ import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
 import FileIcon from "../../../utils/FileIcon";
 import DownloadPanel from "./DownloadPanel/DownloadPanel";
 import InstructionsPanel from "./InstructionsPanel/InstructionsPanel";
+import SidebarPanel from "./SidebarPanel";
 
-const Sidebar = ({ options = [] }) => {
+const Sidebar = ({ options = [], plugins = [] }) => {
   const { t } = useTranslation();
 
   let menuOptions = [
@@ -79,6 +80,22 @@ const Sidebar = ({ options = [] }) => {
     },
   ].filter((option) => options.includes(option.name));
 
+  let pluginMenuOptions = plugins.map((plugin) => {
+    return {
+      name: plugin.name,
+      icon: plugin.icon,
+      title: plugin.title,
+      position: plugin.position || "top",
+      panel: () => (
+        <SidebarPanel heading={plugin.heading} Button={plugin.button}>
+          {plugin.panel()}
+        </SidebarPanel>
+      ),
+    };
+  });
+
+  menuOptions = [...menuOptions, ...pluginMenuOptions];
+
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const projectImages = useSelector((state) => state.editor.project.image_list);
   const instructionsSteps = useSelector(
@@ -103,17 +120,23 @@ const Sidebar = ({ options = [] }) => {
     removeOption("instructions", instructionsSteps);
   }
 
+  const autoOpenPlugin = plugins?.find((plugin) => plugin.autoOpen);
+
   const [option, setOption] = useState(
-    instructionsEditable || instructionsSteps ? "instructions" : "file",
+    autoOpenPlugin
+      ? autoOpenPlugin.name
+      : instructionsEditable || instructionsSteps
+      ? "instructions"
+      : "file",
   );
 
   const hasInstructions = instructionsSteps && instructionsSteps.length > 0;
 
   useEffect(() => {
-    if (instructionsEditable || hasInstructions) {
+    if (!autoOpenPlugin && (instructionsEditable || hasInstructions)) {
       setOption("instructions");
     }
-  }, [instructionsEditable, hasInstructions]);
+  }, [autoOpenPlugin, instructionsEditable, hasInstructions]);
 
   const toggleOption = (newOption) => {
     if (option !== newOption) {

src/components/Mobile/MobileProject/MobileProject.jsx

@@ -14,7 +14,7 @@ import { useTranslation } from "react-i18next";
 import Sidebar from "../../Menus/Sidebar/Sidebar";
 import { showSidebar } from "../../../redux/EditorSlice";
 
-const MobileProject = ({ withSidebar, sidebarOptions = [] }) => {
+const MobileProject = ({ withSidebar, sidebarOptions = [], plugins = [] }) => {
   const projectType = useSelector((state) => state.editor.project.project_type);
   const sidebarShowing = useSelector((state) => state.editor.sidebarShowing);
   const codeRunTriggered = useSelector(
@@ -48,7 +48,7 @@ const MobileProject = ({ withSidebar, sidebarOptions = [] }) => {
       >
         {withSidebar && (
           <TabPanel>
-            <Sidebar options={sidebarOptions} />
+            <Sidebar options={sidebarOptions} plugins={plugins} />
           </TabPanel>
         )}
         <TabPanel>

src/components/WebComponentProject/WebComponentProject.jsx

@@ -35,6 +35,7 @@ const WebComponentProject = ({
   outputOnly = false,
   outputPanels = ["text", "visual"],
   outputSplitView = false,
+  plugins = [],
 }) => {
   const loading = useSelector((state) => state.editor.loading);
   const project = useSelector((state) => state.editor.project);
@@ -145,13 +146,15 @@ const WebComponentProject = ({
               <MobileProject
                 withSidebar={withSidebar}
                 sidebarOptions={sidebarOptions}
+                plugins={plugins}
               />
             ) : (
               <Project
                 nameEditable={nameEditable}
                 withProjectbar={withProjectbar}
                 withSidebar={withSidebar}
                 sidebarOptions={sidebarOptions}
+                plugins={plugins}
               />
             ))}
           {outputOnly && (

src/containers/WebComponentLoader.jsx

@@ -47,6 +47,7 @@ const WebComponentLoader = (props) => {
     outputOnly = false,
     outputPanels = ["text", "visual"],
     outputSplitView = false,
+    plugins = [],
     projectNameEditable = false,
     reactAppApiEndpoint = process.env.REACT_APP_API_ENDPOINT,
     readOnly = false,
@@ -227,6 +228,7 @@ const WebComponentLoader = (props) => {
               outputPanels={outputPanels}
               outputSplitView={outputSplitView}
               editableInstructions={editableInstructions}
+              plugins={plugins}
             />
             {errorModalShowing && <ErrorModal />}
             {newFileModalShowing && <NewFileModal />}

src/web-component.js

@@ -27,6 +27,7 @@ class WebComponent extends HTMLElement {
   mountPoint;
   componentAttributes = {};
   componentProperties = {};
+  plugins = [];
 
   connectedCallback() {
     if (!this.shadowRoot) {
@@ -112,6 +113,11 @@ class WebComponent extends HTMLElement {
     this.mountReactApp();
   }
 
+  setPlugins(plugins) {
+    this.plugins = plugins;
+    this.mountReactApp();
+  }
+
   get editorCode() {
     const state = store.getState();
     return state.editor.project.components[0]?.content;
@@ -177,7 +183,7 @@ class WebComponent extends HTMLElement {
       <React.StrictMode>
         <Provider store={store}>
           <BrowserRouter>
-            <WebComponentLoader {...this.reactProps()} />
+            <WebComponentLoader plugins={this.plugins} {...this.reactProps()} />
           </BrowserRouter>
         </Provider>
       </React.StrictMode>,