@q2devel/q2-storybook 1.0.10 → 1.0.12

package/dist/components/badge/Badge.js

@@ -0,0 +1,8 @@
+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;
+    return (React.createElement("span", { className: "inline-flex items-center rounded px-2.5 py-0.5 text-xs font-medium ".concat(color, " ").concat(className), onClick: onClick },
+        React.createElement("span", { className: labelClassName }, children),
+        rightIcon && React.createElement("span", { className: "ml-1" }, rightIcon)));
+};
+export default Badge;

package/dist/components/button/Button.js

@@ -0,0 +1,7 @@
+// src/components/Button.tsx
+import React from 'react';
+var Button = function (_a) {
+    var onClick = _a.onClick, label = _a.label, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
+    return (React.createElement("button", { onClick: onClick, className: "px-4 py-2 rounded text-white cursor-pointer ".concat(variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500', " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : ''), disabled: disabled }, label));
+};
+export default Button;

package/dist/components/heading/Heading.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface HeadingProps {
+    text: string;
+}
+declare const Heading: React.FC<HeadingProps>;
+export default Heading;

package/dist/components/heading/Heading.js

@@ -0,0 +1,6 @@
+import React from 'react';
+var Heading = function (_a) {
+    var text = _a.text;
+    return React.createElement("h1", null, text);
+};
+export default Heading;

package/dist/components/text-with-image/ImageWithText.js

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+import HTMLReactParser from 'html-react-parser';
+var ImageWithText = function (_a) {
+    var title = _a.title, text = _a.text, imageSrc = _a.imageSrc, imageAlt = _a.imageAlt, _b = _a.inverted, inverted = _b === void 0 ? false : _b, button = _a.button;
+    return (React.createElement("section", { className: "relative ".concat(inverted ? 'bg-white text-black' : 'bg-[var(--color-text-dark)] text-white') },
+        React.createElement("div", { className: "flex flex-col ".concat(inverted ? 'lg:flex-row-reverse' : 'lg:flex-row', " items-center justify-center") },
+            React.createElement("div", { className: "w-full lg:w-1/2 h-64 lg:h-auto overflow-hidden" },
+                React.createElement("img", { src: imageSrc, alt: imageAlt, loading: "lazy", className: "w-full h-full object-cover" })),
+            React.createElement("div", { className: "w-full text-black lg:w-1/2 px-6 py-10 flex flex-col gap-4" },
+                React.createElement("h2", { className: "text-2xl font-semibold uppercase border-b pb-2" }, title),
+                React.createElement("div", { className: "[&_p]:text-sm [&_p]:lg:text-base [&_p]:leading-relaxed" }, HTMLReactParser(text)),
+                button && (React.createElement("a", { href: button.href, className: "inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition" }, button.label))))));
+};
+export default ImageWithText;

package/dist/index.d.ts

@@ -1,10 +1,3 @@
-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';
-export { default as SelectField } from './components/select-field/SelectField';
-export { default as TextField } from './components/text-field/TextField';
+export { default as Badge } from './components/badge/Badge';
 export { default as ImageWithText } from './components/text-with-image/ImageWithText';
-export { buildClassesByJoining } from './utils/StyleHelper';

package/dist/index.js

@@ -0,0 +1,4 @@
+// src/index.ts
+export { default as Button } from './components/button/Button';
+export { default as Badge } from './components/badge/Badge';
+export { default as ImageWithText } from './components/text-with-image/ImageWithText';

package/dist/main.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,69 +1,55 @@
-{
-    "name": "@q2devel/q2-storybook",
-    "version": "1.0.10",
-    "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": "vite build && tsc --emitDeclarationOnly --outDir dist",
-        "copy-assets": "find src -name '*.css' -exec cp --parents {} dist \\; || xcopy /s /y src\\*.css dist\\",
-        "postbuild": "npm run copy-assets",
-        "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",
-        "@vitejs/plugin-react": "^4.4.1",
-        "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",
-        "vite": "^6.3.5",
-        "vite-plugin-css-injected-by-js": "^3.5.2",
-        "vite-plugin-dts": "^4.5.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"
-    }
-}
+{
+  "name": "@q2devel/q2-storybook",
+  "version": "1.0.12",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsc"
+  },
+  "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/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": {
+    "@tailwindcss/postcss": "^4.1.4",
+    "html-react-parser": "^5.2.3"
+  }
+}

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

@@ -1,48 +0,0 @@
-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/icon/CloseIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { SVGProps } from 'react';
-export declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/components/icon/InfoIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { SVGProps } from 'react';
-export declare const InfoIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/components/label/Label.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-interface LabelProps {
-    text?: string;
-    i18nKey?: string;
-    isRequired?: boolean;
-    htmlFor?: string;
-    subtitle?: string;
-    srOnly?: boolean;
-    className?: string;
-}
-declare const Label: ({ text, i18nKey, isRequired, htmlFor, subtitle, srOnly, className, }: LabelProps) => React.JSX.Element | null;
-export default Label;

package/dist/components/nav-bar/NavBar.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-export type NavItem = {
-    name: string;
-    href: string;
-};
-export type NavBarProps = {
-    items?: NavItem[];
-    logo?: React.ReactNode;
-    rightContent?: React.ReactNode;
-    backgroundColor?: string;
-    textColor?: string;
-    activeColor?: string;
-    mobileMenuBgColor?: string;
-    containerClassName?: string;
-    navClassName?: string;
-    itemClassName?: string;
-    mobileItemClassName?: string;
-};
-export declare const NavBar: ({ items, logo, rightContent, backgroundColor, textColor, activeColor, mobileMenuBgColor, containerClassName, navClassName, itemClassName, mobileItemClassName, }: NavBarProps) => React.JSX.Element;

package/dist/components/product-card/ProductCard.d.ts

@@ -1,61 +0,0 @@
-import React from 'react';
-export type Product = {
-    id: string;
-    imageSrc: string;
-    imageAlt: string;
-    href: string;
-    name: string;
-    color?: string;
-    price: string;
-    description?: string;
-    badges?: Array<{
-        text: string;
-        color: string;
-    }>;
-};
-export type QuantityControlProps = {
-    quantity: number;
-    onIncrement: (e: React.MouseEvent) => void;
-    onDecrement: (e: React.MouseEvent) => void;
-    minQuantity?: number;
-    maxQuantity?: number;
-    controlsClassName?: string;
-    buttonClassName?: string;
-    quantityClassName?: string;
-};
-export type ProductCardProps = {
-    product: Product;
-    className?: string;
-    imageClassName?: string;
-    contentClassName?: string;
-    titleClassName?: string;
-    colorClassName?: string;
-    priceClassName?: string;
-    descriptionClassName?: string;
-    badgeClassName?: string;
-    aspectRatio?: 'square' | 'auto' | 'video' | 'wide';
-    imagePosition?: 'top' | 'bottom' | 'center';
-    imageObjectFit?: 'cover' | 'contain' | 'fill' | 'none';
-    layout?: 'default' | 'compact' | 'horizontal';
-    hoverEffect?: 'opacity' | 'scale' | 'shadow' | 'border' | 'none';
-    renderBadges?: boolean;
-    renderColor?: boolean;
-    renderDescription?: boolean;
-    elevationLevel?: 0 | 1 | 2 | 3;
-    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-    titleLines?: 1 | 2 | 3;
-    onCardClick?: (product: Product) => void;
-    onImageClick?: (product: Product) => void;
-    renderFooter?: (product: Product) => React.ReactNode;
-    renderHeader?: (product: Product) => React.ReactNode;
-    actionButton?: React.ReactNode;
-    showAddButton?: boolean;
-    initialQuantity?: number;
-    onQuantityChange?: (product: Product, quantity: number) => void;
-    addButtonIcon?: React.ReactNode;
-    maxQuantity?: number;
-    quantityControlProps?: Partial<QuantityControlProps>;
-    customAddButton?: React.ReactNode;
-    customQuantityControl?: React.ReactNode;
-};
-export declare const ProductCard: ({ product, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, actionButton, showAddButton, initialQuantity, onQuantityChange, addButtonIcon, maxQuantity, quantityControlProps, customAddButton, customQuantityControl, }: ProductCardProps) => React.JSX.Element;

package/dist/components/select-field/SelectField.d.ts

@@ -1,27 +0,0 @@
-import React, { ReactNode, Ref } from 'react';
-import { GroupBase, Props, SelectInstance } from 'react-select';
-import { TooltipRef } from '../tooltip/Tooltip';
-export type SelectFieldSize = 'sm' | 'md' | 'xs' | 'border-sm';
-export type SelectFieldProps<Option, Group extends GroupBase<Option> = GroupBase<Option>, IsMulti extends boolean = false> = Omit<Props<Option, IsMulti, Group>, 'className' | 'classNamePrefix' | 'loadOptions'> & {
-    label?: string;
-    isRequired?: boolean;
-    srOnlyLabel?: boolean;
-    subtitle?: string;
-    color?: string;
-    valid?: boolean;
-    size?: SelectFieldSize;
-    message?: string;
-    className?: string;
-    removePaddingTop?: boolean;
-    renderMessageInTooltip?: boolean;
-    selectFieldType?: 'table' | 'default';
-    placeholder?: string;
-    tooltipRef?: Ref<TooltipRef>;
-    disablePortal?: boolean;
-    tooltipMessage?: ReactNode;
-    typeSelect?: 'single' | 'multi' | 'single-badges';
-    badgeLabelClassName?: string;
-};
-export type SelectFieldRefType<Option, Group extends GroupBase<Option>, IsMulti extends boolean = false> = SelectInstance<Option, IsMulti, Group>;
-declare const SelectField: <Option = unknown, Group extends GroupBase<Option> = GroupBase<Option>, IsMulti extends boolean = false>(props: SelectFieldProps<Option, Group, IsMulti> & React.RefAttributes<SelectFieldRefType<Option, Group, IsMulti>>) => React.JSX.Element;
-export default SelectField;

package/dist/components/select-field/SelectFieldOption.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { GroupBase, OptionProps } from 'react-select';
-export type SelectFieldOptionProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = OptionProps<Option, IsMulti, Group>;
-declare const SelectFieldOption: <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, data, ...props }: SelectFieldOptionProps<Option, IsMulti, Group>) => React.JSX.Element;
-export default SelectFieldOption;

