@q2devel/q2-storybook 1.0.8 → 1.0.9

package/dist/components/badge/Badge.js

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 var Badge = function (_a) {
     var children = _a.children, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'bg-blue-100 text-blue-800' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.labelClassName, labelClassName = _d === void 0 ? '' : _d, rightIcon = _a.rightIcon;

package/dist/components/banner/Banner.d.ts

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+export type BannerItem = {
+    id: string;
+    imageSrc: string;
+    imageAlt?: string;
+    title: string;
+    subtitle: string;
+    buttonText?: string;
+    buttonLink?: string;
+    customContent?: ReactNode;
+    overlayOpacity?: number;
+    buttonVariant?: 'primary' | 'secondary' | 'ghost' | 'outline';
+    buttonSize?: 'sm' | 'md' | 'lg';
+};
+export type ControlsType = 'arrows' | 'dots' | 'both' | 'none';
+export type BannerProps = {
+    items: BannerItem[];
+    height?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    controls?: ControlsType;
+    overlayStyle?: 'dark' | 'light' | 'gradient' | 'none';
+    textAlignment?: 'left' | 'center' | 'right';
+    textPosition?: 'top' | 'center' | 'bottom';
+    className?: string;
+    imageClassName?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    buttonClassName?: string;
+    indicatorsClassName?: string;
+    controlsClassName?: string;
+    contentClassName?: string;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    buttonRounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    animation?: 'slide' | 'fade' | 'zoom' | 'none';
+    animationDuration?: number;
+    pauseOnHover?: boolean;
+    infiniteLoop?: boolean;
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+    renderItem?: (item: BannerItem, index: number) => ReactNode;
+    renderControls?: (goToNext: () => void, goToPrev: () => void) => ReactNode;
+    renderIndicators?: (current: number, total: number, goToSlide: (index: number) => void) => ReactNode;
+    onSlideChange?: (currentIndex: number, previousIndex: number) => void;
+    withOverlay?: boolean;
+    overlayOpacity?: number;
+};
+export declare const Banner: ({ items, height, autoplay, autoplayInterval, controls, overlayStyle, textAlignment, textPosition, className, imageClassName, titleClassName, subtitleClassName, buttonClassName, indicatorsClassName, controlsClassName, contentClassName, rounded, buttonRounded, animation, animationDuration, pauseOnHover, infiniteLoop, objectFit, objectPosition, renderItem, renderControls, renderIndicators, onSlideChange, withOverlay, overlayOpacity, }: BannerProps) => React.JSX.Element | null;

package/dist/components/banner/Banner.js

@@ -0,0 +1,142 @@
+'use client';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import buildClassesByJoining from '../../utils/StyleHelper';
+export var Banner = function (_a) {
+    var items = _a.items, _b = _a.height, height = _b === void 0 ? 'md' : _b, _c = _a.autoplay, autoplay = _c === void 0 ? false : _c, _d = _a.autoplayInterval, autoplayInterval = _d === void 0 ? 5000 : _d, _e = _a.controls, controls = _e === void 0 ? 'both' : _e, _f = _a.overlayStyle, overlayStyle = _f === void 0 ? 'gradient' : _f, _g = _a.textAlignment, textAlignment = _g === void 0 ? 'center' : _g, _h = _a.textPosition, textPosition = _h === void 0 ? 'center' : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.imageClassName, imageClassName = _k === void 0 ? '' : _k, _l = _a.titleClassName, titleClassName = _l === void 0 ? '' : _l, _m = _a.subtitleClassName, subtitleClassName = _m === void 0 ? '' : _m, _o = _a.buttonClassName, buttonClassName = _o === void 0 ? '' : _o, _p = _a.indicatorsClassName, indicatorsClassName = _p === void 0 ? '' : _p, _q = _a.controlsClassName, controlsClassName = _q === void 0 ? '' : _q, _r = _a.contentClassName, contentClassName = _r === void 0 ? '' : _r, _s = _a.rounded, rounded = _s === void 0 ? 'none' : _s, _t = _a.buttonRounded, buttonRounded = _t === void 0 ? 'md' : _t, _u = _a.animation, animation = _u === void 0 ? 'slide' : _u, _v = _a.animationDuration, animationDuration = _v === void 0 ? 500 : _v, _w = _a.pauseOnHover, pauseOnHover = _w === void 0 ? true : _w, _x = _a.infiniteLoop, infiniteLoop = _x === void 0 ? true : _x, _y = _a.objectFit, objectFit = _y === void 0 ? 'cover' : _y, _z = _a.objectPosition, objectPosition = _z === void 0 ? 'center' : _z, renderItem = _a.renderItem, renderControls = _a.renderControls, renderIndicators = _a.renderIndicators, onSlideChange = _a.onSlideChange, _0 = _a.withOverlay, withOverlay = _0 === void 0 ? true : _0, _1 = _a.overlayOpacity, overlayOpacity = _1 === void 0 ? 0.5 : _1;
+    var _2 = useState(0), currentIndex = _2[0], setCurrentIndex = _2[1];
+    var _3 = useState(0), prevIndex = _3[0], setPrevIndex = _3[1];
+    var _4 = useState(false), isHovered = _4[0], setIsHovered = _4[1];
+    var showArrows = controls === 'arrows' || controls === 'both';
+    var showDots = controls === 'dots' || controls === 'both';
+    var heightClasses = {
+        sm: 'h-48 sm:h-64',
+        md: 'h-64 sm:h-96',
+        lg: 'h-80 sm:h-[32rem]',
+        xl: 'h-96 sm:h-[40rem]',
+        full: 'h-screen',
+        auto: 'h-auto',
+    };
+    var overlayClasses = {
+        dark: "bg-black/".concat(Math.round(overlayOpacity * 100)),
+        light: "bg-white/".concat(Math.round(overlayOpacity * 100)),
+        gradient: 'bg-gradient-to-t from-black/70 via-black/30 to-transparent',
+        none: '',
+    };
+    var textAlignmentClasses = {
+        left: 'text-left items-start',
+        center: 'text-center items-center',
+        right: 'text-right items-end',
+    };
+    var textPositionClasses = {
+        top: 'justify-start pt-10',
+        center: 'justify-center',
+        bottom: 'justify-end pb-10',
+    };
+    var roundedClasses = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        full: 'rounded-full',
+    };
+    var buttonRoundedClasses = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        full: 'rounded-full',
+    };
+    var objectFitClasses = {
+        cover: 'object-cover',
+        contain: 'object-contain',
+        fill: 'object-fill',
+        none: 'object-none',
+    };
+    var objectPositionClasses = {
+        center: 'object-center',
+        top: 'object-top',
+        bottom: 'object-bottom',
+        left: 'object-left',
+        right: 'object-right',
+    };
+    var animationClasses = {
+        slide: "transition-transform duration-".concat(animationDuration),
+        fade: "transition-opacity duration-".concat(animationDuration),
+        zoom: "transform transition-transform duration-".concat(animationDuration),
+        none: '',
+    };
+    var goToNext = function () {
+        setPrevIndex(currentIndex);
+        setCurrentIndex(function (prev) {
+            var newIndex = prev === items.length - 1 ? (infiniteLoop ? 0 : prev) : prev + 1;
+            onSlideChange && onSlideChange(newIndex, prev);
+            return newIndex;
+        });
+    };
+    var goToPrev = function () {
+        setPrevIndex(currentIndex);
+        setCurrentIndex(function (prev) {
+            var newIndex = prev === 0 ? (infiniteLoop ? items.length - 1 : prev) : prev - 1;
+            onSlideChange && onSlideChange(newIndex, prev);
+            return newIndex;
+        });
+    };
+    var goToSlide = function (index) {
+        if (index === currentIndex)
+            return;
+        setPrevIndex(currentIndex);
+        setCurrentIndex(index);
+        onSlideChange && onSlideChange(index, currentIndex);
+    };
+    // Autoplay effet
+    useEffect(function () {
+        if (!autoplay || (pauseOnHover && isHovered) || items.length <= 1)
+            return;
+        var interval = setInterval(goToNext, autoplayInterval);
+        return function () { return clearInterval(interval); };
+    }, [autoplay, autoplayInterval, isHovered, items.length, pauseOnHover]);
+    if (!items || items.length === 0) {
+        return null;
+    }
+    // Renderovanie individuálneho slide
+    var renderDefaultItem = function (item, index) { return (React.createElement("div", { key: item.id, className: "min-w-full h-full relative ".concat(animation === 'fade'
+            ? index === currentIndex
+                ? 'opacity-100'
+                : 'opacity-0'
+            : '') },
+        React.createElement("div", { className: "absolute inset-0 w-full h-full" },
+            React.createElement(Image, { src: item.imageSrc, alt: item.imageAlt || item.title, fill: true, unoptimized: true, style: { objectFit: objectFit }, priority: index === 0, className: buildClassesByJoining(roundedClasses[rounded], objectFitClasses[objectFit], objectPositionClasses[objectPosition], imageClassName) }),
+            withOverlay && (React.createElement("div", { className: buildClassesByJoining('absolute inset-0', overlayClasses[overlayStyle], roundedClasses[rounded]), style: item.overlayOpacity ? { opacity: item.overlayOpacity } : {} }))),
+        item.customContent || (React.createElement("div", { className: buildClassesByJoining('relative h-full w-full flex flex-col px-6', textPositionClasses[textPosition], textAlignmentClasses[textAlignment], contentClassName) },
+            React.createElement("h2", { className: buildClassesByJoining('text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2', titleClassName) }, item.title),
+            React.createElement("p", { className: buildClassesByJoining('text-xl text-white/80 max-w-2xl', subtitleClassName) }, item.subtitle),
+            item.buttonText && item.buttonLink && (React.createElement("a", { href: item.buttonLink, className: buildClassesByJoining('mt-4 px-6 py-2 bg-white text-black font-medium hover:bg-opacity-90 transition-colors inline-block', buttonRoundedClasses[buttonRounded], buttonClassName) }, item.buttonText)))))); };
+    // Pre jeden slide použijeme zjednodušený výstup
+    if (items.length === 1) {
+        var item = items[0];
+        return (React.createElement("div", { className: buildClassesByJoining('relative overflow-hidden w-full', heightClasses[height], roundedClasses[rounded], className) }, renderItem ? renderItem(item, 0) : renderDefaultItem(item, 0)));
+    }
+    // Pre viac slideov vytvoríme karusel
+    return (React.createElement("div", { className: buildClassesByJoining('relative overflow-hidden w-full', heightClasses[height], roundedClasses[rounded], className), onMouseEnter: function () { return pauseOnHover && setIsHovered(true); }, onMouseLeave: function () { return pauseOnHover && setIsHovered(false); } },
+        React.createElement("div", { className: buildClassesByJoining('flex h-full', animationClasses[animation]), style: animation === 'slide'
+                ? { transform: "translateX(-".concat(currentIndex * 100, "%)") }
+                : {} }, items.map(function (item, index) {
+            return renderItem ? renderItem(item, index) : renderDefaultItem(item, index);
+        })),
+        showArrows &&
+            items.length > 1 &&
+            (renderControls ? (renderControls(goToNext, goToPrev)) : (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: goToPrev, className: buildClassesByJoining('absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors', controlsClassName), "aria-label": "P\u0159edchoz\u00ED" },
+                    React.createElement(ChevronLeftIcon, { className: "h-6 w-6" })),
+                React.createElement("button", { onClick: goToNext, className: buildClassesByJoining('absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors', controlsClassName), "aria-label": "Dal\u0161\u00ED" },
+                    React.createElement(ChevronRightIcon, { className: "h-6 w-6" }))))),
+        showDots &&
+            items.length > 1 &&
+            (renderIndicators ? (renderIndicators(currentIndex, items.length, goToSlide)) : (React.createElement("div", { className: buildClassesByJoining('absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2', indicatorsClassName) }, items.map(function (_, index) { return (React.createElement("button", { key: index, onClick: function () { return goToSlide(index); }, className: buildClassesByJoining('w-3 h-3 rounded-full transition-colors', index === currentIndex
+                    ? 'bg-white'
+                    : 'bg-white/40 hover:bg-white/60'), "aria-label": "P\u0159ej\u00EDt na slide ".concat(index + 1) })); }))))));
+};

