@walkeros/storybook-addon 0.0.1

package/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  extends: ['@walkeros/eslint'],
+  env: {
+    browser: true,
+    es2023: true,
+  },
+  overrides: [
+    {
+      files: ['**/*.stories.*'],
+      rules: {
+        'import/no-anonymous-default-export': 'off',
+      },
+    },
+  ],
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Storybook contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,269 @@
+# @walkeros/storybook-addon
+
+A Storybook addon that integrates walkerOS tagging support for data collection
+and tracking validation. This addon helps you visualize and debug walkerOS
+events in your Storybook stories, making it easier to validate your tracking
+implementation during development.
+
+## Features
+
+- 🔍 **Event Visualization**: View all walkerOS events detected in your stories
+  in real-time
+- 🔄 **Auto-refresh**: Automatically updates when navigating between stories or
+  changing story controls
+- 📊 **Detailed Event Information**: Inspect complete event data with JSON
+  syntax highlighting
+- ⚙️ **Configurable Settings**: Customize prefix and auto-refresh behavior
+- 🎯 **Story Arguments**: Pre-built arg types for walkerOS tagging attributes
+- 🚀 **Zero Configuration**: Works out of the box with walkerOS data attributes
+
+## Installation
+
+Install the addon in your Storybook project:
+
+```bash
+npm install --save-dev @walkeros/storybook-addon
+```
+
+Then register it in your Storybook configuration:
+
+```ts
+// .storybook/main.ts
+import type { StorybookConfig } from '@storybook/react'; // or your framework
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-docs',
+    '@walkeros/storybook-addon', // 👈 Add the walkerOS addon
+  ],
+  framework: {
+    name: '@storybook/react', // or your framework
+    options: {},
+  },
+};
+
+export default config;
+```
+
+## Usage
+
+### Quick Start
+
+1. **Install and register** the addon (see Installation above)
+
+2. **Add walkerOS tracking** to your components using the `dataElb` prop
+   pattern:
+
+   ```tsx
+   import { createTrackingProps, type DataElb } from '../utils/tagger';
+
+   interface ButtonProps {
+     label: string;
+     dataElb?: DataElb;
+   }
+
+   export const Button = ({ label, dataElb }: ButtonProps) => {
+     const trackingProps = createTrackingProps(dataElb);
+     return <button {...trackingProps}>{label}</button>;
+   };
+   ```
+
+3. **View your story** - the walkerOS addon panel will automatically appear and
+   show detected events
+
+4. **Configure as needed** using the addon's Config tab or story parameters
+
+### Configure Storybook Controls
+
+Add `dataElb` controls to your stories for easy tracking configuration:
+
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    dataElb: {
+      control: { type: 'object' },
+      description: 'walkerOS tracking configuration',
+    },
+    // ... your other arg types
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Button',
+    dataElb: {
+      entity: 'button',
+      action: 'click',
+      data: { category: 'primary' },
+    },
+  },
+};
+```
+
+### Configuration
+
+The addon works with default settings out of the box, but you can customize its
+behavior:
+
+#### Global Configuration
+
+Configure the addon globally in your Storybook preview:
+
+```ts
+// .storybook/preview.ts
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    // The addon automatically registers its own global configuration
+    // You can override defaults here if needed
+  },
+};
+
+export default preview;
+```
+
+#### Runtime Configuration
+
+Use the addon's **Config tab** in the Storybook panel to adjust settings:
+
+- **Auto-refresh**: Toggle automatic event updates
+- **Prefix**: Change the data attribute prefix (default: `data-elb`)
+
+These settings are saved and will persist across browser sessions.
+
+## API Reference
+
+### Exports
+
+The addon exports the following types:
+
+```ts
+import {
+  DataElb, // TypeScript interface for dataElb prop
+} from '@walkeros/storybook-addon';
+```
+
+### `DataElb` Interface
+
+TypeScript interface for the tracking prop pattern:
+
+```ts
+interface DataElb {
+  entity?: string;
+  trigger?: string;
+  action?: string;
+  data?: WalkerOS.Properties; // Rich data objects
+  context?: WalkerOS.Properties; // Context information
+  globals?: WalkerOS.Properties; // Global properties
+  link?: Record<string, string>; // Link relationships
+}
+```
+
+### Addon Configuration
+
+The addon provides these configuration options (accessible via the Config tab):
+
+#### `autoRefresh`
+
+- **Type**: `boolean`
+- **Default**: `true`
+- **Description**: Automatically refresh events when navigating between stories
+  or changing controls
+
+#### `prefix`
+
+- **Type**: `string`
+- **Default**: `'data-elb'`
+- **Description**: Data attribute prefix used by walkerOS (must match your
+  walkerOS setup)
+
+## How It Works
+
+The addon works by:
+
+1. **Event Detection**: Uses `getAllEvents` from `@walkeros/web-source-browser`
+   to scan your story's DOM for walkerOS data attributes
+2. **Real-time Updates**: Automatically refreshes when stories change or
+   controls are updated
+3. **Event Display**: Shows detailed information about each detected event with
+   JSON syntax highlighting
+4. **Interactive UI**: Provides an expandable list interface for easy event
+   inspection
+5. **Zero Configuration**: Works without initializing walkerOS - just add the
+   `dataElb` prop to your components
+
+## Supported Frameworks
+
+This addon works with any Storybook framework:
+
+- React
+- Vue
+- Angular
+- Web Components
+- HTML
+- Svelte
+
+## Troubleshooting
+
+### Events Not Showing
+
+If events are not appearing in the addon panel:
+
+1. **Check tracking implementation**: Ensure your components use the `dataElb`
+   prop:
+
+   ```tsx
+   <Button label="Click me" dataElb={{ entity: 'button', action: 'click' }} />
+   ```
+
+2. **Verify prefix**: Check that the prefix in the Config tab matches your
+   attributes (default: `data-elb`)
+
+3. **Check rendering**: Ensure your components are actually rendered in the
+   story DOM
+
+4. **Manual refresh**: Try clicking "Update events" button in the addon panel
+
+5. **Console errors**: Check browser console for any JavaScript errors
+
+### Common Issues
+
+- **Empty event list**: Components may not have walkerOS attributes or the
+  prefix doesn't match
+- **Outdated events**: Try disabling and re-enabling auto-refresh, or manually
+  refresh
+- **Missing addon panel**: Ensure the addon is properly registered in
+  `.storybook/main.ts`
+
+## Development
+
+This addon is part of the
+[walkerOS monorepo](https://github.com/elbwalker/walkerOS).
+
+To contribute:
+
+1. Clone the walkerOS repository
+2. Run `npm install` in the root
+3. Make changes in `apps/storybook-addon/`
+4. Test with the demo in `apps/demos/storybook/`
+
+## License
+
+MIT © [elbwalker GmbH](https://www.elbwalker.com)
+
+## Links
+
+- [walkerOS Documentation](https://docs.walkeros.com)
+- [GitHub Repository](https://github.com/elbwalker/walkerOS)
+- [walkerOS Website](https://www.walkeros.com)

package/dist/index.cjs

@@ -0,0 +1,2 @@
+'use strict';//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+import { WalkerOS } from '@walkeros/core';
+
+interface WalkerOSAddon {
+    autoRefresh: boolean;
+    prefix?: string;
+}
+interface DataElb {
+    entity?: string;
+    trigger?: string;
+    action?: string;
+    data?: WalkerOS.Properties;
+    context?: WalkerOS.Properties;
+    globals?: WalkerOS.Properties;
+    link?: Record<string, string>;
+}
+
+export type { DataElb, WalkerOSAddon };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { WalkerOS } from '@walkeros/core';
+
+interface WalkerOSAddon {
+    autoRefresh: boolean;
+    prefix?: string;
+}
+interface DataElb {
+    entity?: string;
+    trigger?: string;
+    action?: string;
+    data?: WalkerOS.Properties;
+    context?: WalkerOS.Properties;
+    globals?: WalkerOS.Properties;
+    link?: Record<string, string>;
+}
+
+export type { DataElb, WalkerOSAddon };

package/dist/index.js

@@ -0,0 +1,2 @@
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/manager.js

@@ -0,0 +1,2 @@
+import {useStorybookApi,useGlobals,useChannel,addons,types}from'storybook/manager-api';import {memo,useState,useCallback,useEffect,Fragment}from'react';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';import {jsx,jsxs}from'react/jsx-runtime';var i="walkerOS",S=`${i}/panel`;var m={RESULT:`${i}/result`,REQUEST:`${i}/request`};var w=styled.ul({listStyle:"none",fontSize:14,padding:0,margin:0}),N=styled.div(({theme:e})=>({display:"flex",width:"100%",borderBottom:`1px solid ${e.appBorderColor}`,"&:hover":{background:e.background.hoverable}})),_=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"})),W=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}`}})),$=styled.div(({theme:e})=>({padding:e.layoutMargin,background:e.background.content,fontFamily:e.typography.fonts.mono,whiteSpace:"pre-wrap",textAlign:"left"})),U=({item:e})=>{let[r,s]=useState(true);return jsxs(Fragment,{children:[jsx(N,{children:jsxs(W,{onClick:()=>s(!r),role:"button",children:[jsx(_,{style:{transform:`rotate(${r?0:-90}deg)`}}),e.title]})}),r?jsx($,{children:e.content}):null]})},b=({items:e})=>jsx(w,{children:e.map((r,s)=>jsx(U,{item:r},s))});var A=memo(function(r){let s=useTheme(),c=useStorybookApi(),[x,L]=useGlobals(),n={...{autoRefresh:true,prefix:"data-elb"},...x[i]},[f,T]=useState([]),h=(t,a)=>{let D={...n,[t]:a};L({[i]:D});},E=useChannel({[m.RESULT]:t=>{T(t);}}),l=useCallback(()=>{E(m.REQUEST,n);},[n,E]);useEffect(()=>{n.autoRefresh&&l();},[]),useEffect(()=>{if(!n.autoRefresh)return;let t=[CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED];return t.forEach(a=>c.on(a,l)),()=>t.forEach(a=>c.off(a,l))},[c,l,n.autoRefresh]);let C=t=>{let a=t.length==1?"Event":"Events";return `${t.length} ${a}`};return jsx(AddonPanel,{...r,children:jsxs(TabsState,{initial:"events",backgroundColor:s.background.hoverable,children:[jsx("div",{id:"events",title:C(f),children:jsxs(Placeholder,{children:[jsx(Fragment,{children:jsx(Button,{onClick:l,children:"Update events"})}),f.length>0?jsx(b,{items:f.map((t,a)=>({title:`#${a+1} ${t.entity} ${t.action}`,content:jsx(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true,children:JSON.stringify(t,null,2)})}))}):jsx("p",{children:"No events yet"})]})}),jsx("div",{id:"config",title:"Config",children:jsx(Placeholder,{children:jsxs(Fragment,{children:[jsx(Form.Field,{label:"Auto-refresh",children:jsx("input",{type:"checkbox",id:"autoRefresh",checked:n.autoRefresh,onChange:t=>h("autoRefresh",t.target.checked)})}),jsx(Form.Field,{label:"Prefix",children:jsx(Form.Input,{name:"Prefix",value:n.prefix,placeholder:n.prefix,onChange:t=>h("prefix",t.target.value),size:"flex"})})]})})})]})})});addons.register(i,e=>{addons.add(S,{type:types.PANEL,title:i,match:({viewMode:r})=>r==="story",render:({active:r})=>jsx(A,{active:!!r})});});//# sourceMappingURL=manager.js.map
+//# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -0,0 +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"]}

