feat: update dependencies, add theme provider, and implement Storyboo…

…k deployment workflow - Removed `@radix-ui/react-icons` and added `next-themes` and `chromatic` to package dependencies for theme management and Storybook deployment. - Introduced a new `ThemeProvider` component to manage theme context across the application. - Added a `ThemeToggle` component for switching between light and dark themes. - Created a GitHub Actions workflow for deploying Storybook to GitHub Pages. - Updated Storybook configuration to include theme support and improved layout. - Enhanced the timeline component with new icons and improved structure for better customization.
timDeHof · Jan 2, 2025 · 7906846 · 7906846
1 parent c08919e
commit 7906846
Show file tree

Hide file tree

Showing 11 changed files with 151 additions and 75 deletions.
diff --git a/.github/workflows/deploy-github-pages.yml b/.github/workflows/deploy-github-pages.yml
@@ -0,0 +1,35 @@
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  # Event for the workflow to run on
+  push:
+    branches:
+      - 'main' # Replace with the branch you want to deploy from
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# List of jobs
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      # Manual Checkout
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      # Set up Node
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+      - uses: bitovi/[email protected]
+        with:
+          install_command: yarn install # default: npm ci
+          build_command: yarn build-storybook # default: npm run build-storybook
+          path: storybook-static # default: dist/storybook
+          checkout: false # default: true
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -0,0 +1,2 @@
+<meta name="description" content="Components for my shadcntimeline project" key="desc" />
+<meta name="robots" content="noindex" />
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
 import "../src/app/globals.css";
+import { ThemeProvider } from "../src/components/providers/theme-provider";
 
 const preview: Preview = {
   parameters: {
@@ -12,52 +13,41 @@ const preview: Preview = {
       },
     },
     backgrounds: {
-      default: 'light',
-      values: [
-        {
-          name: 'light',
-          value: '#ffffff',
-        },
-        {
-          name: 'dark',
-          value: '#1a1a1a',
-        },
-      ],
+      disable: true,
     },
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: {
-            width: '360px',
-            height: '640px',
-          },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: {
-            width: '768px',
-            height: '1024px',
-          },
-        },
-        desktop: {
-          name: 'Desktop',
-          styles: {
-            width: '1440px',
-            height: '900px',
-          },
-        },
+    layout: 'fullscreen',
+    docs: {
+      story: {
+        inline: true,
       },
+      container: ({ children, context }) => (
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div className="dark min-h-screen bg-background text-foreground">
+            {children}
+          </div>
+        </ThemeProvider>
+      ),
     },
-    layout: 'fullscreen',
   },
   decorators: [
     (Story) => (
-      <div className="min-h-screen bg-background">
-        <div className="container mx-auto max-w-2xl py-10">
-          <Story />
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="dark"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <div className="dark min-h-screen bg-background">
+          <div className="container mx-auto max-w-2xl py-10">
+            <Story />
+          </div>
         </div>
-      </div>
+      </ThemeProvider>
     ),
   ],
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,14 +15,14 @@
 	},
 	"dependencies": {
 		"@emotion/is-prop-valid": "^1.3.1",
-		"@radix-ui/react-icons": "^1.3.0",
 		"@radix-ui/react-slot": "^1.0.2",
 		"@radix-ui/react-tabs": "^1.1.2",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.0",
 		"framer-motion": "^11.15.0",
 		"lucide-react": "^0.469.0",
 		"next": "^15.1.3",
+		"next-themes": "^0.4.4",
 		"prism-react-renderer": "^2.4.1",
 		"react": "^18",
 		"react-dom": "^18",
@@ -55,6 +55,7 @@
 		"@types/react-dom": "^18",
 		"autoprefixer": "^10.0.1",
 		"babel-jest": "^29.7.0",
+		"chromatic": "^11.20.2",
 		"eslint": "^8",
 		"eslint-config-next": "14.1.4",
 		"eslint-plugin-storybook": "^0.11.2",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/components/providers/theme-provider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -22,8 +23,18 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang='en'>
-			<body className={inter.className}>{children}</body>
+		<html lang='en' suppressHydrationWarning>
+			<head />
+			<body className={inter.className}>
+				<ThemeProvider
+					attribute='class'
+					defaultTheme='system'
+					enableSystem
+					disableTransitionOnChange
+				>
+					{children}
+				</ThemeProvider>
+			</body>
 		</html>
 	);
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,13 @@
 import { TimelineLayout } from "@/components/timeline/timeline-layout";
 import Link from "next/link";
