@designcrowd/fe-shared-lib 1.7.0 → 1.8.0

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

@@ -1,90 +1,90 @@
-import AiPoweredLoader from './AiPoweredLoader.vue';
-
-export default {
-  title: 'Components/AiPoweredLoader',
-  component: AiPoweredLoader,
-  argTypes: {
-    size: {
-      control: { type: 'range', min: 50, max: 500, step: 1 },
-      description: 'Size of the loader in pixels (width and height)',
-      defaultValue: 96,
-    },
-    alt: {
-      control: 'text',
-      description: 'Alternative text for accessibility',
-      defaultValue: 'loading',
-    },
-  },
-};
-
-// Default story
-export const Default = (args) => ({
-  components: { AiPoweredLoader },
-  setup() {
-    return { args };
-  },
-  template: '<AiPoweredLoader v-bind="args" />',
-});
-
-Default.args = {
-  size: 96,
-  alt: 'loading',
-};
-
-// Comparison with traditional loader story
-export const LoaderComparison = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-6">AI-Powered vs Traditional Loaders</h3>
-
-      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-8">
-        <!-- AI Powered Loader -->
-        <div class="tw-border tw-rounded-lg tw-p-6 tw-text-center">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4 tw-text-purple-600">AI-Powered Loader</h4>
-          <div class="tw-flex tw-justify-center tw-mb-4">
-            <AiPoweredLoader :size="96" alt="AI-powered loader" />
-          </div>
-          <ul class="tw-text-sm tw-text-gray-600 tw-space-y-1 tw-text-left">
-            <li>• Modern sparkle animation</li>
-            <li>• Customizable size</li>
-            <li>• Smooth gradient transitions</li>
-            <li>• Configurable speed</li>
-            <li>• Accessibility support</li>
-          </ul>
-        </div>
-
-        <!-- Traditional Loader -->
-        <div class="tw-border tw-rounded-lg tw-p-6 tw-text-center">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4 tw-text-gray-600">Traditional GIF Loader</h4>
-          <div class="tw-flex tw-justify-center tw-mb-4">
-            <img
-              src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
-              alt="Traditional loading GIF"
-              class="tw-block"
-              style="width: 96px; height: auto;"
-            />
-          </div>
-          <ul class="tw-text-sm tw-text-gray-600 tw-space-y-1 tw-text-left">
-            <li>• Fixed GIF animation</li>
-            <li>• Static sizing</li>
-            <li>• Limited customization</li>
-            <li>• Larger file size</li>
-            <li>• Less modern appearance</li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="tw-mt-6 tw-p-4 tw-bg-purple-50 tw-rounded-lg">
-        <p class="tw-text-sm tw-text-purple-800">
-          <strong>✨ Pro Tip:</strong> The AI-Powered Loader provides better performance, smaller bundle size,
-          and complete customization while maintaining a modern, engaging user experience.
-        </p>
-      </div>
-    </div>
-  `,
-});
-
-LoaderComparison.story = {
-  name: 'Loader Comparison',
-};
+import AiPoweredLoader from './AiPoweredLoader.vue';
+
+export default {
+  title: 'Components/AiPoweredLoader',
+  component: AiPoweredLoader,
+  argTypes: {
+    size: {
+      control: { type: 'range', min: 50, max: 500, step: 1 },
+      description: 'Size of the loader in pixels (width and height)',
+      defaultValue: 96,
+    },
+    alt: {
+      control: 'text',
+      description: 'Alternative text for accessibility',
+      defaultValue: 'loading',
+    },
+  },
+};
+
+// Default story
+export const Default = (args) => ({
+  components: { AiPoweredLoader },
+  setup() {
+    return { args };
+  },
+  template: '<AiPoweredLoader v-bind="args" />',
+});
+
+Default.args = {
+  size: 96,
+  alt: 'loading',
+};
+
+// Comparison with traditional loader story
+export const LoaderComparison = () => ({
+  components: { AiPoweredLoader },
+  template: `
+    <div class="tw-p-6">
+      <h3 class="tw-text-lg tw-font-bold tw-mb-6">AI-Powered vs Traditional Loaders</h3>
+
+      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-8">
+        <!-- AI Powered Loader -->
+        <div class="tw-border tw-rounded-lg tw-p-6 tw-text-center">
+          <h4 class="tw-text-md tw-font-semibold tw-mb-4 tw-text-purple-600">AI-Powered Loader</h4>
+          <div class="tw-flex tw-justify-center tw-mb-4">
+            <AiPoweredLoader :size="96" alt="AI-powered loader" />
+          </div>
+          <ul class="tw-text-sm tw-text-gray-600 tw-space-y-1 tw-text-left">
+            <li>• Modern sparkle animation</li>
+            <li>• Customizable size</li>
+            <li>• Smooth gradient transitions</li>
+            <li>• Configurable speed</li>
+            <li>• Accessibility support</li>
+          </ul>
+        </div>
+
+        <!-- Traditional Loader -->
+        <div class="tw-border tw-rounded-lg tw-p-6 tw-text-center">
+          <h4 class="tw-text-md tw-font-semibold tw-mb-4 tw-text-gray-600">Traditional GIF Loader</h4>
+          <div class="tw-flex tw-justify-center tw-mb-4">
+            <img
+              src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
+              alt="Traditional loading GIF"
+              class="tw-block"
+              style="width: 96px; height: auto;"
+            />
+          </div>
+          <ul class="tw-text-sm tw-text-gray-600 tw-space-y-1 tw-text-left">
+            <li>• Fixed GIF animation</li>
+            <li>• Static sizing</li>
+            <li>• Limited customization</li>
+            <li>• Larger file size</li>
+            <li>• Less modern appearance</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="tw-mt-6 tw-p-4 tw-bg-purple-50 tw-rounded-lg">
+        <p class="tw-text-sm tw-text-purple-800">
+          <strong>✨ Pro Tip:</strong> The AI-Powered Loader provides better performance, smaller bundle size,
+          and complete customization while maintaining a modern, engaging user experience.
+        </p>
+      </div>
+    </div>
+  `,
+});
+
+LoaderComparison.story = {
+  name: 'Loader Comparison',
+};

package/src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue

@@ -1,120 +1,120 @@
-<template>
-  <div class="sparkle-loader" role="status" :aria-label="alt">
-    <svg :width="size" :height="size" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
-      <g id="bottom-star">
-        <path
-          d="M39.286883,33.960772c-6.044693,2.417601-7.991402,4.376919-10.393442,10.460772C26.491402,38.337691,24.544694,36.378373,18.5,33.960772C24.544694,31.543171,26.491402,29.583852,28.893441,23.5c2.402041,6.083852,4.348749,8.043171,10.393442,10.460772Z"
-          transform="matrix(1 0 0 1 -5 -6)"
-          fill="#8b5cf6"
-        ></path>
-      </g>
-      <g id="top-star">
-        <path
-          d="M39.056802,33.844967c-5.977787,2.390837-7.902948,4.328466-10.278401,10.344967C26.402949,38.173434,24.477787,36.235805,18.5,33.844967C24.477787,31.454131,26.402949,29.516502,28.778401,23.5c2.375453,6.016502,4.300614,7.954131,10.278401,10.344967Z"
-          transform="matrix(1 0 0 1 -5 -61)"
-          fill="#8b5cf6"
-        ></path>
-      </g>
-      <g id="primary">
-        <path
-          d="M65.653886,47.229432c-13.71205,5.484135-18.128049,9.928695-23.576943,23.729431C36.62805,57.158127,32.212051,52.713567,18.5,47.229432C32.212051,41.745296,36.62805,37.300736,42.076943,23.5c5.448894,13.800736,9.864893,18.245296,23.576943,23.729432Z"
-          transform="matrix(1.595951 0.008736 -0.00868 1.585695 -77.344676 -75.246035)"
-          fill="#8b5cf6"
-        ></path>
-      </g>
-      <g class="arc">
-        <path
-          d="M 0 -90
-      A 90 90 0 0 1 85 -30"
-          stroke="url(#sparkle-grad-2)"
-          stroke-width="16"
-          stroke-linecap="round"
-          fill="transparent"
-        ></path>
-      </g>
-      <defs>
-        <linearGradient id="sparkle-grad-2" x1="0" y1="-90" x2="85" y2="-30" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#E3E3E3" stop-opacity="0"></stop>
-          <stop offset="0.33" stop-color="#E3E3E3" stop-opacity="0.3"></stop>
-          <stop offset="0.66" stop-color="#8b5cf6" stop-opacity="0.5"></stop>
-          <stop offset="1" stop-color="#d946ef"></stop>
-        </linearGradient>
-      </defs>
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  size?: number;
-  alt?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 96,
-  alt: 'loading',
-});
-</script>
-
-<style scoped>
-.arc {
-  animation: ai-loader-circle 2000ms infinite linear;
-}
-
-@keyframes ai-loader-circle {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-
-#primary {
-  animation: ai-loader-primary 2000ms infinite ease-in-out;
-}
-
-@keyframes ai-loader-primary {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(0.5) translate(-7.5px);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-#top-star {
-  animation: ai-loader-secondary-top 2000ms infinite ease-in-out;
-}
-
-#bottom-star {
-  animation: ai-loader-secondary-bottom 2000ms infinite ease-in-out;
-}
-
-@keyframes ai-loader-secondary-bottom {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.5) translate(-7.5px, -7.5px);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes ai-loader-secondary-top {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.5) translate(-7.5px, 7.5px);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-</style>
+<template>
+  <div class="sparkle-loader" role="status" :aria-label="alt">
+    <svg :width="size" :height="size" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
+      <g id="bottom-star">
+        <path
+          d="M39.286883,33.960772c-6.044693,2.417601-7.991402,4.376919-10.393442,10.460772C26.491402,38.337691,24.544694,36.378373,18.5,33.960772C24.544694,31.543171,26.491402,29.583852,28.893441,23.5c2.402041,6.083852,4.348749,8.043171,10.393442,10.460772Z"
+          transform="matrix(1 0 0 1 -5 -6)"
+          fill="#8b5cf6"
+        ></path>
+      </g>
+      <g id="top-star">
+        <path
+          d="M39.056802,33.844967c-5.977787,2.390837-7.902948,4.328466-10.278401,10.344967C26.402949,38.173434,24.477787,36.235805,18.5,33.844967C24.477787,31.454131,26.402949,29.516502,28.778401,23.5c2.375453,6.016502,4.300614,7.954131,10.278401,10.344967Z"
+          transform="matrix(1 0 0 1 -5 -61)"
+          fill="#8b5cf6"
+        ></path>
+      </g>
+      <g id="primary">
+        <path
+          d="M65.653886,47.229432c-13.71205,5.484135-18.128049,9.928695-23.576943,23.729431C36.62805,57.158127,32.212051,52.713567,18.5,47.229432C32.212051,41.745296,36.62805,37.300736,42.076943,23.5c5.448894,13.800736,9.864893,18.245296,23.576943,23.729432Z"
+          transform="matrix(1.595951 0.008736 -0.00868 1.585695 -77.344676 -75.246035)"
+          fill="#8b5cf6"
+        ></path>
+      </g>
+      <g class="arc">
+        <path
+          d="M 0 -90
+      A 90 90 0 0 1 85 -30"
+          stroke="url(#sparkle-grad-2)"
+          stroke-width="16"
+          stroke-linecap="round"
+          fill="transparent"
+        ></path>
+      </g>
+      <defs>
+        <linearGradient id="sparkle-grad-2" x1="0" y1="-90" x2="85" y2="-30" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#E3E3E3" stop-opacity="0"></stop>
+          <stop offset="0.33" stop-color="#E3E3E3" stop-opacity="0.3"></stop>
+          <stop offset="0.66" stop-color="#8b5cf6" stop-opacity="0.5"></stop>
+          <stop offset="1" stop-color="#d946ef"></stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  size?: number;
+  alt?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 96,
+  alt: 'loading',
+});
+</script>
+
+<style scoped>
+.arc {
+  animation: ai-loader-circle 2000ms infinite linear;
+}
+
+@keyframes ai-loader-circle {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+#primary {
+  animation: ai-loader-primary 2000ms infinite ease-in-out;
+}
+
+@keyframes ai-loader-primary {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.5) translate(-7.5px);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+#top-star {
+  animation: ai-loader-secondary-top 2000ms infinite ease-in-out;
+}
+
+#bottom-star {
+  animation: ai-loader-secondary-bottom 2000ms infinite ease-in-out;
+}
+
+@keyframes ai-loader-secondary-bottom {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5) translate(-7.5px, -7.5px);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes ai-loader-secondary-top {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5) translate(-7.5px, 7.5px);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>