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/Nav.tsx
+++ b/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>
+  );
+};