@strapi-community/plugin-better-auth-dashboard 1.0.0-alpha.9 → 1.0.0-beta.2

package/dist/admin/Root-CsiOnzlB.js

@@ -0,0 +1,367 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactQuery = require("react-query");
+const reactRouterDom = require("react-router-dom");
+const index = require("./index-BCBu-0nr.js");
+const designSystem = require("@strapi/design-system");
+const admin = require("@strapi/strapi/admin");
+const reactIntl = require("react-intl");
+require("@strapi/icons");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const HEIGHT_TOP_NAVIGATION = "6.4rem";
+const HEIGHT_TOP_NAVIGATION_MEDIUM = "5.6rem";
+const WIDTH_SIDE_NAVIGATION = "23.2rem";
+const MainSubNav = styled__default.default(designSystem.SubNav)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  display: flex;
+  flex-direction: column;
+  border-right: 0;
+  box-shadow: none;
+  position: relative;
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    width: ${WIDTH_SIDE_NAVIGATION};
+    position: sticky;
+    top: 0;
+    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+    overscroll-behavior: contain;
+  }
+`;
+const Main = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(MainSubNav, { ...props, children });
+const StyledLink = styled__default.default(reactRouterDom.NavLink)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  height: 32px;
+  color: ${({ theme }) => theme.colors.neutral800};
+
+  &.active > div {
+    background-color: ${({ theme }) => theme.colors.primary100};
+    color: ${({ theme }) => theme.colors.primary700};
+    font-weight: 500;
+  }
+
+  &:hover.active > div {
+    background-color: ${({ theme }) => theme.colors.primary100};
+    color: ${({ theme }) => theme.colors.primary700};
+    font-weight: 500;
+  }
+
+  &:hover > div {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const Link = (props) => {
+  const { to, label, endAction, handleClick, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { to, ...rest, onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      width: "100%",
+      paddingLeft: 3,
+      paddingRight: 3,
+      paddingTop: { initial: 1, large: 0 },
+      paddingBottom: { initial: 1, large: 0 },
+      borderRadius: 1,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Flex,
+        {
+          justifyContent: "space-between",
+          width: "100%",
+          gap: { initial: 2, large: 1 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Typography,
+              {
+                tag: "div",
+                lineHeight: "32px",
+                width: { initial: "80dvw", medium: "100%" },
+                overflow: "hidden",
+                style: { textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, children: endAction })
+          ]
+        }
+      )
+    }
+  ) });
+};
+const StyledHeader = styled__default.default(designSystem.Flex)`
+  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};
+  height: ${HEIGHT_TOP_NAVIGATION};
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    flex: 0 0 ${HEIGHT_TOP_NAVIGATION_MEDIUM};
+    height: ${HEIGHT_TOP_NAVIGATION_MEDIUM};
+  }
+`;
+const Header = ({ label }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledHeader,
+    {
+      justifyContent: "space-between",
+      paddingLeft: 5,
+      paddingRight: 5,
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", children: label })
+    }
+  );
+};
+const Sections = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      paddingTop: { initial: 5, large: 4 },
+      paddingBottom: { initial: 5, large: 4 },
+      paddingLeft: { initial: 3, large: 0 },
+      paddingRight: { initial: 3, large: 0 },
+      maxWidth: { initial: "100%", medium: WIDTH_SIDE_NAVIGATION },
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { tag: "ul", gap: 6, direction: "column", alignItems: "stretch", ...props, children: children.map((child, index2) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: child }, index2);
+      }) })
+    }
+  );
+};
+const Section = ({
+  label,
+  children,
+  badgeLabel
+}) => {
+  const listId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        paddingLeft: {
+          initial: 3,
+          large: 5
+        },
+        paddingRight: {
+          initial: 3,
+          large: 5
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", justifyContent: "space-between", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 1, children: badgeLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "neutral150", textColor: "neutral600", children: badgeLabel }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Flex,
+      {
+        tag: "ol",
+        id: listId,
+        direction: "column",
+        gap: { initial: 2, large: "2px" },
+        alignItems: "stretch",
+        marginLeft: {
+          initial: 0,
+          large: 2
+        },
+        marginRight: {
+          initial: 0,
+          large: 2
+        },
+        children: children.map((child, index2) => {
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: child }, index2);
+        })
+      }
+    )
+  ] });
+};
+styled__default.default.button`
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding-left: ${({ theme }) => theme.spaces[3]};
+  padding-right: ${({ theme }) => theme.spaces[3]};
+  padding-top: ${({ theme }) => theme.spaces[2]};
+  padding-bottom: ${({ theme }) => theme.spaces[2]};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+styled__default.default.li`
+  ${StyledLink} > div {
+    padding-left: 36px;
+  }
+`;
+styled__default.default(designSystem.Box)`
+  width: 100%;
+
+  ${MainSubNav} {
+    background-color: transparent;
+    border-right: none;
+  }
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    overflow: hidden;
+
+    ${MainSubNav} {
+      top: 0;
+    }
+  }
+`;
+const Content = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ScrollArea, { children });
+};
+const SubNav = {
+  Main,
+  Content,
+  Header,
+  Link,
+  Sections,
+  Section
+};
+const Nav = ({ isFullPage = false }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const queryClient = reactQuery.useQueryClient();
+  const checkUserHasPermissions = admin.useAuth(
+    "DashboardNav",
+    (state) => state.checkUserHasPermissions
+  );
+  const dashLinks = index.getDashLinks();
+  const headerLabel = formatMessage({
+    id: index.getTranslation("components.nav.header"),
+    defaultMessage: "Authentication"
+  });
+  const [sections, setSections] = react.useState([]);
+  react.useEffect(() => {
+    let isCurrent = true;
+    const loadAuthorizedSections = async () => {
+      const authorizedSections = await Promise.all(
+        Object.values(dashLinks).map(async (section) => ({
+          ...section,
+          links: (await Promise.all(
+            section.links.map(async (link) => {
+              const permissions = link.permissions ?? [];
+              const [hasPermission, isAvailable] = await Promise.all([
+                permissions.length === 0 ? true : checkUserHasPermissions(permissions).then(
+                  (authorizedPermissions) => authorizedPermissions.length > 0
+                ),
+                queryClient.fetchQuery(
+                  index.getDashLinkAvailabilityQueryKey(link),
+                  () => index.resolveDashLinkAvailability(link),
+                  { staleTime: index.DASH_LINK_AVAILABILITY_STALE_TIME }
+                )
+              ]);
+              return hasPermission && isAvailable ? link : null;
+            })
+          )).filter((link) => link !== null)
+        }))
+      );
+      if (isCurrent) {
+        setSections(
+          authorizedSections.filter((section) => section.links.length > 0).sort(
+            (a, b) => (a.priority ?? 0) - (b.priority ?? 0) || a.id.localeCompare(b.id)
+          )
+        );
+      }
+    };
+    loadAuthorizedSections();
+    return () => {
+      isCurrent = false;
+    };
+  }, [checkUserHasPermissions, dashLinks, queryClient]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(SubNav.Main, { children: [
+    !isFullPage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SubNav.Header, { label: headerLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(SubNav.Content, { children: [
+      isFullPage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SubNav.Header, { label: headerLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(SubNav.Sections, { "data-testid": "main-nav", children: sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
+        SubNav.Section,
+        {
+          label: formatMessage(section.intlLabel),
+          children: section.links.map((link) => {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              SubNav.Link,
+              {
+                to: `/plugins/${index.PLUGIN_ID}/${link.to.replace(/^\/+/, "")}`,
+                label: formatMessage(link.intlLabel),
+                "data-testid": `nav-${link.id}`,
+                children: formatMessage(link.intlLabel)
+              },
+              link.id
+            );
+          })
+        },
+        section.id
+      )) })
+    ] })
+  ] });
+};
+const RESPONSIVE_DEFAULT_SPACING = {
+  initial: 4,
+  medium: 6,
+  large: 10
+};
+const App = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": "dashboard-root",
+      style: { display: "flex", flex: "1 1 auto", minHeight: "100vh" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Root, { sideNav: /* @__PURE__ */ jsxRuntime.jsx(Nav, {}), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: formatMessage({
+          id: index.getTranslation("common.page.title"),
+          defaultMessage: "Authentication"
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Box,
+          {
+            display: { initial: "block", medium: "none" },
+            paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: RESPONSIVE_DEFAULT_SPACING,
+            paddingTop: RESPONSIVE_DEFAULT_SPACING,
+            children: /* @__PURE__ */ jsxRuntime.jsx(admin.BackButton, { fallback: "/plugins/better-auth-dashboard" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+      ] })
+    }
+  );
+};
+function Root() {
+  const isDashboardIndex = reactRouterDom.useMatch({
+    path: `/plugins/${index.PLUGIN_ID}`,
+    end: true
+  });
+  const queryClient = react.useMemo(
+    () => new reactQuery.QueryClient({
+      defaultOptions: {
+        queries: { retry: 1, refetchOnWindowFocus: false, staleTime: 3e4 }
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: isDashboardIndex ? /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "overview", replace: true }) : /* @__PURE__ */ jsxRuntime.jsx(App, {}) });
+}
+exports.Root = Root;
+exports.default = Root;