feat:mutator decorator

src/constants.ts

@@ -1,13 +1,14 @@
 export const ADDON_ID = "storybook/contentful-preview";
-export const TOOL_ID = `${ADDON_ID}/tool`;
 export const PANEL_ID = `${ADDON_ID}/panel`;
-export const TAB_ID = `${ADDON_ID}/tab`;
 export const PARAM_KEY = `contentfulPreview`;
 export const ADDON_NAME = `Contentful Preview`;
-export const ADDON_ROUTE = `contentful-preview`;
+export const PARAM_ENTRY = "contentful_entry";
 
-export const EVENTS = {
-  RESULT: `${ADDON_ID}/result`,
-  REQUEST: `${ADDON_ID}/request`,
-  CLEAR: `${ADDON_ID}/clear`,
-};
+// export const ADDON_ROUTE = `contentful-preview`;
+// export const TOOL_ID = `${ADDON_ID}/tool`;
+// export const TAB_ID = `${ADDON_ID}/tab`;
+// export const EVENTS = {
+//   RESULT: `${ADDON_ID}/result`,
+//   REQUEST: `${ADDON_ID}/request`,
+//   CLEAR: `${ADDON_ID}/clear`,
+// };

src/contentful-decorator.d.ts

@@ -1,8 +1,9 @@
 // chromatic.d.ts
 import {ContentfulParameters} from "~/storybook-addon/withContentful";
+import {PARAM_KEY} from "./constants";
 
 declare module '@storybook/types' {
   interface Parameters {
-    contentful?: Partial<ContentfulParameters>;
+    [PARAM_KEY]?: Partial<ContentfulParameters>;
   }
 }

src/index.ts

@@ -1,2 +1,2 @@
 // make it work with --isolatedModules
-export default {};
+export default {};

src/manager.ts

@@ -3,37 +3,11 @@ import {ADDON_ID, ADDON_NAME, PANEL_ID} from "./constants";
 import {Addon_TypesEnum} from "@storybook/types";
 import {Panel} from "./Panel";
 
-/**
- * Note: if you want to use JSX in this file, rename it to `manager.tsx`
- * and update the entry prop in tsup.config.ts to use "src/manager.tsx",
- */
-
-// Register the addon
 addons.register(ADDON_ID, () => {
-  // Register the tool
-  // addons.add(TOOL_ID, {
-  //   type: types.TOOL,
-  //   title: ADDON_NAME,
-  //   match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
-  //   render: Tool,
-  // });
-  //
-  // // Register the panel
   addons.add(PANEL_ID, {
     type: Addon_TypesEnum.PANEL,
-    title:ADDON_NAME,
-    match: ({ viewMode }) => viewMode === "story",
+    title: ADDON_NAME,
+    match: ({viewMode}) => viewMode === "story",
     render: Panel,
   });
-
-  // Register the tab
-  // addons.add(TAB_ID, {
-  //   type: Addon_TypesEnum.TAB ,
-  //   title: ADDON_NAME,
-  //   //👇 Checks the current route for the story
-  //   route: ({ storyId }) => `/${ADDON_ROUTE}/${storyId}`,
-  //   //👇 Shows the Tab UI element in myaddon view mode
-  //   match: ({ viewMode }) => viewMode === ADDON_ROUTE,
-  //   render: Tab,
-  // });
 });

src/preview.ts

@@ -10,15 +10,19 @@
  */
 import type {ProjectAnnotations, Renderer} from "@storybook/types";
 import {PARAM_KEY} from "./constants";