package/dist/components/select-field/SelectField.js

@@ -1,3 +1,4 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

package/dist/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+import './global.css';
 export { default as Badge } from './components/badge/Badge';
+export { Banner } from './components/banner/Banner';
 export { default as Button } from './components/button/Button';
 export { NavBar } from './components/nav-bar/NavBar';
 export { ProductCard } from './components/product-card/ProductCard';

package/dist/index.js

@@ -1,5 +1,6 @@
-// src/index.ts
+import './global.css';
 export { default as Badge } from './components/badge/Badge';
+export { Banner } from './components/banner/Banner';
 export { default as Button } from './components/button/Button';
 export { NavBar } from './components/nav-bar/NavBar';
 export { ProductCard } from './components/product-card/ProductCard';

package/package.json

@@ -1,61 +1,64 @@
 {
-  "name": "@q2devel/q2-storybook",
-  "version": "1.0.8",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
+    "name": "@q2devel/q2-storybook",
+    "version": "1.0.9",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "require": "./dist/index.js"
+        },
+        "./styles": "./dist/global.css"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "build": "tsc && npm run copy-assets",
+        "copy-assets": "find src -name '*.css' -exec cp --parents {} dist \\; || xcopy /s /y src\\*.css dist\\",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [],
+    "author": "Q2",
+    "license": "ISC",
+    "description": "Komponenty nebo konfigurace pro storybook",
+    "devDependencies": {
+        "@storybook/addon-actions": "^8.6.12",
+        "@storybook/addon-essentials": "^8.6.12",
+        "@storybook/addon-interactions": "^8.6.12",
+        "@storybook/addon-links": "^8.6.12",
+        "@storybook/addon-onboarding": "^8.6.12",
+        "@storybook/blocks": "^8.6.12",
+        "@storybook/react": "^8.6.12",
+        "@storybook/react-vite": "^8.6.12",
+        "@storybook/test": "^8.6.12",
+        "@types/classnames": "^2.3.0",
+        "@types/node": "^22.14.1",
+        "@types/react": "^19.1.2",
+        "@types/react-dom": "^19.1.2",
+        "autoprefixer": "^10.4.21",
+        "next": "^15.3.2",
+        "postcss": "^8.5.3",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "storybook": "^8.6.12",
+        "tailwindcss": "^4.1.4",
+        "typescript": "^5.8.3"
+    },
+    "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "dependencies": {
+        "@heroicons/react": "^2.2.0",
+        "@tailwindcss/postcss": "^4.1.4",
+        "classnames": "^2.5.1",
+        "html-react-parser": "^5.2.3",
+        "react-select": "^5.10.1",
+        "tailwind-merge": "^3.2.0"
     }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-  "test": "echo \"Error: no test specified\" && exit 1",
-  "storybook": "storybook dev -p 6006",
-  "build-storybook": "storybook build",
-  "build": "tsc",
-  "prepublishOnly": "npm run build"
-},
-  "keywords": [],
-  "author": "Q2",
-  "license": "ISC",
-  "description": "Komponenty nebo konfigurace pro storybook",
-  "devDependencies": {
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@types/classnames": "^2.3.0",
-    "@types/node": "^22.14.1",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.3",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "storybook": "^8.6.12",
-    "tailwindcss": "^4.1.4",
-    "typescript": "^5.8.3"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "dependencies": {
-    "@heroicons/react": "^2.2.0",
-    "@tailwindcss/postcss": "^4.1.4",
-    "classnames": "^2.5.1",
-    "html-react-parser": "^5.2.3",
-    "react-select": "^5.10.1",
-    "tailwind-merge": "^3.2.0"
-  }
 }