@rnaga/wp-next-admin 1.0.1

package/client/components/contents/posts/Edit/index.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { z } from "zod";
+import { Box, Divider } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { Tiptap } from "@rnaga/wp-next-rte/tiptap/Tiptap"; // Importing the Tiptap component
+import { useFormData } from "@rnaga/wp-next-ui/hooks/use-form-data";
+import { PostPanel, PostPanelWrapper } from "../../../../components/utils/post";
+import { useAdminNavigation } from "../../../../hooks/";
+import { useWPAdmin } from "../../../../wp-admin";
+import { Settings } from "./Settings";
+import { Toolbar } from "./Toolbar";
+export const Edit = () => {
+    const { overlay, wp: { error }, } = useWPAdmin();
+    const { actions, parse } = useServerActions();
+    const { formData, setFormData, setFormReady, formReady } = useFormData("post");
+    const { searchParams } = useAdminNavigation();
+    const parsed = z
+        .string()
+        .transform((v) => parseInt(v))
+        .safeParse(searchParams.get("id"));
+    const postId = parsed.success ? parsed.data : undefined;
+    useEffect(() => {
+        if (!postId) {
+            setFormReady(true);
+            return;
+        }
+        overlay.circular.promise(actions.post.get(postId)).then((response) => {
+            const [post] = parse(response);
+            if (post?.post_status === "trash") {
+                error.throw("You cannot edit this item because it is in the Trash. Please restore it and try again.");
+                return;
+            }
+            setFormData(post, { ready: true });
+        });
+    }, []);
+    if (!formReady)
+        return null;
+    return (_jsx(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", gap: 2 }, children: _jsxs(PostPanelWrapper, { children: [_jsx(Toolbar, {}), _jsx(Divider, {}), _jsxs(PostPanel, { children: [_jsx(Tiptap, { defaultContent: formData?.post_content, onUpdate: (editor, transaction) => {
+                                setFormData({ post_content: editor.getHTML() });
+                            } }), _jsx(Settings, {})] })] }) }));
+};

package/client/components/contents/posts/List/ActionLink.d.ts

