wao 0.41.3 → 0.41.5

package/app/components/middle/MiddleTests.js

@@ -0,0 +1,134 @@
+import { Icon, Box, Flex } from "@chakra-ui/react"
+import { addIndex, includes, map } from "ramda"
+import { dayjs } from "/lib/utils"
+import g from "/lib/global"
+import use from "/lib/use"
+import { FaX, FaCheck } from "react-icons/fa6"
+
+export default function Middle() {
+  const [test, setTest] = use("test")
+  const [init, setInit] = use("init")
+  const [tab, setTab] = use("tab")
+  return (
+    <Flex w="100%">
+      {!test ? null : (
+        <Box
+          px={4}
+          py={2}
+          fontSize="11px"
+          flex={1}
+          h="calc(100vh - 110px)"
+          css={{ overflowY: "auto" }}
+        >
+          <Flex my={2} fontWeight="bold" color="#5137C5">
+            Stats
+          </Flex>
+          {map(v => {
+            if (includes(v.name, ["signature", "signature-input"])) {
+              return null
+            }
+            return (
+              <Flex my={2} align="center">
+                <Box
+                  w="130px"
+                  color="white"
+                  bg="#5137C5"
+                  px={2}
+                  mr={4}
+                  css={{ borderRadius: "3px" }}
+                >
+                  {v.name}
+                </Box>
+                <Box
+                  flex={1}
+                  css={{ wordBreak: "break-all", whiteSpace: "wrap" }}
+                >
+                  {v.value}
+                </Box>
+              </Flex>
+            )
+          })([
+            { name: "Main Process", value: test.process },
+            { name: "Test File", value: test.file },
+            { name: "Duration", value: `${test.duration} ms` },
+            { name: "Success", value: `${test.success}` },
+            { name: "Fail", value: `${test.fail}` },
+            { name: "Date", value: dayjs(test.date).fromNow() },
+          ])}
+          <Flex mt={4} fontWeight="bold" color="#5137C5">
+            Results
+          </Flex>
+
+          {addIndex(map)((v, i) => {
+            return (
+              <>
+                <Flex
+                  mt={4}
+                  fontSize="12px"
+                  p={1}
+                  mb={2}
+                  bg={v.fail === 0 ? "#4e9a06" : "#cc0000"}
+                  color="#ddd"
+                  css={{ borderRadius: "3px" }}
+                >
+                  <Flex px={2} align="center" w="100%">
+                    <Box mr={3}>{i + 1}</Box>
+                    <Box>{v.description}</Box>
+                    <Box flex={1} />
+                    <Flex mr={4}>
+                      <Icon size="sm" mr={2}>
+                        <FaCheck />
+                      </Icon>
+                      {v.success}
+                    </Flex>
+                    <Flex>
+                      <Icon size="sm" mr={2}>
+                        <FaX />
+                      </Icon>
+                      {v.fail}
+                    </Flex>
+                  </Flex>
+                </Flex>
+                {addIndex(map)((v2, i2) => {
+                  return (
+                    <Flex
+                      fontSize="11px"
+                      ml={10}
+                      p={1}
+                      mb={2}
+                      color="#eee"
+                      css={{
+                        borderRadius: "3px",
+                      }}
+                      bg={v2.success ? "#4e9a06" : "#cc0000"}
+                      direction="column"
+                    >
+                      <Flex>
+                        <Flex px={2} align="center" w="100%">
+                          <Box mr={3}>
+                            <Icon size="sm">
+                              {v2.success ? <FaCheck /> : <FaX />}
+                            </Icon>
+                          </Box>
+                          <Box>{v2.description}</Box>
+                          <Box flex={1} />
+                          <Box>{v2.duration} ms</Box>
+                        </Flex>
+                      </Flex>
+
+                      {v2.error ? (
+                        <Flex mt={1} pl={9} fontSize="10px">
+                          {v2.error}
+                        </Flex>
+                      ) : null}
+                    </Flex>
+                  )
+                })(v.cases)}
+              </>
+            )
+          })(test.tests)}
+        </Box>
+      )}
+    </Flex>
+  )
+}

