@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/notifications/BackendErrorNotification.tsx

@@ -0,0 +1,160 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { ComponentProps, FC } from "react";
+import { BackendError } from "@scm-manager/ui-api";
+import Notification from "./Notification";
+import { useTranslation } from "react-i18next";
+
+type Props = Omit<ComponentProps<typeof Notification>, "type" | "role"> & {
+  error: BackendError;
+};
+
+const BackendErrorNotification: FC<Props> = ({ error, ...props }) => {
+  const [t] = useTranslation("plugins");
+
+  const renderErrorName = () => {
+    const translation = t(`errors.${error.errorCode}.displayName`);
+    if (translation === error.errorCode) {
+      return error.message;
+    }
+    return translation;
+  };
+
+  const renderErrorDescription = () => {
+    const translation = t(`errors.${error.errorCode}.description`);
+    if (translation === error.errorCode) {
+      return "";
+    }
+    return translation;
+  };
+
+  const renderAdditionalMessages = () => {
+    if (error.additionalMessages) {
+      return (
+        <>
+          <hr />
+          {error.additionalMessages
+            .map((additionalMessage) =>
+              additionalMessage.key ? t(`errors.${additionalMessage.key}.description`) : additionalMessage.message
+            )
+            .map((message) => (
+              <p>{message}</p>
+            ))}
+          <hr />
+        </>
+      );
+    }
+  };
+
+  const renderViolations = () => {
+    if (error.violations) {
+      return (
+        <>
+          <p>
+            <strong>{t("errors.violations")}</strong>
+          </p>
+          <ul>
+            {error.violations.map((violation, index) => {
+              return (
+                <li key={index}>
+                  {violation.path && <strong>{violation.path}:</strong>} {violation.message}{" "}
+                  {violation.key && t(violation.key)}
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      );
+    }
+  };
+
+  const renderMetadata = () => {
+    return (
+      <>
+        {renderContext()}
+        {renderMoreInformationLink()}
+        <div className="level is-size-7">
+          <div className="left" aria-hidden={true}>
+            {t("errors.transactionId")} {error.transactionId}
+          </div>
+          <div className="right" aria-hidden={true}>
+            {t("errors.errorCode")} {error.errorCode}
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const renderContext = () => {
+    if (error.context) {
+      return (
+        <>
+          <p>
+            <strong>{t("errors.context")}</strong>
+          </p>
+          <ul>
+            {error.context.map((context, index) => {
+              return (
+                <li key={index}>
+                  <strong>{context.type}:</strong> {context.id}
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      );
+    }
+  };
+
+  const renderMoreInformationLink = () => {
+    if (error.url) {
+      return (
+        <p>
+          {t("errors.moreInfo")}{" "}
+          <a href={error.url} target="_blank" rel="noreferrer" aria-label={t("error.link")}>
+            {error.errorCode}
+          </a>
+        </p>
+      );
+    }
+  };
+
+  return (
+    <Notification type="danger" role="alert" {...props}>
+      <div className="content">
+        <p className="subtitle">
+          {t("error.subtitle")}
+          {": "}
+          {renderErrorName()}
+        </p>
+        <p>{renderErrorDescription()}</p>
+        {renderAdditionalMessages()}
+        <p>{renderViolations()}</p>
+        {renderMetadata()}
+      </div>
+    </Notification>
+  );
+};
+
+export default BackendErrorNotification;

package/src/base/notifications/ErrorNotification.tsx

@@ -0,0 +1,73 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { ComponentProps, FC } from "react";
+import { useTranslation } from "react-i18next";
+import { BackendError, ForbiddenError, UnauthorizedError, urls } from "@scm-manager/ui-api";
+import Notification from "./Notification";
+import BackendErrorNotification from "./BackendErrorNotification";
+import { useLocation } from "react-router-dom";
+
+type Props = ComponentProps<typeof BasicErrorMessage> & {
+  error?: Error | null;
+};
+
+const LoginLink: FC = () => {
+  const [t] = useTranslation("commons");
+  const location = useLocation();
+  const from = encodeURIComponent(location.hash ? location.pathname + location.hash : location.pathname);
+
+  return <a href={urls.withContextPath(`/login?from=${from}`)}>{t("errorNotification.loginLink")}</a>;
+};
+
+const BasicErrorMessage: FC<Omit<ComponentProps<typeof Notification>, "type" | "role">> = ({ children, ...props }) => {
+  const [t] = useTranslation("commons");
+
+  return (
+    <Notification type="danger" role="alert" {...props}>
+      <strong>{t("errorNotification.prefix")}:</strong> {children}
+    </Notification>
+  );
+};
+
+const ErrorNotification: FC<Props> = ({ error, ...props }) => {
+  const [t] = useTranslation("commons");
+  if (error) {
+    if (error instanceof BackendError) {
+      return <BackendErrorNotification error={error} {...props} />;
+    } else if (error instanceof UnauthorizedError) {
+      return (
+        <BasicErrorMessage {...props}>
+          {t("errorNotification.timeout")} <LoginLink />
+        </BasicErrorMessage>
+      );
+    } else if (error instanceof ForbiddenError) {
+      return <BasicErrorMessage {...props}>{t("errorNotification.forbidden")}</BasicErrorMessage>;
+    } else {
+      return <BasicErrorMessage {...props}>{error.message}</BasicErrorMessage>;
+    }
+  }
+  return null;
+};
+
+export default ErrorNotification;

package/src/base/notifications/Notification.tsx

@@ -0,0 +1,48 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { HTMLAttributes } from "react";
+import classNames from "classnames";
+
+type NotificationType = "primary" | "info" | "success" | "warning" | "danger" | "inherit";
+
+type Props = {
+  type?: NotificationType;
+  onClose?: () => void;
+  role?: string;
+};
+
+const Notification = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & Props>(
+  ({ type = "info", onClose, className, children, role, ...props }, ref) => {
+    const color = type !== "inherit" ? "is-" + type : "";
+
+    return (
+      <div className={classNames("notification", color, className)} role={role} ref={ref}>
+        {onClose ? <button className="delete" onClick={onClose} /> : null}
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Notification;

package/src/base/notifications/index.tsx

@@ -0,0 +1,27 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export { default as Notification } from "./Notification";
+export { default as ErrorNotification } from "./ErrorNotification";
+export { default as BackendErrorNotification } from "./BackendErrorNotification";

package/src/base/overlays/dialog/Dialog.stories.tsx

@@ -0,0 +1,64 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import StoryRouter from "storybook-react-router";
+import { ComponentMeta, StoryFn } from "@storybook/react";
+import React, { ComponentProps } from "react";
+import { Button } from "../../buttons";
+import Dialog from "./Dialog";
+
+export default {
+  title: "Dialog",
+  component: Dialog,
+  decorators: [StoryRouter()],
+  render: (story) => <div style={{ height: "100vh" }}>{story}</div>,
+} as ComponentMeta<typeof Dialog>;
+
+const Template: StoryFn<ComponentProps<typeof Dialog>> = (args) => <Dialog {...args} />;
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  title: "My Dialog",
+  trigger: <Button>Open Dialog</Button>,
+  description: "Do you really want to do this ?",
+  children: (
+    <table>
+      <tr>
+        <th>Yes</th>
+        <th>No</th>
+      </tr>
+      <tr>
+        <td>42</td>
+        <td>12</td>
+      </tr>
+    </table>
+  ),
+  footer: [
+    <Button>Do it</Button>,
+    <Button variant="primary" autoFocus>
+      Cancel
+    </Button>,
+  ],
+} as ComponentProps<typeof Dialog>;

package/src/base/overlays/dialog/Dialog.tsx

@@ -0,0 +1,85 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { DialogProps } from "@radix-ui/react-dialog";
+import React, { ComponentProps, ReactComponentElement, ReactElement, ReactNode, useCallback } from "react";
+import { Button } from "../../buttons";
+import { useTranslation } from "react-i18next";
+
+export const CloseButton = React.forwardRef<HTMLButtonElement, ComponentProps<typeof Button>>(
+  ({ children, ...props }, ref) => (
+    <RadixDialog.Close asChild>
+      <Button {...props} ref={ref}>
+        {children}
+      </Button>
+    </RadixDialog.Close>
+  )
+);
+
+type Props = {
+  trigger: ReactComponentElement<typeof Button>;
+  title: ReactNode;
+  description?: ReactNode;
+  footer?: ReactElement[] | ((close: () => void) => ReactElement[]);
+} & Pick<DialogProps, "onOpenChange" | "open" | "children">;
+
+/**
+ * @beta
+ * @since 2.46.0
+ */
+const Dialog = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, onOpenChange, open, footer, title, trigger, description }, ref) => {
+    const contentProps = description ? {} : { "aria-describedby": undefined };
+    const close = useCallback(() => onOpenChange && onOpenChange(false), [onOpenChange]);
+    const [t] = useTranslation("commons");
+    return (
+      <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+        <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger>
+        <RadixDialog.Portal>
+          <RadixDialog.Overlay className="modal-background" />
+          <RadixDialog.Content className="modal is-active" ref={ref} {...contentProps}>
+            <div className="modal-card">
+              <div className="modal-card-head">
+                <RadixDialog.Title className="modal-card-title">{title}</RadixDialog.Title>
+                <RadixDialog.Close asChild>
+                  <button className="delete" aria-label={t("dialog.closeButton.ariaLabel")} />
+                </RadixDialog.Close>
+              </div>
+              <div className="modal-card-body">
+                {description ? <RadixDialog.Description>{description}</RadixDialog.Description> : null}
+                {children}
+              </div>
+              {footer ? (
+                <div className="modal-card-foot">{typeof footer === "function" ? footer(close) : footer}</div>
+              ) : null}
+            </div>
+          </RadixDialog.Content>
+        </RadixDialog.Portal>
+      </RadixDialog.Root>
+    );
+  }
+);
+
+export default Dialog;

package/src/base/overlays/index.ts

@@ -0,0 +1,44 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import MenuComponent, { MenuButton, MenuDialog, MenuExternalLink, MenuLink } from "./menu/Menu";
+import MenuTrigger, { DefaultMenuTrigger } from "./menu/MenuTrigger";
+import DialogComponent, { CloseButton } from "./dialog/Dialog";
+
+export { default as Tooltip } from "./tooltip/Tooltip";
+
+export const Menu = Object.assign(MenuComponent, {
+  Button: MenuButton,
+  Link: MenuLink,
+  ExternalLink: MenuExternalLink,
+  DialogButton: MenuDialog,
+  Trigger: MenuTrigger,
+  DefaultTrigger: DefaultMenuTrigger,
+});
+
+export const Dialog = Object.assign(DialogComponent, {
+  CloseButton,
+});
+
+export { default as Popover } from "./popover/Popover";

package/src/base/overlays/menu/Menu.stories.tsx

@@ -0,0 +1,78 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import StoryRouter from "storybook-react-router";
+import { ComponentMeta, StoryFn } from "@storybook/react";
+import React, { ComponentProps } from "react";
+import Menu, { MenuButton, MenuDialog, MenuExternalLink, MenuLink } from "./Menu";
+import { Button, Icon } from "../../buttons";
+import { CloseButton } from "../dialog/Dialog";
+
+export default {
+  title: "Menu",
+  component: Menu,
+  decorators: [StoryRouter()],
+} as ComponentMeta<typeof Menu>;
+
+const Template: StoryFn<ComponentProps<typeof Menu>> = (args) => <Menu {...args} />;
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  children: [
+    // eslint-disable-next-line no-console
+    <MenuButton onSelect={() => console.log("A button has been clicked")}>
+      <Icon />A button
+    </MenuButton>,
+    <MenuLink to="/repos">
+      <Icon />A link
+    </MenuLink>,
+    <MenuExternalLink href="https://scm-manager.org">
+      <Icon>link</Icon>An external link
+    </MenuExternalLink>,
+    <MenuButton disabled>
+      <Icon>trash</Icon>A disabled button
+    </MenuButton>,
+    <MenuDialog
+      title="My Dialog"
+      description="Do you really want to do this ?"
+      footer={[<Button autoFocus>Do it</Button>, <CloseButton variant="primary">Cancel</CloseButton>]}
+      dialogContent={
+        <table>
+          <tr>
+            <th>Yes</th>
+            <th>No</th>
+          </tr>
+          <tr>
+            <td>42</td>
+            <td>12</td>
+          </tr>
+        </table>
+      }
+    >
+      <Icon />
+      Open Dialog
+    </MenuDialog>,
+  ],
+} as ComponentProps<typeof Menu>;