Merge branch 'main' into charles/sb-1388-home-finish-coding-the-hero-…

…animation

apps/frontpage/.storybook/main.ts

@@ -11,8 +11,6 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
  stories: [
- '../stories/**/*.mdx',
- '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  '../components/**/*.mdx',
  '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],

apps/frontpage/.storybook/preview-head.html

@@ -0,0 +1,14 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+ href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
+ rel="stylesheet"
+/>
+
+<style>
+ body {
+ font-family: 'Nunito Sans', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+</style>

apps/frontpage/.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../app/globals.css';
 
 const preview: Preview = {
  parameters: {

apps/frontpage/chromatic.config.json

@@ -0,0 +1,6 @@
+{
+ "onlyChanged": true,
+ "projectId": "Project:664214b6ca695f7f532c7421",
+ "storybookBaseDir": "apps/frontpage",
+ "zip": true
+}

apps/frontpage/components/docs/sidebar/icons.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC } from 'react';
 
 export const DocsIcon: FC = () => (
  <svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
@@ -32,12 +32,27 @@ export const TutorialsIcon: FC = () => (
 export const ChangelogIcon: FC = () => (
  <svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
  <path
- d="M6.06 18c-.419 0-.828-.194-1.093-.519a1.39 1.39 0 0 1-.281-1.16l1.143-5.615H2.84a.84.84 0 0 1-.766-1.18L6.089.5a.84.84 0 0 1 .767-.5h6.213a.84.84 0 0 1 .76 1.198L12.097 4.87h3.267a.84.84 0 0 1 .658 1.36L7.11 17.515A1.382 1.382 0 0 1 6.06 18ZM4.133 9.028h2.724a.84.84 0 0 1 .823 1.007L6.57 15.49l7.062-8.94h-2.857a.84.84 0 0 1-.76-1.197l1.732-3.672H7.403l-3.27 7.347Z"
+ d="M3.099 9.374 6.497.13A.2.2 0 0 1 6.685 0h6.276a.2.2 0 0 1 .184.278l-2.5 5.872a.2.2 0 0 0 .184.279h4.746a.2.2 0 0 1 .154.327l-9.03 10.908c-.067.082-.2.015-.174-.088l1.888-7.685a.2.2 0 0 0-.194-.248H3.287a.2.2 0 0 1-.188-.27Z"
  fill="#FF4785"
  />
+ </svg>
+);
+
+export const IntegrationsIcon: FC = () => (
+ <svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
  <path
- d="M6.857 9.027H4.133l3.27-7.347h4.343l-1.731 3.672a.84.84 0 0 0 .76 1.197h2.857l-7.063 8.94 1.11-5.455a.836.836 0 0 0-.822-1.007Z"
- fill="#FFA0C0"
+ d="M16 2.4v7.634a.4.4 0 0 1-.683.283L7.683 2.683A.4.4 0 0 1 7.966 2H15.6c.22 0 .4.18.4.4Z"
+ fill="#37D5D3"
  />
+ <circle cx="7" cy="11" fill="#87E6E5" r="5" />
+ </svg>
+);
+
+export const APIIcon: FC = () => (
+ <svg fill="none" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
+ <rect fill="#A8E38C" height="16" rx="8" width="18" y="1.001" />
+ <g fill="#489524">
+ <path d="M7.348 12.345a.52.52 0 0 0 0-.73l-2.606-2.63 2.606-2.628a.521.521 0 0 0-.37-.856.511.511 0 0 0-.355.125l-2.97 2.991a.519.519 0 0 0 0 .737l2.97 2.991a.514.514 0 0 0 .365.156.512.512 0 0 0 .36-.156ZM11.011 12.5a.512.512 0 0 1-.474-.321.523.523 0 0 1 .114-.565l2.607-2.629-2.607-2.628a.521.521 0 0 1 .37-.856c.13-.005.257.04.355.125l2.971 2.991a.52.52 0 0 1 0 .737l-2.971 2.991a.515.515 0 0 1-.365.156Z" />
+ </g>
  </svg>
 );

apps/frontpage/components/docs/sidebar/sidebar.tsx

@@ -5,8 +5,14 @@ import type { FC, ReactNode } from 'react';
 import { cn } from '@repo/utils';
 import { usePathname } from 'next/navigation';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { ScrollBar } from "../../ui/scroll-area";
-import { ChangelogIcon, DocsIcon, TutorialsIcon } from './icons';
+import { ScrollBar } from '../../ui/scroll-area';
+import {
+ APIIcon,
+ ChangelogIcon,
+ DocsIcon,
+ IntegrationsIcon,
+ TutorialsIcon,
+} from './icons';
 
 interface SidebarProps {
  children: ReactNode;
@@ -21,36 +27,39 @@ export const Sidebar: FC<SidebarProps> = ({ children }) => {
  <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
  <div className="py-12 pl-1 pr-4">
  <nav className="flex flex-col gap-1.5 text-sm font-medium">
- <Link
- className={cn(
- 'flex items-center gap-3 hover:text-blue-500 transition-colors px-2 h-8',
- pathname === '/docs' && 'text-blue-500',
- )}
+ <Line
  href="/docs"
- >
- <DocsIcon />
- Documentation
- </Link>
- <Link
- className={cn(
- 'flex items-center gap-3 hover:text-blue-500 transition-colors px-2 h-8',
- pathname === '/tutorials' && 'text-blue-500',
- )}
- href="#"
- >
- <TutorialsIcon />
- Tutorials
- </Link>
- <Link
- className={cn(
- 'flex items-center gap-3 hover:text-blue-500 transition-colors px-2 h-8',
- pathname.startsWith('/releases') && 'text-blue-500',
- )}
+ icon={<DocsIcon />}
+ isActive={
+ pathname.startsWith('/docs') &&
+ !pathname.startsWith('/docs/api')
+ }
+ label="Documentation"
+ />
+ <Line
+ href="/docs/api"
+ icon={<APIIcon />}
+ isActive={pathname.startsWith('/docs/api')}
+ label="API"
+ />
+ <Line
+ href="/#"
+ icon={<TutorialsIcon />}
+ isActive={pathname === '/tutorials'}
+ label="Tutorials"
+ />
+ <Line
+ href="/integrations"
+ icon={<IntegrationsIcon />}
+ isActive={false}
+ label="Addons"
+ />
+ <Line
  href="/releases"
- >
- <ChangelogIcon />
- Changelog
- </Link>
+  icon={<ChangelogIcon />}
+ isActive={pathname.startsWith('/releases')}
+ label="Changelog"
+ />
  </nav>
  {children}
  </div>
@@ -60,3 +69,21 @@ export const Sidebar: FC<SidebarProps> = ({ children }) => {
  </nav>
  );
 };
+
+export const Line: FC<{
+ isActive: boolean;
+ href: string;
+ icon: ReactNode;
+ label: string;
+}> = ({ isActive, href, label, icon }) => (
+ <Link
+ className={cn(
+ 'flex items-center gap-3 hover:text-blue-500 transition-colors px-2 h-8 font-bold',
+ isActive && 'text-blue-500',
+ )}
+ href={href}
+ >
+ {icon}
+ {label}
+ </Link>
+);