@brightspot/ui 1.0.1-wc.4 → 1.1.0

package/dist/storybook/assets/Widget.stories-CcjywoYR.js

@@ -1,300 +0,0 @@
-import{g as u,x as o}from"./iframe-mIh0R_Av.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:h,argTypes:v,template:y}=u("btu-widget"),E={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{actions:{handles:w}},args:{...h,heading:"Widget Title",internalname:"example",widgetid:"demo"},argTypes:v,render:e=>y(e,o`
-        <div class="p-6">
-          <p class="text-gray-700">This is the widget content. It can contain any HTML elements.</p>
-        </div>
-      `)},s={args:{},parameters:{docs:{description:{story:"Basic widget with a title. Non-collapsible by default, displays content statically."}}}},a={args:{collapsible:!0,heading:"Collapsible Widget"},parameters:{docs:{description:{story:"Collapsible widget with expand/collapse button. Click the title or press Enter/Space on the expand button to toggle. State persists in localStorage."}}}},r={args:{collapsible:!0,heading:"Widget with Error",internalname:"errorWidget",widgetid:"error-001"},render:e=>o`
-    <btu-widget
-      ?collapsible=${e.collapsible}
-      .heading=${e.heading}
-      .internalname=${e.internalname}
-      .widgetid=${e.widgetid}
-    >
-      <div class="space-y-4 p-6">
-        <div class="Message is-error bg-error-50 border-error-200 rounded border p-4">
-          <p class="text-error-700 font-medium">Error: This field is required</p>
-        </div>
-        <div>
-          <label class="mb-1 block text-sm font-medium text-gray-700">Required Field</label>
-          <input
-            type="text"
-            class="border-error-600 focus:ring-error focus:border-error w-full rounded border px-3 py-2 focus:ring-2"
-          />
-        </div>
-      </div>
-    </btu-widget>
-  `,parameters:{docs:{description:{story:"Widget automatically expands when it contains error messages (elements with `.Message.is-error` class). The title text turns red and displays an error icon."}}}},d={args:{collapsible:!0,heading:"Publishing Tools"},render:()=>o`
-    <div class="space-y-4">
-      <btu-widget collapsible heading="Metadata" internalname="metadata" widgetid="pub-001">
-        <div class="p-6">
-          <p class="text-gray-700">Edit page metadata and SEO settings.</p>
-        </div>
-      </btu-widget>
-
-      <btu-widget collapsible heading="Tags & Categories" internalname="tags" widgetid="pub-002">
-        <div class="p-6">
-          <p class="text-gray-700">Manage content tags and categories.</p>
-        </div>
-      </btu-widget>
-
-      <btu-widget collapsible heading="Scheduling" internalname="scheduling" widgetid="pub-003">
-        <div class="p-6">
-          <p class="text-gray-700">Set publish date and expiration settings.</p>
-        </div>
-      </btu-widget>
-
-      <btu-widget collapsible heading="Permissions" internalname="permissions" widgetid="pub-004">
-        <div class="p-6">
-          <p class="text-gray-700">Configure access control and permissions.</p>
-        </div>
-      </btu-widget>
-    </div>
-  `,parameters:{docs:{description:{story:"Multiple collapsible widgets stacked vertically, simulating a right rail or sidebar layout. Each widget maintains independent collapse state."}}}},l={args:{collapsible:!0,heading:"Widget with Event Monitoring",internalname:"eventDemo",widgetid:"events-001"},render:e=>{const g=`widget-${Math.random().toString(36).substr(2,9)}`,p=`log-${g}`,m=(n,i)=>{const t=document.getElementById(p);if(!t)return;const b=new Date().toLocaleTimeString(),c=document.createElement("div");for(c.className="border-l-4 border-primary-500 bg-primary-50 px-4 py-2 mb-2",c.innerHTML=`
-        <div class="flex items-center justify-between">
-          <span class="font-semibold text-primary-900">${n}</span>
-          <span class="text-xs text-primary-700">${b}</span>
-        </div>
-        ${i?`<pre class="text-xs text-primary-800 mt-1">${JSON.stringify(i,null,2)}</pre>`:""}
-      `,t.insertBefore(c,t.firstChild);t.children.length>10;)t.removeChild(t.lastChild)};return setTimeout(()=>{const n=document.getElementById(g);n&&(n.addEventListener("btu-widget-ready",(i=>{m("btu-widget-ready",{timestamp:new Date().toISOString()})})),n.addEventListener("btu-widget-toggle",(i=>{const t=i.target;m("btu-widget-toggle",{collapsed:t.collapsed,timestamp:new Date().toISOString()})})))},0),o`
-      <div class="space-y-4">
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <h3 class="mb-2 text-sm font-semibold text-gray-900">Event Log</h3>
-          <p class="mb-3 text-xs text-gray-600">
-            Events emitted by the widget will appear here in real-time. Try collapsing/expanding the widget below.
-          </p>
-          <div id="${p}" class="max-h-96 space-y-2 overflow-y-auto"></div>
-          <div class="mt-3 text-xs text-gray-500">
-            <strong>Events:</strong>
-            <ul class="ml-2 mt-1 list-inside list-disc">
-              <li><code>btu-widget-ready</code> - Fired after widget first render</li>
-              <li><code>btu-widget-toggle</code> - Fired when collapse state changes</li>
-            </ul>
-          </div>
-        </div>
-
-        <btu-widget
-          id="${g}"
-          ?collapsible=${e.collapsible}
-          .heading=${e.heading}
-          .internalname=${e.internalname}
-          .widgetid=${e.widgetid}
-        >
-          <div class="p-6">
-            <p class="mb-4 text-gray-700">
-              This widget demonstrates event emission. Open the browser console to see all events, or watch the event
-              log above.
-            </p>
-            <div class="rounded border border-blue-200 bg-blue-50 p-3">
-              <p class="text-sm text-blue-900">
-                <strong>Try this:</strong> Click the collapse/expand button multiple times and watch the
-                <code class="rounded bg-blue-100 px-1">btu-widget-toggle</code>
-                events appear in the log above.
-              </p>
-            </div>
-          </div>
-        </btu-widget>
-      </div>
-    `},parameters:{docs:{description:{story:`
-Widget event emission demonstration. The widget emits two custom events:
-
-- **btu-widget-ready**: Fired once after the widget's first render and initialization
-- **btu-widget-toggle**: Fired whenever the collapse state changes (only for collapsible widgets)
-
-All events bubble up through the DOM and can be listened to on the widget element or any parent element.
-        `}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story: 'Basic widget with a title. Non-collapsible by default, displays content statically.'
-      }
-    }
-  }
-}`,...s.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  args: {
-    collapsible: true,
-    heading: 'Collapsible Widget'
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Collapsible widget with expand/collapse button. Click the title or press Enter/Space on the expand button to toggle. State persists in localStorage.'
-      }
-    }
-  }
-}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  args: {
-    collapsible: true,
-    heading: 'Widget with Error',
-    internalname: 'errorWidget',
-    widgetid: 'error-001'
-  },
-  render: args => html\`
-    <btu-widget
-      ?collapsible=\${args.collapsible}
-      .heading=\${args.heading}
-      .internalname=\${args.internalname}
-      .widgetid=\${args.widgetid}
-    >
-      <div class="space-y-4 p-6">
-        <div class="Message is-error bg-error-50 border-error-200 rounded border p-4">
-          <p class="text-error-700 font-medium">Error: This field is required</p>
-        </div>
-        <div>
-          <label class="mb-1 block text-sm font-medium text-gray-700">Required Field</label>
-          <input
-            type="text"
-            class="border-error-600 focus:ring-error focus:border-error w-full rounded border px-3 py-2 focus:ring-2"
-          />
-        </div>
-      </div>
-    </btu-widget>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Widget automatically expands when it contains error messages (elements with \`.Message.is-error\` class). The title text turns red and displays an error icon.'
-      }
-    }
-  }
-}`,...r.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
-  args: {
-    collapsible: true,
-    heading: 'Publishing Tools'
-  },
-  render: () => html\`
-    <div class="space-y-4">
-      <btu-widget collapsible heading="Metadata" internalname="metadata" widgetid="pub-001">
-        <div class="p-6">
-          <p class="text-gray-700">Edit page metadata and SEO settings.</p>
-        </div>
-      </btu-widget>
-
-      <btu-widget collapsible heading="Tags & Categories" internalname="tags" widgetid="pub-002">
-        <div class="p-6">
-          <p class="text-gray-700">Manage content tags and categories.</p>
-        </div>
-      </btu-widget>
-
-      <btu-widget collapsible heading="Scheduling" internalname="scheduling" widgetid="pub-003">
-        <div class="p-6">
-          <p class="text-gray-700">Set publish date and expiration settings.</p>
-        </div>
-      </btu-widget>
-
-      <btu-widget collapsible heading="Permissions" internalname="permissions" widgetid="pub-004">
-        <div class="p-6">
-          <p class="text-gray-700">Configure access control and permissions.</p>
-        </div>
-      </btu-widget>
-    </div>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Multiple collapsible widgets stacked vertically, simulating a right rail or sidebar layout. Each widget maintains independent collapse state.'
-      }
-    }
-  }
-}`,...d.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
-  args: {
-    collapsible: true,
-    heading: 'Widget with Event Monitoring',
-    internalname: 'eventDemo',
-    widgetid: 'events-001'
-  },
-  render: args => {
-    // Create a unique ID for this story instance
-    const widgetId = \`widget-\${Math.random().toString(36).substr(2, 9)}\`;
-    const logId = \`log-\${widgetId}\`;
-    const addLogEntry = (eventName: string, detail?: any) => {
-      const logContainer = document.getElementById(logId);
-      if (!logContainer) return;
-      const timestamp = new Date().toLocaleTimeString();
-      const entry = document.createElement('div');
-      entry.className = 'border-l-4 border-primary-500 bg-primary-50 px-4 py-2 mb-2';
-      entry.innerHTML = \`
-        <div class="flex items-center justify-between">
-          <span class="font-semibold text-primary-900">\${eventName}</span>
-          <span class="text-xs text-primary-700">\${timestamp}</span>
-        </div>
-        \${detail ? \`<pre class="text-xs text-primary-800 mt-1">\${JSON.stringify(detail, null, 2)}</pre>\` : ''}
-      \`;
-      logContainer.insertBefore(entry, logContainer.firstChild);
-
-      // Keep only last 10 entries
-      while (logContainer.children.length > 10) {
-        logContainer.removeChild(logContainer.lastChild!);
-      }
-    };
-    setTimeout(() => {
-      const widget = document.getElementById(widgetId);
-      if (!widget) return;
-      widget.addEventListener('btu-widget-ready', ((e: CustomEvent) => {
-        addLogEntry('btu-widget-ready', {
-          timestamp: new Date().toISOString()
-        });
-      }) as EventListener);
-      widget.addEventListener('btu-widget-toggle', ((e: CustomEvent) => {
-        const widgetElement = e.target as any;
-        addLogEntry('btu-widget-toggle', {
-          collapsed: widgetElement.collapsed,
-          timestamp: new Date().toISOString()
-        });
-      }) as EventListener);
-    }, 0);
-    return html\`
-      <div class="space-y-4">
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
-          <h3 class="mb-2 text-sm font-semibold text-gray-900">Event Log</h3>
-          <p class="mb-3 text-xs text-gray-600">
-            Events emitted by the widget will appear here in real-time. Try collapsing/expanding the widget below.
-          </p>
-          <div id="\${logId}" class="max-h-96 space-y-2 overflow-y-auto"></div>
-          <div class="mt-3 text-xs text-gray-500">
-            <strong>Events:</strong>
-            <ul class="ml-2 mt-1 list-inside list-disc">
-              <li><code>btu-widget-ready</code> - Fired after widget first render</li>
-              <li><code>btu-widget-toggle</code> - Fired when collapse state changes</li>
-            </ul>
-          </div>
-        </div>
-
-        <btu-widget
-          id="\${widgetId}"
-          ?collapsible=\${args.collapsible}
-          .heading=\${args.heading}
-          .internalname=\${args.internalname}
-          .widgetid=\${args.widgetid}
-        >
-          <div class="p-6">
-            <p class="mb-4 text-gray-700">
-              This widget demonstrates event emission. Open the browser console to see all events, or watch the event
-              log above.
-            </p>
-            <div class="rounded border border-blue-200 bg-blue-50 p-3">
-              <p class="text-sm text-blue-900">
-                <strong>Try this:</strong> Click the collapse/expand button multiple times and watch the
-                <code class="rounded bg-blue-100 px-1">btu-widget-toggle</code>
-                events appear in the log above.
-              </p>
-            </div>
-          </div>
-        </btu-widget>
-      </div>
-    \`;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: \`
-Widget event emission demonstration. The widget emits two custom events:
-
-- **btu-widget-ready**: Fired once after the widget's first render and initialization
-- **btu-widget-toggle**: Fired whenever the collapse state changes (only for collapsible widgets)
-
-All events bubble up through the DOM and can be listened to on the widget element or any parent element.
-        \`
-      }
-    }
-  }
-}`,...l.parameters?.docs?.source}}};const C=["Default","Collapsible","WithErrorMessage","MultipleWidgets","EventEmission"];export{a as Collapsible,s as Default,l as EventEmission,d as MultipleWidgets,r as WithErrorMessage,C as __namedExportsOrder,E as default};

package/dist/storybook/assets/formatter-OMEEQ6HG-DBJ97XaR.js

@@ -1 +0,0 @@
-import{d as i,a as t}from"./WithTooltip-SK46ZJ2J-DyavE1Bj.js";import{c as m}from"./iframe-mIh0R_Av.js";import"./preload-helper-PPVm8Dsz.js";var a=m(t(),1),d=(0,a.default)(2)(async(e,r)=>e===!1?r:i(r));export{d as formatter};