Remove play button from sidebar

apps/frontpage/.storybook/main.ts

@@ -1,6 +1,9 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
 
-import { join, dirname } from 'path';
+import { join, dirname } from 'node:path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -16,12 +19,11 @@ const config: StorybookConfig = {
   ],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@chromatic-com/storybook'),
-    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-docs'),
   ],
   framework: {
-    name: getAbsolutePath('@storybook/nextjs'),
+    name: getAbsolutePath('@storybook/nextjs-vite'),
     options: {},
   },
   staticDirs: ['../public'],

apps/frontpage/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/nextjs-vite';
 import '../app/globals.css';
 import '@repo/ui/styles.css';
 

apps/frontpage/components/docs/mdx/code-snippets/code-snippets.stories.tsx

@@ -1,6 +1,6 @@
-import { useArgs } from '@storybook/preview-api';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { useArgs } from 'storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { fn } from 'storybook/test';
 import type { ComponentProps } from 'react';
 import { DocsContext } from '../../../../app/docs/provider';
 import { CodeSnippetsClient } from './code-snippets';

apps/frontpage/components/home/manager/manager.stories.tsx

@@ -0,0 +1,65 @@
+import { Manager } from './index';
+
+export default {
+  title: 'Manager',
+  component: Manager,
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: {
+      diffThreshold: 0.3, // Accommodate animation flake
+    }
+  }
+};
+
+export const DevelopmentTab = {
+  args: {
+    slide: 1,
+  },
+}
+
+export const InteractionTab = {
+  args: {
+    slide: 2,
+  }
+}
+
+export const VisualTestingTab = {
+  args: {
+    slide: 3,
+  }
+}
+
+export const DocumentationTab = {
+  args: {
+    slide: 4,
+  }
+}
+
+export const DevelopmentTabMobile = {
+  ...DevelopmentTab,
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+}
+
+export const InteractionTabMobile = {
+  ...InteractionTab,
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+}
+
+
+export const VisualTestingTabMobile = {
+  ...VisualTestingTab,
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+}
+
+export const DocumentationTabMobile = {
+  ...DocumentationTab,
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+}

apps/frontpage/components/home/manager/sidebar.tsx

@@ -8,7 +8,6 @@ import {
   DocumentIcon,
   ExpandAltIcon,
   FolderIcon,
-  PlayIcon,
   PlusIcon,
   SearchIcon,
 } from '@storybook/icons';
@@ -21,9 +20,6 @@ export const Sidebar: FC<{ slide: number }> = ({ slide }) => {
       <div className="flex items-center justify-between pt-5 pb-4 pl-2">
         <StorybookLogo color="dark" />
         <div className="flex items-center">
-          <div className="flex items-center justify-center w-8 h-8">
-            <PlayIcon className="text-[#73828C]" />
-          </div>
           <div className="flex items-center justify-center w-8 h-8">
             <CogIcon className="text-[#73828C]" />
           </div>

apps/frontpage/content/recipes/next.mdx

@@ -48,7 +48,7 @@ export default {
   // ...
   framework: {
     // name: '@storybook/react-webpack5', // Remove this
-    name: '@storybook/nextjs', // Add this
+    name: '@storybook/nextjs-vite', // Add this
     options: {},
   },
 };
@@ -80,7 +80,7 @@ If you're working with a Next.js project that already uses SWC (e.g., version 14
 export default {
   // ...
   framework: {
-    name: '@storybook/nextjs',
+    name: '@storybook/nextjs-vite',
     options: {
       builder: {
         useSWC: true, // Enables SWC support

apps/frontpage/next.config.js → apps/frontpage/next.config.mjs

@@ -1,6 +1,8 @@
-const generatedRedirects = require('./generated-redirects.json');
-const { withPlausibleProxy } = require('next-plausible');
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
+import generatedRedirects from './generated-redirects.json' with { type: 'json' };
+import { withPlausibleProxy } from 'next-plausible';
+import withBundleAnalyzer from '@next/bundle-analyzer';
+
+const bundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
 });
 
@@ -28,7 +30,7 @@ const HISTORICAL_VERSIONS = [
 ];
 
 /** @type {import('next').NextConfig} */
-module.exports = withBundleAnalyzer(
+export default bundleAnalyzer(
   withPlausibleProxy()({
     images: {
       unoptimized: true,

apps/frontpage/package.json

@@ -12,7 +12,7 @@
     "generate-redirects": "tsx --tsconfig tsconfig.json scripts/generate-redirects.ts",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "build-storybook": "npm run generate-redirects && storybook build",
     "chromatic": "npx chromatic --project-token=chpt_34c705b51a7f543",
     "test": "vitest"
   },
@@ -66,19 +66,13 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^4.2.0-next.1",
     "@next/eslint-plugin-next": "^14.1.1",
     "@repo/eslint-config": "*",
     "@repo/tailwind-config": "*",
     "@repo/typescript-config": "*",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/blocks": "^8.1.1",
-    "@storybook/nextjs": "^8.1.1",
-    "@storybook/preview-api": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/test": "^8.1.1",
+    "@storybook/addon-links": "^10.0.0-beta.10",
+    "@storybook/nextjs-vite": "^10.0.0-beta.10",
     "@testing-library/react": "^16.0.0",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20",
@@ -88,14 +82,15 @@
     "@types/react-syntax-highlighter": "^15.5.12",
     "@types/tar": "^6.1.13",
     "@vitejs/plugin-react": "^4.3.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^10.0.0-beta.10",
     "jsdom": "^24.1.0",
     "postcss": "^8",
     "prompts": "^2.4.2",
-    "storybook": "^8.1.1",
+    "storybook": "^10.0.0-beta.10",
     "tailwindcss": "^3.4.1",
     "tsx": "^4.9.0",
     "typescript": "^5.3.3",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+    "@storybook/addon-docs": "^10.0.0-beta.10"
   }
 }