[IOAPPX-281] Add VStack and HStack components

example/src/pages/Layout.tsx

@@ -4,18 +4,20 @@ import {
   Divider,
   H1,
   H3,
-  HSpacer,
+  HStack,
   IOAppMargin,
   IOColors,
   IOSpacer,
   IOVisualCostants,
   LabelSmall,
   VDivider,
   VSpacer,
+  VStack,
   useIOTheme
 } from "@pagopa/io-app-design-system";
 import React from "react";
-import { StatusBar, View } from "react-native";
+import { View } from "react-native";
+import { ComponentViewerBox } from "../components/ComponentViewerBox";
 import { NoMarginScreen } from "../components/Screen";
 import { SpacerViewerBox } from "../components/SpacerViewerBox";
 
@@ -24,10 +26,6 @@ export const Layout = () => {
 
   return (
     <NoMarginScreen>
-      <StatusBar
-        barStyle={"default"}
-        backgroundColor={IOColors.black}
-      ></StatusBar>
       <ContentWrapper>
         <H1
           color={theme["textHeading-default"]}
@@ -42,9 +40,11 @@ export const Layout = () => {
           ContentWrapper
         </H3>
       </ContentWrapper>
-      {IOAppMargin.map((value, i, arr) => (
-        <React.Fragment key={`${value}-${i}`}>
+
+      <VStack space={16}>
+        {IOAppMargin.map((value, i) => (
           <View
+            key={`${value}-${i}`}
             style={{
               backgroundColor: IOColors[theme["appBackground-tertiary"]]
             }}
@@ -68,9 +68,8 @@ export const Layout = () => {
               </View>
             </ContentWrapper>
           </View>
-          {i !== arr.length - 1 && <VSpacer size={16} />}
-        </React.Fragment>
-      ))}
+        ))}
+      </VStack>
 
       <VSpacer size={40} />
 
@@ -84,15 +83,15 @@ export const Layout = () => {
         </H3>
 
         {/* Vertical */}
-        {IOSpacer.map((spacerEntry, i, arr) => (
-          <React.Fragment key={`${spacerEntry}-${i}-vertical`}>
-            <SpacerViewerBox orientation="vertical" size={spacerEntry} />
-            {/* Don't add spacer to the last item. Quick and dirty
-        alternative to the Stack component.
-        https://stackoverflow.com/a/60975451 */}
-            {i !== arr.length - 1 && <VSpacer size={16} />}
-          </React.Fragment>
-        ))}
+        <VStack space={16}>
+          {IOSpacer.map((spacerEntry, i) => (
+            <SpacerViewerBox
+              key={`${spacerEntry}-${i}-vertical`}
+              orientation="vertical"
+              size={spacerEntry}
+            />
+          ))}
+        </VStack>
 
         <VSpacer size={24} />
 
@@ -101,18 +100,104 @@ export const Layout = () => {
         </H3>
 
         {/* Horizontal */}
-        <View style={{ flexDirection: "row" }}>
-          {IOSpacer.map((spacerEntry, i, arr) => (
-            <React.Fragment key={`${spacerEntry}-${i}-horizontal`}>
-              <SpacerViewerBox orientation="horizontal" size={spacerEntry} />
-              {i !== arr.length - 1 && <HSpacer size={8} />}
-            </React.Fragment>
+        <HStack space={8}>
+          {IOSpacer.map((spacerEntry, i) => (
+            <SpacerViewerBox
+              key={`${spacerEntry}-${i}-horizontal`}
+              orientation="horizontal"
+              size={spacerEntry}
+            />
           ))}
-        </View>
+        </HStack>
 
         <VSpacer size={48} />
+
+        <H3 color={theme["textHeading-default"]} style={{ marginBottom: 16 }}>
+          Stack
+        </H3>
+
+        <ComponentViewerBox name="VStack, space 16">
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-secondary"]]
+            }}
+          >
+            <VStack space={16}>
+              {[...Array(3)].map((_el, i) => (
+                <View
+                  key={`block-${i}`}
+                  style={{
+                    height: 32,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: IOColors[theme["appBackground-tertiary"]]
+                  }}
+                >
+                  <LabelSmall
+                    weight="Regular"
+                    color={theme["textBody-tertiary"]}
+                  >{`Block n.${i + 1}`}</LabelSmall>
+                </View>
+              ))}
+              <View
+                style={{
+                  height: 72,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundColor: IOColors[theme["appBackground-tertiary"]]
+                }}
+              >
+                <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+                  Different height
+                </LabelSmall>
+              </View>
+            </VStack>
+          </View>
+        </ComponentViewerBox>
+
+        <ComponentViewerBox name="HStack, space 16">
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-secondary"]]
+            }}
+          >
+            <HStack space={16}>
+              {[...Array(3)].map((_el, i) => (
+                <View
+                  key={`block-${i}`}
+                  style={{
+                    width: 48,
+                    height: 48,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: IOColors[theme["appBackground-tertiary"]]
+                  }}
+                >
+                  <LabelSmall
+                    weight="Regular"
+                    color={theme["textBody-tertiary"]}
+                  >{`${i + 1}`}</LabelSmall>
+                </View>
+              ))}
+              <View
+                style={{
+                  flexGrow: 1,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundColor: IOColors[theme["appBackground-tertiary"]]
+                }}
+              >
+                <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+                  Growing block
+                </LabelSmall>
+              </View>
+            </HStack>
+          </View>
+        </ComponentViewerBox>
       </ContentWrapper>
 
+      <VSpacer size={24} />
+
       <ContentWrapper>
         <H1 color={theme["textHeading-default"]} style={{ marginBottom: 16 }}>
           Divider

src/components/index.tsx

@@ -5,28 +5,29 @@ export * from "./badge";
 export * from "./banner";
 export * from "./buttons";
 export * from "./checkbox";
-export * from "./contentWrapper";
 export * from "./codeInput";
+export * from "./contentWrapper";
 export * from "./divider";
 export * from "./endOfPage";
 export * from "./featureInfo";
 export * from "./icons";
 export * from "./image";
 export * from "./layout";
 export * from "./listitems";
-export * from "./logos";
 export * from "./loadingSpinner";
+export * from "./logos";
 export * from "./modules";
 export * from "./numberpad";
 export * from "./otpInput";
 export * from "./pictograms";
 export * from "./progressLoader";
 export * from "./radio";
 export * from "./spacer";
+export * from "./stack";
 export * from "./stepper";
 export * from "./switch";
-export * from "./tag";
 export * from "./tabs";
+export * from "./tag";
+export * from "./textInput";
 export * from "./toast";
 export * from "./typography";
-export * from "./textInput";

src/components/spacer/Spacer.tsx

@@ -13,7 +13,7 @@ type SpacerProps = {
   size?: IOSpacer;
 };
 
-const DEFAULT_SIZE = 16;
+const DEFAULT_SIZE: IOSpacer = 16;
 
 /* Debug Mode */
 const debugMode = false;

src/components/stack/Stack.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import { View } from "react-native";
+import { IOSpacer } from "../../core";
+
+type Stack = {
+  space?: IOSpacer;
+  children: ReactNode;
+};
+
+/**
+Horizontal Stack component
+@param {IOSpacer} space
+ */
+export const HStack = ({ space, children }: Stack) => (
+  <View
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      columnGap: space
+    }}
+  >
+    {children}
+  </View>
+);
+
+/**
+Vertical Stack component
+@param {IOSpacer} space
+ */
+
+export const VStack = ({ space, children }: Stack) => (
+  <View
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      rowGap: space
+    }}
+  >
+    {children}
+  </View>
+);

src/components/stack/index.tsx

@@ -0,0 +1 @@
+export * from "./Stack";

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>
+    )
+  }
+};