package/dist/preset.cjs

@@ -0,0 +1,2 @@
+'use strict';var t=async n=>n,e=async n=>n;exports.viteFinal=t;exports.webpack=e;//# sourceMappingURL=preset.cjs.map
+//# sourceMappingURL=preset.cjs.map

package/dist/preset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preset.ts"],"names":["viteFinal","config","webpack"],"mappings":"aAAO,IAAMA,EAAY,MAAOC,CAAAA,EACvBA,CAAAA,CAGIC,CAAAA,CAAU,MAAOD,CAAAA,EACrBA","file":"preset.cjs","sourcesContent":["export const viteFinal = async (config: unknown) => {\n  return config;\n};\n\nexport const webpack = async (config: unknown) => {\n  return config;\n};\n"]}

package/dist/preview.cjs

@@ -0,0 +1,2 @@
+'use strict';var previewApi=require('storybook/preview-api'),webSourceBrowser=require('@walkeros/web-source-browser');var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`};var n=previewApi.addons.getChannel(),a=null;n.addListener(r.REQUEST,t=>{let o=a||document.querySelector("#storybook-root")||document.body,s=webSourceBrowser.getAllEvents(o,t.prefix);n.emit(r.RESULT,s);});var l=(t,o)=>(a=o.canvasElement,t());var c={decorators:[l],globalTypes:{[e]:{description:"walkerOS addon configuration",defaultValue:{autoRefresh:true,prefix:"data-elb"}}},initialGlobals:{[e]:{autoRefresh:true,prefix:"data-elb"}}},x=c;module.exports=x;//# sourceMappingURL=preview.cjs.map
+//# sourceMappingURL=preview.cjs.map

package/dist/preview.cjs.map

@@ -0,0 +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 'src/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.d.cts

@@ -0,0 +1,20 @@
+import { ProjectAnnotations, Renderer } from 'storybook/internal/types';
+
+/**
+ * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
+ * in order to augment stories:
+ * - with extra rendering
+ * - gather details about how a story is rendered
+ *
+ * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
+ *
+ * https://storybook.js.org/docs/react/writing-stories/decorators
+ */
+
+/**
+ * Note: if you want to use JSX in this file, rename it to `preview.tsx`
+ * and update the entry prop in tsup.config.ts to use "src/preview.tsx",
+ */
+declare const preview: ProjectAnnotations<Renderer>;
+
+export { preview as default };

package/dist/preview.d.ts

@@ -0,0 +1,20 @@
+import { ProjectAnnotations, Renderer } from 'storybook/internal/types';
+
+/**
+ * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
+ * in order to augment stories:
+ * - with extra rendering
+ * - gather details about how a story is rendered
+ *
+ * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
+ *
+ * https://storybook.js.org/docs/react/writing-stories/decorators
+ */
+
+/**
+ * Note: if you want to use JSX in this file, rename it to `preview.tsx`
+ * and update the entry prop in tsup.config.ts to use "src/preview.tsx",
+ */
+declare const preview: ProjectAnnotations<Renderer>;
+
+export { preview as default };

package/dist/preview.js

@@ -0,0 +1,2 @@
+import {addons}from'storybook/preview-api';import {getAllEvents}from'@walkeros/web-source-browser';var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`};var n=addons.getChannel(),a=null;n.addListener(r.REQUEST,t=>{let o=a||document.querySelector("#storybook-root")||document.body,s=getAllEvents(o,t.prefix);n.emit(r.RESULT,s);});var l=(t,o)=>(a=o.canvasElement,t());var c={decorators:[l],globalTypes:{[e]:{description:"walkerOS addon configuration",defaultValue:{autoRefresh:true,prefix:"data-elb"}}},initialGlobals:{[e]:{autoRefresh:true,prefix:"data-elb"}}},x=c;export{x as default};//# sourceMappingURL=preview.js.map
+//# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -0,0 +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 'src/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/manager.js

