Merge pull request #235 from kloudlite/devdoc/ui

Devdoc/UI

.eslintrc.yml

@@ -4,3 +4,4 @@ extends:
 rules:
   no-case-declarations: 0
   no-restricted-syntax: 0
+  react/no-unescaped-entities: 0

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

src/apps/devdoc/.eslintrc.yml

@@ -55,6 +55,7 @@ rules:
   # pritter rules
 
   # ts rules
+  react/no-unescaped-entities: 0
   react/jsx-no-useless-fragment: 0
   react/jsx-filename-extension: 0
   react/require-default-props : 0

src/apps/devdoc/app/components/flexsearch.tsx

@@ -65,10 +65,10 @@ const loadIndexesPromises = new Map<string, Promise<void>>();
 
 const loadIndexesImpl = async (
   basePath: string,
-  locale: string
+  locale: string,
 ): Promise<void> => {
   const response = await fetch(
-    `${basePath}/_next/static/chunks/nextra-data-${locale}.json`
+    `${basePath}/_next/static/chunks/nextra-data-${locale}.json`,
   );
   const searchData = (await response.json()) as SearchData;
 
@@ -103,6 +103,8 @@ const loadIndexesImpl = async (
     },
   });
 
+  console.log('searchData', sectionIndex);
+
   let pageId = 0;
 
   for (const [route, structurizedData] of Object.entries(searchData)) {
@@ -165,6 +167,8 @@ export function Flexsearch(): ReactElement {
   const [results, setResults] = useState<SearchResult[]>([]);
   const [search, setSearch] = useState('');
 
+  const router = useRouter();
+
   const doSearch = (search: string) => {
     if (!search) return;
     const [pageIndex, sectionIndex] = indexes[locale];
@@ -211,19 +215,19 @@ export function Flexsearch(): ReactElement {
           prefix: isFirstItemOfPage && (
             <div
               className={cn(
-                'headingMd mx-xl pb-md mb-md border-b border-border-default'
+                'wb-headingMd wb-mx-xl wb-pb-md wb-mb-md wb-border-b wb-border-border-default',
               )}
             >
               {result.doc.title}
             </div>
           ),
           children: (
             <>
-              <div className="text-base bodyMd-semibold text-text-default">
+              <div className="wb-text-base wb-bodyMd-semibold wb-text-text-default">
                 <HighlightMatches match={search} value={title} />
               </div>
               {content && (
-                <div className="excerpt bodySm text-text-soft">
+                <div className="wb-excerpt wb-bodySm wb-text-text-soft">
                   <HighlightMatches match={search} value={content} />
                 </div>
               )}
@@ -246,13 +250,20 @@ export function Flexsearch(): ReactElement {
           }
           return a._page_rk - b._page_rk;
         })
+        .filter(
+          (res) =>
+            (res.route.startsWith('/docs') &&
+              router.route.startsWith('/docs')) ||
+            (res.route.startsWith('/blog') && router.route.startsWith('/blog')),
+        )
         .map((res) => ({
           id: `${res._page_rk}_${res._section_rk}`,
           route: res.route,
           prefix: res.prefix,
           children: res.children,
-        }))
+        })),
     );
+    console.log(router);
   };
 
   const preload = useCallback(
@@ -267,7 +278,7 @@ export function Flexsearch(): ReactElement {
         setLoading(false);
       }
     },
-    [locale, basePath]
+    [locale, basePath],
   );
 
   const handleChange = async (value: string) => {
@@ -298,21 +309,22 @@ export function Flexsearch(): ReactElement {
       setSearch('');
     }
   }, [show]);
+
   return (
     <Popup.Root
       show={show}
       onOpenChange={(e) => {
         setShow(e);
       }}
     >
-      <Popup.Content className="!p-0">
-        <div className="flex flex-col">
-          <div className="flex flex-row items-center sticky top-0 bg-surface-basic-default border-b border-border-default pr-xs">
-            <span className="pl-xl pr-md py-xl">
+      <Popup.Content className="!wb-p-0">
+        <div className="wb-flex wb-flex-col">
+          <div className="wb-flex wb-flex-row wb-items-center wb-sticky wb-top-0 wb-bg-surface-basic-default wb-border-b wb-border-border-default wb-pr-xs">
+            <span className="wb-pl-xl wb-pr-md wb-py-xl wb-text-text-default">
               <Search size={20} />
             </span>
             <input
-              className="flex-1 outline-none p-lg min-h-[32px] box-content bodyLg placeholder:text-text-disabled text-text-default"
+              className="wb-flex-1 wb-outline-none wb-p-lg wb-min-h-[32px] wb-box-content wb-bodyLg placeholder:wb-text-text-disabled wb-text-text-default wb-bg-surface-basic-default"
               placeholder="Search"
               onKeyDown={setKeyEvent}
               value={search}
@@ -323,8 +335,10 @@ export function Flexsearch(): ReactElement {
                 handleChange(target.value);
               }}
             />
