Grafana UI: Bump to Storybook 8 (#87722)
* chore(storybook): run yarn dlx storybook@latest upgrade * chore(storybook): remove storybook/blocks patch * chore(yarn): clean up storybook dependencies * feat(storybook): migrate to v8 config via migration codemods * refactor(storybook): update stories to use v8 types via codemod * refactor(storybook): update stories to use preview-api instead of client-api * refactor(storybook): replace mdx usage of ArgsTable with PureArgsTable * refactor(storybook): migrate remaining mdx files to v8 storybook/blocks api * refactor(storybook): clean up mdx imports and blocks component names * chore(storybook): clean up typescript configuration * fix(frontend): align types/react versions across monorepo so grafana ui can be built * fix(storybook): pub back react-docgen-typescript and use ArgTypes so props tables work * chore(storybook): patch blocks package to expose Preview component * revert(storybook): revert changes related to using Canvas component in mdx files * Storybook upgrade: Fix icon typing (#87793) fix iconOptions typing * refactor(storybook): prefer as const over asserting types * revert(storybook): put back correct case in box.mdx --------- Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Jack WestbrookandAshley Harrison authored and 
GitHub committed
1 parent
6127dfd322
commit
65b2834420
101 files changed
+1848
-3042
No files matched your search
@@ -1,253 +0,0 @@
|
||||
diff --git a/dist/index.js b/dist/index.js
|
||||
index f43ca732ad4f1b49e7df81b96b690b1c3f1d9964..216bcf71a6820e5bf9c0f697eb5a217548b3a441 100644
|
||||
--- a/dist/index.js
|
||||
+++ b/dist/index.js
|
||||
@@ -1,68 +1,68 @@
|
||||
-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 __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};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)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var getControlId,getControlSetterButtonId,init_helpers=__esm({"src/controls/helpers.ts"(){getControlId=value2=>`control-${value2.replace(/\s+/g,"-")}`,getControlSetterButtonId=value2=>`set-${value2.replace(/\s+/g,"-")}`}});var Color_exports={};__export(Color_exports,{ColorControl:()=>ColorControl,default:()=>Color_default});var import_react24,import_react_colorful,import_color_convert,import_throttle,import_theming18,import_components16,Wrapper7,PickerTooltip,TooltipContent,Note,Swatches,SwatchColor,swatchBackground,Swatch,Input2,ToggleIcon,ColorSpace,COLOR_SPACES,COLOR_REGEXP,RGB_REGEXP,HSL_REGEXP,HEX_REGEXP,SHORTHEX_REGEXP,ColorPicker,fallbackColor,stringToArgs,parseValue,getRealValue,useColorInput,id,usePresets,ColorControl,Color_default,init_Color=__esm({"src/controls/Color.tsx"(){import_react24=__toESM(require("react")),import_react_colorful=require("react-colorful"),import_color_convert=__toESM(require("color-convert")),import_throttle=__toESM(require("lodash/throttle.js")),import_theming18=require("@storybook/theming"),import_components16=require("@storybook/components");init_helpers();Wrapper7=import_theming18.styled.div({position:"relative",maxWidth:250}),PickerTooltip=(0,import_theming18.styled)(import_components16.WithTooltip)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=import_theming18.styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=(0,import_theming18.styled)(import_components16.TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=import_theming18.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=import_theming18.styled.div(({theme,active})=>({width:16,height:16,boxShadow:active?`${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px`:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:theme.appBorderRadius})),swatchBackground=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,Swatch=({value:value2,active,onClick,style,...props})=>{let backgroundImage=`linear-gradient(${value2}, ${value2}), ${swatchBackground}, linear-gradient(#fff, #fff)`;return import_react24.default.createElement(SwatchColor,{...props,active,onClick,style:{...style,backgroundImage}})},Input2=(0,import_theming18.styled)(import_components16.Form.Input)(({theme})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=(0,import_theming18.styled)(import_components16.Icons)(({theme})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:theme.input.color})),ColorSpace=(ColorSpace2=>(ColorSpace2.RGB="rgb",ColorSpace2.HSL="hsl",ColorSpace2.HEX="hex",ColorSpace2))(ColorSpace||{}),COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker={hex:import_react_colorful.HexColorPicker,rgb:import_react_colorful.RgbaStringColorPicker,hsl:import_react_colorful.HslaStringColorPicker},fallbackColor={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},stringToArgs=value2=>{let match=value2==null?void 0:value2.match(COLOR_REGEXP);if(!match)return[0,0,0,1];let[,x,y,z,a=1]=match;return[x,y,z,a].map(Number)},parseValue=value2=>{if(!value2)return;let valid=!0;if(RGB_REGEXP.test(value2)){let[r,g,b,a]=stringToArgs(value2),[h,s,l]=import_color_convert.default.rgb.hsl([r,g,b])||[0,0,0];return{valid
Line truncated
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:(0,import_polished5.rgba)(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:"grab",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+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 __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};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)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var getControlId,getControlSetterButtonId,init_helpers=__esm({"src/controls/helpers.ts"(){getControlId=value2=>`control-${value2.replace(/\s+/g,"-")}`,getControlSetterButtonId=value2=>`set-${value2.replace(/\s+/g,"-")}`}});var Color_exports={};__export(Color_exports,{ColorControl:()=>ColorControl,default:()=>Color_default});var import_react24,import_react_colorful,import_color_convert,import_throttle,import_theming18,import_components16,Wrapper7,PickerTooltip,TooltipContent,Note,Swatches,SwatchColor,swatchBackground,Swatch,Input2,ToggleIcon,ColorSpace,COLOR_SPACES,COLOR_REGEXP,RGB_REGEXP,HSL_REGEXP,HEX_REGEXP,SHORTHEX_REGEXP,ColorPicker,fallbackColor,stringToArgs,parseValue,getRealValue,useColorInput,id,usePresets,ColorControl,Color_default,init_Color=__esm({"src/controls/Color.tsx"(){import_react24=__toESM(require("react")),import_react_colorful=require("react-colorful"),import_color_convert=__toESM(require("color-convert")),import_throttle=__toESM(require("lodash/throttle.js")),import_theming18=require("@storybook/theming"),import_components16=require("@storybook/components");init_helpers();Wrapper7=import_theming18.styled.div({position:"relative",maxWidth:250}),PickerTooltip=(0,import_theming18.styled)(import_components16.WithTooltip)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=import_theming18.styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=(0,import_theming18.styled)(import_components16.TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=import_theming18.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=import_theming18.styled.div(({theme,active})=>({width:16,height:16,boxShadow:active?`${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px`:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:theme.appBorderRadius})),swatchBackground=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,Swatch=({value:value2,active,onClick,style,...props})=>{let backgroundImage=`linear-gradient(${value2}, ${value2}), ${swatchBackground}, linear-gradient(#fff, #fff)`;return import_react24.default.createElement(SwatchColor,{...props,active,onClick,style:{...style,backgroundImage}})},Input2=(0,import_theming18.styled)(import_components16.Form.Input)(({theme})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=(0,import_theming18.styled)(import_components16.Icons)(({theme})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:theme.input.color})),ColorSpace=(ColorSpace2=>(ColorSpace2.RGB="rgb",ColorSpace2.HSL="hsl",ColorSpace2.HEX="hex",ColorSpace2))(ColorSpace||{}),COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker={hex:import_react_colorful.HexColorPicker,rgb:import_react_colorful.RgbaStringColorPicker,hsl:import_react_colorful.HslaStringColorPicker},fallbackColor={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},stringToArgs=value2=>{let match=value2==null?void 0:value2.match(COLOR_REGEXP);if(!match)return[0,0,0,1];let[,x,y,z,a=1]=match;return[x,y,z,a].map(Number)},parseValue=value2=>{if(!value2)return;let valid=!0;if(RGB_REGEXP.test(value2)){let[r,g,b,a]=stringToArgs(value2),[h,s,l]=import_color_convert.default.rgb.hsl([r,g,b])||[0,0,0];return{valid
Line truncated
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:(0,import_polished5.rgba)(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:"grab",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:"transparent",width:"100%",height:"6px",cursor:"pointer"},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"&::-ms-thumb":{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:50,cursor:"grab",marginTop:0},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:"0"}}})),RangeLabel=import_theming15.styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeCurrentAndMaxLabel=(0,import_theming15.styled)(RangeLabel)(({numberOFDecimalsPlaces,max})=>({width:`${numberOFDecimalsPlaces+max.toString().length*2+3}ch`,textAlign:"right",flexShrink:0})),RangeWrapper=import_theming15.styled.div({display:"flex",alignItems:"center",width:"100%"});function getNumberOfDecimalPlaces(number){let match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return match?Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0)):0}var RangeControl=({name,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{let handleChange=event=>{onChange(parse2(event.target.value))},hasValue=value2!==void 0,numberOFDecimalsPlaces=(0,import_react21.useMemo)(()=>getNumberOfDecimalPlaces(step),[step]);return import_react21.default.createElement(RangeWrapper,null,import_react21.default.createElement(RangeLabel,null,min),import_react21.default.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),import_react21.default.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"," / ",max))};var import_react22=__toESM(require("react")),import_theming16=require("@storybook/theming"),import_components14=require("@storybook/components");init_helpers();var Wrapper6=import_theming16.styled.label({display:"flex"}),MaxLength=import_theming16.styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength})=>{let handleChange=event=>{onChange(event.target.value)},[forceVisible,setForceVisible]=(0,import_react22.useState)(!1),onForceVisible=(0,import_react22.useCallback)(()=>{onChange(""),setForceVisible(!0)},[setForceVisible]);if(value2===void 0)return import_react22.default.createElement(import_components14.Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return import_react22.default.createElement(Wrapper6,null,import_react22.default.createElement(import_components14.Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&import_react22.default.createElement(MaxLength,{isMaxed:(value2==null?void 0:value2.length)===maxLength},(value2==null?void 0:value2.length)??0," / ",maxLength))};var import_react23=__toESM(require("react")),import_theming17=require("@storybook/theming"),import_components15=require("@storybook/components");init_helpers();var FileInput=(0,import_theming17.styled)(import_components15.Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url)})}var FilesControl=({onChange,name,accept="image/*",value:value2})=>{let inputElement=(0,import_react23.useRef)(null);function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2)}return(0,import_react23.useEffect)(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null)},[value2,name]),import_react23.default.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=(0,import_react25.lazy)(()=>Promise.resolve().then(()=>(init_Color(),Color_exports))),ColorControl2=props=>import_react25.default.createElement(import_react25.Suspense,{fallback:import_react25.default.createElement("div",null)},import_react25.default.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl2,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>import_react26.default.createElement(import_react26.default.Fragment,null,"-"),ArgControl=({row,arg,updateArgs,isHovered})=>{let{key,control}=row,[isFocused,setFocused]=(0,import_react26.us
Line truncated
|
||||
-
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
|
||||
- `);let context=(0,import_react41.useContext)(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById())}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]))}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||((_a=parameters.controls)==null?void 0:_a.sort),main=getComponent(props,component);if(storyName)return import_react41.default.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)}}catch(err){mainProps={error:err.message}}return import_react41.default.createElement(ArgsTable,{...mainProps,sort})}if(components2)return import_react41.default.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return import_react41.default.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};var import_react45=__toESM(require("react")),import_client_logger8=require("@storybook/client-logger"),import_ts_dedent4=__toESM(require("ts-dedent"));var import_react42=__toESM(require("react")),import_docs_tools=require("@storybook/docs-tools"),import_telejson=require("telejson");function argsHash(args){return(0,import_telejson.stringify)(args)}var SourceContext=(0,import_react42.createContext)({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=(0,import_react42.useState)({});return(0,import_react42.useEffect)(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id:id2,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;setSources(current=>({...current,[id2]:{...current[id2],[hash]:{code:source,format:format2}}}))};return channel.on(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered)},[]),import_react42.default.createElement(SourceContext.Provider,{value:{sources}},children)};var import_react43=__toESM(require("react")),import_docs_tools2=require("@storybook/docs-tools"),import_client_logger6=require("@storybook/client-logger"),import_ts_dedent2=__toESM(require("ts-dedent"));var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>{var _a,_b;return(_b=(_a=story.parameters.docs)==null?void 0:_a.source)==null?void 0:_b.state}).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources==null?void 0:sources[storyId];return(sourceMap==null?void 0:sourceMap[argsHash(args)])||(sourceMap==null?void 0:sourceMap[UNKNOWN_ARGS_HASH])||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{var _a,_b,_c,_d,_e;let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=((_a=storyContext.parameters.docs)==null?void 0:_a.source)||{},type=typeFromProps||sourceParameters.type||import_docs_tools2.SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===import_docs_tools2.SourceType.DYNAMIC||type===import_docs_tools2.SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";sourceParameters.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
-
|
||||
+ `);let context=(0,import_react41.useContext)(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById())}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]))}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||((_a=parameters.controls)==null?void 0:_a.sort),main=getComponent(props,component);if(storyName)return import_react41.default.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)}}catch(err){mainProps={error:err.message}}return import_react41.default.createElement(ArgsTable,{...mainProps,sort})}if(components2)return import_react41.default.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return import_react41.default.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};var import_react45=__toESM(require("react")),import_client_logger8=require("@storybook/client-logger"),import_ts_dedent4=__toESM(require("ts-dedent"));var import_react42=__toESM(require("react")),import_docs_tools=require("@storybook/docs-tools"),import_telejson=require("telejson");function argsHash(args){return(0,import_telejson.stringify)(args)}var SourceContext=(0,import_react42.createContext)({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=(0,import_react42.useState)({});return(0,import_react42.useEffect)(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id:id2,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;setSources(current=>({...current,[id2]:{...current[id2],[hash]:{code:source,format:format2}}}))};return channel.on(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(import_docs_tools.SNIPPET_RENDERED,handleSnippetRendered)},[]),import_react42.default.createElement(SourceContext.Provider,{value:{sources}},children)};var import_react43=__toESM(require("react")),import_docs_tools2=require("@storybook/docs-tools"),import_client_logger6=require("@storybook/client-logger"),import_ts_dedent2=__toESM(require("ts-dedent"));var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>{var _a,_b;return(_b=(_a=story.parameters.docs)==null?void 0:_a.source)==null?void 0:_b.state}).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources==null?void 0:sources[storyId];return(sourceMap==null?void 0:sourceMap[argsHash(args)])||(sourceMap==null?void 0:sourceMap[UNKNOWN_ARGS_HASH])||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{var _a,_b,_c,_d,_e;let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=((_a=storyContext.parameters.docs)==null?void 0:_a.source)||{},type=typeFromProps||sourceParameters.type||import_docs_tools2.SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===import_docs_tools2.SourceType.DYNAMIC||type===import_docs_tools2.SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";sourceParameters.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
- `),(_b=storyContext.parameters.docs)!=null&&_b.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
-
|
||||
+ `),(_b=storyContext.parameters.docs)!=null&&_b.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
- `),(_c=storyContext.parameters.jsx)!=null&&_c.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
-
|
||||
+ `),(_c=storyContext.parameters.jsx)!=null&&_c.transformSource&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
`);let transformer=transformFromProps??sourceParameters.transform??sourceParameters.transformSource??((_d=storyContext.parameters.docs)==null?void 0:_d.transformSource)??((_e=storyContext.parameters.jsx)==null?void 0:_e.transformSource);return(transformer==null?void 0:transformer(code,storyContext))||code},useSourceProps=(props,docsContext,sourceContext)=>{var _a,_b,_c;let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)stories=[docsContext.resolveOf(of,["story"]).story];else if(stories.length===0)try{stories=[docsContext.storyById()]}catch{}if(!storiesFromIds.every(Boolean))return{error:"Oh no! The source is not available.",state:"none"};let sourceParameters=((_c=(_b=(_a=stories[0])==null?void 0:_a.parameters)==null?void 0:_b.docs)==null?void 0:_c.source)||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;code||(code=stories.map((story,index)=>{var _a2,_b2;if(!story)return"";let storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:storyContext.unmappedArgs,source=getStorySource(story.id,argsForSource,sourceContext);return index===0&&(format2=source.format??((_b2=(_a2=story.parameters.docs)==null?void 0:_a2.source)==null?void 0:_b2.format)??!1),getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform})}).join(`
|
||||
|
||||
-`));let state=getSourceState(stories);return code?{code,format:format2,language,dark,state}:{error:"Oh no! The source is not available.",state}},Source2=props=>{props.id&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
-
|
||||
+`));let state=getSourceState(stories);return code?{code,format:format2,language,dark,state}:{error:"Oh no! The source is not available.",state}},Source2=props=>{props.id&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
- `),props.ids&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`ids\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
-
|
||||
+ `),props.ids&&(0,import_client_logger6.deprecate)(import_ts_dedent2.default`The \`ids\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
- `);let sourceContext=(0,import_react43.useContext)(SourceContext),docsContext=(0,import_react43.useContext)(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return import_react43.default.createElement(Source,{...sourceProps})};var import_react44=__toESM(require("react")),import_client_logger7=require("@storybook/client-logger"),import_ts_dedent3=__toESM(require("ts-dedent"));var getStoryId2=(props,context)=>{let{id:id2,of,meta,story}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(id2)return(0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`id\` is deprecated, please use \`of\` instead.
|
||||
-
|
||||
- Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),id2;let{name}=props;return name?((0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`name\` is deprecated, please use \`of\` instead.
|
||||
-
|
||||
+ `);let sourceContext=(0,import_react43.useContext)(SourceContext),docsContext=(0,import_react43.useContext)(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return import_react43.default.createElement(Source,{...sourceProps})};var import_react44=__toESM(require("react")),import_client_logger7=require("@storybook/client-logger"),import_ts_dedent3=__toESM(require("ts-dedent"));var getStoryId2=(props,context)=>{let{id:id2,of,meta,story}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(id2)return(0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`id\` is deprecated, please use \`of\` instead.
|
||||
+
|
||||
+ Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),id2;let{name}=props;return name?((0,import_client_logger7.deprecate)(import_ts_dedent3.default`Referencing stories by \`name\` is deprecated, please use \`of\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),context.storyIdByName(name)):(story&&(0,import_client_logger7.deprecate)(import_ts_dedent3.default`The \`story\` prop is deprecated, please export your stories from CSF files and reference them with \`of={}\`.
|
||||
|
||||
- Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),meta&&context.referenceMeta(meta,!1),context.resolveOf(of||story||"story",["story"]).story.id)},getStoryProps=(props,story,context)=>{let{parameters={}}=story||{},{docs={}}=parameters,storyParameters=docs.story||{};if(docs.disable)return null;let{inlineStories,iframeHeight}=docs;typeof inlineStories<"u"&&(0,import_client_logger7.deprecate)(import_ts_dedent3.default`The \`docs.inlineStories\` parameter is deprecated, use \`docs.story.inline\` instead.
|
||||
-
|
||||
+ Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),meta&&context.referenceMeta(meta,!1),context.resolveOf(of||story||"story",["story"]).story.id)},getStoryProps=(props,story,context)=>{let{parameters={}}=story||{},{docs={}}=parameters,storyParameters=docs.story||{};if(docs.disable)return null;let{inlineStories,iframeHeight}=docs;typeof inlineStories<"u"&&(0,import_client_logger7.deprecate)(import_ts_dedent3.default`The \`docs.inlineStories\` parameter is deprecated, use \`docs.story.inline\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
|
||||
- `);let inline=props.inline??storyParameters.inline??inlineStories??!1;if(typeof iframeHeight<"u"&&(0,import_client_logger7.deprecate)(import_ts_dedent3.default`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead.
|
||||
-
|
||||
+ `);let inline=props.inline??storyParameters.inline??inlineStories??!1;if(typeof iframeHeight<"u"&&(0,import_client_logger7.deprecate)(import_ts_dedent3.default`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
|
||||
- `),inline){let height2=props.height??storyParameters.height,autoplay=props.autoplay??storyParameters.autoplay??!1;return{story,inline:!0,height:height2,autoplay,forceInitialArgs:!!props.__forceInitialArgs,primary:!!props.__primary,renderStoryToElement:context.renderStoryToElement}}let height=props.height??storyParameters.height??storyParameters.iframeHeight??iframeHeight??"100px";return{story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=(0,import_react44.useContext)(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return import_react44.default.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?import_react44.default.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=import_react45.Children.toArray(children).filter(c=>c.props&&(c.props.id||c.props.name||c.props.of)).map(c=>getStoryId2(c.props,docsContext)),stories=useStories(storyIds,docsContext),isLoading=stories.some(s=>!s),sourceProps=useSourceProps({...mdxSource?{code:decodeURI(mdxSource)}:{ids:storyIds},...props.of&&{of:props.of}},docsContext,sourceContext);if(withSource==="none")return{isLoading,previewProps:props};let layout=layoutProp;return import_react45.Children.forEach(children,child=>{var _a,_b;layout||(layout=(_b=(_a=child==null?void 0:child.props)==null?void 0:_a.parameters)==null?void 0:_b.layout)}),stories.forEach(story=>{var _a,_b;layout||!story||(layout=(story==null?void 0:story.parameters.layout)??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout))}),{isLoading,previewProps:{...props,layout:layout??"padded",withSource:sourceProps,isExpanded:(withSource||sourceProps.state)==="open"}}},Canvas=props=>{var _a,_b,_c,_d,_e,_f,_g,_h,_i,_j;let docsContext=(0,import_react45.useContext)(DocsContext),sourceContext=(0,import_react45.useContext)(SourceContext),{children,of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{isLoading,previewProps}=useDeprecatedPreviewProps(props,docsContext,sourceContext),story,sourceProps,hookError;try{({story}=useOf(of||"story",["story"]))}catch(error){children||(hookError=error)}try{sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext)}catch(error){children||(hookError=error)}if(hookError)throw hookError;if(props.withSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead.
|
||||
-
|
||||
+ `),inline){let height2=props.height??storyParameters.height,autoplay=props.autoplay??storyParameters.autoplay??!1;return{story,inline:!0,height:height2,autoplay,forceInitialArgs:!!props.__forceInitialArgs,primary:!!props.__primary,renderStoryToElement:context.renderStoryToElement}}let height=props.height??storyParameters.height??storyParameters.iframeHeight??iframeHeight??"100px";return{story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=(0,import_react44.useContext)(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return import_react44.default.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?import_react44.default.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=import_react45.Children.toArray(children).filter(c=>c.props&&(c.props.id||c.props.name||c.props.of)).map(c=>getStoryId2(c.props,docsContext)),stories=useStories(storyIds,docsContext),isLoading=stories.some(s=>!s),sourceProps=useSourceProps({...mdxSource?{code:decodeURI(mdxSource)}:{ids:storyIds},...props.of&&{of:props.of}},docsContext,sourceContext);if(withSource==="none")return{isLoading,previewProps:props};let layout=layoutProp;return import_react45.Children.forEach(children,child=>{var _a,_b;layout||(layout=(_b=(_a=child==null?void 0:child.props)==null?void 0:_a.parameters)==null?void 0:_b.layout)}),stories.forEach(story=>{var _a,_b;layout||!story||(layout=(story==null?void 0:story.parameters.layout)??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout))}),{isLoading,previewProps:{...props,layout:layout??"padded",withSource:sourceProps,isExpanded:(withSource||sourceProps.state)==="open"}}},Canvas=props=>{var _a,_b,_c,_d,_e,_f,_g,_h,_i,_j;let docsContext=(0,import_react45.useContext)(DocsContext),sourceContext=(0,import_react45.useContext)(SourceContext),{children,of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{isLoading,previewProps}=useDeprecatedPreviewProps(props,docsContext,sourceContext),story,sourceProps,hookError;try{({story}=useOf(of||"story",["story"]))}catch(error){children||(hookError=error)}try{sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext)}catch(error){children||(hookError=error)}if(hookError)throw hookError;if(props.withSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
||||
- `),props.mdxSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead.
|
||||
-
|
||||
+ `),props.mdxSource&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
||||
- `),(props.isColumn!==void 0||props.columns!==void 0)&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story.
|
||||
-
|
||||
+ `),(props.isColumn!==void 0||props.columns!==void 0)&&(0,import_client_logger8.deprecate)(import_ts_dedent4.default`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
||||
- `),children)return(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
-
|
||||
+ `),children)return(0,import_client_logger8.deprecate)(import_ts_dedent4.default`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
||||
`),isLoading?import_react45.default.createElement(PreviewSkeleton,null):import_react45.default.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??((_b=(_a=story.parameters.docs)==null?void 0:_a.canvas)==null?void 0:_b.layout)??"padded",withToolbar=props.withToolbar??((_d=(_c=story.parameters.docs)==null?void 0:_c.canvas)==null?void 0:_d.withToolbar)??!1,additionalActions=props.additionalActions??((_f=(_e=story.parameters.docs)==null?void 0:_e.canvas)==null?void 0:_f.additionalActions),sourceState=props.sourceState??((_h=(_g=story.parameters.docs)==null?void 0:_g.canvas)==null?void 0:_h.sourceState)??"hidden",className=props.className??((_j=(_i=story.parameters.docs)==null?void 0:_i.canvas)==null?void 0:_j.className);return import_react45.default.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},import_react45.default.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var import_react48=__toESM(require("react")),import_preview_api3=require("@storybook/preview-api");var import_react46=require("react"),import_core_events2=require("@storybook/core-events"),useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=(0,import_react46.useState)(storyContext.globals);return(0,import_react46.useEffect)(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals)};return context.channel.on(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(import_core_events2.GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var import_react47=require("react"),import_core_events3=require("@storybook/core-events"),useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=(0,import_react47.useState)(storyContext.args);(0,import_react47.useEffect)(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args)};return context.channel.on(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(import_core_events3.STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=(0,import_react47.useCallback)(updatedArgs=>context.channel.emit(import_core_events3.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=(0,import_react47.useCallback)(argNames=>context.channel.emit(import_core_events3.RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{var _a;let{of}=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_react48.useContext)(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=((_a=parameters.docs)==null?void 0:_a.controls)||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=(0,import_preview_api3.filterArgTypes)(argTypes,include,exclude);return import_react48.default.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var import_react51=__toESM(require("react")),import_docs_tools3=require("@storybook/docs-tools"),import_client_logger9=require("@storybook/client-logger");var import_react50=__toESM(require("react")),import_markdown_to_jsx2=__toESM(require("markdown-to-jsx")),import_ts_dedent5=__toESM(require("ts-dedent"));var import_react49=__toESM(require("react")),import_core_events4=require("@storybook/core-events"),import_components31=require("@storybook/components"),import_global6=require("@storybook/global"),import_theming27=require("@storybook/theming");var{document:document2}=import_global6.global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=import_react49.default.useContext(DocsContext);return import_react49.default.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return import_react49.default.createElement(import_components31.Code,null,children);let language=className&&className.split("-");return import_react49.default.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(import_core_events4.NAVIGATE_URL,url)}va
Line truncated
|
||||
This is often caused by not wrapping the child in a template string.
|
||||
-
|
||||
+
|
||||
This is invalid:
|
||||
<Markdown>
|
||||
# Some heading
|
||||
@@ -78,4 +78,4 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
||||
</Markdown>
|
||||
`);return import_react50.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;(notes||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_react51.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_react51.default.createElement(Markdown2,null,markdown):null};var import_react62=__toESM(require("react"));var import_react53=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming29=require("@storybook/theming");var import_react52=__toESM(require("react")),import_theming28=require("@storybook/theming"),tocbot=__toESM(require("tocbot")),Wrapper10=import_theming28.styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content2=import_theming28.styled.div(({theme})=>({position:"fixed",top:0,width:"10rem",paddingTop:"4rem",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDec
Line truncated
|
||||
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_react58.default.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react60=__toESM(require("react")),import_theming30=require("@storybook/theming");var import_react59=__toESM(require("react")),import_components37=require("@storybook/components");var Heading2=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react59.default.createElement(import_components37.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react59.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming30.styled)(Heading2)(({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_react60.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_react60.default.createElement(import_react60.default.Fragment,null,import_react60.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react60.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_react61.default.createElement(import_react61.default.Fragment,null,import_react61.default.createElement(Title3,null),import_react61.default.createElement(Subtitle2,null),import_react61.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react61.default.createElement(DescriptionContainer,{of:"story"}):null,import_react61.default.createElement(Primary,null),import_react61.default.createElement(Controls3,null),isSingleStory?null:import_react61.default.createElement(Stories,null))};function Docs({context,docsParameter}){let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return import_react62.default.createElement(Container,{context,theme:docsParameter.theme},import_react62.default.createElement(Page,null))}var import_react63=__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_react63.useRef)();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}function ExternalDocs({projectAnnotat
Line truncated
|
||||
+ `);let storyId=name&&docsContext.storyIdByName(name),story=docsContext.storyById(storyId);return story?import_react58.default.createElement(DocsStory,{of:story.moduleExport,expanded:!1,__primary:!0,withToolbar:!0}):null};var import_react60=__toESM(require("react")),import_theming30=require("@storybook/theming");var import_react59=__toESM(require("react")),import_components37=require("@storybook/components");var Heading2=({children,disableAnchor,...props})=>{if(disableAnchor||typeof children!="string")return import_react59.default.createElement(import_components37.H2,null,children);let tagID=children.toLowerCase().replace(/[^a-z0-9]/gi,"-");return import_react59.default.createElement(HeaderMdx,{as:"h2",id:tagID,...props},children)};var StyledHeading=(0,import_theming30.styled)(Heading2)(({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_react60.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_react60.default.createElement(import_react60.default.Fragment,null,import_react60.default.createElement(StyledHeading,null,title),stories.map(story=>story&&import_react60.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_react61.default.createElement(import_react61.default.Fragment,null,import_react61.default.createElement(Title3,null),import_react61.default.createElement(Subtitle2,null),import_react61.default.createElement(DescriptionContainer,{of:"meta"}),isSingleStory?import_react61.default.createElement(DescriptionContainer,{of:"story"}):null,import_react61.default.createElement(Primary,null),import_react61.default.createElement(Controls3,null),isSingleStory?null:import_react61.default.createElement(Stories,null))};function Docs({context,docsParameter}){let Container=docsParameter.container||DocsContainer,Page=docsParameter.page||DocsPage;return import_react62.default.createElement(Container,{context,theme:docsParameter.theme},import_react62.default.createElement(Page,null))}var import_react63=__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_react63.useRef)();return previewRef.current||(previewRef.current=new ExternalPreview(projectAnnotations)),previewRef.current}function ExternalDocs({projectAnnotat
Line truncated
|
||||
diff --git a/dist/index.mjs b/dist/index.mjs
|
||||
index 2bbe84cbe33947557d2ad5dfca7bee854c1aa145..ae1cc75a2c933caa8b9cb098da58241bebd2e842 100644
|
||||
--- a/dist/index.mjs
|
||||
+++ b/dist/index.mjs
|
||||
@@ -20,71 +20,71 @@ import { stringify } from 'telejson';
|
||||
import * as tocbot from 'tocbot';
|
||||
import { Channel } from '@storybook/channels';
|
||||
|
||||
-var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="light"?"rgba(0,0,0,.01)":"rgba(255,255,255,.01)",borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:"flex",alignItems:"center",justifyContent:"center",padding:20,margin:"25px 0 40px",color:transparentize(.3,theme.color.defaultText),fontSize:theme.typography.size.s2})),EmptyBlock=props=>React17.createElement(Wrapper,{...props,className:"docblock-emptyblock sb-unstyled"});var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,lineHeight:"19px",margin:"25px 0 40px",borderRadius:theme.appBorderRadius,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0","pre.prismjs":{padding:20,background:"inherit"}}));var SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",margin:"25px 0 40px",padding:"20px 20px 20px 22px"})),SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:"60%",[`&:first-child${ignoreSsrWarning}`]:{margin:0}})),SourceSkeleton=()=>React17.createElement(SourceSkeletonWrapper,null,React17.createElement(SourceSkeletonPlaceholder,null),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"30%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}})),Source=({isLoading,error,language,code,dark,format:format2,...rest})=>{if(isLoading)return React17.createElement(SourceSkeleton,null);if(error)return React17.createElement(EmptyBlock,null,error);let syntaxHighlighter=React17.createElement(StyledSyntaxHighlighter,{bordered:!0,copyable:!0,format:format2,language,className:"docblock-source sb-unstyled",...rest},code);if(typeof dark>"u")return syntaxHighlighter;let overrideTheme=dark?themes.dark:themes.light;return React17.createElement(ThemeProvider,{theme:convert(overrideTheme)},syntaxHighlighter)};Source.defaultProps={format:!1};var toGlobalSelector=element=>`& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,breakpoint=600,Title=styled.h1(withReset,({theme})=>({color:theme.color.defaultText,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,lineHeight:"32px",[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.l1,lineHeight:"36px",marginBottom:"16px"}})),Subtitle=styled.h2(withReset,({theme})=>({fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s3,lineHeight:"20px",borderBottom:"none",marginBottom:15,[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.m1,lineHeight:"28px",marginBottom:24},color:transparentize(.25,theme.color.defaultText)})),DocsContent=styled.div(({theme})=>{let reset={fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch"},headers={margin:"20px 0 8px",padding:0,cursor:"text",position:"relative",color:theme.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:"none"},"& code":{fontSize:"inherit"}},code={lineHeight:1,margin:"0 2px",padding:"3px 5px",whiteSpace:"nowrap",borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==="light"?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.3,theme.color.defaultText),backgroundColor:theme.base==="light"?theme.color.lighter:theme.color.border};return {maxWidth:1e3,width:"100%",[toGlobalSelector("a")]:{...reset,fontSize:"inherit",lineHeight:"24px",color:theme.color.secondary,textDecoration:"none","&.absent":{color:"#cc0000"},"&.anchor":{display:"block",paddingLeft:30,marginLeft:-30,cursor:"pointer",position:"absolute",top:0,left:0,bottom:0}},[toGlobalSelector("blockquote")]:{...reset,margin:"16px 0",borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[toGlobalSelector("div")]:reset,[toGlobalSelector("dl")]:{...reset,margin:"16px 0",padding:0,"& dt":{fontSize:"14px",fontWeight:"bold",fontStyle:"italic",padding:0,margin:"16px 0 4px"},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:"0 0 16px",padding:"0 15px"},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}},[toGlobalSelector("h1")]:{...reset,...headers,fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.bold},[toGloba
Line truncated
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:rgba(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:"grab",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="light"?"rgba(0,0,0,.01)":"rgba(255,255,255,.01)",borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:"flex",alignItems:"center",justifyContent:"center",padding:20,margin:"25px 0 40px",color:transparentize(.3,theme.color.defaultText),fontSize:theme.typography.size.s2})),EmptyBlock=props=>React17.createElement(Wrapper,{...props,className:"docblock-emptyblock sb-unstyled"});var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,lineHeight:"19px",margin:"25px 0 40px",borderRadius:theme.appBorderRadius,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0","pre.prismjs":{padding:20,background:"inherit"}}));var SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",margin:"25px 0 40px",padding:"20px 20px 20px 22px"})),SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:"60%",[`&:first-child${ignoreSsrWarning}`]:{margin:0}})),SourceSkeleton=()=>React17.createElement(SourceSkeletonWrapper,null,React17.createElement(SourceSkeletonPlaceholder,null),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"30%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}})),Source=({isLoading,error,language,code,dark,format:format2,...rest})=>{if(isLoading)return React17.createElement(SourceSkeleton,null);if(error)return React17.createElement(EmptyBlock,null,error);let syntaxHighlighter=React17.createElement(StyledSyntaxHighlighter,{bordered:!0,copyable:!0,format:format2,language,className:"docblock-source sb-unstyled",...rest},code);if(typeof dark>"u")return syntaxHighlighter;let overrideTheme=dark?themes.dark:themes.light;return React17.createElement(ThemeProvider,{theme:convert(overrideTheme)},syntaxHighlighter)};Source.defaultProps={format:!1};var toGlobalSelector=element=>`& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,breakpoint=600,Title=styled.h1(withReset,({theme})=>({color:theme.color.defaultText,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,lineHeight:"32px",[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.l1,lineHeight:"36px",marginBottom:"16px"}})),Subtitle=styled.h2(withReset,({theme})=>({fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s3,lineHeight:"20px",borderBottom:"none",marginBottom:15,[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.m1,lineHeight:"28px",marginBottom:24},color:transparentize(.25,theme.color.defaultText)})),DocsContent=styled.div(({theme})=>{let reset={fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch"},headers={margin:"20px 0 8px",padding:0,cursor:"text",position:"relative",color:theme.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:"none"},"& code":{fontSize:"inherit"}},code={lineHeight:1,margin:"0 2px",padding:"3px 5px",whiteSpace:"nowrap",borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==="light"?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.3,theme.color.defaultText),backgroundColor:theme.base==="light"?theme.color.lighter:theme.color.border};return {maxWidth:1e3,width:"100%",[toGlobalSelector("a")]:{...reset,fontSize:"inherit",lineHeight:"24px",color:theme.color.secondary,textDecoration:"none","&.absent":{color:"#cc0000"},"&.anchor":{display:"block",paddingLeft:30,marginLeft:-30,cursor:"pointer",position:"absolute",top:0,left:0,bottom:0}},[toGlobalSelector("blockquote")]:{...reset,margin:"16px 0",borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[toGlobalSelector("div")]:reset,[toGlobalSelector("dl")]:{...reset,margin:"16px 0",padding:0,"& dt":{fontSize:"14px",fontWeight:"bold",fontStyle:"italic",padding:0,margin:"16px 0 4px"},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:"0 0 16px",padding:"0 15px"},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}},[toGlobalSelector("h1")]:{...reset,...headers,fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.bold},[toGloba
Line truncated
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:rgba(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:"grab",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:"transparent",width:"100%",height:"6px",cursor:"pointer"},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"&::-ms-thumb":{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:50,cursor:"grab",marginTop:0},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:"0"}}})),RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeCurrentAndMaxLabel=styled(RangeLabel)(({numberOFDecimalsPlaces,max})=>({width:`${numberOFDecimalsPlaces+max.toString().length*2+3}ch`,textAlign:"right",flexShrink:0})),RangeWrapper=styled.div({display:"flex",alignItems:"center",width:"100%"});function getNumberOfDecimalPlaces(number){let match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return match?Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0)):0}var RangeControl=({name,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{let handleChange=event=>{onChange(parse2(event.target.value));},hasValue=value2!==void 0,numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React17.createElement(RangeWrapper,null,React17.createElement(RangeLabel,null,min),React17.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),React17.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"," / ",max))};var Wrapper6=styled.label({display:"flex"}),MaxLength=styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength})=>{let handleChange=event=>{onChange(event.target.value);},[forceVisible,setForceVisible]=useState(!1),onForceVisible=useCallback(()=>{onChange(""),setForceVisible(!0);},[setForceVisible]);if(value2===void 0)return React17.createElement(Form.Button,{id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return React17.createElement(Wrapper6,null,React17.createElement(Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&React17.createElement(MaxLength,{isMaxed:value2?.length===maxLength},value2?.length??0," / ",maxLength))};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url);});}var FilesControl=({onChange,name,accept="image/*",value:value2})=>{let inputElement=useRef(null);function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2);}return useEffect(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null);},[value2,name]),React17.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=lazy(()=>import('./Color-6VNJS4EI.mjs')),ColorControl=props=>React17.createElement(Suspense,{fallback:React17.createElement("div",null)},React17.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>React17.createElement(React17.Fragment,null,"-"),ArgControl=({row,arg,updateArgs,isHovered})=>{let{key,control}=row,[isFocused,setFocused]=useState(!1),[boxedValue,setBoxedValue]=useState({value:arg});useEffect(()=>{isFocused||setBoxedValue({value:arg});},[isFocused,arg]);let onChange=useCallback(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=useCallback(()=>setFocused(!1),[]),onFocus=useCallback(()=>setFocused(!0),[]);if(!control||control.disable)return isHovered?React17.createElement(Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",withArrow:!0},"Setup controls"):React17.createElement(NoControl,null);let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React17.createElement(Control,{...props,...control,controlType:control.type})};var Name=styled.span({fontWeight:"bold"}),Required=styled.span(({theme})=>({color:theme.color.negative,fontFamily:theme.typography.fonts.mono,cursor:"help"})),Description=styled.div(({t
Line truncated
|
||||
-
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block
|
||||
- `);let context=useContext(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById());}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]));}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||parameters.controls?.sort,main=getComponent(props,component);if(storyName)return React17.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)};}catch(err){mainProps={error:err.message};}return React17.createElement(ArgsTable,{...mainProps,sort})}if(components2)return React17.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return React17.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};function argsHash(args){return stringify(args)}var SourceContext=createContext({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState({});return useEffect(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;setSources(current=>({...current,[id]:{...current[id],[hash]:{code:source,format:format2}}}));};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React17.createElement(SourceContext.Provider,{value:{sources}},children)};var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>story.parameters.docs?.source?.state).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources?.[storyId];return sourceMap?.[argsHash(args)]||sourceMap?.[UNKNOWN_ARGS_HASH]||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=storyContext.parameters.docs?.source||{},type=typeFromProps||sourceParameters.type||SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===SourceType.DYNAMIC||type===SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";return sourceParameters.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
-
|
||||
+ `);let context=useContext(DocsContext),parameters,component,subcomponents;try{({parameters,component,subcomponents}=context.storyById());}catch{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");({projectAnnotations:{parameters}}=context.resolveOf(of,["component"]));}let{include,exclude,components:components2,sort:sortProp}=props,{story:storyName}=props,sort=sortProp||parameters.controls?.sort,main=getComponent(props,component);if(storyName)return React17.createElement(StoryTable,{...props,component:main,subcomponents,sort});if(!components2&&!subcomponents){let mainProps;try{mainProps={rows:extractComponentArgTypes2(main,parameters,include,exclude)};}catch(err){mainProps={error:err.message};}return React17.createElement(ArgsTable,{...mainProps,sort})}if(components2)return React17.createElement(ComponentsTable,{...props,components:components2,sort,parameters});let mainLabel=getComponentName(main);return React17.createElement(ComponentsTable,{...props,components:{[mainLabel]:main,...subcomponents},sort,parameters})};ArgsTable2.defaultProps={of:PRIMARY_STORY};function argsHash(args){return stringify(args)}var SourceContext=createContext({sources:{}}),UNKNOWN_ARGS_HASH="--unknown--",SourceContainer=({children,channel})=>{let[sources,setSources]=useState({});return useEffect(()=>{let handleSnippetRendered=(idOrEvent,inputSource=null,inputFormat=!1)=>{let{id,args=void 0,source,format:format2}=typeof idOrEvent=="string"?{id:idOrEvent,source:inputSource,format:inputFormat}:idOrEvent,hash=args?argsHash(args):UNKNOWN_ARGS_HASH;setSources(current=>({...current,[id]:{...current[id],[hash]:{code:source,format:format2}}}));};return channel.on(SNIPPET_RENDERED,handleSnippetRendered),()=>channel.off(SNIPPET_RENDERED,handleSnippetRendered)},[]),React17.createElement(SourceContext.Provider,{value:{sources}},children)};var SourceState=(SourceState2=>(SourceState2.OPEN="open",SourceState2.CLOSED="closed",SourceState2.NONE="none",SourceState2))(SourceState||{}),getSourceState=stories=>{let states=stories.map(story=>story.parameters.docs?.source?.state).filter(Boolean);return states.length===0?"closed":states[0]},getStorySource=(storyId,args,sourceContext)=>{let{sources}=sourceContext,sourceMap=sources?.[storyId];return sourceMap?.[argsHash(args)]||sourceMap?.[UNKNOWN_ARGS_HASH]||{code:""}},getSnippet=({snippet,storyContext,typeFromProps,transformFromProps})=>{let{__isArgsStory:isArgsStory}=storyContext.parameters,sourceParameters=storyContext.parameters.docs?.source||{},type=typeFromProps||sourceParameters.type||SourceType.AUTO;if(sourceParameters.code!==void 0)return sourceParameters.code;let code=type===SourceType.DYNAMIC||type===SourceType.AUTO&&snippet&&isArgsStory?snippet:sourceParameters.originalSource||"";return sourceParameters.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
- `),storyContext.parameters.docs?.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
-
|
||||
+ `),storyContext.parameters.docs?.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
- `),storyContext.parameters.jsx?.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
-
|
||||
+ `),storyContext.parameters.jsx?.transformSource&&deprecate(dedent2`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
`),(transformFromProps??sourceParameters.transform??sourceParameters.transformSource??storyContext.parameters.docs?.transformSource??storyContext.parameters.jsx?.transformSource)?.(code,storyContext)||code},useSourceProps=(props,docsContext,sourceContext)=>{let storyIds=props.ids||(props.id?[props.id]:[]),storiesFromIds=useStories(storyIds,docsContext),stories=storiesFromIds,{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(of)stories=[docsContext.resolveOf(of,["story"]).story];else if(stories.length===0)try{stories=[docsContext.storyById()];}catch{}if(!storiesFromIds.every(Boolean))return {error:"Oh no! The source is not available.",state:"none"};let sourceParameters=stories[0]?.parameters?.docs?.source||{},{code}=props,format2=props.format??sourceParameters.format,language=props.language??sourceParameters.language??"jsx",dark=props.dark??sourceParameters.dark??!1;code||(code=stories.map((story,index)=>{if(!story)return "";let storyContext=docsContext.getStoryContext(story),argsForSource=props.__forceInitialArgs?storyContext.initialArgs:storyContext.unmappedArgs,source=getStorySource(story.id,argsForSource,sourceContext);return index===0&&(format2=source.format??story.parameters.docs?.source?.format??!1),getSnippet({snippet:source.code,storyContext:{...storyContext,args:argsForSource},typeFromProps:props.type,transformFromProps:props.transform})}).join(`
|
||||
|
||||
-`));let state=getSourceState(stories);return code?{code,format:format2,language,dark,state}:{error:"Oh no! The source is not available.",state}},Source2=props=>{props.id&&deprecate(dedent2`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
-
|
||||
+`));let state=getSourceState(stories);return code?{code,format:format2,language,dark,state}:{error:"Oh no! The source is not available.",state}},Source2=props=>{props.id&&deprecate(dedent2`The \`id\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
- `),props.ids&&deprecate(dedent2`The \`ids\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
-
|
||||
+ `),props.ids&&deprecate(dedent2`The \`ids\` prop on Source is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
|
||||
- `);let sourceContext=useContext(SourceContext),docsContext=useContext(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return React17.createElement(Source,{...sourceProps})};var getStoryId2=(props,context)=>{let{id,of,meta,story}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(id)return deprecate(dedent2`Referencing stories by \`id\` is deprecated, please use \`of\` instead.
|
||||
-
|
||||
- Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),id;let{name}=props;return name?(deprecate(dedent2`Referencing stories by \`name\` is deprecated, please use \`of\` instead.
|
||||
-
|
||||
+ `);let sourceContext=useContext(SourceContext),docsContext=useContext(DocsContext),{state,...sourceProps}=useSourceProps(props,docsContext,sourceContext);return React17.createElement(Source,{...sourceProps})};var getStoryId2=(props,context)=>{let{id,of,meta,story}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");if(id)return deprecate(dedent2`Referencing stories by \`id\` is deprecated, please use \`of\` instead.
|
||||
+
|
||||
+ Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),id;let{name}=props;return name?(deprecate(dedent2`Referencing stories by \`name\` is deprecated, please use \`of\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),context.storyIdByName(name)):(story&&deprecate(dedent2`The \`story\` prop is deprecated, please export your stories from CSF files and reference them with \`of={}\`.
|
||||
|
||||
- Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),meta&&context.referenceMeta(meta,!1),context.resolveOf(of||story||"story",["story"]).story.id)},getStoryProps=(props,story,context)=>{let{parameters={}}=story||{},{docs={}}=parameters,storyParameters=docs.story||{};if(docs.disable)return null;let{inlineStories,iframeHeight}=docs;typeof inlineStories<"u"&&deprecate(dedent2`The \`docs.inlineStories\` parameter is deprecated, use \`docs.story.inline\` instead.
|
||||
-
|
||||
+ Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`),meta&&context.referenceMeta(meta,!1),context.resolveOf(of||story||"story",["story"]).story.id)},getStoryProps=(props,story,context)=>{let{parameters={}}=story||{},{docs={}}=parameters,storyParameters=docs.story||{};if(docs.disable)return null;let{inlineStories,iframeHeight}=docs;typeof inlineStories<"u"&&deprecate(dedent2`The \`docs.inlineStories\` parameter is deprecated, use \`docs.story.inline\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
|
||||
- `);let inline=props.inline??storyParameters.inline??inlineStories??!1;if(typeof iframeHeight<"u"&&deprecate(dedent2`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead.
|
||||
-
|
||||
+ `);let inline=props.inline??storyParameters.inline??inlineStories??!1;if(typeof iframeHeight<"u"&&deprecate(dedent2`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
|
||||
- `),inline){let height2=props.height??storyParameters.height,autoplay=props.autoplay??storyParameters.autoplay??!1;return {story,inline:!0,height:height2,autoplay,forceInitialArgs:!!props.__forceInitialArgs,primary:!!props.__primary,renderStoryToElement:context.renderStoryToElement}}let height=props.height??storyParameters.height??storyParameters.iframeHeight??iframeHeight??"100px";return {story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=useContext(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return React17.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?React17.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=Children.toArray(children).filter(c=>c.props&&(c.props.id||c.props.name||c.props.of)).map(c=>getStoryId2(c.props,docsContext)),stories=useStories(storyIds,docsContext),isLoading=stories.some(s=>!s),sourceProps=useSourceProps({...mdxSource?{code:decodeURI(mdxSource)}:{ids:storyIds},...props.of&&{of:props.of}},docsContext,sourceContext);if(withSource==="none")return {isLoading,previewProps:props};let layout=layoutProp;return Children.forEach(children,child=>{layout||(layout=child?.props?.parameters?.layout);}),stories.forEach(story=>{layout||!story||(layout=story?.parameters.layout??story.parameters.docs?.canvas?.layout);}),{isLoading,previewProps:{...props,layout:layout??"padded",withSource:sourceProps,isExpanded:(withSource||sourceProps.state)==="open"}}},Canvas=props=>{let docsContext=useContext(DocsContext),sourceContext=useContext(SourceContext),{children,of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{isLoading,previewProps}=useDeprecatedPreviewProps(props,docsContext,sourceContext),story,sourceProps,hookError;try{({story}=useOf(of||"story",["story"]));}catch(error){children||(hookError=error);}try{sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext);}catch(error){children||(hookError=error);}if(hookError)throw hookError;if(props.withSource&&deprecate(dedent2`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead.
|
||||
-
|
||||
+ `),inline){let height2=props.height??storyParameters.height,autoplay=props.autoplay??storyParameters.autoplay??!1;return {story,inline:!0,height:height2,autoplay,forceInitialArgs:!!props.__forceInitialArgs,primary:!!props.__primary,renderStoryToElement:context.renderStoryToElement}}let height=props.height??storyParameters.height??storyParameters.iframeHeight??iframeHeight??"100px";return {story,inline:!1,height,primary:!!props.__primary}},Story2=(props={__forceInitialArgs:!1,__primary:!1})=>{let context=useContext(DocsContext),storyId=getStoryId2(props,context),story=useStory(storyId,context);if(!story)return React17.createElement(StorySkeleton,null);let storyProps=getStoryProps(props,story,context);return storyProps?React17.createElement(Story,{...storyProps}):null};var useDeprecatedPreviewProps=({withSource,mdxSource,children,layout:layoutProp,...props},docsContext,sourceContext)=>{let storyIds=Children.toArray(children).filter(c=>c.props&&(c.props.id||c.props.name||c.props.of)).map(c=>getStoryId2(c.props,docsContext)),stories=useStories(storyIds,docsContext),isLoading=stories.some(s=>!s),sourceProps=useSourceProps({...mdxSource?{code:decodeURI(mdxSource)}:{ids:storyIds},...props.of&&{of:props.of}},docsContext,sourceContext);if(withSource==="none")return {isLoading,previewProps:props};let layout=layoutProp;return Children.forEach(children,child=>{layout||(layout=child?.props?.parameters?.layout);}),stories.forEach(story=>{layout||!story||(layout=story?.parameters.layout??story.parameters.docs?.canvas?.layout);}),{isLoading,previewProps:{...props,layout:layout??"padded",withSource:sourceProps,isExpanded:(withSource||sourceProps.state)==="open"}}},Canvas=props=>{let docsContext=useContext(DocsContext),sourceContext=useContext(SourceContext),{children,of,source}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{isLoading,previewProps}=useDeprecatedPreviewProps(props,docsContext,sourceContext),story,sourceProps,hookError;try{({story}=useOf(of||"story",["story"]));}catch(error){children||(hookError=error);}try{sourceProps=useSourceProps({...source,...of&&{of}},docsContext,sourceContext);}catch(error){children||(hookError=error);}if(hookError)throw hookError;if(props.withSource&&deprecate(dedent2`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
||||
- `),props.mdxSource&&deprecate(dedent2`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead.
|
||||
-
|
||||
+ `),props.mdxSource&&deprecate(dedent2`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
||||
- `),(props.isColumn!==void 0||props.columns!==void 0)&&deprecate(dedent2`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story.
|
||||
-
|
||||
+ `),(props.isColumn!==void 0||props.columns!==void 0)&&deprecate(dedent2`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
||||
- `),children)return deprecate(dedent2`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
-
|
||||
+ `),children)return deprecate(dedent2`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story.
|
||||
+
|
||||
Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block
|
||||
`),isLoading?React17.createElement(PreviewSkeleton,null):React17.createElement(Preview,{...previewProps},children);let layout=props.layout??story.parameters.layout??story.parameters.docs?.canvas?.layout??"padded",withToolbar=props.withToolbar??story.parameters.docs?.canvas?.withToolbar??!1,additionalActions=props.additionalActions??story.parameters.docs?.canvas?.additionalActions,sourceState=props.sourceState??story.parameters.docs?.canvas?.sourceState??"hidden",className=props.className??story.parameters.docs?.canvas?.className;return React17.createElement(Preview,{withSource:sourceState==="none"?void 0:sourceProps,isExpanded:sourceState==="shown",withToolbar,additionalActions,className,layout},React17.createElement(Story2,{of:of||story.moduleExport,meta:props.meta,...props.story}))};var useGlobals2=(story,context)=>{let storyContext=context.getStoryContext(story),[globals,setGlobals]=useState(storyContext.globals);return useEffect(()=>{let onGlobalsUpdated=changed=>{setGlobals(changed.globals);};return context.channel.on(GLOBALS_UPDATED,onGlobalsUpdated),()=>context.channel.off(GLOBALS_UPDATED,onGlobalsUpdated)},[context.channel]),[globals]};var useArgs2=(story,context)=>{let result=useArgsIfDefined(story,context);if(!result)throw new Error("No result when story was defined");return result},useArgsIfDefined=(story,context)=>{let storyContext=story?context.getStoryContext(story):{args:{}},{id:storyId}=story||{id:"none"},[args,setArgs]=useState(storyContext.args);useEffect(()=>{let onArgsUpdated=changed=>{changed.storyId===storyId&&setArgs(changed.args);};return context.channel.on(STORY_ARGS_UPDATED,onArgsUpdated),()=>context.channel.off(STORY_ARGS_UPDATED,onArgsUpdated)},[storyId,context.channel]);let updateArgs=useCallback(updatedArgs=>context.channel.emit(UPDATE_STORY_ARGS,{storyId,updatedArgs}),[storyId,context.channel]),resetArgs=useCallback(argNames=>context.channel.emit(RESET_STORY_ARGS,{storyId,argNames}),[storyId,context.channel]);return story&&[args,updateArgs,resetArgs]};var Controls3=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let context=useContext(DocsContext),{story}=context.resolveOf(of||"story",["story"]),{parameters,argTypes}=story,controlsParameters=parameters.docs?.controls||{},include=props.include??controlsParameters.include,exclude=props.exclude??controlsParameters.exclude,sort=props.sort??controlsParameters.sort,[args,updateArgs,resetArgs]=useArgs2(story,context),[globals]=useGlobals2(story,context),filteredArgTypes=filterArgTypes(argTypes,include,exclude);return React17.createElement(ArgsTable,{rows:filteredArgTypes,args,globals,updateArgs,resetArgs,sort})};var {document:document2}=global,assertIsFn=val=>{if(typeof val!="function")throw new Error(`Expected story function, got: ${val}`);return val},AddContext=props=>{let{children,...rest}=props,parentContext=React17.useContext(DocsContext);return React17.createElement(DocsContext.Provider,{value:{...parentContext,...rest}},children)},CodeOrSourceMdx=({className,children,...rest})=>{if(typeof className!="string"&&(typeof children!="string"||!children.match(/[\n\r]/g)))return React17.createElement(Code,null,children);let language=className&&className.split("-");return React17.createElement(Source,{language:language&&language[1]||"plaintext",format:!1,code:children,...rest})};function navigate(context,url){context.channel.emit(NAVIGATE_URL,url);}var A=components.a,AnchorInPage=({hash,children})=>{let context=useContext(DocsContext);return React17.createElement(A,{href:hash,target:"_self",onClick:event=>{let id=hash.substring(1);document2.getElementById(id)&&navigate(context,hash);}},children)},AnchorMdx=props=>{let{href,target,children,...rest}=props,context=useContext(DocsContext);if(href){if(href.startsWith("#"))return React17.createElement(AnchorInPage,{hash:href},children);if(target!=="_blank"&&!href.startsWith("https://"))return React17.createElement(A,{href,onClick:event=>{event.button===0&&!event.altKey&&!event.ctrlKey&&!event.metaKey&&!event.shiftKey&&(event.preventDefault(),navigate(context,event.currentTarget.getAttribute("href")));},target,...rest},children)}return React17.createElement(A,{...props})},SUPPORTED_MDX_HEADERS=["h1","h2","h3","h4","h5","h6"],OcticonHeaders=SUPPORTED_MDX_HEADERS.reduce((acc,headerType)=>({...acc,[headerType]:styled(headerType)({"& svg":{position:"relative",top:"-0.1em",visibility:"hidden"},"&:hover svg":{visibility:"visible"}})}),{}),OcticonAnchor=styled.a(()=>({float:"left",lineHeight:"inherit",paddingRight:"10px",marginLeft:"-24px",color:"inherit"})),HeaderWithOcticonAnchor=({as,id,children,...rest})=>{let context=useContext(DocsContext),OcticonHeader=OcticonHeaders[as],hash=`#${id}`;return React17.createElement(OcticonHeader,{id,...rest},React17.createElement(OcticonAnchor,{"aria-hidden":"true",href:hash,tabIndex:-1,target:"_self",onClick:event=>{document2.getElementById(id)&&navigate(context,hash);
Line truncated
|
||||
This is often caused by not wrapping the child in a template string.
|
||||
-
|
||||
+
|
||||
This is invalid:
|
||||
<Markdown>
|
||||
# Some heading
|
||||
@@ -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 Heading2=({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(Heading2)(({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(Title3,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))};function Docs({context,docsParameter}){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}function 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 Wrapper10=({children})=>React17.createElement("div",{style:{fontFamily:"sans-serif"}},ch
Line truncated
|
||||
|
||||
-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, Heading2 as Heading, IconGallery, IconItem, Markdown2 as Markdown, Meta, 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, Title3 as Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper10 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, Heading2 as Heading, IconGallery, IconItem, Markdown2 as Markdown, Meta, 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, Title3 as Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper10 as Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractComponentArgTypes2 as extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId2 as getStoryId, getStoryProps, parse2 as parse, parseDate, parseTime, useOf, useSourceProps };
|
||||
@@ -0,0 +1,142 @@
|
||||
diff --git a/dist/index.d.ts b/dist/index.d.ts
|
||||
index 7b39452a599b65541bc07362ae68599bd39820f1..871cf38c255cfb05f8d694888d48ad722eac1275 100644
|
||||
--- a/dist/index.d.ts
|
||||
+++ b/dist/index.d.ts
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Conditional, DocsContextProps, PreparedStory, ModuleExports, Renderer as Renderer$1, Args as Args$1, StoryId, ModuleExport, StoryContextForLoaders, ResolvedModuleExportType, ResolvedModuleExportFromType, Parameters as Parameters$1, ProjectAnnotations, BaseAnnotations, ComponentTitle } from '@storybook/types';
|
||||
export { DocsContextProps } from '@storybook/types';
|
||||
-import React, { ComponentProps, FunctionComponent, ReactNode, FC, PropsWithChildren, Context, ReactElement } from 'react';
|
||||
+import React, { ComponentProps, FunctionComponent, FC, ReactNode, PropsWithChildren, Context, ReactElement } from 'react';
|
||||
import { Renderer } from '@storybook/csf';
|
||||
import { PropDescriptor } from '@storybook/preview-api';
|
||||
import { SupportedLanguage, SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from '@storybook/components';
|
||||
@@ -53,6 +53,12 @@ interface PreviewProps {
|
||||
children?: ReactNode;
|
||||
}
|
||||
type Layout = 'padded' | 'fullscreen' | 'centered';
|
||||
+/**
|
||||
+ * A preview component for showing one or more component `Story`
|
||||
+ * items. The preview also shows the source for the component
|
||||
+ * as a drop-down.
|
||||
+ */
|
||||
+declare const Preview: FC<PreviewProps>;
|
||||
|
||||
interface ArgType {
|
||||
name?: string;
|
||||
@@ -632,4 +638,4 @@ type ColorProps = ColorControlProps;
|
||||
declare const LazyColorControl: React.LazyExoticComponent<React.FC<ColorControlProps>>;
|
||||
declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => React.JSX.Element;
|
||||
|
||||
-export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgTypes, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, Control, ControlProps, ControlType, Controls, DateConfig, DateControl, DateProps, DateValue, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContainerProps, DocsContext, DocsPage, DocsProps, DocsStory, DocsStoryProps, ExternalDocs, ExternalDocsContainer, ExternalDocsProps, FilesControl, FilesControlProps, HeaderMdx, HeadersMdx, Heading, HeadingProps, IconGallery, IconItem, Markdown, Meta, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Of, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceProps, Stories, Story, StoryProps, StorySources, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractTitle, format, formatDate, formatTime, getStoryId, getStoryProps, parse, parseDate, parseTime, useOf, useSourceProps };
|
||||
+export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgTypes, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, Control, ControlProps, ControlType, Controls, DateConfig, DateControl, DateProps, DateValue, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContainerProps, DocsContext, DocsPage, DocsProps, DocsStory, DocsStoryProps, ExternalDocs, ExternalDocsContainer, ExternalDocsProps, FilesControl, FilesControlProps, HeaderMdx, HeadersMdx, Heading, HeadingProps, IconGallery, IconItem, Markdown, Meta, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Of, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Preview, Primary, ArgsTable as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceProps, Stories, Story, StoryProps, StorySources, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractTitle, format, formatDate, formatTime, getStoryId, getStoryProps, parse, parseDate, parseTime, useOf, useSourceProps };
|
||||
diff --git a/dist/index.js b/dist/index.js
|
||||
index cec0b433bf4c30f95d12ed9568fdf166edd64b28..3c23390ec80818708c2d15a5fbc825d7501baf56 100644
|
||||
--- a/dist/index.js
|
||||
+++ b/dist/index.js
|
||||
@@ -1,24 +1,24 @@
|
||||
-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 __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};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)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var getControlId,getControlSetterButtonId,init_helpers=__esm({"src/controls/helpers.ts"(){getControlId=value2=>`control-${value2.replace(/\s+/g,"-")}`,getControlSetterButtonId=value2=>`set-${value2.replace(/\s+/g,"-")}`}});var Color_exports={};__export(Color_exports,{ColorControl:()=>ColorControl,default:()=>Color_default});var import_react24,import_react_colorful,import_color_convert,import_throttle,import_theming18,import_components15,import_icons5,Wrapper8,PickerTooltip,TooltipContent,Note,Swatches,SwatchColor,swatchBackground,Swatch,Input2,ToggleIcon,ColorSpace,COLOR_SPACES,COLOR_REGEXP,RGB_REGEXP,HSL_REGEXP,HEX_REGEXP,SHORTHEX_REGEXP,ColorPicker,fallbackColor,stringToArgs,parseValue,getRealValue,useColorInput,id,usePresets,ColorControl,Color_default,init_Color=__esm({"src/controls/Color.tsx"(){import_react24=__toESM(require("react")),import_react_colorful=require("react-colorful"),import_color_convert=__toESM(require("color-convert")),import_throttle=__toESM(require("lodash/throttle.js")),import_theming18=require("@storybook/theming"),import_components15=require("@storybook/components");init_helpers();import_icons5=require("@storybook/icons"),Wrapper8=import_theming18.styled.div({position:"relative",maxWidth:250}),PickerTooltip=(0,import_theming18.styled)(import_components15.WithTooltip)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=import_theming18.styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=(0,import_theming18.styled)(import_components15.TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=import_theming18.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=import_theming18.styled.div(({theme,active})=>({width:16,height:16,boxShadow:active?`${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px`:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:theme.appBorderRadius})),swatchBackground=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,Swatch=({value:value2,active,onClick,style,...props})=>{let backgroundImage=`linear-gradient(${value2}, ${value2}), ${swatchBackground}, linear-gradient(#fff, #fff)`;return import_react24.default.createElement(SwatchColor,{...props,active,onClick,style:{...style,backgroundImage}})},Input2=(0,import_theming18.styled)(import_components15.Form.Input)(({theme})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=(0,import_theming18.styled)(import_icons5.MarkupIcon)(({theme})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:theme.input.color})),ColorSpace=(ColorSpace2=>(ColorSpace2.RGB="rgb",ColorSpace2.HSL="hsl",ColorSpace2.HEX="hex",ColorSpace2))(ColorSpace||{}),COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker={hex:import_react_colorful.HexColorPicker,rgb:import_react_colorful.RgbaStringColorPicker,hsl:import_react_colorful.HslaStringColorPicker},fallbackColor={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},stringToArgs=value2=>{let match=value2?.match(COLOR_REGEXP);if(!match)return[0,0,0,1];let[,x,y,z,a=1]=match;return[x,y,z,a].map(Number)},parseValue=value2=>{if(!value2)return;let valid=!0;if(RGB_REGEXP.test(value2)){let[r,g,b,a]=stringToArgs(value2),[h,s,l]=import_color_convert.default.rg
Line truncated
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:(0,import_polished5.rgba)(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:"grab",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+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 __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};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)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var getControlId,getControlSetterButtonId,init_helpers=__esm({"src/controls/helpers.ts"(){getControlId=value2=>`control-${value2.replace(/\s+/g,"-")}`,getControlSetterButtonId=value2=>`set-${value2.replace(/\s+/g,"-")}`}});var Color_exports={};__export(Color_exports,{ColorControl:()=>ColorControl,default:()=>Color_default});var import_react24,import_react_colorful,import_color_convert,import_throttle,import_theming18,import_components15,import_icons5,Wrapper8,PickerTooltip,TooltipContent,Note,Swatches,SwatchColor,swatchBackground,Swatch,Input2,ToggleIcon,ColorSpace,COLOR_SPACES,COLOR_REGEXP,RGB_REGEXP,HSL_REGEXP,HEX_REGEXP,SHORTHEX_REGEXP,ColorPicker,fallbackColor,stringToArgs,parseValue,getRealValue,useColorInput,id,usePresets,ColorControl,Color_default,init_Color=__esm({"src/controls/Color.tsx"(){import_react24=__toESM(require("react")),import_react_colorful=require("react-colorful"),import_color_convert=__toESM(require("color-convert")),import_throttle=__toESM(require("lodash/throttle.js")),import_theming18=require("@storybook/theming"),import_components15=require("@storybook/components");init_helpers();import_icons5=require("@storybook/icons"),Wrapper8=import_theming18.styled.div({position:"relative",maxWidth:250}),PickerTooltip=(0,import_theming18.styled)(import_components15.WithTooltip)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=import_theming18.styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=(0,import_theming18.styled)(import_components15.TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=import_theming18.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=import_theming18.styled.div(({theme,active})=>({width:16,height:16,boxShadow:active?`${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px`:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:theme.appBorderRadius})),swatchBackground=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,Swatch=({value:value2,active,onClick,style,...props})=>{let backgroundImage=`linear-gradient(${value2}, ${value2}), ${swatchBackground}, linear-gradient(#fff, #fff)`;return import_react24.default.createElement(SwatchColor,{...props,active,onClick,style:{...style,backgroundImage}})},Input2=(0,import_theming18.styled)(import_components15.Form.Input)(({theme})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=(0,import_theming18.styled)(import_icons5.MarkupIcon)(({theme})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:theme.input.color})),ColorSpace=(ColorSpace2=>(ColorSpace2.RGB="rgb",ColorSpace2.HSL="hsl",ColorSpace2.HEX="hex",ColorSpace2))(ColorSpace||{}),COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker={hex:import_react_colorful.HexColorPicker,rgb:import_react_colorful.RgbaStringColorPicker,hsl:import_react_colorful.HslaStringColorPicker},fallbackColor={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},stringToArgs=value2=>{let match=value2?.match(COLOR_REGEXP);if(!match)return[0,0,0,1];let[,x,y,z,a=1]=match;return[x,y,z,a].map(Number)},parseValue=value2=>{if(!value2)return;let valid=!0;if(RGB_REGEXP.test(value2)){let[r,g,b,a]=stringToArgs(value2),[h,s,l]=import_color_convert.default.rg
Line truncated
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:(0,import_polished5.rgba)(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,cursor:"grab",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${(0,import_polished5.darken)(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.darken)(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${(0,import_polished5.lighten)(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
${(0,import_polished5.lighten)(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:"transparent",width:"100%",height:"6px",cursor:"pointer"},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"&::-ms-thumb":{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${(0,import_polished5.rgba)(theme.appBorderColor,.2)}`,borderRadius:50,cursor:"grab",marginTop:0},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:"0"}}})),RangeLabel=import_theming15.styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeCurrentAndMaxLabel=(0,import_theming15.styled)(RangeLabel)(({numberOFDecimalsPlaces,max})=>({width:`${numberOFDecimalsPlaces+max.toString().length*2+3}ch`,textAlign:"right",flexShrink:0})),RangeWrapper=import_theming15.styled.div({display:"flex",alignItems:"center",width:"100%"});function getNumberOfDecimalPlaces(number){let match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return match?Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0)):0}var RangeControl=({name,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{let handleChange=event=>{onChange(parse2(event.target.value))},hasValue=value2!==void 0,numberOFDecimalsPlaces=(0,import_react21.useMemo)(()=>getNumberOfDecimalPlaces(step),[step]);return import_react21.default.createElement(RangeWrapper,null,import_react21.default.createElement(RangeLabel,null,min),import_react21.default.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),import_react21.default.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"," / ",max))};var import_react22=__toESM(require("react")),import_theming16=require("@storybook/theming"),import_components13=require("@storybook/components");init_helpers();var Wrapper7=import_theming16.styled.label({display:"flex"}),MaxLength=import_theming16.styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength})=>{let handleChange=event=>{onChange(event.target.value)},[forceVisible,setForceVisible]=(0,import_react22.useState)(!1),onForceVisible=(0,import_react22.useCallback)(()=>{onChange(""),setForceVisible(!0)},[setForceVisible]);if(value2===void 0)return import_react22.default.createElement(import_components13.Button,{variant:"outline",size:"medium",id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return import_react22.default.createElement(Wrapper7,null,import_react22.default.createElement(import_components13.Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&import_react22.default.createElement(MaxLength,{isMaxed:value2?.length===maxLength},value2?.length??0," / ",maxLength))};var import_react23=__toESM(require("react")),import_theming17=require("@storybook/theming"),import_components14=require("@storybook/components");init_helpers();var FileInput=(0,import_theming17.styled)(import_components14.Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url)})}var FilesControl=({onChange,name,accept="image/*",value:value2})=>{let inputElement=(0,import_react23.useRef)(null);function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2)}return(0,import_react23.useEffect)(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null)},[value2,name]),import_react23.default.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=(0,import_react25.lazy)(()=>Promise.resolve().then(()=>(init_Color(),Color_exports))),ColorControl2=props=>import_react25.default.createElement(import_react25.Suspense,{fallback:import_react25.default.createElement("div",null)},import_react25.default.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl2,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>import_react26.default.createElement(import_react26.default.Fragment,null,"-"),ArgControl=({row,arg,updateArgs,isHovered})=>{let{key,control}=row,[isFocused,setFocused]=(0,import_react26.useState)(!1),[bo
Line truncated
|
||||
This is often caused by not wrapping the child in a template string.
|
||||
-
|
||||
+
|
||||
This is invalid:
|
||||
<Markdown>
|
||||
# Some heading
|
||||
@@ -32,4 +32,4 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
||||
A paragraph
|
||||
\`}
|
||||
</Markdown>
|
||||
- `);return import_react49.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},DescriptionContainer=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolvedOf=useOf(of||"meta"),markdown=getDescriptionFromResolvedOf(resolvedOf);return markdown?import_react50.default.createElement(Markdown2,null,markdown):null};var import_react61=__toESM(require("react"));var import_react52=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming29=require("@storybook/theming");var import_react51=__toESM(require("react")),import_theming28=require("@storybook/theming"),tocbot=__toESM(require("tocbot")),Wrapper11=import_theming28.styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content=import_theming28.styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}})),Heading=import_theming28.styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?import_react51.default.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>((0,import_react51.useEffect)(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".docs-story *, .skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return()=>{clearTimeout(timeout),tocbot.destroy()}},[disable]),import_react51.default.createElement(import_react51.default.Fragment,null,import_react51.default.createElement(Wrapper11,null,disable?null:import_react51.default.createElement(Content,null,import_react51.default.createElement(OptionalTitle,{title:title||null}),import_react51.default.createElement("div",{className:"toc-wrapper"})))));var{document:document3,window:globalWindow3}=import_global7.global,DocsContainer=({context,theme,children})=>{let toc;try{toc=context.resolveOf("meta",["meta"]).preparedMeta.parameters?.docs?.toc}catch{toc=context?.projectAnnotations?.parameters?.docs?.toc}return(0,import_react52.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_react52.default.createElement(DocsContext.Provider,{value:context},import_react52.default.createElement(SourceContainer,{channel:context.channel},import_react52.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(theme)},import_react52.default.createElement(DocsPageWrappe
Line truncated
|
||||
+ `);return import_react49.default.createElement(import_markdown_to_jsx2.default,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},DescriptionContainer=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolvedOf=useOf(of||"meta"),markdown=getDescriptionFromResolvedOf(resolvedOf);return markdown?import_react50.default.createElement(Markdown2,null,markdown):null};var import_react61=__toESM(require("react"));var import_react52=__toESM(require("react")),import_global7=require("@storybook/global"),import_theming29=require("@storybook/theming");var import_react51=__toESM(require("react")),import_theming28=require("@storybook/theming"),tocbot=__toESM(require("tocbot")),Wrapper11=import_theming28.styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content=import_theming28.styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}})),Heading=import_theming28.styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?import_react51.default.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>((0,import_react51.useEffect)(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".docs-story *, .skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return()=>{clearTimeout(timeout),tocbot.destroy()}},[disable]),import_react51.default.createElement(import_react51.default.Fragment,null,import_react51.default.createElement(Wrapper11,null,disable?null:import_react51.default.createElement(Content,null,import_react51.default.createElement(OptionalTitle,{title:title||null}),import_react51.default.createElement("div",{className:"toc-wrapper"})))));var{document:document3,window:globalWindow3}=import_global7.global,DocsContainer=({context,theme,children})=>{let toc;try{toc=context.resolveOf("meta",["meta"]).preparedMeta.parameters?.docs?.toc}catch{toc=context?.projectAnnotations?.parameters?.docs?.toc}return(0,import_react52.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_react52.default.createElement(DocsContext.Provider,{value:context},import_react52.default.createElement(SourceContainer,{channel:context.channel},import_react52.default.createElement(import_theming29.ThemeProvider,{theme:(0,import_theming29.ensure)(theme)},import_react52.default.createElement(DocsPageWrappe
Line truncated
|
||||
diff --git a/dist/index.mjs b/dist/index.mjs
|
||||
index 3c5b53dc7f5625a83ba5f9d84ad58a9c9c6f3623..4aa1f7e60b98ce14da0e05bf288fe05f0307515d 100644
|
||||
--- a/dist/index.mjs
|
||||
+++ b/dist/index.mjs
|
||||
@@ -20,27 +20,27 @@ import dedent from 'ts-dedent';
|
||||
import * as tocbot from 'tocbot';
|
||||
import { Channel } from '@storybook/channels';
|
||||
|
||||
-var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="light"?"rgba(0,0,0,.01)":"rgba(255,255,255,.01)",borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:"flex",alignItems:"center",justifyContent:"center",padding:20,margin:"25px 0 40px",color:transparentize(.3,theme.color.defaultText),fontSize:theme.typography.size.s2})),EmptyBlock=props=>React17.createElement(Wrapper,{...props,className:"docblock-emptyblock sb-unstyled"});var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,lineHeight:"19px",margin:"25px 0 40px",borderRadius:theme.appBorderRadius,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0","pre.prismjs":{padding:20,background:"inherit"}}));var SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",margin:"25px 0 40px",padding:"20px 20px 20px 22px"})),SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:"60%",[`&:first-child${ignoreSsrWarning}`]:{margin:0}})),SourceSkeleton=()=>React17.createElement(SourceSkeletonWrapper,null,React17.createElement(SourceSkeletonPlaceholder,null),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"30%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}})),Source=({isLoading,error,language,code,dark,format:format2,...rest})=>{let{typography}=useTheme();if(isLoading)return React17.createElement(SourceSkeleton,null);if(error)return React17.createElement(EmptyBlock,null,error);let syntaxHighlighter=React17.createElement(StyledSyntaxHighlighter,{bordered:!0,copyable:!0,format:format2,language,className:"docblock-source sb-unstyled",...rest},code);if(typeof dark>"u")return syntaxHighlighter;let overrideTheme=dark?themes.dark:themes.light;return React17.createElement(ThemeProvider,{theme:convert({...overrideTheme,fontCode:typography.fonts.mono,fontBase:typography.fonts.base})},syntaxHighlighter)};Source.defaultProps={format:!1};var toGlobalSelector=element=>`& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,breakpoint=600,Title=styled.h1(withReset,({theme})=>({color:theme.color.defaultText,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,lineHeight:"32px",[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.l1,lineHeight:"36px",marginBottom:"16px"}})),Subtitle=styled.h2(withReset,({theme})=>({fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s3,lineHeight:"20px",borderBottom:"none",marginBottom:15,[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.m1,lineHeight:"28px",marginBottom:24},color:transparentize(.25,theme.color.defaultText)})),DocsContent=styled.div(({theme})=>{let reset={fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch"},headers={margin:"20px 0 8px",padding:0,cursor:"text",position:"relative",color:theme.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:"none"},"& code":{fontSize:"inherit"}},code={lineHeight:1,margin:"0 2px",padding:"3px 5px",whiteSpace:"nowrap",borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==="light"?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.3,theme.color.defaultText),backgroundColor:theme.base==="light"?theme.color.lighter:theme.color.border};return {maxWidth:1e3,width:"100%",[toGlobalSelector("a")]:{...reset,fontSize:"inherit",lineHeight:"24px",color:theme.color.secondary,textDecoration:"none","&.absent":{color:"#cc0000"},"&.anchor":{display:"block",paddingLeft:30,marginLeft:-30,cursor:"pointer",position:"absolute",top:0,left:0,bottom:0}},[toGlobalSelector("blockquote")]:{...reset,margin:"16px 0",borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[toGlobalSelector("div")]:reset,[toGlobalSelector("dl")]:{...reset,margin:"16px 0",padding:0,"& dt":{fontSize:"14px",fontWeight:"bold",fontStyle:"italic",padding:0,margin:"16px 0 4px"},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:"0 0 16px",padding:"0 15px"},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}},[toGlobalSelector("h1")]:{...reset,...head
Line truncated
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:rgba(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:"grab",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
- ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
- ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
- ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="light"?"rgba(0,0,0,.01)":"rgba(255,255,255,.01)",borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:"flex",alignItems:"center",justifyContent:"center",padding:20,margin:"25px 0 40px",color:transparentize(.3,theme.color.defaultText),fontSize:theme.typography.size.s2})),EmptyBlock=props=>React17.createElement(Wrapper,{...props,className:"docblock-emptyblock sb-unstyled"});var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({fontSize:`${theme.typography.size.s2-1}px`,lineHeight:"19px",margin:"25px 0 40px",borderRadius:theme.appBorderRadius,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0","pre.prismjs":{padding:20,background:"inherit"}}));var SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",margin:"25px 0 40px",padding:"20px 20px 20px 22px"})),SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:"60%",[`&:first-child${ignoreSsrWarning}`]:{margin:0}})),SourceSkeleton=()=>React17.createElement(SourceSkeletonWrapper,null,React17.createElement(SourceSkeletonPlaceholder,null),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"30%"}}),React17.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}})),Source=({isLoading,error,language,code,dark,format:format2,...rest})=>{let{typography}=useTheme();if(isLoading)return React17.createElement(SourceSkeleton,null);if(error)return React17.createElement(EmptyBlock,null,error);let syntaxHighlighter=React17.createElement(StyledSyntaxHighlighter,{bordered:!0,copyable:!0,format:format2,language,className:"docblock-source sb-unstyled",...rest},code);if(typeof dark>"u")return syntaxHighlighter;let overrideTheme=dark?themes.dark:themes.light;return React17.createElement(ThemeProvider,{theme:convert({...overrideTheme,fontCode:typography.fonts.mono,fontBase:typography.fonts.base})},syntaxHighlighter)};Source.defaultProps={format:!1};var toGlobalSelector=element=>`& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,breakpoint=600,Title=styled.h1(withReset,({theme})=>({color:theme.color.defaultText,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,lineHeight:"32px",[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.l1,lineHeight:"36px",marginBottom:"16px"}})),Subtitle=styled.h2(withReset,({theme})=>({fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s3,lineHeight:"20px",borderBottom:"none",marginBottom:15,[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.m1,lineHeight:"28px",marginBottom:24},color:transparentize(.25,theme.color.defaultText)})),DocsContent=styled.div(({theme})=>{let reset={fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch"},headers={margin:"20px 0 8px",padding:0,cursor:"text",position:"relative",color:theme.color.defaultText,"&:first-of-type":{marginTop:0,paddingTop:0},"&:hover a.anchor":{textDecoration:"none"},"& code":{fontSize:"inherit"}},code={lineHeight:1,margin:"0 2px",padding:"3px 5px",whiteSpace:"nowrap",borderRadius:3,fontSize:theme.typography.size.s2-1,border:theme.base==="light"?`1px solid ${theme.color.mediumlight}`:`1px solid ${theme.color.darker}`,color:theme.base==="light"?transparentize(.1,theme.color.defaultText):transparentize(.3,theme.color.defaultText),backgroundColor:theme.base==="light"?theme.color.lighter:theme.color.border};return {maxWidth:1e3,width:"100%",[toGlobalSelector("a")]:{...reset,fontSize:"inherit",lineHeight:"24px",color:theme.color.secondary,textDecoration:"none","&.absent":{color:"#cc0000"},"&.anchor":{display:"block",paddingLeft:30,marginLeft:-30,cursor:"pointer",position:"absolute",top:0,left:0,bottom:0}},[toGlobalSelector("blockquote")]:{...reset,margin:"16px 0",borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[toGlobalSelector("div")]:reset,[toGlobalSelector("dl")]:{...reset,margin:"16px 0",padding:0,"& dt":{fontSize:"14px",fontWeight:"bold",fontStyle:"italic",padding:0,margin:"16px 0 4px"},"& dt:first-of-type":{padding:0},"& dt > :first-of-type":{marginTop:0},"& dt > :last-child":{marginBottom:0},"& dd":{margin:"0 0 16px",padding:"0 15px"},"& dd > :first-of-type":{marginTop:0},"& dd > :last-child":{marginBottom:0}},[toGlobalSelector("h1")]:{...reset,...head
Line truncated
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer"},"&::-webkit-slider-thumb":{marginTop:"-6px",width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:"grab",appearance:"none",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&:focus":{outline:"none","&::-webkit-slider-runnable-track":{borderColor:rgba(theme.color.secondary,.4)},"&::-webkit-slider-thumb":{borderColor:theme.color.secondary,boxShadow:`0 0px 5px 0px ${theme.color.secondary}`}},"&::-moz-range-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:6,width:"100%",height:6,cursor:"pointer",outline:"none"},"&::-moz-range-thumb":{width:16,height:16,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:"50px",boxShadow:`0 1px 3px 0px ${rgba(theme.appBorderColor,.2)}`,cursor:"grab",background:`${theme.input.background}`,transition:"all 150ms ease-out","&:hover":{background:`${darken(.05,theme.input.background)}`,transform:"scale3d(1.1, 1.1, 1.1) translateY(-1px)",transition:"all 50ms ease-out"},"&:active":{background:`${theme.input.background}`,transform:"scale3d(1, 1, 1) translateY(0px)",cursor:"grabbing"}},"&::-ms-track":{background:theme.base==="light"?`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${darken(.02,theme.input.background)} 100%)`:`linear-gradient(to right,
|
||||
+ ${theme.color.green} 0%, ${theme.color.green} ${(value2-min)/(max-min)*100}%,
|
||||
+ ${lighten(.02,theme.input.background)} ${(value2-min)/(max-min)*100}%,
|
||||
${lighten(.02,theme.input.background)} 100%)`,boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`,color:"transparent",width:"100%",height:"6px",cursor:"pointer"},"&::-ms-fill-lower":{borderRadius:6},"&::-ms-fill-upper":{borderRadius:6},"&::-ms-thumb":{width:16,height:16,background:`${theme.input.background}`,border:`1px solid ${rgba(theme.appBorderColor,.2)}`,borderRadius:50,cursor:"grab",marginTop:0},"@supports (-ms-ime-align:auto)":{"input[type=range]":{margin:"0"}}})),RangeLabel=styled.span({paddingLeft:5,paddingRight:5,fontSize:12,whiteSpace:"nowrap",fontFeatureSettings:"tnum",fontVariantNumeric:"tabular-nums"}),RangeCurrentAndMaxLabel=styled(RangeLabel)(({numberOFDecimalsPlaces,max})=>({width:`${numberOFDecimalsPlaces+max.toString().length*2+3}ch`,textAlign:"right",flexShrink:0})),RangeWrapper=styled.div({display:"flex",alignItems:"center",width:"100%"});function getNumberOfDecimalPlaces(number){let match=number.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return match?Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0)):0}var RangeControl=({name,value:value2,onChange,min=0,max=100,step=1,onBlur,onFocus})=>{let handleChange=event=>{onChange(parse2(event.target.value));},hasValue=value2!==void 0,numberOFDecimalsPlaces=useMemo(()=>getNumberOfDecimalPlaces(step),[step]);return React17.createElement(RangeWrapper,null,React17.createElement(RangeLabel,null,min),React17.createElement(RangeInput,{id:getControlId(name),type:"range",onChange:handleChange,name,value:value2,min,max,step,onFocus,onBlur}),React17.createElement(RangeCurrentAndMaxLabel,{numberOFDecimalsPlaces,max},hasValue?value2.toFixed(numberOFDecimalsPlaces):"--"," / ",max))};var Wrapper7=styled.label({display:"flex"}),MaxLength=styled.div(({isMaxed})=>({marginLeft:"0.75rem",paddingTop:"0.35rem",color:isMaxed?"red":void 0})),TextControl=({name,value:value2,onChange,onFocus,onBlur,maxLength})=>{let handleChange=event=>{onChange(event.target.value);},[forceVisible,setForceVisible]=useState(!1),onForceVisible=useCallback(()=>{onChange(""),setForceVisible(!0);},[setForceVisible]);if(value2===void 0)return React17.createElement(Button,{variant:"outline",size:"medium",id:getControlSetterButtonId(name),onClick:onForceVisible},"Set string");let isValid=typeof value2=="string";return React17.createElement(Wrapper7,null,React17.createElement(Form.Textarea,{id:getControlId(name),maxLength,onChange:handleChange,size:"flex",placeholder:"Edit string...",autoFocus:forceVisible,valid:isValid?null:"error",name,value:isValid?value2:"",onFocus,onBlur}),maxLength&&React17.createElement(MaxLength,{isMaxed:value2?.length===maxLength},value2?.length??0," / ",maxLength))};var FileInput=styled(Form.Input)({padding:10});function revokeOldUrls(urls){urls.forEach(url=>{url.startsWith("blob:")&&URL.revokeObjectURL(url);});}var FilesControl=({onChange,name,accept="image/*",value:value2})=>{let inputElement=useRef(null);function handleFileChange(e){if(!e.target.files)return;let fileUrls=Array.from(e.target.files).map(file=>URL.createObjectURL(file));onChange(fileUrls),revokeOldUrls(value2);}return useEffect(()=>{value2==null&&inputElement.current&&(inputElement.current.value=null);},[value2,name]),React17.createElement(FileInput,{ref:inputElement,id:getControlId(name),type:"file",name,multiple:!0,onChange:handleFileChange,accept,size:"flex"})};var LazyColorControl=lazy(()=>import('./Color-RQJUDNI5.mjs')),ColorControl=props=>React17.createElement(Suspense,{fallback:React17.createElement("div",null)},React17.createElement(LazyColorControl,{...props}));var Controls2={array:ObjectControl,object:ObjectControl,boolean:BooleanControl,color:ColorControl,date:DateControl,number:NumberControl,check:OptionsControl,"inline-check":OptionsControl,radio:OptionsControl,"inline-radio":OptionsControl,select:OptionsControl,"multi-select":OptionsControl,range:RangeControl,text:TextControl,file:FilesControl},NoControl=()=>React17.createElement(React17.Fragment,null,"-"),ArgControl=({row,arg,updateArgs,isHovered})=>{let{key,control}=row,[isFocused,setFocused]=useState(!1),[boxedValue,setBoxedValue]=useState({value:arg});useEffect(()=>{isFocused||setBoxedValue({value:arg});},[isFocused,arg]);let onChange=useCallback(argVal=>(setBoxedValue({value:argVal}),updateArgs({[key]:argVal}),argVal),[updateArgs,key]),onBlur=useCallback(()=>setFocused(!1),[]),onFocus=useCallback(()=>setFocused(!0),[]);if(!control||control.disable){let canBeSetup=control?.disable!==!0&&row?.type?.name!=="function";return isHovered&&canBeSetup?React17.createElement(Link,{href:"https://storybook.js.org/docs/react/essentials/controls",target:"_blank",withArrow:!0},"Setup controls"):React17.createElement(NoControl,null)}let props={name:key,argType:row,value:boxedValue.value,onChange,onBlur,onFocus},Control=Controls2[control.type]||NoControl;return React17.createElement(Control,{...props,...control,controlType:control.type})};var Name=styled.span({fontWeight:"bold"}),Required=styled.span(({theme})=>({co
Line truncated
|
||||
This is often caused by not wrapping the child in a template string.
|
||||
-
|
||||
+
|
||||
This is invalid:
|
||||
<Markdown>
|
||||
# Some heading
|
||||
@@ -56,4 +56,4 @@ var Wrapper=styled.div(withReset,({theme})=>({backgroundColor:theme.base==="ligh
|
||||
</Markdown>
|
||||
`);return React17.createElement(Markdown,{...props,options:{forceBlock:!0,overrides:{code:CodeOrSourceMdx,a:AnchorMdx,...HeadersMdx,...props?.options?.overrides},...props?.options}})};var DescriptionType=(DescriptionType2=>(DescriptionType2.INFO="info",DescriptionType2.NOTES="notes",DescriptionType2.DOCGEN="docgen",DescriptionType2.AUTO="auto",DescriptionType2))(DescriptionType||{}),getDescriptionFromResolvedOf=resolvedOf=>{switch(resolvedOf.type){case"story":return resolvedOf.story.parameters.docs?.description?.story||null;case"meta":{let{parameters,component}=resolvedOf.preparedMeta,metaDescription=parameters.docs?.description?.component;return metaDescription||parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}case"component":{let{component,projectAnnotations:{parameters}}=resolvedOf;return parameters.docs?.extractComponentDescription?.(component,{component,parameters})||null}default:throw new Error(`Unrecognized module type resolved from 'useOf', got: ${resolvedOf.type}`)}},DescriptionContainer=props=>{let{of}=props;if("of"in props&&of===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let resolvedOf=useOf(of||"meta"),markdown=getDescriptionFromResolvedOf(resolvedOf);return markdown?React17.createElement(Markdown2,null,markdown):null};var Wrapper10=styled.div(({theme})=>({width:"10rem","@media (max-width: 768px)":{display:"none"}})),Content=styled.div(({theme})=>({position:"fixed",bottom:0,top:0,width:"10rem",paddingTop:"4rem",paddingBottom:"2rem",overflowY:"auto",fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s2,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch","& *":{boxSizing:"border-box"},"& > .toc-wrapper > .toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`,".toc-list":{paddingLeft:0,borderLeft:`solid 2px ${theme.color.mediumlight}`}}},"& .toc-list-item":{position:"relative",listStyleType:"none",marginLeft:20,paddingTop:3,paddingBottom:3},"& .toc-list-item::before":{content:'""',position:"absolute",height:"100%",top:0,left:0,transform:"translateX(calc(-2px - 20px))",borderLeft:`solid 2px ${theme.color.mediumdark}`,opacity:0,transition:"opacity 0.2s"},"& .toc-list-item.is-active-li::before":{opacity:1},"& .toc-list-item > a":{color:theme.color.defaultText,textDecoration:"none"},"& .toc-list-item.is-active-li > a":{fontWeight:600,color:theme.color.secondary,textDecoration:"none"}})),Heading=styled.p(({theme})=>({fontWeight:600,fontSize:"0.875em",color:theme.textColor,textTransform:"uppercase",marginBottom:10})),OptionalTitle=({title})=>title===null?null:typeof title=="string"?React17.createElement(Heading,null,title):title,TableOfContents=({title,disable,headingSelector,contentsSelector,ignoreSelector,unsafeTocbotOptions})=>(useEffect(()=>{let configuration={tocSelector:".toc-wrapper",contentSelector:contentsSelector??".sbdocs-content",headingSelector:headingSelector??"h3",ignoreSelector:ignoreSelector??".docs-story *, .skip-toc",headingsOffset:40,scrollSmoothOffset:-40,orderedList:!1,onClick:()=>!1,...unsafeTocbotOptions},timeout=setTimeout(()=>tocbot.init(configuration),100);return ()=>{clearTimeout(timeout),tocbot.destroy();}},[disable]),React17.createElement(React17.Fragment,null,React17.createElement(Wrapper10,null,disable?null:React17.createElement(Content,null,React17.createElement(OptionalTitle,{title:title||null}),React17.createElement("div",{className:"toc-wrapper"})))));var {document:document3,window:globalWindow3}=global,DocsContainer=({context,theme,children})=>{let toc;try{toc=context.resolveOf("meta",["meta"]).preparedMeta.parameters?.docs?.toc;}catch{toc=context?.projectAnnotations?.parameters?.docs?.toc;}return 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{}}),React17.createElement(DocsContext.Provider,{value:context},React17.createElement(SourceContainer,{channel:context.channel},React17.createElement(ThemeProvider,{theme:ensure(theme)},React17.createElement(DocsPageWrapper,{toc:toc?React17.createElement(TableOfContents,{className:"sbdocs sbdocs-toc--custom",...toc}):null},children))))};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=useContext(DocsContext),content=children||extractTitle(context.storyById().title);return content?React17.createElement(Title,{className:"sbdocs-title sb-unstyled"},content):null};var Subtitle2=({children})=>{let docsContext=useContext(DocsContext),content=children||docsContext.storyById().parameters?.componentSubtitle;return content?Rea
Line truncated
|
||||
|
||||
-export { AddContext, Anchor, AnchorMdx, ArgTypes, BooleanControl, Canvas, CodeOrSourceMdx, ColorControl, ColorItem, ColorPalette, Controls3 as Controls, DateControl, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContext, DocsPage, DocsStory, ExternalDocs, ExternalDocsContainer, FilesControl, HeaderMdx, HeadersMdx, Heading2 as Heading, IconGallery, IconItem, Markdown2 as Markdown, Meta, NumberControl, ObjectControl, OptionsControl, PRIMARY_STORY, Primary, ArgsTable as PureArgsTable, RangeControl, Source2 as Source, SourceContainer, SourceContext, Stories, Story2 as Story, Subheading, Subtitle2 as Subtitle, TextControl, Title2 as Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper11 as Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractTitle, format, formatDate, formatTime, getStoryId2 as getStoryId, getStoryProps, parse2 as parse, parseDate, parseTime, useOf, useSourceProps };
|
||||
+export { AddContext, Anchor, AnchorMdx, ArgTypes, BooleanControl, Canvas, CodeOrSourceMdx, ColorControl, ColorItem, ColorPalette, Controls3 as Controls, DateControl, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContext, DocsPage, DocsStory, ExternalDocs, ExternalDocsContainer, FilesControl, HeaderMdx, HeadersMdx, Heading2 as Heading, IconGallery, IconItem, Markdown2 as Markdown, Meta, NumberControl, ObjectControl, OptionsControl, PRIMARY_STORY, Preview, Primary, ArgsTable as PureArgsTable, RangeControl, Source2 as Source, SourceContainer, SourceContext, Stories, Story2 as Story, Subheading, Subtitle2 as Subtitle, TextControl, Title2 as Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper11 as Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractTitle, format, formatDate, formatTime, getStoryId2 as getStoryId, getStoryProps, parse2 as parse, parseDate, parseTime, useOf, useSourceProps };
|
||||
@@ -7,9 +7,6 @@ enableTelemetry: false
|
||||
nodeLinker: node-modules
|
||||
|
||||
packageExtensions:
|
||||
'@storybook/core-common@7.4.5':
|
||||
dependencies:
|
||||
'@storybook/react-webpack5': 7.4.5
|
||||
'croact-css-styled@1.1.9':
|
||||
dependencies:
|
||||
croact: 1.0.4
|
||||
|
||||
+3
-3
@@ -125,7 +125,7 @@
|
||||
"@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.4",
|
||||
"@types/pluralize": "^0.0.33",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-beautiful-dnd": "13.1.8",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-grid-layout": "1.3.5",
|
||||
@@ -411,10 +411,10 @@
|
||||
"debug@npm:^0.7.4": "2.6.9",
|
||||
"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/blocks@7.4.5": "patch:@storybook/blocks@npm%3A7.4.5#./.yarn/patches/@storybook-blocks-npm-7.4.5-5a2374564a.patch",
|
||||
"history@4.10.1": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
|
||||
"history@^4.9.0": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
|
||||
"redux": "^5.0.0"
|
||||
"redux": "^5.0.0",
|
||||
"@storybook/blocks@npm:8.0.10": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch"
|
||||
},
|
||||
"workspaces": {
|
||||
"packages": [
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/papaparse": "5.3.14",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/tinycolor2": "1.4.6",
|
||||
"esbuild": "0.20.2",
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
"@types/jest": "^29.5.4",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-virtualized-auto-sizer": "1.0.4",
|
||||
"@types/tinycolor2": "1.4.6",
|
||||
"babel-jest": "29.7.0",
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
"@svgr/plugin-svgo": "^8.1.0",
|
||||
"@types/babel__core": "^7",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"esbuild": "0.20.2",
|
||||
"prettier": "3.2.5",
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
"@testing-library/user-event": "14.5.2",
|
||||
"@types/jest": "^29.5.4",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/systemjs": "6.13.5",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"jest": "^29.6.4",
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
"@types/node": "20.12.11",
|
||||
"@types/pluralize": "^0.0.33",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-beautiful-dnd": "13.1.8",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-highlight-words": "0.16.7",
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
"@types/history": "4.7.11",
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/systemjs": "6.13.5",
|
||||
"esbuild": "0.20.2",
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
"@types/jest": "^29.5.4",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-virtualized-auto-sizer": "1.0.4",
|
||||
"@types/systemjs": "6.13.5",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import path from 'path';
|
||||
import path, { dirname, join } from 'path';
|
||||
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';
|
||||
@@ -33,7 +33,7 @@ const mainConfig: StorybookConfig = {
|
||||
backgrounds: false,
|
||||
},
|
||||
},
|
||||
'@storybook/addon-a11y',
|
||||
getAbsolutePath('@storybook/addon-a11y'),
|
||||
{
|
||||
name: '@storybook/preset-scss',
|
||||
options: {
|
||||
@@ -47,27 +47,17 @@ const mainConfig: StorybookConfig = {
|
||||
},
|
||||
},
|
||||
},
|
||||
'@storybook/addon-storysource',
|
||||
'storybook-dark-mode',
|
||||
{
|
||||
// replace babel-loader in manager and preview with esbuild-loader
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
getAbsolutePath('@storybook/addon-storysource'),
|
||||
getAbsolutePath('storybook-dark-mode'),
|
||||
getAbsolutePath('@storybook/addon-mdx-gfm'),
|
||||
getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
|
||||
],
|
||||
core: {},
|
||||
docs: {
|
||||
autodocs: true,
|
||||
},
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
name: getAbsolutePath('@storybook/react-webpack5'),
|
||||
options: {
|
||||
fastRefresh: true,
|
||||
builder: {
|
||||
@@ -130,3 +120,7 @@ const mainConfig: StorybookConfig = {
|
||||
},
|
||||
};
|
||||
module.exports = mainConfig;
|
||||
|
||||
function getAbsolutePath(value: string): any {
|
||||
return dirname(require.resolve(join(value, 'package.json')));
|
||||
}
|
||||
@@ -112,21 +112,22 @@
|
||||
"@babel/core": "7.24.5",
|
||||
"@grafana/tsconfig": "^1.3.0-rc1",
|
||||
"@rollup/plugin-node-resolve": "15.2.3",
|
||||
"@storybook/addon-a11y": "7.4.5",
|
||||
"@storybook/addon-actions": "7.4.5",
|
||||
"@storybook/addon-docs": "7.4.5",
|
||||
"@storybook/addon-essentials": "7.4.5",
|
||||
"@storybook/addon-storysource": "7.4.5",
|
||||
"@storybook/api": "7.4.5",
|
||||
"@storybook/blocks": "7.4.5",
|
||||
"@storybook/client-api": "7.4.5",
|
||||
"@storybook/components": "7.4.5",
|
||||
"@storybook/core-events": "7.4.5",
|
||||
"@storybook/addon-a11y": "^8.0.10",
|
||||
"@storybook/addon-actions": "^8.0.10",
|
||||
"@storybook/addon-docs": "^8.0.10",
|
||||
"@storybook/addon-essentials": "^8.0.10",
|
||||
"@storybook/addon-mdx-gfm": "^8.0.10",
|
||||
"@storybook/addon-storysource": "^8.0.10",
|
||||
"@storybook/addon-webpack5-compiler-swc": "^1.0.2",
|
||||
"@storybook/blocks": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch",
|
||||
"@storybook/components": "^8.0.10",
|
||||
"@storybook/core-events": "^8.0.10",
|
||||
"@storybook/mdx2-csf": "1.1.0",
|
||||
"@storybook/preset-scss": "1.0.3",
|
||||
"@storybook/react": "7.4.5",
|
||||
"@storybook/react-webpack5": "7.4.5",
|
||||
"@storybook/theming": "7.4.5",
|
||||
"@storybook/preview-api": "^8.0.10",
|
||||
"@storybook/react": "^8.0.10",
|
||||
"@storybook/react-webpack5": "^8.0.10",
|
||||
"@storybook/theming": "^8.0.10",
|
||||
"@testing-library/dom": "10.0.0",
|
||||
"@testing-library/jest-dom": "6.4.2",
|
||||
"@testing-library/react": "15.0.2",
|
||||
@@ -141,7 +142,7 @@
|
||||
"@types/mock-raf": "1.0.6",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-beautiful-dnd": "13.1.8",
|
||||
"@types/react-color": "3.0.12",
|
||||
"@types/react-dom": "18.2.25",
|
||||
@@ -177,9 +178,8 @@
|
||||
"rollup-plugin-node-externals": "^5.0.0",
|
||||
"rollup-plugin-svg-import": "1.6.0",
|
||||
"sass-loader": "14.2.1",
|
||||
"storybook": "7.4.5",
|
||||
"storybook-addon-turbo-build": "2.0.1",
|
||||
"storybook-dark-mode": "3.0.1",
|
||||
"storybook": "^8.0.10",
|
||||
"storybook-dark-mode": "^4.0.1",
|
||||
"style-loader": "4.0.0",
|
||||
"typescript": "5.4.5",
|
||||
"webpack": "5.91.0"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { AutoSaveField } from './AutoSaveField';
|
||||
import { Basic } from './AutoSaveField.story.tsx';
|
||||
|
||||
@@ -267,7 +267,7 @@ _**What can be expected from the request?**_
|
||||
|
||||
## <a name="propstable"/>Props table
|
||||
|
||||
<ArgsTable of={AutoSaveField} />
|
||||
<ArgTypes of={AutoSaveField} />
|
||||
|
||||
## <a name="related"/>Related
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Checkbox } from '../Forms/Checkbox';
|
||||
@@ -72,7 +72,7 @@ const themeOptions = [
|
||||
{ value: 'system', label: 'System' },
|
||||
];
|
||||
|
||||
export const Basic: Story = (args) => {
|
||||
export const Basic: StoryFn = (args) => {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
return (
|
||||
<AutoSaveField onFinishChange={args.inputSuccessful ? getSuccess : getError} {...args}>
|
||||
@@ -96,7 +96,7 @@ Basic.args = {
|
||||
inputSuccessful: false,
|
||||
};
|
||||
|
||||
export const AllComponents: Story = (args) => {
|
||||
export const AllComponents: StoryFn = (args) => {
|
||||
const [selected, setSelected] = useState('');
|
||||
const [checkBoxTest, setCheckBoxTest] = useState(false);
|
||||
const [textAreaValue, setTextAreaValue] = useState('');
|
||||
|
||||
@@ -14,7 +14,13 @@ const meta: Meta<typeof Badge> = {
|
||||
docs: { page: mdx },
|
||||
},
|
||||
argTypes: {
|
||||
icon: { options: iconOptions, control: { type: 'select' } },
|
||||
icon: {
|
||||
options: Object.keys(iconOptions),
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: iconOptions,
|
||||
},
|
||||
},
|
||||
color: { control: 'select' },
|
||||
text: { control: 'text' },
|
||||
},
|
||||
|
||||
@@ -34,7 +34,6 @@ const value = {
|
||||
numeric: value,
|
||||
};
|
||||
|
||||
//...
|
||||
<BarGauge
|
||||
value={70}
|
||||
field={field.config}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
|
||||
@@ -110,14 +110,14 @@ const AddBarGaugeStory = (storyProps: StoryProps) => {
|
||||
return <BarGauge {...props} />;
|
||||
};
|
||||
|
||||
export const barGaugeVertical: Story<StoryProps> = AddBarGaugeStory.bind({});
|
||||
export const barGaugeVertical: StoryFn<StoryProps> = AddBarGaugeStory.bind({});
|
||||
barGaugeVertical.args = {
|
||||
height: 500,
|
||||
width: 100,
|
||||
orientation: VizOrientation.Vertical,
|
||||
};
|
||||
|
||||
export const barGaugeHorizontal: Story<StoryProps> = AddBarGaugeStory.bind({});
|
||||
export const barGaugeHorizontal: StoryFn<StoryProps> = AddBarGaugeStory.bind({});
|
||||
barGaugeHorizontal.args = {
|
||||
height: 100,
|
||||
width: 500,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { FieldSparkline, FieldType } from '@grafana/data';
|
||||
@@ -57,7 +57,7 @@ interface StoryProps extends Partial<Props> {
|
||||
valueText: string;
|
||||
}
|
||||
|
||||
export const ApplyNoValue: Story<StoryProps> = ({
|
||||
export const ApplyNoValue: StoryFn<StoryProps> = ({
|
||||
valueText,
|
||||
title,
|
||||
colorMode,
|
||||
@@ -101,7 +101,7 @@ export const ApplyNoValue: Story<StoryProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const Basic: Story<StoryProps> = ({
|
||||
export const Basic: StoryFn<StoryProps> = ({
|
||||
valueText,
|
||||
title,
|
||||
colorMode,
|
||||
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from '../Button/Button';
|
||||
@@ -25,7 +25,7 @@ interface StoryProps extends Partial<CallToActionCardProps> {
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
export const Basic: Story<StoryProps> = (args) => {
|
||||
export const Basic: StoryFn<StoryProps> = (args) => {
|
||||
const ctaElements: { [key: string]: JSX.Element } = {
|
||||
custom: <h1>{args.H1Text}</h1>,
|
||||
button: (
|
||||
|
||||
+3
-3
@@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Field } from '../Forms/Field';
|
||||
@@ -25,7 +25,7 @@ interface StoryProps extends Partial<Props> {
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
export const ClipboardButton: Story<StoryProps> = (args) => {
|
||||
export const ClipboardButton: StoryFn<StoryProps> = (args) => {
|
||||
const shareUrl = 'https://grafana.com/d/abcDEF-34t';
|
||||
|
||||
return (
|
||||
@@ -35,7 +35,7 @@ export const ClipboardButton: Story<StoryProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const AsInputFieldAddon: Story<StoryProps> = (args) => {
|
||||
export const AsInputFieldAddon: StoryFn<StoryProps> = (args) => {
|
||||
const shareUrl = 'https://grafana.com/d/abcDEF-34t';
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Collapse } from './Collapse';
|
||||
|
||||
# Collapse
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { ConfirmButton } from '@grafana/ui';
|
||||
@@ -48,7 +48,7 @@ interface StoryProps extends Partial<Props> {
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
export const Basic: Story<StoryProps> = (args) => {
|
||||
export const Basic: StoryFn<StoryProps> = (args) => {
|
||||
return (
|
||||
<ConfirmButton
|
||||
closeOnConfirm={args.closeOnConfirm}
|
||||
@@ -65,7 +65,7 @@ export const Basic: Story<StoryProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const WithCustomButton: Story<StoryProps> = (args) => {
|
||||
export const WithCustomButton: StoryFn<StoryProps> = (args) => {
|
||||
return (
|
||||
<ConfirmButton
|
||||
closeOnConfirm={args.closeOnConfirm}
|
||||
@@ -84,7 +84,7 @@ export const WithCustomButton: Story<StoryProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Delete: Story<StoryProps> = (args) => {
|
||||
export const Delete: StoryFn<StoryProps> = (args) => {
|
||||
return (
|
||||
<DeleteButton
|
||||
size={args.size}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { ConfirmModal } from './ConfirmModal';
|
||||
|
||||
<Meta title="MDX|ConfirmModal" component={ConfirmModal} />
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { TimeRangeInput } from './TimeRangeInput';
|
||||
|
||||
# TimeRangeInput
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { FileDropzone } from './FileDropzone';
|
||||
|
||||
# FileDropzone
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { FileListItem } from './FileListItem';
|
||||
|
||||
# FileListItem
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { FileListItem as FileListItemComponent, FileListItemProps } from './FileListItem';
|
||||
@@ -22,7 +22,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const FileListItem: Story<FileListItemProps> = (args) => {
|
||||
export const FileListItem: StoryFn<FileListItemProps> = (args) => {
|
||||
return <FileListItemComponent {...args} />;
|
||||
};
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { FileUpload } from './FileUpload';
|
||||
|
||||
# FileUpload
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
<Meta title="MDX|Checkbox" component={Checkbox} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Field } from './Field';
|
||||
|
||||
<Meta title="MDX|Field" component={Field} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { FieldValues } from 'react-hook-form';
|
||||
|
||||
@@ -29,7 +29,7 @@ const meta: Meta = {
|
||||
|
||||
export default meta;
|
||||
|
||||
export const Simple: Story = (args) => {
|
||||
export const Simple: StoryFn = (args) => {
|
||||
const defaultValues: FieldValues = {
|
||||
people: [{ firstName: 'Janis', lastName: 'Joplin' }],
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { FieldSet } from './FieldSet';
|
||||
|
||||
# FieldSet
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story } from '@storybook/react';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { ValidateResult } from 'react-hook-form';
|
||||
|
||||
@@ -145,7 +145,7 @@ export const DefaultValues = () => {
|
||||
return <>{renderForm(defaultValues[0])}</>;
|
||||
};
|
||||
|
||||
export const AsyncValidation: Story = ({ passAsyncValidation }) => {
|
||||
export const AsyncValidation: StoryFn = ({ passAsyncValidation }) => {
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Label } from './Label';
|
||||
|
||||
<Meta title="MDX|Label" component={Label} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import { zip, fromPairs } from 'lodash';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
@@ -25,7 +25,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
const Wrapper: Story = (args) => {
|
||||
const Wrapper: StoryFn = (args) => {
|
||||
const [value, setValue] = useState('');
|
||||
const validations = {
|
||||
[args.validationEvents]: [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Legend } from './Legend';
|
||||
|
||||
<Meta title="MDX|Legend" component={Legend} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { RadioButtonGroup } from './RadioButtonGroup';
|
||||
|
||||
<Meta title="MDX|RadioButtonGroup" component={RadioButtonGroup} />
|
||||
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { RadioButtonGroup } from './RadioButtonGroup';
|
||||
@@ -25,7 +25,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const RadioButtons: Story = (args) => {
|
||||
export const RadioButtons: StoryFn = (args) => {
|
||||
const [selected, setSelected] = useState('elastic');
|
||||
|
||||
const options = [
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { RadioButtonList } from './RadioButtonList';
|
||||
|
||||
<Meta title="MDX|RadioButtonList" component={RadioButtonList} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, StoryFn, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
@@ -93,7 +93,7 @@ export const WithDescriptions: StoryFn<typeof RadioButtonList> = ({ disabled, di
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ControlledComponent: Story<RadioButtonListProps<string>> = ({ disabled, disabledOptions }) => {
|
||||
export const ControlledComponent: StoryFn<RadioButtonListProps<string>> = ({ disabled, disabledOptions }) => {
|
||||
const [selected, setSelected] = useState<string>(defaultOptions[0].value!);
|
||||
|
||||
return (
|
||||
@@ -126,7 +126,7 @@ DisabledList.args = {
|
||||
disabled: true,
|
||||
};
|
||||
|
||||
export const Dots: Story = () => {
|
||||
export const Dots: StoryFn = () => {
|
||||
const Wrapper = ({ title, children }: React.PropsWithChildren<{ title: string }>) => (
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<h5>{title}</h5>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
|
||||
@@ -27,7 +27,7 @@ const story: Meta = {
|
||||
|
||||
export default story;
|
||||
|
||||
export const InlineToast: Story<InlineToastProps> = (args) => {
|
||||
export const InlineToast: StoryFn<InlineToastProps> = (args) => {
|
||||
const [el, setEl] = useState<null | HTMLInputElement>(null);
|
||||
|
||||
return (
|
||||
@@ -44,7 +44,7 @@ InlineToast.args = {
|
||||
suffixIcon: 'check',
|
||||
};
|
||||
|
||||
export const WithAButton: Story<InlineToastProps> = () => {
|
||||
export const WithAButton: StoryFn<InlineToastProps> = () => {
|
||||
return (
|
||||
<ClipboardButton icon="copy" getText={() => 'hello world'}>
|
||||
Copy surprise
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { InlineToast } from './InlineToast';
|
||||
|
||||
<Meta title="MDX|InlineToast" component={InlineToast} />
|
||||
|
||||
@@ -9,7 +9,7 @@ You can use it or regular text input. When used, AutoSizeInput resizes itself to
|
||||
|
||||
## Prefix and suffix
|
||||
|
||||
To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the canvas!
|
||||
To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the Preview!
|
||||
|
||||
```jsx
|
||||
<AutoSizeInput prefix={<Icon name="search" />} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Button, AutoSizeInput } from '@grafana/ui';
|
||||
@@ -10,11 +10,11 @@ import { parseAccessory } from './storyUtils';
|
||||
|
||||
const icons: { [key: string]: string | undefined } = { ...iconOptions };
|
||||
Object.keys(icons).forEach((key) => {
|
||||
icons[key] = `icon-${icons[key]}`;
|
||||
icons[`icon-${key}`] = icons[key];
|
||||
});
|
||||
|
||||
const prefixSuffixOpts = {
|
||||
Text: '$',
|
||||
$: 'Text',
|
||||
...icons,
|
||||
};
|
||||
|
||||
@@ -41,26 +41,28 @@ const meta: Meta = {
|
||||
prefixVisible: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: prefixSuffixOpts,
|
||||
labels: prefixSuffixOpts,
|
||||
},
|
||||
options: Object.keys(prefixSuffixOpts),
|
||||
},
|
||||
suffixVisible: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: prefixSuffixOpts,
|
||||
labels: prefixSuffixOpts,
|
||||
},
|
||||
options: Object.keys(prefixSuffixOpts),
|
||||
},
|
||||
type: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['text', 'number', 'password'],
|
||||
},
|
||||
options: ['text', 'number', 'password'],
|
||||
},
|
||||
minWidth: { control: { type: 'range', min: 10, max: 200, step: 10 } },
|
||||
},
|
||||
};
|
||||
|
||||
export const Simple: Story = (args) => {
|
||||
export const Simple: StoryFn = (args) => {
|
||||
const addonAfter = <Button variant="secondary">Load</Button>;
|
||||
const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>AutoSizeInput</div>;
|
||||
const prefix = parseAccessory(args.prefixVisible);
|
||||
|
||||
@@ -9,7 +9,7 @@ Used for regular text input. For an array of data or tree-structured data, consi
|
||||
|
||||
## Prefix and suffix
|
||||
|
||||
To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the canvas!
|
||||
To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the Preview!
|
||||
|
||||
```jsx
|
||||
<Input prefix={<Icon name="search" />} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { KeyValue } from '@grafana/data';
|
||||
@@ -63,7 +63,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Simple: Story = (args) => {
|
||||
export const Simple: StoryFn = (args) => {
|
||||
const addonAfter = <Button variant="secondary">Load</Button>;
|
||||
const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>Input</div>;
|
||||
const prefix = parseAccessory(args.prefixVisible);
|
||||
@@ -91,7 +91,7 @@ Simple.args = {
|
||||
placeholder: 'Enter your name here...',
|
||||
};
|
||||
|
||||
export const WithFieldValidation: Story = (args) => {
|
||||
export const WithFieldValidation: StoryFn = (args) => {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
|
||||
@@ -60,7 +60,7 @@ const meta: Meta = {
|
||||
|
||||
export default meta;
|
||||
|
||||
export const Horizontal: Story<LayoutProps> = (args) => {
|
||||
export const Horizontal: StoryFn<LayoutProps> = (args) => {
|
||||
return (
|
||||
<HorizontalGroup {...args}>
|
||||
<Button>Save</Button>
|
||||
@@ -69,7 +69,7 @@ export const Horizontal: Story<LayoutProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Vertical: Story<LayoutProps> = (args) => {
|
||||
export const Vertical: StoryFn<LayoutProps> = (args) => {
|
||||
return (
|
||||
<VerticalGroup {...args}>
|
||||
<Button>Save</Button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { TextLink } from './TextLink';
|
||||
import { Basic } from './TextLink.story.tsx';
|
||||
|
||||
@@ -143,7 +143,7 @@ Both, **external** and **internal** links can show a specific icon using the `ic
|
||||
|
||||
## <a name="propstable"/>Props table
|
||||
|
||||
<ArgsTable of={TextLink} />
|
||||
<ArgTypes of={TextLink} />
|
||||
|
||||
## <a name="related"/>Related
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
@@ -69,7 +69,7 @@ const getItem = (inline = false) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const basic: Story = (args) => {
|
||||
export const basic: StoryFn = (args) => {
|
||||
const { rawRenderer, customRenderer } = getItem();
|
||||
return (
|
||||
<List
|
||||
@@ -79,7 +79,7 @@ export const basic: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const inline: Story = (args) => {
|
||||
export const inline: StoryFn = (args) => {
|
||||
const { rawRenderer, customRenderer } = getItem(true);
|
||||
return (
|
||||
<InlineList
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Modal } from './Modal';
|
||||
import { ModalTabsHeader } from './ModalTabsHeader';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import { oneLineTrim } from 'common-tags';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
@@ -46,7 +46,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: Story = ({ body, title, ...args }) => {
|
||||
export const Basic: StoryFn = ({ body, title, ...args }) => {
|
||||
return (
|
||||
<Modal title={title} {...args}>
|
||||
{body}
|
||||
@@ -73,7 +73,7 @@ const tabs = [
|
||||
{ label: '3rd child', value: 'third', active: false },
|
||||
];
|
||||
|
||||
export const WithTabs: Story = (args) => {
|
||||
export const WithTabs: StoryFn = (args) => {
|
||||
const [activeTab, setActiveTab] = useState('first');
|
||||
const modalHeader = (
|
||||
<ModalTabsHeader
|
||||
@@ -103,7 +103,7 @@ WithTabs.args = {
|
||||
icon: 'cog',
|
||||
};
|
||||
|
||||
export const UsingContentClassName: Story = ({ title, body, ...args }) => {
|
||||
export const UsingContentClassName: StoryFn = ({ title, body, ...args }) => {
|
||||
const override = {
|
||||
modalContent: css({
|
||||
backgroundColor: 'darkorange',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Pagination } from './Pagination';
|
||||
|
||||
<Meta title="MDX|Pagination" component={Pagination} />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { Meta, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Preview } from '@storybook/blocks';
|
||||
import { PanelChrome } from './PanelChrome';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { auto } from '@popperjs/core';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { SelectableValue, toIconName } from '@grafana/data';
|
||||
@@ -88,7 +88,7 @@ interface StoryProps extends Partial<SelectCommonProps<string>> {
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export const Basic: Story<StoryProps> = (args) => {
|
||||
export const Basic: StoryFn<StoryProps> = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@@ -106,7 +106,7 @@ export const Basic: Story<StoryProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicVirtualizedList: Story<StoryProps> = (args) => {
|
||||
export const BasicVirtualizedList: StoryFn<StoryProps> = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@@ -128,7 +128,7 @@ export const BasicVirtualizedList: Story<StoryProps> = (args) => {
|
||||
/**
|
||||
* Uses plain values instead of SelectableValue<T>
|
||||
*/
|
||||
export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
|
||||
export const BasicSelectPlainValue: StoryFn<StoryProps> = (args) => {
|
||||
const [value, setValue] = useState<string>();
|
||||
return (
|
||||
<>
|
||||
@@ -149,7 +149,7 @@ export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
|
||||
/**
|
||||
* Uses plain values instead of SelectableValue<T>
|
||||
*/
|
||||
export const SelectWithOptionDescriptions: Story = (args) => {
|
||||
export const SelectWithOptionDescriptions: StoryFn = (args) => {
|
||||
// TODO this is not working with new Select
|
||||
|
||||
const [value, setValue] = useState<number>();
|
||||
@@ -183,7 +183,7 @@ export const SelectWithOptionDescriptions: Story = (args) => {
|
||||
/**
|
||||
* Uses plain values instead of SelectableValue<T>
|
||||
*/
|
||||
export const MultiPlainValue: Story = (args) => {
|
||||
export const MultiPlainValue: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<string[]>();
|
||||
|
||||
return (
|
||||
@@ -201,7 +201,7 @@ export const MultiPlainValue: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const MultiSelectWithOptionGroups: Story = (args) => {
|
||||
export const MultiSelectWithOptionGroups: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<string[]>();
|
||||
|
||||
return (
|
||||
@@ -223,7 +223,7 @@ export const MultiSelectWithOptionGroups: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const MultiSelectBasic: Story = (args) => {
|
||||
export const MultiSelectBasic: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
|
||||
|
||||
return (
|
||||
@@ -249,7 +249,7 @@ MultiSelectBasic.args = {
|
||||
noMultiValueWrap: false,
|
||||
};
|
||||
|
||||
export const MultiSelectAsync: Story = (args) => {
|
||||
export const MultiSelectAsync: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<Array<SelectableValue<string>>>();
|
||||
|
||||
return (
|
||||
@@ -270,7 +270,7 @@ MultiSelectAsync.args = {
|
||||
allowCustomValue: false,
|
||||
};
|
||||
|
||||
export const BasicSelectAsync: Story = (args) => {
|
||||
export const BasicSelectAsync: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@@ -288,7 +288,7 @@ export const BasicSelectAsync: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const AutoMenuPlacement: Story = (args) => {
|
||||
export const AutoMenuPlacement: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@@ -312,7 +312,7 @@ AutoMenuPlacement.args = {
|
||||
menuPlacement: auto,
|
||||
};
|
||||
|
||||
export const WidthAuto: Story = (args) => {
|
||||
export const WidthAuto: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@@ -334,7 +334,7 @@ export const WidthAuto: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomValueCreation: Story = (args) => {
|
||||
export const CustomValueCreation: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
|
||||
const options = generateOptions();
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Spinner } from '@grafana/ui';
|
||||
@@ -29,7 +29,7 @@ interface StoryProps extends Partial<Props> {
|
||||
withStyle: boolean;
|
||||
}
|
||||
|
||||
export const Basic: Story<StoryProps> = (args) => {
|
||||
export const Basic: StoryFn<StoryProps> = (args) => {
|
||||
return (
|
||||
<div>
|
||||
<Spinner
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Switch } from './Switch';
|
||||
|
||||
<Meta title="MDX|Switch" component={Switch} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ArgTypes, Preview } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { Table } from './Table';
|
||||
|
||||
# Table
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
|
||||
@@ -23,7 +23,7 @@ const tabs = [
|
||||
{ label: '3rd child', key: 'third', active: false },
|
||||
];
|
||||
|
||||
export const Simple: Story = () => {
|
||||
export const Simple: StoryFn = () => {
|
||||
const [state, updateState] = useState(tabs);
|
||||
return (
|
||||
<DashboardStoryCanvas>
|
||||
@@ -49,7 +49,7 @@ export const Simple: Story = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Counter: Story<CounterProps> = (args) => {
|
||||
export const Counter: StoryFn<CounterProps> = (args) => {
|
||||
return <TabCounter {...args} />;
|
||||
};
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Text } from './Text';
|
||||
import { TextLink } from '../Link/TextLink.tsx';
|
||||
import { Basic } from './Text.story.tsx';
|
||||
@@ -147,4 +147,4 @@ The Text component can be truncated. However, the Text component element rendere
|
||||
|
||||
## <a name="propstable"/>Props table
|
||||
|
||||
<ArgsTable of={Text} />
|
||||
<ArgTypes of={Text} />
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { TextArea } from '@grafana/ui';
|
||||
@@ -21,7 +21,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: Story = (args) => {
|
||||
export const Basic: StoryFn = (args) => {
|
||||
return (
|
||||
<div style={{ width: args.containerWidth }}>
|
||||
<TextArea invalid={args.invalid} placeholder={args.placeholder} cols={args.cols} disabled={args.disabled} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { EmotionPerfTest } from './EmotionPerfTest';
|
||||
@@ -16,11 +16,11 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const ThemeDemo: Story = () => {
|
||||
export const ThemeDemo: StoryFn = () => {
|
||||
return <NewThemeDemoComponent />;
|
||||
};
|
||||
|
||||
export const PerfTest: Story = () => {
|
||||
export const PerfTest: StoryFn = () => {
|
||||
return <EmotionPerfTest />;
|
||||
};
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { UnitPicker } from './UnitPicker';
|
||||
|
||||
# UnitPicker
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { UserIcon } from './UserIcon';
|
||||
import mdx from './UserIcon.mdx';
|
||||
|
||||
const meta: ComponentMeta<typeof UserIcon> = {
|
||||
const meta: Meta<typeof UserIcon> = {
|
||||
title: 'General/UsersIndicator/UserIcon',
|
||||
component: UserIcon,
|
||||
argTypes: {},
|
||||
@@ -28,7 +28,7 @@ const meta: ComponentMeta<typeof UserIcon> = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: ComponentStory<typeof UserIcon> = (args) => {
|
||||
export const Basic: StoryFn<typeof UserIcon> = (args) => {
|
||||
const userView = {
|
||||
user: {
|
||||
name: 'John Smith',
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { UsersIndicator } from './UsersIndicator';
|
||||
import mdx from './UsersIndicator.mdx';
|
||||
|
||||
const meta: ComponentMeta<typeof UsersIndicator> = {
|
||||
const meta: Meta<typeof UsersIndicator> = {
|
||||
title: 'General/UsersIndicator',
|
||||
component: UsersIndicator,
|
||||
argTypes: { limit: { control: { type: 'number', min: 1 } } },
|
||||
@@ -27,7 +27,7 @@ const meta: ComponentMeta<typeof UsersIndicator> = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: ComponentStory<typeof UsersIndicator> = (args) => {
|
||||
export const Basic: StoryFn<typeof UsersIndicator> = (args) => {
|
||||
const users = [
|
||||
{
|
||||
name: 'John Doe',
|
||||
@@ -50,7 +50,7 @@ Basic.args = {
|
||||
limit: 4,
|
||||
};
|
||||
|
||||
export const WithManyUsers: ComponentStory<typeof UsersIndicator> = (args) => {
|
||||
export const WithManyUsers: StoryFn<typeof UsersIndicator> = (args) => {
|
||||
const users = [
|
||||
{
|
||||
name: 'John Doe',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { ValuePicker } from './ValuePicker';
|
||||
|
||||
<Meta title="MDX|Button" component={ValuePicker} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { VizLayout } from './VizLayout';
|
||||
@@ -25,7 +25,7 @@ const createArray = (legendItems: number) => {
|
||||
return newArray;
|
||||
};
|
||||
|
||||
export const BottomLegend: Story = ({ height, width, legendItems }) => {
|
||||
export const BottomLegend: StoryFn = ({ height, width, legendItems }) => {
|
||||
const [items, setItems] = useState(createArray(legendItems));
|
||||
useEffect(() => {
|
||||
setItems(createArray(legendItems));
|
||||
@@ -55,7 +55,7 @@ BottomLegend.args = {
|
||||
legendItems: 2,
|
||||
};
|
||||
|
||||
export const RightLegend: Story = ({ height, width, legendItems, legendWidth }) => {
|
||||
export const RightLegend: StoryFn = ({ height, width, legendItems, legendWidth }) => {
|
||||
const [items, setItems] = useState(createArray(legendItems));
|
||||
useEffect(() => {
|
||||
setItems(createArray(legendItems));
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React, { FC, useEffect, useState } from 'react';
|
||||
|
||||
import { DisplayValue, GrafanaTheme2 } from '@grafana/data';
|
||||
@@ -73,7 +73,7 @@ const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, n
|
||||
);
|
||||
};
|
||||
|
||||
export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
|
||||
export const WithNoValues: StoryFn = ({ containerWidth, seriesCount }) => {
|
||||
return (
|
||||
<div style={{ width: containerWidth }}>
|
||||
<LegendStoryDemo
|
||||
@@ -98,7 +98,7 @@ export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const WithValues: Story = ({ containerWidth, seriesCount }) => {
|
||||
export const WithValues: StoryFn = ({ containerWidth, seriesCount }) => {
|
||||
const stats: DisplayValue[] = [
|
||||
{
|
||||
title: 'Min',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story } from '@storybook/react';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { GraphSeriesXY, FieldType, dateTime, FieldColorModeId } from '@grafana/data';
|
||||
@@ -97,7 +97,7 @@ interface StoryProps extends GraphWithLegendProps {
|
||||
displayMode: string;
|
||||
}
|
||||
|
||||
export const WithLegend: Story<StoryProps> = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
|
||||
export const WithLegend: StoryFn<StoryProps> = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
|
||||
const props: Partial<GraphWithLegendProps> = {
|
||||
series: series.map((s) => {
|
||||
if (
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { getAvailableIcons } from '../../types';
|
||||
|
||||
export const iconOptions = {
|
||||
export const iconOptions: Record<string, string | undefined> = {
|
||||
None: undefined,
|
||||
...getAvailableIcons().reduce<Record<string, string>>((prev, c) => {
|
||||
return {
|
||||
...prev,
|
||||
[`Icon: ${c}`]: `${c}`,
|
||||
[`${c}`]: `Icon: ${c}`,
|
||||
};
|
||||
}, {}),
|
||||
};
|
||||
@@ -1 +1,4 @@
|
||||
export const SpacingTokenControl = { control: 'select', options: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10] };
|
||||
export const SpacingTokenControl = {
|
||||
control: 'select' as const,
|
||||
options: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10],
|
||||
};
|
||||
@@ -1,5 +1,5 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { DecoratorFn } from '@storybook/react';
|
||||
import { Args, Decorator } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
@@ -43,13 +43,9 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props
|
||||
);
|
||||
};
|
||||
|
||||
export const withStoryContainer: DecoratorFn = (story, context) => {
|
||||
export const withStoryContainer: Decorator<Args> = (story, { args }) => {
|
||||
return (
|
||||
<StoryContainer
|
||||
width={context.args.containerWidth}
|
||||
height={context.args.containerHeight}
|
||||
showBoundaries={context.args.showBoundaries}
|
||||
>
|
||||
<StoryContainer width={args.containerWidth} height={args.containerHeight} showBoundaries={args.showBoundaries}>
|
||||
{story()}
|
||||
</StoryContainer>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { DecoratorFn } from '@storybook/react';
|
||||
import { Decorator } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { useDarkMode } from 'storybook-dark-mode';
|
||||
|
||||
@@ -51,6 +51,6 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
|
||||
};
|
||||
|
||||
export const withTheme =
|
||||
(handleSassThemeChange: SassThemeChangeHandler): DecoratorFn =>
|
||||
(handleSassThemeChange: SassThemeChangeHandler): Decorator =>
|
||||
// eslint-disable-next-line react/display-name
|
||||
(story) => <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Story } from '@storybook/react';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { useDelayedSwitch } from './useDelayedSwitch';
|
||||
@@ -7,7 +7,7 @@ export default {
|
||||
title: 'useDelayedSwitch',
|
||||
};
|
||||
|
||||
export const Basic: Story = ({ value, delay, duration }) => {
|
||||
export const Basic: StoryFn = ({ value, delay, duration }) => {
|
||||
const valueDelayed = useDelayedSwitch(value, { delay, duration });
|
||||
return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
|
||||
};
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"react-select-event": "5.5.1",
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-test-renderer": "18.3.0",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.4.5",
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"css-loader": "7.1.1",
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"@types/uuid": "9.0.8",
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/logfmt": "^1.2.3",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-window": "1.8.8",
|
||||
"@types/uuid": "9.0.8",
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.4.5",
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
"@testing-library/user-event": "14.5.2",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.4.5",
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/semver": "7.5.8",
|
||||
"@types/uuid": "9.0.8",
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.4.5",
|
||||
|
||||
Loaded 100 of 101 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user