B2B-88: add starter kit structure and elements

app/(marketing)/docs/_components/docs-card.tsx

@@ -0,0 +1,53 @@
+import Link from 'next/link';
+
+import { ChevronRight } from 'lucide-react';
+
+import { Trans } from '@kit/ui/trans';
+
+export function DocsCard({
+  title,
+  subtitle,
+  children,
+  link,
+}: React.PropsWithChildren<{
+  title: string;
+  subtitle?: string | null;
+  link: { url: string; label?: string };
+}>) {
+  return (
+    <div className="flex flex-col">
+      <div
+        className={`bg-background flex grow flex-col gap-y-2 border p-6 ${link ? 'rounded-t-lg border-b-0' : 'rounded-lg'}`}
+      >
+        <h3 className="mt-0 text-lg font-semibold hover:underline dark:text-white">
+          <Link href={link.url}>{title}</Link>
+        </h3>
+
+        {subtitle && (
+          <div className="text-muted-foreground text-sm">
+            <p dangerouslySetInnerHTML={{ __html: subtitle }}></p>
+          </div>
+        )}
+
+        {children && <div className="text-sm">{children}</div>}
+      </div>
+
+      {link && (
+        <div className="bg-muted/50 rounded-b-lg border p-6 py-4">
+          <Link
+            className={
+              'flex items-center space-x-2 text-sm font-medium hover:underline'
+            }
+            href={link.url}
+          >
+            <span>
+              {link.label ?? <Trans i18nKey={'marketing:readMore'} />}
+            </span>
+
+            <ChevronRight className={'h-4'} />
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

app/(marketing)/docs/_components/docs-cards.tsx

@@ -0,0 +1,24 @@
+import { Cms } from '@kit/cms';
+
+import { DocsCard } from './docs-card';
+
+export function DocsCards({ cards }: { cards: Cms.ContentItem[] }) {
+  const cardsSortedByOrder = [...cards].sort((a, b) => a.order - b.order);
+
+  return (
+    <div className={'grid grid-cols-1 gap-6 lg:grid-cols-2'}>
+      {cardsSortedByOrder.map((item) => {
+        return (
+          <DocsCard
+            key={item.title}
+            title={item.title}
+            subtitle={item.description}
+            link={{
+              url: `/docs/${item.slug}`,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}

app/(marketing)/docs/_components/docs-nav-link.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useRef } from 'react';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { SidebarMenuButton, SidebarMenuItem } from '@kit/ui/shadcn-sidebar';
+import { cn, isRouteActive } from '@kit/ui/utils';
+
+export function DocsNavLink({
+  label,
+  url,
+  children,
+}: React.PropsWithChildren<{ label: string; url: string }>) {
+  const currentPath = usePathname();
+  const ref = useRef<HTMLElement>(null);
+  const isCurrent = isRouteActive(url, currentPath, true);
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={isCurrent}
+        className={cn('transition-background font-normal!', {
+          'text-secondary-foreground font-bold': isCurrent,
+        })}
+      >
+        <Link href={url}>
+          <span ref={ref} className="block max-w-full truncate">
+            {label}
+          </span>
+
+          {children}
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}

app/(marketing)/docs/_components/docs-navigation-collapsible.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+import { Cms } from '@kit/cms';
+import { Collapsible } from '@kit/ui/collapsible';
+import { isRouteActive } from '@kit/ui/utils';
+
+export function DocsNavigationCollapsible(
+  props: React.PropsWithChildren<{
+    node: Cms.ContentItem;
+    prefix: string;
+  }>,
+) {
+  const currentPath = usePathname();
+  const prefix = props.prefix;
+
+  const isChildActive = props.node.children.some((child) =>
+    isRouteActive(prefix + '/' + child.url, currentPath, false),
+  );
+
+  return (
+    <Collapsible
+      className={'group/collapsible'}
+      defaultOpen={isChildActive ? true : !props.node.collapsed}
+    >
+      {props.children}
+    </Collapsible>
+  );
+}

app/(marketing)/docs/_components/docs-navigation.tsx

@@ -0,0 +1,143 @@
+import { ChevronDown } from 'lucide-react';
+
+import { Cms } from '@kit/cms';
+import { CollapsibleContent, CollapsibleTrigger } from '@kit/ui/collapsible';
+import {
+  Sidebar,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+} from '@kit/ui/shadcn-sidebar';
+
+import { DocsNavLink } from '~/(marketing)/docs/_components/docs-nav-link';
+import { DocsNavigationCollapsible } from '~/(marketing)/docs/_components/docs-navigation-collapsible';
+
+import { FloatingDocumentationNavigation } from './floating-docs-navigation';
+
+function Node({
+  node,
+  level,
+  prefix,
+}: {
+  node: Cms.ContentItem;
+  level: number;
+  prefix: string;
+}) {
+  const url = `${prefix}/${node.slug}`;
+  const label = node.label ? node.label : node.title;
+
+  const Container = (props: React.PropsWithChildren) => {
+    if (node.collapsible) {
+      return (
+        <DocsNavigationCollapsible node={node} prefix={prefix}>
+          {props.children}
+        </DocsNavigationCollapsible>
+      );
+    }
+
+    return props.children;
+  };
+
+  const ContentContainer = (props: React.PropsWithChildren) => {
+    if (node.collapsible) {
+      return <CollapsibleContent>{props.children}</CollapsibleContent>;
+    }
+
+    return props.children;
+  };
+
+  const Trigger = () => {
+    if (node.collapsible) {
+      return (
+        <CollapsibleTrigger asChild>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              {label}
+              <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </CollapsibleTrigger>
+      );
+    }
+
+    return <DocsNavLink label={label} url={url} />;
+  };
+
+  return (
+    <Container>
+      <Trigger />
+
+      <ContentContainer>
+        <Tree pages={node.children ?? []} level={level + 1} prefix={prefix} />
+      </ContentContainer>
+    </Container>
+  );
+}
+
+function Tree({
+  pages,
+  level,
+  prefix,
+}: {
+  pages: Cms.ContentItem[];
+  level: number;
+  prefix: string;
+}) {
+  if (level === 0) {
+    return pages.map((treeNode, index) => (
+      <Node key={index} node={treeNode} level={level} prefix={prefix} />
+    ));
+  }
+
+  if (pages.length === 0) {
+    return null;
+  }
+
+  return (
+    <SidebarMenuSub>
+      {pages.map((treeNode, index) => (
+        <Node key={index} node={treeNode} level={level} prefix={prefix} />
+      ))}
+    </SidebarMenuSub>
+  );
+}
+
+export function DocsNavigation({
+  pages,
+  prefix = '/docs',
+}: {
+  pages: Cms.ContentItem[];
+  prefix?: string;
+}) {
+  return (
+    <>
+      <Sidebar
+        variant={'ghost'}
+        className={'sticky z-1 mt-4 max-h-full overflow-y-auto'}
+      >
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <Tree pages={pages} level={0} prefix={prefix} />
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </Sidebar>
+
+      <div className={'lg:hidden'}>
+        <FloatingDocumentationNavigation>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <Tree pages={pages} level={0} prefix={prefix} />
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </FloatingDocumentationNavigation>
+      </div>
+    </>
+  );
+}

app/(marketing)/docs/_components/docs-page-link.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+
+import { If } from '@kit/ui/if';
+import { cn } from '@kit/ui/utils';
+
+export function DocsPageLink({
+  page,
+  before,
+  after,
+}: React.PropsWithChildren<{
+  page: {
+    url: string;
+    title: string;
+  };
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+}>) {
+  return (
+    <Link
+      className={cn(
+        `ring-muted hover:ring-primary flex w-full items-center space-x-8 rounded-xl p-6 font-medium text-current ring-2 transition-all`,
+        {
+          'justify-start': before,
+          'justify-end self-end': after,
+        },
+      )}
+      href={page.url}
+    >
+      <If condition={before}>{(node) => <>{node}</>}</If>
+
+      <span className={'flex flex-col space-y-1.5'}>
+        <span
+          className={'text-muted-foreground text-xs font-semibold uppercase'}
+        >
+          {before ? `Previous` : ``}
+          {after ? `Next` : ``}
+        </span>
+
+        <span>{page.title}</span>
+      </span>
+
+      <If condition={after}>{(node) => <>{node}</>}</If>
+    </Link>
+  );
+}

app/(marketing)/docs/_components/docs-table-of-contents.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import Link from 'next/link';
+
+interface NavItem {
+  text: string;
+  level: number;
+  href: string;
+  children: NavItem[];
+}
+
+export function DocsTableOfContents(props: { data: NavItem[] }) {
+  const navData = props.data;
+
+  return (
+    <div className="bg-background sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] border-l p-4 lg:block">
+      <ol
+        role="list"
+        className="relative text-sm text-gray-600 dark:text-gray-400"
+      >
+        {navData.map((item) => (
+          <li key={item.href} className="group/item relative mt-3 first:mt-0">
+            <a
+              href={item.href}
+              className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
+            >
+              {item.text}
+            </a>
+            {item.children && (
+              <ol role="list" className="relative mt-3 pl-4">
+                {item.children.map((child) => (
+                  <li
+                    key={child.href}
+                    className="group/subitem relative mt-3 first:mt-0"
+                  >
+                    <Link
+                      href={child.href}
+                      className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
+                    >
+                      {child.text}
+                    </Link>
+                  </li>
+                ))}
+              </ol>
+            )}
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

app/(marketing)/docs/_components/floating-docs-navigation.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { usePathname } from 'next/navigation';
+
+import { Menu } from 'lucide-react';
+
+import { isBrowser } from '@kit/shared/utils';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+
+export function FloatingDocumentationNavigation(
+  props: React.PropsWithChildren,
+) {
+  const activePath = usePathname();
+
+  const body = useMemo(() => {
+    return isBrowser() ? document.body : null;
+  }, []);
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  const enableScrolling = (element: HTMLElement) =>
+    (element.style.overflowY = '');
+
+  const disableScrolling = (element: HTMLElement) =>
+    (element.style.overflowY = 'hidden');
+
+  // enable/disable body scrolling when the docs are toggled
+  useEffect(() => {
+    if (!body) {
+      return;
+    }
+
+    if (isVisible) {
+      disableScrolling(body);
+    } else {
+      enableScrolling(body);
+    }
+  }, [isVisible, body]);
+
+  // hide docs when navigating to another page
+  useEffect(() => {
+    setIsVisible(false);
+  }, [activePath]);
+
+  const onClick = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return (
+    <>
+      <If condition={isVisible}>
+        <div
+          className={
+            'fixed top-0 left-0 z-10 h-screen w-full p-4' +
+            ' dark:bg-background flex flex-col space-y-4 overflow-auto bg-white'
+          }
+        >
+          {props.children}
+        </div>
+      </If>
+
+      <Button
+        className={'fixed right-5 bottom-5 z-10 h-16 w-16 rounded-full'}
+        onClick={onClick}
+      >
+        <Menu className={'h-8'} />
+      </Button>
+    </>
+  );
+}