@oneuptime/common 14.0.0 → 14.0.2

package/UI/Components/EmptyState/EmptyStateGuideLinks.tsx

@@ -1,124 +0,0 @@
-import Icon from "../Icon/Icon";
-import Link from "../Link/Link";
-import Route from "../../../Types/API/Route";
-import URL from "../../../Types/API/URL";
-import IconProp from "../../../Types/Icon/IconProp";
-import useTranslateValue from "../../Utils/Translation";
-import React, { FunctionComponent, ReactElement } from "react";
-
-export interface EmptyStateGuideLink {
-  // Stable React key, and the suffix of the link's element id.
-  id: string;
-  title: string;
-  // A short qualifier under the title, e.g. a product category.
-  subtitle?: string | undefined;
-  icon?: IconProp | undefined;
-  to: URL | Route;
-  // Defaults to true: a guide is read beside the page, not instead of it.
-  openInNewTab?: boolean | undefined;
-}
-
-export interface ComponentProps {
-  id: string;
-  heading?: string | undefined;
-  links: Array<EmptyStateGuideLink>;
-}
-
-/*
- * Columns come from the width the grid actually has, not the viewport's:
- * an empty state sits in tables beside a side menu, in modals and in full
- * pages, and a viewport breakpoint would squeeze four columns into a
- * table that is only half the screen wide.
- */
-export const GUIDE_GRID_CLASS_NAME: string =
-  "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
-
-/*
- * A grid of setup-guide links for an EmptyState footer, for when there is
- * more than one place to start (one guide per supported product, say).
- *
- * A bulleted list of links under a centred empty state put its bullets at
- * the far edge of the table and its links in the middle; a grid of cards
- * keeps each guide one obvious, generously sized target, and reads the same
- * at any width.
- */
-const EmptyStateGuideLinks: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement | null => {
-  const { translateString } = useTranslateValue();
-
-  if (props.links.length === 0) {
-    return null;
-  }
-
-  const headingId: string = `${props.id}-heading`;
-
-  return (
-    <div id={props.id} className="w-full max-w-5xl text-left">
-      {props.heading && (
-        <h4
-          id={headingId}
-          className="text-xs font-semibold uppercase tracking-wide text-gray-500"
-        >
-          {translateString(props.heading)}
-        </h4>
-      )}
-      <ul
-        role="list"
-        aria-labelledby={props.heading ? headingId : undefined}
-        className={`${props.heading ? "mt-3 " : ""}${GUIDE_GRID_CLASS_NAME}`}
-      >
-        {props.links.map((link: EmptyStateGuideLink): ReactElement => {
-          const openInNewTab: boolean = link.openInNewTab !== false;
-
-          return (
-            <li key={link.id} className="flex">
-              <Link
-                id={`${props.id}-${link.id}`}
-                to={link.to}
-                openInNewTab={openInNewTab}
-                className="group flex w-full items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-colors duration-150 ease-out hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
-              >
-                {link.icon && (
-                  <div
-                    aria-hidden="true"
-                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-gray-50 text-gray-500 ring-1 ring-inset ring-gray-200 group-hover:bg-white group-hover:text-indigo-600"
-                  >
-                    <Icon icon={link.icon} className="h-5 w-5" />
-                  </div>
-                )}
-                <div className="min-w-0 flex-1">
-                  <div className="break-words text-sm font-medium text-gray-900 group-hover:text-indigo-700">
-                    {translateString(link.title)}
-                  </div>
-                  {link.subtitle && (
-                    <div className="break-words text-xs text-gray-500">
-                      {translateString(link.subtitle)}
-                    </div>
-                  )}
-                </div>
-                <div aria-hidden="true" className="shrink-0">
-                  <Icon
-                    icon={
-                      openInNewTab
-                        ? IconProp.ExternalLink
-                        : IconProp.ChevronRight
-                    }
-                    className="h-4 w-4 text-gray-400 group-hover:text-indigo-500"
-                  />
-                </div>
-                {openInNewTab && (
-                  <span className="sr-only">
-                    {translateString("(opens in a new tab)")}
-                  </span>
-                )}
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-export default EmptyStateGuideLinks;

package/build/dist/UI/Components/EmptyState/EmptyStateGuideLinks.js

@@ -1,47 +0,0 @@
-import Icon from "../Icon/Icon";
-import Link from "../Link/Link";
-import IconProp from "../../../Types/Icon/IconProp";
-import useTranslateValue from "../../Utils/Translation";
-import React from "react";
-/*
- * Columns come from the width the grid actually has, not the viewport's:
- * an empty state sits in tables beside a side menu, in modals and in full
- * pages, and a viewport breakpoint would squeeze four columns into a
- * table that is only half the screen wide.
- */
-export const GUIDE_GRID_CLASS_NAME = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
-/*
- * A grid of setup-guide links for an EmptyState footer, for when there is
- * more than one place to start (one guide per supported product, say).
- *
- * A bulleted list of links under a centred empty state put its bullets at
- * the far edge of the table and its links in the middle; a grid of cards
- * keeps each guide one obvious, generously sized target, and reads the same
- * at any width.
- */
-const EmptyStateGuideLinks = (props) => {
-    const { translateString } = useTranslateValue();
-    if (props.links.length === 0) {
-        return null;
-    }
-    const headingId = `${props.id}-heading`;
-    return (React.createElement("div", { id: props.id, className: "w-full max-w-5xl text-left" },
-        props.heading && (React.createElement("h4", { id: headingId, className: "text-xs font-semibold uppercase tracking-wide text-gray-500" }, translateString(props.heading))),
-        React.createElement("ul", { role: "list", "aria-labelledby": props.heading ? headingId : undefined, className: `${props.heading ? "mt-3 " : ""}${GUIDE_GRID_CLASS_NAME}` }, props.links.map((link) => {
-            const openInNewTab = link.openInNewTab !== false;
-            return (React.createElement("li", { key: link.id, className: "flex" },
-                React.createElement(Link, { id: `${props.id}-${link.id}`, to: link.to, openInNewTab: openInNewTab, className: "group flex w-full items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-colors duration-150 ease-out hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2" },
-                    link.icon && (React.createElement("div", { "aria-hidden": "true", className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-gray-50 text-gray-500 ring-1 ring-inset ring-gray-200 group-hover:bg-white group-hover:text-indigo-600" },
-                        React.createElement(Icon, { icon: link.icon, className: "h-5 w-5" }))),
-                    React.createElement("div", { className: "min-w-0 flex-1" },
-                        React.createElement("div", { className: "break-words text-sm font-medium text-gray-900 group-hover:text-indigo-700" }, translateString(link.title)),
-                        link.subtitle && (React.createElement("div", { className: "break-words text-xs text-gray-500" }, translateString(link.subtitle)))),
-                    React.createElement("div", { "aria-hidden": "true", className: "shrink-0" },
-                        React.createElement(Icon, { icon: openInNewTab
-                                ? IconProp.ExternalLink
-                                : IconProp.ChevronRight, className: "h-4 w-4 text-gray-400 group-hover:text-indigo-500" })),
-                    openInNewTab && (React.createElement("span", { className: "sr-only" }, translateString("(opens in a new tab)"))))));
-        }))));
-};
-export default EmptyStateGuideLinks;
-//# sourceMappingURL=EmptyStateGuideLinks.js.map

package/build/dist/UI/Components/EmptyState/EmptyStateGuideLinks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmptyStateGuideLinks.js","sourceRoot":"","sources":["../../../../../UI/Components/EmptyState/EmptyStateGuideLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,IAAI,MAAM,cAAc,CAAC;AAGhC,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AACpD,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAA0C,MAAM,OAAO,CAAC;AAoB/D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAChC,4DAA4D,CAAC;AAE/D;;;;;;;;GAQG;AACH,MAAM,oBAAoB,GAAsC,CAC9D,KAAqB,EACA,EAAE;IACvB,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEhD,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,SAAS,GAAW,GAAG,KAAK,CAAC,EAAE,UAAU,CAAC;IAEhD,OAAO,CACL,6BAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAC,4BAA4B;QACtD,KAAK,CAAC,OAAO,IAAI,CAChB,4BACE,EAAE,EAAE,SAAS,EACb,SAAS,EAAC,6DAA6D,IAEtE,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,CAC5B,CACN;QACD,4BACE,IAAI,EAAC,MAAM,qBACM,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACtD,SAAS,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,qBAAqB,EAAE,IAEnE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAyB,EAAgB,EAAE;YAC3D,MAAM,YAAY,GAAY,IAAI,CAAC,YAAY,KAAK,KAAK,CAAC;YAE1D,OAAO,CACL,4BAAI,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAC,MAAM;gBAChC,oBAAC,IAAI,IACH,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,EAC5B,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,oRAAoR;oBAE7R,IAAI,CAAC,IAAI,IAAI,CACZ,4CACc,MAAM,EAClB,SAAS,EAAC,wKAAwK;wBAElL,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,SAAS,GAAG,CACzC,CACP;oBACD,6BAAK,SAAS,EAAC,gBAAgB;wBAC7B,6BAAK,SAAS,EAAC,2EAA2E,IACvF,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB;wBACL,IAAI,CAAC,QAAQ,IAAI,CAChB,6BAAK,SAAS,EAAC,mCAAmC,IAC/C,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAC3B,CACP,CACG;oBACN,4CAAiB,MAAM,EAAC,SAAS,EAAC,UAAU;wBAC1C,oBAAC,IAAI,IACH,IAAI,EACF,YAAY;gCACV,CAAC,CAAC,QAAQ,CAAC,YAAY;gCACvB,CAAC,CAAC,QAAQ,CAAC,YAAY,EAE3B,SAAS,EAAC,mDAAmD,GAC7D,CACE;oBACL,YAAY,IAAI,CACf,8BAAM,SAAS,EAAC,SAAS,IACtB,eAAe,CAAC,sBAAsB,CAAC,CACnC,CACR,CACI,CACJ,CACN,CAAC;QACJ,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}