From 94448fa278ab352a741ff13f22d6104869571144 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 18 Oct 2023 19:25:02 +0200
Subject: feat(components): add a generic Grid component

* merge Columns, Gallery and CardsList into Grid component
* add more options to control the grid
---
 .../organisms/images/gallery.module.scss           | 24 -------
 .../organisms/images/gallery.stories.tsx           | 84 ----------------------
 src/components/organisms/images/gallery.test.tsx   | 43 -----------
 src/components/organisms/images/gallery.tsx        | 34 ---------
 src/components/organisms/images/index.ts           |  1 -
 5 files changed, 186 deletions(-)
 delete mode 100644 src/components/organisms/images/gallery.module.scss
 delete mode 100644 src/components/organisms/images/gallery.stories.tsx
 delete mode 100644 src/components/organisms/images/gallery.test.tsx
 delete mode 100644 src/components/organisms/images/gallery.tsx
 delete mode 100644 src/components/organisms/images/index.ts

(limited to 'src/components/organisms/images')

diff --git a/src/components/organisms/images/gallery.module.scss b/src/components/organisms/images/gallery.module.scss
deleted file mode 100644
index 31960a4..0000000
--- a/src/components/organisms/images/gallery.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use "../../../styles/abstracts/mixins" as mix;
-@use "../../../styles/abstracts/placeholders";
-
-.wrapper {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--spacing-sm);
-  max-width: 100%;
-  margin: var(--spacing-sm) 0;
-
-  @for $i from 0 to 6 {
-    &--#{$i}-columns {
-      @include mix.media("screen") {
-        @include mix.dimensions("xs") {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-
-        @include mix.dimensions("sm") {
-          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
deleted file mode 100644
index 016b18e..0000000
--- a/src/components/organisms/images/gallery.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import NextImage from 'next/image';
-import { Figure } from '../../atoms';
-import { Gallery } from './gallery';
-
-/**
- * Gallery - Storybook Meta
- */
-export default {
-  title: 'Organisms/Images/Gallery',
-  component: Gallery,
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-      description: 'Two or more images.',
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    columns: {
-      control: {
-        type: 'number',
-        min: 2,
-        max: 4,
-      },
-      description: 'The columns count.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof Gallery>;
-
-const image = {
-  alt: 'Modi provident omnis',
-  height: 480,
-  src: 'https://picsum.photos/640/480',
-  width: 640,
-};
-
-const Template: ComponentStory<typeof Gallery> = (args) => (
-  <Gallery {...args}>
-    <Figure>
-      <NextImage {...image} />
-    </Figure>
-    <Figure>
-      <NextImage {...image} />
-    </Figure>
-    <Figure>
-      <NextImage {...image} />
-    </Figure>
-    <Figure>
-      <NextImage {...image} />
-    </Figure>
-  </Gallery>
-);
-
-/**
- * Gallery Stories - Two columns
- */
-export const TwoColumns = Template.bind({});
-TwoColumns.args = {
-  columns: 2,
-};
-
-/**
- * Gallery Stories - Three columns
- */
-export const ThreeColumns = Template.bind({});
-ThreeColumns.args = {
-  columns: 3,
-};
-
-/**
- * Gallery Stories - Four columns
- */
-export const FourColumns = Template.bind({});
-FourColumns.args = {
-  columns: 4,
-};
diff --git a/src/components/organisms/images/gallery.test.tsx b/src/components/organisms/images/gallery.test.tsx
deleted file mode 100644
index bffc3b2..0000000
--- a/src/components/organisms/images/gallery.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '@testing-library/react';
-import NextImage from 'next/image';
-import { Gallery } from './gallery';
-
-const columns = 3;
-
-const image = {
-  alt: 'Modi provident omnis',
-  height: 480,
-  src: 'http://picsum.photos/640/480',
-  width: 640,
-};
-
-describe('Gallery', () => {
-  it('renders the correct number of items', () => {
-    render(
-      <Gallery columns={columns}>
-        <NextImage {...image} />
-        <NextImage {...image} />
-        <NextImage {...image} />
-        <NextImage {...image} />
-      </Gallery>
-    );
-
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(4);
-  });
-
-  it('renders the right number of columns', () => {
-    render(
-      <Gallery columns={columns}>
-        <NextImage {...image} />
-        <NextImage {...image} />
-        <NextImage {...image} />
-        <NextImage {...image} />
-      </Gallery>
-    );
-    expect(rtlScreen.getByRole('list')).toHaveClass(
-      `wrapper--${columns}-columns`
-    );
-  });
-});
diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx
deleted file mode 100644
index 2f17130..0000000
--- a/src/components/organisms/images/gallery.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Children, type FC, type ReactElement } from 'react';
-import { List, ListItem } from '../../atoms';
-import styles from './gallery.module.scss';
-
-// eslint-disable-next-line @typescript-eslint/no-magic-numbers
-export type GalleryColumn = 2 | 3 | 4;
-
-export type GalleryProps = {
-  /**
-   * The images.
-   */
-  children: ReactElement[];
-  /**
-   * The columns count.
-   */
-  columns: GalleryColumn;
-};
-
-/**
- * Gallery component
- *
- * Render a gallery of images.
- */
-export const Gallery: FC<GalleryProps> = ({ children, columns }) => {
-  const columnsClass = `wrapper--${columns}-columns`;
-
-  return (
-    <List className={`${styles.wrapper} ${styles[columnsClass]}`} hideMarker>
-      {Children.map(children, (child) => (
-        <ListItem className={styles.item}>{child}</ListItem>
-      ))}
-    </List>
-  );
-};
diff --git a/src/components/organisms/images/index.ts b/src/components/organisms/images/index.ts
deleted file mode 100644
index de0da26..0000000
--- a/src/components/organisms/images/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './gallery';
-- 
cgit v1.2.3