@brightspot/ui 1.1.0 → 1.2.0

package/dist/storybook/assets/Throttle.stories-DBj-9rhV.js

@@ -0,0 +1,303 @@
+import{x as u}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},a={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const h=document.getElementById(`${t}-normal-count`),m=document.getElementById(`${t}-throttled-count`);h&&(h.textContent=String(n)),m&&(m.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),d=()=>{n++,r()},l=()=>{d(),s()};return u`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Move your mouse over the box below to trigger events. The throttled handler executes at most once per
+            ${e.interval}ms.
+          </p>
+        </div>
+
+        <div @mousemove=${l} class="cursor-pointer rounded border-2 border-gray-300 bg-gray-50 p-8">
+          <div class="space-y-2 text-center">
+            <div class="text-sm text-gray-600">Hover over this area</div>
+            <div class="mt-4 flex justify-around">
+              <div>
+                <div class="text-xs text-gray-500">Normal calls</div>
+                <div id="${t}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+              </div>
+              <div>
+                <div class="text-xs text-gray-500">Throttled calls (${e.interval}ms)</div>
+                <div id="${t}-throttled-count" class="text-primary-600 text-2xl font-bold">0</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button
+          @click=${()=>{n=0,o=0,r()}}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example showing throttle in action. Move your mouse over the box to see how throttling reduces function calls."}}}},i={render:()=>{const e=`scroll-${Math.random().toString(36).substring(2,9)}`;let t=0,n=0;const o=()=>{const d=document.getElementById(`${e}-normal-count`),l=document.getElementById(`${e}-throttled-count`);d&&(d.textContent=String(t)),l&&(l.textContent=String(n))},r=v(300,()=>{n++,o()});return u`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Scroll the content below. The throttled handler executes at most once per 300ms, reducing unnecessary calls
+            during continuous scrolling.
+          </p>
+        </div>
+
+        <div @scroll=${()=>{t++,o(),r()}} class="h-64 overflow-y-scroll rounded border-2 border-gray-300 bg-gray-50 p-4">
+          <div class="space-y-4">
+            ${Array.from({length:50},(d,l)=>u` <div class="rounded border bg-white p-4">Item ${l+1}</div> `)}
+          </div>
+        </div>
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Normal scroll events</div>
+            <div id="${e}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Throttled calls (300ms)</div>
+            <div id="${e}-throttled-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <button
+          @click=${()=>{t=0,n=0,o()}}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    `},parameters:{docs:{description:{story:"Example demonstrating throttle with scroll events. The throttled handler fires much less frequently than the raw scroll event."}}}},c={render:()=>u`
+    <div class="space-y-4 text-sm">
+      <div>
+        <h3 class="mb-2 font-bold">Basic Usage</h3>
+        <pre
+          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
+        ><code>import { throttle } from '@brightspot/ui/dist/util/throttle.js'
+
+const handleScroll = throttle(200, () => {
+  console.log('Scroll handler - max once per 200ms')
+})
+
+window.addEventListener('scroll', handleScroll)</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Common Use Cases</h3>
+        <ul class="list-inside list-disc space-y-1 text-gray-700">
+          <li>Scroll event handlers to update UI elements</li>
+          <li>Window resize handlers for responsive layouts</li>
+          <li>Mousemove handlers for drag operations</li>
+          <li>Input event handlers for search-as-you-type</li>
+          <li>API calls triggered by user interactions</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Parameters</h3>
+        <ul class="space-y-2">
+          <li>
+            <code class="rounded bg-gray-200 px-1">interval</code> (number): The minimum time in milliseconds between
+            function executions
+          </li>
+          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to throttle</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Returns</h3>
+        <p class="text-gray-700">
+          A throttled version of the input function that will execute at most once per interval, preserving the original
+          function's
+          <code class="rounded bg-gray-200 px-1">this</code> context and arguments.
+        </p>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"Code examples and documentation for using the throttle utility."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const instanceId = \`throttle-\${Math.random().toString(36).substring(2, 9)}\`;
+    let normalCount = 0;
+    let throttledCount = 0;
+    const updateCounts = () => {
+      const normalEl = document.getElementById(\`\${instanceId}-normal-count\`);
+      const throttledEl = document.getElementById(\`\${instanceId}-throttled-count\`);
+      if (normalEl) normalEl.textContent = String(normalCount);
+      if (throttledEl) throttledEl.textContent = String(throttledCount);
+    };
+    const handleThrottled = throttle(args.interval, () => {
+      throttledCount++;
+      updateCounts();
+    });
+    const handleNormal = () => {
+      normalCount++;
+      updateCounts();
+    };
+    const handleEvent = () => {
+      handleNormal();
+      handleThrottled();
+    };
+    return html\`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Move your mouse over the box below to trigger events. The throttled handler executes at most once per
+            \${args.interval}ms.
+          </p>
+        </div>
+
+        <div @mousemove=\${handleEvent} class="cursor-pointer rounded border-2 border-gray-300 bg-gray-50 p-8">
+          <div class="space-y-2 text-center">
+            <div class="text-sm text-gray-600">Hover over this area</div>
+            <div class="mt-4 flex justify-around">
+              <div>
+                <div class="text-xs text-gray-500">Normal calls</div>
+                <div id="\${instanceId}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+              </div>
+              <div>
+                <div class="text-xs text-gray-500">Throttled calls (\${args.interval}ms)</div>
+                <div id="\${instanceId}-throttled-count" class="text-primary-600 text-2xl font-bold">0</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button
+          @click=\${() => {
+      normalCount = 0;
+      throttledCount = 0;
+      updateCounts();
+    }}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Interactive example showing throttle in action. Move your mouse over the box to see how throttling reduces function calls.\`
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const instanceId = \`scroll-\${Math.random().toString(36).substring(2, 9)}\`;
+    let scrollCount = 0;
+    let throttledScrollCount = 0;
+    const updateScrollCounts = () => {
+      const normalEl = document.getElementById(\`\${instanceId}-normal-count\`);
+      const throttledEl = document.getElementById(\`\${instanceId}-throttled-count\`);
+      if (normalEl) normalEl.textContent = String(scrollCount);
+      if (throttledEl) throttledEl.textContent = String(throttledScrollCount);
+    };
+    const handleThrottledScroll = throttle(300, () => {
+      throttledScrollCount++;
+      updateScrollCounts();
+    });
+    const handleScroll = () => {
+      scrollCount++;
+      updateScrollCounts();
+      handleThrottledScroll();
+    };
+    return html\`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Scroll the content below. The throttled handler executes at most once per 300ms, reducing unnecessary calls
+            during continuous scrolling.
+          </p>
+        </div>
+
+        <div @scroll=\${handleScroll} class="h-64 overflow-y-scroll rounded border-2 border-gray-300 bg-gray-50 p-4">
+          <div class="space-y-4">
+            \${Array.from({
+      length: 50
+    }, (_, i) => html\` <div class="rounded border bg-white p-4">Item \${i + 1}</div> \`)}
+          </div>
+        </div>
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Normal scroll events</div>
+            <div id="\${instanceId}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Throttled calls (300ms)</div>
+            <div id="\${instanceId}-throttled-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <button
+          @click=\${() => {
+      scrollCount = 0;
+      throttledScrollCount = 0;
+      updateScrollCounts();
+    }}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Example demonstrating throttle with scroll events. The throttled handler fires much less frequently than the raw scroll event.\`
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="space-y-4 text-sm">
+      <div>
+        <h3 class="mb-2 font-bold">Basic Usage</h3>
+        <pre
+          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
+        ><code>import { throttle } from '@brightspot/ui/dist/util/throttle.js'
+
+const handleScroll = throttle(200, () => {
+  console.log('Scroll handler - max once per 200ms')
+})
+
+window.addEventListener('scroll', handleScroll)</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Common Use Cases</h3>
+        <ul class="list-inside list-disc space-y-1 text-gray-700">
+          <li>Scroll event handlers to update UI elements</li>
+          <li>Window resize handlers for responsive layouts</li>
+          <li>Mousemove handlers for drag operations</li>
+          <li>Input event handlers for search-as-you-type</li>
+          <li>API calls triggered by user interactions</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Parameters</h3>
+        <ul class="space-y-2">
+          <li>
+            <code class="rounded bg-gray-200 px-1">interval</code> (number): The minimum time in milliseconds between
+            function executions
+          </li>
+          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to throttle</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Returns</h3>
+        <p class="text-gray-700">
+          A throttled version of the input function that will execute at most once per interval, preserving the original
+          function's
+          <code class="rounded bg-gray-200 px-1">this</code> context and arguments.
+        </p>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Code examples and documentation for using the throttle utility.\`
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};const y=["Interactive","ScrollExample","UsageExample"];export{a as Interactive,i as ScrollExample,c as UsageExample,y as __namedExportsOrder,x as default};