-import { GitHubLogoIcon, CalendarIcon } from "@radix-ui/react-icons";
+import { Github, Calendar } from "lucide-react";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { timelineData } from "./data";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Highlight, themes } from "prism-react-renderer";
+import { ThemeToggle } from "@/components/theme-toggle"
 
 const installCode = `# 1. Clone the repository
 git clone https://github.com/timDeHof/shadcn-timeline.git
@@ -66,7 +67,7 @@ const examples = {
 				items={timelineData}
 				size='lg'
 				iconColor='primary'
-				customIcon={<CalendarIcon />}
+				customIcon={<Calendar />}
 			/>
 		),
 	},
@@ -98,13 +99,16 @@ export default function Home() {
 							<Link href='#' className='text-2xl font-bold'>
 								shadcn-timeline
 							</Link>
-							<Link
-								href='https://github.com/timDeHof/shadcn-timeline'
-								className={cn(
-									buttonVariants({ variant: "ghost", size: "icon" }),
-								)}>
-								<GitHubLogoIcon className='size-5' />
-							</Link>
+							<div className="flex items-center gap-2">
+								<ThemeToggle />
+								<Link
+									href='https://github.com/timDeHof/shadcn-timeline'
+									className={cn(
+										buttonVariants({ variant: "ghost", size: "icon" }),
+									)}>
+									<Github className='size-5' />
+								</Link>
+							</div>
 						</div>
 						<nav className='flex flex-col space-y-2'>
 							<Link

diff --git a/src/components/providers/theme-provider.tsx b/src/components/providers/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+
+export function ThemeToggle() {
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
diff --git a/src/components/timeline/timeline.stories.tsx b/src/components/timeline/timeline.stories.tsx
@@ -11,25 +11,23 @@ const meta = {
   render: (args) => (
     <Timeline size={args.size} className={args.className}>
       {[...args.items].reverse().map((item, index) => (
-        <motion.div
+        <TimelineItem
           key={index}
-          initial={args.animate ? { opacity: 0, y: 20 } : false}
-          animate={args.animate ? { opacity: 1, y: 0 } : false}
+          date={item.date}
+          title={item.title}
+          description={item.description}
+          icon={item.icon || args.customIcon}
+          iconColor={(item.color || args.iconColor) as "primary" | "secondary" | "muted" | "accent" | undefined}
+          connectorColor={(item.color || args.connectorColor) as "primary" | "secondary" | "muted" | "accent" | undefined}
+          showConnector={index !== args.items.length - 1}
+          initial={args.animate ? { opacity: 0, y: 20 } : undefined}
+          animate={args.animate ? { opacity: 1, y: 0 } : undefined}
           transition={{
             duration: 0.5,
             delay: index * 0.1,
             ease: "easeOut"
-          }}>
-          <TimelineItem
-            date={item.date}
-            title={item.title}
-            description={item.description}
-            icon={item.icon || args.customIcon}
-            iconColor={(item.color || args.iconColor) as "primary" | "secondary" | "muted" | "accent" | undefined}
-            connectorColor={(item.color || args.connectorColor) as "primary" | "secondary" | "muted" | "accent" | undefined}
-            showConnector={index !== args.items.length - 1}
-          />
-        </motion.div>
+          }}
+        />
       ))}
     </Timeline>
   ),

diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx
@@ -394,7 +394,7 @@ const TimelineIcon = React.forwardRef<
 			ref={ref}
 			className={cn(
 				"relative flex items-center justify-center rounded-full",
-				"ring-8 ring-background aspect-square",
+				"p-2.5 aspect-square",
 				{
 					"bg-primary":
 						(!color && status === "completed") || color === "primary",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<meta name="description" content="Components for my shadcntimeline project" key="desc" />
		<meta name="robots" content="noindex" />