package/app/components/modals/CreateFileModal.js

@@ -0,0 +1,115 @@
+import { Input, NativeSelect, Box, Flex } from "@chakra-ui/react"
+import Modal from "/components/modals/Modal"
+import use from "/lib/use"
+import { useState } from "react"
+import g from "/lib/global"
+import { generateId, filterFiles } from "/lib/utils"
+import { src_data_js, src_data_lua } from "/lib/scripts"
+import { append } from "ramda"
+import lf from "localforage"
+
+export default function CreateFileModal() {
+  const [modal, setModal] = use("modal")
+  const [filename, setFilename] = useState("")
+  const [fileext, setFileext] = useState("js")
+  const [files, setFiles] = use("files")
+  const [file, setFile] = use("file")
+  const [openFiles, setOpenFiles] = use("openFiles")
+  const [preview, setPreview] = use("preview")
+  const [selDir, setSelDir] = use("selDir")
+  return (
+    <Modal {...{ modal, setModal }}>
+      <Box p={6}>
+        <Box color="#5137C5" fontWeight="bold" mb={4} fontSize="20px">
+          Create New File
+        </Box>
+        <Box fontSize="12px" color="#666" mb={2}>
+          File Name
+        </Box>
+        <Flex align="flex-end">
+          <Input
+            flex={1}
+            value={filename}
+            onChange={e => setFilename(e.target.value)}
+          />
+          <Box mx={2}>.</Box>
+          <NativeSelect.Root w="80px">
+            <NativeSelect.Field
+              value={fileext}
+              onChange={e => setFileext(e.target.value)}
+            >
+              <option value="lua">lua</option>
+              <option value="js">js</option>
+              <option value="json">json</option>
+              <option value="md">md</option>
+            </NativeSelect.Field>
+            <NativeSelect.Indicator />
+          </NativeSelect.Root>
+        </Flex>
+        <Box fontSize="12px" color="#666" mb={2} mt={4}>
+          Location
+        </Box>
+        <Box fontSize="12px" mb={6}>
+          {g.getDirs()}
+        </Box>
+        <Flex
+          align="center"
+          justify="center"
+          mt={4}
+          p={1}
+          mb={1}
+          color="#5137C5"
+          css={{
+            borderRadius: "3px",
+            border: "1px solid #5137C5",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+          onClick={async () => {
+            if (/^\s*$/.test(filename)) return alert("Enter a filename.")
+            const id = generateId()
+            const name = `${filename}.${fileext}`
+            for (let f of files) {
+              if (
+                f.pid === selDir.pid &&
+                f.name === name &&
+                f.path === selDir.path
+              ) {
+                alert("File already exists!")
+                return
+              }
+            }
+            const _file = {
+              name,
+              update: Date.now(),
+              id,
+              ext: fileext,
+              pid: selDir.pid,
+              path: selDir.path,
+            }
+            const txt =
+              fileext === "js"
+                ? src_data_js
+                : fileext === "lua"
+                  ? src_data_lua
+                  : ""
+            const _files = append(_file, files)
+            await lf.setItem("files", filterFiles(_files))
+            await lf.setItem(`file-${id}`, txt)
+            setFiles(_files)
+            setOpenFiles([...openFiles, _file])
+            setFile(_file)
+            setPreview(false)
+            g.setType(fileext)
+            // todo: handle this better
+            setTimeout(() => g.editorRef.current.setValue(txt), 100)
+            setModal(false)
+            setFilename("")
+          }}
+        >
+          Create
+        </Flex>
+      </Box>
+    </Modal>
+  )
+}

package/app/components/modals/CreateFolderModal.js

@@ -0,0 +1,83 @@
+import { Input, Box, Flex } from "@chakra-ui/react"
+import lf from "localforage"
+import Modal from "/components/modals/Modal"
+import use from "/lib/use"
+import { useState } from "react"
+import { generateId, filterFiles } from "/lib/utils"
+import { append } from "ramda"
+import g from "/lib/global"
+
+export default function CreateProjectModal() {
+  const [modal4, setModal4] = use("modal4")
+  const [dirname, setDirname] = useState("")
+  const [selDir, setSelDir] = use("selDir")
+  const [files, setFiles] = use("files")
+  return (
+    <Modal {...{ modal: modal4, setModal: setModal4 }}>
+      {" "}
+      <Box p={6}>
+        <Box color="#5137C5" fontWeight="bold" mb={4} fontSize="20px">
+          Create New Folder
+        </Box>
+        <Box fontSize="12px" color="#666" mb={2}>
+          Folder Name
+        </Box>
+        <Flex align="flex-end">
+          <Input
+            flex={1}
+            value={dirname}
+            onChange={e => setDirname(e.target.value)}
+          />
+        </Flex>
+        <Box fontSize="12px" color="#666" mb={2} mt={4}>
+          Location
+        </Box>
+        <Box fontSize="12px" mb={6}>
+          {g.getDirs()}
+        </Box>
+        <Flex
+          align="center"
+          justify="center"
+          p={1}
+          mb={1}
+          color="#5137C5"
+          css={{
+            borderRadius: "3px",
+            border: "1px solid #5137C5",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+          onClick={async () => {
+            if (/^\s*$/.test(dirname)) return alert("Enter a folder name.")
+            const id = generateId()
+            for (let f of files) {
+              if (
+                f.pid === selDir.pid &&
+                f.name === dirname &&
+                f.path === selDir.path
+              ) {
+                alert("Directory already exists!")
+                return
+              }
+            }
+            const _file = {
+              name: `${dirname}`,
+              update: Date.now(),
+              id,
+              pid: selDir.pid,
+              dir: true,
+              path: selDir.path,
+            }
+            const _files = append(_file, files)
+            await lf.setItem("files", filterFiles(_files))
+            setFiles(_files)
+            setModal4(false)
+            setDirname("")
+          }}
+        >
+          Create
+        </Flex>
+      </Box>
+    </Modal>
+  )
+}

package/app/components/modals/CreateProjectModal.js

@@ -0,0 +1,63 @@
+import { Input, Box, Flex } from "@chakra-ui/react"
+import lf from "localforage"
+import Modal from "/components/modals/Modal"
+import use from "/lib/use"
+import { useState } from "react"
+import { generateId, filterProjects } from "/lib/utils"
+import { append } from "ramda"
+
+export default function CreateProjectModal() {
+  const [projects, setProjects] = use("projects")
+  const [modal3, setModal3] = use("modal3")
+  const [projectname, setProjectname] = useState("")
+  return (
+    <Modal {...{ modal: modal3, setModal: setModal3 }}>
+      <Box p={6}>
+        <Box color="#5137C5" fontWeight="bold" mb={4} fontSize="20px">
+          Create New Project
+        </Box>
+        <Box fontSize="12px" color="#666" mb={2}>
+          Project Name
+        </Box>
+        <Flex align="flex-end">
+          <Input
+            flex={1}
+            value={projectname}
+            onChange={e => setProjectname(e.target.value)}
+          />
+        </Flex>
+        <Flex
+          align="center"
+          justify="center"
+          mt={4}
+          p={1}
+          mb={1}
+          color="#5137C5"
+          css={{
+            borderRadius: "3px",
+            border: "1px solid #5137C5",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+          onClick={async () => {
+            if (/^\s*$/.test(projectname)) return alert("Enter a project name.")
+            const id = generateId()
+            const _pr = {
+              name: projectname,
+              created: Date.now(),
+              id,
+              open: true,
+            }
+            const _prs = append(_pr, projects)
+            await lf.setItem("projects", filterProjects(_prs))
+            setProjects(_prs)
+            setProjectname("")
+            setModal3(false)
+          }}
+        >
+          Create
+        </Flex>
+      </Box>
+    </Modal>
+  )
+}

package/app/components/modals/FSModal.js

@@ -0,0 +1,141 @@
+import { Input, NativeSelect, Box, Flex } from "@chakra-ui/react"
+import Modal from "/components/modals/Modal"
+import use from "/lib/use"
+import { useState } from "react"
+import g from "/lib/global"
+import { generateId, filterFiles } from "/lib/utils"
+import { src_data_js, src_data_lua } from "/lib/scripts"
+import { hb_url } from "/lib/data"
+import { append, indexBy, prop } from "ramda"
+import lf from "localforage"
+import { Adaptor } from "wao/web"
+import { DataItem } from "arbundles"
+import Hub from "/lib/hub"
+import { tags } from "/lib/utils"
+import { toaster } from "@/components/ui/toaster"
+import md5 from "md5"
+
+export default function FSModal() {
+  const [modal6, setModal6] = use("modal6")
+  const [port, setPort] = useState("4006")
+  const [wsid, setWSID] = use("wsid")
+  const [localFS, setLocalFS] = use("localFS")
+  const [fsPort, setFSPort] = use("fsPort")
+
+  return (
+    <Modal {...{ modal: modal6, setModal: setModal6 }}>
+      <Box p={6}>
+        <Box color="#5137C5" fontWeight="bold" mb={4} fontSize="20px">
+          Connect with Local FS
+        </Box>
+        <Box fontSize="12px" color="#666" mb={2}>
+          Port
+        </Box>
+        <Flex align="flex-end">
+          <Input
+            flex={1}
+            value={port}
+            onChange={e => {
+              if (!Number.isNaN(e.target.value * 1)) setPort(e.target.value)
+            }}
+          />
+        </Flex>
+        <Flex
+          align="center"
+          justify="center"
+          mt={4}
+          p={1}
+          mb={1}
+          color="#5137C5"
+          css={{
+            borderRadius: "3px",
+            border: "1px solid #5137C5",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+          onClick={async () => {
+            const getP = v => {
+              if (v.p.length === 0) return "/" + v.name
+              else return "/" + v.p.join("/") + "/" + v.name
+            }
+            const dirmap = indexBy(prop("id"), localFS)
+            const updateDir = _localFS => {
+              const _files = []
+              const ls = (fs, p = [], dpath = []) => {
+                for (let k in fs) {
+                  const path = `/${p.length === 0 ? "" : p.join("/") + "/"}`
+                  const _dpath = `/${dpath.length === 0 ? "" : dpath.join("/") + "/"}`
+                  const id = md5(
+                    `2${_dpath}${k}`.replace(new RegExp("/", "g"), "#")
+                  )
+                  _files.push({
+                    dir: typeof fs[k] === "object",
+                    open: dirmap[id]?.open ?? false,
+                    name: k,
+                    pid: "2",
+                    p,
+                    ext: typeof fs[k] === "object" ? null : k.split(".").pop(),
+                    id,
+                    path,
+                    local: true,
+                    filename: `${_dpath}${k}`,
+                  })
+                  if (typeof fs[k] === "object")
+                    ls(fs[k], [...p, id], [...dpath, k])
+                }
+              }
+              ls(_localFS)
+              setLocalFS(_files)
+            }
+            g.hub1 = new Hub(`ws://localhost:${port}`)
+            g.hub1.onMsg = async obj => {
+              console.log("New FS Msg:", obj)
+              if (obj.subtype === "content") {
+                const ext = obj.path.split(".").pop()
+                const file = g.fileRef.current
+                const id = md5(
+                  `2${obj.path}`.replace(new RegExp("/", "g"), "#")
+                )
+                await lf.setItem(`file-${id}`, obj.content)
+                if (file?.id === id) {
+                  setTimeout(() => {
+                    g.setType(ext)
+                    g.editorRef.current.setValue(obj.content)
+                  }, 100)
+                }
+              } else if (obj.subtype === "dir_change") updateDir(obj.dir)
+            }
+
+            g.hub1.onClose = () => {
+              setWSID(null)
+              setFSPort(null)
+              toaster.create({
+                type: "error",
+                description: "Local FS disconnected!",
+              })
+            }
+
+            g.hub1.onRegister = msg => {
+              setWSID(msg.id)
+              let lfs = null
+              setFSPort(port)
+              updateDir(msg.dir)
+              setModal6(false)
+            }
+
+            g.hub1.onError = () => {
+              toaster.create({
+                type: "error",
+                description: "Failed to connect",
+              })
+            }
+
+            g.hub1.connect()
+          }}
+        >
+          Connect
+        </Flex>
+      </Box>
+    </Modal>
+  )
+}

package/app/components/modals/ImportModal.js

@@ -0,0 +1,105 @@
+import { Input, NativeSelect, Box, Flex } from "@chakra-ui/react"
+import Modal from "/components/modals/Modal"
+import use from "/lib/use"
+import { useState } from "react"
+import g from "/lib/global"
+import { generateId, filterFiles } from "/lib/utils"
+import { src_data_js, src_data_lua } from "/lib/scripts"
+import { append } from "ramda"
+import lf from "localforage"
+
+export default function ImportModal() {
+  const [modal7, setModal7] = use("modal7")
+  const [files, setFiles] = use("files")
+  const [file, setFile] = use("file")
+  const [openFiles, setOpenFiles] = use("openFiles")
+  const [preview, setPreview] = use("preview")
+  const [selDir, setSelDir] = use("selDir")
+  const handleImportClick = () => {
+    g.fileInputRef.current.click()
+  }
+  const handleFileChange = event => {
+    const file = event.target.files[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = async e => {
+        const txt = e.target.result
+        const id = generateId()
+        const fileext = file.name.split(".").pop().toLowerCase()
+        let name = file.name
+        for (let f of files) {
+          if (
+            f.pid === selDir.pid &&
+            f.name === name &&
+            f.path === selDir.path
+          ) {
+            name = `${id.split("-")[0]}.${fileext}`
+          }
+        }
+        const _file = {
+          name,
+          update: Date.now(),
+          id,
+          ext: fileext,
+          pid: selDir.pid,
+          path: selDir.path,
+        }
+        const _files = append(_file, files)
+        await lf.setItem("files", filterFiles(_files))
+        await lf.setItem(`file-${id}`, txt)
+        setFiles(_files)
+        setOpenFiles([...openFiles, _file])
+        setFile(_file)
+        setPreview(fileext === "md")
+        g.setType(fileext)
+        event.target.value = ""
+        g.setType(fileext)
+        // todo: handle this better
+        setTimeout(() => g.editorRef.current.setValue(txt), 100)
+        setModal7(false)
+      }
+
+      reader.readAsText(file)
+    }
+  }
+
+  return (
+    <Modal {...{ modal: modal7, setModal: setModal7 }}>
+      <Box p={6}>
+        <Box color="#5137C5" fontWeight="bold" mb={4} fontSize="20px">
+          Import File
+        </Box>
+        <Box fontSize="12px" color="#666" mb={2} mt={4}>
+          Imoprt Location
+        </Box>
+        <Box fontSize="12px" mb={6}>
+          {g.getDirs()}
+        </Box>
+        <Flex
+          align="center"
+          justify="center"
+          mt={4}
+          p={1}
+          mb={1}
+          color="#5137C5"
+          css={{
+            borderRadius: "3px",
+            border: "1px solid #5137C5",
+            cursor: "pointer",
+            _hover: { opacity: 0.75 },
+          }}
+          onClick={handleImportClick}
+        >
+          <input
+            type="file"
+            ref={g.fileInputRef}
+            onChange={handleFileChange}
+            accept=".lua, .js, .json, .md, .ts"
+            style={{ display: "none" }}
+          />
+          Choose File
+        </Flex>
+      </Box>
+    </Modal>
+  )
+}