@storybook/addon-controls 8.1.0-alpha.7 → 8.1.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/manager.js +8 -4
- package/package.json +12 -10
package/dist/manager.js
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { AddonPanel, Spaced, Badge } from '@storybook/components';
|
|
1
|
+
import React, { useState, useEffect, useMemo } from 'react';
|
|
2
|
+
import { dequal } from 'dequal';
|
|
3
|
+
import { Bar as Bar$1, Form, AddonPanel, Spaced, Badge, WithTooltip, TooltipNote, IconButton, Modal, Button } from '@storybook/components';
|
|
4
|
+
import { SAVE_STORY_RESPONSE, SAVE_STORY_REQUEST } from '@storybook/core-events';
|
|
5
|
+
import { addons, types, useArgs, useGlobals, useArgTypes, useParameter, useStorybookState, experimental_requestResponse } from '@storybook/manager-api';
|
|
6
|
+
import { keyframes, styled, color } from '@storybook/theming';
|
|
4
7
|
import { PureArgsTable } from '@storybook/blocks';
|
|
8
|
+
import { CheckIcon, AddIcon, UndoIcon } from '@storybook/icons';
|
|
5
9
|
|
|
6
|
-
var ADDON_ID="addon-controls",PARAM_KEY="controls";var ControlsPanel=()=>{let[isLoading,setIsLoading]=useState(!0),[args,updateArgs,resetArgs]=useArgs(),[globals]=useGlobals(),rows=useArgTypes(),{expanded,sort,presetColors}=useParameter(PARAM_KEY,{}),{path,previewInitialized}=useStorybookState();useEffect(()=>{previewInitialized&&setIsLoading(!1);},[previewInitialized]);let hasControls=Object.values(rows).some(arg=>arg?.control),withPresetColors=Object.entries(rows).reduce((acc,[key,arg])=>
|
|
10
|
+
var scope=(()=>{let win;return typeof window<"u"?win=window:typeof globalThis<"u"?win=globalThis:typeof global<"u"?win=global:typeof self<"u"?win=self:win={},win})();var ADDON_ID="addon-controls",PARAM_KEY="controls";var slideIn=keyframes({from:{transform:"translateY(40px)"},to:{transform:"translateY(0)"}}),highlight=keyframes({from:{background:"var(--highlight-bg-color)"},to:{}}),Container=styled.div({containerType:"size",position:"sticky",bottom:0,height:39,overflow:"hidden",zIndex:1}),Bar=styled(Bar$1)(({theme})=>({"--highlight-bg-color":theme.base==="dark"?"#153B5B":"#E0F0FF",display:"flex",flexDirection:"row-reverse",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,padding:"6px 10px",animation:`${slideIn} 300ms, ${highlight} 2s`,background:theme.background.bar,borderTop:`1px solid ${theme.appBorderColor}`,fontSize:theme.typography.size.s2,"@container (max-width: 799px)":{flexDirection:"row",justifyContent:"flex-end"}})),Info=styled.div({display:"flex",flex:"99 0 auto",alignItems:"center",marginLeft:10,gap:6}),Actions=styled.div(({theme})=>({display:"flex",flex:"1 0 0",alignItems:"center",gap:2,color:theme.color.mediumdark,fontSize:theme.typography.size.s2})),Label=styled.div({"@container (max-width: 799px)":{lineHeight:0,textIndent:"-9999px","&::after":{content:"attr(data-short-label)",display:"block",lineHeight:"initial",textIndent:"0"}}}),ModalInput=styled(Form.Input)(({theme})=>({"::placeholder":{color:theme.color.mediumdark},"&:invalid:not(:placeholder-shown)":{boxShadow:`${theme.color.negative} 0 0 0 1px inset`}})),SaveStory=({saveStory,createStory,resetArgs})=>{let inputRef=React.useRef(null),[saving,setSaving]=React.useState(!1),[creating,setCreating]=React.useState(!1),[storyName,setStoryName]=React.useState(""),[errorMessage,setErrorMessage]=React.useState(null),onSaveStory=async()=>{saving||(setSaving(!0),await saveStory().catch(()=>{}),setSaving(!1));},onShowForm=()=>{setCreating(!0),setStoryName(""),setTimeout(()=>inputRef.current?.focus(),0);},onChange=e=>{let value=e.target.value.replace(/^[^a-z]/i,"").replace(/[^a-z0-9-_ ]/gi,"").replaceAll(/([-_ ]+[a-z0-9])/gi,match=>match.toUpperCase().replace(/[-_ ]/g,""));setStoryName(value.charAt(0).toUpperCase()+value.slice(1));};return React.createElement(Container,null,React.createElement(Bar,null,React.createElement(Actions,null,React.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React.createElement(TooltipNote,{note:"Save changes to story"})},React.createElement(IconButton,{"aria-label":"Save changes to story",disabled:saving,onClick:onSaveStory},React.createElement(CheckIcon,null),React.createElement(Label,{"data-short-label":"Save"},"Update story"))),React.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React.createElement(TooltipNote,{note:"Create new story with these settings"})},React.createElement(IconButton,{"aria-label":"Create new story with these settings",onClick:onShowForm},React.createElement(AddIcon,null),React.createElement(Label,{"data-short-label":"New"},"Create new story"))),React.createElement(WithTooltip,{as:"div",hasChrome:!1,trigger:"hover",tooltip:React.createElement(TooltipNote,{note:"Reset changes"})},React.createElement(IconButton,{"aria-label":"Reset changes",onClick:()=>resetArgs()},React.createElement(UndoIcon,null),React.createElement("span",null,"Reset")))),React.createElement(Info,null,React.createElement(Label,{"data-short-label":"Unsaved changes"},"You modified this story. Do you want to save your changes?")),React.createElement(Modal,{width:350,open:creating,onOpenChange:setCreating},React.createElement(Form,{onSubmit:async event=>{if(event.preventDefault(),!saving)try{setErrorMessage(null),setSaving(!0),await createStory(storyName.replace(/^[^a-z]/i,"").replaceAll(/[^a-z0-9]/gi,"")),setCreating(!1),setSaving(!1);}catch(e){setErrorMessage(e.message),setSaving(!1);}}},React.createElement(Modal.Content,null,React.createElement(Modal.Header,null,React.createElement(Modal.Title,null,"Create new story"),React.createElement(Modal.Description,null,"This will add a new story to your existing stories file.")),React.createElement(ModalInput,{onChange,placeholder:"Story export name",readOnly:saving,ref:inputRef,value:storyName}),React.createElement(Modal.Actions,null,React.createElement(Button,{disabled:saving||!storyName,size:"medium",type:"submit",variant:"solid"},"Create"),React.createElement(Modal.Dialog.Close,{asChild:!0},React.createElement(Button,{disabled:saving,size:"medium",type:"reset"},"Cancel"))))),errorMessage&&React.createElement(Modal.Error,null,errorMessage))))};var clean=obj=>Object.entries(obj).reduce((acc,[key,value])=>value!==void 0?Object.assign(acc,{[key]:value}):acc,{}),AddonWrapper=styled.div({display:"grid",gridTemplateRows:"1fr 39px",height:"100%",maxHeight:"100vh",overflowY:"auto"}),ControlsPanel=({saveStory,createStory})=>{let[isLoading,setIsLoading]=useState(!0),[args,updateArgs,resetArgs,initialArgs]=useArgs(),[globals]=useGlobals(),rows=useArgTypes(),{expanded,sort,presetColors}=useParameter(PARAM_KEY,{}),{path,previewInitialized}=useStorybookState();useEffect(()=>{previewInitialized&&setIsLoading(!1);},[previewInitialized]);let hasControls=Object.values(rows).some(arg=>arg?.control),withPresetColors=Object.entries(rows).reduce((acc,[key,arg])=>{let control=arg?.control;return typeof control!="object"||control?.type!=="color"||control?.presetColors?acc[key]=arg:acc[key]={...arg,control:{...control,presetColors}},acc},{}),hasUpdatedArgs=useMemo(()=>!!args&&!!initialArgs&&!dequal(clean(args),clean(initialArgs)),[args,initialArgs]);return React.createElement(AddonWrapper,null,React.createElement(PureArgsTable,{key:path,compact:!expanded&&hasControls,rows:withPresetColors,args,globals,updateArgs,resetArgs,inAddonPanel:!0,sort,isLoading}),hasControls&&hasUpdatedArgs&&scope.CONFIG_TYPE==="DEVELOPMENT"&&React.createElement(SaveStory,{resetArgs,saveStory,createStory}))};function Title(){let rows=useArgTypes(),controlsCount=Object.values(rows).filter(argType=>argType?.control&&!argType?.table?.disable).length;return React.createElement("div",null,React.createElement(Spaced,{col:1},React.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Controls"),controlsCount===0?"":React.createElement(Badge,{status:"neutral"},controlsCount)))}var stringifyArgs=args=>JSON.stringify(args,(_,value)=>typeof value=="function"?"__sb_empty_function_arg__":value);addons.register(ADDON_ID,api=>{let channel=addons.getChannel(),saveStory=async()=>{let data=api.getCurrentStoryData();if(data.type!=="story")throw new Error("Not a story");try{let response=await experimental_requestResponse(channel,SAVE_STORY_REQUEST,SAVE_STORY_RESPONSE,{args:stringifyArgs(Object.entries(data.args||{}).reduce((acc,[key,value])=>(dequal(value,data.initialArgs?.[key])||(acc[key]=value),acc),{})),csfId:data.id,importPath:data.importPath});api.addNotification({id:"save-story-success",icon:{name:"passed",color:color.positive},content:{headline:"Story saved",subHeadline:React.createElement(React.Fragment,null,"Updated story ",React.createElement("b",null,response.sourceStoryName),".")},duration:8e3});}catch(error){throw api.addNotification({id:"save-story-error",icon:{name:"failed",color:color.negative},content:{headline:"Failed to save story",subHeadline:error?.message||"Check the Storybook process on the command line for more details."},duration:8e3}),error}},createStory=async name=>{let data=api.getCurrentStoryData();if(data.type!=="story")throw new Error("Not a story");let response=await experimental_requestResponse(channel,SAVE_STORY_REQUEST,SAVE_STORY_RESPONSE,{args:data.args&&stringifyArgs(data.args),csfId:data.id,importPath:data.importPath,name});api.addNotification({id:"save-story-success",icon:{name:"passed",color:color.positive},content:{headline:"Story created",subHeadline:React.createElement(React.Fragment,null,"Added story ",React.createElement("b",null,response.newStoryName)," based on ",React.createElement("b",null,response.sourceStoryName),".")},duration:8e3,onClick:({onDismiss})=>{onDismiss(),api.selectStory(response.newStoryId);}});};addons.add(ADDON_ID,{title:Title,type:types.PANEL,paramKey:PARAM_KEY,render:({active})=>!active||!api.getCurrentStoryData()?null:React.createElement(AddonPanel,{active},React.createElement(ControlsPanel,{saveStory,createStory}))}),channel.on(SAVE_STORY_RESPONSE,data=>{if(!data.success)return;let story=api.getCurrentStoryData();story.type==="story"&&(api.resetStoryArgs(story),data.payload.newStoryId&&api.selectStory(data.payload.newStoryId));});});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-controls",
|
|
3
|
-
"version": "8.1.0-
|
|
3
|
+
"version": "8.1.0-beta.0",
|
|
4
4
|
"description": "Interact with component inputs dynamically in the Storybook UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -51,19 +51,21 @@
|
|
|
51
51
|
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@storybook/blocks": "8.1.0-
|
|
54
|
+
"@storybook/blocks": "8.1.0-beta.0",
|
|
55
|
+
"dequal": "^2.0.2",
|
|
55
56
|
"lodash": "^4.17.21",
|
|
56
57
|
"ts-dedent": "^2.0.0"
|
|
57
58
|
},
|
|
58
59
|
"devDependencies": {
|
|
59
|
-
"@storybook/client-logger": "8.1.0-
|
|
60
|
-
"@storybook/components": "8.1.0-
|
|
61
|
-
"@storybook/core-common": "8.1.0-
|
|
62
|
-
"@storybook/
|
|
63
|
-
"@storybook/
|
|
64
|
-
"@storybook/
|
|
65
|
-
"@storybook/
|
|
66
|
-
"@storybook/
|
|
60
|
+
"@storybook/client-logger": "8.1.0-beta.0",
|
|
61
|
+
"@storybook/components": "8.1.0-beta.0",
|
|
62
|
+
"@storybook/core-common": "8.1.0-beta.0",
|
|
63
|
+
"@storybook/icons": "^1.2.5",
|
|
64
|
+
"@storybook/manager-api": "8.1.0-beta.0",
|
|
65
|
+
"@storybook/node-logger": "8.1.0-beta.0",
|
|
66
|
+
"@storybook/preview-api": "8.1.0-beta.0",
|
|
67
|
+
"@storybook/theming": "8.1.0-beta.0",
|
|
68
|
+
"@storybook/types": "8.1.0-beta.0",
|
|
67
69
|
"react": "^18.2.0",
|
|
68
70
|
"react-dom": "^18.2.0"
|
|
69
71
|
},
|