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

packages/core/src/ui/Nav/Nav.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+
+import { ThemeSelector } from "../Base";
+import { SearchContext, SearchField } from "../Search";
+import { NavMobile } from "./NavMobile";
+import { NavItem } from "./NavItem";
+import { NavTitle } from "./NavTitle";
+import { NavSocial } from "./NavSocial";
+import { NavLink, SocialLink, SearchProviderConfig } from "../types";
+
+export interface ThemeConfig {
+  defaultTheme: "dark" | "light";
+  themeToggleIcon: string;
+}
+
+export interface NavConfig {
+  title: string;
+  logo?: string;
+  version?: string;
+  links: Array<NavLink>;
+  search?: SearchProviderConfig;
+  social?: Array<SocialLink>;
+}
+
+interface Props extends NavConfig, ThemeConfig, React.PropsWithChildren {}
+
+export const Nav: React.FC<Props> = ({
+  children,
+  title,
+  logo,
+  version,
+  links,
+  search,
+  social,
+  defaultTheme,
+  themeToggleIcon,
+}) => {
+  const [modifierKey, setModifierKey] = useState<string>();
+  const [Search, setSearch] = useState<any>(); // TODO types
+
+  useEffect(() => {
+    const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+    setModifierKey(isMac ? "⌘" : "Ctrl ");
+  }, []);
+
+  useEffect(() => {
+    if (search) {
+      setSearch(SearchContext(search.provider));
+    }
+  }, [search]);
+
+  return (
+    <nav className="flex justify-between">
+      {/* Mobile navigation  */}
+      <div className="mr-2 sm:mr-4 flex lg:hidden">
+        <NavMobile links={links}>{children}</NavMobile>
+      </div>
+      {/* Non-mobile navigation */}
+      <div className="flex flex-none items-center">
+        <NavTitle title={title} logo={logo} version={version} />
+        {links && (
+          <div className="hidden lg:flex ml-8 mr-6 sm:mr-8 md:mr-0">
+            {links.map((link) => (
+              <NavItem link={link} key={link.name} />
+            ))}
+          </div>
+        )}
+      </div>
+      {/* Search field and social links */}
+      <div className="relative flex items-center basis-auto justify-end gap-6 xl:gap-8 md:shrink w-full">
+        {Search && (
+          <Search>
+            {({ query }: any) => (
+              <SearchField modifierKey={modifierKey} onOpen={query?.toggle} />
+            )}
+          </Search>
+        )}
+        <ThemeSelector
+          defaultTheme={defaultTheme}
+          toggleIcon={themeToggleIcon}
+        />
+        {social && <NavSocial links={social} />}
+      </div>
+    </nav>
+  );
+};

packages/core/src/ui/Nav/NavItem.tsx

@@ -0,0 +1,21 @@
+import { Menu } from "@headlessui/react";
+import Link from "next/link.js";
+import { BaseLink } from "../Base";
+import { NavLink } from "../types";
+
+interface Props {
+  link: NavLink;
+}
+
+export const NavItem: React.FC<Props> = ({ link }) => {
+  return (
+    <Menu as="div" className="relative">
+      <Link
+        href={link.href}
+        className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
+      >
+        {link.name}
+      </Link>
+    </Menu>
+  );
+};

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>
+    </>
+  );
+};

packages/core/src/ui/Nav/NavSocial.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link.js";
+import { GitHubIcon, DiscordIcon } from "../Icons";
+import { SocialLink, SocialPlatform } from "../types";
+
+interface Props {
+  links: Array<SocialLink>;
+}
+
+const icons: { [K in SocialPlatform]: React.FC<any> } = {
+  github: GitHubIcon,
+  discord: DiscordIcon,
+};
+
+export const NavSocial: React.FC<Props> = ({ links }) => {
+  return (
+    <>
+      {links.map(({ label, href }) => {
+        const Icon = icons[label];
+        return (
+          <Link key={label} href={href} aria-label={label} className="group">
+            <Icon className="h-6 w-6 dark:fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
+          </Link>
+        );
+      })}
+    </>
+  );
+};

packages/core/src/ui/Nav/NavTitle.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link.js";
+
+interface Props {
+  title: string;
+  logo?: string;
+  version?: string;
+}
+
+export const NavTitle: React.FC<Props> = ({ title, logo, version }) => {
+  return (
+    <Link
+      href="/"
+      aria-label="Home page"
+      className="flex items-center font-extrabold text-xl sm:text-2xl text-slate-900 dark:text-white"
+    >
+      {logo && (
+        <img src={logo} alt={title} className="nav-logo mr-1 fill-white" />
+      )}
+      {title && <span>{title}</span>}
+      {version && (
+        <div className="mx-2 rounded-full border border-slate-500 py-1 px-3 text-xs text-slate-500">
+          {version}
+        </div>
+      )}
+    </Link>
+  );
+};

packages/core/src/ui/Nav/index.ts

@@ -0,0 +1 @@
+export { Nav, NavConfig, ThemeConfig } from "./Nav";