@designcrowd/fe-shared-lib 1.6.0 → 1.6.2-eng-4039-freemode

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.6.0",
+  "version": "1.6.2-eng-4039-freemode",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
-    "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev -p 6006",
+    "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev -p 6006 public",
     "build:css": "node ./tailwind.build.js",
     "build:storybook": "mkdir -p public && mkdir -p public/css && npm run storybook:css && storybook build -c .storybook -o .storybook-static && cp -R ./public/css .storybook-static/",
     "bundle-translation": "node ./src/bundleTranslation.js",
@@ -20,62 +20,63 @@
   },
   "dependencies": {
     "@nuxtjs/i18n": "9.5.4",
-    "autoprefixer": "10.4.24",
-    "axios": "1.13.4",
+    "autoprefixer": "10.4.17",
+    "axios": "1.6.7",
     "click-outside-vue3": "4.0.1",
-    "core-js": "3.48.0",
+    "core-js": "3.35.1",
     "cropperjs": "1.6.1",
     "dropzone-vue3": "1.0.2",
-    "fs-extra": "11.3.3",
-    "i18next": "25.8.0",
+    "fs-extra": "11.2.0",
+    "i18next": "25.2.1",
     "lodash.throttle": "4.1.1",
-    "postcss-loader": "8.2.0",
+    "postcss-loader": "8.1.0",
     "swiper": "11.0.6",
     "tailwindcss": "3.4.1",
-    "vite": "^7.3.1",
-    "vite-plugin-vue-devtools": "^7.7.2",
-    "vue": "^3.5.26",
-    "vue-color": "3.3.3",
+    "vite": "6.3.5",
+    "vite-plugin-eslint": "1.8.1",
+    "vite-plugin-vue-devtools": "7.7.0",
+    "vue": "3.5.15",
+    "vue-color": "3.0.2",
     "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
     "vue-router": "4.5.0",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "10.2.3",
-    "@storybook/addon-links": "10.2.3",
-    "@storybook/addon-themes": "10.2.3",
-    "@storybook/vue3": "10.2.3",
-    "@storybook/vue3-vite": "10.2.3",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vue/cli-plugin-eslint": "5.0.9",
-    "@vue/cli-service": "5.0.9",
+    "@storybook/addon-a11y": "9.0.4",
+    "@storybook/addon-links": "9.0.4",
+    "@storybook/addon-themes": "9.0.4",
+    "@storybook/vue3": "9.0.4",
+    "@storybook/vue3-vite": "9.0.4",
+    "@vitejs/plugin-vue": "5.2.4",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-service": "5.0.8",
     "@vue/eslint-config-airbnb": "8.0.0",
     "@vue/eslint-config-prettier": "9.0.0",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.6",
+    "@vue/test-utils": "2.4.4",
     "axios-mock-adapter": "1.22.0",
     "css-loader": "6.10.0",
     "cssnano": "6.0.3",
     "eslint": "8.56.0",
-    "eslint-plugin-prettier": "5.5.5",
-    "eslint-plugin-storybook": "10.2.3",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vue": "9.21.1",
-    "husky": "9.1.7",
+    "husky": "9.0.10",
     "lint-staged": "15.2.1",
-    "nodemon": "3.1.11",
+    "nodemon": "3.0.3",
     "npm-run-all": "4.1.5",
-    "postcss": "8.5.6",
-    "postcss-cli": "11.0.1",
-    "postcss-import": "16.1.1",
+    "postcss": "8.4.33",
+    "postcss-cli": "11.0.0",
+    "postcss-import": "16.0.0",
     "postcss-nested": "6.0.1",
-    "prettier": "3.8.1",
-    "storybook": "10.2.3",
+    "prettier": "3.2.4",
+    "storybook": "9.0.4",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",
     "tailwindcss": "3.4.1",
-    "ts-loader": "9.5.4",
-    "typescript": "5.9.3",
+    "ts-loader": "9.5.1",
+    "typescript": "5.3.3",
     "vue-style-loader": "4.1.3",
     "yargs": "17.7.2"
   },
@@ -107,5 +108,8 @@
     "./src/*.js": {
       "import": "./src/*.js"
     }
+  },
+  "overrides": {
+    "storybook": "$storybook"
   }
 }

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

@@ -0,0 +1,364 @@
+import AiPoweredLoader from './AiPoweredLoader.vue';
+
+export default {
+  title: 'Components/AiPoweredLoader',
+  component: AiPoweredLoader,
+  argTypes: {
+    size: {
+      control: { type: 'number', min: 16, max: 200, step: 8 },
+      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',
+      defaultValue: 'loading',
+    },
+  },
+};
+
+// Default story
+export const Default = (args) => ({
+  components: { AiPoweredLoader },
+  setup() {
+    return { args };
+  },
+  template: '<AiPoweredLoader v-bind="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 },
+  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',
+};
+
+// 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',
+};