Feature/stack (#46)

* feat(stack): created Stack component

* feat(stack): created stories for stack

Stack #22

* test(stack): created simple render test for stack component

* fix(stack): fixed typescript error in stories for stack

Co-authored-by: Kacper Kruczek <>

src/ui/index.ts

@@ -8,3 +8,4 @@ export * from './table';
 export * from './tooltip';
 export * from './typography';
 export * from './text-input';
+export * from './stack';

src/ui/stack/index.ts

@@ -0,0 +1,3 @@
+export * from './stack.component';
+export * from './stack.model';
+export * from './stack.utils';

src/ui/stack/stack.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { BaseStackClasses } from './stack.model';
+import { getStackClasses } from './stack.utils';
+
+export const Stack: React.FC<BaseStackClasses> = ({
+  children,
+  className,
+  ...props
+}) => <div className={clsx(getStackClasses(props), className)}>{children}</div>;

src/ui/stack/stack.model.tsx

@@ -0,0 +1,18 @@
+type StackSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type StackAlign = 'start' | 'end' | 'center' | 'stretch';
+type StackJustify =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'between'
+  | 'around'
+  | 'evenly';
+
+export type BaseStackClasses = {
+  vertical?: boolean;
+  wrap?: boolean;
+  spacing?: StackSpacing;
+  items?: StackAlign;
+  justify?: StackJustify;
+  className?: string;
+};

src/ui/stack/stack.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Stack } from './stack.component';
+
+describe('Stack', () => {
+  test('should render default Stack', async () => {
+    const { container } = render(
+      <Stack>
+        <div>test</div>
+      </Stack>
+    );
+
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

src/ui/stack/stack.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Stack } from './stack.component';
+
+export default {
+  title: 'Atoms/Stack',
+  component: Stack,
+  argTypes: {
+    vertical: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    wrap: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    spacing: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 9,
+      },
+    },
+    alignItems: {
+      options: ['start', 'center', 'end', 'stretch'],
+      control: {
+        type: 'radio',
+      },
+    },
+    justify: {
+      options: ['start', 'center', 'end', 'between', 'around', 'evenly'],
+      control: {
+        type: 'radio',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+} as ComponentMeta<typeof Stack>;
+
+const Box = ({ label }: { label: string }) => (
+  <div className=" w-6 h-6 bg-slate-100 border">{label}</div>
+);
+
+const Template: ComponentStory<typeof Stack> = (args) => (
+  <Stack {...args}>
+    <Box label="1" />
+    <Box label="2" />
+    <Box label="3" />
+  </Stack>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  spacing: 2,
+  vertical: false,
+  className: 'border',
+};

src/ui/stack/stack.utils.tsx

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+
+import { BaseStackClasses } from './stack.model';
+
+export const getStackClasses = ({
+  spacing = 2,
+  vertical = false,
+  wrap = false,
+  items = 'stretch',
+  justify = 'start',
+}: BaseStackClasses) =>
+  clsx(
+    'flex',
+
+    { 'flex-col': vertical, 'flex-wrap': wrap },
+    {
+      'gap-1': spacing === 1,
+      'gap-2': spacing === 2,
+      'gap-3': spacing === 3,
+      'gap-4': spacing === 4,
+      'gap-5': spacing === 5,
+      'gap-6': spacing === 6,
+      'gap-7': spacing === 7,
+      'gap-8': spacing === 8,
+      'gap-9': spacing === 9,
+    },
+    {
+      'items-stretch': items === 'stretch',
+      'items-start': items === 'start',
+      'items-center': items === 'center',
+      'items-end': items === 'end',
+    },
+    {
+      'justify-start': justify === 'start',
+      'justify-center': justify === 'center',
+      'justify-end': justify === 'end',
+      'justify-between': justify === 'between',
+      'justify-around': justify === 'around',
+      'justify-evenly': justify === 'evenly',
+    }
+  );