feat(#342): migrate stack component

src/lib/components/bosons/HelloInternet/HelloInternetTheme.ts

@@ -21,6 +21,7 @@ import type { ListGroupTheme } from '../../molecules/ListGroup/ListGroup.theme';
 import type { ModalTheme } from '../../molecules/Modal/Modal.theme';
 import type { PaginationTheme } from '../../molecules/Pagination/Pagination.theme';
 import type { PresentationTheme } from '../../molecules/Presentational/Presentational.theme';
+import type { StacksTheme } from '../../molecules/Stacks/Stack.theme';
 import type { TabsTheme } from '../../molecules/Tab/Tabs.theme';
 import type { CarouselTheme } from '../../organisms/Carousel/Carousel.theme';
 import type { FooterTheme } from '../../organisms/Footer/Footer.theme';
@@ -56,6 +57,7 @@ export interface HelloInternetTheme extends Record<string, unknown> {
   progress: ProgressTheme;
   mainContainer: MainContainerTheme;
   spinner: SpinnerTheme;
+  stacks: StacksTheme;
   tab: TabsTheme;
   toast: ToastTheme;
   tooltip: TooltipTheme;

src/lib/components/molecules/Stacks/Stack.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, Story } from '@storybook/react/types-6-0';
+import { Stack } from '.';
+import type { StackProps } from './Stack';
+
+export default {
+  title: 'Components/molecules/Stack',
+  component: Stack
+} as Meta;
+
+const Template: Story<StackProps> = (args) => <Stack {...args} />;
+
+const STACKS_DATA = [
+  {
+    stackTitle: 'Category 1',
+    items: [
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'No link'
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'Has link (gray)',
+        link: 'https://snowpact.com/techno/gatsby',
+        grayscale: true
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'Has link',
+        link: 'https://snowpact.com/techno/gatsby'
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'Has link',
+        link: 'https://snowpact.com/techno/gatsby'
+      }
+    ]
+  },
+  {
+    stackTitle: 'Category 2',
+    items: [
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'Has link',
+        link: 'https://snowpact.com/techno/gatsby'
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'No link (gray)',
+        grayscale: true
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'No link'
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'Has link',
+        link: 'https://snowpact.com/techno/gatsby'
+      }
+    ]
+  },
+  {
+    stackTitle: 'Category 3',
+    items: [
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'Has link',
+        link: 'https://snowpact.com/techno/gatsby'
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'Has link',
+        link: 'https://snowpact.com/techno/gatsby'
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'Has link (gray)',
+        link: 'https://snowpact.com/techno/gatsby',
+        grayscale: true
+      },
+      {
+        image: 'https://snowpact.com/static/bbfc78f3a6a4c94f955ebc166ba7a4d6/59649/stack-gatsby.png',
+        alt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a.',
+        title: 'No link'
+      }
+    ]
+  }
+];
+
+export const DefaultStack = Template.bind({});
+DefaultStack.storyName = 'Default';
+DefaultStack.args = {
+  children: (
+    <Stack>
+      {STACKS_DATA.map((stack, index) => (
+        <Stack.ItemGroup key={index}>
+          <Stack.Title>{stack.stackTitle}</Stack.Title>
+          {stack.items.map((item, index) => (
+            <Stack.Item key={index} {...item} />
+          ))}
+        </Stack.ItemGroup>
+      ))}
+    </Stack>
+  )
+};
+
+export const HorizontalStack = Template.bind({});
+HorizontalStack.storyName = 'With Horizontal Item Group';
+HorizontalStack.args = {
+  children: (
+    <Stack>
+      {STACKS_DATA.map((stack, index) => (
+        <Stack.ItemGroup horizontal key={index}>
+          <Stack.Title>{stack.stackTitle}</Stack.Title>
+          {stack.items.map((item, index) => (
+            <Stack.Item key={index} {...item} />
+          ))}
+        </Stack.ItemGroup>
+      ))}
+    </Stack>
+  )
+};
+
+export const WithLinks = Template.bind({});
+WithLinks.storyName = 'With horizontal stack';
+WithLinks.args = {
+  children: (
+    <Stack horizontal>
+      {STACKS_DATA.map((stack, index) => (
+        <Stack.ItemGroup key={index}>
+          <Stack.Title>{stack.stackTitle}</Stack.Title>
+          {stack.items.map((item, index) => (
+            <Stack.Item
+              key={index}
+              title={item.title}
+              link={item.link}
+              image={item.image}
+              alt={item.alt}
+              grayscale={item.grayscale}
+            />
+          ))}
+        </Stack.ItemGroup>
+      ))}
+    </Stack>
+  )
+};

