@storybook/addon-docs 9.2.0-alpha.2 → 10.0.0-beta.0
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.
- package/README.md +5 -3
- package/dist/_browser-chunks/Color-LWAWP22K.js +1566 -0
- package/dist/_browser-chunks/DocsRenderer-HT7GNKAR.js +9 -0
- package/dist/_browser-chunks/chunk-67KILNXL.js +6831 -0
- package/dist/_browser-chunks/chunk-74ZUTOZN.js +65 -0
- package/dist/_browser-chunks/chunk-MM7DTO55.js +44 -0
- package/dist/_browser-chunks/chunk-RX6225WF.js +46 -0
- package/dist/_browser-chunks/chunk-TQ5Q4DDG.js +846 -0
- package/dist/_browser-chunks/chunk-UZFOWTVP.js +974 -0
- package/dist/_node-chunks/chunk-32BBSODQ.js +231 -0
- package/dist/_node-chunks/chunk-SFE23BYR.js +48 -0
- package/dist/_node-chunks/chunk-W3NRVQR7.js +35424 -0
- package/dist/_node-chunks/chunk-WX5VRRPF.js +248 -0
- package/dist/_node-chunks/mdx-plugin-2RC5UF6O.js +1653 -0
- package/dist/_node-chunks/rehype-external-links-WVBYEZ7J.js +168 -0
- package/dist/_node-chunks/rehype-slug-JGTPG4A3.js +127 -0
- package/dist/angular/index.d.ts +3 -0
- package/dist/angular/index.js +11 -0
- package/dist/blocks.d.ts +86 -42
- package/dist/blocks.js +8123 -201
- package/dist/ember/index.d.ts +3 -0
- package/dist/ember/index.js +11 -0
- package/dist/index.d.ts +42 -5
- package/dist/index.js +17 -15
- package/dist/manager.js +85 -154
- package/dist/mdx-loader.js +38 -71
- package/dist/mdx-react-shim.js +2 -0
- package/dist/preset.js +310 -72
- package/dist/preview.js +8 -13
- package/dist/web-components/index.d.ts +2 -0
- package/dist/web-components/index.js +0 -0
- package/manager.js +1 -1
- package/package.json +45 -89
- package/preset.js +1 -1
- package/preview.js +1 -1
- package/angular/README.md +0 -256
- package/angular/index.d.ts +0 -1
- package/angular/index.js +0 -4
- package/common/README.md +0 -98
- package/dist/Color-AVL7NMMY.mjs +0 -10
- package/dist/DocsContainer-fccc2203.d.ts +0 -51
- package/dist/DocsRenderer-3PZUHFFL.mjs +0 -2
- package/dist/DocsRenderer-ULRJ3H2C.mjs +0 -8
- package/dist/blocks.mjs +0 -213
- package/dist/chunk-2UFMRE4V.mjs +0 -5
- package/dist/chunk-CEH6MNVV.mjs +0 -3
- package/dist/chunk-GWJYCGSQ.mjs +0 -7
- package/dist/chunk-QUZPS4B6.mjs +0 -3
- package/dist/chunk-SPFYY5GD.mjs +0 -3
- package/dist/index.mjs +0 -8
- package/dist/preview.mjs +0 -5
- package/dist/shims/mdx-react-shim.js +0 -12
- package/dist/shims/mdx-react-shim.mjs +0 -1
- package/ember/README.md +0 -153
- package/ember/index.d.ts +0 -1
- package/ember/index.js +0 -3
- package/react/README.md +0 -149
- package/svelte/HOC.svelte +0 -7
- package/vue/README.md +0 -152
- package/vue3/README.md +0 -152
- package/web-components/README.md +0 -131
- package/web-components/index.js +0 -1
- /package/dist/{shims/mdx-react-shim.d.ts → mdx-react-shim.d.ts} +0 -0
package/dist/chunk-2UFMRE4V.mjs
DELETED
|
@@ -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 };
|
package/dist/chunk-CEH6MNVV.mjs
DELETED
package/dist/chunk-GWJYCGSQ.mjs
DELETED
|
@@ -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 };
|
package/dist/chunk-QUZPS4B6.mjs
DELETED
|
@@ -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 };
|
package/dist/chunk-SPFYY5GD.mjs
DELETED
|
@@ -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
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
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)
|