From c553178537cadcd55da01fa0e8deac4f3ae6bbcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= <gersaracca@gmail.com>
Date: Fri, 12 Jul 2024 13:49:08 -0300
Subject: [PATCH] feat: add stories

---
 .../new-collection/NewCollectionSkeleton.tsx  |  7 ++-
 src/stories/collection/Collection.stories.tsx | 17 ++++++++
 .../new-collection/NewCollection.stories.tsx  | 43 +++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/stories/new-collection/NewCollection.stories.tsx

diff --git a/src/sections/new-collection/NewCollectionSkeleton.tsx b/src/sections/new-collection/NewCollectionSkeleton.tsx
index 41829f82f..451009986 100644
--- a/src/sections/new-collection/NewCollectionSkeleton.tsx
+++ b/src/sections/new-collection/NewCollectionSkeleton.tsx
@@ -1,5 +1,5 @@
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
-import { Col, Row } from '@iqss/dataverse-design-system'
+import { Col, Row, Stack } from '@iqss/dataverse-design-system'
 import { BreadcrumbsSkeleton } from '../shared/hierarchy/BreadcrumbsSkeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
@@ -71,6 +71,11 @@ export const NewCollectionSkeleton = () => (
 
       <Skeleton height={145} width="100%" style={{ marginBottom: 16 }} />
       <Skeleton height={145} width="100%" style={{ marginBottom: 16 }} />
+
+      <Stack direction="horizontal" className="pt-3">
+        <Skeleton width={120} height={38} />
+        <Skeleton width={120} height={38} />
+      </Stack>
     </section>
   </SkeletonTheme>
 )
diff --git a/src/stories/collection/Collection.stories.tsx b/src/stories/collection/Collection.stories.tsx
index c8685f45a..92d541d54 100644
--- a/src/stories/collection/Collection.stories.tsx
+++ b/src/stories/collection/Collection.stories.tsx
@@ -29,6 +29,7 @@ export const Default: Story = {
       repository={new CollectionMockRepository()}
       datasetRepository={new DatasetMockRepository()}
       id="collection"
+      created={false}
     />
   )
 }
@@ -40,6 +41,7 @@ export const InfiniteScrollingEnabled: Story = {
       datasetRepository={new DatasetMockRepository()}
       id="collection"
       infiniteScrollEnabled={true}
+      created={false}
     />
   )
 }
@@ -50,6 +52,7 @@ export const Loading: Story = {
       repository={new CollectionLoadingMockRepository()}
       datasetRepository={new DatasetLoadingMockRepository()}
       id="collection"
+      created={false}
     />
   )
 }
@@ -60,6 +63,7 @@ export const NoResults: Story = {
       repository={new NoCollectionMockRepository()}
       datasetRepository={new NoDatasetsMockRepository()}
       id="collection"
+      created={false}
     />
   )
 }
@@ -71,6 +75,19 @@ export const LoggedIn: Story = {
       repository={new CollectionMockRepository()}
       datasetRepository={new DatasetMockRepository()}
       id="collection"
+      created={false}
+    />
+  )
+}
+
+export const Created: Story = {
+  decorators: [WithLoggedInUser],
+  render: () => (
+    <Collection
+      repository={new CollectionMockRepository()}
+      datasetRepository={new NoDatasetsMockRepository()}
+      id="collection"
+      created={true}
     />
   )
 }
diff --git a/src/stories/new-collection/NewCollection.stories.tsx b/src/stories/new-collection/NewCollection.stories.tsx
new file mode 100644
index 000000000..83c42f958
--- /dev/null
+++ b/src/stories/new-collection/NewCollection.stories.tsx
@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { NewCollection } from '../../sections/new-collection/NewCollection'
+import { WithI18next } from '../WithI18next'
+import { WithLayout } from '../WithLayout'
+import { WithLoggedInUser } from '../WithLoggedInUser'
+import { CollectionMockRepository } from '../collection/CollectionMockRepository'
+import { CollectionLoadingMockRepository } from '../collection/CollectionLoadingMockRepository'
+import { NoCollectionMockRepository } from '../collection/NoCollectionMockRepository'
+
+const meta: Meta<typeof NewCollection> = {
+  title: 'Pages/New Collection',
+  component: NewCollection,
+  decorators: [WithI18next, WithLayout, WithLoggedInUser],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
+}
+export default meta
+type Story = StoryObj<typeof NewCollection>
+
+export const Default: Story = {
+  render: () => (
+    <NewCollection collectionRepository={new CollectionMockRepository()} ownerCollectionId="root" />
+  )
+}
+export const Loading: Story = {
+  render: () => (
+    <NewCollection
+      collectionRepository={new CollectionLoadingMockRepository()}
+      ownerCollectionId="root"
+    />
+  )
+}
+
+export const OwnerCollectionNotFound: Story = {
+  render: () => (
+    <NewCollection
+      collectionRepository={new NoCollectionMockRepository()}
+      ownerCollectionId="root"
+    />
+  )
+}