From 4b7cb2a436333bdbea5e5ae3c0746c904c104a0a Mon Sep 17 00:00:00 2001
From: Freddy Boulton <alfonsoboulton@gmail.com>
Date: Thu, 6 Jul 2023 17:31:17 -0500
Subject: [PATCH] Add storybook for Gallery (#4818)

* Add stories

* Add show_share_button story + label

* Fix typo
---
 .../components/Gallery/Gallery.stories.svelte | 180 ++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 js/app/src/components/Gallery/Gallery.stories.svelte

diff --git a/js/app/src/components/Gallery/Gallery.stories.svelte b/js/app/src/components/Gallery/Gallery.stories.svelte
new file mode 100644
index 0000000000..79ae63090a
--- /dev/null
+++ b/js/app/src/components/Gallery/Gallery.stories.svelte
@@ -0,0 +1,180 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Gallery from "./Gallery.svelte";
+</script>
+
+<Meta
+	title="Components/Gallery"
+	component={Gallery}
+	argTypes={{
+		label: {
+			control: "text",
+			description: "The gallery label",
+			name: "label",
+			value: "Gradio Button"
+		},
+		show_label: {
+			options: [true, false],
+			description: "Whether to show the gallery",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		grid_cols: {
+			options: [1, 2, 3, 4],
+			description: "The number of colums to show in grid",
+			control: { type: "select" },
+			defaultValue: 2
+		},
+		grid_rows: {
+			options: [1, 2, 3, 4],
+			description: "The number of rows to show in grid",
+			control: { type: "select" },
+			defaultValue: 2
+		},
+		height: {
+			options: ["auto", 500, 600],
+			description: "The height of the grid",
+			control: { type: "select" },
+			defaultValue: "auto"
+		},
+		preview: {
+			options: [true, false],
+			description: "Whether to start the gallery in preview mode",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		allow_preview: {
+			options: [true, false],
+			description: "Whether to allow a preview view in the gallery",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		object_fit: {
+			options: ["contain", "cover", "fill", "none", "scale-down"],
+			description: "How to display each indivial image in the grid",
+			control: { type: "select" },
+			defaultValue: "contain"
+		},
+		show_share_button: {
+			options: [true, false],
+			description: "Whether to show the share button in the gallery",
+			control: { type: "boolean" },
+			defaultValue: false
+		}
+	}}
+/>
+
+<Template let:args>
+	<Gallery
+		{...args}
+		value={[
+			[
+				"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
+				"A fast cheetah"
+			],
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg"
+		]}
+	/>
+</Template>
+
+<Story
+	name="Gallery with label"
+	args={{ label: "My Cheetah Gallery", show_label: true }}
+/>
+<Story
+	name="Gallery without label"
+	args={{ label: "My Cheetah Gallery", show_label: false }}
+/>
+<Story
+	name="Gallery with grid_rows=3 and grid_cols=3"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		grid_rows: 3,
+		grid_cols: 3
+	}}
+/>
+<Story
+	name="Gallery with grid_cols=4"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		grid_cols: 4
+	}}
+/>
+<Story
+	name="Gallery with height=600"
+	args={{
+		label: "My Cheetah Gallery",
+		height: 600
+	}}
+/>
+<Story
+	name="Gallery with allow_preview=false"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		allow_preview: false
+	}}
+/>
+<Story
+	name="Gallery with preview"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		preview: true
+	}}
+/>
+<Story
+	name="Gallery with object_fit=scale-down"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "scale-down"
+	}}
+/>
+<Story
+	name="Gallery with object_fit=contain"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "contain"
+	}}
+/>
+<Story
+	name="Gallery with object_fit=cover"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "cover"
+	}}
+/>
+<Story
+	name="Gallery with object_fit=none"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "none"
+	}}
+/>
+<Story
+	name="Gallery with object_fit=fill"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "fill"
+	}}
+/>
+<Story
+	name="Gallery with share button"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		show_share_button: true
+	}}
+/>