@acmekit/docs-ui 2.13.41

package/src/components/ErrorPage/Icon/index.tsx

@@ -0,0 +1,428 @@
+import React from "react"
+
+export const ErrorPageIcon = () => {
+  return (
+    <svg
+      width="135"
+      height="147"
+      viewBox="0 0 135 147"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M134.25 128.75V139.5C134.25 143.228 131.228 146.25 127.5 146.25H7.5C3.77208 146.25 0.75 143.228 0.75 139.5V128.75H134.25Z"
+        className="fill-acmekit-bg-base-hover"
+      />
+      <path
+        d="M134.25 128.75V139.5C134.25 143.228 131.228 146.25 127.5 146.25H7.5C3.77208 146.25 0.75 143.228 0.75 139.5V128.75H134.25Z"
+        className="stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="3.5"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="7.44281"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="11.3856"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="15.3284"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="19.2712"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="23.2141"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="27.1569"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="31.0997"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="35.0425"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="38.9853"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="42.9281"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="46.8709"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="50.8137"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="54.7566"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="58.6994"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="62.6422"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="66.585"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="70.5278"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="74.4706"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="78.4135"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="82.3563"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="86.2991"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="90.2419"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="94.1847"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="98.1275"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="102.07"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="106.013"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="109.956"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="113.899"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="117.842"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="121.784"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="125.727"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="129.67"
+        y="129.5"
+        width="1.83"
+        height="16"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <path
+        d="M109.5 0.75C123.169 0.75 134.25 11.831 134.25 25.5V130.25H0.75V25.5C0.75 11.831 11.831 0.75 25.5 0.75H109.5Z"
+        className="fill-acmekit-bg-base stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="13.5"
+        y="113.5"
+        width="12"
+        height="4"
+        rx="2"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="85.5"
+        y="101.5"
+        width="36"
+        height="4"
+        rx="2"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="12.75"
+        y="12.75"
+        width="109.5"
+        height="77.5"
+        rx="12.75"
+        className="fill-acmekit-bg-base stroke-acmekit-bg-switch-off-hover"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="18.75"
+        y="18.75"
+        width="97.5"
+        height="65.5"
+        rx="6.75"
+        className="fill-acmekit-bg-base-hover stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="18.75"
+        y="17.75"
+        width="97.5"
+        height="65.5"
+        rx="6.75"
+        className="fill-acmekit-bg-base-hover stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M99.0345 70.1379H96.9655C96.68 70.1379 96.4482 69.9062 96.4482 69.6207C96.4482 68.7641 97.1434 68.069 98 68.069C98.8565 68.069 99.5517 68.7641 99.5517 69.6207C99.5517 69.9062 99.32 70.1379 99.0345 70.1379Z"
+        className="fill-acmekit-fg-subtle"
+      />
+      <path
+        d="M98 73.5C102.142 73.5 105.5 70.1421 105.5 66C105.5 61.8579 102.142 58.5 98 58.5C93.8579 58.5 90.5 61.8579 90.5 66C90.5 70.1421 93.8579 73.5 98 73.5Z"
+        className="stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M93.6035 64.1897L96.1897 66.7759"
+        className="stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M96.1897 64.1897L93.6035 66.7759"
+        className="stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.8104 64.1897L102.397 66.7759"
+        className="stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M102.397 64.1897L99.8104 66.7759"
+        className="stroke-acmekit-fg-subtle"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <rect
+        x="37.5"
+        y="37.5"
+        width="14"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="54.5"
+        y="37.5"
+        width="16"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="37.5"
+        y="69.5"
+        width="16"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="53.5"
+        y="53.5"
+        width="26"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="60.5"
+        y="45.5"
+        width="28"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="45.5"
+        y="45.5"
+        width="12"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="45.5"
+        y="61.5"
+        width="16"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="64.5"
+        y="61.5"
+        width="10"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="29.5"
+        y="29.5"
+        width="16"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="48.5"
+        y="29.5"
+        width="8"
+        height="3"
+        rx="1.5"
+        className="fill-acmekit-bg-switch-off-hover"
+      />
+      <rect
+        x="55.5"
+        y="68.5"
+        width="2"
+        height="5"
+        className="fill-acmekit-fg-subtle"
+      />
+    </svg>
+  )
+}

