storybook-addon-contentful-preview/dist/index.mjs

Preview your components with contentful data

import { makeDecorator, useState, useEffect } from '@storybook/preview-api';
import { ContentfulLivePreview } from '@contentful/live-preview';
import { ContentfulLivePreviewProvider, useContentfulLiveUpdates, useContentfulInspectorMode } from '@contentful/live-preview/react';
import a from 'react';
import { createClient } from 'contentful';
import { addons } from '@storybook/manager-api';
import { Addon_TypesEnum } from '@storybook/types';
import { Button, AddonPanel, createCopyToClipboardFunction, Code, IconButton } from '@storybook/components';
import { styled } from '@storybook/theming';

var h="storybook/contentful-preview",L=`${h}/panel`,c="contentfulPreview",N="Contentful Preview",f="contentful_entry";function g(e,t="Value is undefined or null"){if(e==null)throw new Error(t)}function p(e,t){return e.find(r=>r!==void 0||null)??t??void 0}function I(e){return !!(e&&e.sys&&e.sys.id&&e.sys.type&&e.fields)}var C=makeDecorator({name:"withLivePreview",parameterName:c,skipIfNoParametersOrOptions:!0,wrapper:(e,t,{parameters:r})=>{let n=new URLSearchParams(window.location.search),s=t.parameters.globals[c],m=p([n.get("locale"),r.locale,s.locale],"en-US"),o=p([r.livePreview,s.livePreview],!1),i=p([r.debugMode,s==null?void 0:s.debugMode],!1);i&&console.log("\u{1F3A8} Decorated with withLivePreview"),o&&!ContentfulLivePreview.initialized&&ContentfulLivePreview.init({locale:m,debugMode:i,enableLiveUpdates:!0,enableInspectorMode:!0});let l=t.args[f];function u(){let d=useContentfulLiveUpdates(l);return d&&(t.args[f]=d),a.createElement(a.Fragment,null,e(t))}return o?a.createElement(ContentfulLivePreviewProvider,{locale:m},u()):e(t)}});function S(e,t){let[r,n]=useState(null),[s,m]=useState(!0),{space:o,host:i,accessToken:l,environment:u="master",locale:d="en-US"}=t;return useEffect(()=>{(async()=>{g(e,"No entryId provided"),g(o,"No spaceId provided"),g(l,"No accessToken provided"),m(!0);let P=await createClient({environment:u,space:o,accessToken:l,host:i}).getEntry(e,{include:10,locale:d});n(P),m(!1);})();},[e,u,o,l,i]),{entry:r,isLoading:s}}var v=makeDecorator({name:"withContentful",parameterName:c,skipIfNoParametersOrOptions:!0,wrapper:(e,t,{parameters:r})=>{let n=new URLSearchParams(window.location.search),s=t.parameters.globals[c],m=p([r.space,s.space]),o=p([r.accessToken,s.accessToken]),i=p([n.get("locale"),r.locale,s.locale],"en-US"),l=p([n.get("environment"),r.environment,s.environment],"master"),u=p([r.host,s.host],"api.contentful.com"),d=n.get("entryId")||r.entryId;p([r.debugMode,s.debugMode],!1)&&console.log("\u{1F3A8} Decorated with withContentful");let k={space:m,accessToken:o,environment:l,host:u,locale:i},{entry:P,isLoading:F}=S(d,k);return P&&(t.args[f]=P),F?null:e(t)}});function G(e,t){return {...t,...e.fields}}var E=makeDecorator({name:"withEntryArgMutator",parameterName:c,skipIfNoParametersOrOptions:!1,wrapper:(e,t,{parameters:r={}})=>{let n=t.parameters.globals[c];if(p([r.debugMode,n==null?void 0:n.debugMode],!1)&&console.log("\u{1F3A8} Decorated with withEntryArgMutator"),I(t.args[f])){let m=(r==null?void 0:r.entryMutator)||G;t.args=m(t.args[f],t.args);}return e(t)}});var M={Entry:"\u{1F4C4}",Asset:"\u{1F5BC}\uFE0F"},X={Symbol:"\u{1F524}",Text:"\u{1F524}",RichText:"\u{1F4DD}",Number:"\u{1F522}",Integer:"\u{1F522}",Date:"\u{1F4C5}",Boolean:"\u{1F518}",Location:"\u{1F4CD}",Object:"\u{1F535}",Array:"\u{1F535}",Link:"\u{1F517}",Asset:"\u{1F5BC}\uFE0F",Entry:"\u{1F4C4}",Unknown:"\u2753"};function w({contentful_entry:e,depth:t=0,breadcrumbs:r=[],...n}){let s=useContentfulInspectorMode({entryId:e.sys.id});if(e.sys.type==="Asset"){let o=e.sys.id;return a.createElement("div",{key:o,style:{margin:10,paddingLeft:t*20}},a.createElement("div",{...s({fieldId:o,assetId:o})},a.createElement(b,{title:M.Asset+" "+[...r,e.fields.title].join(" > ")}),a.createElement(_,null,JSON.stringify(e.fields.file.url,null,2))))}let m=Object.entries(n).map(([o,i])=>i?Array.isArray(i)?i.map((l,u)=>{if(typeof l=="object"&&l.sys){let d=M.hasOwnProperty(l.sys.type)?M[l.sys.type]:X.Unknown;return a.createElement(U,{depth:t},a.createElement(b,{title:d+" "+[...r,o].join(" > ")}),a.createElement(w,{key:l.sys.id,depth:t+1,contentful_entry:l,breadcrumbs:[...r,o],...l.fields}))}}):i.type==="Entry"?a.createElement(w,{key:o,entryId:i.sys.id,depth:t+1,contentful_entry:i,breadcrumbs:[...r,o],...i.fields}):i.type==="Asset"?a.createElement(w,{key:o,entryId:i.sys.id,contentful_entry:i,depth:t+1,breadcrumbs:[...r,o],...i.fields}):a.createElement(U,{key:o,depth:t},a.createElement("div",{...s({fieldId:o})},a.createElement(b,{title:[...r,o].join(" > ")}),a.createElement(_,null,JSON.stringify(i,null,2)))):null);return a.createElement(a.Fragment,null,m)}function U({depth:e,children:t}){return a.createElement("div",{style:{paddingLeft:e*20}},t)}function _({children:e}){return a.createElement("pre",{style:{padding:10,backgroundColor:"#eee"}},e)}function b({title:e}){return a.createElement("h4",{style:{marginBottom:0,fontFamily:"monospace"}},e.toUpperCase())}var x=()=>{let t=new URLSearchParams(window.location.search).get("path"),r="";t&&(r=t.split("/")[2]);let n=new URLSearchParams;return n.set("viewMode","story"),n.set("id",r),n.set("entryId","{entry.sys.id}"),n.set("environment","{env_id}"),n.set("locale","{locale}"),decodeURIComponent(`${window.origin}/iframe.html?${n.toString()}`)};styled(Button)({marginTop:"1rem"});var O=()=>{let e=x(),t=createCopyToClipboardFunction();return a.createElement("div",{style:{padding:20}},a.createElement("h3",null,"Welcome"),a.createElement("p",null,"The Contentful Live Preview Addon allows you to use your storybook instance as contentful preview url."),a.createElement("h3",null,"Setup"),a.createElement("p",null,"Set this url as your preview url in your contentful space settings for the content type that represents data for this component.."),a.createElement(Code,{contentEditable:!1},e),a.createElement(IconButton,{onClick:()=>t(e)},"Copy"))};function Y(e){return a.createElement(AddonPanel,{...e},a.createElement(O,null))}addons.register(h,()=>{addons.add(L,{type:Addon_TypesEnum.PANEL,title:N,match:({viewMode:e})=>e==="story",render:Y});});

export { w as ContentfulDebugComponent, v as withContentful, E as withEntryArgMutator, C as withLivePreview };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.mjs.map