feat: add stories

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>
 )

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}
     />
   )
 }

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"
+    />
+  )
+}