package/src/components/ErrorPage/index.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { ErrorPageIcon } from "./Icon"
+import { Link } from "react-router-dom"
+import { Button } from "../Button"
+import { GITHUB_ISSUES_LINK } from "../../constants"
+
+export const ErrorPage = () => {
+  return (
+    <div className="w-full h-full bg-acmekit-bg-subtle flex items-center justify-center">
+      <div className="flex gap-docs_1.5 flex-col items-center justify-center w-fit max-w-lg">
+        <ErrorPageIcon />
+        <div className="flex flex-col items-center gap-docs_0.5">
+          <h1 className="text-acmekit-fg-base text-2xl">
+            Oops! Something went wrong.
+          </h1>
+          <span className="text-acmekit-fg-subtle txt-large-plus text-pretty text-center">
+            Don’t worry. Our team have automatically been notified of this issue
+            and they are working on it. Please try again later.
+          </span>
+        </div>
+        <div className="flex items-center justify-center gap-docs_0.75">
+          <Link to={GITHUB_ISSUES_LINK} target="_blank" rel="noreferrer">
+            <Button variant="secondary">Report issue</Button>
+          </Link>
+          <Link to="/">
+            <Button variant="primary">Go to homepage</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/Feedback/Solutions/index.tsx

@@ -0,0 +1,105 @@
+
+import React, { useEffect, useState } from "react"
+import { Link } from "../../../components/Link"
+import { MDXComponents } from "../../../components/MDXComponents"
+
+export type SolutionsProps = {
+  feedback: boolean
+  message?: string
+}
+
+export type GitHubSearchItem = {
+  url: string
+  html_url: string
+  title: string
+  [key: string]: unknown
+}
+
+const Ul = MDXComponents["ul"] as React.FC<
+  React.HTMLAttributes<HTMLUListElement>
+>
+const Li = MDXComponents["li"] as React.FC<React.HTMLAttributes<HTMLLIElement>>
+
+export const Solutions = ({ feedback, message }: SolutionsProps) => {
+  const [possibleSolutionsQuery, setPossibleSolutionsQuery] =
+    useState<string>("")
+  const [possibleSolutions, setPossibleSolutions] = useState<
+    GitHubSearchItem[]
+  >([])
+
+  function constructQuery(searchQuery: string) {
+    return `${searchQuery} repo:acmekit/acmekit is:closed is:issue`
+  }
+
+  async function searchGitHub(query: string) {
+    return fetch(
+      `https://api.github.com/search/issues?q=${encodeURIComponent(query)}&sort=updated&per_page=3&advanced_search=true`,
+      {
+        headers: {
+          Accept: "application/vnd.github.v3+json",
+        },
+      }
+    ).then(async (res) => res.json() as Promise<{ items: GitHubSearchItem[] }>)
+  }
+
+  useEffect(() => {
+    if (!feedback) {
+      let query = constructQuery(
+        // Github does not allow queries longer than 256 characters
+        message ? message.substring(0, 256) : document.title
+      )
+      searchGitHub(query)
+        .then(async (result) => {
+          if (!result.items.length && message) {
+            query = constructQuery(document.title)
+            result = await searchGitHub(query)
+          }
+
+          setPossibleSolutionsQuery(query)
+          setPossibleSolutions(result.items)
+        })
+        .catch((err) => console.error(err))
+    } else {
+      setPossibleSolutionsQuery("")
+      setPossibleSolutions([])
+    }
+  }, [feedback, message])
+
+  return (
+    <>
+      {possibleSolutions.length > 0 && (
+        <div className="txt-medium">
+          <span className="my-docs_1 mx-0 inline-block">
+            If you faced a problem, here are some possible solutions from
+            GitHub:
+          </span>
+          <Ul>
+            {possibleSolutions.map((solution) => (
+              <Li key={solution.url} data-testid="solution-item">
+                <Link
+                  href={solution.html_url}
+                  target="_blank"
+                  rel="noreferrer"
+                  variant="content"
+                >
+                  {solution.title}
+                </Link>
+              </Li>
+            ))}
+          </Ul>
+          <span>
+            Explore more issues in{" "}
+            <Link
+              href={`https://github.com/acmekit/acmekit/issues?q=${possibleSolutionsQuery}`}
+              target="_blank"
+              rel="noreferrer"
+              variant="content"
+            >
+              the GitHub repository
+            </Link>
+          </span>
+        </div>
+      )}
+    </>
+  )
+}