feat: create Stack component

src/Stack/Stack.story.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { select } from "@storybook/addon-knobs";
+import { Box } from "../Box";
+import { Stack } from ".";
+import { Divider } from "../Divider";
+
+export default {
+  title: "Components/Stack",
+  component: Stack,
+};
+
+const widths = {
+  small: "191px",
+  medium: "351px",
+  large: "432px",
+};
+
+const Rectangle = ({ width }: { width: keyof typeof widths }) => (
+  <Box height="100px" width={widths[width]} bg="#85EB8B" />
+);
+
+export const Default = () => (
+  <Stack>
+    <Rectangle width="medium" />
+    <Rectangle width="large" />
+    <Rectangle width="small" />
+  </Stack>
+);
+
+export const WithAlignment = () => {
+  return (
+    <Stack alignment="right">
+      <Rectangle width="medium" />
+      <Rectangle width="large" />
+      <Rectangle width="small" />
+    </Stack>
+  );
+};
+export const WithNDSDivider = () => {
+  return (
+    <Stack alignment="right">
+      <Rectangle width="medium" />
+      <Rectangle width="large" />
+      <Rectangle width="small" />
+    </Stack>
+  );
+};

src/Stack/Stack.tsx

@@ -0,0 +1,44 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { Box, Divider } from "../index";
+import { Flex } from "../Flex";
+
+type StackRef = HTMLDivElement;
+
+type Alignment = "left" | "center" | "right";
+
+const flexAlignment: Record<Alignment, CSSProperties["alignItems"]> = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+};
+
+type StackProps = {
+  children?: React.ReactNode;
+  alignment?: Alignment;
+  space?: CSSProperties["gap"];
+  showDivider?: boolean;
+  renderDivider?: () => ReactNode;
+};
+
+export const Stack = React.forwardRef<StackRef, StackProps>(
+  ({ children, showDivider, renderDivider = () => <Divider width="100%" />, space, alignment }, ref) => (
+    <Flex gap={space} flexDirection="column" alignItems={flexAlignment[alignment]} ref={ref}>
+      {showDivider
+        ? React.Children.map(children, (child, index) => {
+            if (index > 0) {
+              return (
+                <>
+                  {renderDivider(index)}
+                  {child}
+                </>
+              );
+            }
+
+            return child;
+          })
+        : children}
+    </Flex>
+  )
+);
+
+export default Stack;

src/Stack/index.ts

@@ -0,0 +1 @@
+export { default as Stack } from "./Stack";

src/index.ts

@@ -84,3 +84,4 @@ export { Heading1, Heading2, Heading3, Heading4, Text } from "./Type";
 export type { TextProps } from "./Type";
 export { useWindowDimensions } from "./utils";
 export { InlineValidation } from "./Validation";
+export { Stack } from "./Stack";