@storybook/blocks 7.0.0-beta.3 → 7.0.0-beta.30

package/dist/Color-32FDEX32.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.js";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(()=>{let nextValue=initialValue||"",nextColor=parseValue(nextValue);setValue(nextValue),setColor(nextColor),setColorSpace(nextColor?.colorSpace||"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/index.d.ts

@@ -1,6 +1,7 @@
-import { Conditional, Parameters, DocsContextProps, Renderer, StrictArgTypes, StoryId, ProjectAnnotations, BaseAnnotations, ModuleExports, PreparedStory, StoryAnnotations, ModuleExport, ComponentTitle } from '@storybook/types';
+import * as _storybook_types from '@storybook/types';
+import { Conditional, DocsContextProps, PreparedStory, Renderer, StrictArgTypes, StoryId, ResolvedModuleExport, Parameters as Parameters$1, ProjectAnnotations, BaseAnnotations, ModuleExports, StoryAnnotations, ModuleExport, ComponentTitle } from '@storybook/types';
 export { DocsContextProps } from '@storybook/types';
-import React, { FunctionComponent, ComponentProps, ReactNode, FC, ElementType, Context } from 'react';
+import React, { FunctionComponent, ComponentProps, ReactNode, FC, Context } from 'react';
 import { PropDescriptor } from '@storybook/preview-api';
 import { SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from '@storybook/components';
 import { Channel } from '@storybook/channels';
@@ -26,10 +27,6 @@ type SourceProps$1 = SourceErrorProps & SourceCodeProps;
  */
 declare const Source$1: FunctionComponent<SourceProps$1>;
 
-interface DescriptionProps$1 {
-    markdown: string;
-}
-
 interface PreviewProps {
     isLoading?: true;
     isColumn?: boolean;
@@ -94,29 +91,26 @@ declare const ArgsTable$1: FC<ArgsTableProps$1>;
 
 declare const NoControlsWarning: () => JSX.Element;
 
-declare enum StoryError {
-    NO_STORY = "No component or story to display"
+interface CommonProps$1 {
+    story: PreparedStory;
+    inline: boolean;
 }
-interface CommonProps$2 {
-    title?: string;
+interface InlineStoryProps extends CommonProps$1 {
+    inline: true;
     height?: string;
-    id: string;
+    autoplay: boolean;
+    renderStoryToElement: DocsContextProps['renderStoryToElement'];
 }
-interface InlineStoryProps extends CommonProps$2 {
-    parameters: Parameters;
-    storyFn: ElementType;
+interface IFrameStoryProps extends CommonProps$1 {
+    inline: false;
+    height: string;
 }
-type IFrameStoryProps = CommonProps$2;
 type StoryProps$2 = InlineStoryProps | IFrameStoryProps;
 /**
  * A story element, either rendered inline or in an iframe,
  * with configurable height.
  */
-declare const Story$1: FunctionComponent<StoryProps$2 & {
-    inline?: boolean;
-    error?: StoryError;
-    children?: React.ReactNode;
-}>;
+declare const Story$1: FunctionComponent<StoryProps$2>;
 
 interface TypesetProps {
     fontFamily?: string;
@@ -235,7 +229,7 @@ declare enum SourceState {
     CLOSED = "closed",
     NONE = "none"
 }
-interface CommonProps$1 {
+interface CommonProps {
     language?: string;
     dark?: boolean;
     format?: PureSourceProps['format'];
@@ -243,14 +237,14 @@ interface CommonProps$1 {
 }
 type SingleSourceProps = {
     id: string;
-} & CommonProps$1;
+} & CommonProps;
 type MultiSourceProps = {
     ids: string[];
-} & CommonProps$1;
+} & CommonProps;
 type CodeProps = {
     code: string;
-} & CommonProps$1;
-type NoneProps = CommonProps$1;
+} & CommonProps;
+type NoneProps = CommonProps;
 type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
 type SourceStateProps = {
     state: SourceState;
@@ -267,9 +261,30 @@ declare const Source: FC<PureSourceProps>;
 type CanvasProps = Omit<PreviewProps, 'isExpanded' | 'isLoading'> & {
     withSource?: SourceState;
     mdxSource?: string;
+    children?: ReactNode;
 };
 declare const Canvas: FC<CanvasProps>;
 
+type Of = Parameters<DocsContextProps['resolveModuleExport']>[0];
+/**
+ * A hook to resolve the `of` prop passed to a block.
+ * will return the resolved module
+ * if the resolved module is a meta it will include a preparedMeta property similar to a preparedStory
+ * if the resolved module is a component it will include the project annotations
+ */
+declare const useOf: (of: Of, validTypes?: ResolvedModuleExport['type'][]) => {
+    type: "story";
+    story: _storybook_types.PreparedStory<_storybook_types.Renderer>;
+} | {
+    projectAnnotations: _storybook_types.NormalizedProjectAnnotations<_storybook_types.Renderer>;
+    type: "component";
+    component: unknown;
+} | {
+    preparedMeta: _storybook_types.PreparedMeta<_storybook_types.Renderer>;
+    type: "meta";
+    csfFile: _storybook_types.CSFFile<_storybook_types.Renderer>;
+};
+
 declare enum DescriptionType {
     INFO = "info",
     NOTES = "notes",
@@ -277,25 +292,28 @@ declare enum DescriptionType {
     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.
+     * Specify where to get the description from. Can be a component, a CSF file or a story.
+     * If not specified, the description will be extracted from the meta of the attached CSF file.
+     */
+    of?: Of;
+    /**
+     * @deprecated Manually specifying description type is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
      */
     type?: DescriptionType;
     /**
-     * @deprecated The 'markdown' prop on the Description block is deprecated. Write the markdown directly in the .mdx file instead
+     * @deprecated The 'markdown' prop on the Description block is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
      */
     markdown?: string;
     /**
-     * @deprecated The 'children' prop on the Description block is deprecated. Write the markdown directly in the .mdx file instead
+     * @deprecated The 'children' prop on the Description block is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
      */
     children?: string;
 }
-declare const useDescriptionProps: ({ of, type, markdown, children }: DescriptionProps, { storyById }: DocsContextProps<any>) => DescriptionProps$1;
 declare const DescriptionContainer: FC<DescriptionProps>;
 
 type DocsProps<TFramework extends Renderer = Renderer> = {
-    docsParameter: Parameters;
+    docsParameter: Parameters$1;
     context: DocsContextProps<TFramework>;
 };
 declare const Docs: FunctionComponent<DocsProps>;
@@ -348,24 +366,61 @@ declare const Stories: FC<StoriesProps>;
 
 declare const storyBlockIdFromId: (storyId: string) => string;
 type PureStoryProps = ComponentProps<typeof Story$1>;
-type CommonProps = StoryAnnotations & {
-    height?: string;
-    inline?: boolean;
-};
-type StoryDefProps = {
-    name: string;
-};
+/**
+ * Props to define a story
+ *
+ * @deprecated Define stories in CSF files
+ */
+type StoryDefProps = StoryAnnotations;
+/**
+ * Props to reference another story
+ */
 type StoryRefProps = {
+    /**
+     * @deprecated Use of={storyExport} instead
+     */
     id?: string;
+    /**
+     * Pass the export defining a story to render that story
+     *
+     * ```jsx
+     * import { Meta, Story } from '@storybook/blocks';
+     * import * as ButtonStories from './Button.stories';
+     *
+     * <Meta of={ButtonStories} />
+     * <Story of={ButtonStories.Primary} />
+     * ```
+     */
     of?: ModuleExport;
+    /**
+     * Pass all exports of the CSF file if this MDX file is unattached
+     *
+     * ```jsx
+     * import { Story } from '@storybook/blocks';
+     * import * as ButtonStories from './Button.stories';
+     *
+     * <Story of={ButtonStories.Primary} meta={ButtonStories} />
+     * ```
+     */
     meta?: ModuleExports;
 };
-type StoryImportProps = {
-    name: string;
+type StoryParameters = {
+    /**
+     * Render the story inline or in an iframe
+     */
+    inline?: boolean;
+    /**
+     * When rendering in an iframe (`inline={false}`), set the story height
+     */
+    height?: string;
+    /**
+     * Whether to run the story's play function
+     */
+    autoplay?: boolean;
 };
-type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
+type StoryProps = (StoryDefProps | StoryRefProps) & StoryParameters;
 declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
-declare const getStoryProps: <TFramework extends Renderer>({ height, inline }: StoryProps, story: PreparedStory<TFramework>) => PureStoryProps;
+declare const getStoryProps: <TFramework extends Renderer>(props: StoryParameters, story: PreparedStory<TFramework>, context: DocsContextProps<TFramework>) => PureStoryProps;
 declare const Story: FC<StoryProps>;
 
 declare const Subheading: FC<HeadingProps>;
@@ -381,6 +436,8 @@ interface TitleProps {
 declare const extractTitle: (title: ComponentTitle) => string;
 declare const Title: FunctionComponent<TitleProps>;
 
+declare const Unstyled: React.FC;
+
 declare const Wrapper: FC;
 
 declare const assertIsFn: (val: any) => any;
@@ -524,4 +581,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, getStoryId, getStoryProps, parse, parseDate, parseTime, storyBlockIdFromId, useDescriptionProps, 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, Of, 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, Unstyled, Wrapper, anchorBlockIdFromId, assertIsFn, extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId, getStoryProps, parse, parseDate, parseTime, storyBlockIdFromId, useOf, useSourceProps };