@@ -0,0 +1,5 @@
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+export declare const ActionLink: (props: {
+    post: wpCoreTypes.actions.Posts[number];
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ActionLink.d.ts.map

package/client/components/contents/posts/List/ActionLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionLink.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/posts/List/ActionLink.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAE9D,eAAO,MAAM,UAAU,GAAI,OAAO;IAChC,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;CACzC,mDAiBA,CAAC"}

package/client/components/contents/posts/List/ActionLink.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PostActionLink } from "../../../utils/post/link/PostActionLink";
+import { useUser } from "@rnaga/wp-next-core/client/hooks/use-user";
+export const ActionLink = (props) => {
+    const { post } = props;
+    const { user, userCan } = useUser();
+    // Check if user has permission to edit other posts
+    if (!userCan("edit_post", post)) {
+        return null;
+    }
+    return (_jsx(PostActionLink, { actionLinks: post.post_status === "trash" ? ["restore", "delete"] : ["edit", "trash"], post: post }));
+};

package/client/components/contents/posts/List/Statuses.d.ts

@@ -0,0 +1,2 @@
+export declare const Statuses: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Statuses.d.ts.map

package/client/components/contents/posts/List/Statuses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statuses.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/posts/List/Statuses.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ,+CA6DpB,CAAC"}

package/client/components/contents/posts/List/Statuses.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from "react";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { countByStatuses } from "@rnaga/wp-next-core/server/actions/post";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { Link } from "@rnaga/wp-next-ui/Link";
+import { useAdminNavigation } from "../../../../hooks/use-admin-navigation";
+export const Statuses = () => {
+    const { actions } = useServerActions();
+    const { pushRouter, searchParams, refreshValue } = useAdminNavigation();
+    const [countStatuses, setCountStatuses] = useState();
+    useEffect(() => {
+        countByStatuses().then((response) => {
+            setCountStatuses(response.info?.countGroupBy ?? []);
+        });
+    }, [refreshValue().content]);
+    if (!countStatuses) {
+        return _jsx(Typography, { children: "Loading..." });
+    }
+    const totalCount = countStatuses.reduce((total, item) => total + (item.count || 0), 0);
+    const createLink = (status, count) => {
+        return searchParams.get("status") === status ? (_jsxs(_Fragment, { children: [status, " (", count, ")"] })) : (_jsxs(Link, { onClick: () => pushRouter({ status: [status], page: 1 }), children: [status, " (", count, ")"] }));
+    };
+    return (_jsxs(Typography, { size: "medium", sx: {
+            mx: 1,
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            verticalAlign: "middle",
+            gap: 1,
+        }, children: [searchParams.size > 0 ? (_jsxs(Link, { component: "button", onClick: () => pushRouter({}), children: ["All (", totalCount, ")"] })) : (_jsxs(_Fragment, { children: ["All (", totalCount, ")"] })), " ", countStatuses.map((status, index) => (_jsxs(Fragment, { children: ["  |  ", createLink(status.post_status ?? "Unknown", status.count ?? 0)] }, index)))] }));
+};

package/client/components/contents/posts/List/Toolbar.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+export declare const Toolbar: (props: {
+    posts?: wpCoreTypes.actions.Posts;
+    info?: wpCoreTypes.actions.PostsInfo;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

package/client/components/contents/posts/List/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/posts/List/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAM9D,eAAO,MAAM,OAAO,GAAI,OAAO;IAC7B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,4CAqBA,CAAC"}

package/client/components/contents/posts/List/Toolbar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Pagination } from "@rnaga/wp-next-ui/list/Pagination";
+import { useWPAdmin } from "../../../../wp-admin";
+import { Box } from "@mui/material";
+import { InputSearch } from "@rnaga/wp-next-ui/InputSearch";
+export const Toolbar = (props) => {
+    const { info, children } = props;
+    const { wp: { viewport }, } = useWPAdmin();
+    return (_jsxs(_Fragment, { children: [children, _jsxs(Box, { sx: {
+                    display: "grid",
+                    gap: 1,
+                    gridTemplateColumns: viewport.isMobile ? "1fr" : "repeat(2, 1fr)",
+                }, children: [_jsx(InputSearch, { size: "medium", sx: { flexGrow: 1 } }), _jsx(Pagination, { pagination: info?.pagination })] })] }));
+};

package/client/components/contents/posts/List/index.d.ts

@@ -0,0 +1,2 @@
+export declare const List: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/posts/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/posts/List/index.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,IAAI,+CAiIhB,CAAC"}

package/client/components/contents/posts/List/index.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { useCallback, useEffect, useState, useTransition } from "react";
+import CommentIcon from "@mui/icons-material/Comment";
+import { AccordionDetails, Box, Stack } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { useUser } from "@rnaga/wp-next-core/client/hooks/use-user";
+import * as actionsPost from "@rnaga/wp-next-core/server/actions/post";
+import { Accordion, AccordionSummary } from "@rnaga/wp-next-ui/Accordion";
+import { Chip } from "@rnaga/wp-next-ui/Chip";
+import { ActionTd, ListGrid, ListGridItem, SortableTh, Table, Td, Th, THead, Tr, } from "@rnaga/wp-next-ui/list";
+import { Loading } from "@rnaga/wp-next-ui/Loading";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { formatting } from "@rnaga/wp-node/common/formatting";
+import { AdminLink } from "../../../../components/utils/link";
+import { PostRowLinks } from "../../../../components/utils/post";
+import { useAdminNavigation } from "../../../../hooks/use-admin-navigation";
+import { useWPAdmin } from "../../../../wp-admin";
+import { ActionLink } from "./ActionLink";
+import { Statuses } from "./Statuses";
+import { Toolbar } from "./Toolbar";
+export const List = () => {
+    const { wp: { viewport }, } = useWPAdmin();
+    const { user, userCan } = useUser();
+    const { actions, parse } = useServerActions();
+    const [loading, startTransition] = useTransition();
+    const { navigationStatus, queryObject, refreshValue } = useAdminNavigation();
+    const [{ posts, info }, setPosts] = useState({
+        posts: undefined,
+        info: undefined,
+    });
+    const fetchPosts = useCallback(async () => {
+        const [posts, info] = await actionsPost
+            .list(queryObject, { postTypes: ["post"] })
+            .then(parse);
+        setPosts({ posts, info });
+    }, [navigationStatus, refreshValue().content]);
+    useEffect(() => {
+        startTransition(fetchPosts);
+    }, [navigationStatus]);
+    useEffect(() => {
+        fetchPosts();
+    }, [refreshValue().content]);
+    return (_jsxs(Stack, { spacing: 2, children: [_jsx(Toolbar, { posts: posts, info: info, children: _jsx(Statuses, {}) }), _jsx(Loading, { loading: loading, children: _jsxs(Table, { children: [_jsxs(THead, { children: [_jsx(SortableTh, { name: "Title", orderby: "post_name" }), _jsx(Th, { viewport: "desktop", children: "Author" }), _jsx(Th, { viewport: "desktop", children: "Categories" }), _jsx(Th, { viewport: "desktop", children: "Tags" }), _jsx(Th, { viewport: "desktop", style: { width: "40px" }, children: _jsx(Box, { sx: { display: "flex", alignItems: "center" }, children: _jsx(CommentIcon, { fontSize: "small" }) }) }), _jsx(SortableTh, { show: viewport.isDesktop, name: "Date", orderby: "post_date" })] }), _jsx("tbody", { children: posts?.map((post) => (_jsxs(Tr, { children: [_jsxs(ActionTd, { viewport: "desktop", children: [_jsxs(Box, { children: [_jsx(AdminLink, { subPage: "/edit", queryParams: { id: post.ID }, disabled: !userCan("edit_post", post), size: "medium", bold: true, children: post.post_title }), post.post_status == "future" && (_jsx(Chip, { size: "small", label: "Scheduled" })), post.post_status == "draft" && (_jsx(Chip, { size: "small", label: "Draft" })), info?.protected.includes(post.ID) && (_jsx(Chip, { size: "small", label: "Password Protected" }))] }), _jsx(ActionLink, { post: post })] }), _jsx(Td, { viewport: "mobile", children: _jsxs(Accordion, { children: [_jsx(AccordionSummary, { children: _jsx(Typography, { children: post.post_title }) }), _jsxs(AccordionDetails, { children: [_jsx(ActionLink, { post: post }), _jsxs(ListGrid, { children: [_jsx(ListGridItem, { title: "Author", children: _jsx(PostRowLinks, { row: post, field: "actor" }) }), _jsx(ListGridItem, { title: "Categories", children: _jsx(PostRowLinks, { row: post, field: "categories" }) }), _jsx(ListGridItem, { title: "Tags", children: _jsx(PostRowLinks, { row: post, field: "tags" }) }), _jsx(ListGridItem, { title: "Date", children: _jsx(Typography, { children: formatting.date(post.post_date) }) })] })] })] }) }), _jsx(Td, { viewport: "desktop", children: _jsx(PostRowLinks, { row: post, field: "actor" }) }), _jsx(Td, { viewport: "desktop", children: _jsx(PostRowLinks, { row: post, field: "categories" }) }), _jsx(Td, { viewport: "desktop", children: _jsx(PostRowLinks, { row: post, field: "tags" }) }), _jsx(Td, { viewport: "desktop", children: _jsx(Chip, { size: "medium", color: "grey", label: post.comment_count }) }), _jsx(Td, { viewport: "desktop", children: formatting.date(post.post_date) })] }, `${post.ID}`))) })] }) })] }));
+};

package/client/components/contents/posts/index.d.ts

@@ -0,0 +1,5 @@
+export declare const Posts: {
+    Edit: () => import("react/jsx-runtime").JSX.Element | null;
+    List: () => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/posts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/contents/posts/index.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;CAGjB,CAAC"}

package/client/components/contents/posts/index.js

@@ -0,0 +1,6 @@
+import { Edit } from "./Edit";
+import { List } from "./List";
+export const Posts = {
+    Edit,
+    List,
+};

package/client/components/contents/profile/index.d.ts

@@ -0,0 +1,2 @@
+export declare const Profile: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/profile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/contents/profile/index.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,+CAInB,CAAC"}

package/client/components/contents/profile/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Users } from "../../../components/contents/users";
+import { useUser } from "@rnaga/wp-next-core/client/hooks/use-user";
+export const Profile = () => {
+    const { user } = useUser();
+    return _jsx(Users.Edit, { userId: user?.ID });
+};

package/client/components/contents/revisions/List/History.d.ts

@@ -0,0 +1,7 @@
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+import type { SelectedRevision } from ".";
+export declare const History: (props: {
+    revisions?: wpCoreTypes.actions.Revisions;
+    onClick: (revision: SelectedRevision) => void;
+}) => import("react").ReactNode[] | null | undefined;
+//# sourceMappingURL=History.d.ts.map

package/client/components/contents/revisions/List/History.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"History.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/revisions/List/History.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAO1C,eAAO,MAAM,OAAO,GAAI,OAAO;IAC7B,SAAS,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC;IAC1C,OAAO,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C,mDA+DA,CAAC"}

package/client/components/contents/revisions/List/History.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { List, ListItem, ListItemButton, Stack, Step } from "@mui/material";
+export const History = (props) => {
+    const { revisions, onClick } = props;
+    const mapByDate = new Map();
+    const [selectedId, setSelectedId] = useState();
+    useEffect(() => {
+        setSelectedId(revisions?.[0]?.ID);
+    }, []);
+    const handleClick = (revision) => {
+        console.log("revision.target?.ID", revision.target?.ID, selectedId);
+        setSelectedId(revision.target?.ID);
+        onClick(revision);
+    };
+    const formatDate = (revision) => revision?.target?.post_modified?.split(" ")[1];
+    if (!revisions) {
+        return null;
+    }
+    for (let i = 0; i < revisions.length; i++) {
+        const revision = revisions[i];
+        const date = revision.post_modified.split(" ")[0];
+        if (!date)
+            return;
+        const revisionList = mapByDate.get(date) ?? [];
+        mapByDate.set(date, [...revisionList, { index: i, target: revision }]);
+    }
+    const list = [];
+    for (const [date, revisions] of mapByDate.entries()) {
+        list.push(_jsxs(Step, { children: [_jsx(Typography, { size: "medium", bold: true, children: date }), _jsx(Stack, { sx: { mr: 2 }, children: _jsx(List, { sx: {
+                            p: 0,
+                        }, children: revisions.map((revision) => (_jsx(ListItem, { sx: { p: 0 }, children: _jsx(ListItemButton, { selected: selectedId == revision.target?.ID, color: "primary", onClick: () => handleClick(revision), children: _jsx(Typography, { children: formatDate(revision) }) }) }, `${revision.index}`))) }) })] }, date));
+    }
+    return list;
+};

package/client/components/contents/revisions/List/diff2html.css

@@ -0,0 +1,11 @@
+.d2h-code-line,
+.d2h-code-line-ctn {
+    white-space: normal;
+}
+
+
+.d2h-code-line,
+.d2h-code-side-line,
+.d2h-code-line-ctn {
+    width: revert;
+}

package/client/components/contents/revisions/List/index.d.ts

@@ -0,0 +1,9 @@
+import "diff2html/bundles/css/diff2html.min.css";
+import "./diff2html.css";
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+export type SelectedRevision = {
+    index: number;
+    target?: wpCoreTypes.actions.Revisions[number];
+};
+export declare const List: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/revisions/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/revisions/List/index.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAoBzB,OAAO,KAAK,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,IAAI,+CAgPhB,CAAC"}

package/client/components/contents/revisions/List/index.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "diff2html/bundles/css/diff2html.min.css";
+import "./diff2html.css";
+import * as Diff from "diff";
+import * as Diff2html from "diff2html";
+import { ColorSchemeType } from "diff2html/lib/types";
+import parseHtml from "html-react-parser";
+import { useEffect, useState, useTransition } from "react";
+import { z } from "zod";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Box, Link, Stepper, Switch, useColorScheme } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { Button } from "@rnaga/wp-next-ui/Button";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { Loading } from "@rnaga/wp-next-ui/Loading";
+import { useAdminNavigation } from "../../../../hooks/use-admin-navigation";
+import { useWPAdmin } from "../../../../wp-admin";
+import { History } from "./History";
+export const List = () => {
+    const { overlay, wp: { error, viewport }, } = useWPAdmin();
+    const { actions, parse, safeParse } = useServerActions();
+    const { searchParams, navigationStatus, queryObject, goto, resolvePath } = useAdminNavigation();
+    const { mode } = useColorScheme();
+    const [loading, startTransition] = useTransition();
+    const [state, setState] = useState({
+        canRestore: false,
+        sideBySide: false,
+        compareWithParent: false,
+    });
+    const { parent, sideBySide, selectedRevision, diffHtml, canRestore, compareWithParent, revisions, editUrl, } = state;
+    const parentId = z
+        .string()
+        .transform((v) => parseInt(v))
+        .parse(searchParams.get("id"));
+    if (0 >= parentId) {
+        error.throw("Invalid Parent Id");
+    }
+    useEffect(() => {
+        if (!selectedRevision) {
+            return;
+        }
+        const { index, target } = selectedRevision;
+        if (!target) {
+            return;
+        }
+        const parentOrPrevious = compareWithParent
+            ? parent
+            : revisions && revisions?.length > index + 1
+                ? revisions[index + 1]
+                : undefined;
+        const diff = Diff.createTwoFilesPatch(parentOrPrevious?.post_title ?? " ", target.post_title, parentOrPrevious?.post_content ?? " ", target.post_content);
+        const diffJson = Diff2html.parse(diff);
+        const diffHtml = Diff2html.html(diffJson, {
+            //drawFileList: true,
+            outputFormat: sideBySide ? "side-by-side" : "line-by-line",
+            rawTemplates: { "file-summary-wrapper": "" },
+            colorScheme: mode == "dark" ? ColorSchemeType.DARK : ColorSchemeType.AUTO,
+        });
+        setState({ ...state, diffHtml });
+    }, [selectedRevision, sideBySide, compareWithParent, mode]);
+    useEffect(() => {
+        startTransition(async () => {
+            //const fetchData = async () => {
+            const [revisions] = await actions.revision
+                .list(parentId, { ...queryObject, per_page: 30 })
+                .then(parse);
+            if (parent) {
+                setState({ ...state, revisions });
+                return;
+            }
+            const [post] = await actions.post.get(parentId).then(parse);
+            setState({
+                ...state,
+                ...{
+                    editUrl: resolvePath("blog", {
+                        append: "/posts/edit",
+                        queryParams: {
+                            id: post.ID,
+                        },
+                    }),
+                    revisions,
+                    parent: post,
+                    selectedRevision: {
+                        index: 0,
+                        target: revisions[0],
+                    },
+                },
+            });
+        });
+    }, [navigationStatus]);
+    const handleSelectRevision = (revision) => {
+        setState({
+            ...state,
+            ...{
+                canRestore: revision && revision?.index > 0 ? true : false,
+                selectedRevision: revision,
+            },
+        });
+    };
+    const handleRestore = async () => {
+        if (!selectedRevision?.target) {
+            return;
+        }
+        const restoreId = selectedRevision.target.ID;
+        const result = await overlay.circular
+            .promise(actions.revision.restore(parentId, restoreId))
+            .then(safeParse);
+        if (result.success && editUrl) {
+            goto(editUrl);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [!loading && (_jsxs(Link, { sx: {
+                    mt: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    cursor: "pointer",
+                    textDecoration: "none",
+                }, onClick: () => {
+                    editUrl && goto(editUrl);
+                }, children: [_jsx(ArrowBackIcon, { fontSize: "small" }), _jsx(Typography, { size: "medium", children: "Go to editor" })] })), _jsx(Loading, { loading: loading, children: _jsxs(Box, { sx: {
+                        display: "grid",
+                        gridTemplateColumns: {
+                            xs: "minmax(80vw, auto)",
+                            md: "15vw minmax(60vw, auto)",
+                        },
+                        maxWidth: "100vw",
+                        verticalAlign: "top",
+                    }, children: [_jsx(Box, { sx: { maxHeight: "75dvh", overflow: "auto" }, children: _jsx(Stepper, { orientation: viewport.isDesktop ? "vertical" : "horizontal", sx: { maxWidth: "80vw" }, children: _jsx(History, { revisions: revisions, onClick: handleSelectRevision }) }) }), _jsxs(Box, { children: [_jsxs(Box, { sx: {
+                                        display: "flex",
+                                        width: "100%",
+                                        justifyContent: "flex-start",
+                                        my: 1,
+                                        gap: 1,
+                                    }, children: [_jsx(Box, { sx: { flexGrow: 1 }, children: _jsx(Button, { size: "medium", disabled: !canRestore, onClick: handleRestore, children: "Restore This Revision" }) }), _jsxs(Typography, { component: "span", sx: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                            }, children: ["Compare with Parent", _jsx(Switch, { onChange: (e) => setState({
+                                                        ...state,
+                                                        compareWithParent: e.target.checked,
+                                                    }), sx: { ml: 1 } })] }), _jsxs(Typography, { component: "span", sx: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                            }, children: ["Side by Side", _jsx(Switch, { onChange: (e) => setState({ ...state, sideBySide: e.target.checked }), sx: { ml: 1 } })] })] }), diffHtml && parseHtml(diffHtml)] })] }) })] }));
+};

