Add storybook-dark-mode support and update components for dark mode c…

.storybook/main.ts

@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "storybook-dark-mode",
   ],
 
   framework: {

.storybook/preview.ts

@@ -11,6 +11,10 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    darkMode: {
+      // Set the initial theme
+      current: 'light',
+    },
   },
 
   tags: ["autodocs"]

package.json

@@ -70,6 +70,7 @@
     "postcss": "^8.5.1",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.5.3",
+    "storybook-dark-mode": "^4.0.2",
     "typescript": "^5.7.3",
     "vite": "^6.0.10",
     "vite-tsconfig-paths": "^5.1.4",

src/components/atoms/AnimatedHamburgerIconButton.stories.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import AnimatedHamburgerIconButton from "./AnimatedHamburgerIconButton";
+
+export default {
+  title: "Atoms/AnimatedHamburgerIconButton",
+  component: AnimatedHamburgerIconButton,
+  tags: ["atoms"],
+};
+
+export const Default = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  return (
+    <AnimatedHamburgerIconButton
+      isExpanded={isExpanded}
+      onClick={() => setIsExpanded(!isExpanded)}
+    />
+  );
+};

src/components/atoms/Button.stories.tsx

@@ -0,0 +1,15 @@
+import { action } from "@storybook/addon-actions";
+import Button from "./Button";
+
+export default {
+  title: "Atoms/Button",
+  component: Button,
+  tags: ["atoms"],
+};
+
+export const Default = {
+  args: {
+    children: "Button",
+    onClick: action("onClick"),
+  },
+};

src/components/atoms/Button.tsx

@@ -10,7 +10,7 @@ function Button({
 }) {
   return (
     <button
-      className={`mx-2 rounded bg-gray-300 px-4 py-2 dark:bg-gray-400 ${className}`}
+      className={`mx-2 rounded bg-gray-300 px-4 py-2 dark:bg-gray-400 hover:bg-gray-400 active:bg-gray-500 dark:hover:bg-gray-500 dark:active:bg-gray-600 hover:text-white active:text-white dark:hover:text-white dark:active:text-white ${className}`}
       {...props}
     >
       {children}

src/components/atoms/Heading.stories.tsx

@@ -0,0 +1,14 @@
+import Heading from "./Heading";
+
+export default {
+  title: "Atoms/Heading",
+  component: Heading,
+  tags: ["atoms"],
+};
+
+export const Default = {
+  args: {
+    level: 1,
+    children: "Heading",
+  },
+};

src/components/atoms/HeadingLink.stories.tsx

@@ -0,0 +1,14 @@
+import HeadingLink from "./HeadingLink";
+
+export default {
+  title: "Atoms/HeadingLink",
+  component: HeadingLink,
+  tags: ["atoms"],
+};
+
+export const Default = {
+  args: {
+    href: "#",
+    children: "Heading Link",
+  },
+};

src/components/atoms/Search.stories.tsx

@@ -0,0 +1,13 @@
+import { useState } from "react";
+import Search from "./Search";
+
+export default {
+  title: "Atoms/Search",
+  component: Search,
+  tags: ["atoms"],
+};
+
+export const Default = () => {
+  const [text, setText] = useState("");
+  return <Search label="Search..." text={text} setText={setText} />;
+};

src/components/atoms/Tab.stories.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Tab, { TabContainer } from "./Tab";
+
+export default {
+  title: "Atoms/Tab",
+  component: Tab,
+  tags: ["atoms"],
+};
+
+export const Default = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  return (
+    <TabContainer
+      tabs={[
+        <Tab
+          key={0}
+          title="Tab 1"
+          active={activeTab === 0}
+          onClick={() => setActiveTab(0)}
+        />,
+        <Tab
+          key={1}
+          title="Tab 2"
+          active={activeTab === 1}
+          onClick={() => setActiveTab(1)}
+        />,
+      ]}
+    >
+      {activeTab === 0 ? (
+        <div>Content for Tab 1</div>
+      ) : (
+        <div>Content for Tab 2</div>
+      )}
+    </TabContainer>
+  );
+};

src/components/atoms/TimeDotMarker.stories.tsx

@@ -0,0 +1,22 @@
+import { TimelineProvider } from "context/TimelineContext";
+import { TimeDotMarker } from "./TimeDotMarker";
+
+export default {
+  title: "Atoms/TimeDotMarker",
+  component: TimeDotMarker,
+  tags: ["atoms"],
+  decorators: [
+    (story: () => React.ReactNode) => (
+      <TimelineProvider contentLength={1000 * 60 * 60}>
+        {story()}
+      </TimelineProvider>
+    ),
+  ],
+};
+
+export const Default = {
+  args: {
+    timestampMilliseconds: 60000,
+    className: "bg-red-500",
+  },
+};

src/components/atoms/TimeLink.stories.tsx

@@ -0,0 +1,16 @@
+import { action } from "@storybook/addon-actions";
+import TimeLink from "./TimeLink";
+
+export default {
+  title: "Atoms/TimeLink",
+  component: TimeLink,
+  tags: ["atoms"],
+};
+
+export const Default = {
+  args: {
+    milliseconds: 60000,
+    onClick: action("onClick"),
+    children: "Click me",
+  },
+};

src/components/atoms/TimeLink.tsx

@@ -38,14 +38,14 @@ export default function TimeLink({
         }}
       >
         <time dateTime={msToIso(milliseconds)}>{formatMs(milliseconds)}</time>
-
+        &nbsp;
         {children}
       </a>
     );
   }
   return (
     <>
-      {formatMs(milliseconds)}
+      {formatMs(milliseconds)}&nbsp;
       {children}
     </>
   );

src/components/atoms/TimelineLegend.stories.tsx

@@ -0,0 +1,9 @@
+import TimelineLegend from "./TimelineLegend";
+
+export default {
+  title: "Atoms/TimelineLegend",
+  component: TimelineLegend,
+  tags: ["atoms"],
+};
+
+export const Default = {};