Add relative stories

pagopa · Apr 8, 2024 · 53d4e5d · 53d4e5d
1 parent 627b44b
commit 53d4e5d
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 0 deletions.
diff --git a/stories/foundation/layout/HStack.stories.tsx 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
@@ -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>
+    )
+  }
+};