@walkeros/storybook-addon 0.0.1 → 0.0.2
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 +1 -1
- package/dist/manager.js.map +1 -1
- package/dist/preview.cjs.map +1 -1
- package/dist/preview.js.map +1 -1
- package/package.json +8 -5
package/dist/manager.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import o,{memo,useState,useCallback,useEffect,Fragment}from'react';import {useStorybookApi,useGlobals,useChannel,addons,types}from'storybook/manager-api';import {AddonPanel,TabsState,Placeholder,Button,SyntaxHighlighter,Form}from'storybook/internal/components';import {styled,useTheme}from'storybook/theming';import {CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED}from'storybook/internal/core-events';import {ArrowDownIcon}from'@storybook/icons';var a="walkerOS",E=`${a}/panel`;var c={RESULT:`${a}/result`,REQUEST:`${a}/request`};var I=styled.ul({listStyle:"none",fontSize:14,padding:0,margin:0}),w=styled.div(({theme:e})=>({display:"flex",width:"100%",borderBottom:`1px solid ${e.appBorderColor}`,"&:hover":{background:e.background.hoverable}})),N=styled(ArrowDownIcon)(({theme:e})=>({height:10,width:10,minWidth:10,color:e.color.mediumdark,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),_=styled.div(({theme:e})=>({padding:e.layoutMargin,paddingLeft:e.layoutMargin-3,background:"none",color:"inherit",textAlign:"left",cursor:"pointer",borderLeft:"3px solid transparent",width:"100%","&:focus":{outline:"0 none",borderLeft:`3px solid ${e.color.secondary}`}})),W=styled.div(({theme:e})=>({padding:e.layoutMargin,background:e.background.content,fontFamily:e.typography.fonts.mono,whiteSpace:"pre-wrap",textAlign:"left"})),$=({item:e})=>{let[r,l]=useState(true);return o.createElement(Fragment,null,o.createElement(w,null,o.createElement(_,{onClick:()=>l(!r),role:"button"},o.createElement(N,{style:{transform:`rotate(${r?0:-90}deg)`}}),e.title)),r?o.createElement(W,null,e.content):null)},S=({items:e})=>o.createElement(I,null,e.map((r,l)=>o.createElement($,{key:l,item:r})));var v=memo(function(r){let l=useTheme(),f=useStorybookApi(),[A,P]=useGlobals(),n={...{autoRefresh:true,prefix:"data-elb"},...A[a]},[m,L]=useState([]),g=(t,i)=>{let C={...n,[t]:i};P({[a]:C});},h=useChannel({[c.RESULT]:t=>{L(t);}}),d=useCallback(()=>{h(c.REQUEST,n);},[n,h]);useEffect(()=>{n.autoRefresh&&d();},[]),useEffect(()=>{if(!n.autoRefresh)return;let t=[CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED];return t.forEach(i=>f.on(i,d)),()=>t.forEach(i=>f.off(i,d))},[f,d,n.autoRefresh]);let T=t=>{let i=t.length==1?"Event":"Events";return `${t.length} ${i}`};return o.createElement(AddonPanel,{...r},o.createElement(TabsState,{initial:"events",backgroundColor:l.background.hoverable},o.createElement("div",{id:"events",title:T(m)},o.createElement(Placeholder,null,o.createElement(Fragment,null,o.createElement(Button,{onClick:d},"Update events")),m.length>0?o.createElement(S,{items:m.map((t,i)=>({title:`#${i+1} ${t.entity} ${t.action}`,content:o.createElement(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true},JSON.stringify(t,null,2))}))}):o.createElement("p",null,"No events yet"))),o.createElement("div",{id:"config",title:"Config"},o.createElement(Placeholder,null,o.createElement(Fragment,null,o.createElement(Form.Field,{label:"Auto-refresh"},o.createElement("input",{type:"checkbox",id:"autoRefresh",checked:n.autoRefresh,onChange:t=>g("autoRefresh",t.target.checked)})),o.createElement(Form.Field,{label:"Prefix"},o.createElement(Form.Input,{name:"Prefix",value:n.prefix,placeholder:n.prefix,onChange:t=>g("prefix",t.target.value),size:"flex"})))))))});addons.register(a,e=>{addons.add(E,{type:types.PANEL,title:a,match:({viewMode:r})=>r==="story",render:({active:r})=>o.createElement(v,{active:!!r})});});//# sourceMappingURL=manager.js.map
|
|
2
2
|
//# sourceMappingURL=manager.js.map
|
package/dist/manager.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constants.ts","../src/components/List.tsx","../src/components/Panel.tsx","../src/manager.tsx"],"names":["ADDON_ID","PANEL_ID","EVENTS","ListWrapper","styled","Wrapper","theme","Icon","ArrowDownIcon","HeaderBar","Description","ListItem","item","isOpen","onToggle","useState","jsxs","Fragment","jsx","List","items","idx","Panel","memo","props","useTheme","api","useStorybookApi","globals","updateGlobals","useGlobals","config","events","setState","updateConfig","key","value","newConfig","emit","useChannel","newEvents","updateEvents","useCallback","useEffect","storyEvents","CURRENT_STORY_WAS_SET","SELECT_STORY","STORY_RENDERED","STORY_ARGS_UPDATED","event","getEventTitle","form","AddonPanel","TabsState","Placeholder","Button","index","SyntaxHighlighter","Form","e","addons","types","viewMode","active"],"mappings":"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","file":"manager.js","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n RESULT: `${ADDON_ID}/result`,\n REQUEST: `${ADDON_ID}/request`,\n};\n","import { ArrowDownIcon } from '@storybook/icons';\nimport React, { Fragment, useState } from 'react';\nimport { styled } from 'storybook/theming';\n\ntype Item = {\n title: string;\n content: string | React.ReactNode;\n};\n\ninterface ListItemProps {\n item: Item;\n}\n\ninterface ListProps {\n items: Item[];\n}\n\nconst ListWrapper = styled.ul({\n listStyle: 'none',\n fontSize: 14,\n padding: 0,\n margin: 0,\n});\n\nconst Wrapper = styled.div(({ theme }) => ({\n display: 'flex',\n width: '100%',\n borderBottom: `1px solid ${theme.appBorderColor}`,\n '&:hover': {\n background: theme.background.hoverable,\n },\n}));\n\nconst Icon = styled(ArrowDownIcon)(({ theme }) => ({\n height: 10,\n width: 10,\n minWidth: 10,\n color: theme.color.mediumdark,\n marginRight: 10,\n transition: 'transform 0.1s ease-in-out',\n alignSelf: 'center',\n display: 'inline-flex',\n}));\n\nconst HeaderBar = styled.div(({ theme }) => ({\n padding: theme.layoutMargin,\n paddingLeft: theme.layoutMargin - 3,\n background: 'none',\n color: 'inherit',\n textAlign: 'left',\n cursor: 'pointer',\n borderLeft: '3px solid transparent',\n width: '100%',\n\n '&:focus': {\n outline: '0 none',\n borderLeft: `3px solid ${theme.color.secondary}`,\n },\n}));\n\nconst Description = styled.div(({ theme }) => ({\n padding: theme.layoutMargin,\n background: theme.background.content,\n fontFamily: theme.typography.fonts.mono,\n whiteSpace: 'pre-wrap',\n textAlign: 'left',\n}));\n\nexport const ListItem: React.FC<ListItemProps> = ({ item }) => {\n const [isOpen, onToggle] = useState(true);\n\n return (\n <Fragment>\n <Wrapper>\n <HeaderBar onClick={() => onToggle(!isOpen)} role=\"button\">\n <Icon\n style={{\n transform: `rotate(${isOpen ? 0 : -90}deg)`,\n }}\n />\n {item.title}\n </HeaderBar>\n </Wrapper>\n {isOpen ? <Description>{item.content}</Description> : null}\n </Fragment>\n );\n};\n\nexport const List: React.FC<ListProps> = ({ items }) => (\n <ListWrapper>\n {items.map((item, idx) => (\n <ListItem key={idx} item={item}></ListItem>\n ))}\n </ListWrapper>\n);\n","import type { WalkerOSAddon } from 'src/types';\nimport type { Events } from '@walkeros/web-source-browser';\nimport React, { Fragment, memo, useCallback, useEffect, useState } from 'react';\nimport {\n AddonPanel,\n Placeholder,\n TabsState,\n SyntaxHighlighter,\n Button,\n Form,\n} from 'storybook/internal/components';\nimport { useChannel, useGlobals, useStorybookApi } from 'storybook/manager-api';\nimport { useTheme } from 'storybook/theming';\nimport {\n STORY_ARGS_UPDATED,\n CURRENT_STORY_WAS_SET,\n SELECT_STORY,\n STORY_RENDERED,\n} from 'storybook/internal/core-events';\n\nimport { ADDON_ID, EVENTS } from '../constants';\nimport { List } from './List';\n\ninterface PanelProps {\n active: boolean;\n walkerOSAddon: WalkerOSAddon;\n}\n\nexport const Panel: React.FC<PanelProps> = memo(function MyPanel(props) {\n const theme = useTheme();\n const api = useStorybookApi();\n\n const [globals, updateGlobals] = useGlobals();\n\n const defaultConfig: WalkerOSAddon = {\n autoRefresh: true,\n prefix: 'data-elb',\n };\n const config = {\n ...defaultConfig,\n ...globals[ADDON_ID],\n } as WalkerOSAddon;\n\n const [events, setState] = useState<Events>([]);\n\n const updateConfig = (key: keyof WalkerOSAddon, value: unknown) => {\n const newConfig = { ...config, [key]: value };\n updateGlobals({ [ADDON_ID]: newConfig });\n };\n\n // https://storybook.js.org/docs/react/addons/addons-api#usechannel\n const emit = useChannel({\n [EVENTS.RESULT]: (newEvents: Events) => {\n setState(newEvents);\n },\n });\n\n const updateEvents = useCallback(() => {\n emit(EVENTS.REQUEST, config);\n }, [config, emit]);\n\n // Initial auto-refresh on page load\n useEffect(() => {\n if (config.autoRefresh) {\n updateEvents();\n }\n }, []); // Only run once on mount\n\n // Auto-refresh on story navigation and args updates\n useEffect(() => {\n if (!config.autoRefresh) return;\n\n // Events to listen for\n const storyEvents = [\n CURRENT_STORY_WAS_SET,\n SELECT_STORY,\n STORY_RENDERED,\n STORY_ARGS_UPDATED,\n ];\n\n // Listen for story navigation and control changes\n storyEvents.forEach((event) => api.on(event, updateEvents));\n // Cleanup listeners on unmount\n return () => storyEvents.forEach((event) => api.off(event, updateEvents));\n }, [api, updateEvents, config.autoRefresh]);\n\n const getEventTitle = (events: Events) => {\n const form = events.length == 1 ? 'Event' : 'Events';\n return `${events.length} ${form}`;\n };\n\n return (\n <AddonPanel {...props}>\n <TabsState\n initial=\"events\"\n backgroundColor={theme.background.hoverable as string}\n >\n <div id=\"events\" title={getEventTitle(events)}>\n <Placeholder>\n <Fragment>\n <Button onClick={updateEvents}>Update events</Button>\n </Fragment>\n {events.length > 0 ? (\n <List\n items={events.map((item, index) => ({\n title: `#${index + 1} ${item.entity} ${item.action}`,\n content: (\n <SyntaxHighlighter\n language=\"json\"\n copyable={true}\n bordered={true}\n padded={true}\n >\n {JSON.stringify(item, null, 2)}\n </SyntaxHighlighter>\n ),\n }))}\n />\n ) : (\n <p>No events yet</p>\n )}\n </Placeholder>\n </div>\n <div id=\"config\" title=\"Config\">\n <Placeholder>\n <Fragment>\n <Form.Field label=\"Auto-refresh\">\n <input\n type=\"checkbox\"\n id=\"autoRefresh\"\n checked={config.autoRefresh}\n onChange={(e) =>\n updateConfig('autoRefresh', e.target.checked)\n }\n />\n </Form.Field>\n <Form.Field label=\"Prefix\">\n <Form.Input\n name=\"Prefix\"\n value={config.prefix}\n placeholder={config.prefix}\n onChange={(e) =>\n updateConfig('prefix', (e.target as HTMLInputElement).value)\n }\n size=\"flex\"\n />\n </Form.Field>\n </Fragment>\n </Placeholder>\n </div>\n </TabsState>\n </AddonPanel>\n );\n});\n","import React from 'react';\nimport { addons, types } from 'storybook/manager-api';\n\nimport { Panel } from './components/Panel';\nimport { ADDON_ID, PANEL_ID } from './constants';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `manager.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/manager.tsx\",\n */\n\naddons.register(ADDON_ID, (api) => {\n addons.add(PANEL_ID, {\n type: types.PANEL,\n title: ADDON_ID,\n match: ({ viewMode }) => viewMode === 'story',\n render: ({ active }) => <Panel active={!!active} />,\n });\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/constants.ts","../src/components/List.tsx","../src/components/Panel.tsx","../src/manager.tsx"],"names":["ADDON_ID","PANEL_ID","EVENTS","ListWrapper","styled","Wrapper","theme","Icon","ArrowDownIcon","HeaderBar","Description","ListItem","item","isOpen","onToggle","useState","React","Fragment","List","items","idx","Panel","memo","props","useTheme","api","useStorybookApi","globals","updateGlobals","useGlobals","config","events","setState","updateConfig","key","value","newConfig","emit","useChannel","newEvents","updateEvents","useCallback","useEffect","storyEvents","CURRENT_STORY_WAS_SET","SELECT_STORY","STORY_RENDERED","STORY_ARGS_UPDATED","event","getEventTitle","form","AddonPanel","TabsState","Placeholder","Button","index","SyntaxHighlighter","Form","e","addons","types","viewMode","active"],"mappings":"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","file":"manager.js","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n RESULT: `${ADDON_ID}/result`,\n REQUEST: `${ADDON_ID}/request`,\n};\n","import { ArrowDownIcon } from '@storybook/icons';\nimport React, { Fragment, useState } from 'react';\nimport { styled } from 'storybook/theming';\n\ntype Item = {\n title: string;\n content: string | React.ReactNode;\n};\n\ninterface ListItemProps {\n item: Item;\n}\n\ninterface ListProps {\n items: Item[];\n}\n\nconst ListWrapper = styled.ul({\n listStyle: 'none',\n fontSize: 14,\n padding: 0,\n margin: 0,\n});\n\nconst Wrapper = styled.div(({ theme }) => ({\n display: 'flex',\n width: '100%',\n borderBottom: `1px solid ${theme.appBorderColor}`,\n '&:hover': {\n background: theme.background.hoverable,\n },\n}));\n\nconst Icon = styled(ArrowDownIcon)(({ theme }) => ({\n height: 10,\n width: 10,\n minWidth: 10,\n color: theme.color.mediumdark,\n marginRight: 10,\n transition: 'transform 0.1s ease-in-out',\n alignSelf: 'center',\n display: 'inline-flex',\n}));\n\nconst HeaderBar = styled.div(({ theme }) => ({\n padding: theme.layoutMargin,\n paddingLeft: theme.layoutMargin - 3,\n background: 'none',\n color: 'inherit',\n textAlign: 'left',\n cursor: 'pointer',\n borderLeft: '3px solid transparent',\n width: '100%',\n\n '&:focus': {\n outline: '0 none',\n borderLeft: `3px solid ${theme.color.secondary}`,\n },\n}));\n\nconst Description = styled.div(({ theme }) => ({\n padding: theme.layoutMargin,\n background: theme.background.content,\n fontFamily: theme.typography.fonts.mono,\n whiteSpace: 'pre-wrap',\n textAlign: 'left',\n}));\n\nexport const ListItem: React.FC<ListItemProps> = ({ item }) => {\n const [isOpen, onToggle] = useState(true);\n\n return (\n <Fragment>\n <Wrapper>\n <HeaderBar onClick={() => onToggle(!isOpen)} role=\"button\">\n <Icon\n style={{\n transform: `rotate(${isOpen ? 0 : -90}deg)`,\n }}\n />\n {item.title}\n </HeaderBar>\n </Wrapper>\n {isOpen ? <Description>{item.content}</Description> : null}\n </Fragment>\n );\n};\n\nexport const List: React.FC<ListProps> = ({ items }) => (\n <ListWrapper>\n {items.map((item, idx) => (\n <ListItem key={idx} item={item}></ListItem>\n ))}\n </ListWrapper>\n);\n","import type { WalkerOSAddon } from 'src/types';\nimport type { Events } from '@walkeros/web-source-browser';\nimport React, { Fragment, memo, useCallback, useEffect, useState } from 'react';\nimport {\n AddonPanel,\n Placeholder,\n TabsState,\n SyntaxHighlighter,\n Button,\n Form,\n} from 'storybook/internal/components';\nimport { useChannel, useGlobals, useStorybookApi } from 'storybook/manager-api';\nimport { useTheme } from 'storybook/theming';\nimport {\n STORY_ARGS_UPDATED,\n CURRENT_STORY_WAS_SET,\n SELECT_STORY,\n STORY_RENDERED,\n} from 'storybook/internal/core-events';\n\nimport { ADDON_ID, EVENTS } from '../constants';\nimport { List } from './List';\n\ninterface PanelProps {\n active: boolean;\n walkerOSAddon: WalkerOSAddon;\n}\n\nexport const Panel: React.FC<PanelProps> = memo(function MyPanel(props) {\n const theme = useTheme();\n const api = useStorybookApi();\n\n const [globals, updateGlobals] = useGlobals();\n\n const defaultConfig: WalkerOSAddon = {\n autoRefresh: true,\n prefix: 'data-elb',\n };\n const config = {\n ...defaultConfig,\n ...globals[ADDON_ID],\n } as WalkerOSAddon;\n\n const [events, setState] = useState<Events>([]);\n\n const updateConfig = (key: keyof WalkerOSAddon, value: unknown) => {\n const newConfig = { ...config, [key]: value };\n updateGlobals({ [ADDON_ID]: newConfig });\n };\n\n // https://storybook.js.org/docs/react/addons/addons-api#usechannel\n const emit = useChannel({\n [EVENTS.RESULT]: (newEvents: Events) => {\n setState(newEvents);\n },\n });\n\n const updateEvents = useCallback(() => {\n emit(EVENTS.REQUEST, config);\n }, [config, emit]);\n\n // Initial auto-refresh on page load\n useEffect(() => {\n if (config.autoRefresh) {\n updateEvents();\n }\n }, []); // Only run once on mount\n\n // Auto-refresh on story navigation and args updates\n useEffect(() => {\n if (!config.autoRefresh) return;\n\n // Events to listen for\n const storyEvents = [\n CURRENT_STORY_WAS_SET,\n SELECT_STORY,\n STORY_RENDERED,\n STORY_ARGS_UPDATED,\n ];\n\n // Listen for story navigation and control changes\n storyEvents.forEach((event) => api.on(event, updateEvents));\n // Cleanup listeners on unmount\n return () => storyEvents.forEach((event) => api.off(event, updateEvents));\n }, [api, updateEvents, config.autoRefresh]);\n\n const getEventTitle = (events: Events) => {\n const form = events.length == 1 ? 'Event' : 'Events';\n return `${events.length} ${form}`;\n };\n\n return (\n <AddonPanel {...props}>\n <TabsState\n initial=\"events\"\n backgroundColor={theme.background.hoverable as string}\n >\n <div id=\"events\" title={getEventTitle(events)}>\n <Placeholder>\n <Fragment>\n <Button onClick={updateEvents}>Update events</Button>\n </Fragment>\n {events.length > 0 ? (\n <List\n items={events.map((item, index) => ({\n title: `#${index + 1} ${item.entity} ${item.action}`,\n content: (\n <SyntaxHighlighter\n language=\"json\"\n copyable={true}\n bordered={true}\n padded={true}\n >\n {JSON.stringify(item, null, 2)}\n </SyntaxHighlighter>\n ),\n }))}\n />\n ) : (\n <p>No events yet</p>\n )}\n </Placeholder>\n </div>\n <div id=\"config\" title=\"Config\">\n <Placeholder>\n <Fragment>\n <Form.Field label=\"Auto-refresh\">\n <input\n type=\"checkbox\"\n id=\"autoRefresh\"\n checked={config.autoRefresh}\n onChange={(e) =>\n updateConfig('autoRefresh', e.target.checked)\n }\n />\n </Form.Field>\n <Form.Field label=\"Prefix\">\n <Form.Input\n name=\"Prefix\"\n value={config.prefix}\n placeholder={config.prefix}\n onChange={(e) =>\n updateConfig('prefix', (e.target as HTMLInputElement).value)\n }\n size=\"flex\"\n />\n </Form.Field>\n </Fragment>\n </Placeholder>\n </div>\n </TabsState>\n </AddonPanel>\n );\n});\n","import React from 'react';\nimport { addons, types } from 'storybook/manager-api';\n\nimport { Panel } from './components/Panel';\nimport { ADDON_ID, PANEL_ID } from './constants';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `manager.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/manager.tsx\",\n */\n\naddons.register(ADDON_ID, (api) => {\n addons.add(PANEL_ID, {\n type: types.PANEL,\n title: ADDON_ID,\n match: ({ viewMode }) => viewMode === 'story',\n render: ({ active }) => <Panel active={!!active} />,\n });\n});\n"]}
|
package/dist/preview.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constants.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","EVENTS","channel","addons","currentCanvasElement","config","canvasElement","events","getAllEvents","withRoundTrip","storyFn","context","preview","preview_default"],"mappings":"sHAAO,IAAMA,CAAAA,CAAW,UAAA,CAIjB,IAAMC,CAAAA,CAAS,CACpB,MAAA,CAAQ,CAAA,EAAGD,CAAQ,UACnB,OAAA,CAAS,CAAA,EAAGA,CAAQ,CAAA,QAAA,CACtB,CAAA,CCCA,IAAME,CAAAA,CAAUC,iBAAAA,CAAO,UAAA,EAAW,CAC9BC,CAAAA,CAAuC,IAAA,CAG3CF,EAAQ,WAAA,CAAYD,CAAAA,CAAO,OAAA,CAAUI,CAAAA,EAA0B,CAE7D,IAAMC,EACJF,CAAAA,EACA,QAAA,CAAS,aAAA,CAAc,iBAAiB,CAAA,EACxC,QAAA,CAAS,KAELG,CAAAA,CAASC,6BAAAA,CAAaF,CAAAA,CAA0BD,CAAAA,CAAO,MAAM,CAAA,CAGnEH,EAAQ,IAAA,CAAKD,CAAAA,CAAO,MAAA,CAAQM,CAAM,EACpC,CAAC,EAEM,IAAME,CAAAA,CAAmC,CAACC,CAAAA,CAASC,CAAAA,IAExDP,CAAAA,CAAuBO,EAAQ,aAAA,CAExBD,CAAAA,EAAQ,CAAA,CCTjB,IAAME,CAAAA,CAAwC,CAC5C,WAAY,CAACH,CAAa,CAAA,CAC1B,WAAA,CAAa,CACX,CAACT,CAAQ,EAAG,CACV,WAAA,CAAa,8BAAA,CACb,YAAA,CAAc,CACZ,YAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CACA,eAAgB,CACd,CAACA,CAAQ,EAAG,CACV,WAAA,CAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CAEOa,CAAAA,CAAQD","file":"preview.cjs","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n RESULT: `${ADDON_ID}/result`,\n REQUEST: `${ADDON_ID}/request`,\n};\n","import type { WalkerOSAddon } from '
|
|
1
|
+
{"version":3,"sources":["../src/constants.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","EVENTS","channel","addons","currentCanvasElement","config","canvasElement","events","getAllEvents","withRoundTrip","storyFn","context","preview","preview_default"],"mappings":"sHAAO,IAAMA,CAAAA,CAAW,UAAA,CAIjB,IAAMC,CAAAA,CAAS,CACpB,MAAA,CAAQ,CAAA,EAAGD,CAAQ,UACnB,OAAA,CAAS,CAAA,EAAGA,CAAQ,CAAA,QAAA,CACtB,CAAA,CCCA,IAAME,CAAAA,CAAUC,iBAAAA,CAAO,UAAA,EAAW,CAC9BC,CAAAA,CAAuC,IAAA,CAG3CF,EAAQ,WAAA,CAAYD,CAAAA,CAAO,OAAA,CAAUI,CAAAA,EAA0B,CAE7D,IAAMC,EACJF,CAAAA,EACA,QAAA,CAAS,aAAA,CAAc,iBAAiB,CAAA,EACxC,QAAA,CAAS,KAELG,CAAAA,CAASC,6BAAAA,CAAaF,CAAAA,CAA0BD,CAAAA,CAAO,MAAM,CAAA,CAGnEH,EAAQ,IAAA,CAAKD,CAAAA,CAAO,MAAA,CAAQM,CAAM,EACpC,CAAC,EAEM,IAAME,CAAAA,CAAmC,CAACC,CAAAA,CAASC,CAAAA,IAExDP,CAAAA,CAAuBO,EAAQ,aAAA,CAExBD,CAAAA,EAAQ,CAAA,CCTjB,IAAME,CAAAA,CAAwC,CAC5C,WAAY,CAACH,CAAa,CAAA,CAC1B,WAAA,CAAa,CACX,CAACT,CAAQ,EAAG,CACV,WAAA,CAAa,8BAAA,CACb,YAAA,CAAc,CACZ,YAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CACA,eAAgB,CACd,CAACA,CAAQ,EAAG,CACV,WAAA,CAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CAEOa,CAAAA,CAAQD","file":"preview.cjs","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n RESULT: `${ADDON_ID}/result`,\n REQUEST: `${ADDON_ID}/request`,\n};\n","import type { WalkerOSAddon } from './types';\nimport type { DecoratorFunction } from 'storybook/internal/types';\nimport { addons } from 'storybook/preview-api';\nimport { getAllEvents } from '@walkeros/web-source-browser';\n\nimport { EVENTS } from './constants';\n\n// Set up the channel listener globally, not per story\nconst channel = addons.getChannel();\nlet currentCanvasElement: Element | null = null;\n\n// Global listener for the request events\nchannel.addListener(EVENTS.REQUEST, (config: WalkerOSAddon) => {\n // Try to find the canvas element if we don't have it yet\n const canvasElement =\n currentCanvasElement ||\n document.querySelector('#storybook-root') ||\n document.body;\n\n const events = getAllEvents(canvasElement as Element, config.prefix);\n\n // Send the result back to the manager\n channel.emit(EVENTS.RESULT, events);\n});\n\nexport const withRoundTrip: DecoratorFunction = (storyFn, context) => {\n // Update the current canvas element when a story renders\n currentCanvasElement = context.canvasElement as Element;\n\n return storyFn();\n};\n","/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\nimport type { ProjectAnnotations, Renderer } from 'storybook/internal/types';\n\nimport { ADDON_ID } from './constants';\nimport { withRoundTrip } from './withRoundTrip';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `preview.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/preview.tsx\",\n */\n\nconst preview: ProjectAnnotations<Renderer> = {\n decorators: [withRoundTrip],\n globalTypes: {\n [ADDON_ID]: {\n description: 'walkerOS addon configuration',\n defaultValue: {\n autoRefresh: true,\n prefix: 'data-elb',\n },\n },\n },\n initialGlobals: {\n [ADDON_ID]: {\n autoRefresh: true,\n prefix: 'data-elb',\n },\n },\n};\n\nexport default preview;\n"]}
|
package/dist/preview.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constants.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","EVENTS","channel","addons","currentCanvasElement","config","canvasElement","events","getAllEvents","withRoundTrip","storyFn","context","preview","preview_default"],"mappings":"mGAAO,IAAMA,CAAAA,CAAW,UAAA,CAIjB,IAAMC,CAAAA,CAAS,CACpB,MAAA,CAAQ,CAAA,EAAGD,CAAQ,UACnB,OAAA,CAAS,CAAA,EAAGA,CAAQ,CAAA,QAAA,CACtB,CAAA,CCCA,IAAME,CAAAA,CAAUC,MAAAA,CAAO,UAAA,EAAW,CAC9BC,CAAAA,CAAuC,IAAA,CAG3CF,EAAQ,WAAA,CAAYD,CAAAA,CAAO,OAAA,CAAUI,CAAAA,EAA0B,CAE7D,IAAMC,EACJF,CAAAA,EACA,QAAA,CAAS,aAAA,CAAc,iBAAiB,CAAA,EACxC,QAAA,CAAS,KAELG,CAAAA,CAASC,YAAAA,CAAaF,CAAAA,CAA0BD,CAAAA,CAAO,MAAM,CAAA,CAGnEH,EAAQ,IAAA,CAAKD,CAAAA,CAAO,MAAA,CAAQM,CAAM,EACpC,CAAC,EAEM,IAAME,CAAAA,CAAmC,CAACC,CAAAA,CAASC,CAAAA,IAExDP,CAAAA,CAAuBO,EAAQ,aAAA,CAExBD,CAAAA,EAAQ,CAAA,CCTjB,IAAME,CAAAA,CAAwC,CAC5C,WAAY,CAACH,CAAa,CAAA,CAC1B,WAAA,CAAa,CACX,CAACT,CAAQ,EAAG,CACV,WAAA,CAAa,8BAAA,CACb,YAAA,CAAc,CACZ,YAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CACA,eAAgB,CACd,CAACA,CAAQ,EAAG,CACV,WAAA,CAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CAEOa,CAAAA,CAAQD","file":"preview.js","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n RESULT: `${ADDON_ID}/result`,\n REQUEST: `${ADDON_ID}/request`,\n};\n","import type { WalkerOSAddon } from '
|
|
1
|
+
{"version":3,"sources":["../src/constants.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","EVENTS","channel","addons","currentCanvasElement","config","canvasElement","events","getAllEvents","withRoundTrip","storyFn","context","preview","preview_default"],"mappings":"mGAAO,IAAMA,CAAAA,CAAW,UAAA,CAIjB,IAAMC,CAAAA,CAAS,CACpB,MAAA,CAAQ,CAAA,EAAGD,CAAQ,UACnB,OAAA,CAAS,CAAA,EAAGA,CAAQ,CAAA,QAAA,CACtB,CAAA,CCCA,IAAME,CAAAA,CAAUC,MAAAA,CAAO,UAAA,EAAW,CAC9BC,CAAAA,CAAuC,IAAA,CAG3CF,EAAQ,WAAA,CAAYD,CAAAA,CAAO,OAAA,CAAUI,CAAAA,EAA0B,CAE7D,IAAMC,EACJF,CAAAA,EACA,QAAA,CAAS,aAAA,CAAc,iBAAiB,CAAA,EACxC,QAAA,CAAS,KAELG,CAAAA,CAASC,YAAAA,CAAaF,CAAAA,CAA0BD,CAAAA,CAAO,MAAM,CAAA,CAGnEH,EAAQ,IAAA,CAAKD,CAAAA,CAAO,MAAA,CAAQM,CAAM,EACpC,CAAC,EAEM,IAAME,CAAAA,CAAmC,CAACC,CAAAA,CAASC,CAAAA,IAExDP,CAAAA,CAAuBO,EAAQ,aAAA,CAExBD,CAAAA,EAAQ,CAAA,CCTjB,IAAME,CAAAA,CAAwC,CAC5C,WAAY,CAACH,CAAa,CAAA,CAC1B,WAAA,CAAa,CACX,CAACT,CAAQ,EAAG,CACV,WAAA,CAAa,8BAAA,CACb,YAAA,CAAc,CACZ,YAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CACA,eAAgB,CACd,CAACA,CAAQ,EAAG,CACV,WAAA,CAAa,IAAA,CACb,MAAA,CAAQ,UACV,CACF,CACF,CAAA,CAEOa,CAAAA,CAAQD","file":"preview.js","sourcesContent":["export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n RESULT: `${ADDON_ID}/result`,\n REQUEST: `${ADDON_ID}/request`,\n};\n","import type { WalkerOSAddon } from './types';\nimport type { DecoratorFunction } from 'storybook/internal/types';\nimport { addons } from 'storybook/preview-api';\nimport { getAllEvents } from '@walkeros/web-source-browser';\n\nimport { EVENTS } from './constants';\n\n// Set up the channel listener globally, not per story\nconst channel = addons.getChannel();\nlet currentCanvasElement: Element | null = null;\n\n// Global listener for the request events\nchannel.addListener(EVENTS.REQUEST, (config: WalkerOSAddon) => {\n // Try to find the canvas element if we don't have it yet\n const canvasElement =\n currentCanvasElement ||\n document.querySelector('#storybook-root') ||\n document.body;\n\n const events = getAllEvents(canvasElement as Element, config.prefix);\n\n // Send the result back to the manager\n channel.emit(EVENTS.RESULT, events);\n});\n\nexport const withRoundTrip: DecoratorFunction = (storyFn, context) => {\n // Update the current canvas element when a story renders\n currentCanvasElement = context.canvasElement as Element;\n\n return storyFn();\n};\n","/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\nimport type { ProjectAnnotations, Renderer } from 'storybook/internal/types';\n\nimport { ADDON_ID } from './constants';\nimport { withRoundTrip } from './withRoundTrip';\n\n/**\n * Note: if you want to use JSX in this file, rename it to `preview.tsx`\n * and update the entry prop in tsup.config.ts to use \"src/preview.tsx\",\n */\n\nconst preview: ProjectAnnotations<Renderer> = {\n decorators: [withRoundTrip],\n globalTypes: {\n [ADDON_ID]: {\n description: 'walkerOS addon configuration',\n defaultValue: {\n autoRefresh: true,\n prefix: 'data-elb',\n },\n },\n },\n initialGlobals: {\n [ADDON_ID]: {\n autoRefresh: true,\n prefix: 'data-elb',\n },\n },\n};\n\nexport default preview;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@walkeros/storybook-addon",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "Integrate walkerOS tagging support for data collection",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"tracking",
|
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
"@walkeros/jest": "*",
|
|
61
61
|
"@walkeros/tsconfig": "*",
|
|
62
62
|
"@walkeros/tsup": "*",
|
|
63
|
-
"@storybook/addon-docs": "^9.
|
|
64
|
-
"@storybook/react-vite": "^9.
|
|
63
|
+
"@storybook/addon-docs": "^9.1.2",
|
|
64
|
+
"@storybook/react-vite": "^9.1.2",
|
|
65
65
|
"@types/node": "^22",
|
|
66
66
|
"@types/react": "^18.2.65",
|
|
67
67
|
"@types/react-dom": "^18.2.21",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"prompts": "^2.4.2",
|
|
74
74
|
"react": "^18.2.0",
|
|
75
75
|
"react-dom": "^18.2.0",
|
|
76
|
-
"storybook": "^9.
|
|
76
|
+
"storybook": "^9.1.2",
|
|
77
77
|
"ts-dedent": "^2.2.0",
|
|
78
78
|
"tsup": "^8.2.4",
|
|
79
79
|
"typescript": "^5.8.2",
|
|
@@ -81,7 +81,10 @@
|
|
|
81
81
|
"zx": "^8.4.1"
|
|
82
82
|
},
|
|
83
83
|
"peerDependencies": {
|
|
84
|
-
"storybook": "^9.0.
|
|
84
|
+
"storybook": "^9.0.0"
|
|
85
|
+
},
|
|
86
|
+
"engines": {
|
|
87
|
+
"node": ">=20"
|
|
85
88
|
},
|
|
86
89
|
"publishConfig": {
|
|
87
90
|
"access": "public"
|