fix npm
This commit is contained in:
Rizky
parent
0a0820f580
commit
4ce029bfe3
|
|
@ -7,8 +7,8 @@ import { edRoute } from "./logic/ed-route";
|
|||
import { edUndoManager } from "./logic/ed-undo";
|
||||
import { EdMain } from "./panel/main/main";
|
||||
import { EdPane } from "./panel/main/pane-resize";
|
||||
import { EdPopCompGroup } from "./panel/popup/comp-group";
|
||||
import { EdPopSite } from "./panel/popup/site";
|
||||
import { EdPopCompGroup } from "./panel/popup/comp/comp-group";
|
||||
import { EdPopSite } from "./panel/popup/site/site";
|
||||
import { EdScriptInit } from "./panel/script/monaco/init";
|
||||
import { EdScriptSite } from "./panel/script/site";
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ import { useGlobal } from "web-utils";
|
|||
import { EDGlobal } from "./logic/ed-global";
|
||||
import { EdTreeBody } from "./panel/tree/body";
|
||||
import { EdTreeSearch } from "./panel/tree/search";
|
||||
import { EdSitePicker } from "./panel/top/left/site";
|
||||
import { EdApiConfig } from "./panel/top/left/api";
|
||||
import { EdExport } from "./panel/top/left/export";
|
||||
import { EdNpmConfig } from "./panel/top/left/npm";
|
||||
import { EdSiteJS } from "./panel/top/left/js";
|
||||
import { EdSitePicker } from "./panel/header/left/site";
|
||||
import { EdApiConfig } from "./panel/header/left/api";
|
||||
import { EdExport } from "./panel/header/left/export";
|
||||
import { EdNpm } from "./panel/header/left/npm";
|
||||
import { EdSiteJS } from "./panel/header/left/js";
|
||||
|
||||
export const EdLeft = () => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
|
|
@ -30,7 +30,7 @@ export const EdLeft = () => {
|
|||
<EdSitePicker />
|
||||
<div className="flex items-stretch space-x-1 pl-2">
|
||||
<EdSiteJS />
|
||||
<EdNpmConfig />
|
||||
<EdNpm />
|
||||
<EdApiConfig />
|
||||
<EdExport />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { EdNpmPopup } from "../../popup/npm/npm-popup";
|
||||
import { TopBtn } from "../top-btn";
|
||||
|
||||
export const EdNpmConfig = () => {
|
||||
export const EdNpm = () => {
|
||||
return (
|
||||
<TopBtn style="slim">
|
||||
<TopBtn style="slim" popover={<EdNpmPopup />}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { ReactNode } from "react";
|
||||
import { ReactElement, ReactNode } from "react";
|
||||
import { Popover } from "../../../../utils/ui/popover";
|
||||
|
||||
export const TopBtn = ({
|
||||
children,
|
||||
|
|
@ -7,6 +8,7 @@ export const TopBtn = ({
|
|||
underlight,
|
||||
onClick,
|
||||
style = "normal",
|
||||
popover,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
|
|
@ -14,8 +16,9 @@ export const TopBtn = ({
|
|||
underlight?: string;
|
||||
onClick?: React.MouseEventHandler<HTMLDivElement>;
|
||||
style?: "slim" | "normal";
|
||||
popover?: ReactElement;
|
||||
}) => {
|
||||
return (
|
||||
const result = (
|
||||
<div
|
||||
className={cx(
|
||||
"flex items-center cursor-pointer space-x-1 select-none relative transition-all duration-200 ",
|
||||
|
|
@ -48,4 +51,14 @@ export const TopBtn = ({
|
|||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (popover) {
|
||||
return (
|
||||
<Popover autoFocus={false} content={popover} placement="bottom">
|
||||
{result}
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { useGlobal } from "web-utils";
|
||||
import { Menu, MenuItem } from "../../../../utils/ui/context-menu";
|
||||
import { EDGlobal } from "../../logic/ed-global";
|
||||
import { Menu, MenuItem } from "../../../../../utils/ui/context-menu";
|
||||
import { EDGlobal } from "../../../logic/ed-global";
|
||||
import { useEffect } from "react";
|
||||
import { Loading } from "../../../../utils/ui/loading";
|
||||
import { Loading } from "../../../../../utils/ui/loading";
|
||||
|
||||
export const EdPopCompGroup = () => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const searchPackage = async (search: string) => {};
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
import { useEffect } from "react";
|
||||
import Select from "react-select";
|
||||
import { useGlobal, useLocal } from "web-utils";
|
||||
import { EDGlobal } from "../../../logic/ed-global";
|
||||
import { npm_page, npm_site } from "../../../../../../../db/db";
|
||||
import { EdNpmItems } from "./npm-items";
|
||||
|
||||
export const EdNpmImport = ({ mode }: { mode: "page" | "site" }) => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
const local = useLocal({
|
||||
search: "",
|
||||
status: "init" as "init" | "ready",
|
||||
size: 0,
|
||||
list: [] as (npm_page | npm_site)[],
|
||||
});
|
||||
|
||||
const reload = async () => {
|
||||
if (mode === "page") {
|
||||
local.list = await db.npm_page.findMany({
|
||||
where: { id_page: p.page.cur.id },
|
||||
});
|
||||
} else if (mode === "site") {
|
||||
local.list = await db.npm_site.findMany({
|
||||
where: { id_site: p.site.id },
|
||||
});
|
||||
}
|
||||
|
||||
const size = await api.npm_size(
|
||||
mode,
|
||||
mode === "site" ? p.site.id || "" : p.page.cur.id
|
||||
);
|
||||
local.size = parseInt(size) || 0;
|
||||
local.status = "ready";
|
||||
local.render();
|
||||
};
|
||||
useEffect(() => {
|
||||
reload();
|
||||
}, [mode === "page" ? p.page.cur.id : p.site.id]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col items-stretch text-[14px]">
|
||||
<div className="border-b h-[30px] relative">
|
||||
<div className="absolute inset-0 z-10 flex justify-between flex items-stretch">
|
||||
<div className="uppercase px-2 flex items-center font-mono text-[11px]">
|
||||
{mode}
|
||||
</div>
|
||||
<Select
|
||||
noOptionsMessage={() => "No packages found"}
|
||||
className={selectStyle}
|
||||
unstyled
|
||||
classNamePrefix={"sel"}
|
||||
placeholder="Search Packages"
|
||||
inputValue={local.search}
|
||||
openMenuOnClick={false}
|
||||
openMenuOnFocus={false}
|
||||
onInputChange={(text) => {
|
||||
local.search = text;
|
||||
local.render();
|
||||
}}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
<div className="w-[100px] flex items-center justify-center">
|
||||
{local.status === "init" && <>Loading...</>}
|
||||
{local.status === "ready" && (
|
||||
<div className="bg-green-800 cursor-pointer hover:bg-green-600 m-1 flex items-center text-white justify-center flex-1">
|
||||
Bundle
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-2 flex items-center font-mono border-l text-[10px]">
|
||||
{formatBytes(local.size)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EdNpmItems
|
||||
bundled={local.size > 0}
|
||||
list={local.list}
|
||||
mode={mode}
|
||||
update={(list) => {
|
||||
local.list = list;
|
||||
local.render();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function formatBytes(bytes: number, decimals?: number) {
|
||||
if (bytes == 0) return "0 B";
|
||||
var k = 1024,
|
||||
dm = decimals || 2,
|
||||
sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
|
||||
i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
|
||||
}
|
||||
|
||||
const selectStyle = css`
|
||||
flex: 1;
|
||||
|
||||
.sel__control {
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
outline: none;
|
||||
min-height: 29px;
|
||||
border-left: 1px solid #ececeb;
|
||||
border-right: 1px solid #ececeb;
|
||||
}
|
||||
.sel__control--is-focused {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.sel__menu {
|
||||
border-radius: 0px;
|
||||
background: white;
|
||||
border: 1px solid #ececeb;
|
||||
}
|
||||
.sel__value-container {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.sel__option {
|
||||
padding: 2px 5px;
|
||||
border-bottom: 1px solid #ececeb;
|
||||
&:hover {
|
||||
background: #e0e9fa;
|
||||
}
|
||||
}
|
||||
.sel__indicator {
|
||||
width: 15px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.sel__placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
`;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
import { EdNpmImport } from "./npm-import";
|
||||
|
||||
export const EdNpmPopup = () => {
|
||||
return (
|
||||
<div className="w-[900px] h-[400px] flex items-stretch -mx-[8px] -my-[3px]">
|
||||
<EdNpmImport mode="site" />
|
||||
<div className="border-r"></div>
|
||||
<EdNpmImport mode="page" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { site } from "dbgen";
|
||||
import { FC } from "react";
|
||||
import { useGlobal, useLocal } from "web-utils";
|
||||
import { EDGlobal } from "../../logic/ed-global";
|
||||
import { formStyle } from "../../../../utils/ui/form.style";
|
||||
import { Input } from "../../../../utils/ui/form/input";
|
||||
import { EDGlobal } from "../../../logic/ed-global";
|
||||
import { formStyle } from "../../../../../utils/ui/form.style";
|
||||
import { Input } from "../../../../../utils/ui/form/input";
|
||||
|
||||
export const EdFormSite: FC<{
|
||||
site: Partial<site>;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { ReactNode } from "react";
|
||||
import { Popover } from "../../../../utils/ui/popover";
|
||||
import { Popover } from "../../../../../utils/ui/popover";
|
||||
import { Placement } from "@floating-ui/react";
|
||||
import Select from "react-select";
|
||||
import { useLocal } from "web-utils";
|
||||
|
|
@ -7,9 +7,9 @@ import {
|
|||
import { useEffect } from "react";
|
||||
import { DndProvider } from "react-dnd";
|
||||
import { useGlobal, useLocal } from "web-utils";
|
||||
import { Loading } from "../../../../utils/ui/loading";
|
||||
import { Modal } from "../../../../utils/ui/modal";
|
||||
import { EDGlobal } from "../../logic/ed-global";
|
||||
import { Loading } from "../../../../../utils/ui/loading";
|
||||
import { Modal } from "../../../../../utils/ui/modal";
|
||||
import { EDGlobal } from "../../../logic/ed-global";
|
||||
import { EdPopUser } from "./site-user";
|
||||
import { EdFormSite } from "./site-form";
|
||||
|
||||
|
|
@ -541,7 +541,7 @@ const SitePicker = ({
|
|||
</div>
|
||||
)}
|
||||
<div
|
||||
className="edit px-1 bg-blue-50 border-l-4 border-blue-300 text-blue-400 hover:bg-blue-500 hover:text-white absolute inset-0 top-auto"
|
||||
className="edit px-1 bg-blue-50 text-blue-400 hover:bg-blue-500 text-[12px] min-h-[22px] flex items-center hover:text-white absolute inset-0 top-auto"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
|
@ -558,7 +558,13 @@ const SitePicker = ({
|
|||
}
|
||||
}}
|
||||
>
|
||||
EDIT
|
||||
Edit Site
|
||||
<span
|
||||
className="ml-1"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.1464 1.14645C12.3417 0.951184 12.6583 0.951184 12.8535 1.14645L14.8535 3.14645C15.0488 3.34171 15.0488 3.65829 14.8535 3.85355L10.9109 7.79618C10.8349 7.87218 10.7471 7.93543 10.651 7.9835L6.72359 9.94721C6.53109 10.0435 6.29861 10.0057 6.14643 9.85355C5.99425 9.70137 5.95652 9.46889 6.05277 9.27639L8.01648 5.34897C8.06455 5.25283 8.1278 5.16507 8.2038 5.08907L12.1464 1.14645ZM12.5 2.20711L8.91091 5.79618L7.87266 7.87267L8.12731 8.12732L10.2038 7.08907L13.7929 3.5L12.5 2.20711ZM9.99998 2L8.99998 3H4.9C4.47171 3 4.18056 3.00039 3.95552 3.01877C3.73631 3.03668 3.62421 3.06915 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3.06915 3.62421 3.03669 3.73631 3.01878 3.95552C3.00039 4.18056 3 4.47171 3 4.9V11.1C3 11.5283 3.00039 11.8194 3.01878 12.0445C3.03669 12.2637 3.06915 12.3758 3.10899 12.454C3.20487 12.6422 3.35785 12.7951 3.54601 12.891C3.62421 12.9309 3.73631 12.9633 3.95552 12.9812C4.18056 12.9996 4.47171 13 4.9 13H11.1C11.5283 13 11.8194 12.9996 12.0445 12.9812C12.2637 12.9633 12.3758 12.9309 12.454 12.891C12.6422 12.7951 12.7951 12.6422 12.891 12.454C12.9309 12.3758 12.9633 12.2637 12.9812 12.0445C12.9996 11.8194 13 11.5283 13 11.1V6.99998L14 5.99998V11.1V11.1207C14 11.5231 14 11.8553 13.9779 12.1259C13.9549 12.407 13.9057 12.6653 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.6653 13.9057 12.407 13.9549 12.1259 13.9779C11.8553 14 11.5231 14 11.1207 14H11.1H4.9H4.87934C4.47686 14 4.14468 14 3.87409 13.9779C3.59304 13.9549 3.33469 13.9057 3.09202 13.782C2.7157 13.5903 2.40973 13.2843 2.21799 12.908C2.09434 12.6653 2.04506 12.407 2.0221 12.1259C1.99999 11.8553 1.99999 11.5231 2 11.1207V11.1206V11.1V4.9V4.87935V4.87932V4.87931C1.99999 4.47685 1.99999 4.14468 2.0221 3.87409C2.04506 3.59304 2.09434 3.33469 2.21799 3.09202C2.40973 2.71569 2.7157 2.40973 3.09202 2.21799C3.33469 2.09434 3.59304 2.04506 3.87409 2.0221C4.14468 1.99999 4.47685 1.99999 4.87932 2H4.87935H4.9H9.99998Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
|
||||
}}
|
||||
></span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
|
|
@ -47,7 +47,7 @@ export const EdMonacoWrap = ({
|
|||
return (
|
||||
<div
|
||||
className={cx(
|
||||
"flex flex-1 flex-col absolute inset-[80px] bg-white",
|
||||
"flex flex-1 flex-col h-[90vh] w-[90vw] bg-white",
|
||||
css`
|
||||
.monaco-editor {
|
||||
.mtk9 {
|
||||
|
|
@ -98,11 +98,13 @@ export const EdMonacoWrap = ({
|
|||
>
|
||||
{header}
|
||||
<div className="relative flex-1">
|
||||
{!jscript.editor || !jscript.build ? (
|
||||
<Loading note="script-cst" backdrop={false} />
|
||||
) : (
|
||||
children(jscript.editor)
|
||||
)}
|
||||
<div className="absolute inset-0">
|
||||
{!jscript.editor || !jscript.build ? (
|
||||
<Loading note="script-cst" backdrop={false} />
|
||||
) : (
|
||||
children(jscript.editor)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{footer}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -936,14 +936,6 @@ const Trash = () => (
|
|||
</svg>
|
||||
);
|
||||
|
||||
const camel = function (snakeCased: string) {
|
||||
// Use a regular expression to find the underscores + the next letter
|
||||
return snakeCased.replace(/(\W\w)/g, function (match) {
|
||||
// Convert to upper case and ignore the first char (=the underscore)
|
||||
return match.toUpperCase().substring(1);
|
||||
});
|
||||
};
|
||||
|
||||
function formatBytes(bytes: number, decimals?: number) {
|
||||
if (bytes == 0) return "0 Bytes";
|
||||
var k = 1024,
|
||||
|
|
|
|||
Loading…
Reference in New Issue