src/lib/components/molecules/Stacks/Stack.theme.tsx

@@ -0,0 +1,79 @@
+export type StacksTheme = {
+  base: string;
+  horizontal: {
+    on: string;
+    off: string;
+  };
+  stacksList: {
+    base: string;
+    horizontal: string;
+  };
+  stackList: {
+    base: string;
+    horizontal: {
+      on: string;
+      off: string;
+    };
+  };
+  title: {
+    base: string;
+    horizontal: string;
+    text: string;
+  };
+  stackItem: {
+    base: string;
+    horizontal: {
+      on: string;
+      off: string;
+    };
+    text: string;
+    link: {
+      base: string;
+      withLink: string;
+    };
+    stackImage: {
+      base: string;
+      withGrayscale: string;
+    };
+  };
+};
+
+export const STACKS_THEME: StacksTheme = {
+  base: 'mt-2 flex gap-4',
+  horizontal: {
+    on: 'flex-row',
+    off: 'max-w-[150px] flex-col text-center gap-4'
+  },
+  stacksList: {
+    base: 'flex flex-wrap place-content-center gap-6 p-2',
+    horizontal: 'flex-col gap-6 items-center'
+  },
+  stackList: {
+    base: 'flex p-2',
+    horizontal: {
+      on: 'flex-row items-center gap-4',
+      off: 'flex-col justify-center gap-4'
+    }
+  },
+  title: {
+    base: 'my-2',
+    horizontal: 'sm:rotate-360 w-36 self-center',
+    text: 'text-xl text-black'
+  },
+  stackItem: {
+    base: 'mt-2 flex gap-4',
+    horizontal: {
+      on: 'flex-row',
+      off: 'flex-col'
+    },
+    text: 'flex-1 text-sm font-[520] text-black',
+    link: {
+      base: 'inline-block min-w-[120px] rounded-xl px-2 py-6 text-center shadow-lg margin-auto',
+      withLink: 'duration-300 ease-in hover:shadow-xl'
+    },
+    stackImage: {
+      base: 'mb-2 inline-block h-10 w-10 object-contain',
+      withGrayscale: 'opacity-50 grayscale'
+    }
+  }
+};

src/lib/components/molecules/Stacks/Stack.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { excludeClassName } from '../../../helpers/exclude';
+import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
+
+export interface StackProps extends PropsWithChildren<Omit<ComponentProps<'div' | 'p'>, 'className'>> {
+  horizontal?: boolean;
+}
+
+export const Stack: FC<StackProps> = ({ horizontal, children, ...props }): JSX.Element => {
+  const theirProps = excludeClassName(props);
+  const theme = useTheme().theme.stacks.stacksList;
+  return (
+    <div className={classNames(theme.base, [horizontal && theme.horizontal])} {...theirProps}>
+      {children}
+    </div>
+  );
+};

src/lib/components/molecules/Stacks/StackItem.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
+
+export interface StackItemProps
+  extends PropsWithChildren<Omit<ComponentProps<'div' | 'p' | 'a' | 'img' | 'strong'>, 'className'>> {
+  title: string;
+  image: string;
+  alt: string;
+  grayscale?: boolean;
+  link?: string;
+}
+
+export const StackItem: FC<StackItemProps> = ({ link, title, alt, grayscale, image }): JSX.Element => {
+  const theme = useTheme().theme.stacks.stackItem;
+
+  const Component = typeof link === 'undefined' ? 'div' : 'a';
+
+  return (
+    <Component className={classNames(theme.link.base, [link && theme.link.withLink])} href={link}>
+      <img
+        src={image}
+        alt={alt}
+        height={40}
+        width={40}
+        className={classNames(theme.stackImage.base, grayscale && theme.stackImage.withGrayscale)}
+      />
+      <p className={theme.text}>
+        <strong>{title}</strong>
+      </p>
+    </Component>
+  );
+};

