aidos-ui 3.0.0 → 3.0.1

package/src/pages/_app.tsx

@@ -1,9 +1,8 @@
 import type { AppProps } from "next/app";
 import Link from "next/link";
 import Head from "next/head";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
-  Size,
   TABLET,
   cssVar,
   darkTheme,
@@ -14,13 +13,9 @@ import {
   mobile,
   tablet,
 } from "../jss";
-import { MDXProvider } from "@mdx-js/react";
 import { Providers } from "../Providers";
 import { BaseView } from "../BaseView";
-import { H1, H2, H3, Li, P, Span } from "../Text";
 import { ListDivider } from "../ListDivider";
-import { ListHeaderItem } from "../ListHeaderItem";
-import { Roboto } from "next/font/google";
 import { List } from "../List";
 import { ListLinkItem } from "../ListLinkItem";
 import { Row } from "../Row";
@@ -36,208 +31,26 @@ import "./prism.css";
 import { IconButton } from "../IconButton";
 import { Column } from "../Column";
 import { Icon } from "../Icon";
-import { BaseLink, BaseLinkComponentOverrideContext } from "../BaseLink";
-
-const monospace = Roboto({ weight: "400", subsets: ["latin"] });
-
-type PageLink = {
-  type: "link";
-  page: string;
-  name?: string;
-  headlineSize?: Size;
-  headlineBold?: boolean;
-};
-
-type Page =
-  | PageLink
-  | {
-      type: "section";
-      label: string;
-      content: Array<PageLink>;
-    };
-
-const pages: Array<Page> = [
-  {
-    type: "link",
-    page: "",
-    name: "Aidos UI",
-    headlineSize: "large",
-    headlineBold: true,
-  },
-  {
-    type: "section",
-    label: "CSS",
-    content: [{ type: "link", page: "css-in-js", name: "jss" }],
-  },
-  {
-    type: "section",
-    label: "Primary components",
-    content: [
-      { type: "link", page: "FlexLayout" },
-      { type: "link", page: "Text" },
-      { type: "link", page: "TextPairing" },
-      { type: "link", page: "Icon" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Buttons and links",
-    content: [
-      { type: "link", page: "Button" },
-      { type: "link", page: "Link" },
-      { type: "link", page: "IconButton" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Inputs",
-    content: [
-      { type: "link", page: "TextInput" },
-      { type: "link", page: "RangeInput" },
-      { type: "link", page: "TimeInput" },
-      { type: "link", page: "Checkbox" },
-    ],
-  },
-  {
-    type: "section",
-    label: "List",
-    content: [
-      { type: "link", page: "List" },
-      { type: "link", page: "ListHeader" },
-      { type: "link", page: "navigation", name: "List navigation" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Modals",
-    content: [
-      { type: "link", page: "Dialog" },
-      { type: "link", page: "Popover" },
-      { type: "link", page: "Tooltip" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Visual indicators",
-    content: [
-      { type: "link", page: "Badge" },
-      { type: "link", page: "ProgressBar" },
-      { type: "link", page: "ProgressCircle" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Complex components",
-    content: [
-      { type: "link", page: "Tabs" },
-      { type: "link", page: "Calendar" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Hooks",
-    content: [
-      { type: "link", page: "useCookie" },
-      { type: "link", page: "useNavigation" },
-      { type: "link", page: "useKeyboard" },
-      { type: "link", page: "useRefEffect" },
-      { type: "link", page: "usePromise" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Utils",
-    content: [{ type: "link", page: "Hashing" }],
-  },
-];
-
-const components = {
-  h1: (props) => (
-    <H1 jsStyle={{ marginBottom: cssVar("--spacing-xl") }} {...props} />
-  ),
-  h2: (props) => (
-    <H2
-      id={props.children
-        .replace(/[A-Z]/g, (m) => m.toLowerCase())
-        .replace(/\s/g, "-")
-        .replace(/\?/g, "")}
-      jsStyle={{ marginBottom: cssVar("--spacing-l") }}
-      {...props}
-    />
-  ),
-  h3: (props) => {
-    return <H3 {...props} />;
-  },
-  p: (props) => (
-    <P jsStyle={{ marginBottom: cssVar("--spacing-m") }} {...props} />
-  ),
-  span: (props) => <Span {...props} />,
-  li: (props) => (
-    <Li jsStyle={{ marginBottom: cssVar("--spacing-s") }} {...props} />
-  ),
-  a: (props) => {
-    return (
-      <BaseLink
-        bare
-        color="positive"
-        jsStyle={{
-          display: "inline-block",
-          paddingBottom: cssVar("--spacing-s"),
-          paddingTop: cssVar("--spacing-s"),
-        }}
-        href={props.href}
-      >
-        {props.children}
-      </BaseLink>
-    );
-  },
-  hr: () => (
-    <BaseView
-      jsStyle={{
-        marginBottom: cssVar("--spacing-xxl"),
-        marginTop: cssVar("--spacing-xxl"),
-      }}
-    >
-      <ListDivider />
-    </BaseView>
-  ),
-  pre: (props) => {
-    return (
-      <pre
-        style={{ borderRadius: cssVar("--border-radius-l") }}
-        className={props.children.props.className}
-        tabIndex={0}
-      >
-        <code className={props.children.props.className}>
-          {props.children.props.children}
-        </code>
-      </pre>
-    );
-  },
-  code: ({ children }) => (
-    <span
-      className={monospace.className}
-      style={{
-        color: cssVar("--primary-text"),
-        backgroundColor: cssVar("--secondary-background"),
-        borderRadius: cssVar("--border-radius-m"),
-        padding: cssVar("--spacing-xs"),
-        border: `1px solid ${cssVar("--divider")}`,
-        display: "inline-block",
-      }}
-    >
-      {children}
-    </span>
-  ),
-};
+import { BaseLinkComponentOverrideContext } from "../BaseLink";
+import { DocsMDXProvider, labelToID } from "../docs/mdx";
+import { dot } from "@xenova/transformers";
+import { pages } from "../docs/pages";
 
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
-
+  const searchIndex = useRef<Promise<{
+    index: Array<{
+      embedding: Array<number>;
+      filename: string;
+      heading: string;
+      headingDepth: number;
+    }>;
+  }> | null>(null);
   const [pathname, setPathname] = useState(router.pathname);
   const [showList, setShowList] = useState(false);
   const [query, setQuery] = useState("");
-  const filteredPagesRef = useRef<Array<Page>>([]);
+  const [queriedPages, setQueriedPages] = useState<Array<PageLink>>([]);
+  const queriedPagesRef = useRef<Array<PageLink>>([]);
   const queryIndexRef = useRef<void | number>(undefined);
   const queryInputRef = useKeyboard<HTMLInputElement>([
     {
@@ -265,7 +78,7 @@ export default function App({ Component, pageProps }: AppProps) {
       onlyWhenFocused: true,
       action: () => {
         setQueryIndex((current) =>
-          Math.min((current ?? 0) + 1, filteredPagesRef.current.length - 1)
+          Math.min((current ?? 0) + 1, queriedPagesRef.current.length - 1)
         );
       },
     },
@@ -275,7 +88,7 @@ export default function App({ Component, pageProps }: AppProps) {
       ctrlKey: true,
       action: () => {
         setQueryIndex((current) =>
-          Math.min((current ?? 0) + 1, filteredPagesRef.current.length - 1)
+          Math.min((current ?? 0) + 1, queriedPagesRef.current.length - 1)
         );
       },
     },
@@ -285,10 +98,13 @@ export default function App({ Component, pageProps }: AppProps) {
       action: () => {
         if (queryIndexRef.current === undefined) {
           return;
+        } else if (queriedPagesRef.current.length === 0) {
+          return;
         } else {
-          const element = filteredPagesRef.current[queryIndexRef.current];
+          const element = queriedPagesRef.current[queryIndexRef.current];
           if (element.type === "link") {
             window.open(`/${element.page}`, "_self");
+            setQuery("");
           }
         }
       },
@@ -308,42 +124,111 @@ export default function App({ Component, pageProps }: AppProps) {
     .trim()
     .toLowerCase();
 
+  const isQuerying = sanetisedQuery.length > 0;
+
   useEffect(() => {
-    if (sanetisedQuery.length === 0) {
-      setQueryIndex(undefined);
+    if (isQuerying) {
+      setQueryIndex(0);
       if (window.innerWidth <= TABLET) {
-        setShowList(false);
+        setShowList(true);
       }
     } else {
-      setQueryIndex(0);
+      setQueryIndex(undefined);
       if (window.innerWidth <= TABLET) {
-        setShowList(true);
+        setShowList(false);
       }
     }
-  }, [sanetisedQuery]);
+  }, [isQuerying]);
 
   useEffect(() => {
     queryIndexRef.current = queryIndex;
   }, [queryIndex]);
 
-  filteredPagesRef.current =
-    sanetisedQuery.length > 0
-      ? pages
-          .flatMap((element) =>
-            element.type === "section" ? element.content : element
-          )
-          .filter((element) => {
-            return (
-              element.page.toLowerCase().includes(sanetisedQuery) ||
-              element?.name?.toLowerCase()?.includes(sanetisedQuery)
-            );
-          })
-      : pages;
+  useEffect(() => {
+    if (sanetisedQuery.length === 0) {
+      return;
+    }
+
+    let state = { cancel: false };
+
+    async function run() {
+      if (searchIndex.current == null) {
+        searchIndex.current = fetch("index.json").then((data) => data.json());
+      }
+      if (state.cancel) {
+        return;
+      }
+      const data = await searchIndex.current;
+      if (state.cancel) {
+        return;
+      }
+      const { pipeline } = await import("@xenova/transformers");
+      if (state.cancel) {
+        return;
+      }
+      const generateEmbeddings = await pipeline(
+        "feature-extraction",
+        "Xenova/all-MiniLM-L6-v2"
+      );
+      if (state.cancel) {
+        return;
+      }
+      const queryEmbeddings = await generateEmbeddings(query, {
+        normalize: true,
+        pooling: "mean",
+      }).then((embedding) => embedding.data);
+      if (state.cancel) {
+        return;
+      }
+
+      let seen = new Set();
+
+      queriedPagesRef.current = data.index
+        .map((element) => {
+          return {
+            ...element,
+            dot: dot(queryEmbeddings, element.embedding),
+          };
+        })
+        .filter((element) => element.dot > 0.2)
+        .sort((a, b) => b.dot - a.dot)
+        .slice(0, 5)
+        .filter((result) => {
+          if (seen.has(result.filename)) {
+            return false;
+          } else {
+            seen.add(result.filename);
+            return true;
+          }
+        })
+        .map((result) => {
+          const heading =
+            result.headingDepth > 1 && result.heading.length > 0
+              ? labelToID(result.heading)
+              : null;
+          const page = result.filename === "index" ? "" : result.filename;
+          return {
+            type: "link",
+            name: result.filename,
+            page: heading ? `${page}#${heading}` : page,
+          };
+        });
+      setQueriedPages(queriedPagesRef.current.slice());
+    }
+
+    run();
+
+    return () => {
+      state.cancel = true;
+    };
+  }, [sanetisedQuery]);
 
   useEffect(() => {
     highlightAll();
   });
 
+  const link = useCallback((props) => <Link {...props} />, []);
+
   return (
     <>
       <Head>
@@ -351,10 +236,9 @@ export default function App({ Component, pageProps }: AppProps) {
         <meta name="description" content="A humble UI toolkit" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <BaseLinkComponentOverrideContext.Provider value={Link}>
+      <BaseLinkComponentOverrideContext.Provider value={link}>
         <Providers themes={{ light: lightTheme, dark: darkTheme }}>
-          {/* @ts-ignore */}
-          <MDXProvider components={components}>
+          <DocsMDXProvider>
             <BaseView
               jsStyle={[
                 {
@@ -409,6 +293,10 @@ export default function App({ Component, pageProps }: AppProps) {
                 <TextInput
                   rootJSStyle={{ flexGrow: 1 }}
                   ref={queryInputRef}
+                  role="combobox"
+                  aria-haspopup="grid"
+                  aria-expanded={isQuerying ? "true" : "false"}
+                  aria-controls=""
                   placeholder="Search (⌘K)"
                   value={query}
                   onValueChange={(value) => {
@@ -423,7 +311,7 @@ export default function App({ Component, pageProps }: AppProps) {
                   <IconLink
                     aria-label="github"
                     target="_blank"
-                    href="https://github.com/germtb/simple-ui"
+                    href="https://github.com/germtb/aidos-ui"
                     icon="fa-github"
                     size="medium"
                     color="secondary"
@@ -478,27 +366,27 @@ export default function App({ Component, pageProps }: AppProps) {
                   jsStyle={[{ overflow: "scroll" }]}
                   ariaLabel={"API"}
                 >
-                  {(filteredPagesRef.current.length > 0
-                    ? filteredPagesRef.current
-                    : pages
-                  ).map((element, index) => {
+                  {(isQuerying ? queriedPages : pages).map((element, index) => {
                     if (element.type === "link") {
                       const page = element.page;
+                      const name = element.name;
+
                       return (
                         <ListLinkItem
-                          key={page}
+                          key={isQuerying ? `${index}-${page}` : page}
                           bare
                           onClick={() => {
                             setPathname(`/${page}`);
+                            setQuery("");
                             setShowList(false);
                           }}
                           selected={
-                            sanetisedQuery.length > 0
+                            isQuerying
                               ? index === queryIndex
                               : pathname === `/${page}`
                           }
                           href={`/${page}`}
-                          headline={element.name ?? page}
+                          headline={name ?? page}
                           headlineSize={element.headlineSize}
                           headlineBold={element.headlineBold}
                         />
@@ -508,6 +396,7 @@ export default function App({ Component, pageProps }: AppProps) {
                         <Sublist
                           key={`section-${element.label}`}
                           label={element.label}
+                          labelBold
                           bare
                         >
                           {element.content.map((element) => {
@@ -520,11 +409,7 @@ export default function App({ Component, pageProps }: AppProps) {
                                   setPathname(`/${page}`);
                                   setShowList(false);
                                 }}
-                                selected={
-                                  sanetisedQuery.length > 0
-                                    ? index === queryIndex
-                                    : pathname === `/${page}`
-                                }
+                                selected={pathname === `/${page}`}
                                 href={`/${page}`}
                                 headline={element.name ?? page}
                                 headlineSize={element.headlineSize}
@@ -553,7 +438,7 @@ export default function App({ Component, pageProps }: AppProps) {
                 <Component {...pageProps} />
               </BaseView>
             </BaseView>
-          </MDXProvider>
+          </DocsMDXProvider>
         </Providers>
       </BaseLinkComponentOverrideContext.Provider>
     </>

package/src/pages/index.mdx

@@ -45,7 +45,7 @@ As few dependencies as possible, to keep things light and under control. The onl
 This library can be installed through npm
 
 ```bash
-npm install --save simple-ui-core
+npm install --save aidos-ui
 ```
 
 ---