@designcrowd/fe-shared-lib 1.6.7 → 1.6.9-ModalAccessibility

package/src/atoms/components/AiPoweredLoader/AiPoweredLoader.stories.js

@@ -5,15 +5,10 @@ export default {
   component: AiPoweredLoader,
   argTypes: {
     size: {
-      control: { type: 'number', min: 16, max: 200, step: 8 },
+      control: { type: 'range', min: 50, max: 500, step: 1 },
       description: 'Size of the loader in pixels (width and height)',
       defaultValue: 96,
     },
-    interval: {
-      control: { type: 'range', min: 50, max: 500, step: 50 },
-      description: 'Animation frame interval in milliseconds',
-      defaultValue: 150,
-    },
     alt: {
       control: 'text',
       description: 'Alternative text for accessibility',
@@ -33,175 +28,9 @@ export const Default = (args) => ({
 
 Default.args = {
   size: 96,
-  interval: 150,
   alt: 'loading',
 };
 
-// Size variations story
-export const SizeVariations = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-flex tw-gap-8 tw-items-center tw-p-6">
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="48" alt="Small loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Small (48px)</p>
-      </div>
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="64" alt="Medium-small loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Medium-Small (64px)</p>
-      </div>
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="96" alt="Default loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Default (96px)</p>
-      </div>
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="128" alt="Large loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Large (128px)</p>
-      </div>
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="160" alt="Extra large loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Extra Large (160px)</p>
-      </div>
-    </div>
-  `,
-});
-
-SizeVariations.story = {
-  name: 'Size Variations',
-};
-
-// Speed variations story
-export const SpeedVariations = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Animation Speed Variations</h3>
-      <div class="tw-flex tw-gap-8 tw-items-center">
-        <div class="tw-text-center">
-          <AiPoweredLoader :interval="75" alt="Fast animation" />
-          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Fast (75ms)</p>
-        </div>
-        <div class="tw-text-center">
-          <AiPoweredLoader :interval="150" alt="Normal animation" />
-          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Normal (150ms)</p>
-        </div>
-        <div class="tw-text-center">
-          <AiPoweredLoader :interval="300" alt="Slow animation" />
-          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Slow (300ms)</p>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-SpeedVariations.story = {
-  name: 'Animation Speed',
-};
-
-// Common use cases story
-export const CommonUseCases = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-p-6 tw-space-y-8">
-      <!-- Inline loader -->
-      <div class="tw-border tw-rounded-lg tw-p-4">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Inline Button Loader</h4>
-        <div class="tw-flex tw-items-center tw-gap-3">
-          <button class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded tw-flex tw-items-center tw-gap-2">
-            <AiPoweredLoader :size="20" :interval="100" alt="Processing" />
-            Processing...
-          </button>
-        </div>
-      </div>
-
-      <!-- Card loader -->
-      <div class="tw-border tw-rounded-lg tw-p-4">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Card Loading State</h4>
-        <div class="tw-bg-gray-50 tw-rounded tw-p-6 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[200px]">
-          <AiPoweredLoader :size="80" alt="Loading content" />
-          <p class="tw-mt-4 tw-text-gray-600">Loading your content...</p>
-        </div>
-      </div>
-
-      <!-- Page loader -->
-      <div class="tw-border tw-rounded-lg tw-p-4">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Full Page Loader</h4>
-        <div class="tw-bg-white tw-rounded tw-p-12 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px] tw-border-2 tw-border-dashed tw-border-gray-300">
-          <AiPoweredLoader :size="120" alt="Loading page" />
-          <p class="tw-mt-6 tw-text-xl tw-text-gray-700">AI is working its magic...</p>
-          <p class="tw-text-sm tw-text-gray-500 tw-mt-2">This may take a few moments</p>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-CommonUseCases.story = {
-  name: 'Common Use Cases',
-};
-
-// Interactive size control story
-export const InteractiveSize = () => ({
-  components: { AiPoweredLoader },
-  data() {
-    return {
-      currentSize: 96,
-      currentInterval: 150,
-    };
-  },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Interactive Size Control</h3>
-
-      <!-- Controls -->
-      <div class="tw-mb-6 tw-space-y-4">
-        <div class="tw-flex tw-items-center tw-gap-4">
-          <label class="tw-text-sm tw-font-medium tw-w-20">Size:</label>
-          <input
-            type="range"
-            min="32"
-            max="200"
-            step="8"
-            v-model="currentSize"
-            class="tw-flex-1 tw-max-w-xs"
-          />
-          <span class="tw-text-sm tw-text-gray-600 tw-w-16">{{ currentSize }}px</span>
-        </div>
-
-        <div class="tw-flex tw-items-center tw-gap-4">
-          <label class="tw-text-sm tw-font-medium tw-w-20">Speed:</label>
-          <input
-            type="range"
-            min="50"
-            max="500"
-            step="25"
-            v-model="currentInterval"
-            class="tw-flex-1 tw-max-w-xs"
-          />
-          <span class="tw-text-sm tw-text-gray-600 tw-w-16">{{ currentInterval }}ms</span>
-        </div>
-      </div>
-
-      <!-- Preview -->
-      <div class="tw-flex tw-items-center tw-justify-center tw-p-8 tw-bg-gray-50 tw-rounded-lg">
-        <AiPoweredLoader
-          :size="currentSize"
-          :interval="currentInterval"
-          alt="Interactive loader preview"
-        />
-      </div>
-
-      <p class="tw-text-sm tw-text-gray-600 tw-mt-4">
-        Use the sliders above to adjust the loader size and animation speed in real-time.
-      </p>
-    </div>
-  `,
-});
-
-InteractiveSize.story = {
-  name: 'Interactive Controls',
-};
-
 // Comparison with traditional loader story
 export const LoaderComparison = () => ({
   components: { AiPoweredLoader },
@@ -259,106 +88,3 @@ export const LoaderComparison = () => ({
 LoaderComparison.story = {
   name: 'Loader Comparison',
 };
-
-// Showcase story
-export const Showcase = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-4">AI-Powered Loader Showcase</h3>
-
-      <div class="tw-space-y-8">
-        <!-- Size Showcase -->
-        <div class="tw-border tw-rounded-lg tw-p-6">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Size Range</h4>
-          <div class="tw-flex tw-gap-6 tw-items-end tw-justify-center">
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="32" alt="Tiny loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">32px</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="48" alt="Small loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">48px</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="64" alt="Medium loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">64px</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="96" alt="Default loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">96px (default)</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="128" alt="Large loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">128px</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="180" alt="Extra large loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">180px</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Speed Showcase -->
-        <div class="tw-border tw-rounded-lg tw-p-6">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Animation Speeds</h4>
-          <div class="tw-flex tw-gap-8 tw-items-center tw-justify-center">
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="80" :interval="50" alt="Very fast loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Very Fast (50ms)</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="80" :interval="100" alt="Fast loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Fast (100ms)</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="80" :interval="150" alt="Normal loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Normal (150ms)</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="80" :interval="250" alt="Slow loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Slow (250ms)</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Context Examples -->
-        <div class="tw-border tw-rounded-lg tw-p-6">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Real-World Examples</h4>
-          <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6">
-            <!-- Button context -->
-            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
-              <p class="tw-text-sm tw-font-medium tw-mb-3">Button Context</p>
-              <button class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded tw-flex tw-items-center tw-gap-2 tw-mx-auto">
-                <AiPoweredLoader :size="18" :interval="120" alt="Button loading" />
-                Loading...
-              </button>
-            </div>
-
-            <!-- Card context -->
-            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
-              <p class="tw-text-sm tw-font-medium tw-mb-3">Card Loading</p>
-              <div class="tw-bg-white tw-p-4 tw-rounded tw-shadow-sm">
-                <AiPoweredLoader :size="60" alt="Card loading" />
-                <p class="tw-text-sm tw-text-gray-600 tw-mt-2">Loading data...</p>
-              </div>
-            </div>
-
-            <!-- Full screen context -->
-            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
-              <p class="tw-text-sm tw-font-medium tw-mb-3">Page Loading</p>
-              <div class="tw-bg-white tw-p-6 tw-rounded tw-shadow-sm tw-min-h-[120px] tw-flex tw-flex-col tw-justify-center">
-                <AiPoweredLoader :size="80" alt="Page loading" />
-                <p class="tw-text-sm tw-text-gray-600 tw-mt-3">Please wait...</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-Showcase.story = {
-  name: 'Complete Showcase',
-};