@storybook/addon-docs 9.2.0-alpha.3 → 10.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +5 -3
  2. package/dist/_browser-chunks/Color-LWAWP22K.js +1566 -0
  3. package/dist/_browser-chunks/DocsRenderer-HT7GNKAR.js +9 -0
  4. package/dist/_browser-chunks/chunk-67KILNXL.js +6831 -0
  5. package/dist/_browser-chunks/chunk-74ZUTOZN.js +65 -0
  6. package/dist/_browser-chunks/chunk-MM7DTO55.js +44 -0
  7. package/dist/_browser-chunks/chunk-RX6225WF.js +46 -0
  8. package/dist/_browser-chunks/chunk-TQ5Q4DDG.js +846 -0
  9. package/dist/_browser-chunks/chunk-UZFOWTVP.js +974 -0
  10. package/dist/_node-chunks/chunk-6DADMWJS.js +248 -0
  11. package/dist/_node-chunks/chunk-LNIOBV3K.js +231 -0
  12. package/dist/_node-chunks/chunk-QLR5HOHE.js +48 -0
  13. package/dist/_node-chunks/chunk-YXBYQIGE.js +35424 -0
  14. package/dist/_node-chunks/mdx-plugin-NOHB7LLV.js +1653 -0
  15. package/dist/_node-chunks/rehype-external-links-D74PKVP3.js +168 -0
  16. package/dist/_node-chunks/rehype-slug-KQZG2QNC.js +127 -0
  17. package/dist/angular/index.d.ts +3 -0
  18. package/dist/angular/index.js +11 -0
  19. package/dist/blocks.d.ts +86 -42
  20. package/dist/blocks.js +8123 -201
  21. package/dist/ember/index.d.ts +3 -0
  22. package/dist/ember/index.js +11 -0
  23. package/dist/index.d.ts +42 -5
  24. package/dist/index.js +17 -15
  25. package/dist/manager.js +85 -154
  26. package/dist/mdx-loader.js +38 -71
  27. package/dist/mdx-react-shim.js +2 -0
  28. package/dist/preset.js +310 -72
  29. package/dist/preview.js +8 -13
  30. package/dist/web-components/index.d.ts +2 -0
  31. package/dist/web-components/index.js +0 -0
  32. package/manager.js +1 -1
  33. package/package.json +45 -89
  34. package/preset.js +1 -1
  35. package/preview.js +1 -1
  36. package/angular/README.md +0 -256
  37. package/angular/index.d.ts +0 -1
  38. package/angular/index.js +0 -4
  39. package/common/README.md +0 -98
  40. package/dist/Color-AVL7NMMY.mjs +0 -10
  41. package/dist/DocsContainer-fccc2203.d.ts +0 -51
  42. package/dist/DocsRenderer-3PZUHFFL.mjs +0 -2
  43. package/dist/DocsRenderer-ULRJ3H2C.mjs +0 -8
  44. package/dist/blocks.mjs +0 -213
  45. package/dist/chunk-2UFMRE4V.mjs +0 -5
  46. package/dist/chunk-CEH6MNVV.mjs +0 -3
  47. package/dist/chunk-GWJYCGSQ.mjs +0 -7
  48. package/dist/chunk-QUZPS4B6.mjs +0 -3
  49. package/dist/chunk-SPFYY5GD.mjs +0 -3
  50. package/dist/index.mjs +0 -8
  51. package/dist/preview.mjs +0 -5
  52. package/dist/shims/mdx-react-shim.js +0 -12
  53. package/dist/shims/mdx-react-shim.mjs +0 -1
  54. package/ember/README.md +0 -153
  55. package/ember/index.d.ts +0 -1
  56. package/ember/index.js +0 -3
  57. package/react/README.md +0 -149
  58. package/svelte/HOC.svelte +0 -7
  59. package/vue/README.md +0 -152
  60. package/vue3/README.md +0 -152
  61. package/web-components/README.md +0 -131
  62. package/web-components/index.js +0 -1
  63. /package/dist/{shims/mdx-react-shim.d.ts → mdx-react-shim.d.ts} +0 -0