@@ -0,0 +1 @@
+import './dist/manager';

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@walkeros/storybook-addon",
+  "version": "0.0.1",
+  "description": "Integrate walkerOS tagging support for data collection",
+  "keywords": [
+    "tracking",
+    "data collection",
+    "tagging",
+    "storybook-addons"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elbwalker/walkerOS",
+    "directory": "apps/storybook-addon"
+  },
+  "type": "module",
+  "license": "MIT",
+  "author": "elbwalker GmbH <hello@elbwalker.com>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./preview": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/preview.js",
+      "require": "./dist/preview.cjs"
+    },
+    "./preset": "./dist/preset.cjs",
+    "./manager": "./dist/manager.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "npm run build -- --watch",
+    "test": "jest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist",
+    "start": "run-p build:watch \"storybook --quiet\"",
+    "prerelease": "zx scripts/prepublish-checks.js",
+    "release": "npm run build && auto shipit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@walkeros/core": "*",
+    "@walkeros/web-core": "*",
+    "@walkeros/web-source-browser": "*",
+    "@storybook/icons": "^1.4.0"
+  },
+  "devDependencies": {
+    "@walkeros/eslint": "*",
+    "@walkeros/jest": "*",
+    "@walkeros/tsconfig": "*",
+    "@walkeros/tsup": "*",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/react-vite": "^9.0.15",
+    "@types/node": "^22",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react": "^4.2.1",
+    "auto": "^11.1.1",
+    "boxen": "^7.1.1",
+    "npm-run-all2": "^6.2.3",
+    "prettier": "^3.3.3",
+    "prompts": "^2.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^9.0.15",
+    "ts-dedent": "^2.2.0",
+    "tsup": "^8.2.4",
+    "typescript": "^5.8.2",
+    "vite": "^5.3.5",
+    "zx": "^8.4.1"
+  },
+  "peerDependencies": {
+    "storybook": "^9.0.15"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "exportEntries": [
+      "src/index.ts"
+    ],
+    "managerEntries": [
+      "src/manager.tsx"
+    ],
+    "previewEntries": [
+      "src/preview.ts"
+    ],
+    "nodeEntries": [
+      "src/preset.ts"
+    ]
+  },
+  "storybook": {
+    "displayName": "walkerOS",
+    "supportedFrameworks": [
+      "react",
+      "html"
+    ],
+    "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
+  }
+}

package/preset.js

@@ -0,0 +1,4 @@
+// this file is slightly misleading. It needs to be CJS, and thus in this "type": "module" package it should be named preset.cjs
+// but Storybook won't pick that filename up so we have to name it preset.js instead
+
+module.exports = require('./dist/preset.cjs');

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/preview';