Add Storybook manager and theme configuration

kingRayhan · Dec 28, 2023 · 29bfbc7 · 29bfbc7
1 parent 5a4492f
commit 29bfbc7
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -0,0 +1,4 @@
+import { addons } from "@storybook/manager-api";
+import theme from "./theme";
+
+addons.setConfig({ theme });
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -0,0 +1,6 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "dark",
+  brandTitle: "@graphland/react-video-player",
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,9 +31,11 @@
     "@storybook/addon-links": "^7.6.6",
     "@storybook/addon-onboarding": "^1.0.10",
     "@storybook/blocks": "^7.6.6",
+    "@storybook/manager-api": "^7.6.6",
     "@storybook/react": "^7.6.6",
     "@storybook/react-webpack5": "^7.6.6",
     "@storybook/test": "^7.6.6",
+    "@storybook/theming": "^7.6.6",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "react": "^18.2.0",

diff --git a/stories/VideoPlayer.stories.ts b/stories/VideoPlayer.stories.ts
@@ -3,7 +3,7 @@ import { VideoPlayer } from "../src";
 import { VideoPlayerProps } from "../src/VideoPlayer";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta = {
   title: "VideoPlayer",
   component: VideoPlayer,
   parameters: {
@@ -22,8 +22,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const DEFAULT_ARGS: VideoPlayerProps = {
-  height: 1080,
-  width: 1920,
+  height: 400,
+  width: 600,
+  isFluid: true,
   sources: [
     {
       src: "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",