From c9c1c90b30e243563bb4f731da15b3fe657556d2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 6 Nov 2023 18:08:04 +0100
Subject: refactor(components): replace Summary component with PostPreview

* rename component to PostPreview because Summary is an HTML element
and it could lead to confusion
* replace `title` and `titleLevel` with `heading` and `headingLvl`
because `title` is a native attribute
* rename `intro` prop to `excerpt`
* extract `cover` from `meta` prop
* rewrite meta type
* extract meta logic into a new component
---
 .../post-preview/post-preview.stories.tsx          | 157 +++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 src/components/organisms/post-preview/post-preview.stories.tsx

(limited to 'src/components/organisms/post-preview/post-preview.stories.tsx')

diff --git a/src/components/organisms/post-preview/post-preview.stories.tsx b/src/components/organisms/post-preview/post-preview.stories.tsx
new file mode 100644
index 0000000..c22698f
--- /dev/null
+++ b/src/components/organisms/post-preview/post-preview.stories.tsx
@@ -0,0 +1,157 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import NextImage from 'next/image';
+import { PostPreview } from './post-preview';
+
+/**
+ * PostPreview - Storybook Meta
+ */
+export default {
+  title: 'Organisms/PostPreview',
+  component: PostPreview,
+  argTypes: {
+    cover: {
+      description: 'The cover data.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    excerpt: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page excerpt.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    meta: {
+      description: 'The page metadata.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    heading: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page title',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    headingLvl: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 6,
+      },
+      description: 'The page title level (hn)',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 2 },
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
+    url: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof PostPreview>;
+
+const Template: ComponentStory<typeof PostPreview> = (args) => (
+  <PostPreview {...args} />
+);
+
+/**
+ * PostPreview Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  excerpt:
+    'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.',
+  heading: 'The post title',
+  url: '#post',
+};
+
+/**
+ * PostPreview Stories - WithCover
+ */
+export const WithCover = Template.bind({});
+WithCover.args = {
+  cover: (
+    <NextImage
+      alt=""
+      height={480}
+      src="https://picsum.photos/640/480"
+      width={640}
+    />
+  ),
+  excerpt:
+    'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.',
+  heading: 'The post title',
+  url: '#post',
+};
+
+/**
+ * PostPreview Stories - WithMeta
+ */
+export const WithMeta = Template.bind({});
+WithMeta.args = {
+  excerpt:
+    'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.',
+  heading: 'The post title',
+  meta: {
+    publicationDate: '06/11/2023',
+    thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }],
+    wordsCount: 300,
+  },
+  url: '#post',
+};
+
+/**
+ * PostPreview Stories - WithCoverAndMeta
+ */
+export const WithCoverAndMeta = Template.bind({});
+WithCoverAndMeta.args = {
+  cover: (
+    <NextImage
+      alt=""
+      height={480}
+      src="https://picsum.photos/640/480"
+      width={640}
+    />
+  ),
+  excerpt:
+    'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.',
+  heading: 'The post title',
+  meta: {
+    publicationDate: '06/11/2023',
+    wordsCount: 300,
+    thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }],
+    comments: {
+      count: 3,
+      postHeading: 'The post title',
+      url: '#comments',
+    },
+  },
+  url: '#post',
+};
-- 
cgit v1.2.3