From 5a31c8ac7bb42810fac4da8f981770e44f7c614d Mon Sep 17 00:00:00 2001
From: Mel Massadian <melmassadian@gmail.com>
Date: Wed, 22 Feb 2023 01:45:24 +0100
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=8E=A8=20storybook=20objkt=20dis?=
 =?UTF-8?q?play?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/main.ts                   | 10 +++-
 src/components/media-types/index.tsx | 25 ++++----
 src/stories/ObjktDisplay.stories.tsx | 87 ++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 11 deletions(-)
 create mode 100644 src/stories/ObjktDisplay.stories.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 24ced39b8..152125935 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -11,11 +11,19 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+
   core: {
     disableTelemetry: true,
     enableCrashReports: true,
   },
-
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
   docs: {
     defaultName: 'Documentation',
     autodocs: true,
diff --git a/src/components/media-types/index.tsx b/src/components/media-types/index.tsx
index 13ef84805..b748ca299 100644
--- a/src/components/media-types/index.tsx
+++ b/src/components/media-types/index.tsx
@@ -15,24 +15,29 @@ import { MD } from './md'
 import { useMemo } from 'react'
 import { NFT } from '@types'
 
+interface RenderMediaTypeProps {
+  /**The nft with the core fragments*/
+  nft: NFT
+  /**When minting this is a base64 (or ObjectURL) representation of the image/video */
+  previewUri?: string
+  /**When minting this is a base64 (or ObjectURL) representation of the cover image/video */
+  previewDisplayUri?: string
+  /**false on feeds, true on objkt detail view. */
+  displayView?: boolean
+  /**hacky way to pass the details hover for now... */
+  details?: JSX.Element | JSX.Element[]
+}
+
 /**
- * Method that handles the rendering of any of the supported
- * media types.
+ * Method that handles the rendering of any of the supported media types.
  */
-
 export const RenderMediaType = ({
   nft,
   previewUri,
   previewDisplayUri,
   displayView,
   details,
-}: {
-  nft: NFT
-  previewUri?: string
-  previewDisplayUri?: string
-  displayView?: boolean
-  details?: JSX.Element | JSX.Element[]
-}) => {
+}: RenderMediaTypeProps) => {
   const [forceArtifact, setForceArtifact] = useState(false)
   const parsedArtifactUri = useMemo(
     () =>
diff --git a/src/stories/ObjktDisplay.stories.tsx b/src/stories/ObjktDisplay.stories.tsx
new file mode 100644
index 000000000..859459afe
--- /dev/null
+++ b/src/stories/ObjktDisplay.stories.tsx
@@ -0,0 +1,87 @@
+import { FeedItem } from '@components/feed-item/index'
+import { ItemInfo } from '@components/item-info'
+import { RenderMediaType } from '@components/media-types'
+import { fetchObjktDetails } from '@data/api'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof RenderMediaType> = {
+  title: 'Components/RenderMediaType',
+  component: RenderMediaType,
+
+  tags: ['autodocs'],
+
+  argTypes: {},
+}
+
+const Decorator = (Story, context) => {
+  const nft = context.loaded.data
+
+  return (
+    <>
+      <div>
+        <Story />
+      </div>
+      {/* {nft && <ItemInfo nft={nft} />} */}
+    </>
+  )
+}
+
+export default meta
+type Story = StoryObj<typeof RenderMediaType>
+
+export const Image: Story = {
+  render: (args, { loaded: { data } }) => (
+    <RenderMediaType nft={data} displayView />
+  ),
+  decorators: [Decorator],
+  loaders: [
+    async () => ({
+      data: await fetchObjktDetails('683366'),
+    }),
+  ],
+}
+
+export const Glb: Story = {
+  render: (args, { loaded: { data } }) => (
+    <RenderMediaType nft={data} displayView />
+  ),
+  decorators: [Decorator],
+  loaders: [
+    async () => ({
+      data: await fetchObjktDetails('809877'),
+    }),
+  ],
+}
+export const Video: Story = {
+  render: (args, { loaded: { data } }) => (
+    <RenderMediaType nft={data} displayView />
+  ),
+  decorators: [Decorator],
+  loaders: [
+    async () => ({
+      data: await fetchObjktDetails('812969'),
+    }),
+  ],
+}
+export const Interactive: Story = {
+  render: (args, { loaded: { data } }) => (
+    <RenderMediaType nft={data} displayView />
+  ),
+  decorators: [Decorator],
+  loaders: [
+    async () => ({
+      data: await fetchObjktDetails('808428'),
+    }),
+  ],
+}
+export const Smol: Story = {
+  render: (args, { loaded: { data } }) => (
+    <RenderMediaType nft={data} displayView />
+  ),
+  decorators: [Decorator],
+  loaders: [
+    async () => ({
+      data: await fetchObjktDetails('378074'),
+    }),
+  ],
+}