Add IconButton and SelectedCutsDialog components with Storybook stories

.storybook/main.ts

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

.storybook/preview.ts

@@ -2,6 +2,8 @@ import type { Preview } from "@storybook/react";
 
 // import the tailwindcss styles
 import "tailwindcss/tailwind.css";
+// import the material-symbols
+import "material-symbols";
 
 const preview: Preview = {
   parameters: {

package.json

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@chromatic-com/storybook": "^3.2.4",
+    "material-symbols": "^0.28.1",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",

src/components/atoms/IconButton.stories.tsx

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

src/components/atoms/IconButton.tsx

@@ -0,0 +1,21 @@
+import type React from "react";
+
+function IconButton({
+  icon,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"button"> & {
+  className?: string;
+  icon: string;
+}) {
+  return (
+    <button
+      className={`rounded bg-gray-300 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}
+    >
+      <span className="material-symbols-outlined size-5 m-2">{icon}</span>
+    </button>
+  );
+}
+
+export default IconButton;

src/components/molecules/SelectedCutsDialog.stories.tsx

@@ -0,0 +1,60 @@
+import { action } from "@storybook/addon-actions";
+
+import SelectedCutsDialog from "./SelectedCutsDialog";
+
+export default {
+  title: "Molecules/SelectedCutsDialog",
+  component: SelectedCutsDialog,
+  tags: ["molecules"],
+  decorators: [
+    (story: () => React.ReactNode) => (
+      <div className="h-[70vh] flex justify-center items-center">{story()}</div>
+    ),
+  ],
+};
+
+export const Default = () => {
+  return (
+    <SelectedCutsDialog
+      cuts={[
+        {
+          id: "1",
+          start: 0,
+          end: 10,
+        },
+      ]}
+      onClose={action("onClose")}
+      onClear={action("onClear")}
+      onRemove={action("onRemove")}
+      onReorder={action("onReorder")}
+    />
+  );
+};
+
+export const MultipleCuts = () => {
+  return (
+    <SelectedCutsDialog
+      cuts={[
+        {
+          id: "1",
+          start: 0,
+          end: 10,
+        },
+        {
+          id: "2",
+          start: 10,
+          end: 20,
+        },
+        {
+          id: "3",
+          start: 20,
+          end: 30,
+        },
+      ]}
+      onClose={action("onClose")}
+      onClear={action("onClear")}
+      onRemove={action("onRemove")}
+      onReorder={action("onReorder")}
+    />
+  );
+};

src/components/molecules/SelectedCutsDialog.tsx

@@ -0,0 +1,93 @@
+import Button from "components/atoms/Button";
+import IconButton from "components/atoms/IconButton";
+
+import DEFAULT_KEYFRAME_SRC from "assets/logo.svg";
+
+type Cut = {
+  id: string;
+  start: number;
+  end: number;
+  keyframeSrc?: string;
+};
+
+interface Props {
+  cuts: Cut[];
+  onClose: () => void;
+  onClear: () => void;
+  onRemove: (id: string) => void;
+  onReorder: (cuts: Cut[]) => void;
+}
+
+export default function SelectedCutsDialog({
+  cuts,
+  onClose,
+  onClear,
+  onRemove,
+  onReorder,
+}: Props) {
+  const handleRemove = (id: string) => {
+    onRemove(id);
+  };
+
+  const handleReorder = (index: number, direction: "up" | "down") => {
+    const newCuts = [...cuts];
+    const [removed] = newCuts.splice(index, 1);
+    newCuts.splice(direction === "up" ? index - 1 : index + 1, 0, removed);
+    onReorder(newCuts);
+  };
+
+  return (
+    <div className="fixed w-96 bg-white shadow-lg p-4 flex flex-col space-y-4 right-0 bottom-0">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-bold">Selected Cuts</h2>
+        <Button onClick={onClose}>Close</Button>
+        <Button
+          className="bg-red-500
+        dark:bg-red-600 hover:bg-red-600 active:bg-red-700 dark:hover:bg-red-700 dark:active:bg-red-800 hover:text-white active:text-white dark:hover:text-white dark:active:text-white
+        "
+          onClick={onClear}
+        >
+          Clear
+        </Button>
+      </div>
+      <ul className="flex-grow overflow-y-auto space-y-1">
+        {cuts.map((cut, index) => (
+          <li
+            key={cut.id}
+            className="border border-gray-200 rounded p-1 flex items-center"
+          >
+            <img
+              src={cut.keyframeSrc || DEFAULT_KEYFRAME_SRC}
+              width={48}
+              height={45}
+              alt={`Keyframe for cut ${cut.id}`}
+              className="mr-2"
+            />
+            <div className="flex-grow">
+              Cut {cut.id}: {cut.start}s - {cut.end}s
+            </div>
+            <div className="flex space-x-1">
+              <IconButton
+                onClick={() => handleRemove(cut.id)}
+                icon="close"
+                title="Remove"
+              />
+              <IconButton
+                onClick={() => handleReorder(index, "up")}
+                disabled={index === 0}
+                icon="arrow_upward"
+                title="Move up"
+              />
+              <IconButton
+                onClick={() => handleReorder(index, "down")}
+                disabled={index === cuts.length - 1}
+                icon="arrow_downward"
+                title="Move down"
+              />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/index.ts

@@ -1,4 +1,5 @@
 import "tailwindcss/tailwind.css";
+import "material-symbols";
 
 import VideoSelectionPage from "components/pages/VideoSelectionPage";
 

tsconfig.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "target": "esnext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -15,8 +19,17 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"]
+    "types": [
+      "vite/client",
+      "vitest/globals",
+      "@testing-library/jest-dom",
+      "vite-plugin-svgr/client"
+    ],
   },
-  "include": ["src"],
-  "exclude": ["node_modules"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }