chore: 🎨 storybook objkt display

Author: melMass

.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,

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

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'),
+    }),
+  ],
+}