package/dist/components/text-field/TextField.d.ts

@@ -1,21 +0,0 @@
-import { MouseEvent } from 'react';
-import { TextFieldType } from './TextField.types';
-import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> & {
-    label?: string | React.ReactNode;
-    labelColor?: string;
-    variant?: import("./TextField.types").TextFieldVariant;
-    labelType?: import("./TextField.types").TextFieldLabelType;
-    type?: TextFieldType;
-    size?: import("./TextField.types").TextFieldSize;
-    valid?: boolean;
-    message?: string | React.ReactNode;
-    messageColor?: string;
-    background?: string;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    onLeftIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onRightIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    showPasswordEyeIcon?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
-export default _default;

package/dist/components/text-field/TextField.types.d.ts

@@ -1,22 +0,0 @@
-import React, { MouseEvent } from 'react';
-export type TextFieldSize = 'sm' | 'md';
-export type TextFieldLabelType = 'outside' | 'inside' | 'overlapping' | 'hidden';
-export type TextFieldVariant = 'normal' | 'rounded' | 'flat';
-export type TextFieldType = 'text' | 'password' | 'email' | 'number' | 'date' | 'file';
-export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'type' | 'size'> & {
-    label?: string | React.ReactNode;
-    labelColor?: string;
-    variant?: TextFieldVariant;
-    labelType?: TextFieldLabelType;
-    type?: TextFieldType;
-    size?: TextFieldSize;
-    valid?: boolean;
-    message?: string | React.ReactNode;
-    messageColor?: string;
-    background?: string;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    onLeftIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onRightIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    showPasswordEyeIcon?: boolean;
-};

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ReactNode } from 'react';
-export interface TooltipRef {
-    show: () => void;
-    hide: () => void;
-}
-interface TooltipProps {
-    content?: ReactNode;
-    children: ReactNode;
-    backgroundColor?: string;
-    textColor?: string;
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    contentClassName?: string;
-    disabled?: boolean;
-    lazy?: boolean;
-}
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipRef>>;
-export default Tooltip;

package/dist/global.css

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