storybook-addon-apollo-client/dist/manager.js

Use Apollo Client in your Storybook stories.

import {addons,types,useAddonState,useChannel,useParameter}from'storybook/internal/manager-api';import e from'react';import {AddonPanel,Form,TabsState,Placeholder,SyntaxHighlighter}from'storybook/internal/components';import {STORY_CHANGED,STORY_RENDERED}from'storybook/internal/core-events';import {convert,themes}from'storybook/internal/theming';var l="storybook/apollo-client",f=`${l}/panel`,g="apolloClient",d={RESULT:`${l}/result`,REQUEST:`${l}/request`};function p({children:o,fallback:t,language:a}){return o?e.createElement(SyntaxHighlighter,{bordered:true,copyable:true,language:a,padded:true},a==="json"?JSON.stringify(o,null,2):o):e.createElement(Placeholder,null,t)}var b=({mock:o,query:t})=>o?e.createElement(TabsState,{initial:"query",key:t,backgroundColor:convert(themes.normal).background.hoverable},e.createElement("div",{color:convert(themes.normal).color.primary,id:"query",title:"Query"},e.createElement(p,{fallback:"Could not parse query",language:"graphql"},t)),e.createElement("div",{color:convert(themes.normal).color.warning,id:"variables",title:"Variables"},e.createElement(p,{fallback:"No variables in request",language:"json"},o.request.variables)),e.createElement("div",{color:convert(themes.normal).color.ancillary,id:"extensions",title:"Extensions"},e.createElement(p,{fallback:"No extensions in request",language:"json"},o.request.extensions)),e.createElement("div",{color:convert(themes.normal).color.medium,id:"context",title:"Context"},e.createElement(p,{fallback:"No context in request",language:"json"},o.request.context)),e.createElement("div",{color:convert(themes.normal).color.positive,id:"result",title:"Result"},e.createElement(p,{fallback:"No result in mock",language:"json"},o.result)),e.createElement("div",{color:convert(themes.normal).color.negative,id:"error",title:"Error"},e.createElement(p,{fallback:"No error in mock",language:"json"},o.error))):e.createElement(Placeholder,null,"No mock selected");var O=o=>{if(o.request.operationName)return o.request.operationName;let t=o.request.query.definitions.find(a=>a.kind==="OperationDefinition");return t&&t.name?t.name.value:"Unnamed"},E=({active:o=false})=>{let[t,a]=e.useState(-1),[c,A]=useAddonState(l,{mocks:[],queries:[]}),u=useChannel({[d.RESULT]:r=>{A(r),a(i=>i===-1?r.mocks.length?0:-1:r.mocks[i]?i:r.mocks.length?0:-1);},[STORY_RENDERED]:()=>{u(d.REQUEST);},[STORY_CHANGED]:()=>{u(d.REQUEST);}});e.useEffect(()=>{u(d.REQUEST);},[]);let N=c.mocks[t],T=c.queries[t];return e.createElement(AddonPanel,{active:o},e.createElement(e.Fragment,null,e.createElement(Form.Field,{label:"Mock"},e.createElement(Form.Select,{size:"flex",value:t,disabled:!c.mocks.length,onChange:r=>{let{value:i}=r.currentTarget;a(Number(i));}},e.createElement("option",{value:""},"Select a mock"),c.mocks.map((r,i)=>e.createElement("option",{key:i,value:i},O(r))))),e.createElement(b,{mock:N,query:T})))};function C(){let{mocks:o=[]}=useParameter(g,{mocks:[]});return o.length?`Apollo Client (${o.length})`:"Apollo Client"}addons.register(l,()=>{addons.add(f,{type:types.PANEL,title:C,match:({viewMode:o})=>o==="story",render:E});});//# sourceMappingURL=manager.js.map
//# sourceMappingURL=manager.js.map