-            <span className="pl-lg pr-xl bodyMd text-text-soft">⌘K</span>
-            <div className="border-l border-border-default h-[26px]" />
+            <span className="wb-pl-lg wb-pr-xl wb-bodyMd wb-text-text-soft">
+              ⌘K
+            </span>
+            <div className="wb-border-l wb-border-border-default wb-h-[26px]" />
             <IconButton
               variant="plain"
               size="md"
@@ -336,23 +350,23 @@ export function Flexsearch(): ReactElement {
           </div>
           <div>
             {results.length === 0 && (
-              <div className="bodyMd px-4xl py-8xl text-center text-text-soft">
+              <div className="wb-bodyMd wb-px-4xl wb-py-8xl wb-text-center wb-text-text-soft">
                 No recent results
               </div>
             )}
             {results.length > 0 && (
               <ListNavigate
-                selectedClass="bg-surface-basic-hovered"
+                selectedClass="wb-bg-surface-basic-hovered"
                 keyPressEvent={keyEvent}
-                className="py-xl px-lg flex flex-col space-y-lg"
+                className="wb-py-xl wb-px-lg wb-flex wb-flex-col wb-space-y-lg"
                 childSelectorClass="search-result-item"
               >
                 {results.map((res) => (
-                  <div key={res.id} className="flex flex-col">
-                    <div>{res.prefix}</div>
+                  <div key={res.id} className="wb-flex wb-flex-col">
+                    <div className="text-text-default">{res.prefix}</div>
                     <Link
                       href={res.route}
-                      className="transition-all rounded search-result-item flex flex-col gap-md px-xl py-lg"
+                      className="wb-transition-all wb-rounded search-result-item wb-flex wb-flex-col wb-gap-md wb-px-xl wb-py-lg"
                     >
                       {res.children}
                     </Link>

src/apps/devdoc/app/components/footer.tsx

@@ -182,7 +182,7 @@ const Footer = ({ config }: { config: IConfig }) => {
     'menu' in config.footer
   )
     return (
-      <footer className="wb-bg-surface-basic-default">
+      <footer className="wb-bg-surface-basic-default print:wb-hidden">
         <Wrapper>
           <FooterMobile {...config.footer} />
           <FooterMd {...config.footer} />

src/apps/devdoc/app/components/graph.tsx

@@ -26,18 +26,24 @@ export const Graph = ({
     left: 'wb-w-10xl',
     right: 'wb-w-10xl',
   },
+  graph,
 }: {
   className?: string;
   children: ReactNode;
   style?: CSSProperties | undefined;
   fade?: Ifade;
+  graph?: string;
 }) => {
   return (
     <div
       style={style}
-      className={cn('graph xl:[clip-path:inset(1.5px)] wb-relative', className)}
+      className={cn(
+        'xl:[clip-path:inset(1.5px)] wb-relative',
+        className,
+        graph || 'graph'
+      )}
     >
-      <div className="wb-hidden xl:wb-block wb-absolute wb-inset-0">
+      <div className="wb-hidden md:wb-block wb-absolute wb-inset-0">
         {/* top */}
         <div
           className={cn(
@@ -78,15 +84,18 @@ export const GraphExtended = ({
   innerClass,
   style,
   fade,
+  graph,
 }: {
   children?: ReactNode;
   className?: string;
   innerClass?: string;
   style?: CSSProperties | undefined;
   fade?: Ifade;
+  graph?: string;
 }) => {
   return (
     <Graph
+      graph={graph}
       className={cn(
         'lg:-wb-mx-11xl xl:-wb-mx-10xl wb-py-7xl md:wb-py-8xl lg:wb-py-10xl',
         className

src/apps/devdoc/app/components/header-secondary.tsx

@@ -9,6 +9,10 @@ import useMenu from '../utils/use-menu';
 import Wrapper from './wrapper';
 import NavigationMenuV2 from './nav-menu-v2';
 import JoinProvidersDialog from './join-provider-dialog';
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import useSearch from '../utils/use-search';
+import SearchBox from './search';
 
 const HeaderSecondary = ({
   activePath,
@@ -17,17 +21,46 @@ const HeaderSecondary = ({
 }) => {
   const { config } = useConfig();
   const { state, setState } = useMenu();
+
+  const { setShow: setShowSearch } = useSearch();
+  const route = useRouter();
+
+  useEffect(() => {
+    setShowSearch(false);
+  }, [route]);
+
+  useEffect(() => {
+    const commandK = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+        setShowSearch(true);
+      }
+      if (e.key === 'Escape') {
+        setShowSearch(false);
+      }
+    };
+
+    document.addEventListener('keydown', commandK);
+
+    return () => {
+      document.removeEventListener('keydown', commandK);
+    };
+  }, []);
+
+  const showSearch = () =>
+    route.route.startsWith('/blog') || route.route.startsWith('/docs');
+
   return (
     <div className="lg:wb-relative wb-flex wb-flex-row wb-top-0 wb-left-0 wb-right-0 wb-bg-surface-basic-subdued wb-border-b wb-border-border-default wb-min-h-[var(--kl-navbar-height)] wb-z-50">
       <Wrapper className="wb-flex">
-        <nav className="wb-flex wb-flex-row wb-items-center wb-gap-6xl wb-w-full">
+        <div className="wb-flex wb-flex-row wb-items-center wb-gap-6xl wb-w-full">
           {config.logo}
-          <ul className="wb-hidden lg:wb-flex wb-flex-1 wb-flex-row wb-items-center wb-justify-end wb-gap-4xl wb-list-none">
+          <div className="wb-hidden lg:wb-flex wb-flex-1 wb-flex-row wb-items-center wb-justify-end wb-gap-4xl wb-list-none">
             <NavigationMenuV2 activePath={activePath} />
-          </ul>
+          </div>
 
           <div className="wb-flex-1 lg:wb-flex-none wb-flex wb-flex-row wb-gap-2xl wb-items-center wb-justify-end">
             <div className="wb-flex wb-flex-col lg:wb-flex-row wb-gap-xl lg:wb-items-center">
+              {showSearch() && <SearchBox />}
               <a
                 href={config.gitRepoUrl}
                 aria-label="kloudlite-github"
@@ -41,19 +74,17 @@ const HeaderSecondary = ({
                   <JoinProvidersDialog
                     size="md"
                     buttonContent={
-                      <span className="wb-bodyMd-medium">
-                        Signup to join waitlist
-                      </span>
+                      <span className="wb-bodyMd-medium">Signup</span>
                     }
                   />
                 </div>
               </>
             </div>
-            <span className="wb-flex lg:wb-hidden">
+            <span className="wb-flex lg:wb-hidden print:wb-hidden">
               <MenuToggle onClick={() => setState(!state)} toggle={state} />
             </span>
           </div>
-        </nav>
+        </div>
       </Wrapper>
     </div>
   );

src/apps/devdoc/app/components/header.tsx

@@ -44,7 +44,7 @@ const Header = ({
   }, []);
 
   return (
-    <div className="wb-sticky wb-top-0 md:wb-relative wb-flex wb-flex-row wb-top-0 wb-left-0 wb-right-0 wb-bg-surface-basic-subdued wb-border-b wb-border-border-default wb-min-h-[var(--kl-navbar-height)] wb-z-50">
+    <div className="wb-sticky md:wb-relative wb-flex wb-flex-row wb-top-0 wb-left-0 wb-right-0 wb-bg-surface-basic-subdued wb-border-b wb-border-border-default wb-min-h-[var(--kl-navbar-height)] wb-z-50">
       <Wrapper className="wb-flex">
         <nav className="wb-flex wb-flex-row wb-items-center wb-gap-6xl wb-w-full">
           {config.logo}

src/apps/devdoc/app/components/join-provider-dialog.tsx

@@ -47,7 +47,7 @@ const JoinProvidersDialog = ({
     <div className="wb-w-full">
       {!buttonContent && (
         <ButtonDev
-          content="Signup to join waitlist"
+          content="Signup"
           variant="primary"
           block
           size={size}
@@ -105,7 +105,7 @@ const JoinProvidersDialog = ({
               </div>
               <div className="wb-flex wb-flex-col wb-w-full wb-p-8xl wb-gap-5xl wb-flex-1 md:wb-flex-auto">
                 {hasProvider && (
-                  <div className="wb-flex wb-flex-col wb-gap-3xl wb-w-[350px] wb-m-auto">
+                  <div className="wb-flex wb-flex-col wb-gap-3xl md:wb-w-[350px] md:wb-m-auto">
                     {oathProviders?.githubLoginUrl && (
                       <Button
                         variant="tertiary"
@@ -144,7 +144,7 @@ const JoinProvidersDialog = ({
                     )}
                   </div>
                 )}
-                <div className="wb-flex wb-flex-col wb-gap-5xl wb-w-[350px] wb-m-auto">
+                <div className="wb-flex wb-flex-col wb-gap-5xl md:wb-w-[350px] md:wb-m-auto">
                   {hasProvider ? (
                     <span className="wb-h-xs wb-bg-border-default" />
                   ) : null}
@@ -177,7 +177,7 @@ const JoinProvidersDialog = ({
                   </div>
                 </div>
               </div>
-              <div className="wb-flex wb-bg-surface-basic-subdued wb-px-8xl wb-py-5xl wb-bodyLg wb-text-text-soft wb-items-center wb-justify-center">
+              <div className="wb-flex wb-bg-surface-basic-subdued wb-px-5xl md:wb-px-8xl wb-py-5xl wb-bodyLg wb-text-text-soft wb-items-center wb-justify-center">
                 Already have an account?&nbsp;
                 <Anchor
                   className="wb-text-text-strong wb-underline wb-underline-offset-4 hover:wb-cursor-pointer"