@storybook/blocks 7.1.0-alpha.8 → 7.1.0-beta.0

package/dist/Color-6VNJS4EI.mjs

@@ -0,0 +1,11 @@
+import { getControlId } from './chunk-GWAJ4KRU.mjs';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { HexColorPicker, RgbaStringColorPicker, HslaStringColorPicker } from 'react-colorful';
+import convert from 'color-convert';
+import throttle from 'lodash/throttle.js';
+import { styled } from '@storybook/theming';
+import { WithTooltip, TooltipNote, 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,{startOpen,closeOnOutsideClick:!0,onVisibleChange:()=>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

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

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import * as _storybook_types from '@storybook/types';
 import { Conditional, DocsContextProps, PreparedStory, ModuleExports, ModuleExport, Parameters as Parameters$1, StrictArgTypes, Renderer as Renderer$1, Args as Args$1, StoryId, StoryContextForLoaders, StoryAnnotations, ResolvedModuleExportType, ResolvedModuleExportFromType, ProjectAnnotations, BaseAnnotations, ComponentTitle } from '@storybook/types';
 export { DocsContextProps } from '@storybook/types';
 import React, { ComponentProps, FunctionComponent, ReactNode, FC, PropsWithChildren, Context } from 'react';
@@ -105,7 +104,7 @@ type ArgsTableProps$1 = ArgsTableOptionProps & (ArgsTableDataProps | ArgsTableEr
  */
 declare const ArgsTable$1: FC<ArgsTableProps$1>;
 
-declare const NoControlsWarning: () => JSX.Element;
+declare const NoControlsWarning: () => React.JSX.Element;
 
 interface CommonProps {
     story: PreparedStory;
@@ -471,7 +470,7 @@ type Of = Parameters<DocsContextProps['resolveOf']>[0];
  * 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: <TType extends ResolvedModuleExportType>(moduleExportOrType: Of, validTypes?: TType[]) => ResolvedModuleExportFromType<TType, _storybook_types.Renderer>;
+declare const useOf: <TType extends ResolvedModuleExportType>(moduleExportOrType: Of, validTypes?: TType[]) => ResolvedModuleExportFromType<TType>;
 
 declare enum DescriptionType {
     INFO = "info",
@@ -500,11 +499,11 @@ interface DescriptionProps {
 }
 declare const DescriptionContainer: FC<DescriptionProps>;
 
-type DocsProps<TFramework extends Renderer$1 = Renderer$1> = {
+type DocsProps<TRenderer extends Renderer$1 = Renderer$1> = {
     docsParameter: Parameters$1;
-    context: DocsContextProps<TFramework>;
+    context: DocsContextProps<TRenderer>;
 };
-declare const Docs: FunctionComponent<DocsProps>;
+declare function Docs<TRenderer extends Renderer$1 = Renderer$1>({ context, docsParameter, }: DocsProps<TRenderer>): React.JSX.Element;
 
 declare const DocsPage: FC;
 
@@ -516,10 +515,10 @@ declare const DocsContainer: FC<PropsWithChildren<DocsContainerProps>>;
 
 declare const DocsStory: FC<DocsStoryProps>;
 
-type ExternalDocsProps<TFramework extends Renderer$1 = Renderer$1> = {
-    projectAnnotationsList: ProjectAnnotations<TFramework>[];
+type ExternalDocsProps<TRenderer extends Renderer$1 = Renderer$1> = {
+    projectAnnotationsList: ProjectAnnotations<TRenderer>[];
 };
-declare const ExternalDocs: FunctionComponent<ExternalDocsProps>;
+declare function ExternalDocs<TRenderer extends Renderer$1 = Renderer$1>({ projectAnnotationsList, children, }: PropsWithChildren<ExternalDocsProps<TRenderer>>): React.JSX.Element;
 
 declare const ExternalDocsContainer: React.FC<{
     projectAnnotations: any;
@@ -531,7 +530,7 @@ interface HeadingProps {
 declare const Heading: FC<PropsWithChildren<HeadingProps>>;
 
 type MarkdownProps = typeof PureMarkdown extends React.ComponentType<infer Props> ? Props : never;
-declare const Markdown: (props: MarkdownProps) => JSX.Element;
+declare const Markdown: (props: MarkdownProps) => React.JSX.Element;
 
 type MetaProps = BaseAnnotations & {
     of?: ModuleExports;
@@ -711,6 +710,6 @@ declare const FilesControl: FC<FilesControlProps>;
 
 type ColorProps = ColorControlProps;
 declare const LazyColorControl: React.LazyExoticComponent<React.FC<ColorControlProps>>;
-declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => JSX.Element;
+declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => React.JSX.Element;
 
 export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgTypes, 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, Markdown, 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, SourceProps, SourceState, Stories, Story, StoryProps, StorySources, StoryTable, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId, getStoryProps, parse, parseDate, parseTime, useOf, useSourceProps };