src/lib/components/molecules/Stacks/StackItemGroup.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
+import { excludeClassName } from '../../../helpers/exclude';
+import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
+import { StackTitle } from './StackTitle';
+
+export interface StackItemGroupProps extends PropsWithChildren<Omit<ComponentProps<'div' | 'p'>, 'className'>> {
+  horizontal?: boolean;
+}
+
+export const StackItemGroup: FC<StackItemGroupProps> = ({ horizontal, children, ...props }): JSX.Element => {
+  const theirProps = excludeClassName(props);
+
+  const theme = useTheme().theme.stacks;
+  return (
+    <div className={classNames(theme.base, theme.horizontal[horizontal ? 'on' : 'off'])}>
+      <StackTitle horizontal={horizontal} />
+      <div
+        className={classNames(theme.stackList.base, theme.stackList.horizontal[horizontal ? 'on' : 'off'])}
+        {...theirProps}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

src/lib/components/molecules/Stacks/StackTitle.tsx

@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
+import { useTheme } from '../../bosons/HelloInternet/ThemeContext';
+
+export interface StackTitleProps extends PropsWithChildren<Omit<ComponentProps<'div' | 'p'>, 'className'>> {
+  horizontal?: boolean;
+}
+
+export const StackTitle: FC<StackTitleProps> = ({ horizontal, children }): JSX.Element => {
+  const theme = useTheme().theme.stacks.title;
+  return (
+    <div className={classNames(theme.base, horizontal && theme.horizontal)}>
+      <p className={classNames(theme.text)}>{children}</p>
+    </div>
+  );
+};

src/lib/components/molecules/Stacks/index.ts

@@ -0,0 +1,15 @@
+import { Stack as StackComponent } from './Stack';
+import { StackItem as StackItemComponent } from './StackItem';
+import { StackItemGroup as StackItemGroupComponent } from './StackItemGroup';
+import { StackTitle as StackTitleComponent } from './StackTitle';
+
+StackComponent.displayName = 'Stacks';
+StackItemComponent.displayName = 'Stacks.Item';
+StackItemGroupComponent.displayName = 'Stack.ItemGroup';
+StackTitleComponent.displayName = 'Stacks.Title';
+
+export const Stack = Object.assign(StackComponent, {
+  Item: StackItemComponent,
+  ItemGroup: StackItemGroupComponent,
+  Title: StackTitleComponent
+});

src/lib/theme/default.ts

@@ -21,6 +21,7 @@ import { LIST_GROUP_THEME } from '../components/molecules/ListGroup/ListGroup.th
 import { MODAL_THEME } from '../components/molecules/Modal/Modal.theme';
 import { PAGINATION_THEME } from '../components/molecules/Pagination/Pagination.theme';
 import { PRESENTATIONAL_THEME } from '../components/molecules/Presentational/Presentational.theme';
+import { STACKS_THEME } from '../components/molecules/Stacks/Stack.theme';
 import { TABS_THEME } from '../components/molecules/Tab/Tabs.theme';
 import { CAROUSEL_THEME } from '../components/organisms/Carousel/Carousel.theme';
 import { FOOTER_THEME } from '../components/organisms/Footer/Footer.theme';
@@ -50,6 +51,7 @@ const theme: HelloInternetTheme = {
   pagination: PAGINATION_THEME,
   progressBar: PROGRESS_BAR_THEME,
   sidebar: SIDEBAR_THEME,
+  stacks: STACKS_THEME,
   progress: PROGRESS_THEME,
   presentational: PRESENTATIONAL_THEME,
   mainContainer: MAIN_CONTAINER_THEME,