From 53d4e5d147c978fdcd250fd9af591b25f366d82c Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 8 Apr 2024 17:15:18 +0200
Subject: [PATCH] Add relative stories

---
 stories/foundation/layout/HStack.stories.tsx | 73 ++++++++++++++++++++
 stories/foundation/layout/VStack.stories.tsx | 72 +++++++++++++++++++
 2 files changed, 145 insertions(+)
 create mode 100644 stories/foundation/layout/HStack.stories.tsx
 create mode 100644 stories/foundation/layout/VStack.stories.tsx

diff --git a/stories/foundation/layout/HStack.stories.tsx b/stories/foundation/layout/HStack.stories.tsx
new file mode 100644
index 00000000..01504b2f
--- /dev/null
+++ b/stories/foundation/layout/HStack.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { View } from "react-native";
+import { HStack, LabelSmall } from "../../../src/components";
+import { IOColors } from "../../../src/core";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Foundation/Layout/HStack",
+  decorators: [
+    Story => (
+      <View
+        style={{
+          backgroundColor: IOColors["grey-100"]
+        }}
+      >
+        <Story />
+      </View>
+    )
+  ],
+  component: HStack,
+  parameters: {
+    // Optional parameter to center the component in the CanHas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"]
+} satisfies Meta<typeof HStack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Base: Story = {
+  args: {
+    space: 16,
+    children: (
+      <React.Fragment>
+        {[...Array(3)].map((_el, i) => (
+          <View
+            key={`block-${i}`}
+            style={{
+              height: 100,
+              width: 32,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: IOColors["grey-700"]
+            }}
+          >
+            <LabelSmall weight="Regular" color={"grey-200"}>{`${
+              i + 1
+            }`}</LabelSmall>
+          </View>
+        ))}
+        <View
+          style={{
+            height: 100,
+            flexGrow: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            paddingHorizontal: 16,
+            backgroundColor: IOColors["grey-700"]
+          }}
+        >
+          <LabelSmall weight="Regular" color={"grey-200"}>
+            Growing width
+          </LabelSmall>
+        </View>
+      </React.Fragment>
+    )
+  }
+};
diff --git a/stories/foundation/layout/VStack.stories.tsx b/stories/foundation/layout/VStack.stories.tsx
new file mode 100644
index 00000000..e636817d
--- /dev/null
+++ b/stories/foundation/layout/VStack.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { View } from "react-native";
+import { LabelSmall, VStack } from "../../../src/components";
+import { IOColors } from "../../../src/core";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "Foundation/Layout/VStack",
+  decorators: [
+    Story => (
+      <View
+        style={{
+          backgroundColor: IOColors["grey-100"]
+        }}
+      >
+        <Story />
+      </View>
+    )
+  ],
+  component: VStack,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"]
+} satisfies Meta<typeof VStack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Base: Story = {
+  args: {
+    space: 16,
+    children: (
+      <React.Fragment>
+        {[...Array(3)].map((_el, i) => (
+          <View
+            key={`block-${i}`}
+            style={{
+              height: 32,
+              width: 320,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: IOColors["grey-700"]
+            }}
+          >
+            <LabelSmall weight="Regular" color={"grey-200"}>{`Block n.${
+              i + 1
+            }`}</LabelSmall>
+          </View>
+        ))}
+        <View
+          style={{
+            height: 96,
+            width: 320,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: IOColors["grey-700"]
+          }}
+        >
+          <LabelSmall weight="Regular" color={"grey-200"}>
+            Different height
+          </LabelSmall>
+        </View>
+      </React.Fragment>
+    )
+  }
+};