Integrate flowershow packages (#923)

* [packages][m]: mv @flowershow/core package here * [packages/core][xs]: rename to @portaljs/core * [package.json][xs]: setup npm workspaces * [packages/core][xs]:replace deprecated rollup executor * [core/package.json][s]: fix mermaid versions * [core/tsconfig][xs]: rm extends * [core/jest.config][xs]: rm coverageDirectory * [core/package.json][xs]: install core-js * [packages.json][s]:use same version for all nrwl packages * [core/.eslintrc][xs]: adjust ignorePatterns * [core/project.json][xs]: rm publish targets * [packages][m]: mv @flowershow/remark-wiki-link here * [packages][m]: mv @flowershow/remark-wiki-link here * [packages][m]: mv @flowershow/remark-embed here * [remark-callouts/project.json][xs]: adjst test pattern * [package.json][s]: install missing deps * [remark-callouts][xs]: adjst fields in package.json * [remark-callouts][s]: rm pubish targets and adjst build executor * [remark-embed/jest.config][xs]: rm unknown option coverageDirectory * [remark-embed][xs]: rm publish targets * [remark-embed][s]: rename to @portaljs/remark-embed * [remark-wiki-link/eslintrc][xs]:adjst ignorePatterns * [package.json][xs]: install missing deps * [remark-wiki-link/test][xs]:specify format - also temporarily force any type on htmlExtension * [remark-wiki-link/README][xs]: replace @flowershow with @portaljs * [remark-wiki-link][xs]:rm old changelog * [remark-wiki-link][xs]: adjst package.json * [remark-wiki-link/project.json][xs]: rm publish targets * [core][s]: rm old changelog * [core/README][xs]:correct scope name * [remark-callouts/README][xs]: add @portaljs to pckg name * [remark-embed/README][xs]: add @portaljs to pckg name * [package-lock.json][xs]: refresh after rebasing on main
2023-06-07 12:21:00 +02:00
parent 0b8c56bcac
commit af134cac8b
139 changed files with 10264 additions and 2303 deletions
--- a/packages/core/src/ui/Nav/NavMobile.tsx
+++ b/packages/core/src/ui/Nav/NavMobile.tsx
@@ -0,0 +1,116 @@
+import { Dialog, Menu } from "@headlessui/react";
+import Link from "next/link.js";
+import { useRouter } from "next/router.js";
+import { useEffect, useState } from "react";
+import { SearchContext, SearchField } from "../Search";
+import { MenuIcon, CloseIcon } from "../Icons";
+import { NavLink, SearchProviderConfig } from "../types";
+
+interface Props extends React.PropsWithChildren {
+  author?: string;
+  links?: Array<NavLink>;
+  search?: SearchProviderConfig;
+}
+
+// TODO why mobile navigation only accepts author and regular nav accepts different things like title, logo, version
+export const NavMobile: React.FC<Props> = ({
+  children,
+  links,
+  search,
+  author,
+}) => {
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(false);
+  const [Search, setSearch] = useState<any>(); // TODO types
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    function onRouteChange() {
+      setIsOpen(false);
+    }
+
+    router.events.on("routeChangeComplete", onRouteChange);
+    router.events.on("routeChangeError", onRouteChange);
+
+    return () => {
+      router.events.off("routeChangeComplete", onRouteChange);
+      router.events.off("routeChangeError", onRouteChange);
+    };
+  }, [router, isOpen]);
+
+  useEffect(() => {
+    if (search) {
+      setSearch(SearchContext(search.provider));
+    }
+  }, [search]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        className="relative"
+        aria-label="Open navigation"
+      >
+        <MenuIcon className="h-6 w-6 stroke-slate-500" />
+      </button>
+      <Dialog
+        open={isOpen}
+        onClose={setIsOpen}
+        className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-background-dark/50 pr-10 backdrop-blur lg:hidden"
+        aria-label="Navigation"
+      >
+        <Dialog.Panel className="relative min-h-full w-full max-w-xs bg-background px-4 pt-5 pb-12 dark:bg-background-dark sm:px-6">
+          <div className="flex items-center mb-6">
+            <button
+              type="button"
+              onClick={() => setIsOpen(false)}
+              aria-label="Close navigation"
+            >
+              <CloseIcon className="h-6 w-6 stroke-slate-500" />
+            </button>
+            <Link
+              href="/"
+              className="ml-6"
+              aria-label="Home page"
+              legacyBehavior
+            >
+              {/* <Logomark className="h-9 w-9" /> */}
+              <div className="font-extrabold text-primary dark:text-primary-dark text-2xl ml-6">
+                {author}
+              </div>
+            </Link>
+          </div>
+          {Search && (
+            <Search>
+              {({ query }: any) => <SearchField mobile onOpen={query.toggle} />}
+            </Search>
+          )}
+          {links && (
+            <ul className="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200">
+              {links.map((link) => (
+                <Menu as="div" key={link.name} className="relative">
+                  <Menu.Button>
+                    <li key={link.href}>
+                      <Link
+                        href={link.href}
+                        className={`
+                  block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300`}
+                      >
+                        {link.name}
+                      </Link>
+                    </li>
+                  </Menu.Button>
+                </Menu>
+              ))}
+            </ul>
+          )}
+          {/* <div className="pt-6 border border-t-2">
+                        {children}
+                    </div> */}
+        </Dialog.Panel>
+      </Dialog>
+    </>
+  );
+};