diff --git a/.betterer.ts b/.betterer.ts index f525fc62ba2..7d4dc594b89 100644 --- a/.betterer.ts +++ b/.betterer.ts @@ -9,7 +9,7 @@ export default { countEslintErrors() .include('**/*.{ts,tsx}') .exclude(/public\/app\/angular/), - 'no undocumented stories': () => countUndocumentedStories().include('**/*.story.tsx'), + 'no undocumented stories': () => countUndocumentedStories().include('**/!(*.internal).story.tsx'), }; function countUndocumentedStories() { diff --git a/.yarn/patches/@storybook-addon-docs-npm-6.5.16-56ecbd77e7.patch b/.yarn/patches/@storybook-addon-docs-npm-6.5.16-56ecbd77e7.patch deleted file mode 100644 index 5fc706f7d5d..00000000000 --- a/.yarn/patches/@storybook-addon-docs-npm-6.5.16-56ecbd77e7.patch +++ /dev/null @@ -1,14 +0,0 @@ -diff --git a/dist/ts3.9/blocks/DocsContainer.d.ts b/dist/ts3.9/blocks/DocsContainer.d.ts -index be330e44bebb02eaf2c92d365d4e7dc1da452465..6c8b1d42bea2e184456e2757eb2ee20076ba43b3 100644 ---- a/dist/ts3.9/blocks/DocsContainer.d.ts -+++ b/dist/ts3.9/blocks/DocsContainer.d.ts -@@ -1,7 +1,8 @@ --import { FunctionComponent } from 'react'; -+import { FunctionComponent, ReactNode } from 'react'; - import { AnyFramework } from '@storybook/csf'; - import { DocsContextProps } from './DocsContext'; - export interface DocsContainerProps { - context: DocsContextProps; -+ children?: ReactNode; - } - export declare const DocsContainer: FunctionComponent; diff --git a/.yarn/patches/@storybook-blocks-npm-7.0.10-b101e8dcba.patch b/.yarn/patches/@storybook-blocks-npm-7.0.10-b101e8dcba.patch new file mode 100644 index 00000000000..ce9a5061e56 --- /dev/null +++ b/.yarn/patches/@storybook-blocks-npm-7.0.10-b101e8dcba.patch @@ -0,0 +1,20 @@ +diff --git a/dist/index.js b/dist/index.js +index fa17edc3ce4e18ca27bb0a09c4a787d286fa21d9..68fee28458f3867075df0af54054382a38341efb 100644 +--- a/dist/index.js ++++ b/dist/index.js +@@ -78,4 +78,4 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD + + `);return import_react49.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...(_a=props==null?void 0:props.options)==null?void 0:_a.overrides},...props==null?void 0:props.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),DEPRECATION_MIGRATION_LINK="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo",getNotes=notes=>notes&&(typeof notes=="string"?notes:(0,import_docs_tools3.str)(notes.markdown)||(0,import_docs_tools3.str)(notes.text)),getInfo=info=>info&&(typeof info=="string"?info:(0,import_docs_tools3.str)(info.text)),noDescription=component=>null,getDescriptionFromResolvedOf=resolvedOf=>{var _a,_b,_c,_d,_e,_f,_g,_h;switch(resolvedOf.type){case"story":return((_b=(_a=resolvedOf.story.parameters.docs)==null?void 0:_a.description)==null?void 0:_b.story)||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=(_d=(_c=parameters.docs)==null?void 0:_c.description)==null?void 0:_d.component;return metaDescription||((_f=(_e=parameters.docs)==null?void 0:_e.extractComponentDescription)==null?void 0:_f.call(_e,component,{component,parameters}))||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return((_h=(_g=parameters.docs)==null?void 0:_g.extractComponentDescription)==null?void 0:_h.call(_g,component,{component,parameters}))||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},getDescriptionFromDeprecatedProps=({type,markdown,children},{storyById})=>{let{component,parameters}=storyById();if(children||markdown)return children||markdown;let{notes,info,docs}=parameters;(Boolean(notes)||Boolean(info))&&(0,import_client_logger9.deprecate)(`Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`);let{extractComponentDescription=noDescription,description}=docs||{},componentDescriptionParameter=description==null?void 0:description.component;if(componentDescriptionParameter)return componentDescriptionParameter;switch(type){case"info":return getInfo(info);case"notes":return getNotes(notes);case"docgen":case"auto":default:return extractComponentDescription(component,{component,...parameters})}},DescriptionContainer=props=>{let{of,type,markdown:markdownProp,children}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=(0,import_react50.useContext)(DocsContext),resolvedOf=useOf(of||"meta"),markdown;return type||markdownProp||children?markdown=getDescriptionFromDeprecatedProps(props,context):markdown=getDescriptionFromResolvedOf(resolvedOf),type&&(0,import_client_logger9.deprecate)(`Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdownProp&&(0,import_client_logger9.deprecate)(`The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),children&&(0,import_client_logger9.deprecate)(`The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`),markdown?import_react50.default.createElement(Markdown2,null,markdown):null};var import_react60=__toESM(require("react"));var import_react51=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming27=require("@storybook/theming");var{document:document3,window:globalWindow3}=import_global7.global,DocsContainer=({context,theme,children})=>((0,import_react51.useEffect)(()=>{let url;try{if(url=new URL(globalWindow3.parent.location.toString()),url.hash){let element=document3.getElementById(url.hash.substring(1));element&&setTimeout(()=>{scrollToElement(element)},200)}}catch{}}),import_react51.default.createElement(DocsContext.Provider,{value:context},import_react51.default.createElement(SourceContainer,{channel:context.channel},import_react51.default.createElement(import_theming27.ThemeProvider,{theme:(0,import_theming27.ensure)(theme)},import_react51.default.createElement(DocsPageWrapper,null,children)))));var import_react59=__toESM(require("react"));var import_react52=__toESM(require("react"));var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,extractTitle=title=>{let groups=title.trim().split(STORY_KIND_PATH_SEPARATOR);return groups&&groups[groups.length-1]||title},Title2=({children})=>{let context=(0,import_react52.useContext)(DocsContext),content=children||extractTitle(context.storyById().title);return content?import_react52.default.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var import_react53=__toESM(require("react"));var Subtitle2=({children})=>{let docsContext=(0,import_react53.useContext)(DocsContext),{parameters}=docsContext.storyById(),content=children||(parameters==null?void 0:parameters.componentSubtitle);return content?import_react53.default.createElement(Subtitle,{className:"sbdocs-subtitle sb-unstyled"},content):null};var import_react56=__toESM(require("react")),import_ts_dedent6=__toESM(require("ts-dedent")),import_client_logger10=require("@storybook/client-logger");var import_react55=__toESM(require("react"));var import_react54=__toESM(require("react")),import_components35=require("@storybook/components");var Subheading=({children,disableAnchor})=>{if(disableAnchor||typeof children!="string")return import_react54.default.createElement(import_components35.H3,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react54.default.createElement(HeaderMdx,{as:"h3",id:tagID},children)};var DocsStory=({of,expanded=!0,withToolbar:withToolbarProp=!1,__forceInitialArgs=!1,__primary=!1})=>{var _a,_b;let{story}=useOf(of||"story",["story"]),withToolbar=((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.withToolbar)??withToolbarProp;return import_react55.default.createElement(Anchor,{storyId:story.id},expanded&&import_react55.default.createElement(import_react55.default.Fragment,null,import_react55.default.createElement(Subheading,null,story.name),import_react55.default.createElement(DescriptionContainer,{of})),import_react55.default.createElement(Canvas,{of,withToolbar,story:{__forceInitialArgs,__primary},source:{__forceInitialArgs}}))};var Primary=({name})=>{let docsContext=(0,import_react56.useContext)(DocsContext);name&&(0,import_client_logger10.deprecate)(import_ts_dedent6.default`\`name\` prop is deprecated on the Primary block. + The Primary block should only be used to render the primary story, which is automatically found. +- `);let storyId=name&&docsContext.storyIdByName(name),story=docsContext.storyById(storyId);return story?import_react56.default.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react58=__toESM(require("react")),import_theming28=require("@storybook/theming");var import_react57=__toESM(require("react")),import_components36=require("@storybook/components");var Heading=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react57.default.createElement(import_components36.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react57.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming28.styled)(Heading)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title,includePrimary=!0})=>{let{componentStories}=(0,import_react58.useContext)(DocsContext),stories=componentStories().filter(story=>{var _a,_b;return!((_b=(_a=story.parameters)==null?void 0:_a.docs)!=null&&_b.disable)});return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:import_react58.default.createElement(import_react58.default.Fragment,null,import_react58.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react58.default.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};Stories.defaultProps={title:"Stories"};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return import_react59.default.createElement(import_react59.default.Fragment,null,import_react59.default.createElement(Title2,null),import_react59.default.createElement(Subtitle2,null),import_react59.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react59.default.createElement(DescriptionContainer,{of:"story"}):null,import_react59.default.createElement(Primary,null),import_react59.default.createElement(Controls3,null),isSingleStory?null:import_react59.default.createElement(Stories,null))};var Docs=({docsParameter,context})=>{let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return import_react60.default.createElement(Container,{context,theme:docsParameter.theme},import_react60.default.createElement(Page,null))};var import_react61=__toESM(require("react")),import_preview_api6=require("@storybook/preview-api");var import_preview_api5=require("@storybook/preview-api"),import_channels=require("@storybook/channels");var import_preview_api4=require("@storybook/preview-api"),ExternalDocsContext=class extends import_preview_api4.DocsContext{constructor(channel,store,renderStoryToElement,processMetaExports){super(channel,store,renderStoryToElement,[]);this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.processMetaExports=processMetaExports;this.referenceMeta=(metaExports,attach)=>{let csfFile=this.processMetaExports(metaExports);this.referenceCSFFile(csfFile),super.referenceMeta(metaExports,attach)}}};var ConstantMap=class{constructor(prefix){this.prefix=prefix;this.entries=new Map}get(key){return this.entries.has(key)||this.entries.set(key,`${this.prefix}${this.entries.size}`),this.entries.get(key)}},ExternalPreview=class extends import_preview_api5.Preview{constructor(projectAnnotations){super(new import_channels.Channel);this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:4,entries:{}};this.moduleExportsByImportPath={};this.processMetaExports=metaExports=>{let importPath=this.importPaths.get(metaExports);this.moduleExportsByImportPath[importPath]=metaExports;let title=metaExports.default.title||this.titles.get(metaExports),csfFile=this.storyStore.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id:id2,name})=>{this.storyIndex.entries[id2]={id:id2,importPath,title,name,type:"story"}}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStore,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));this.initialize({getStoryIndex:()=>this.storyIndex,importFn:path=>Promise.resolve(this.moduleExportsByImportPath[path]),getProjectAnnotations:()=>(0,import_preview_api5.composeConfigs)([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations])})}};function usePreview(projectAnnotations){let previewRef=(0,import_react61.useRef)();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}var ExternalDocs=({projectAnnotationsList,children})=>{var _a;let projectAnnotations=(0,import_preview_api6.composeConfigs)(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...(_a=projectAnnotations.parameters)==null?void 0:_a.docs,page:()=>children};return import_react61.default.createElement(Docs,{docsParameter,context:preview2.docsContext()})};var import_react62=__toESM(require("react")),import_theming29=require("@storybook/theming");var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),import_react62.default.createElement(DocsContext.Provider,{value:preview.docsContext()},import_react62.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(import_theming29.themes.light)},children)));var import_react63=__toESM(require("react"));var Meta=({of})=>{let context=(0,import_react63.useContext)(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return import_react63.default.createElement(Anchor,{storyId:primary.id})}catch{return null}};var import_react64=__toESM(require("react")),Unstyled=props=>import_react64.default.createElement("div",{...props,className:"sb-unstyled"});var import_react65=__toESM(require("react")),Wrapper9=({children})=>import_react65.default.createElement("div",{style:{fontFamily:"sans-serif"}},children);0&&(module.exports={AddContext,Anchor,AnchorMdx,ArgTypes,ArgsTable,BooleanControl,Canvas,CodeOrSourceMdx,ColorControl,ColorItem,ColorPalette,ComponentsTable,Controls,DateControl,Description,DescriptionType,Docs,DocsContainer,DocsContext,DocsPage,DocsStory,ExternalDocs,ExternalDocsContainer,FilesControl,HeaderMdx,HeadersMdx,Heading,IconGallery,IconItem,Markdown,Meta,NoControlsWarning,NumberControl,ObjectControl,OptionsControl,PRIMARY_STORY,Primary,PureArgsTable,RangeControl,Source,SourceContainer,SourceContext,SourceState,Stories,Story,StoryTable,Subheading,Subtitle,TextControl,Title,Typeset,UNKNOWN_ARGS_HASH,Unstyled,Wrapper,anchorBlockIdFromId,argsHash,assertIsFn,extractComponentArgTypes,extractTitle,format,formatDate,formatTime,getComponent,getStoryId,getStoryProps,parse,parseDate,parseTime,useOf,useSourceProps}); ++ `);let storyId=name&&docsContext.storyIdByName(name),story=docsContext.storyById(storyId);return story?import_react56.default.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react58=__toESM(require("react")),import_theming28=require("@storybook/theming");var import_react57=__toESM(require("react")),import_components36=require("@storybook/components");var Heading=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react57.default.createElement(import_components36.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react57.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming28.styled)(Heading)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title,includePrimary=!0})=>{let{componentStories}=(0,import_react58.useContext)(DocsContext),stories=componentStories().filter(story=>{var _a,_b;return!((_b=(_a=story.parameters)==null?void 0:_a.docs)!=null&&_b.disable)});return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:import_react58.default.createElement(import_react58.default.Fragment,null,import_react58.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react58.default.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};Stories.defaultProps={title:"Stories"};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return import_react59.default.createElement(import_react59.default.Fragment,null,import_react59.default.createElement(Title2,null),import_react59.default.createElement(Subtitle2,null),import_react59.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react59.default.createElement(DescriptionContainer,{of:"story"}):null,import_react59.default.createElement(Primary,null),import_react59.default.createElement(Controls3,null),isSingleStory?null:import_react59.default.createElement(Stories,null))};var Docs=({docsParameter,context})=>{let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return import_react60.default.createElement(Container,{context,theme:docsParameter.theme},import_react60.default.createElement(Page,null))};var import_react61=__toESM(require("react")),import_preview_api6=require("@storybook/preview-api");var import_preview_api5=require("@storybook/preview-api"),import_channels=require("@storybook/channels");var import_preview_api4=require("@storybook/preview-api"),ExternalDocsContext=class extends import_preview_api4.DocsContext{constructor(channel,store,renderStoryToElement,processMetaExports){super(channel,store,renderStoryToElement,[]);this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.processMetaExports=processMetaExports;this.referenceMeta=(metaExports,attach)=>{let csfFile=this.processMetaExports(metaExports);this.referenceCSFFile(csfFile),super.referenceMeta(metaExports,attach)}}};var ConstantMap=class{constructor(prefix){this.prefix=prefix;this.entries=new Map}get(key){return this.entries.has(key)||this.entries.set(key,`${this.prefix}${this.entries.size}`),this.entries.get(key)}},ExternalPreview=class extends import_preview_api5.Preview{constructor(projectAnnotations){super(new import_channels.Channel);this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:4,entries:{}};this.moduleExportsByImportPath={};this.processMetaExports=metaExports=>{let importPath=this.importPaths.get(metaExports);this.moduleExportsByImportPath[importPath]=metaExports;let title=metaExports.default.title||this.titles.get(metaExports),csfFile=this.storyStore.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id:id2,name})=>{this.storyIndex.entries[id2]={id:id2,importPath,title,name,type:"story"}}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStore,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));this.initialize({getStoryIndex:()=>this.storyIndex,importFn:path=>Promise.resolve(this.moduleExportsByImportPath[path]),getProjectAnnotations:()=>(0,import_preview_api5.composeConfigs)([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations])})}};function usePreview(projectAnnotations){let previewRef=(0,import_react61.useRef)();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}var ExternalDocs=({projectAnnotationsList,children})=>{var _a;let projectAnnotations=(0,import_preview_api6.composeConfigs)(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...(_a=projectAnnotations.parameters)==null?void 0:_a.docs,page:()=>children};return import_react61.default.createElement(Docs,{docsParameter,context:preview2.docsContext()})};var import_react62=__toESM(require("react")),import_theming29=require("@storybook/theming");var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),import_react62.default.createElement(DocsContext.Provider,{value:preview.docsContext()},import_react62.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(import_theming29.themes.light)},children)));var import_react63=__toESM(require("react"));var Meta=({of})=>{let context=(0,import_react63.useContext)(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return import_react63.default.createElement(Anchor,{storyId:primary.id})}catch{return null}};var import_react64=__toESM(require("react")),Unstyled=props=>import_react64.default.createElement("div",{...props,className:"sb-unstyled"});var import_react65=__toESM(require("react")),Wrapper9=({children})=>import_react65.default.createElement("div",{style:{fontFamily:"sans-serif"}},children);0&&(module.exports={AddContext,Anchor,AnchorMdx,ArgTypes,ArgsTable,BooleanControl,Canvas,CodeOrSourceMdx,ColorControl,ColorItem,ColorPalette,ComponentsTable,Controls,DateControl,Description,DescriptionType,Docs,DocsContainer,DocsContext,DocsPage,DocsStory,ExternalDocs,ExternalDocsContainer,FilesControl,HeaderMdx,HeadersMdx,Heading,IconGallery,IconItem,Markdown,Meta,NoControlsWarning,NumberControl,ObjectControl,OptionsControl,PRIMARY_STORY,Primary,Preview,PureArgsTable,RangeControl,Source,SourceContainer,SourceContext,SourceState,Stories,Story,StoryTable,Subheading,Subtitle,TextControl,Title,Typeset,UNKNOWN_ARGS_HASH,Unstyled,Wrapper,anchorBlockIdFromId,argsHash,assertIsFn,extractComponentArgTypes,extractTitle,format,formatDate,formatTime,getComponent,getStoryId,getStoryProps,parse,parseDate,parseTime,useOf,useSourceProps}); +diff --git a/dist/index.mjs b/dist/index.mjs +index 977ed0f84e1f245ce68719a1c28bc0762fa4ee54..285904763af123f07f64cd21366b6b6c4814bcdd 100644 +--- a/dist/index.mjs ++++ b/dist/index.mjs +@@ -102,4 +102,4 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh + The Primary block should only be used to render the primary story, which is automatically found. + `);let storyId=name&&docsContext.storyIdByName(name),story=docsContext.storyById(storyId);return story?React17.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var Heading=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return React17.createElement(H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return React17.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=styled(Heading)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,fontWeight:theme.typography.weight.bold,lineHeight:"16px",letterSpacing:"0.35em",textTransform:"uppercase",color:theme.textMutedColor,border:0,marginBottom:"12px","&:first-of-type":{marginTop:"56px"}})),Stories=({title,includePrimary=!0})=>{let{componentStories}=useContext(DocsContext),stories=componentStories().filter(story=>!story.parameters?.docs?.disable);return includePrimary||(stories=stories.slice(1)),!stories||stories.length===0?null:React17.createElement(React17.Fragment,null,React17.createElement(StyledHeading,null,title),stories.map(story=>story&&React17.createElement(DocsStory,{key:story.id,of:story.moduleExport,expanded:!0,__forceInitialArgs:!0})))};Stories.defaultProps={title:"Stories"};var DocsPage=()=>{let resolvedOf=useOf("meta",["meta"]),{stories}=resolvedOf.csfFile,isSingleStory=Object.keys(stories).length===1;return React17.createElement(React17.Fragment,null,React17.createElement(Title2,null),React17.createElement(Subtitle2,null),React17.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?React17.createElement(DescriptionContainer,{of:"story"}):null,React17.createElement(Primary,null),React17.createElement(Controls3,null),isSingleStory?null:React17.createElement(Stories,null))};var Docs=({docsParameter,context})=>{let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return React17.createElement(Container,{context,theme:docsParameter.theme},React17.createElement(Page,null))};var ExternalDocsContext=class extends DocsContext$1{constructor(channel,store,renderStoryToElement,processMetaExports){super(channel,store,renderStoryToElement,[]);this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.processMetaExports=processMetaExports;this.referenceMeta=(metaExports,attach)=>{let csfFile=this.processMetaExports(metaExports);this.referenceCSFFile(csfFile),super.referenceMeta(metaExports,attach);};}};var ConstantMap=class{constructor(prefix){this.prefix=prefix;this.entries=new Map;}get(key){return this.entries.has(key)||this.entries.set(key,`${this.prefix}${this.entries.size}`),this.entries.get(key)}},ExternalPreview=class extends Preview$1{constructor(projectAnnotations){super(new Channel);this.projectAnnotations=projectAnnotations;this.importPaths=new ConstantMap("./importPath/");this.titles=new ConstantMap("title-");this.storyIndex={v:4,entries:{}};this.moduleExportsByImportPath={};this.processMetaExports=metaExports=>{let importPath=this.importPaths.get(metaExports);this.moduleExportsByImportPath[importPath]=metaExports;let title=metaExports.default.title||this.titles.get(metaExports),csfFile=this.storyStore.processCSFFileWithCache(metaExports,importPath,title);return Object.values(csfFile.stories).forEach(({id,name})=>{this.storyIndex.entries[id]={id,importPath,title,name,type:"story"};}),this.onStoriesChanged({storyIndex:this.storyIndex}),csfFile};this.docsContext=()=>new ExternalDocsContext(this.channel,this.storyStore,this.renderStoryToElement.bind(this),this.processMetaExports.bind(this));this.initialize({getStoryIndex:()=>this.storyIndex,importFn:path=>Promise.resolve(this.moduleExportsByImportPath[path]),getProjectAnnotations:()=>composeConfigs([{parameters:{docs:{story:{inline:!0}}}},this.projectAnnotations])});}};function usePreview(projectAnnotations){let previewRef=useRef();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}var ExternalDocs=({projectAnnotationsList,children})=>{let projectAnnotations=composeConfigs(projectAnnotationsList),preview2=usePreview(projectAnnotations),docsParameter={...projectAnnotations.parameters?.docs,page:()=>children};return React17.createElement(Docs,{docsParameter,context:preview2.docsContext()})};var preview,ExternalDocsContainer=({projectAnnotations,children})=>(preview||(preview=new ExternalPreview(projectAnnotations)),React17.createElement(DocsContext.Provider,{value:preview.docsContext()},React17.createElement(ThemeProvider,{theme:ensure(themes.light)},children)));var Meta=({of})=>{let context=useContext(DocsContext);of&&context.referenceMeta(of,!0);try{let primary=context.storyById();return React17.createElement(Anchor,{storyId:primary.id})}catch{return null}};var Unstyled=props=>React17.createElement("div",{...props,className:"sb-unstyled"});var Wrapper8=({children})=>React17.createElement("div",{style:{fontFamily:"sans-serif"}},children); + +-export { AddContext, Anchor, AnchorMdx, ArgTypes, ArgsTable2 as ArgsTable, BooleanControl, Canvas, CodeOrSourceMdx, ColorControl, ColorItem, ColorPalette, ComponentsTable, Controls3 as Controls, DateControl, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContext, DocsPage, DocsStory, ExternalDocs, ExternalDocsContainer, FilesControl, HeaderMdx, HeadersMdx, Heading, IconGallery, IconItem, Markdown2 as Markdown, Meta, NoControlsWarning, NumberControl, ObjectControl, OptionsControl, PRIMARY_STORY, Primary, ArgsTable as PureArgsTable, RangeControl, Source2 as Source, SourceContainer, SourceContext, SourceState, Stories, Story2 as Story, StoryTable, Subheading, Subtitle2 as Subtitle, TextControl, Title2 as Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper8 as Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractComponentArgTypes2 as extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId2 as getStoryId, getStoryProps, parse2 as parse, parseDate, parseTime, useOf, useSourceProps }; ++export { AddContext, Anchor, AnchorMdx, ArgTypes, ArgsTable2 as ArgsTable, BooleanControl, Canvas, CodeOrSourceMdx, ColorControl, ColorItem, ColorPalette, ComponentsTable, Controls3 as Controls, DateControl, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContext, DocsPage, DocsStory, ExternalDocs, ExternalDocsContainer, FilesControl, HeaderMdx, HeadersMdx, Heading, IconGallery, IconItem, Markdown2 as Markdown, Meta, NoControlsWarning, NumberControl, ObjectControl, OptionsControl, PRIMARY_STORY, Primary, Preview, ArgsTable as PureArgsTable, RangeControl, Source2 as Source, SourceContainer, SourceContext, SourceState, Stories, Story2 as Story, StoryTable, Subheading, Subtitle2 as Subtitle, TextControl, Title2 as Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper8 as Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractComponentArgTypes2 as extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId2 as getStoryId, getStoryProps, parse2 as parse, parseDate, parseTime, useOf, useSourceProps }; diff --git a/.yarnrc.yml b/.yarnrc.yml index e1d0e3aecac..734b86d3d23 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -3,33 +3,9 @@ enableTelemetry: false nodeLinker: pnp packageExtensions: - '@storybook/addon-docs@6.5.16': - peerDependencies: - '@babel/core': ^7.0.0 - '@storybook/manager-webpack5': 6.5.16 - 'webpack': 5.74.0 - '@storybook/addon-essentials@6.5.16': - peerDependencies: - '@storybook/components': 6.5.16 - '@storybook/core-events': 6.5.16 - '@storybook/manager-webpack5': 6.5.16 - '@storybook/theming': 6.5.16 - '@storybook/core-server@6.5.16': - peerDependencies: - '@babel/core': ^7.0.0 - '@storybook/core@6.5.16': - peerDependencies: - '@babel/core': ^7.0.0 - '@storybook/manager-webpack5': 6.5.16 - '@storybook/csf-tools@6.5.16': - peerDependencies: - '@babel/core': ^7.0.0 - '@storybook/mdx2-csf@0.0.3': + '@storybook/core-common@*': dependencies: - '@babel/types': ^7.14.8 - '@storybook/react@6.5.16': - peerDependencies: - '@storybook/manager-webpack5': 6.5.16 + '@storybook/react-webpack5': '*' doctrine@3.0.0: dependencies: assert: 2.0.0 diff --git a/package.json b/package.json index 7d04e89fecb..2d9e2c50d41 100644 --- a/package.json +++ b/package.json @@ -422,21 +422,11 @@ "@types/slate": "0.47.11", "@rushstack/rig-package": "0.3.18", "@rushstack/ts-command-line": "4.13.2", - "@storybook/builder-webpack4/css-loader": "6.7.3", - "@storybook/builder-webpack4/html-webpack-plugin": "5.5.0", - "@storybook/builder-webpack4/webpack": "5.76.0", - "@storybook/core-common/webpack": "5.76.0", - "@storybook/core-server/webpack": "5.76.0", - "@storybook/manager-webpack4/css-loader": "6.7.3", - "@storybook/manager-webpack4/html-webpack-plugin": "5.5.0", - "@storybook/manager-webpack4/webpack": "5.76.0", - "@storybook/builder-webpack5/webpack": "5.76.0", - "@storybook/manager-webpack5/webpack": "5.76.0", "ngtemplate-loader/loader-utils": "^2.0.0", "trim": "0.0.3", "slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch", "react-split-pane@0.1.92": "patch:react-split-pane@npm:0.1.92#.yarn/patches/react-split-pane-npm-0.1.92-93dbf51dff.patch", - "@storybook/addon-docs@6.5.16": "patch:@storybook/addon-docs@npm:6.5.16#.yarn/patches/@storybook-addon-docs-npm-6.5.16-56ecbd77e7.patch" + "@storybook/blocks@7.0.10": "patch:@storybook/blocks@npm%3A7.0.10#./.yarn/patches/@storybook-blocks-npm-7.0.10-b101e8dcba.patch" }, "workspaces": { "packages": [ diff --git a/packages/grafana-ui/.storybook/main.ts b/packages/grafana-ui/.storybook/main.ts index e737d0126c5..02547358226 100644 --- a/packages/grafana-ui/.storybook/main.ts +++ b/packages/grafana-ui/.storybook/main.ts @@ -1,14 +1,16 @@ import path from 'path'; -import type { StorybookConfig } from '@storybook/react/types'; +import type { StorybookConfig } from '@storybook/react-webpack5'; // avoid importing from @grafana/data to prevent node error: ERR_REQUIRE_ESM import { availableIconsIndex, IconName } from '../../grafana-data/src/types/icon'; import { getIconSubDir } from '../src/components/Icon/utils'; -const stories = ['../src/**/*.story.@(tsx|mdx)']; +// Internal stories should only be visible during development +const storyGlob = + process.env.NODE_ENV === 'production' + ? '../src/components/**/!(*.internal).story.tsx' + : '../src/components/**/*.story.tsx'; -if (process.env.NODE_ENV !== 'production') { - stories.push('../src/**/*.story.internal.@(tsx|mdx)'); -} +const stories = ['../src/Intro.mdx', storyGlob]; // We limit icon paths to only the available icons so publishing // doesn't require uploading 1000s of unused assets. @@ -25,20 +27,10 @@ const iconPaths = Object.keys(availableIconsIndex) const mainConfig: StorybookConfig = { stories, addons: [ - { - // work around docs 6.5.x not resolving correctly with yarn PnP - name: path.dirname(require.resolve('@storybook/addon-docs/package.json')), - options: { - configureJSX: true, - babelOptions: {}, - }, - }, { name: '@storybook/addon-essentials', options: { backgrounds: false, - // work around docs 6.5.x not resolving correctly with yarn PnP - docs: false, }, }, '@storybook/addon-a11y', @@ -62,31 +54,49 @@ const mainConfig: StorybookConfig = { name: 'storybook-addon-turbo-build', options: { optimizationLevel: 3, + // Target must match storybook 7 manager otherwise minimised docs error in production + esbuildMinifyOptions: { + target: 'chrome100', + minify: true, + }, }, }, ], - core: { - builder: { - name: 'webpack5', - options: { + core: {}, + docs: { + autodocs: true, + }, + framework: { + name: '@storybook/react-webpack5', + options: { + fastRefresh: true, + builder: { fsCache: true, }, }, }, - features: { - previewMdx2: true, - }, - framework: '@storybook/react', logLevel: 'debug', - reactOptions: { - fastRefresh: true, - }, staticDirs: [ - { from: '../../../public/fonts', to: '/public/fonts' }, - { from: '../../../public/img/grafana_text_logo-dark.svg', to: '/public/img/grafana_text_logo-dark.svg' }, - { from: '../../../public/img/grafana_text_logo-light.svg', to: '/public/img/grafana_text_logo-light.svg' }, - { from: '../../../public/img/fav32.png', to: '/public/img/fav32.png' }, - { from: '../../../public/lib', to: '/public/lib' }, + { + from: '../../../public/fonts', + to: '/public/fonts', + }, + { + from: '../../../public/img/grafana_text_logo-dark.svg', + to: '/public/img/grafana_text_logo-dark.svg', + }, + { + from: '../../../public/img/grafana_text_logo-light.svg', + to: '/public/img/grafana_text_logo-light.svg', + }, + { + from: '../../../public/img/fav32.png', + to: '/public/img/fav32.png', + }, + { + from: '../../../public/lib', + to: '/public/lib', + }, ...iconPaths, ], typescript: { @@ -119,5 +129,4 @@ const mainConfig: StorybookConfig = { return config; }, }; - module.exports = mainConfig; diff --git a/packages/grafana-ui/.storybook/manager.ts b/packages/grafana-ui/.storybook/manager.ts index 96ed58aa799..1caddf59335 100644 --- a/packages/grafana-ui/.storybook/manager.ts +++ b/packages/grafana-ui/.storybook/manager.ts @@ -1,9 +1,14 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { GrafanaDark } from './storybookTheme'; addons.setConfig({ + isFullscreen: false, + panelPosition: 'right', + showNav: true, + showPanel: true, + showToolbar: true, sidebar: { - showRoots: false, + showRoots: true, }, theme: GrafanaDark, }); diff --git a/packages/grafana-ui/.storybook/preview.ts b/packages/grafana-ui/.storybook/preview.ts index 1c91f1565fa..effdab3a18f 100644 --- a/packages/grafana-ui/.storybook/preview.ts +++ b/packages/grafana-ui/.storybook/preview.ts @@ -1,4 +1,6 @@ +import { Preview } from '@storybook/react'; import 'jquery'; + import '../../../public/vendor/flot/jquery.flot.js'; import '../../../public/vendor/flot/jquery.flot.selection'; import '../../../public/vendor/flot/jquery.flot.time'; @@ -8,8 +10,10 @@ import '../../../public/vendor/flot/jquery.flot.fillbelow'; import '../../../public/vendor/flot/jquery.flot.crosshair'; import '../../../public/vendor/flot/jquery.flot.dashes'; import '../../../public/vendor/flot/jquery.flot.gauge'; + import { withTheme } from '../src/utils/storybook/withTheme'; import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer'; + // @ts-ignore import lightTheme from './grafana.light.scss'; // @ts-ignore @@ -26,31 +30,38 @@ const handleThemeChange = (theme: any) => { } }; -export const decorators = [withTheme(handleThemeChange)]; - -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - darkMode: { - dark: GrafanaDark, - light: GrafanaLight, - }, - docs: { - container: ThemedDocsContainer, - }, - knobs: { - disable: true, - }, - layout: 'fullscreen', - options: { - showPanel: true, - panelPosition: 'right', - showNav: true, - isFullscreen: false, - isToolshown: true, - storySort: { - method: 'alphabetical', - // Order Docs Overview and Docs Overview/Intro story first - order: ['Docs Overview', ['Intro']], +const preview: Preview = { + decorators: [withTheme(handleThemeChange)], + parameters: { + actions: { argTypesRegex: '^on[A-Z].*' }, + darkMode: { + dark: GrafanaDark, + light: GrafanaLight, + }, + docs: { + container: ThemedDocsContainer, + }, + knobs: { + disable: true, + }, + layout: 'fullscreen', + options: { + // Sort stories first by Docs Overview, then alphabetically + // We should be able to use the builtin alphabetical sort, but is broken in SB 7.0 + // https://github.com/storybookjs/storybook/issues/22470 + storySort: (a, b) => { + if (a.title.startsWith('Docs Overview')) { + if (b.title.startsWith('Docs Overview')) { + return 0; + } + return -1; + } else if (b.title.startsWith('Docs Overview')) { + return 1; + } + return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }); + }, }, }, }; + +export default preview; diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index c412af24671..be28a213c69 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -35,8 +35,8 @@ "build": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.ts", "bundle": "rollup -c rollup.config.ts", "clean": "rimraf ./dist ./compiled ./package.tgz", - "storybook": "start-storybook -p 9001 -c .storybook", - "storybook:build": "build-storybook -o ./dist/storybook -c .storybook", + "storybook": "storybook dev -p 9001 -c .storybook --no-open", + "storybook:build": "storybook build -o ./dist/storybook -c .storybook", "typecheck": "tsc --emitDeclarationOnly false --noEmit", "generate-icons-bundle-cache-file": "node ./scripts/generate-icon-bundle.js", "prepack": "cp package.json package.json.bak && node ../../scripts/prepare-packagejson.js", @@ -117,22 +117,21 @@ "@grafana/tsconfig": "^1.2.0-rc1", "@mdx-js/react": "1.6.22", "@rollup/plugin-node-resolve": "15.0.1", - "@storybook/addon-a11y": "6.5.16", - "@storybook/addon-actions": "6.5.16", - "@storybook/addon-docs": "6.5.16", - "@storybook/addon-essentials": "6.5.16", - "@storybook/addon-storysource": "6.5.16", - "@storybook/addons": "6.5.16", - "@storybook/api": "6.5.16", - "@storybook/builder-webpack5": "6.5.16", - "@storybook/client-api": "6.5.16", - "@storybook/components": "6.5.16", - "@storybook/core-events": "6.5.16", - "@storybook/manager-webpack5": "6.5.16", - "@storybook/mdx2-csf": "0.0.3", + "@storybook/addon-a11y": "7.0.10", + "@storybook/addon-actions": "7.0.10", + "@storybook/addon-docs": "7.0.10", + "@storybook/addon-essentials": "7.0.10", + "@storybook/addon-storysource": "7.0.10", + "@storybook/api": "7.0.10", + "@storybook/blocks": "7.0.10", + "@storybook/client-api": "7.0.10", + "@storybook/components": "7.0.10", + "@storybook/core-events": "7.0.10", + "@storybook/mdx2-csf": "1.0.0", "@storybook/preset-scss": "1.0.3", - "@storybook/react": "6.5.16", - "@storybook/theming": "6.5.16", + "@storybook/react": "7.0.10", + "@storybook/react-webpack5": "7.0.10", + "@storybook/theming": "7.0.10", "@testing-library/dom": "9.0.1", "@testing-library/jest-dom": "5.16.5", "@testing-library/react": "14.0.0", @@ -181,8 +180,9 @@ "rollup-plugin-node-externals": "^5.0.0", "rollup-plugin-svg-import": "^1.6.0", "sass-loader": "13.2.0", + "storybook": "7.0.10", "storybook-addon-turbo-build": "1.1.0", - "storybook-dark-mode": "2.1.1", + "storybook-dark-mode": "3.0.0", "style-loader": "3.3.1", "typescript": "4.8.4", "webpack": "5.76.0" diff --git a/packages/grafana-ui/src/Intro.story.mdx b/packages/grafana-ui/src/Intro.mdx similarity index 98% rename from packages/grafana-ui/src/Intro.story.mdx rename to packages/grafana-ui/src/Intro.mdx index 11411323643..d1286bc90b4 100644 --- a/packages/grafana-ui/src/Intro.story.mdx +++ b/packages/grafana-ui/src/Intro.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta } from '@storybook/blocks'; diff --git a/packages/grafana-ui/src/components/Alert/Alert.mdx b/packages/grafana-ui/src/components/Alert/Alert.mdx index 075ac9943a3..96c05104a45 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.mdx +++ b/packages/grafana-ui/src/components/Alert/Alert.mdx @@ -1,4 +1,4 @@ -import { Meta, Props, ArgsTable } from '@storybook/addon-docs/blocks'; +import { Meta, ArgTypes } from '@storybook/blocks'; import { Alert } from './Alert'; @@ -155,4 +155,4 @@ appEvents.publish({ ``` - + diff --git a/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx b/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx index 4faeeacbd3c..dd48858b8a4 100644 --- a/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx +++ b/packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx @@ -1,12 +1,13 @@ import { action } from '@storybook/addon-actions'; -import { ComponentStory, Meta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import React from 'react'; import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui'; import { StoryExample } from '../../utils/storybook/StoryExample'; import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; -import mdx from '../Alert/Alert.mdx'; + +import mdx from './Alert.mdx'; const severities: AlertVariant[] = ['error', 'warning', 'info', 'success']; @@ -27,7 +28,7 @@ const meta: Meta = { }, }; -export const Basic: ComponentStory = (args) => { +export const Basic: StoryFn = (args) => { return (
@@ -44,7 +45,7 @@ Basic.args = { title: 'Basic', }; -export const WithActions: ComponentStory = (args) => { +export const WithActions: StoryFn = (args) => { return ( @@ -61,7 +62,7 @@ WithActions.args = { buttonContent: 'Close', }; -export const Examples: ComponentStory = () => { +export const Examples: StoryFn = () => { return ( diff --git a/packages/grafana-ui/src/components/Alert/Toast.story.tsx b/packages/grafana-ui/src/components/Alert/Toast.story.tsx index 90cb66fd439..dd06a387c9e 100644 --- a/packages/grafana-ui/src/components/Alert/Toast.story.tsx +++ b/packages/grafana-ui/src/components/Alert/Toast.story.tsx @@ -1,16 +1,17 @@ import { action } from '@storybook/addon-actions'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import React from 'react'; import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui'; import { StoryExample } from '../../utils/storybook/StoryExample'; import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; -import mdx from '../Alert/Alert.mdx'; + +import mdx from './Alert.mdx'; const severities: AlertVariant[] = ['error', 'warning', 'info', 'success']; -const meta: ComponentMeta = { +const meta: Meta = { title: 'Overlays/Alert/Toast', component: Alert, decorators: [withCenteredStory, withHorizontallyCenteredStory], @@ -30,7 +31,7 @@ const meta: ComponentMeta = { }, }; -export const Basic: ComponentStory = (args) => { +export const Basic: StoryFn = (args) => { return (
diff --git a/packages/grafana-ui/src/components/Badge/Badge.mdx b/packages/grafana-ui/src/components/Badge/Badge.mdx index f246c69d5c0..e871b7c8976 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.mdx +++ b/packages/grafana-ui/src/components/Badge/Badge.mdx @@ -1,4 +1,4 @@ -import { Meta, Props } from '@storybook/addon-docs/blocks'; +import { Meta, ArgTypes } from '@storybook/blocks'; import { Badge } from './Badge'; @@ -7,4 +7,4 @@ import { Badge } from './Badge'; The badge component adds meta information to other content, for example about release status or new elements. You can add any `Icon` component or use the badge without an icon. - + diff --git a/packages/grafana-ui/src/components/Badge/Badge.story.tsx b/packages/grafana-ui/src/components/Badge/Badge.story.tsx index f19a3dfd48f..f21aa5a038b 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.story.tsx +++ b/packages/grafana-ui/src/components/Badge/Badge.story.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import React from 'react'; import { Badge } from '@grafana/ui'; @@ -8,7 +8,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from './Badge.mdx'; -const meta: ComponentMeta = { +const meta: Meta = { title: 'Data Display/Badge', component: Badge, decorators: [withCenteredStory], @@ -22,7 +22,7 @@ const meta: ComponentMeta = { }, }; -const Template: ComponentStory = (args) => ; +const Template: StoryFn = (args) => ; export const Basic = Template.bind({}); diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx b/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx index e28cf46c99f..1fcde6c371d 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +import { Meta, ArgTypes } from '@storybook/blocks'; import { BarGauge } from './BarGauge'; @@ -45,4 +45,4 @@ const value = { />; ``` - + diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.mdx b/packages/grafana-ui/src/components/BigValue/BigValue.mdx index 06ec7d88e9f..d9a83cd0c08 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.mdx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +import { Meta, ArgTypes } from '@storybook/blocks'; import { BigValue } from './BigValue'; @@ -72,4 +72,4 @@ return ( ### Props - + diff --git a/packages/grafana-ui/src/components/Button/Button.mdx b/packages/grafana-ui/src/components/Button/Button.mdx index a2ba4801337..e4e64d11380 100644 --- a/packages/grafana-ui/src/components/Button/Button.mdx +++ b/packages/grafana-ui/src/components/Button/Button.mdx @@ -1,4 +1,4 @@ -import { Meta, Preview, ArgsTable } from '@storybook/addon-docs/blocks'; +import { Meta, Preview, ArgTypes } from '@storybook/blocks'; import { Button, LinkButton } from './Button'; @@ -14,13 +14,13 @@ If there is no primary action, all `Button` components should be secondary.
@@ -35,13 +35,13 @@ The secondary `Button` is the default button style and can trigger various actio
@@ -53,13 +53,13 @@ Used for triggering a removing or deleting action. Because of its dominant color
@@ -69,18 +69,18 @@ Used for triggering a removing or deleting action. Because of its dominant color
- + ## Links @@ -89,13 +89,13 @@ To add an anchor that looks like a button use the `` component and p
- Small + {'Small'} - Medium + {'Medium'} - Large + {'Large'}
diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx index 478c2e188d7..336304028df 100644 --- a/packages/grafana-ui/src/components/Button/Button.story.tsx +++ b/packages/grafana-ui/src/components/Button/Button.story.tsx @@ -1,4 +1,4 @@ -import { ComponentStory } from '@storybook/react'; +import { StoryFn } from '@storybook/react'; import React from 'react'; import { ComponentSize } from '../../types/size'; @@ -36,7 +36,7 @@ export default { }, }; -export const Examples: ComponentStory = () => { +export const Examples: StoryFn = () => { return ( {allButtonFills.map((buttonFill) => ( @@ -104,7 +104,7 @@ export const Examples: ComponentStory = () => { ); }; -export const Basic: ComponentStory = (args: ButtonProps) =>