-import {withContentfulPreview} from "./withContentfulPreview";
+import {withContentful} from "./withContentful";
+import {withArgsMutator} from "./withArgsMutator";
+import {withLivePreview} from "./withLivePreview";
 
 /**
  * Note: if you want to use JSX in this file, rename it to `preview.tsx`
  * and update the entry prop in tsup.config.ts to use "src/preview.tsx",
  */
 
 const preview: ProjectAnnotations<Renderer> = {
-  decorators: [withContentfulPreview],
+
+  // seems they are executed in reverse order
+  decorators: [withArgsMutator, withLivePreview, withContentful],
   globals: {
     [PARAM_KEY]: {
       // Example of setting a default value for a global parameter

src/stories/ContentfulDebugComponent.tsx

@@ -1,49 +1,38 @@
 import React from "react";
 import {useContentfulInspectorMode} from "@contentful/live-preview/react";
-
-type BaseEntry = {
-  sys: {
-    id: string,
-    type: string,
-  },
-  fields: Record<string, any>
-}
+import {BaseEntry} from "../types";
 
 type AnyEntry =
   {
-    entryId: string,
     depth?: number,
     breadcrumbs?: string[],
-    entry: BaseEntry
+    contentful_entry: BaseEntry
   }
   & Record<string, any>;
 
 /*
   * This component is used to debug the content of an entry.
   * The ContentfulPreview decorator assigns the following parameters:
-  * - entryId: The id of the entry (required for inspector mode)
-  * - entry: The entry object
+  * - contentful_entry: The entry object
   * - <fieldId>: value
  */
 export function ContentfulDebugComponent(
   {
-    entryId,
-    entry,
+    contentful_entry,
     depth = 0,
     breadcrumbs = [],
     ...fields
   }: AnyEntry) {
 
+  const inspectorProps = useContentfulInspectorMode({entryId: contentful_entry.sys.id});
 
-  const inspectorProps = useContentfulInspectorMode({entryId});
-
-  if(entry.sys.type === 'Asset') {
-    const assetId = entry.sys.id;
+  if(contentful_entry.sys.type === 'Asset') {
+    const assetId = contentful_entry.sys.id;
     return (
       <div key={assetId} style={{margin: 10, paddingLeft: depth * 20}}>
-      <h4 style={{marginBottom: 0, fontFamily: 'monospace'}}>{[...breadcrumbs, entry.fields.title].join(' > ')}</h4>
+      <h4 style={{marginBottom: 0, fontFamily: 'monospace'}}>{[...breadcrumbs, contentful_entry.fields.title].join(' > ')}</h4>
       <pre style={{padding: 10, backgroundColor: '#eee'}} {...inspectorProps({fieldId: assetId, assetId})}>
-          {JSON.stringify(entry.fields, null, 2)}
+          {JSON.stringify(contentful_entry.fields, null, 2)}
         </pre>
     </div>
     )
@@ -64,8 +53,7 @@ export function ContentfulDebugComponent(
               <ContentfulDebugComponent
                 key={v.sys.id}
                 depth={depth + 1}
-                entry={v}
-                entryId={v.sys.id}
+                contentful_entry={v}
                 breadcrumbs={[...breadcrumbs, key]}
                 {...v.fields}
               />
@@ -79,7 +67,7 @@ export function ContentfulDebugComponent(
       return <ContentfulDebugComponent
         key={key} entryId={value.sys.id}
         depth={depth + 1}
-        entry={value}
+        contentful_entry={value}
         breadcrumbs={[...breadcrumbs, key]}
         {...value.fields}
       />
@@ -89,7 +77,7 @@ export function ContentfulDebugComponent(
       console.log('ASSET')
       return <ContentfulDebugComponent
         key={key} entryId={value.sys.id}
-        entry={value}
+        contentful_entry={value}
         depth={depth + 1}
         breadcrumbs={[...breadcrumbs, key]}
         {...value.fields}

src/stories/DebugComponent.stories.tsx

@@ -1,7 +1,7 @@
 import type {Meta} from '@storybook/react';
 import {StoryObj} from "@storybook/react";
 import {ContentfulDebugComponent} from "./ContentfulDebugComponent";
-import {withEntryFields} from "../withEntryFields";
+import {withArgsMutator} from "../withArgsMutator";
 
 const meta = {
   title: 'ContentfulPreview/Debug',
@@ -10,6 +10,25 @@ const meta = {
 
 type Story = StoryObj<typeof ContentfulDebugComponent>;
 
+/*
+ * render static data (if parameter `contentfulPreview` is not set),
+ */
+export const Static: Story = {
+  decorators: [withArgsMutator],
+  args: {
+    contentful_entry: {
+      sys: {
+        id: '5M3xHa49MTRrkhiaascL3Q',
+        type: 'Entry',
+      },
+      fields: {
+        title: 'Title',
+        description: 'Description',
+      }
+    }
+  }
+}
+
 /*
  * Set live preview to get live updates in contentful's preview mode
  */
@@ -34,24 +53,23 @@ export const NoLivePreview: Story = {
   }
 }
 
-/*
- * render static data (if parameter `contentfulPreview` is not set), the decorator is ignored
- */
-export const Static: Story = {
-  args: {
-    entryId: '5M3xHa49MTRrkhiaascL3Q',
-    entry: {
-      sys: {
-        id: '5M3xHa49MTRrkhiaascL3Q',
-        type: 'Entry',
-      },
-      fields: {
-        title: 'Title',
-        description: 'Description',
-      }
-    }
-  },
-  decorators: [withEntryFields],
-}
+
+//
+// export const StaticLivePreview: Story = {
+//   decorators: [withArgsMutator, withLivePreview],
+//   args: {
+//     entryId: '5M3xHa49MTRrkhiaascL3Q',
+//     contentful_entry: {
+//       sys: {
+//         id: '5M3xHa49MTRrkhiaascL3Q',
+//         type: 'Entry',
+//       },
+//       fields: {
+//         title: 'Title',
+//         description: 'Description',
+//       }
+//     }
+//   }
+// }
 
 export default meta;