@storybook/blocks 7.0.0-alpha.53 → 7.0.0-alpha.55

package/dist/Color-CUYN57MU.mjs

@@ -0,0 +1 @@
+import{getControlId}from"./chunk-GWAJ4KRU.mjs";import React,{useCallback,useEffect,useMemo,useState}from"react";import{HexColorPicker,HslaStringColorPicker,RgbaStringColorPicker}from"react-colorful";import convert from"color-convert";import throttle from"lodash/throttle";import{styled}from"@storybook/theming";import{TooltipNote,WithTooltip,Form,Icons}from"@storybook/components";var Wrapper=styled.div({position:"relative",maxWidth:250}),PickerTooltip=styled(WithTooltip)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=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=styled(TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=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,active,onClick,style,...props})=>{let backgroundImage=`linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(#fff, #fff)`;return React.createElement(SwatchColor,{...props,...{active,onClick},style:{...style,backgroundImage}})},Input=styled(Form.Input)(({theme})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=styled(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"]:HexColorPicker,["rgb"]:RgbaStringColorPicker,["hsl"]:HslaStringColorPicker},fallbackColor={["hex"]:"transparent",["rgb"]:"rgba(0, 0, 0, 0)",["hsl"]:"hsla(0, 0%, 0%, 0)"},stringToArgs=value=>{let match=value?.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=value=>{if(!value)return;let valid=!0;if(RGB_REGEXP.test(value)){let[r,g,b,a]=stringToArgs(value),[h,s,l]=convert.rgb.hsl([r,g,b])||[0,0,0];return{valid,value,keyword:convert.rgb.keyword([r,g,b]),colorSpace:"rgb",["rgb"]:value,["hsl"]:`hsla(${h}, ${s}%, ${l}%, ${a})`,["hex"]:`#${convert.rgb.hex([r,g,b]).toLowerCase()}`}}if(HSL_REGEXP.test(value)){let[h,s,l,a]=stringToArgs(value),[r,g,b]=convert.hsl.rgb([h,s,l])||[0,0,0];return{valid,value,keyword:convert.hsl.keyword([h,s,l]),colorSpace:"hsl",["rgb"]:`rgba(${r}, ${g}, ${b}, ${a})`,["hsl"]:value,["hex"]:`#${convert.hsl.hex([h,s,l]).toLowerCase()}`}}let plain=value.replace("#",""),rgb=convert.keyword.rgb(plain)||convert.hex.rgb(plain),hsl=convert.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped=`#${plain}`),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{convert.keyword.hex(mapped)}catch{valid=!1}return{valid,value:mapped,keyword:convert.rgb.keyword(rgb),colorSpace:"hex",["rgb"]:`rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`,["hsl"]:`hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, 1)`,["hex"]:mapped}},getRealValue=(value,color,colorSpace)=>{if(!value||!color?.valid)return fallbackColor[colorSpace];if(colorSpace!=="hex")return color?.[colorSpace]||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return`#${convert.keyword.hex(color.hex)}`}catch{return fallbackColor.hex}let short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;let[r,g,b]=short[1].split("");return`#${r}${r}${g}${g}${b}${b}`},useColorInput=(initialValue,onChange)=>{let[value,setValue]=useState(initialValue||""),[color,setColor]=useState(()=>parseValue(value)),[colorSpace,setColorSpace]=useState(color?.colorSpace||"hex");useEffect(()=>{initialValue===void 0&&(setValue(""),setColor(void 0),setColorSpace("hex"))},[initialValue]);let realValue=useMemo(()=>getRealValue(value,color,colorSpace).toLowerCase(),[value,color,colorSpace]),updateValue=useCallback(update=>{let parsed=parseValue(update),v=parsed?.value||update||"";setValue(v),v===""&&(setColor(void 0),onChange(void 0)),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))},[onChange]),cycleColorSpace=useCallback(()=>{let next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);let update=color?.[COLOR_SPACES[next]]||"";setValue(update),onChange(update)},[color,colorSpace,onChange]);return{value,realValue,updateValue,color,colorSpace,cycleColorSpace}},id=value=>value.replace(/\s*/,"").toLowerCase(),usePresets=(presetColors,currentColor,colorSpace)=>{let[selectedColors,setSelectedColors]=useState(currentColor?.valid?[currentColor]:[]);useEffect(()=>{currentColor===void 0&&setSelectedColors([])},[currentColor]);let presets=useMemo(()=>(presetColors||[]).map(preset=>typeof preset=="string"?parseValue(preset):preset.title?{...parseValue(preset.color),keyword:preset.title}:parseValue(preset.color)).concat(selectedColors).filter(Boolean).slice(-27),[presetColors,selectedColors]),addPreset=useCallback(color=>{!color?.valid||presets.some(preset=>id(preset[colorSpace])===id(color[colorSpace]))||setSelectedColors(arr=>arr.concat(color))},[colorSpace,presets]);return{presets,addPreset}},ColorControl=({name,value:initialValue,onChange,onFocus,onBlur,presetColors,startOpen=!1})=>{let throttledOnChange=useCallback(throttle(onChange,200),[onChange]),{value,realValue,updateValue,color,colorSpace,cycleColorSpace}=useColorInput(initialValue,throttledOnChange),{presets,addPreset}=usePresets(presetColors,color,colorSpace),Picker=ColorPicker[colorSpace];return React.createElement(Wrapper,null,React.createElement(PickerTooltip,{trigger:"click",startOpen,closeOnClick:!0,onVisibilityChange:()=>addPreset(color),tooltip:React.createElement(TooltipContent,null,React.createElement(Picker,{color:realValue==="transparent"?"#000000":realValue,...{onChange:updateValue,onFocus,onBlur}}),presets.length>0&&React.createElement(Swatches,null,presets.map((preset,index)=>React.createElement(WithTooltip,{key:`${preset.value}-${index}`,hasChrome:!1,tooltip:React.createElement(Note,{note:preset.keyword||preset.value})},React.createElement(Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:()=>updateValue(preset.value)})))))},React.createElement(Swatch,{value:realValue,style:{margin:4}})),React.createElement(Input,{id:getControlId(name),value,onChange:e=>updateValue(e.target.value),onFocus:e=>e.target.select(),placeholder:"Choose color..."}),value?React.createElement(ToggleIcon,{icon:"markup",onClick:cycleColorSpace}):null)},Color_default=ColorControl;export{ColorControl,Color_default as default};

package/dist/chunk-GWAJ4KRU.mjs

@@ -0,0 +1 @@
+var getControlId=value=>`control-${value.replace(/\s+/g,"-")}`,getControlSetterButtonId=value=>`set-${value.replace(/\s+/g,"-")}`;export{getControlId,getControlSetterButtonId};

package/dist/index.d.ts

@@ -1,7 +1,7 @@
+import { Conditional, Parameters, DocsContextProps, Renderer, StrictArgTypes, StoryId, ProjectAnnotations, BaseAnnotations, ModuleExports, PreparedStory, StoryAnnotations, ModuleExport, ComponentTitle } from '@storybook/types';
+export { DocsContextProps } from '@storybook/types';
 import React, { FunctionComponent, ComponentProps, ReactNode, FC, ElementType, Context } from 'react';
-import { Conditional, Parameters, Renderer, Store_PropDescriptor, StrictArgTypes, StoryId, ProjectAnnotations, BaseAnnotations, Store_ModuleExports, Store_Story, StoryAnnotations, Store_ModuleExport, ComponentTitle } from '@storybook/types';
-import { DocsContextProps } from '@storybook/preview-web';
-export { DocsContextProps } from '@storybook/preview-web';
+import { PropDescriptor } from '@storybook/preview-api';
 import { SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from '@storybook/components';
 import { Channel } from '@storybook/channels';
 import { ThemeVars } from '@storybook/theming';
@@ -190,8 +190,8 @@ type DocsStoryProps = StoryData & {
 };
 
 interface BaseProps {
-    include?: Store_PropDescriptor;
-    exclude?: Store_PropDescriptor;
+    include?: PropDescriptor;
+    exclude?: PropDescriptor;
     sort?: SortType;
 }
 type OfProps = BaseProps & {
@@ -207,7 +207,7 @@ type StoryProps$1 = BaseProps & {
     showComponent?: boolean;
 };
 type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps$1;
-declare const extractComponentArgTypes: (component: Component, context: DocsContextProps, include?: Store_PropDescriptor, exclude?: Store_PropDescriptor) => StrictArgTypes;
+declare const extractComponentArgTypes: (component: Component, context: DocsContextProps, include?: PropDescriptor, exclude?: PropDescriptor) => StrictArgTypes;
 declare const getComponent: (props: ArgsTableProps, context: DocsContextProps) => Component;
 declare const StoryTable: FC<StoryProps$1 & {
     component: Component;
@@ -264,7 +264,7 @@ declare const useSourceProps: (props: SourceProps, docsContext: DocsContextProps
  */
 declare const Source: FC<PureSourceProps>;
 
-type CanvasProps = Omit<PreviewProps, 'isExpanded'> & {
+type CanvasProps = Omit<PreviewProps, 'isExpanded' | 'isLoading'> & {
     withSource?: SourceState;
     mdxSource?: string;
 };
@@ -274,16 +274,24 @@ declare enum DescriptionType {
     INFO = "info",
     NOTES = "notes",
     DOCGEN = "docgen",
-    LEGACY_5_2 = "legacy-5.2",
     AUTO = "auto"
 }
 interface DescriptionProps {
     of?: '.' | Component;
+    /**
+     * @deprecated Manually specifying description type is deprecated. In the future all descriptions will be extracted from JSDocs on the meta, story or component.
+     */
     type?: DescriptionType;
+    /**
+     * @deprecated The 'markdown' prop on the Description block is deprecated. Write the markdown directly in the .mdx file instead
+     */
     markdown?: string;
+    /**
+     * @deprecated The 'children' prop on the Description block is deprecated. Write the markdown directly in the .mdx file instead
+     */
     children?: string;
 }
-declare const getDescriptionProps: ({ of, type, markdown, children }: DescriptionProps, { storyById }: DocsContextProps<any>) => DescriptionProps$1;
+declare const useDescriptionProps: ({ of, type, markdown, children }: DescriptionProps, { storyById }: DocsContextProps<any>) => DescriptionProps$1;
 declare const DescriptionContainer: FC<DescriptionProps>;
 
 type DocsProps<TFramework extends Renderer = Renderer> = {
@@ -319,7 +327,7 @@ interface HeadingProps {
 declare const Heading: FC<HeadingProps>;
 
 type MetaProps = BaseAnnotations & {
-    of?: Store_ModuleExports;
+    of?: ModuleExports;
 };
 /**
  * This component is used to declare component metadata in docs
@@ -349,15 +357,15 @@ type StoryDefProps = {
 };
 type StoryRefProps = {
     id?: string;
-    of?: Store_ModuleExport;
-    meta?: Store_ModuleExports;
+    of?: ModuleExport;
+    meta?: ModuleExports;
 };
 type StoryImportProps = {
     name: string;
 };
 type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
 declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
-declare const getStoryProps: <TFramework extends Renderer>({ height, inline }: StoryProps, story: Store_Story<TFramework>) => PureStoryProps;
+declare const getStoryProps: <TFramework extends Renderer>({ height, inline }: StoryProps, story: PreparedStory<TFramework>) => PureStoryProps;
 declare const Story: FC<StoryProps>;
 
 declare const Subheading: FC<HeadingProps>;
@@ -457,9 +465,16 @@ type ColorControlProps = ControlProps<ColorValue> & ColorConfig;
 
 type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
 /**
- * # Boolean control
+ * # Boolean Control
  * Renders a switch toggle with "True" or "False".
  * or if the value is `undefined`, renders a button to set the boolean.
+ *
+ * ## Example usage
+ *
+ * ```
+ *
+ * <BooleanControl name="isTrue" value={value} onChange={handleValueChange}/>
+ * ```
  */
 declare const BooleanControl: FC<BooleanProps>;
 
@@ -509,4 +524,4 @@ type ColorProps = ColorControlProps;
 declare const LazyColorControl: React.LazyExoticComponent<React.FC<ColorControlProps>>;
 declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => JSX.Element;
 
-export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgsTable, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, ComponentsTable, 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, Meta, NoControlsWarning, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable$1 as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceState, Stories, Story, StoryData, StoryProps, StorySources, StoryTable, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, Wrapper, anchorBlockIdFromId, assertIsFn, extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getDescriptionProps, getStoryId, getStoryProps, parse, parseDate, parseTime, storyBlockIdFromId, useSourceProps };
+export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgsTable, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, ComponentsTable, 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, Meta, NoControlsWarning, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable$1 as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceState, Stories, Story, StoryData, StoryProps, StorySources, StoryTable, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, Wrapper, anchorBlockIdFromId, assertIsFn, extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId, getStoryProps, parse, parseDate, parseTime, storyBlockIdFromId, useDescriptionProps, useSourceProps };