UNPKG

3.5 kBJavaScriptView Raw
1import { ADDON_ID, PANEL_ID } from './chunk-OUCNGSBQ.mjs';
2import React from 'react';
3import { addons, useParameter } from '@storybook/manager-api';
4import { styled } from '@storybook/theming';
5import { Link } from '@storybook/router';
6import { SyntaxHighlighter } from '@storybook/components';
7import { createElement } from 'react-syntax-highlighter';
8
9var StyledStoryLink=styled(Link)(({theme})=>({display:"block",textDecoration:"none",borderRadius:theme.appBorderRadius,color:"inherit","&:hover":{background:theme.background.hoverable}})),SelectedStoryHighlight=styled.div(({theme})=>({background:theme.background.hoverable,borderRadius:theme.appBorderRadius})),StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({fontSize:theme.typography.size.s2-1})),areLocationsEqual=(a,b)=>a.startLoc.line===b.startLoc.line&&a.startLoc.col===b.startLoc.col&&a.endLoc.line===b.endLoc.line&&a.endLoc.col===b.endLoc.col,StoryPanel=({api})=>{let story=api.getCurrentStoryData(),selectedStoryRef=React.useRef(null),{source:loaderSource,locationsMap}=useParameter("storySource",{}),{source:{originalSource:docsSource}={}}=useParameter("docs",{}),source=loaderSource||docsSource||"loading source...",currentLocation=locationsMap?locationsMap[Object.keys(locationsMap).find(key=>{let sourceLoaderId=key.split("--");return story.id.endsWith(sourceLoaderId[sourceLoaderId.length-1])})]:void 0;React.useEffect(()=>{selectedStoryRef.current&&selectedStoryRef.current.scrollIntoView();},[selectedStoryRef.current]);let createPart=({rows,stylesheet,useInlineStyles})=>rows.map((node,i)=>createElement({node,stylesheet,useInlineStyles,key:`code-segment${i}`})),createStoryPart=({rows,stylesheet,useInlineStyles,location,id,refId})=>{let first=location.startLoc.line-1,last=location.endLoc.line,storyRows=rows.slice(first,last),storySource=createPart({rows:storyRows,stylesheet,useInlineStyles}),storyKey=`${first}-${last}`;return currentLocation&&areLocationsEqual(location,currentLocation)?React.createElement(SelectedStoryHighlight,{key:storyKey,ref:selectedStoryRef},storySource):React.createElement(StyledStoryLink,{to:refId?`/story/${refId}_${id}`:`/story/${id}`,key:storyKey},storySource)},createParts=({rows,stylesheet,useInlineStyles})=>{let parts=[],lastRow=0;Object.keys(locationsMap).forEach(key=>{let location=locationsMap[key],first=location.startLoc.line-1,last=location.endLoc.line,{title,refId}=story,sourceIdParts=key.split("--"),id=api.storyId(title,sourceIdParts[sourceIdParts.length-1]),start=createPart({rows:rows.slice(lastRow,first),stylesheet,useInlineStyles}),storyPart=createStoryPart({rows,stylesheet,useInlineStyles,location,id,refId});parts.push(start),parts.push(storyPart),lastRow=last;});let lastPart=createPart({rows:rows.slice(lastRow),stylesheet,useInlineStyles});return parts.push(lastPart),parts};return story?React.createElement(StyledSyntaxHighlighter,{language:"jsx",showLineNumbers:!0,renderer:({rows,stylesheet,useInlineStyles})=>{let myrows=rows.map(({properties,...rest})=>({...rest,properties:{className:[]}}));if(!locationsMap||!Object.keys(locationsMap).length)return createPart({rows:myrows,stylesheet,useInlineStyles});let parts=createParts({rows:myrows,stylesheet,useInlineStyles});return React.createElement("span",null,parts)},format:!1,copyable:!1,padded:!0},source):null};addons.register(ADDON_ID,api=>{addons.addPanel(PANEL_ID,{title:"Code",id:"code",render:({active,key})=>active?React.createElement(StoryPanel,{key,api}):null,paramKey:"storysource"});});