package/client/components/contents/revisions/index.d.ts

@@ -0,0 +1,2 @@
+export { List as Revisions } from "./List";
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/revisions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/contents/revisions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/client/components/contents/revisions/index.js

@@ -0,0 +1 @@
+export { List as Revisions } from "./List";

package/client/components/contents/roles/List/EditModal.d.ts

@@ -0,0 +1,8 @@
+import { EditState } from "./";
+export declare const EditModal: (props: {
+    open: boolean;
+    onClose: (...args: any) => any;
+    editState: EditState;
+    blogId: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=EditModal.d.ts.map

package/client/components/contents/roles/List/EditModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditModal.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/roles/List/EditModal.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAE/B,eAAO,MAAM,SAAS,GAAI,OAAO;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC/B,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,mDAoRA,CAAC"}

package/client/components/contents/roles/List/EditModal.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, FormControl, FormLabel, Stack } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { Button } from "@rnaga/wp-next-ui/Button";
+import { Checkbox } from "@rnaga/wp-next-ui/Checkbox";
+import { useFormData } from "@rnaga/wp-next-ui/hooks/use-form-data";
+import { Input } from "@rnaga/wp-next-ui/Input";
+import { Modal, ModalContent } from "@rnaga/wp-next-ui/Modal";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import * as wpDefaults from "@rnaga/wp-node/defaults";
+import { useSites } from "../../../../hooks/";
+import { useWPAdmin } from "../../../../wp-admin";
+export const EditModal = (props) => {
+    const { open, onClose, editState, blogId } = props;
+    const { role = undefined, roleName = undefined } = editState ?? {};
+    const isUpdate = !!role;
+    const defaultRoleNames = Object.keys(wpDefaults.roles);
+    const { wp: { viewport }, overlay, } = useWPAdmin();
+    const { actions, execute, safeParse, loading } = useServerActions();
+    const { formData, submit } = useFormData("roles");
+    const { updateSites } = useSites();
+    const [state, setState] = useState({
+        newCapability: undefined,
+        errorNewCapability: false,
+        checkboxes: [],
+        selectedCapabilities: [],
+    });
+    const isDefaultRole = !!role?.name && defaultRoleNames.includes(role.name);
+    const getDefaultCapabilitySet = () => {
+        const capabilitySet = new Set();
+        Object.values(wpDefaults.roles)
+            .filter((role) => role.name.toLowerCase() !== "superadmin")
+            .map((role) => role.capabilities.map((capability) => capabilitySet.add(capability)));
+        return capabilitySet;
+    };
+    useEffect(() => {
+        const capabilitySet = getDefaultCapabilitySet();
+        role?.capabilities &&
+            role.capabilities.map((capability) => capabilitySet.add(capability));
+        setState({
+            ...state,
+            checkboxes: Array.from(capabilitySet).map((capability) => ({
+                label: capability,
+                checked: !!(role?.capabilities && role?.capabilities.includes(capability)),
+            })),
+            selectedCapabilities: role?.capabilities ?? [],
+        });
+    }, [role]);
+    const handleAddNewCapabilityValueChange = (value) => {
+        if (value.length > 0 && !value.match(/^[a-z0-9_]+$/)) {
+            setState({
+                ...state,
+                errorNewCapability: true,
+            });
+            return;
+        }
+        setState({
+            ...state,
+            errorNewCapability: false,
+            newCapability: value,
+        });
+    };
+    const handleAddNewCapability = () => {
+        if (!state.newCapability) {
+            return;
+        }
+        const capabilitySet = getDefaultCapabilitySet();
+        const selectedCapabilitySet = new Set();
+        state.selectedCapabilities.forEach((capability) => {
+            selectedCapabilitySet.add(capability);
+            capabilitySet.add(capability);
+        });
+        selectedCapabilitySet.add(state.newCapability);
+        capabilitySet.add(state.newCapability);
+        setState({
+            ...state,
+            checkboxes: Array.from(capabilitySet).map((capability) => ({
+                label: capability,
+                checked: selectedCapabilitySet.has(capability),
+            })),
+            selectedCapabilities: Array.from(selectedCapabilitySet),
+            newCapability: undefined,
+        });
+    };
+    const handleCheckbox = (value, checked) => {
+        const selectedCapabilitySet = new Set();
+        state.selectedCapabilities.forEach((capability) => {
+            selectedCapabilitySet.add(capability);
+        });
+        selectedCapabilitySet[checked ? "add" : "delete"](value);
+        setState({
+            ...state,
+            selectedCapabilities: Array.from(selectedCapabilitySet),
+        });
+    };
+    const handleSubmit = async (data) => {
+        let { name, role } = data;
+        let args = {
+            capabilities: state.selectedCapabilities,
+        };
+        if (name.length > 0) {
+            args = { ...args, name };
+        }
+        if (isUpdate && editState?.roleName && role !== editState?.roleName) {
+            // Change role name
+            args = { ...args, new_role: role };
+            role = editState.roleName;
+        }
+        const serverAction = isUpdate
+            ? actions.roles.update(role, args, {
+                blogId,
+            })
+            : actions.roles.create({ ...args, role }, {
+                blogId,
+            });
+        const result = await execute(serverAction).then(safeParse);
+        if (!result.success) {
+            overlay.snackbar.open("error", result.error);
+            return;
+        }
+        onClose();
+        updateSites();
+    };
+    if (!blogId) {
+        return null;
+    }
+    return (_jsx(Modal, { open: !!open, onClose: onClose, sx: { zIndex: 2 }, children: _jsx(ModalContent, { sx: {
+            // overflowX: "auto",
+            //maxHeight: viewport.isMobile ? "100%" : "100%",
+            }, children: _jsxs("form", { onSubmit: submit(handleSubmit), children: [_jsx(Typography, { size: "xlarge", bold: true, sx: {
+                            mb: 2,
+                        }, children: "Role" }), _jsxs(Stack, { spacing: 2, children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Name" }), _jsx(Input, { size: "large", name: "name", required: true, disabled: isDefaultRole, value: role?.name })] }), _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Role" }), _jsx(Input, { size: "large", name: "role", value: roleName, required: true, disabled: isDefaultRole })] }), _jsxs(Box, { sx: { mt: 1 }, children: [_jsx(Typography, { children: "Capabilities" }), _jsx(Box, { sx: {
+                                            display: "grid",
+                                            gridTemplateColumns: "1fr 1fr 1fr 1fr",
+                                            gap: 1,
+                                            overflowY: "auto",
+                                            my: 1,
+                                            maxHeight: "50dvh",
+                                        }, children: state.checkboxes?.map((v) => (_jsx(Checkbox, { label: v.label, defaultChecked: v.checked, onChange: (e) => {
+                                                handleCheckbox(v.label, e.target.checked);
+                                            } }, v.label))) })] }), _jsxs(Box, { sx: {
+                                    mt: 1,
+                                    display: "grid",
+                                    gridTemplateColumns: "1fr 1fr",
+                                }, children: [_jsxs(Box, { children: [_jsx(Input, { size: "medium", placeholder: "Add New Capability", error: state.errorNewCapability, value: state.newCapability, onChange: (value) => handleAddNewCapabilityValueChange(value), onKeyDown: (e) => {
+                                                    e.code === "Enter" && handleAddNewCapability();
+                                                }, endAdornment: _jsxs(Button, { color: "info", onClick: () => handleAddNewCapability(), sx: {
+                                                        height: 28,
+                                                    }, children: ["Add", " "] }) }, state.selectedCapabilities.length), state.errorNewCapability && (_jsx(Typography, { color: "error", children: "Please use only lowercase letters, numbers, and underscores." }))] }), _jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: _jsx(Button, { size: "medium", type: "submit", disabled: loading, loading: loading, sx: {
+                                                px: 4,
+                                            }, children: "Submit" }) })] })] })] }) }) }));
+};