Merge pull request #5 from NEARBuilders/modal

Modal

README.md

@@ -4,15 +4,15 @@ Starter Kit for Builders
 
 ## Getting Started 
 
-To run locally, make sure you have [bos-workspace](https://github.com/sekaiking/bos-workspace) installed.
+To run locally, first install.
 
 Then, run the command:
 
 ```bash
-bw dev
+yarn dev
 ```
 
-This will serve the widgets from `http://127.0.0.1:4040/`.
+This will serve the widgets from `http://127.0.0.1:4040/api/loader`. (or 8080)
 
 Go to [everything.dev/flags](https://everything.dev) and paste this value there.
 
@@ -24,4 +24,3 @@ Once set, see the locally served app at [create.near/widget/app](https://everyth
 Clone the repository, make some changes, open issues, and submit pull requests.
 
 Updates to this repository's main branch automatically deploy to the create.near workspace.
-

apps/editor/widget/app.jsx

@@ -1,6 +1,3 @@
-const { createFunctionCallProposal } =
-  VM.require("/*__@appAccount__*//widget/adapter.sputnik-dao") || (() => {});
-
 const Container = styled.div`
   display: flex;
   height: 100vh;
@@ -57,6 +54,10 @@ const adapters = [
   },
 ];
 
+// const { Modal } = VM.require("buildhub.near/widget/components.Modal") || {
+//   Modal: () => <>hello</>,
+// };
+
 function PanelHeader({
   types,
   handleTypeChange,
@@ -73,16 +74,21 @@ function PanelHeader({
             types.map((it) => <Option value={it.value}>{it.label}</Option>)}
         </Select>
       </div>
-      <div>
+      <Widget
+        src="devs.near/widget/hyperfile"
+        props={{ path: props.path, data: value }}
+      />
+      {/* <div>
         <Label>adapter:</Label>
         <Select onChange={(e) => handleAdapterChange(e.target.value)}>
           {adapters &&
             adapters.map((it) => <Option value={it.value}>{it.label}</Option>)}
         </Select>
-        <Button disabled={!value} onClick={() => adapter.create(value)}>
+
+        <Button disabled={!value} onClick={(v) => adapter.create(v)}>
           Publish
         </Button>
-      </div>
+      </div> */}
     </Header>
   );
 }
@@ -105,6 +111,14 @@ const socialDbAdapter = {
   },
   create: (v) => {
     const id = "routes";
+    const parts = path.split("/");
+    Social.set({
+      [parts[1]]: {
+        [parts[2]]: {
+          "": code,
+        },
+      },
+    });
     return Social.set(
       {
         thing: {
@@ -191,6 +205,8 @@ return (
         handleTypeChange={handleTypeChange}
         handleAdapterChange={handleAdapterChange}
         adapter={adapter}
+        isModalOpen={isModalOpen}
+        setModalOpen={setModalOpen}
       />
       <div>
         <ul className="nav nav-tabs">

apps/editor/widget/code/edit.jsx

@@ -33,17 +33,6 @@ useEffect(() => {
   onChange && onChange(code);
 }, [code]);
 
-function onCreate() {
-  const parts = path.split("/");
-  Social.set({
-    [parts[1]]: {
-      [parts[2]]: {
-        "": code,
-      },
-    },
-  });
-}
-
 return (
   <Container>
     <EditorContainer>

apps/editor/widget/hyperfile.jsx

@@ -0,0 +1,120 @@
+/**
+ * Modal can be moved to its own module
+ */
+const ModalBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+`;
+
+const ModalBox = styled.div`
+  background-color: white;
+  min-width: 400px;
+  max-width: 600px;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  z-index: 1003;
+`;
+
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: end;
+  align-items: center;
+`;
+
+const CloseButton = styled.button`
+  background: #f44336;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 15px;
+  cursor: pointer;
+  float: right;
+`;
+
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  padding: 10px;
+`;
+
+function Modal({ onClose, children }) {
+  return (
+    <ModalBackdrop>
+      <ModalBox>
+        <ModalHeader>
+          <CloseButton onClick={onClose}>Close</CloseButton>
+        </ModalHeader>
+        <ModalContent>{children}</ModalContent>
+      </ModalBox>
+    </ModalBackdrop>
+  );
+}
+
+const [isModalOpen, setModalOpen] = useState(props.isModalOpen);
+
+const toggleModal = (pluginId) => {
+  setModalOpen(!isModalOpen);
+};
+
+const Button = styled.button`
+  // this could take in theme
+  padding: 10px 20px;
+`;
+
+const { path, data, type } = props;
+
+const parts = path.split("/");
+const creatorId = parts[0];
+
+return (
+  <>
+    <Widget
+      src="nui.sking.near/widget/Layout.Modal"
+      props={{
+        open: state.filtersOpen,
+        onOpenChange: (open) => {
+          State.update({
+            ...state,
+            filtersOpen: open,
+          });
+        },
+        toggle: (
+          <Button className="classic" onClick={() => toggleModal()}>
+            <>
+              <i className={"bi bi-save"} />
+              save
+            </>
+          </Button>
+        ),
+        content: (
+          <div className="w-100">
+            <ModalBox>
+              <Widget
+                src={"devs.near/widget/hyperfile.create"}
+                props={{
+                  // Prop hydration (?)
+                  creatorId: creatorId, // requester?
+                  type: type,
+                  filename: "main",
+                  path: path,
+                  data: data, // vs dynamic
+                  // loadSnapshot: loadSnapshot
+                }}
+              />
+            </ModalBox>
+          </div>
+        ),
+      }}
+    />
+  </>
+);