@designcrowd/fe-shared-lib 1.7.0 → 1.7.1

package/index.cjs

@@ -1,17 +1,17 @@
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
-
-module.exports = {
-  themes: {
-    brandCrowd: bcTheme,
-    brandPage: bpTheme,
-    crazyDomains: cdTheme,
-    designCrowd: dcTheme,
-    designCom: dcomTheme,
-  },
-  viewports,
+const bcTheme = require("./src/themes/bc");
+const bpTheme = require("./src/themes/bp");
+const dcTheme = require("./src/themes/dc");
+const cdTheme = require("./src/themes/cd");
+const dcomTheme = require("./src/themes/dcom");
+const viewports = require("./src/viewports");
+
+module.exports = {
+  themes: {
+    brandCrowd: bcTheme,
+    brandPage: bpTheme,
+    crazyDomains: cdTheme,
+    designCrowd: dcTheme,
+    designCom: dcomTheme,
+  },
+  viewports,
 };

package/index.js

@@ -1,62 +1,62 @@
-export { default as UploadYourLogoDropzone } from './src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue';
-export { default as UploadYourLogoApplication } from './src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue';
-export { default as UploadedLogoSearchResultCard } from './src/experiences/components/UploadedLogoSearchResultCard/UploadedLogoSearchResultCard.vue';
-export { default as SignUpModal } from './src/experiences/components/AuthFlow/SignUpModal.vue';
-export { default as SignUp } from './src/experiences/components/AuthFlow/SignUp.vue';
-export { default as SignIn } from './src/experiences/components/AuthFlow/SignIn.vue';
-export { default as ForgotPasswordModal } from './src/experiences/components/AuthFlow/ForgotPasswordModal.vue';
-export { default as ForgotPassword } from './src/experiences/components/AuthFlow/ForgotPassword.vue';
-export { default as ResetPasswordModal } from './src/experiences/components/AuthFlow/ResetPasswordModal.vue';
-export { default as ResetPassword } from './src/experiences/components/AuthFlow/ResetPassword.vue';
-export { default as ResetPasswordSuccessModal } from './src/experiences/components/AuthFlow/ResetPasswordSuccessModal.vue';
-export { default as PaymentConfigList } from './src/experiences/components/PaymentConfigList/PaymentConfigList.vue';
-export { default as PaymentConfigDropdown } from './src/experiences/components/PaymentConfigList/PaymentConfigDropdown.vue';
-export { default as brandPageApiClient } from './src/experiences/clients/brand-page-api.client';
-export { default as brandCrowdApiClient } from './src/experiences/clients/brand-crowd-api.client';
-export { default as SellDomainNameListModal } from './src/experiences/components/SellDomainNameListModal/SellDomainNameListModal.vue';
-export { default as SellDomainNameList } from './src/experiences/components/SellDomainNameList/SellDomainNameList.vue';
-export { default as SellDomainNameWidget } from './src/experiences/components/SellDomainNameWidget/SellDomainNameWidget.vue';
-export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
-export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
-export { default as WebsiteContextualUpgradeModal } from './src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue';
-export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteContextualModel';
-
-export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
-
-export { default as Button } from './src/atoms/components/Button/Button.vue';
-export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
-export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';
-export { default as DropdownItem } from './src/atoms/components/Dropdown/DropdownItem.vue';
-export { default as Icon } from './src/atoms/components/Icon/Icon.vue';
-export { default as DcomIcon } from './src/atoms/components/design-com/Icon/Icon.vue';
-export { default as Modal } from './src/atoms/components/Modal/Modal.vue';
-export { default as Loader } from './src/atoms/components/Loader/Loader.vue';
-export { default as AiPoweredLoader } from './src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
-export { default as Tooltip } from './src/atoms/components/Tooltip/Tooltip.vue';
-export { default as Picture } from './src/atoms/components/Picture/Picture.vue';
-export { default as HelloBar } from './src/atoms/components/HelloBar/HelloBar.vue';
-export { default as PromoCard } from './src/atoms/components/PromoCard/PromoCard.vue';
-export { default as SearchBar } from './src/atoms/components/SearchBar/SearchBar.vue';
-export { default as StarRating } from './src/atoms/components/StarRating/StarRating.vue';
-export { default as TabMenu } from './src/atoms/components/TabMenu/TabMenu.vue';
-export { default as TextInput } from './src/atoms/components/TextInput/TextInput.vue';
-export { default as TextCopyField } from './src/atoms/components/TextCopyField/TextCopyField.vue';
-export { default as Textarea } from './src/atoms/components/Textarea/Textarea.vue';
-export { default as Toggle } from './src/atoms/components/Toggle/Toggle.vue';
-export { default as Checkbox } from './src/atoms/components/Checkbox/Checkbox.vue';
-export { default as ColorPicker } from './src/atoms/components/ColorPicker/ColorPicker.vue';
-export { default as Carousel } from './src/atoms/components/Carousel/Carousel.vue';
-export { default as Checktile } from './src/atoms/components/Checktile/Checktile.vue';
-export { default as Pill } from './src/atoms/components/Pill/Pill.vue';
-export { default as PillBar } from './src/atoms/components/PillBar/PillBar.vue';
-export { default as Notice } from './src/atoms/components/Notice/Notice.vue';
-export { default as Masonry } from './src/atoms/components/Masonry/Masonry.vue';
-export { default as CollapsiblePanel } from './src/atoms/components/CollapsiblePanel/CollapsiblePanel.vue';
-export { default as Slider } from './src/atoms/components/Slider/Slider.vue';
-export { default as Price } from './src/atoms/components/Price/Price.vue';
-export { default as HashRouteModal } from './src/atoms/components/Modal/HashRouteModal.vue';
-export { default as Select } from './src/atoms/components/Select/Select.vue';
-export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
-export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
-export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
-export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';
+export { default as UploadYourLogoDropzone } from './src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue';
+export { default as UploadYourLogoApplication } from './src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue';
+export { default as UploadedLogoSearchResultCard } from './src/experiences/components/UploadedLogoSearchResultCard/UploadedLogoSearchResultCard.vue';
+export { default as SignUpModal } from './src/experiences/components/AuthFlow/SignUpModal.vue';
+export { default as SignUp } from './src/experiences/components/AuthFlow/SignUp.vue';
+export { default as SignIn } from './src/experiences/components/AuthFlow/SignIn.vue';
+export { default as ForgotPasswordModal } from './src/experiences/components/AuthFlow/ForgotPasswordModal.vue';
+export { default as ForgotPassword } from './src/experiences/components/AuthFlow/ForgotPassword.vue';
+export { default as ResetPasswordModal } from './src/experiences/components/AuthFlow/ResetPasswordModal.vue';
+export { default as ResetPassword } from './src/experiences/components/AuthFlow/ResetPassword.vue';
+export { default as ResetPasswordSuccessModal } from './src/experiences/components/AuthFlow/ResetPasswordSuccessModal.vue';
+export { default as PaymentConfigList } from './src/experiences/components/PaymentConfigList/PaymentConfigList.vue';
+export { default as PaymentConfigDropdown } from './src/experiences/components/PaymentConfigList/PaymentConfigDropdown.vue';
+export { default as brandPageApiClient } from './src/experiences/clients/brand-page-api.client';
+export { default as brandCrowdApiClient } from './src/experiences/clients/brand-crowd-api.client';
+export { default as SellDomainNameListModal } from './src/experiences/components/SellDomainNameListModal/SellDomainNameListModal.vue';
+export { default as SellDomainNameList } from './src/experiences/components/SellDomainNameList/SellDomainNameList.vue';
+export { default as SellDomainNameWidget } from './src/experiences/components/SellDomainNameWidget/SellDomainNameWidget.vue';
+export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
+export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
+export { default as WebsiteContextualUpgradeModal } from './src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue';
+export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteContextualModel';
+
+export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
+
+export { default as Button } from './src/atoms/components/Button/Button.vue';
+export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
+export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';
+export { default as DropdownItem } from './src/atoms/components/Dropdown/DropdownItem.vue';
+export { default as Icon } from './src/atoms/components/Icon/Icon.vue';
+export { default as DcomIcon } from './src/atoms/components/design-com/Icon/Icon.vue';
+export { default as Modal } from './src/atoms/components/Modal/Modal.vue';
+export { default as Loader } from './src/atoms/components/Loader/Loader.vue';
+export { default as AiPoweredLoader } from './src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
+export { default as Tooltip } from './src/atoms/components/Tooltip/Tooltip.vue';
+export { default as Picture } from './src/atoms/components/Picture/Picture.vue';
+export { default as HelloBar } from './src/atoms/components/HelloBar/HelloBar.vue';
+export { default as PromoCard } from './src/atoms/components/PromoCard/PromoCard.vue';
+export { default as SearchBar } from './src/atoms/components/SearchBar/SearchBar.vue';
+export { default as StarRating } from './src/atoms/components/StarRating/StarRating.vue';
+export { default as TabMenu } from './src/atoms/components/TabMenu/TabMenu.vue';
+export { default as TextInput } from './src/atoms/components/TextInput/TextInput.vue';
+export { default as TextCopyField } from './src/atoms/components/TextCopyField/TextCopyField.vue';
+export { default as Textarea } from './src/atoms/components/Textarea/Textarea.vue';
+export { default as Toggle } from './src/atoms/components/Toggle/Toggle.vue';
+export { default as Checkbox } from './src/atoms/components/Checkbox/Checkbox.vue';
+export { default as ColorPicker } from './src/atoms/components/ColorPicker/ColorPicker.vue';
+export { default as Carousel } from './src/atoms/components/Carousel/Carousel.vue';
+export { default as Checktile } from './src/atoms/components/Checktile/Checktile.vue';
+export { default as Pill } from './src/atoms/components/Pill/Pill.vue';
+export { default as PillBar } from './src/atoms/components/PillBar/PillBar.vue';
+export { default as Notice } from './src/atoms/components/Notice/Notice.vue';
+export { default as Masonry } from './src/atoms/components/Masonry/Masonry.vue';
+export { default as CollapsiblePanel } from './src/atoms/components/CollapsiblePanel/CollapsiblePanel.vue';
+export { default as Slider } from './src/atoms/components/Slider/Slider.vue';
+export { default as Price } from './src/atoms/components/Price/Price.vue';
+export { default as HashRouteModal } from './src/atoms/components/Modal/HashRouteModal.vue';
+export { default as Select } from './src/atoms/components/Select/Select.vue';
+export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
+export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
+export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
+export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';

package/nodemon.translation.json

@@ -1,7 +1,7 @@
-{
-    "exec": "npm run bundle-translation",
-    "ext": ".json",
-    "watch": [
-        "./src"
-    ]
+{
+    "exec": "npm run bundle-translation",
+    "ext": ".json",
+    "watch": [
+        "./src"
+    ]
 }

package/package.json

@@ -1,115 +1,115 @@
-{
-  "name": "@designcrowd/fe-shared-lib",
-  "version": "1.7.0",
-  "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 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",
-    "watch:translation": "nodemon --config nodemon.translation.json",
-    "storybook:themes": "node ./tailwind.themes.js",
-    "storybook:css": "node ./tailwind.build.js --storybook",
-    "lint": "NODE_ENV=production eslint ./src/ --ext .ts,.js,.vue",
-    "lint:fix": "NODE_ENV=production eslint ./src/ --fix --ext .js,.vue",
-    "pre-commit": "NODE_ENV=production lint-staged",
-    "pre-push": "NODE_ENV=production lint-staged",
-    "prepare": "husky",
-    "docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
-  },
-  "dependencies": {
-    "@nuxtjs/i18n": "9.5.4",
-    "autoprefixer": "10.4.17",
-    "axios": "1.6.7",
-    "click-outside-vue3": "4.0.1",
-    "core-js": "3.35.1",
-    "cropperjs": "1.6.1",
-    "dropzone-vue3": "1.0.2",
-    "fs-extra": "11.2.0",
-    "i18next": "25.2.1",
-    "lodash.throttle": "4.1.1",
-    "postcss-loader": "8.1.0",
-    "swiper": "11.0.6",
-    "tailwindcss": "3.4.1",
-    "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": "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.4",
-    "axios-mock-adapter": "1.22.0",
-    "css-loader": "6.10.0",
-    "cssnano": "6.0.3",
-    "eslint": "8.56.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-vue": "9.21.1",
-    "husky": "9.0.10",
-    "lint-staged": "15.2.1",
-    "nodemon": "3.0.3",
-    "npm-run-all": "4.1.5",
-    "postcss": "8.4.33",
-    "postcss-cli": "11.0.0",
-    "postcss-import": "16.0.0",
-    "postcss-nested": "6.0.1",
-    "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.1",
-    "typescript": "5.3.3",
-    "vue-style-loader": "4.1.3",
-    "yargs": "17.7.2"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "lint-staged": {
-    "*.{js,jsx,vue}": [
-      "npm run lint",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pwd && npm run pre-commit",
-      "pre-push": "pwd && npm run pre-push"
-    }
-  },
-  "exports": {
-    ".": {
-      "require": "./index.cjs",
-      "import": "./index.js"
-    },
-    "./src/*.vue": {
-      "import": "./src/*.vue"
-    },
-    "./src/*.js": {
-      "import": "./src/*.js"
-    }
-  },
-  "overrides": {
-    "storybook": "$storybook"
-  }
-}
+{
+  "name": "@designcrowd/fe-shared-lib",
+  "version": "1.7.1",
+  "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 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",
+    "watch:translation": "nodemon --config nodemon.translation.json",
+    "storybook:themes": "node ./tailwind.themes.js",
+    "storybook:css": "node ./tailwind.build.js --storybook",
+    "lint": "NODE_ENV=production eslint ./src/ --ext .ts,.js,.vue",
+    "lint:fix": "NODE_ENV=production eslint ./src/ --fix --ext .js,.vue",
+    "pre-commit": "NODE_ENV=production lint-staged",
+    "pre-push": "NODE_ENV=production lint-staged",
+    "prepare": "husky",
+    "docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
+  },
+  "dependencies": {
+    "@nuxtjs/i18n": "9.5.4",
+    "autoprefixer": "10.4.17",
+    "axios": "1.6.7",
+    "click-outside-vue3": "4.0.1",
+    "core-js": "3.35.1",
+    "cropperjs": "1.6.1",
+    "dropzone-vue3": "1.0.2",
+    "fs-extra": "11.2.0",
+    "i18next": "25.2.1",
+    "lodash.throttle": "4.1.1",
+    "postcss-loader": "8.1.0",
+    "swiper": "11.0.6",
+    "tailwindcss": "3.4.1",
+    "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": "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.4",
+    "axios-mock-adapter": "1.22.0",
+    "css-loader": "6.10.0",
+    "cssnano": "6.0.3",
+    "eslint": "8.56.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-vue": "9.21.1",
+    "husky": "9.0.10",
+    "lint-staged": "15.2.1",
+    "nodemon": "3.0.3",
+    "npm-run-all": "4.1.5",
+    "postcss": "8.4.33",
+    "postcss-cli": "11.0.0",
+    "postcss-import": "16.0.0",
+    "postcss-nested": "6.0.1",
+    "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.1",
+    "typescript": "5.3.3",
+    "vue-style-loader": "4.1.3",
+    "yargs": "17.7.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "npm run lint",
+      "git add"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pwd && npm run pre-commit",
+      "pre-push": "pwd && npm run pre-push"
+    }
+  },
+  "exports": {
+    ".": {
+      "require": "./index.cjs",
+      "import": "./index.js"
+    },
+    "./src/*.vue": {
+      "import": "./src/*.vue"
+    },
+    "./src/*.js": {
+      "import": "./src/*.js"
+    }
+  },
+  "overrides": {
+    "storybook": "$storybook"
+  }
+}

package/postcss.config.js

@@ -1,5 +1,5 @@
-/* eslint-disable global-require */
-/* eslint-disable prettier/prettier */
-module.exports = {
-  plugins: [require('autoprefixer'), require('tailwindcss')('./tailwind.config.js')],
-};
+/* eslint-disable global-require */
+/* eslint-disable prettier/prettier */
+module.exports = {
+  plugins: [require('autoprefixer'), require('tailwindcss')('./tailwind.config.js')],
+};

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',
+};