kwikid-components-react/components/kwikui/carousel/Carousel.stories.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithoutIndicators = exports.ProfessionalUI = exports.LimitedIndicators = exports.ImagesOnly = exports.FullFeatured = exports.EnhancedDesign = exports.Default = exports.CustomStyling = exports.ConsistentLayout = void 0;
var _react = _interopRequireDefault(require("react"));
var _Carousel = _interopRequireDefault(require("./Carousel"));
var _Carousel2 = _interopRequireDefault(require("./Carousel.defaults"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * The Carousel component displays a series of content items (images, videos, or custom content)
 * in a rotating slider that allows users to navigate between items.
 *
 * ## Usage
 *
 * ```jsx
 * import { KwikUICarousel } from 'react-kwikui';
 *
 * <KwikUICarousel
 *   indicators={{
 *     isActive: true,
 *     showAllIndicators: true,
 *     maxVisibleIndicators: 5
 *   }}
 * >
 *   <img src="image1.jpg" alt="Slide 1" />
 *   <img src="image2.jpg" alt="Slide 2" />
 *   <img src="image3.jpg" alt="Slide 3" />
 * </KwikUICarousel>
 * ```
 */
var _default = exports.default = {
  title: "KwikUI/Display/Carousel",
  component: _Carousel.default,
  parameters: {
    componentSubtitle: "Interactive content slider with navigation controls",
    docs: {
      description: {
        component: "The Carousel component provides a responsive way to display multiple content items in a rotating slider with navigation controls."
      }
    },
    a11y: {
      config: {
        rules: [{
          id: "color-contrast",
          enabled: true
        }, {
          id: "button-name",
          enabled: true
        }]
      }
    }
  },
  argTypes: {
    children: {
      description: "Content items to be displayed in the carousel (images, videos, or custom content)",
      table: {
        type: {
          summary: "React.ReactElement[]"
        }
      }
    },
    customStyles: {
      control: "object",
      description: "Custom styles for the carousel container and content area",
      table: {
        type: {
          summary: "object"
        },
        defaultValue: {
          summary: "{ container: {}, content: {} }"
        }
      }
    },
    indicators: {
      control: "object",
      description: "Configuration for the carousel navigation indicators",
      table: {
        type: {
          summary: "object"
        },
        defaultValue: {
          summary: "{ isActive: true, showAllIndicators: true, maxVisibleIndicators: 5 }"
        }
      }
    }
  }
};
/**
 * Sample images for demonstration
 */
const sampleImages = ["https://images.pexels.com/photos/1666021/pexels-photo-1666021.jpeg?cs=srgb&dl=conifers-daylight-environment-1666021.jpg&fm=jpg", "https://wallpaperaccess.com/full/4958480.jpg", "https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?cs=srgb&dl=landscape-nature-sky-236047.jpg&fm=jpg", "https://www.w3schools.com/csS/paris.jpg"];

/**
 * Sample videos for demonstration
 */
const sampleVideos = ["http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"];

/**
 * Template for rendering the Carousel component
 */
const Template = args => {
  return /*#__PURE__*/_react.default.createElement(_Carousel.default, args, /*#__PURE__*/_react.default.createElement("video", {
    src: sampleVideos[0],
    controls: true
  }, /*#__PURE__*/_react.default.createElement("track", {
    kind: "captions",
    src: "",
    label: "English"
  })), /*#__PURE__*/_react.default.createElement("video", {
    src: sampleVideos[1],
    controls: true
  }, /*#__PURE__*/_react.default.createElement("track", {
    kind: "captions",
    src: "",
    label: "English"
  })), /*#__PURE__*/_react.default.createElement("img", {
    src: sampleImages[0],
    alt: "Nature landscape with trees"
  }), /*#__PURE__*/_react.default.createElement("img", {
    src: sampleImages[1],
    alt: "Mountain landscape"
  }), /*#__PURE__*/_react.default.createElement("img", {
    src: sampleImages[2],
    alt: "Countryside landscape"
  }), /*#__PURE__*/_react.default.createElement("img", {
    src: sampleImages[3],
    alt: "Paris"
  }));
};

/**
 * Default carousel implementation
 */
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread({}, _Carousel2.default);
Default.parameters = {
  docs: {
    description: {
      story: "Default carousel with standard navigation indicators."
    }
  }
};

/**
 * Carousel with custom styling
 */
const CustomStyling = exports.CustomStyling = Template.bind({});
CustomStyling.args = _objectSpread(_objectSpread({}, _Carousel2.default), {}, {
  customStyles: {
    container: {
      border: "2px solid #3B82F6",
      borderRadius: "8px",
      padding: "16px",
      backgroundColor: "#F3F4F6"
    },
    content: {
      borderRadius: "4px",
      overflow: "hidden"
    }
  }
});
CustomStyling.parameters = {
  docs: {
    description: {
      story: "Carousel with custom styling for better integration with your design system."
    }
  }
};

/**
 * Carousel with limited visible indicators
 */
const LimitedIndicators = exports.LimitedIndicators = Template.bind({});
LimitedIndicators.args = _objectSpread(_objectSpread({}, _Carousel2.default), {}, {
  indicators: {
    isActive: true,
    showAllIndicators: false,
    maxVisibleIndicators: 3
  }
});
LimitedIndicators.parameters = {
  docs: {
    description: {
      story: "Carousel with a limited number of visible navigation indicators, useful for carousels with many slides."
    }
  }
};

/**
 * Carousel without indicators
 */
const WithoutIndicators = exports.WithoutIndicators = Template.bind({});
WithoutIndicators.args = _objectSpread(_objectSpread({}, _Carousel2.default), {}, {
  indicators: {
    isActive: false,
    showAllIndicators: false,
    maxVisibleIndicators: 0
  }
});
WithoutIndicators.parameters = {
  docs: {
    description: {
      story: "Carousel without navigation indicators, for a cleaner look or when indicators are not needed."
    }
  }
};

/**
 * Carousel with image content only
 */
const ImagesOnly = args => {
  return /*#__PURE__*/_react.default.createElement(_Carousel.default, args, /*#__PURE__*/_react.default.createElement("img", {
    src: sampleImages[0],
    alt: "Nature landscape with trees"
  }), /*#__PURE__*/_react.default.createElement("img", {
    src: sampleImages[1],
    alt: "Mountain landscape"
  }), /*#__PURE__*/_react.default.createElement("img", {
    src: sampleImages[2],
    alt: "Countryside landscape"
  }), /*#__PURE__*/_react.default.createElement("img", {
    src: sampleImages[3],
    alt: "Paris"
  }));
};
exports.ImagesOnly = ImagesOnly;
ImagesOnly.args = _objectSpread({}, _Carousel2.default);
ImagesOnly.parameters = {
  docs: {
    description: {
      story: "Carousel displaying only image content, a common use case for photo galleries."
    }
  }
};

/**
 * Enhanced design carousel
 */
const EnhancedDesign = exports.EnhancedDesign = Template.bind({});
EnhancedDesign.args = _objectSpread(_objectSpread({}, _Carousel2.default), {}, {
  customStyles: {
    container: {
      borderRadius: "12px",
      overflow: "hidden",
      boxShadow: "0 8px 20px rgba(0, 0, 0, 0.08)",
      background: "linear-gradient(145deg, #ffffff, #f5f7fa)",
      maxWidth: "900px"
    },
    content: {
      borderRadius: "8px",
      overflow: "hidden"
    }
  }
});
EnhancedDesign.parameters = {
  docs: {
    description: {
      story: "Carousel with enhanced visual design featuring subtle shadows and improved aesthetics."
    }
  }
};

/**
 * Consistent layout carousel
 */
const ConsistentLayout = exports.ConsistentLayout = Template.bind({});
ConsistentLayout.args = _objectSpread(_objectSpread({}, _Carousel2.default), {}, {
  customStyles: {
    container: {
      borderRadius: "8px",
      overflow: "hidden",
      boxShadow: "0 6px 16px rgba(0, 0, 0, 0.07)",
      background: "#fdfdfd",
      maxWidth: "800px",
      padding: "1.5rem",
      border: "1px solid #eaeaea"
    },
    content: {
      borderRadius: "4px",
      overflow: "hidden",
      height: "400px"
    }
  },
  indicators: {
    isActive: true,
    showAllIndicators: true,
    maxVisibleIndicators: 5
  }
});
ConsistentLayout.parameters = {
  docs: {
    description: {
      story: "Carousel with consistent spacing, alignment, and improved layout structure. Demonstrates how to create a more refined user interface with proper spacing."
    }
  }
};

/**
 * Full-featured carousel
 */
const FullFeatured = exports.FullFeatured = Template.bind({});
FullFeatured.args = _objectSpread(_objectSpread({}, _Carousel2.default), {}, {
  indicators: {
    isActive: true,
    showAllIndicators: false,
    maxVisibleIndicators: 5
  },
  customStyles: {
    container: {
      borderRadius: "16px",
      overflow: "hidden",
      boxShadow: "0 10px 30px rgba(0, 0, 0, 0.15)",
      background: "linear-gradient(145deg, #ffffff, #f0f4f8)"
    },
    content: {
      borderRadius: "8px",
      overflow: "hidden"
    }
  }
});
FullFeatured.parameters = {
  docs: {
    description: {
      story: "A comprehensive carousel implementation with touch gestures, limited indicators, and modern styling."
    }
  }
};

/**
 * Professional UI Carousel
 */
const ProfessionalUI = exports.ProfessionalUI = Template.bind({});
ProfessionalUI.args = _objectSpread(_objectSpread({}, _Carousel2.default), {}, {
  indicators: {
    isActive: true,
    showAllIndicators: true,
    maxVisibleIndicators: 6
  },
  customStyles: {
    container: {
      borderRadius: "10px",
      overflow: "hidden",
      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.06)",
      background: "#ffffff",
      maxWidth: "900px",
      border: "1px solid #f0f0f0"
    },
    content: {
      borderRadius: "6px",
      overflow: "hidden",
      height: "450px"
    }
  }
});
ProfessionalUI.parameters = {
  docs: {
    description: {
      story: "A professionally styled carousel with modern indicators and a refined slide counter. Features an elegant, minimalist design that enhances the user experience while maintaining focus on content."
    }
  }
};