Feat/cardList (#123)

* feat(redmine 1275606): add files for component and add changset

* feat(redmine 1275606): remove CardHeader and Card component

* feat(redmine 1275606): add review from Quentin

* feat(redmine 1275606): fix review from Tony

* feat(redmine 1275606): remove map for display children

* feat(redmine 1275606): fix reviews from Tony

* feat(redmine 1275606): fix reviews from Tony

* feat(redmine 1275606): fix reviews from Tony

.changeset/shy-wombats-draw.md

@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': minor
+---
+
+add CardList component

packages/react-front-kit/src/Components/CardList/CardList.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card } from '@mantine/core';
+
+import { CardHeader } from '../CardHeader/CardHeader';
+import { childrenExampleMock } from '../SummaryBox/SummaryBox.mock';
+
+import { CardList as Cmp } from './CardList';
+
+const summaryboxs = [
+  childrenExampleMock,
+  childrenExampleMock,
+  childrenExampleMock,
+  childrenExampleMock,
+  childrenExampleMock,
+];
+
+const texts = ['Hello-world', 'Hello-world', 'Hello-world'];
+
+const meta = {
+  argTypes: {
+    spacing: {
+      control: { type: 'select' },
+      options: ['xl', 'lg', 'md', 'sm', 'xs'],
+    },
+  },
+  component: Cmp,
+  tags: ['autodocs'],
+  title: '3-custom/Components/CardList',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const CardListWithMultiSummaryBox: IStory = {
+  args: {
+    children: summaryboxs,
+    h: '200px',
+    separator: true,
+    spacing: 'xl',
+  },
+};
+
+export const CardListWithOneSummaryBox: IStory = {
+  args: {
+    children: childrenExampleMock,
+    h: '110px',
+    separator: true,
+    spacing: 'xl',
+  },
+};
+
+export const CardListWithTexts: IStory = {
+  args: {
+    children: texts,
+    h: '70px',
+    spacing: 'xl',
+  },
+  render: ({ ...props }) => (
+    <Card>
+      <Card.Section>
+        <CardHeader>
+          <h1 style={{ margin: '24px', marginBottom: 0 }}>Titre</h1>
+        </CardHeader>
+        <Cmp {...props} />
+      </Card.Section>
+    </Card>
+  ),
+};

packages/react-front-kit/src/Components/CardList/CardList.style.tsx

@@ -0,0 +1,46 @@
+import type { MantineNumberSize } from '@mantine/styles';
+
+import { createStyles, getSize } from '@mantine/styles';
+
+export const useStyles = createStyles(
+  (
+    theme,
+    { separator, spacing }: { separator: boolean; spacing: MantineNumberSize },
+  ) => ({
+    item: {
+      '&:after': {
+        background: theme.colors.gray[2],
+        bottom: `calc(-${getSize({
+          size: spacing,
+          sizes: theme.spacing,
+        })} / 2)`,
+        content: '""',
+        display: separator ? 'block' : 'none',
+        height: '1px',
+        left: '0px',
+        position: 'absolute',
+        width: '100%',
+      },
+      '&:last-child': {
+        '&:after': {
+          display: 'none',
+        },
+        marginBottom: '0',
+      },
+      position: 'relative',
+    },
+    rootScrollBar: { margin: '32px 0', padding: '0px 32px' },
+    scrollBar: {
+      background: theme.colors.gray[1],
+      width: '7px !important',
+    },
+    stack: {
+      display: 'flex',
+      flexDirection: 'column',
+      margin: '0',
+    },
+    thumb: {
+      background: theme.colors.gray[7],
+    },
+  }),
+);

packages/react-front-kit/src/Components/CardList/CardList.test.tsx

@@ -0,0 +1,21 @@
+import { renderWithProviders } from '@smile/react-front-kit-shared/test-utils';
+
+import { childrenExampleMock } from '../SummaryBox/SummaryBox.mock';
+
+import { CardList } from './CardList';
+
+describe('CardList', () => {
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(
+      <CardList>
+        {[
+          childrenExampleMock,
+          childrenExampleMock,
+          childrenExampleMock,
+          childrenExampleMock,
+        ]}
+      </CardList>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

packages/react-front-kit/src/Components/CardList/CardList.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import type { MantineNumberSize, ScrollAreaProps } from '@mantine/core';
+import type { ReactElement, ReactNode } from 'react';
+
+import { ScrollArea, Stack } from '@mantine/core';
+
+import { useStyles } from './CardList.style';
+
+export interface ICardListProps extends Omit<ScrollAreaProps, 'children'> {
+  children: ReactElement | ReactNode[];
+  separator?: boolean;
+  spacing?: MantineNumberSize;
+}
+
+export function CardList(props: ICardListProps): ReactElement {
+  const {
+    children,
+    separator = true,
+    spacing = 'xl',
+    ...scrollAreaProps
+  } = props;
+  const { classes } = useStyles({ separator, spacing });
+  return (
+    <ScrollArea
+      {...scrollAreaProps}
+      classNames={{
+        root: classes.rootScrollBar,
+        scrollbar: classes.scrollBar,
+        thumb: classes.thumb,
+      }}
+    >
+      {Array.isArray(children) ? (
+        <Stack className={classes.stack} spacing={spacing}>
+          {children.map((item: ReactNode, index: number) => (
+            <div key={`${index + index}`} className={classes.item}>
+              {item}
+            </div>
+          ))}
+        </Stack>
+      ) : (
+        <div className={classes.item}>{children}</div>
+      )}
+    </ScrollArea>
+  );
+}