From 39ddde4cb3b3688dd287f6a7493d11a9eb1c318f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5vard=20Bjerke?= <hkfbjerke@gmail.com>
Date: Sat, 2 Nov 2024 15:39:36 +0100
Subject: [PATCH] docs: refactor stories (#98)

* docs: refactor stories

* test: update visual test snapshots
---
 ... => components-focus-gpx-map--default.png} | Bin
 ...s-focus-gpx-map--focus-gpx-map-select.png} | Bin
 src/components/focus-gpx-map.stories.tsx      |  21 +++++++++++++-----
 src/layers/gpx-layer.stories.tsx              |   8 +++++++
 4 files changed, 24 insertions(+), 5 deletions(-)
 rename __snapshots__/{focus-gpx-map--focus-gpx-map-default.png => components-focus-gpx-map--default.png} (100%)
 rename __snapshots__/{focus-gpx-map--focus-gpx-map-select.png => components-focus-gpx-map--focus-gpx-map-select.png} (100%)

diff --git a/__snapshots__/focus-gpx-map--focus-gpx-map-default.png b/__snapshots__/components-focus-gpx-map--default.png
similarity index 100%
rename from __snapshots__/focus-gpx-map--focus-gpx-map-default.png
rename to __snapshots__/components-focus-gpx-map--default.png
diff --git a/__snapshots__/focus-gpx-map--focus-gpx-map-select.png b/__snapshots__/components-focus-gpx-map--focus-gpx-map-select.png
similarity index 100%
rename from __snapshots__/focus-gpx-map--focus-gpx-map-select.png
rename to __snapshots__/components-focus-gpx-map--focus-gpx-map-select.png
diff --git a/src/components/focus-gpx-map.stories.tsx b/src/components/focus-gpx-map.stories.tsx
index 66ec4c0..fb69f5d 100644
--- a/src/components/focus-gpx-map.stories.tsx
+++ b/src/components/focus-gpx-map.stories.tsx
@@ -1,13 +1,24 @@
 import * as React from "react";
 import { FocusGpxMap } from "./focus-gpx-map";
+import type { Meta, StoryObj } from "@storybook/react";
 
-export default {
-    title: "Focus GPX Map",
+type Story = StoryObj<typeof FocusGpxMap>;
+
+const meta: Meta<typeof FocusGpxMap> = {
+    tags: ["autodocs"],
+    component: FocusGpxMap,
+    parameters: {
+        docs: {
+            story: {
+                height: "400px",
+            },
+        },
+    },
 };
 
-export function FocusGpxMapDefault() {
-    return <FocusGpxMap></FocusGpxMap>;
-}
+export default meta;
+
+export const Default: Story = {};
 
 export function FocusGpxMapSelect({ gpxUrl }: { gpxUrl: string }) {
     return <FocusGpxMap gpx={gpxUrl}></FocusGpxMap>;
diff --git a/src/layers/gpx-layer.stories.tsx b/src/layers/gpx-layer.stories.tsx
index ae44cdf..99df08b 100644
--- a/src/layers/gpx-layer.stories.tsx
+++ b/src/layers/gpx-layer.stories.tsx
@@ -10,6 +10,14 @@ import type { StoryObj } from "@storybook/react";
 
 export default {
     title: "Layers / GPX Layer",
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            story: {
+                height: "600px",
+            },
+        },
+    },
 };
 
 const gpxFile = "Jotunheimen_rundt.gpx";