@@ -1,5 +0,0 @@
1
- import { __export } from './chunk-QUZPS4B6.mjs';
2
-
3
- var tocbot_exports={};__export(tocbot_exports,{default:()=>tocbot_default,destroy:()=>destroy,init:()=>init,refresh:()=>refresh});function build_html_default(options){let forEach=[].forEach,some=[].some,body=typeof window<"u"&&document.body,SPACE_CHAR=" ",tocElement,currentlyHighlighting=!0,eventCount=0;function createEl(d,container){let link=container.appendChild(createLink(d));if(d.children.length){let list=createList(d.isCollapsed);d.children.forEach(child=>{createEl(child,list);}),link.appendChild(list);}}function render(parent,data){let container=createList(!1);if(data.forEach(d=>{createEl(d,container);}),tocElement=parent||tocElement,tocElement!==null)return tocElement.firstChild&&tocElement.removeChild(tocElement.firstChild),data.length===0?tocElement:tocElement.appendChild(container)}function createLink(data){let item=document.createElement("li"),a=document.createElement("a");return options.listItemClass&&item.setAttribute("class",options.listItemClass),options.onClick&&(a.onclick=options.onClick),options.includeTitleTags&&a.setAttribute("title",data.textContent),options.includeHtml&&data.childNodes.length?forEach.call(data.childNodes,node=>{a.appendChild(node.cloneNode(!0));}):a.textContent=data.textContent,a.setAttribute("href",`${options.basePath}#${data.id}`),a.setAttribute("class",`${options.linkClass+SPACE_CHAR}node-name--${data.nodeName}${SPACE_CHAR}${options.extraLinkClasses}`),item.appendChild(a),item}function createList(isCollapsed){let listElement=options.orderedList?"ol":"ul",list=document.createElement(listElement),classes=options.listClass+SPACE_CHAR+options.extraListClasses;return isCollapsed&&(classes=classes+SPACE_CHAR+options.collapsibleClass,classes=classes+SPACE_CHAR+options.isCollapsedClass),list.setAttribute("class",classes),list}function updateFixedSidebarClass(){let scrollTop=getScrollTop(),posFixedEl=document.querySelector(options.positionFixedSelector);options.fixedSidebarOffset==="auto"&&(options.fixedSidebarOffset=tocElement.offsetTop),scrollTop>options.fixedSidebarOffset?posFixedEl.className.indexOf(options.positionFixedClass)===-1&&(posFixedEl.className+=SPACE_CHAR+options.positionFixedClass):posFixedEl.className=posFixedEl.className.replace(SPACE_CHAR+options.positionFixedClass,"");}function getHeadingTopPos(obj){let position=0;return obj!==null&&(position=obj.offsetTop,options.hasInnerContainers&&(position+=getHeadingTopPos(obj.offsetParent))),position}function updateClassname(obj,className){return obj&&obj.className!==className&&(obj.className=className),obj}function updateToc(headingsArray,event){options.positionFixedSelector&&updateFixedSidebarClass();let headings=headingsArray,clickedHref=event?.target?.getAttribute?event?.target?.getAttribute("href"):null,isBottomMode=clickedHref&&clickedHref.charAt(0)==="#"?getIsHeaderBottomMode(clickedHref.replace("#","")):!1,shouldUpdate=currentlyHighlighting||isBottomMode;if(event&&eventCount<5&&eventCount++,shouldUpdate&&tocElement&&headings.length>0){let topHeader=getTopHeader(headings),oldActiveTocLink=tocElement.querySelector(`.${options.activeLinkClass}`),topHeaderId=topHeader.id.replace(/([ #;&,.+*~':"!^$[\]()=>|/\\@])/g,"\\$1"),hashId=window.location.hash.replace("#",""),activeId=topHeaderId,isPageBottomMode=getIsPageBottomMode();clickedHref&&isBottomMode?activeId=clickedHref.replace("#",""):hashId&&hashId!==topHeaderId&&isPageBottomMode&&(getIsHeaderBottomMode(topHeaderId)||eventCount<=2)&&(activeId=hashId);let activeTocLink=tocElement.querySelector(`.${options.linkClass}[href="${options.basePath}#${activeId}"]`);if(oldActiveTocLink===activeTocLink)return;let tocLinks=tocElement.querySelectorAll(`.${options.linkClass}`);forEach.call(tocLinks,tocLink=>{updateClassname(tocLink,tocLink.className.replace(SPACE_CHAR+options.activeLinkClass,""));});let tocLis=tocElement.querySelectorAll(`.${options.listItemClass}`);forEach.call(tocLis,tocLi=>{updateClassname(tocLi,tocLi.className.replace(SPACE_CHAR+options.activeListItemClass,""));}),activeTocLink&&activeTocLink.className.indexOf(options.activeLinkClass)===-1&&(activeTocLink.className+=SPACE_CHAR+options.activeLinkClass);let li=activeTocLink?.parentNode;li&&li.className.indexOf(options.activeListItemClass)===-1&&(li.className+=SPACE_CHAR+options.activeListItemClass);let tocLists=tocElement.querySelectorAll(`.${options.listClass}.${options.collapsibleClass}`);forEach.call(tocLists,list=>{list.className.indexOf(options.isCollapsedClass)===-1&&(list.className+=SPACE_CHAR+options.isCollapsedClass);}),activeTocLink?.nextSibling&&activeTocLink.nextSibling.className.indexOf(options.isCollapsedClass)!==-1&&updateClassname(activeTocLink.nextSibling,activeTocLink.nextSibling.className.replace(SPACE_CHAR+options.isCollapsedClass,"")),removeCollapsedFromParents(activeTocLink?.parentNode.parentNode);}}function removeCollapsedFromParents(element){return element&&element.className.indexOf(options.collapsibleClass)!==-1&&element.className.indexOf(options.isCollapsedClass)!==-1?(updateClassname(element,element.className.replace(SPACE_CHAR+options.isCollapsedClass,"")),removeCollapsedFromParents(element.parentNode.parentNode)):element}function disableTocAnimation(event){let target=event.target||event.srcElement;typeof target.className!="string"||target.className.indexOf(options.linkClass)===-1||(currentlyHighlighting=!1);}function enableTocAnimation(){currentlyHighlighting=!0;}function getCurrentlyHighlighting(){return currentlyHighlighting}function getIsHeaderBottomMode(headerId){let scrollEl=getScrollEl();return (document?.getElementById(headerId)).offsetTop>scrollEl.offsetHeight-scrollEl.clientHeight*1.4-options.bottomModeThreshold}function getIsPageBottomMode(){let scrollEl=getScrollEl(),isScrollable=scrollEl.scrollHeight>scrollEl.clientHeight,isBottomMode=getScrollTop()+scrollEl.clientHeight>scrollEl.offsetHeight-options.bottomModeThreshold;return isScrollable&&isBottomMode}function getScrollEl(){let el;return options.scrollContainer&&document.querySelector(options.scrollContainer)?el=document.querySelector(options.scrollContainer):el=document.documentElement||body,el}function getScrollTop(){return getScrollEl()?.scrollTop||0}function getTopHeader(headings,scrollTop=getScrollTop()){let topHeader;return some.call(headings,(heading,i)=>{if(getHeadingTopPos(heading)>scrollTop+options.headingsOffset+10){let index=i===0?i:i-1;return topHeader=headings[index],!0}if(i===headings.length-1)return topHeader=headings[headings.length-1],!0}),topHeader}function updateUrlHashForHeader(headingsArray){let scrollTop=getScrollTop(),topHeader=getTopHeader(headingsArray,scrollTop),isPageBottomMode=getIsPageBottomMode();if((!topHeader||scrollTop<5)&&!isPageBottomMode)window.location.hash==="#"||window.location.hash===""||window.history.pushState(null,null,"#");else if(topHeader&&!isPageBottomMode){let newHash=`#${topHeader.id}`;window.location.hash!==newHash&&window.history.pushState(null,null,newHash);}}return {enableTocAnimation,disableTocAnimation,render,updateToc,getCurrentlyHighlighting,getTopHeader,getScrollTop,updateUrlHashForHeader}}var default_options_default={tocSelector:".js-toc",tocElement:null,contentSelector:".js-toc-content",contentElement:null,headingSelector:"h1, h2, h3",ignoreSelector:".js-toc-ignore",hasInnerContainers:!1,linkClass:"toc-link",extraLinkClasses:"",activeLinkClass:"is-active-link",listClass:"toc-list",extraListClasses:"",isCollapsedClass:"is-collapsed",collapsibleClass:"is-collapsible",listItemClass:"toc-list-item",activeListItemClass:"is-active-li",collapseDepth:0,scrollSmooth:!0,scrollSmoothDuration:420,scrollSmoothOffset:0,scrollEndCallback:function(e){},headingsOffset:1,enableUrlHashUpdateOnScroll:!1,scrollHandlerType:"auto",scrollHandlerTimeout:50,throttleTimeout:50,positionFixedSelector:null,positionFixedClass:"is-position-fixed",fixedSidebarOffset:"auto",includeHtml:!1,includeTitleTags:!1,onClick:function(e){},orderedList:!0,scrollContainer:null,skipRendering:!1,headingLabelCallback:!1,ignoreHiddenElements:!1,headingObjectCallback:null,basePath:"",disableTocScrollSync:!1,tocScrollingWrapper:null,tocScrollOffset:30,bottomModeThreshold:30};function parseContent(options){let reduce=[].reduce;function getLastItem(array){return array[array.length-1]}function getHeadingLevel(heading){return +heading.nodeName.toUpperCase().replace("H","")}function isHTMLElement(maybeElement){try{return maybeElement instanceof window.HTMLElement||maybeElement instanceof window.parent.HTMLElement}catch{return maybeElement instanceof window.HTMLElement}}function getHeadingObject(heading){if(!isHTMLElement(heading))return heading;if(options.ignoreHiddenElements&&(!heading.offsetHeight||!heading.offsetParent))return null;let headingLabel=heading.getAttribute("data-heading-label")||(options.headingLabelCallback?String(options.headingLabelCallback(heading.innerText)):(heading.innerText||heading.textContent).trim()),obj={id:heading.id,children:[],nodeName:heading.nodeName,headingLevel:getHeadingLevel(heading),textContent:headingLabel};return options.includeHtml&&(obj.childNodes=heading.childNodes),options.headingObjectCallback?options.headingObjectCallback(obj,heading):obj}function addNode(node,nest){let obj=getHeadingObject(node),level=obj.headingLevel,array=nest,lastItem=getLastItem(array),lastItemLevel=lastItem?lastItem.headingLevel:0,counter=level-lastItemLevel;for(;counter>0&&(lastItem=getLastItem(array),!(lastItem&&level===lastItem.headingLevel));)lastItem&&lastItem.children!==void 0&&(array=lastItem.children),counter--;return level>=options.collapseDepth&&(obj.isCollapsed=!0),array.push(obj),array}function selectHeadings(contentElement,headingSelector){let selectors=headingSelector;options.ignoreSelector&&(selectors=headingSelector.split(",").map(function(selector){return `${selector.trim()}:not(${options.ignoreSelector})`}));try{return contentElement.querySelectorAll(selectors)}catch{return console.warn(`Headers not found with selector: ${selectors}`),null}}function nestHeadingsArray(headingsArray){return reduce.call(headingsArray,function(prev,curr){let currentHeading=getHeadingObject(curr);return currentHeading&&addNode(currentHeading,prev.nest),prev},{nest:[]})}return {nestHeadingsArray,selectHeadings}}function initSmoothScrolling(options){var duration=options.duration,offset=options.offset;if(typeof window>"u"||typeof location>"u")return;var pageUrl=location.hash?stripHash(location.href):location.href;delegatedLinkHijacking();function delegatedLinkHijacking(){document.body.addEventListener("click",onClick,!1);function onClick(e){!isInPageLink(e.target)||e.target.className.indexOf("no-smooth-scroll")>-1||e.target.href.charAt(e.target.href.length-2)==="#"&&e.target.href.charAt(e.target.href.length-1)==="!"||e.target.className.indexOf(options.linkClass)===-1||jump(e.target.hash,{duration,offset,callback:function(){setFocus(e.target.hash);}});}}function isInPageLink(n){return n.tagName.toLowerCase()==="a"&&(n.hash.length>0||n.href.charAt(n.href.length-1)==="#")&&(stripHash(n.href)===pageUrl||stripHash(n.href)+"#"===pageUrl)}function stripHash(url){return url.slice(0,url.lastIndexOf("#"))}function setFocus(hash){var element=document.getElementById(hash.substring(1));element&&(/^(?:a|select|input|button|textarea)$/i.test(element.tagName)||(element.tabIndex=-1),element.focus());}}function jump(target,options){var start=window.pageYOffset,opt={duration:options.duration,offset:options.offset||0,callback:options.callback,easing:options.easing||easeInOutQuad},tgt=document.querySelector('[id="'+decodeURI(target).split("#").join("")+'"]')||document.querySelector('[id="'+target.split("#").join("")+'"]'),distance=typeof target=="string"?opt.offset+(target?tgt&&tgt.getBoundingClientRect().top||0:-(document.documentElement.scrollTop||document.body.scrollTop)):target,duration=typeof opt.duration=="function"?opt.duration(distance):opt.duration,timeStart,timeElapsed;requestAnimationFrame(function(time){timeStart=time,loop(time);});function loop(time){timeElapsed=time-timeStart,window.scrollTo(0,opt.easing(timeElapsed,start,distance,duration)),timeElapsed<duration?requestAnimationFrame(loop):end();}function end(){window.scrollTo(0,start+distance),typeof opt.callback=="function"&&opt.callback();}function easeInOutQuad(t,b,c,d){return t/=d/2,t<1?c/2*t*t+b:(t--,-c/2*(t*(t-2)-1)+b)}}function updateTocScroll(options){let toc=options.tocScrollingWrapper||options.tocElement||document.querySelector(options.tocSelector);if(toc&&toc.scrollHeight>toc.clientHeight){let activeItem=toc.querySelector(`.${options.activeListItemClass}`);if(activeItem){let scrollAmount=activeItem.offsetTop-options.tocScrollOffset;toc.scrollTop=scrollAmount>0?scrollAmount:0;}}}var _options={},_buildHtml,_parseContent,_headingsArray,_scrollListener,clickListener;function init(customOptions){let hasInitialized=!1;_options=extend(default_options_default,customOptions||{}),_options.scrollSmooth&&(_options.duration=_options.scrollSmoothDuration,_options.offset=_options.scrollSmoothOffset,initSmoothScrolling(_options)),_buildHtml=build_html_default(_options),_parseContent=parseContent(_options),destroy();let contentElement=getContentElement(_options);if(contentElement===null)return;let tocElement=getTocElement(_options);if(tocElement===null||(_headingsArray=_parseContent.selectHeadings(contentElement,_options.headingSelector),_headingsArray===null))return;let nestedHeadings=_parseContent.nestHeadingsArray(_headingsArray).nest;if(!_options.skipRendering)_buildHtml.render(tocElement,nestedHeadings);else return this;let isClick=!1,scrollHandlerTimeout=_options.scrollHandlerTimeout||_options.throttleTimeout;_scrollListener=((fn,delay)=>getScrollHandler(fn,delay,_options.scrollHandlerType))(e=>{_buildHtml.updateToc(_headingsArray,e),!_options.disableTocScrollSync&&!isClick&&updateTocScroll(_options),_options.enableUrlHashUpdateOnScroll&&hasInitialized&&_buildHtml.getCurrentlyHighlighting()&&_buildHtml.updateUrlHashForHeader(_headingsArray);let isTop=e?.target?.scrollingElement?.scrollTop===0;(e&&(e.eventPhase===0||e.currentTarget===null)||isTop)&&(_buildHtml.updateToc(_headingsArray),_options.scrollEndCallback?.(e));},scrollHandlerTimeout),hasInitialized||(_scrollListener(),hasInitialized=!0),window.onhashchange=window.onscrollend=e=>{_scrollListener(e);},_options.scrollContainer&&document.querySelector(_options.scrollContainer)?(document.querySelector(_options.scrollContainer).addEventListener("scroll",_scrollListener,!1),document.querySelector(_options.scrollContainer).addEventListener("resize",_scrollListener,!1)):(document.addEventListener("scroll",_scrollListener,!1),document.addEventListener("resize",_scrollListener,!1));let timeout=null;clickListener=throttle(event=>{isClick=!0,_options.scrollSmooth&&_buildHtml.disableTocAnimation(event),_buildHtml.updateToc(_headingsArray,event),timeout&&clearTimeout(timeout),timeout=setTimeout(()=>{_buildHtml.enableTocAnimation();},_options.scrollSmoothDuration),setTimeout(()=>{isClick=!1;},_options.scrollSmoothDuration+100);},_options.throttleTimeout),_options.scrollContainer&&document.querySelector(_options.scrollContainer)?document.querySelector(_options.scrollContainer).addEventListener("click",clickListener,!1):document.addEventListener("click",clickListener,!1);}function destroy(){let tocElement=getTocElement(_options);tocElement!==null&&(_options.skipRendering||tocElement&&(tocElement.innerHTML=""),_options.scrollContainer&&document.querySelector(_options.scrollContainer)?(document.querySelector(_options.scrollContainer).removeEventListener("scroll",_scrollListener,!1),document.querySelector(_options.scrollContainer).removeEventListener("resize",_scrollListener,!1),_buildHtml&&document.querySelector(_options.scrollContainer).removeEventListener("click",clickListener,!1)):(document.removeEventListener("scroll",_scrollListener,!1),document.removeEventListener("resize",_scrollListener,!1),_buildHtml&&document.removeEventListener("click",clickListener,!1)));}function refresh(customOptions){destroy(),init(customOptions||_options);}var hasOwnProp=Object.prototype.hasOwnProperty;function extend(...args){let target={};for(let i=0;i<args.length;i++){let source=args[i];for(let key in source)hasOwnProp.call(source,key)&&(target[key]=source[key]);}return target}function throttle(fn,threshold,scope){threshold||(threshold=250);let last,deferTimer;return function(...args){let context=scope||this,now=+new Date;last&&now<last+threshold?(clearTimeout(deferTimer),deferTimer=setTimeout(()=>{last=now,fn.apply(context,args);},threshold)):(last=now,fn.apply(context,args));}}function debounce(func,wait){let timeout;return (...args)=>{clearTimeout(timeout),timeout=setTimeout(()=>func.apply(this,args),wait);}}function getScrollHandler(func,timeout,type="auto"){switch(type){case"debounce":return debounce(func,timeout);case"throttle":return throttle(func,timeout);default:return timeout<334?debounce(func,timeout):throttle(func,timeout)}}function getContentElement(options){try{return options.contentElement||document.querySelector(options.contentSelector)}catch{return console.warn(`Contents element not found: ${options.contentSelector}`),null}}function getTocElement(options){try{return options.tocElement||document.querySelector(options.tocSelector)}catch{return console.warn(`TOC element not found: ${options.tocSelector}`),null}}var tocbot={destroy,init,refresh};var tocbot_default=tocbot;
4
-
5
- export { tocbot_default, tocbot_exports };
@@ -1,3 +0,0 @@
1
- var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};
2
-
3
- export { __export };
@@ -1,7 +0,0 @@
1
- import React, { Component } from 'react';
2
- import { renderElement, unmountElement } from '@storybook/react-dom-shim';
3
- import { CodeOrSourceMdx, AnchorMdx, HeadersMdx, Docs } from '@storybook/addon-docs/blocks';
4
-
5
- var defaultComponents={code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx},ErrorBoundary=class extends Component{constructor(){super(...arguments);this.state={hasError:!1};}static getDerivedStateFromError(){return {hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err);}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:React.createElement(React.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=Docs;return new Promise((resolve,reject)=>{import('@mdx-js/react').then(({MDXProvider})=>renderElement(React.createElement(ErrorBoundary,{showException:reject,key:Math.random()},React.createElement(MDXProvider,{components},React.createElement(TDocs,{context,docsParameter}))),element)).then(()=>resolve());})},this.unmount=element=>{unmountElement(element);};}};
6
-
7
- export { DocsRenderer, defaultComponents };
@@ -1,3 +0,0 @@
1
- var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __require=(x=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(x,{get:(a,b)=>(typeof require<"u"?require:a)[b]}):x)(function(x){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+x+'" is not supported')});var __commonJS=(cb,mod)=>function(){return mod||(0, cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));
2
-
3
- export { __commonJS, __export, __require, __toESM };
@@ -1,3 +0,0 @@
1
- function debounce(func,debounceMs,{signal,edges}={}){let pendingThis,pendingArgs=null,leading=edges!=null&&edges.includes("leading"),trailing=edges==null||edges.includes("trailing"),invoke=()=>{pendingArgs!==null&&(func.apply(pendingThis,pendingArgs),pendingThis=void 0,pendingArgs=null);},onTimerEnd=()=>{trailing&&invoke(),cancel();},timeoutId=null,schedule=()=>{timeoutId!=null&&clearTimeout(timeoutId),timeoutId=setTimeout(()=>{timeoutId=null,onTimerEnd();},debounceMs);},cancelTimer=()=>{timeoutId!==null&&(clearTimeout(timeoutId),timeoutId=null);},cancel=()=>{cancelTimer(),pendingThis=void 0,pendingArgs=null;},flush=()=>{cancelTimer(),invoke();},debounced=function(...args){if(signal?.aborted)return;pendingThis=this,pendingArgs=args;let isFirstCall=timeoutId==null;schedule(),leading&&isFirstCall&&invoke();};return debounced.schedule=schedule,debounced.cancel=cancel,debounced.flush=flush,signal?.addEventListener("abort",cancel,{once:!0}),debounced}function debounce2(func,debounceMs=0,options={}){typeof options!="object"&&(options={});let{signal,leading=!1,trailing=!0,maxWait}=options,edges=Array(2);leading&&(edges[0]="leading"),trailing&&(edges[1]="trailing");let result,pendingAt=null,_debounced=debounce(function(...args){result=func.apply(this,args),pendingAt=null;},debounceMs,{signal,edges}),debounced=function(...args){if(maxWait!=null){if(pendingAt===null)pendingAt=Date.now();else if(Date.now()-pendingAt>=maxWait)return result=func.apply(this,args),pendingAt=Date.now(),_debounced.cancel(),_debounced.schedule(),result}return _debounced.apply(this,args),result},flush=()=>(_debounced.flush(),result);return debounced.cancel=_debounced.cancel,debounced.flush=flush,debounced}function isSymbol(value){return typeof value=="symbol"||value instanceof Symbol}function toNumber(value){return isSymbol(value)?NaN:Number(value)}function toFinite(value){return value?(value=toNumber(value),value===1/0||value===-1/0?(value<0?-1:1)*Number.MAX_VALUE:value===value?value:0):value===0?value:0}function toInteger(value){let finite=toFinite(value),remainder=finite%1;return remainder?finite-remainder:finite}function uniq(arr){return Array.from(new Set(arr))}function isPrimitive(value){return value==null||typeof value!="object"&&typeof value!="function"}function isTypedArray(x){return ArrayBuffer.isView(x)&&!(x instanceof DataView)}function getSymbols(object){return Object.getOwnPropertySymbols(object).filter(symbol=>Object.prototype.propertyIsEnumerable.call(object,symbol))}function getTag(value){return value==null?value===void 0?"[object Undefined]":"[object Null]":Object.prototype.toString.call(value)}var regexpTag="[object RegExp]",stringTag="[object String]",numberTag="[object Number]",booleanTag="[object Boolean]",argumentsTag="[object Arguments]",symbolTag="[object Symbol]",dateTag="[object Date]",mapTag="[object Map]",setTag="[object Set]",arrayTag="[object Array]";var arrayBufferTag="[object ArrayBuffer]",objectTag="[object Object]";var dataViewTag="[object DataView]",uint8ArrayTag="[object Uint8Array]",uint8ClampedArrayTag="[object Uint8ClampedArray]",uint16ArrayTag="[object Uint16Array]",uint32ArrayTag="[object Uint32Array]";var int8ArrayTag="[object Int8Array]",int16ArrayTag="[object Int16Array]",int32ArrayTag="[object Int32Array]";var float32ArrayTag="[object Float32Array]",float64ArrayTag="[object Float64Array]";function cloneDeepWith(obj,cloneValue){return cloneDeepWithImpl(obj,void 0,obj,new Map,cloneValue)}function cloneDeepWithImpl(valueToClone,keyToClone,objectToClone,stack=new Map,cloneValue=void 0){let cloned=cloneValue?.(valueToClone,keyToClone,objectToClone,stack);if(cloned!=null)return cloned;if(isPrimitive(valueToClone))return valueToClone;if(stack.has(valueToClone))return stack.get(valueToClone);if(Array.isArray(valueToClone)){let result=new Array(valueToClone.length);stack.set(valueToClone,result);for(let i=0;i<valueToClone.length;i++)result[i]=cloneDeepWithImpl(valueToClone[i],i,objectToClone,stack,cloneValue);return Object.hasOwn(valueToClone,"index")&&(result.index=valueToClone.index),Object.hasOwn(valueToClone,"input")&&(result.input=valueToClone.input),result}if(valueToClone instanceof Date)return new Date(valueToClone.getTime());if(valueToClone instanceof RegExp){let result=new RegExp(valueToClone.source,valueToClone.flags);return result.lastIndex=valueToClone.lastIndex,result}if(valueToClone instanceof Map){let result=new Map;stack.set(valueToClone,result);for(let[key,value]of valueToClone)result.set(key,cloneDeepWithImpl(value,key,objectToClone,stack,cloneValue));return result}if(valueToClone instanceof Set){let result=new Set;stack.set(valueToClone,result);for(let value of valueToClone)result.add(cloneDeepWithImpl(value,void 0,objectToClone,stack,cloneValue));return result}if(typeof Buffer<"u"&&Buffer.isBuffer(valueToClone))return valueToClone.subarray();if(isTypedArray(valueToClone)){let result=new(Object.getPrototypeOf(valueToClone)).constructor(valueToClone.length);stack.set(valueToClone,result);for(let i=0;i<valueToClone.length;i++)result[i]=cloneDeepWithImpl(valueToClone[i],i,objectToClone,stack,cloneValue);return result}if(valueToClone instanceof ArrayBuffer||typeof SharedArrayBuffer<"u"&&valueToClone instanceof SharedArrayBuffer)return valueToClone.slice(0);if(valueToClone instanceof DataView){let result=new DataView(valueToClone.buffer.slice(0),valueToClone.byteOffset,valueToClone.byteLength);return stack.set(valueToClone,result),copyProperties(result,valueToClone,objectToClone,stack,cloneValue),result}if(typeof File<"u"&&valueToClone instanceof File){let result=new File([valueToClone],valueToClone.name,{type:valueToClone.type});return stack.set(valueToClone,result),copyProperties(result,valueToClone,objectToClone,stack,cloneValue),result}if(valueToClone instanceof Blob){let result=new Blob([valueToClone],{type:valueToClone.type});return stack.set(valueToClone,result),copyProperties(result,valueToClone,objectToClone,stack,cloneValue),result}if(valueToClone instanceof Error){let result=new valueToClone.constructor;return stack.set(valueToClone,result),result.message=valueToClone.message,result.name=valueToClone.name,result.stack=valueToClone.stack,result.cause=valueToClone.cause,copyProperties(result,valueToClone,objectToClone,stack,cloneValue),result}if(typeof valueToClone=="object"&&isCloneableObject(valueToClone)){let result=Object.create(Object.getPrototypeOf(valueToClone));return stack.set(valueToClone,result),copyProperties(result,valueToClone,objectToClone,stack,cloneValue),result}return valueToClone}function copyProperties(target,source,objectToClone=target,stack,cloneValue){let keys=[...Object.keys(source),...getSymbols(source)];for(let i=0;i<keys.length;i++){let key=keys[i],descriptor=Object.getOwnPropertyDescriptor(target,key);(descriptor==null||descriptor.writable)&&(target[key]=cloneDeepWithImpl(source[key],key,objectToClone,stack,cloneValue));}}function isCloneableObject(object){switch(getTag(object)){case argumentsTag:case arrayTag:case arrayBufferTag:case dataViewTag:case booleanTag:case dateTag:case float32ArrayTag:case float64ArrayTag:case int8ArrayTag:case int16ArrayTag:case int32ArrayTag:case mapTag:case numberTag:case objectTag:case regexpTag:case setTag:case stringTag:case symbolTag:case uint8ArrayTag:case uint8ClampedArrayTag:case uint16ArrayTag:case uint32ArrayTag:return !0;default:return !1}}function isLength(value){return Number.isSafeInteger(value)&&value>=0}function isArrayLike(value){return value!=null&&typeof value!="function"&&isLength(value.length)}function cloneDeepWith2(obj,cloneValue){return cloneDeepWith(obj,(value,key,object,stack)=>{let cloned=cloneValue?.(value,key,object,stack);if(cloned!=null)return cloned;if(typeof obj=="object")switch(Object.prototype.toString.call(obj)){case numberTag:case stringTag:case booleanTag:{let result=new obj.constructor(obj?.valueOf());return copyProperties(result,obj),result}case argumentsTag:{let result={};return copyProperties(result,obj),result.length=obj.length,result[Symbol.iterator]=obj[Symbol.iterator],result}default:return}})}function cloneDeep(obj){return cloneDeepWith2(obj)}function range(start,end,step=1){if(end==null&&(end=start,start=0),!Number.isInteger(step)||step===0)throw new Error("The step value must be a non-zero integer.");let length=Math.max(Math.ceil((end-start)/step),0),result=new Array(length);for(let i=0;i<length;i++)result[i]=start+i*step;return result}function uniq2(arr){return isArrayLike(arr)?uniq(Array.from(arr)):[]}function isBuffer(x){return typeof Buffer<"u"&&Buffer.isBuffer(x)}function isPrototype(value){let constructor=value?.constructor,prototype=typeof constructor=="function"?constructor.prototype:Object.prototype;return value===prototype}function isTypedArray2(x){return isTypedArray(x)}function times(n,getValue){if(n=toInteger(n),n<1||!Number.isSafeInteger(n))return [];let result=new Array(n);for(let i=0;i<n;i++)result[i]=typeof getValue=="function"?getValue(i):i;return result}function keysIn(object){if(object==null)return [];switch(typeof object){case"object":case"function":return isArrayLike(object)?arrayLikeKeysIn(object):isPrototype(object)?prototypeKeysIn(object):keysInImpl(object);default:return keysInImpl(Object(object))}}function keysInImpl(object){let result=[];for(let key in object)result.push(key);return result}function prototypeKeysIn(object){return keysInImpl(object).filter(key=>key!=="constructor")}function arrayLikeKeysIn(object){let indices=times(object.length,index=>`${index}`),filteredKeys=new Set(indices);return isBuffer(object)&&(filteredKeys.add("offset"),filteredKeys.add("parent")),isTypedArray2(object)&&(filteredKeys.add("buffer"),filteredKeys.add("byteLength"),filteredKeys.add("byteOffset")),[...indices,...keysInImpl(object).filter(key=>!filteredKeys.has(key))]}function getSymbolsIn(object){let result=[];for(;object;)result.push(...getSymbols(object)),object=Object.getPrototypeOf(object);return result}function pickBy(obj,shouldPick){if(obj==null)return {};let result={};if(shouldPick==null)return obj;let keys=isArrayLike(obj)?range(0,obj.length):[...keysIn(obj),...getSymbolsIn(obj)];for(let i=0;i<keys.length;i++){let key=isSymbol(keys[i])?keys[i]:keys[i].toString(),value=obj[key];shouldPick(value,key,obj)&&(result[key]=value);}return result}var getControlId=value=>`control-${value.replace(/\s+/g,"-")}`,getControlSetterButtonId=value=>`set-${value.replace(/\s+/g,"-")}`;
2
-
3
- export { cloneDeep, debounce2 as debounce, getControlId, getControlSetterButtonId, pickBy, uniq2 as uniq };
package/dist/index.mjs DELETED
@@ -1,8 +0,0 @@
1
- import { tocbot_default, tocbot_exports } from './chunk-2UFMRE4V.mjs';
2
- export { DocsRenderer } from './chunk-GWJYCGSQ.mjs';
3
- import { __export } from './chunk-QUZPS4B6.mjs';
4
- import { definePreviewAddon } from 'storybook/internal/csf';
5
-
6
- var preview_exports={};__export(preview_exports,{parameters:()=>parameters});globalThis.__STORYBOOK_UNSAFE_TOCBOT__||(globalThis.__STORYBOOK_UNSAFE_TOCBOT__=tocbot_default??tocbot_exports);var excludeTags=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((acc,entry)=>{let[tag,option]=entry;return option.excludeFromDocsStories&&(acc[tag]=!0),acc},{}),parameters={docs:{renderer:async()=>{let{DocsRenderer:DocsRenderer2}=await import('./DocsRenderer-3PZUHFFL.mjs');return new DocsRenderer2},stories:{filter:story=>(story.tags||[]).filter(tag=>excludeTags[tag]).length===0&&!story.parameters.docs?.disable}}};var index_default=()=>definePreviewAddon(preview_exports);
7
-
8
- export { index_default as default };
package/dist/preview.mjs DELETED
@@ -1,5 +0,0 @@
1
- import { __export } from './chunk-CEH6MNVV.mjs';
2
-
3
- var tocbot_exports={};__export(tocbot_exports,{default:()=>tocbot_default,destroy:()=>destroy,init:()=>init,refresh:()=>refresh});function build_html_default(options){let forEach=[].forEach,some=[].some,body=typeof window<"u"&&document.body,SPACE_CHAR=" ",tocElement,currentlyHighlighting=!0,eventCount=0;function createEl(d,container){let link=container.appendChild(createLink(d));if(d.children.length){let list=createList(d.isCollapsed);d.children.forEach(child=>{createEl(child,list);}),link.appendChild(list);}}function render(parent,data){let container=createList(!1);if(data.forEach(d=>{createEl(d,container);}),tocElement=parent||tocElement,tocElement!==null)return tocElement.firstChild&&tocElement.removeChild(tocElement.firstChild),data.length===0?tocElement:tocElement.appendChild(container)}function createLink(data){let item=document.createElement("li"),a=document.createElement("a");return options.listItemClass&&item.setAttribute("class",options.listItemClass),options.onClick&&(a.onclick=options.onClick),options.includeTitleTags&&a.setAttribute("title",data.textContent),options.includeHtml&&data.childNodes.length?forEach.call(data.childNodes,node=>{a.appendChild(node.cloneNode(!0));}):a.textContent=data.textContent,a.setAttribute("href",`${options.basePath}#${data.id}`),a.setAttribute("class",`${options.linkClass+SPACE_CHAR}node-name--${data.nodeName}${SPACE_CHAR}${options.extraLinkClasses}`),item.appendChild(a),item}function createList(isCollapsed){let listElement=options.orderedList?"ol":"ul",list=document.createElement(listElement),classes=options.listClass+SPACE_CHAR+options.extraListClasses;return isCollapsed&&(classes=classes+SPACE_CHAR+options.collapsibleClass,classes=classes+SPACE_CHAR+options.isCollapsedClass),list.setAttribute("class",classes),list}function updateFixedSidebarClass(){let scrollTop=getScrollTop(),posFixedEl=document.querySelector(options.positionFixedSelector);options.fixedSidebarOffset==="auto"&&(options.fixedSidebarOffset=tocElement.offsetTop),scrollTop>options.fixedSidebarOffset?posFixedEl.className.indexOf(options.positionFixedClass)===-1&&(posFixedEl.className+=SPACE_CHAR+options.positionFixedClass):posFixedEl.className=posFixedEl.className.replace(SPACE_CHAR+options.positionFixedClass,"");}function getHeadingTopPos(obj){let position=0;return obj!==null&&(position=obj.offsetTop,options.hasInnerContainers&&(position+=getHeadingTopPos(obj.offsetParent))),position}function updateClassname(obj,className){return obj&&obj.className!==className&&(obj.className=className),obj}function updateToc(headingsArray,event){options.positionFixedSelector&&updateFixedSidebarClass();let headings=headingsArray,clickedHref=event?.target?.getAttribute?event?.target?.getAttribute("href"):null,isBottomMode=clickedHref&&clickedHref.charAt(0)==="#"?getIsHeaderBottomMode(clickedHref.replace("#","")):!1,shouldUpdate=currentlyHighlighting||isBottomMode;if(event&&eventCount<5&&eventCount++,shouldUpdate&&tocElement&&headings.length>0){let topHeader=getTopHeader(headings),oldActiveTocLink=tocElement.querySelector(`.${options.activeLinkClass}`),topHeaderId=topHeader.id.replace(/([ #;&,.+*~':"!^$[\]()=>|/\\@])/g,"\\$1"),hashId=window.location.hash.replace("#",""),activeId=topHeaderId,isPageBottomMode=getIsPageBottomMode();clickedHref&&isBottomMode?activeId=clickedHref.replace("#",""):hashId&&hashId!==topHeaderId&&isPageBottomMode&&(getIsHeaderBottomMode(topHeaderId)||eventCount<=2)&&(activeId=hashId);let activeTocLink=tocElement.querySelector(`.${options.linkClass}[href="${options.basePath}#${activeId}"]`);if(oldActiveTocLink===activeTocLink)return;let tocLinks=tocElement.querySelectorAll(`.${options.linkClass}`);forEach.call(tocLinks,tocLink=>{updateClassname(tocLink,tocLink.className.replace(SPACE_CHAR+options.activeLinkClass,""));});let tocLis=tocElement.querySelectorAll(`.${options.listItemClass}`);forEach.call(tocLis,tocLi=>{updateClassname(tocLi,tocLi.className.replace(SPACE_CHAR+options.activeListItemClass,""));}),activeTocLink&&activeTocLink.className.indexOf(options.activeLinkClass)===-1&&(activeTocLink.className+=SPACE_CHAR+options.activeLinkClass);let li=activeTocLink?.parentNode;li&&li.className.indexOf(options.activeListItemClass)===-1&&(li.className+=SPACE_CHAR+options.activeListItemClass);let tocLists=tocElement.querySelectorAll(`.${options.listClass}.${options.collapsibleClass}`);forEach.call(tocLists,list=>{list.className.indexOf(options.isCollapsedClass)===-1&&(list.className+=SPACE_CHAR+options.isCollapsedClass);}),activeTocLink?.nextSibling&&activeTocLink.nextSibling.className.indexOf(options.isCollapsedClass)!==-1&&updateClassname(activeTocLink.nextSibling,activeTocLink.nextSibling.className.replace(SPACE_CHAR+options.isCollapsedClass,"")),removeCollapsedFromParents(activeTocLink?.parentNode.parentNode);}}function removeCollapsedFromParents(element){return element&&element.className.indexOf(options.collapsibleClass)!==-1&&element.className.indexOf(options.isCollapsedClass)!==-1?(updateClassname(element,element.className.replace(SPACE_CHAR+options.isCollapsedClass,"")),removeCollapsedFromParents(element.parentNode.parentNode)):element}function disableTocAnimation(event){let target=event.target||event.srcElement;typeof target.className!="string"||target.className.indexOf(options.linkClass)===-1||(currentlyHighlighting=!1);}function enableTocAnimation(){currentlyHighlighting=!0;}function getCurrentlyHighlighting(){return currentlyHighlighting}function getIsHeaderBottomMode(headerId){let scrollEl=getScrollEl();return (document?.getElementById(headerId)).offsetTop>scrollEl.offsetHeight-scrollEl.clientHeight*1.4-options.bottomModeThreshold}function getIsPageBottomMode(){let scrollEl=getScrollEl(),isScrollable=scrollEl.scrollHeight>scrollEl.clientHeight,isBottomMode=getScrollTop()+scrollEl.clientHeight>scrollEl.offsetHeight-options.bottomModeThreshold;return isScrollable&&isBottomMode}function getScrollEl(){let el;return options.scrollContainer&&document.querySelector(options.scrollContainer)?el=document.querySelector(options.scrollContainer):el=document.documentElement||body,el}function getScrollTop(){return getScrollEl()?.scrollTop||0}function getTopHeader(headings,scrollTop=getScrollTop()){let topHeader;return some.call(headings,(heading,i)=>{if(getHeadingTopPos(heading)>scrollTop+options.headingsOffset+10){let index=i===0?i:i-1;return topHeader=headings[index],!0}if(i===headings.length-1)return topHeader=headings[headings.length-1],!0}),topHeader}function updateUrlHashForHeader(headingsArray){let scrollTop=getScrollTop(),topHeader=getTopHeader(headingsArray,scrollTop),isPageBottomMode=getIsPageBottomMode();if((!topHeader||scrollTop<5)&&!isPageBottomMode)window.location.hash==="#"||window.location.hash===""||window.history.pushState(null,null,"#");else if(topHeader&&!isPageBottomMode){let newHash=`#${topHeader.id}`;window.location.hash!==newHash&&window.history.pushState(null,null,newHash);}}return {enableTocAnimation,disableTocAnimation,render,updateToc,getCurrentlyHighlighting,getTopHeader,getScrollTop,updateUrlHashForHeader}}var default_options_default={tocSelector:".js-toc",tocElement:null,contentSelector:".js-toc-content",contentElement:null,headingSelector:"h1, h2, h3",ignoreSelector:".js-toc-ignore",hasInnerContainers:!1,linkClass:"toc-link",extraLinkClasses:"",activeLinkClass:"is-active-link",listClass:"toc-list",extraListClasses:"",isCollapsedClass:"is-collapsed",collapsibleClass:"is-collapsible",listItemClass:"toc-list-item",activeListItemClass:"is-active-li",collapseDepth:0,scrollSmooth:!0,scrollSmoothDuration:420,scrollSmoothOffset:0,scrollEndCallback:function(e){},headingsOffset:1,enableUrlHashUpdateOnScroll:!1,scrollHandlerType:"auto",scrollHandlerTimeout:50,throttleTimeout:50,positionFixedSelector:null,positionFixedClass:"is-position-fixed",fixedSidebarOffset:"auto",includeHtml:!1,includeTitleTags:!1,onClick:function(e){},orderedList:!0,scrollContainer:null,skipRendering:!1,headingLabelCallback:!1,ignoreHiddenElements:!1,headingObjectCallback:null,basePath:"",disableTocScrollSync:!1,tocScrollingWrapper:null,tocScrollOffset:30,bottomModeThreshold:30};function parseContent(options){let reduce=[].reduce;function getLastItem(array){return array[array.length-1]}function getHeadingLevel(heading){return +heading.nodeName.toUpperCase().replace("H","")}function isHTMLElement(maybeElement){try{return maybeElement instanceof window.HTMLElement||maybeElement instanceof window.parent.HTMLElement}catch{return maybeElement instanceof window.HTMLElement}}function getHeadingObject(heading){if(!isHTMLElement(heading))return heading;if(options.ignoreHiddenElements&&(!heading.offsetHeight||!heading.offsetParent))return null;let headingLabel=heading.getAttribute("data-heading-label")||(options.headingLabelCallback?String(options.headingLabelCallback(heading.innerText)):(heading.innerText||heading.textContent).trim()),obj={id:heading.id,children:[],nodeName:heading.nodeName,headingLevel:getHeadingLevel(heading),textContent:headingLabel};return options.includeHtml&&(obj.childNodes=heading.childNodes),options.headingObjectCallback?options.headingObjectCallback(obj,heading):obj}function addNode(node,nest){let obj=getHeadingObject(node),level=obj.headingLevel,array=nest,lastItem=getLastItem(array),lastItemLevel=lastItem?lastItem.headingLevel:0,counter=level-lastItemLevel;for(;counter>0&&(lastItem=getLastItem(array),!(lastItem&&level===lastItem.headingLevel));)lastItem&&lastItem.children!==void 0&&(array=lastItem.children),counter--;return level>=options.collapseDepth&&(obj.isCollapsed=!0),array.push(obj),array}function selectHeadings(contentElement,headingSelector){let selectors=headingSelector;options.ignoreSelector&&(selectors=headingSelector.split(",").map(function(selector){return `${selector.trim()}:not(${options.ignoreSelector})`}));try{return contentElement.querySelectorAll(selectors)}catch{return console.warn(`Headers not found with selector: ${selectors}`),null}}function nestHeadingsArray(headingsArray){return reduce.call(headingsArray,function(prev,curr){let currentHeading=getHeadingObject(curr);return currentHeading&&addNode(currentHeading,prev.nest),prev},{nest:[]})}return {nestHeadingsArray,selectHeadings}}function initSmoothScrolling(options){var duration=options.duration,offset=options.offset;if(typeof window>"u"||typeof location>"u")return;var pageUrl=location.hash?stripHash(location.href):location.href;delegatedLinkHijacking();function delegatedLinkHijacking(){document.body.addEventListener("click",onClick,!1);function onClick(e){!isInPageLink(e.target)||e.target.className.indexOf("no-smooth-scroll")>-1||e.target.href.charAt(e.target.href.length-2)==="#"&&e.target.href.charAt(e.target.href.length-1)==="!"||e.target.className.indexOf(options.linkClass)===-1||jump(e.target.hash,{duration,offset,callback:function(){setFocus(e.target.hash);}});}}function isInPageLink(n){return n.tagName.toLowerCase()==="a"&&(n.hash.length>0||n.href.charAt(n.href.length-1)==="#")&&(stripHash(n.href)===pageUrl||stripHash(n.href)+"#"===pageUrl)}function stripHash(url){return url.slice(0,url.lastIndexOf("#"))}function setFocus(hash){var element=document.getElementById(hash.substring(1));element&&(/^(?:a|select|input|button|textarea)$/i.test(element.tagName)||(element.tabIndex=-1),element.focus());}}function jump(target,options){var start=window.pageYOffset,opt={duration:options.duration,offset:options.offset||0,callback:options.callback,easing:options.easing||easeInOutQuad},tgt=document.querySelector('[id="'+decodeURI(target).split("#").join("")+'"]')||document.querySelector('[id="'+target.split("#").join("")+'"]'),distance=typeof target=="string"?opt.offset+(target?tgt&&tgt.getBoundingClientRect().top||0:-(document.documentElement.scrollTop||document.body.scrollTop)):target,duration=typeof opt.duration=="function"?opt.duration(distance):opt.duration,timeStart,timeElapsed;requestAnimationFrame(function(time){timeStart=time,loop(time);});function loop(time){timeElapsed=time-timeStart,window.scrollTo(0,opt.easing(timeElapsed,start,distance,duration)),timeElapsed<duration?requestAnimationFrame(loop):end();}function end(){window.scrollTo(0,start+distance),typeof opt.callback=="function"&&opt.callback();}function easeInOutQuad(t,b,c,d){return t/=d/2,t<1?c/2*t*t+b:(t--,-c/2*(t*(t-2)-1)+b)}}function updateTocScroll(options){let toc=options.tocScrollingWrapper||options.tocElement||document.querySelector(options.tocSelector);if(toc&&toc.scrollHeight>toc.clientHeight){let activeItem=toc.querySelector(`.${options.activeListItemClass}`);if(activeItem){let scrollAmount=activeItem.offsetTop-options.tocScrollOffset;toc.scrollTop=scrollAmount>0?scrollAmount:0;}}}var _options={},_buildHtml,_parseContent,_headingsArray,_scrollListener,clickListener;function init(customOptions){let hasInitialized=!1;_options=extend(default_options_default,customOptions||{}),_options.scrollSmooth&&(_options.duration=_options.scrollSmoothDuration,_options.offset=_options.scrollSmoothOffset,initSmoothScrolling(_options)),_buildHtml=build_html_default(_options),_parseContent=parseContent(_options),destroy();let contentElement=getContentElement(_options);if(contentElement===null)return;let tocElement=getTocElement(_options);if(tocElement===null||(_headingsArray=_parseContent.selectHeadings(contentElement,_options.headingSelector),_headingsArray===null))return;let nestedHeadings=_parseContent.nestHeadingsArray(_headingsArray).nest;if(!_options.skipRendering)_buildHtml.render(tocElement,nestedHeadings);else return this;let isClick=!1,scrollHandlerTimeout=_options.scrollHandlerTimeout||_options.throttleTimeout;_scrollListener=((fn,delay)=>getScrollHandler(fn,delay,_options.scrollHandlerType))(e=>{_buildHtml.updateToc(_headingsArray,e),!_options.disableTocScrollSync&&!isClick&&updateTocScroll(_options),_options.enableUrlHashUpdateOnScroll&&hasInitialized&&_buildHtml.getCurrentlyHighlighting()&&_buildHtml.updateUrlHashForHeader(_headingsArray);let isTop=e?.target?.scrollingElement?.scrollTop===0;(e&&(e.eventPhase===0||e.currentTarget===null)||isTop)&&(_buildHtml.updateToc(_headingsArray),_options.scrollEndCallback?.(e));},scrollHandlerTimeout),hasInitialized||(_scrollListener(),hasInitialized=!0),window.onhashchange=window.onscrollend=e=>{_scrollListener(e);},_options.scrollContainer&&document.querySelector(_options.scrollContainer)?(document.querySelector(_options.scrollContainer).addEventListener("scroll",_scrollListener,!1),document.querySelector(_options.scrollContainer).addEventListener("resize",_scrollListener,!1)):(document.addEventListener("scroll",_scrollListener,!1),document.addEventListener("resize",_scrollListener,!1));let timeout=null;clickListener=throttle(event=>{isClick=!0,_options.scrollSmooth&&_buildHtml.disableTocAnimation(event),_buildHtml.updateToc(_headingsArray,event),timeout&&clearTimeout(timeout),timeout=setTimeout(()=>{_buildHtml.enableTocAnimation();},_options.scrollSmoothDuration),setTimeout(()=>{isClick=!1;},_options.scrollSmoothDuration+100);},_options.throttleTimeout),_options.scrollContainer&&document.querySelector(_options.scrollContainer)?document.querySelector(_options.scrollContainer).addEventListener("click",clickListener,!1):document.addEventListener("click",clickListener,!1);}function destroy(){let tocElement=getTocElement(_options);tocElement!==null&&(_options.skipRendering||tocElement&&(tocElement.innerHTML=""),_options.scrollContainer&&document.querySelector(_options.scrollContainer)?(document.querySelector(_options.scrollContainer).removeEventListener("scroll",_scrollListener,!1),document.querySelector(_options.scrollContainer).removeEventListener("resize",_scrollListener,!1),_buildHtml&&document.querySelector(_options.scrollContainer).removeEventListener("click",clickListener,!1)):(document.removeEventListener("scroll",_scrollListener,!1),document.removeEventListener("resize",_scrollListener,!1),_buildHtml&&document.removeEventListener("click",clickListener,!1)));}function refresh(customOptions){destroy(),init(customOptions||_options);}var hasOwnProp=Object.prototype.hasOwnProperty;function extend(...args){let target={};for(let i=0;i<args.length;i++){let source=args[i];for(let key in source)hasOwnProp.call(source,key)&&(target[key]=source[key]);}return target}function throttle(fn,threshold,scope){threshold||(threshold=250);let last,deferTimer;return function(...args){let context=scope||this,now=+new Date;last&&now<last+threshold?(clearTimeout(deferTimer),deferTimer=setTimeout(()=>{last=now,fn.apply(context,args);},threshold)):(last=now,fn.apply(context,args));}}function debounce(func,wait){let timeout;return (...args)=>{clearTimeout(timeout),timeout=setTimeout(()=>func.apply(this,args),wait);}}function getScrollHandler(func,timeout,type="auto"){switch(type){case"debounce":return debounce(func,timeout);case"throttle":return throttle(func,timeout);default:return timeout<334?debounce(func,timeout):throttle(func,timeout)}}function getContentElement(options){try{return options.contentElement||document.querySelector(options.contentSelector)}catch{return console.warn(`Contents element not found: ${options.contentSelector}`),null}}function getTocElement(options){try{return options.tocElement||document.querySelector(options.tocSelector)}catch{return console.warn(`TOC element not found: ${options.tocSelector}`),null}}var tocbot={destroy,init,refresh};var tocbot_default=tocbot;globalThis.__STORYBOOK_UNSAFE_TOCBOT__||(globalThis.__STORYBOOK_UNSAFE_TOCBOT__=tocbot_default??tocbot_exports);var excludeTags=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((acc,entry)=>{let[tag,option]=entry;return option.excludeFromDocsStories&&(acc[tag]=!0),acc},{}),parameters={docs:{renderer:async()=>{let{DocsRenderer}=await import('./DocsRenderer-ULRJ3H2C.mjs');return new DocsRenderer},stories:{filter:story=>(story.tags||[]).filter(tag=>excludeTags[tag]).length===0&&!story.parameters.docs?.disable}}};
4
-
5
- export { parameters };
@@ -1,12 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('@mdx-js/react');
4
-
5
-
6
-
7
- Object.keys(react).forEach(function (k) {
8
- if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
9
- enumerable: true,
10
- get: function () { return react[k]; }
11
- });
12
- });
@@ -1 +0,0 @@
1
- export * from '@mdx-js/react';
package/ember/README.md DELETED
@@ -1,153 +0,0 @@
1
- <h1>Storybook Docs for Ember</h1>
2
-
3
- > migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
4
-
5
- Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Ember supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
6
-
7
- To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Ember specifics, read on!
8
-
9
- - [Installation](#installation)
10
- - [DocsPage](#docspage)
11
- - [Props tables](#props-tables)
12
- - [MDX](#mdx)
13
- - [IFrame height](#iframe-height)
14
- - [More resources](#more-resources)
15
-
16
- ## Installation
17
-
18
- First add the package. Make sure that the versions for your `@storybook/*` packages match:
19
-
20
- ```sh
21
- yarn add -D @storybook/addon-docs
22
- ```
23
-
24
- Then add the following to your `.storybook/main.js` addons:
25
-
26
- ```js
27
- export default {
28
- addons: ['@storybook/addon-docs'],
29
- };
30
- ```
31
-
32
- ## DocsPage
33
-
34
- When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
35
-
36
- ## Props tables
37
-
38
- Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
39
-
40
- ```js
41
- let app = new EmberApp(defaults, {
42
- 'ember-cli-storybook': {
43
- enableAddonDocsIntegration: true,
44
- },
45
- });
46
- ```
47
-
48
- Now, running the ember-cli server will generate a JSON documentation file at `/storybook-docgen/index.json`. Since generation of this file is tied into the ember-cli build, it will get regenerated everytime component files are saved. For details on documenting your components, check out the examples in the addon that powers the generation [ember-cli-addon-docs-yuidoc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components).
49
-
50
- Next, add the following to your `.storybook/preview.js` to load the generated json file:
51
-
52
- ```js
53
- import { setJSONDoc } from '@storybook/addon-docs/ember';
54
- import docJson from '../dist/storybook-docgen/index.json';
55
-
56
- setJSONDoc(docJson);
57
- ```
58
-
59
- Finally, be sure to fill in the `component` field in your story metadata. This should be a string that matches the name of the `@class` used in your source comments:
60
-
61
- ```ts
62
- export default {
63
- title: 'App Component',
64
- component: 'AppComponent',
65
- };
66
- ```
67
-
68
- If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
69
-
70
- ```ts
71
- import { storiesOf } from '@storybook/angular';
72
-
73
- storiesOf('App Component', module)
74
- .addParameters({ component: 'AppComponent' })
75
- .add( ... );
76
- ```
77
-
78
- ## MDX
79
-
80
- [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
81
-
82
- Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
83
-
84
- ```sh
85
- yarn add -D react
86
- ```
87
-
88
- Then update your `.storybook/main.js` to make sure you load MDX files:
89
-
90
- ```js
91
- export default {
92
- stories: ['../src/stories/**/*.stories.@(js|mdx)'],
93
- };
94
- ```
95
-
96
- Finally, you can create MDX files like this:
97
-
98
- ```md
99
- import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
100
- import { hbs } from 'ember-cli-htmlbars';
101
-
102
- <Meta title='App Component' component='AppComponent' />
103
-
104
- # App Component
105
-
106
- Some **markdown** description, or whatever you want.
107
-
108
- <Story name='basic' height='400px'>{{
109
- template: hbs`<AppComponent @title={{title}} />`,
110
- context: { title: "Title" },
111
- }}</Story>
112
-
113
- ## ArgsTable
114
-
115
- <ArgsTable of='AppComponent' />
116
- ```
117
-
118
- Yes, it's redundant to declare `component` twice. [Coming soon](https://github.com/storybookjs/storybook/issues/8673).
119
-
120
- Also, to use the `Props` doc block, you need to set up documentation generation, [as described above](#docspage).
121
-
122
- ## IFrame height
123
-
124
- Storybook Docs renders all Ember stories inside `iframe`s, with a default height of `60px`. You can update this default globally, or modify the `iframe` height locally per story in `DocsPage` and `MDX`.
125
-
126
- To update the global default, modify `.storybook/preview.js`:
127
-
128
- ```ts
129
- export const parameters = { docs: { story: { iframeHeight: '400px' } } };
130
- ```
131
-
132
- For `DocsPage`, you need to update the parameter locally in a story:
133
-
134
- ```ts
135
- export const basic = () => ...
136
- basic.parameters = {
137
- docs: { story: { iframeHeight: '400px' } }
138
- }
139
- ```
140
-
141
- And for `MDX` you can modify it as an attribute on the `Story` element:
142
-
143
- ```md
144
- <Story name='basic' height='400px'>{...}</Story>
145
- ```
146
-
147
- ## More resources
148
-
149
- Want to learn more? Here are some more articles on Storybook Docs:
150
-
151
- - References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
152
- - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
153
- - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
package/ember/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const setJSONDoc: (jsonDoc: any) => void;
package/ember/index.js DELETED
@@ -1,3 +0,0 @@
1
- export const setJSONDoc = (jsondoc) => {
2
- globalThis.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
3
- };
package/react/README.md DELETED
@@ -1,149 +0,0 @@
1
- <center>
2
- <img src="../docs/media/docspage-hero.png" width="100%" />
3
- </center>
4
-
5
- <h1>Storybook Docs for React</h1>
6
-
7
- > migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
8
-
9
- Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
10
-
11
- To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the React specifics, read on!
12
-
13
- - [Installation](#installation)
14
- - [DocsPage](#docspage)
15
- - [Props tables](#props-tables)
16
- - [MDX](#mdx)
17
- - [Inline stories](#inline-stories)
18
- - [TypeScript props with `react-docgen-typescript`](#typescript-props-with-react-docgen-typescript)
19
- - [More resources](#more-resources)
20
-
21
- ## Installation
22
-
23
- First add the package. Make sure that the versions for your `@storybook/*` packages match:
24
-
25
- ```sh
26
- yarn add -D @storybook/addon-docs
27
- ```
28
-
29
- Then add the following to your `.storybook/main.js` list of `addons`:
30
-
31
- ```js
32
- export default {
33
- // other settings
34
- addons: ['@storybook/addon-docs'];
35
- }
36
- ```
37
-
38
- ## DocsPage
39
-
40
- When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
41
-
42
- ## Props tables
43
-
44
- Storybook Docs automatically generates [Props tables](../docs/props-tables.md) for your components based on either `PropTypes` or `TypeScript` types. To show the props table for your component, be sure to fill in the `component` field in your story metadata:
45
-
46
- ```ts
47
- import { Button } from './Button';
48
-
49
- export default {
50
- title: 'Button',
51
- component: Button,
52
- };
53
- ```
54
-
55
- If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
56
-
57
- ```ts
58
- import { storiesOf } from '@storybook/react';
59
- import { Button } from './Button';
60
-
61
- storiesOf('InfoButton', module)
62
- .addParameters({ component: Button })
63
- .add( ... );
64
- ```
65
-
66
- ## MDX
67
-
68
- [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
69
-
70
- Then update your `.storybook/main.js` to make sure you load MDX files:
71
-
72
- ```js
73
- export default {
74
- stories: ['../src/stories/**/*.stories.@(js|mdx)'],
75
- };
76
- ```
77
-
78
- Finally, you can create MDX files like this:
79
-
80
- ```md
81
- import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
82
- import { Button } from './Button';
83
-
84
- <Meta title='Button' component={Button} />
85
-
86
- # Button
87
-
88
- Some **markdown** description, or whatever you want.
89
-
90
- <Story name='basic' height='400px'>
91
- <Button>Label</Button>
92
- </Story>
93
-
94
- ## ArgsTable
95
-
96
- <ArgsTable of={Button} />
97
- ```
98
-
99
- ## Inline stories
100
-
101
- Storybook Docs renders all React stories inline by default.
102
-
103
- However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
104
-
105
- To do so for all stories, update `.storybook/preview.js`:
106
-
107
- ```js
108
- export const parameters = { docs: { story: { inline: false } } };
109
- ```
110
-
111
- ## TypeScript props with `react-docgen-typescript`
112
-
113
- If you're using TypeScript, there are two different options for generating props: `react-docgen` (default) or `react-docgen-typescript`.
114
-
115
- You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
116
-
117
- ```js
118
- export default {
119
- typescript: {
120
- // also valid 'react-docgen' | false
121
- reactDocgen: 'react-docgen-typescript',
122
- },
123
- };
124
- ```
125
-
126
- Neither option is perfect, so here's everything you should know if you're thinking about using `react-docgen` for TypeScript.
127
-
128
- | | `react-docgen-typescript` | `react-docgen` |
129
- | --------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
130
- | **Features** | **Great**. The analysis produces great results which gives the best props table experience. | **OK**. React-docgen produces basic results that are fine for most use cases. |
131
- | **Performance** | **Slow**. It's doing a lot more work to produce those results, and may also have an inefficient implementation. | **Blazing fast**. Adding it to your project increases build time negligibly. |
132
- | **Bugs** | **Some**. There are corner cases that are not handled properly, and are annoying for developers. | **Some**. There are corner cases that are not handled properly, and are annoying for developers. |
133
- | **SB docs** | **Good**. Our prop tables have supported `react-docgen-typescript` results from the beginning, so it's relatively stable. | **OK**. There are some obvious improvements to fully support `react-docgen`, and they're coming soon. |
134
-
135
- **Performance** is a common question, so here are build times from a random project to quantify. Your mileage may vary:
136
-
137
- | Docgen | Build time |
138
- | ----------------------- | ---------- |
139
- | react-docgen-typescript | 33s |
140
- | react-docgen | 29s |
141
- | none | 28s |
142
-
143
- ## More resources
144
-
145
- Want to learn more? Here are some more articles on Storybook Docs:
146
-
147
- - References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
148
- - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
149
- - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
package/svelte/HOC.svelte DELETED
@@ -1,7 +0,0 @@
1
- <script>
2
- export let storyFn;
3
-
4
- let { Component: component, props } = storyFn();
5
- </script>
6
-
7
- <svelte:component this={component} {...props}/>
package/vue/README.md DELETED
@@ -1,152 +0,0 @@
1
- <center>
2
- <img src="../docs/media/vue-hero.png" width="100%" />
3
- </center>
4
-
5
- <h1>Storybook Docs for Vue</h1>
6
-
7
- > migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
8
-
9
- Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Vue supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
10
-
11
- To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Vue specifics, read on!
12
-
13
- - [Installation](#installation)
14
- - [Preset options](#preset-options)
15
- - [DocsPage](#docspage)
16
- - [Props tables](#props-tables)
17
- - [MDX](#mdx)
18
- - [Inline Stories](#inline-stories)
19
- - [More resources](#more-resources)
20
-
21
- ## Installation
22
-
23
- First add the package. Make sure that the versions for your `@storybook/*` packages match:
24
-
25
- ```sh
26
- yarn add -D @storybook/addon-docs
27
- ```
28
-
29
- Then add the following to your `.storybook/main.js` addons:
30
-
31
- ```js
32
- export default {
33
- addons: ['@storybook/addon-docs'],
34
- };
35
- ```
36
-
37
- ## Preset options
38
-
39
- The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
40
-
41
- ```js
42
- import * as path from 'path';
43
-
44
- export default {
45
- addons: [
46
- {
47
- name: '@storybook/addon-docs',
48
- options: {
49
- vueDocgenOptions: {
50
- alias: {
51
- '@': path.resolve(__dirname, '../'),
52
- },
53
- },
54
- },
55
- },
56
- ],
57
- };
58
- ```
59
-
60
- The `vueDocgenOptions` is an object for configuring `vue-docgen-api`. See [`vue-docgen-api`'s docs](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#options-docgenoptions) for available configuration options.
61
-
62
- ## DocsPage
63
-
64
- When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
65
-
66
- ## Props tables
67
-
68
- Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Vue relies on [`vue-docgen-loader`](https://github.com/pocka/vue-docgen-loader). It supports `props`, `events`, and `slots` as first class prop types.
69
-
70
- Finally, be sure to fill in the `component` field in your story metadata:
71
-
72
- ```ts
73
- import { InfoButton } from './InfoButton.vue';
74
-
75
- export default {
76
- title: 'InfoButton',
77
- component: InfoButton,
78
- };
79
- ```
80
-
81
- If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
82
-
83
- ```ts
84
- import { storiesOf } from '@storybook/vue';
85
- import { InfoButton } from './InfoButton.vue';
86
-
87
- storiesOf('InfoButton', module)
88
- .addParameters({ component: InfoButton })
89
- .add( ... );
90
- ```
91
-
92
- ## MDX
93
-
94
- [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
95
-
96
- Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
97
-
98
- ```sh
99
- yarn add -D react
100
- ```
101
-
102
- Then update your `.storybook/main.js` to make sure you load MDX files:
103
-
104
- ```js
105
- export default {
106
- stories: ['../src/stories/**/*.stories.@(js|mdx)'],
107
- };
108
- ```
109
-
110
- Finally, you can create MDX files like this:
111
-
112
- ```md
113
- import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
114
- import { InfoButton } from './InfoButton.vue';
115
-
116
- <Meta title='InfoButton' component={InfoButton} />
117
-
118
- # InfoButton
119
-
120
- Some **markdown** description, or whatever you want.
121
-
122
- <Story name='basic' height='400px'>{{
123
- components: { InfoButton },
124
- template: '<info-button label="I\'m a button!"/>',
125
- }}</Story>
126
-
127
- ## ArgsTable
128
-
129
- <ArgsTable of={InfoButton} />
130
- ```
131
-
132
- Yes, it's redundant to declare `component` twice. [Coming soon](https://github.com/storybookjs/storybook/issues/8685).
133
-
134
- ## Inline Stories
135
-
136
- Storybook Docs renders all Vue stories inline by default.
137
-
138
- However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.story.iframeHeight` story parameter), by using the `docs.stories.inline` parameter.
139
-
140
- To do so for all stories, update `.storybook/preview.js`:
141
-
142
- ```js
143
- export const parameters = { docs: { story: { inline: false } } };
144
- ```
145
-
146
- ## More resources
147
-
148
- Want to learn more? Here are some more articles on Storybook Docs:
149
-
150
- - References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
151
- - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
152
- - Example: [Storybook Design System](https://github.com/storybookjs/design-system)