storybook-addon-contentful-preview
Version:
Preview your components with contentful data
1 lines • 4.89 kB
Source Map (JSON)
{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/Panel.tsx","../src/components/PanelContent.tsx","../src/components/useLivePreviewUrl.tsx"],"names":["addons","ADDON_ID","PANEL_ID","ADDON_NAME","Addon_TypesEnum","React","AddonPanel","styled","Button","Code","createCopyToClipboardFunction","IconButton","useLivePreviewUrl","pathParam","id","searchParams","RequestDataButton","PanelContent","livePreviewUrl","copyFunction","Panel","props","viewMode"],"mappings":"AAAA,OAAQ,UAAAA,MAAa,yBCAd,IAAMC,EAAW,+BACXC,EAAW,GAAGD,CAAQ,SAE5B,IAAME,EAAa,qBDD1B,OAAQ,mBAAAC,MAAsB,mBEF9B,OAAOC,MAAW,QAClB,OAAQ,cAAAC,MAAiB,wBCDzB,OAAOD,MAAW,QAClB,OAAQ,UAAAE,MAAa,qBACrB,OAAQ,UAAAC,EAAQ,QAAAC,EAAM,iCAAAC,EAA+B,cAAAC,MAAiB,wBCF/D,IAAMC,EAAoB,IAAM,CAErC,IAAMC,EADgB,IAAI,gBAAgB,OAAO,SAAS,MAAM,EAChC,IAAI,MAAM,EAEtCC,EAAK,GAEND,IACDC,EAAKD,EAAU,MAAM,GAAG,EAAE,CAAC,GAG7B,IAAME,EAAe,IAAI,gBACzB,OAAAA,EAAa,IAAI,WAAY,OAAO,EACpCA,EAAa,IAAI,KAAMD,CAAE,EACzBC,EAAa,IAAI,UAAW,gBAAgB,EAC5CA,EAAa,IAAI,cAAe,UAAU,EAC1CA,EAAa,IAAI,SAAU,UAAU,EAE9B,mBAAmB,GAAG,OAAO,MAAM,gBAAgBA,EAAa,SAAS,CAAC,EAAE,CACrF,EDbO,IAAMC,EAAoBT,EAAOC,CAAM,EAAE,CAC9C,UAAW,MACb,CAAC,EAQYS,EAA4C,IAAM,CAC7D,IAAMC,EAAiBN,EAAkB,EACnCO,EAAeT,EAA8B,EAEnD,OACEL,EAAA,cAAC,OAAI,MAAO,CAAC,QAAS,EAAE,GACtBA,EAAA,cAAC,UAAG,SAAO,EACXA,EAAA,cAAC,SAAE,wGAEH,EACAA,EAAA,cAAC,UAAG,OAAK,EACTA,EAAA,cAAC,SAAE,mIAGH,EACAA,EAAA,cAACI,EAAA,CAAK,gBAAiB,IACpBS,CACH,EACAb,EAAA,cAACM,EAAA,CAAW,QAAS,IAAMQ,EAAaD,CAAc,GAAG,MAAI,CAC/D,CAEJ,ED5BO,SAASE,EAAMC,EAAmB,CACvC,OACEhB,EAAA,cAACC,EAAA,CAAY,GAAGe,GACdhB,EAAA,cAACY,EAAA,IAAY,CACf,CAEJ,CFTAjB,EAAO,SAASC,EAAU,IAAM,CAC9BD,EAAO,IAAIE,EAAU,CACnB,KAAME,EAAgB,MACtB,MAAOD,EACP,MAAO,CAAC,CAAC,SAAAmB,CAAQ,IAAMA,IAAa,QACpC,OAAQF,CACV,CAAC,CACH,CAAC","sourcesContent":["import {addons} from \"@storybook/manager-api\";\nimport {ADDON_ID, ADDON_NAME, PANEL_ID} from \"./constants\";\nimport {Addon_TypesEnum} from \"@storybook/types\";\nimport {Panel} from \"./Panel\";\n\naddons.register(ADDON_ID, () => {\n addons.add(PANEL_ID, {\n type: Addon_TypesEnum.PANEL,\n title: ADDON_NAME,\n match: ({viewMode}) => viewMode === \"story\",\n render: Panel,\n });\n});\n","export const ADDON_ID = \"storybook/contentful-preview\";\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const PARAM_KEY = `contentfulPreview`;\nexport const ADDON_NAME = `Contentful Preview`;\nexport const PARAM_ENTRY = \"contentful_entry\";\n\n// export const ADDON_ROUTE = `contentful-preview`;\n// export const TOOL_ID = `${ADDON_ID}/tool`;\n// export const TAB_ID = `${ADDON_ID}/tab`;\n// export const EVENTS = {\n// RESULT: `${ADDON_ID}/result`,\n// REQUEST: `${ADDON_ID}/request`,\n// CLEAR: `${ADDON_ID}/clear`,\n// };\n","import React from \"react\";\nimport {AddonPanel} from \"@storybook/components\";\nimport {PanelContent} from \"./components/PanelContent\";\n\ninterface PanelProps {\n active: boolean;\n}\n\nexport function Panel(props: PanelProps) {\n return (\n <AddonPanel {...props}>\n <PanelContent/>\n </AddonPanel>\n );\n};\n","import React from \"react\";\nimport {styled} from \"@storybook/theming\";\nimport {Button, Code, createCopyToClipboardFunction, IconButton} from \"@storybook/components\";\nimport {useLivePreviewUrl} from \"./useLivePreviewUrl\";\n\nexport const RequestDataButton = styled(Button)({\n marginTop: \"1rem\",\n});\n\ninterface PanelContentProps {}\n\n/**\n * Checkout https://github.com/storybookjs/storybook/blob/next/code/addons/jest/src/components/Panel.tsx\n * for a real world example\n */\nexport const PanelContent: React.FC<PanelContentProps> = () => {\n const livePreviewUrl = useLivePreviewUrl();\n const copyFunction = createCopyToClipboardFunction();\n\n return (\n <div style={{padding: 20}}>\n <h3>Welcome</h3>\n <p>\n The Contentful Live Preview Addon allows you to use your storybook instance as contentful preview url.\n </p>\n <h3>Setup</h3>\n <p>\n Set this url as your preview url in your contentful space settings for the content type that represents data\n for this component..\n </p>\n <Code contentEditable={false}>\n {livePreviewUrl}\n </Code>\n <IconButton onClick={() => copyFunction(livePreviewUrl)}>Copy</IconButton>\n </div>\n )\n}\n\n","export const useLivePreviewUrl = () => {\n const currentParams = new URLSearchParams(window.location.search);\n const pathParam = currentParams.get('path');\n\n let id = ''\n\n if(pathParam) {\n id = pathParam.split('/')[2]\n }\n\n const searchParams = new URLSearchParams();\n searchParams.set('viewMode', 'story')\n searchParams.set('id', id)\n searchParams.set('entryId', '{entry.sys.id}')\n searchParams.set('environment', '{env_id}')\n searchParams.set('locale', '{locale}')\n\n return decodeURIComponent(`${window.origin}/iframe.html?${searchParams.toString()}`)\n}\n"]}