@q2devel/q2-storybook 1.0.195 → 1.0.196

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -40,6 +40,7 @@ export type BasketDialogProps = {
40
40
  total: string;
41
41
  shippingAndTax: string;
42
42
  };
43
+ showLinkToProduct?: boolean;
43
44
  classNames?: {
44
45
  container?: string;
45
46
  title?: string;
@@ -64,4 +65,4 @@ export type BasketDialogProps = {
64
65
  quantity?: string;
65
66
  };
66
67
  };
67
- export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, showQuantityControls, pendingUpdates, processingItems, isAddingToCart, totalItems, locale, productPriceOptions, totalPriceOptions, translations, classNames, }: BasketDialogProps) => import("react/jsx-runtime").JSX.Element;
68
+ export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, showQuantityControls, pendingUpdates, processingItems, isAddingToCart, totalItems, locale, productPriceOptions, totalPriceOptions, translations, showLinkToProduct, classNames, }: BasketDialogProps) => import("react/jsx-runtime").JSX.Element;
@@ -8,7 +8,7 @@ import Heading from '../../../components/Base/heading/Heading';
8
8
  import { Price } from '../../../components/Base/price/Price';
9
9
  import Spinner from '../../../components/Base/spinner/Spinner';
10
10
  import { buildClassesByJoining } from '../../../utils/StyleHelper';
11
- export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title = 'Váš košík', checkoutText = 'Pokračovat k objednávce', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Pokračovat v nákupu', showShippingNote = true, showQuantityControls = true, pendingUpdates = {}, processingItems = {}, isAddingToCart = false, totalItems, locale, productPriceOptions, totalPriceOptions, translations, classNames, }) => {
11
+ export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, productLink, title = 'Váš košík', checkoutText = 'Pokračovat k objednávce', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Pokračovat v nákupu', showShippingNote = true, showQuantityControls = true, pendingUpdates = {}, processingItems = {}, isAddingToCart = false, totalItems, locale, productPriceOptions, totalPriceOptions, translations, showLinkToProduct = true, classNames, }) => {
12
12
  const [shouldShowAddingIndicator, setShouldShowAddingIndicator] = useState(false);
13
13
  const initialTotalItems = useRef(null);
14
14
  useEffect(() => {
@@ -70,7 +70,7 @@ export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityCh
70
70
  product.variation_name, src: product
71
71
  .all_images[0]
72
72
  ?.href ||
73
- '/lk_logo.png', className: buildClassesByJoining('size-full object-contain', classNames?.image) }), isTemporaryRow && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 flex items-center justify-center bg-white bg-opacity-75', classNames?.temporaryRow), children: _jsx(Spinner, { className: buildClassesByJoining('h-8 w-8 text-[var(--primary)]', classNames?.spinner) }) }))] }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col", children: [_jsx("div", { children: _jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('font-extralight text-lg', classNames?.heading), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_id), children: product.product_name }), isProcessing &&
73
+ '/lk_logo.png', className: buildClassesByJoining('size-full object-contain', classNames?.image) }), isTemporaryRow && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 flex items-center justify-center bg-white bg-opacity-75', classNames?.temporaryRow), children: _jsx(Spinner, { className: buildClassesByJoining('h-8 w-8 text-[var(--primary)]', classNames?.spinner) }) }))] }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col", children: [_jsx("div", { children: _jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('font-extralight text-lg', classNames?.heading), children: _jsxs("div", { className: "flex items-center gap-2", children: [showLinkToProduct ? (_jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_id), children: product.product_name })) : (_jsx("span", { children: product.product_name })), isProcessing &&
74
74
  !isTemporaryRow && (_jsx(Spinner, { className: buildClassesByJoining('h-4 w-4 text-gray-400', classNames?.spinner) }))] }) }), _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions, className: buildClassesByJoining('ml-4 font-light', classNames?.price) })] }) }), _jsxs("div", { className: "flex flex-1 items-end justify-between text-sm", children: [isTemporaryRow ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: buildClassesByJoining('h-4 w-4 text-[var(--primary)]', classNames?.spinner) }), _jsx("p", { className: "text-gray-500 italic", children: translations.addingToBasket })] })) : showQuantityControls &&
75
75
  onQuantityChange ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: buildClassesByJoining('text-gray-500 mr-2', classNames?.amount), children: translations.amount }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", onClick: () => !isProcessing &&
76
76
  handleDecrement(product.variation_uuid, displayQuantity), disabled: isProcessing, className: buildClassesByJoining(`rounded-full p-1 text-gray-600 ${isProcessing
@@ -31,6 +31,7 @@ export type BasketOverviewProps = {
31
31
  translations?: {
32
32
  emptyBasketPlaceholder?: string;
33
33
  };
34
+ showLinkToProduct?: boolean;
34
35
  classNames?: {
35
36
  container?: string;
36
37
  title?: string;
@@ -64,4 +65,4 @@ export type BasketOverviewProps = {
64
65
  imageContainer?: string;
65
66
  };
66
67
  };
67
- export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, clearBasketText, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, classNames, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;
68
+ export declare const BasketOverview: ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title, checkoutText, checkoutTextClass, continueShoppingText, showShippingNote, clearBasketText, totalText, shippingNote, pendingUpdates, processingItems, locale, productPriceOptions, TotalPriceOptions, translations, showLinkToProduct, classNames, }: BasketOverviewProps) => import("react/jsx-runtime").JSX.Element;
@@ -6,7 +6,7 @@ import Button from '../../../components/Base/button/Button';
6
6
  import Heading from '../../../components/Base/heading/Heading';
7
7
  import { Price } from '../../../components/Base/price/Price';
8
8
  import { buildClassesByJoining } from '../../../utils/StyleHelper';
9
- export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title = 'Shopping Cart', checkoutText = 'Checkout', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Continue Shopping', showShippingNote = true, clearBasketText = 'Clear basket', totalText, shippingNote, pendingUpdates = {}, processingItems = {}, locale, productPriceOptions, TotalPriceOptions, translations, classNames, }) => {
9
+ export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveProduct, onClearBasket, onCheckout, onContinueShopping, productLink, title = 'Shopping Cart', checkoutText = 'Checkout', checkoutTextClass = 'button-brand w-full', continueShoppingText = 'Continue Shopping', showShippingNote = true, clearBasketText = 'Clear basket', totalText, shippingNote, pendingUpdates = {}, processingItems = {}, locale, productPriceOptions, TotalPriceOptions, translations, showLinkToProduct = true, classNames, }) => {
10
10
  const handleIncrement = (product, quantity) => {
11
11
  if (onQuantityChange) {
12
12
  onQuantityChange(product.variation_uuid, quantity + 1);
@@ -28,7 +28,7 @@ export const BasketOverview = ({ products, subtotal, onQuantityChange, onRemoveP
28
28
  const displayQuantity = productKey in pendingUpdates
29
29
  ? pendingUpdates[productKey]
30
30
  : product.quantity;
31
- return (_jsxs("li", { className: buildClassesByJoining('flex py-6', classNames?.listItem), children: [_jsx("div", { className: buildClassesByJoining('shrink-0', classNames?.imageContainer), children: _jsx("img", { width: 128, height: 128, alt: product.all_images[0]?.alt, src: product.all_images[0]?.href, className: buildClassesByJoining('size-24 rounded-md object-contain sm:size-32', classNames?.image) }) }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col sm:ml-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(Heading, { level: 4, className: buildClassesByJoining('font-medium text-gray-700 hover:text-gray-800', classNames?.heading), children: _jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_id), className: buildClassesByJoining('font-medium text-gray-700 hover:text-gray-800', classNames?.heading), children: product.product_name }) }), _jsx("span", { className: buildClassesByJoining('ml-4 text-sm font-medium text-gray-900', classNames?.price), children: _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions }) })] }), product.size && (_jsx("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500', classNames?.size), children: product.size }))] }), _jsxs("div", { className: "mt-4 flex flex-1 items-end justify-between", children: [_jsx("div", { className: buildClassesByJoining('flex items-center space-x-2 text-sm text-gray-700', classNames?.quantityControls), children: product.inStock !==
31
+ return (_jsxs("li", { className: buildClassesByJoining('flex py-6', classNames?.listItem), children: [_jsx("div", { className: buildClassesByJoining('shrink-0', classNames?.imageContainer), children: _jsx("img", { width: 128, height: 128, alt: product.all_images[0]?.alt, src: product.all_images[0]?.href, className: buildClassesByJoining('size-24 rounded-md object-contain sm:size-32', classNames?.image) }) }), _jsxs("div", { className: "ml-4 flex flex-1 flex-col sm:ml-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(Heading, { level: 4, className: buildClassesByJoining('font-medium text-gray-700 hover:text-gray-800', classNames?.heading), children: showLinkToProduct ? (_jsx(Button, { asLink: true, unstyled: true, href: productLink?.(product.product_name, product.variation_id), className: buildClassesByJoining('font-medium text-gray-700 hover:text-gray-800', classNames?.heading), children: product.product_name })) : (_jsx("span", { className: buildClassesByJoining('font-medium text-gray-700 hover:text-gray-800', classNames?.heading), children: product.product_name })) }), _jsx("span", { className: buildClassesByJoining('ml-4 text-sm font-medium text-gray-900', classNames?.price), children: _jsx(Price, { value: product.price, locale: locale, options: productPriceOptions }) })] }), product.size && (_jsx("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500', classNames?.size), children: product.size }))] }), _jsxs("div", { className: "mt-4 flex flex-1 items-end justify-between", children: [_jsx("div", { className: buildClassesByJoining('flex items-center space-x-2 text-sm text-gray-700', classNames?.quantityControls), children: product.inStock !==
32
32
  undefined && (_jsxs(_Fragment, { children: [product.inStock ? (_jsx(CheckIcon, { "aria-hidden": "true", className: buildClassesByJoining('size-5 shrink-0 text-[var(--primary)]', classNames?.checkIcon) })) : (_jsx(ClockIcon, { "aria-hidden": "true", className: buildClassesByJoining('size-5 shrink-0 text-gray-300', classNames?.clockIcon) })), _jsx("span", { className: buildClassesByJoining('text-sm text-gray-700', classNames?.quantityText), children: product.inStock
33
33
  ? 'In stock'
34
34
  : `Will ship in ${product.leadTime}` })] })) }), _jsxs("div", { className: buildClassesByJoining('flex items-center', classNames?.quantityControls), children: [_jsx("button", { type: "button", onClick: () => handleDecrement(product, displayQuantity), disabled: isProcessing, className: buildClassesByJoining(`rounded-full p-1 text-gray-600 ${isProcessing
@@ -195,11 +195,11 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
195
195
  variation.id && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 pointer-events-none', classNames
196
196
  ?.variations
197
197
  ?.variationActiveButton), style: {
198
- background: `
199
- radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
200
- radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
201
- radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
202
- radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
198
+ background: `
199
+ radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
200
+ radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
201
+ radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
202
+ radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
203
203
  `,
204
204
  opacity: 0.2,
205
205
  } })), _jsxs("div", { className: buildClassesByJoining('flex flex-col justify-between gap-1 relative z-10 flex-1 min-w-0 pr-2', classNames?.variations
@@ -142,10 +142,10 @@ export const DynamicLayout = ({ x, y, gap = 4, }) => {
142
142
  if (isDragging && !isExistingBlock) {
143
143
  setEnd(i);
144
144
  }
145
- }, onContextMenu: (e) => handleRightClick(e, i), className: `
146
- border border-dashed rounded cursor-pointer relative
147
- transition-colors duration-300
148
- ${color ?? 'bg-gray-800 border-gray-600'}
145
+ }, onContextMenu: (e) => handleRightClick(e, i), className: `
146
+ border border-dashed rounded cursor-pointer relative
147
+ transition-colors duration-300
148
+ ${color ?? 'bg-gray-800 border-gray-600'}
149
149
  `, children: block && i === block.start && (_jsx("div", { className: "absolute top-0 left-0 px-1 py-0.5", children: editingBlockId === block.id ? (_jsx("input", { autoFocus: true, className: "text-xs font-semibold bg-white text-gray-800 px-1 py-0.5 rounded outline-none w-24", value: block.title, onChange: (e) => handleRename(block.id, e.target.value), onBlur: () => setEditingBlockId(null), onKeyDown: (e) => {
150
150
  if (e.key === 'Enter')
151
151
  setEditingBlockId(null);
package/package.json CHANGED
@@ -1,80 +1,80 @@
1
- {
2
- "name": "@q2devel/q2-storybook",
3
- "version": "1.0.195",
4
- "main": "dist/index.js",
5
- "module": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "exports": {
8
- ".": {
9
- "types": "./dist/index.d.ts",
10
- "default": "./dist/index.js"
11
- },
12
- "./styles": "./dist/style.css"
13
- },
14
- "files": [
15
- "dist"
16
- ],
17
- "scripts": {
18
- "test": "echo \"Error: no test specified\" && exit 1",
19
- "storybook": "storybook dev -p 6006",
20
- "build-storybook": "storybook build",
21
- "build": "tsc && npm run build:css",
22
- "build:css": "postcss src/global.css -o dist/style.css",
23
- "prepublishOnly": "npm version patch && npm run build",
24
- "publish:patch": "npm publish && npm run build",
25
- "publish:minor": "npm version minor && npm run build && npm publish",
26
- "publish:major": "npm version major && npm run build && npm publish",
27
- "chromatic": "chromatic --project-token=chpt_371d8e65041a19e "
28
- },
29
- "devDependencies": {
30
- "@storybook/addon-actions": "^8.6.14",
31
- "@storybook/addon-essentials": "^8.6.14",
32
- "@storybook/addon-interactions": "^8.6.14",
33
- "@storybook/addon-links": "^8.6.14",
34
- "@storybook/addon-onboarding": "^8.6.14",
35
- "@storybook/addon-viewport": "^8.6.14",
36
- "@storybook/blocks": "^8.6.14",
37
- "@storybook/nextjs": "^8.6.14",
38
- "@storybook/react": "^8.6.14",
39
- "@storybook/test": "^8.6.14",
40
- "@tailwindcss/postcss": "^4.1.8",
41
- "@types/body-parser": "^1.19.6",
42
- "@types/classnames": "^2.3.0",
43
- "@types/express": "^5.0.3",
44
- "@types/node": "^22.14.1",
45
- "@types/react": "^19.1.2",
46
- "@types/react-dom": "^19.1.2",
47
- "autoprefixer": "^10.4.21",
48
- "chromatic": "^12.0.0",
49
- "cssnano": "^7.0.7",
50
- "postcss": "^8.5.4",
51
- "postcss-cli": "^11.0.1",
52
- "react": "19.2.1",
53
- "react-dom": "19.2.1",
54
- "rollup-plugin-postcss": "^4.0.2",
55
- "storybook": "^8.6.14",
56
- "tailwindcss": "^4.1.8",
57
- "typescript": "^5.8.3"
58
- },
59
- "peerDependencies": {
60
- "react": ">=19.2.1",
61
- "react-dom": ">=19.2.1"
62
- },
63
- "dependencies": {
64
- "@headlessui/react": "^2.2.2",
65
- "@heroicons/react": "^2.2.0",
66
- "@q2devel/q2-core": "^1.0.74",
67
- "@tanstack/react-query": "^5.76.1",
68
- "axios": "^1.9.0",
69
- "body-parser": "^2.2.0",
70
- "classnames": "^2.5.1",
71
- "express": "^5.1.0",
72
- "html-react-parser": "^5.2.3",
73
- "react-select": "^5.10.1",
74
- "tailwind-merge": "^3.2.0",
75
- "zod": "^4.0.14"
76
- },
77
- "overrides": {
78
- "storybook": "$storybook"
79
- }
80
- }
1
+ {
2
+ "name": "@q2devel/q2-storybook",
3
+ "version": "1.0.196",
4
+ "main": "dist/index.js",
5
+ "module": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "default": "./dist/index.js"
11
+ },
12
+ "./styles": "./dist/style.css"
13
+ },
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "test": "echo \"Error: no test specified\" && exit 1",
19
+ "storybook": "storybook dev -p 6006",
20
+ "build-storybook": "storybook build",
21
+ "build": "tsc && npm run build:css",
22
+ "build:css": "postcss src/global.css -o dist/style.css",
23
+ "prepublishOnly": "npm version patch && npm run build",
24
+ "publish:patch": "npm publish && npm run build",
25
+ "publish:minor": "npm version minor && npm run build && npm publish",
26
+ "publish:major": "npm version major && npm run build && npm publish",
27
+ "chromatic": "chromatic --project-token=chpt_371d8e65041a19e "
28
+ },
29
+ "devDependencies": {
30
+ "@storybook/addon-actions": "^8.6.14",
31
+ "@storybook/addon-essentials": "^8.6.14",
32
+ "@storybook/addon-interactions": "^8.6.14",
33
+ "@storybook/addon-links": "^8.6.14",
34
+ "@storybook/addon-onboarding": "^8.6.14",
35
+ "@storybook/addon-viewport": "^8.6.14",
36
+ "@storybook/blocks": "^8.6.14",
37
+ "@storybook/nextjs": "^8.6.14",
38
+ "@storybook/react": "^8.6.14",
39
+ "@storybook/test": "^8.6.14",
40
+ "@tailwindcss/postcss": "^4.1.8",
41
+ "@types/body-parser": "^1.19.6",
42
+ "@types/classnames": "^2.3.0",
43
+ "@types/express": "^5.0.3",
44
+ "@types/node": "^22.14.1",
45
+ "@types/react": "^19.2.4",
46
+ "@types/react-dom": "^19.1.6",
47
+ "autoprefixer": "^10.4.21",
48
+ "chromatic": "^12.0.0",
49
+ "cssnano": "^7.0.7",
50
+ "postcss": "^8.5.4",
51
+ "postcss-cli": "^11.0.1",
52
+ "react": "19.2.4",
53
+ "react-dom": "19.2.4",
54
+ "rollup-plugin-postcss": "^4.0.2",
55
+ "storybook": "^8.6.14",
56
+ "tailwindcss": "^4.1.8",
57
+ "typescript": "^5.8.3"
58
+ },
59
+ "peerDependencies": {
60
+ "react": "^19.2.4",
61
+ "react-dom": "^19.2.4"
62
+ },
63
+ "dependencies": {
64
+ "@headlessui/react": "^2.2.2",
65
+ "@heroicons/react": "^2.2.0",
66
+ "@q2devel/q2-core": "^1.0.84",
67
+ "@tanstack/react-query": "^5.76.1",
68
+ "axios": "^1.9.0",
69
+ "body-parser": "^2.2.0",
70
+ "classnames": "^2.5.1",
71
+ "express": "^5.1.0",
72
+ "html-react-parser": "^5.2.3",
73
+ "react-select": "^5.10.1",
74
+ "tailwind-merge": "^3.2.0",
75
+ "zod": "^4.0.14"
76
+ },
77
+ "overrides": {
78
+ "storybook": "$storybook"
79
+ }
80
+ }
@@ -1,28 +0,0 @@
1
- export type ScheduleDetailProps = {
2
- /** Main title */
3
- title: string;
4
- /** Short description under the title */
5
- description?: string;
6
- /** Formatted weekday+date, e.g. "pá 16/5" */
7
- weekdayDate?: string;
8
- /** Time string */
9
- time?: string;
10
- /** Location string */
11
- location?: string;
12
- /** Optional header image URL */
13
- imageUrl?: string;
14
- /** Alt text for the image */
15
- imageAlt?: string;
16
- /** Additional CSS classes */
17
- className?: string;
18
- /** Optional tags like "české titulky", "2D" */
19
- tags?: string[];
20
- /** Primary action button text (e.g., VSTUPENKY) */
21
- buttonText?: string;
22
- /** Primary action handler */
23
- onButtonClick?: () => void;
24
- /** Primary action button classes */
25
- buttonClassName?: string;
26
- };
27
- export declare const ScheduleDetail: ({ title, description, weekdayDate, time, location, imageUrl, imageAlt, className, tags, buttonText, onButtonClick, buttonClassName, }: ScheduleDetailProps) => import("react/jsx-runtime").JSX.Element;
28
- export default ScheduleDetail;
@@ -1,18 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import Button from '../../Base/button/Button';
4
- import { buildClassesByJoining } from '../../../utils/StyleHelper';
5
- export const ScheduleDetail = ({ title, description, weekdayDate, time, location, imageUrl, imageAlt = 'Schedule image', className, tags, buttonText, onButtonClick, buttonClassName, }) => {
6
- return (_jsxs("section", { className: buildClassesByJoining('w-full flex flex-col md:flex-row md:flex-wrap xl:flex-nowrap md:items-center md:justify-between',
7
- // spacing tuned to Figma feel
8
- 'px-5.5 py-2.5 xl:px-6.25 md:py-10 gap-2.5 md:gap-8 xl:gap-16.25', className), children: [_jsxs("div", { className: "order-1 md:order-1 flex flex-col gap-6 md:min-w-[140px] xl:min-w-[240px]", children: [weekdayDate && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: weekdayDate })), time && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: time })), location && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: location }))] }), imageUrl && (_jsx("div", { className: "order-2 md:order-2 w-full md:w-auto md:min-w-65 md:flex-1 flex justify-center", children: _jsx("img", { src: imageUrl, alt: imageAlt, className: "h-44 w-full max-w-[560px] object-cover md:h-48 md:w-[560px] rounded" }) })), _jsxs("div", { className: "order-3 md:order-3 w-full md:w-auto flex flex-col md:flex-row md:items-center md:justify-between gap-6 md:gap-8 md:min-w-[460px]", children: [_jsxs("div", { className: "flex-1 md:max-w-[520px]", children: [_jsx("h2", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-tight", children: title }), tags && tags.length > 0 && (_jsx("div", { className: "mt-6 flex flex-wrap gap-8 text-primary-grey", children: tags.map((t) => (_jsx("span", { className: "pb-1 border-b-2 border-primary-grey/40 leading-none text-sm md:text-base", children: t }, t))) })), description && (_jsx("p", { className: "mt-6 text-primary-grey text-sm md:text-base leading-7 md:leading-8 max-w-[50ch]", children: description }))] }), buttonText && (_jsx("div", { className: "order-last md:order-none shrink-0 md:ml-8", children: _jsx(Button, { onClick: () => onButtonClick?.(), rounded: "none", className: buttonClassName, children: buttonText }) }))] })] }));
9
- };
10
- export default ScheduleDetail;
11
- // Local SVG icons for metadata display
12
- const CalendarIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
13
- const ClockIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
14
- const LocationIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
15
- // Local button to mirror "VSTUPENKY" style
16
- const ActionButton = ({ label, onClick }) => (_jsx("button", { type: "button", onClick: onClick, className: buildClassesByJoining(
17
- // mobile: full-width, desktop: auto width; flat corners to match visual
18
- 'w-full md:w-auto px-8 py-3 md:px-10 md:py-3.5', 'bg-[#E9A8A8] text-white font-semibold tracking-wide hover:opacity-90 transition', 'rounded-none md:rounded'), children: label }));
@@ -1,30 +0,0 @@
1
- export interface EventCardProps {
2
- /** Event image URL */
3
- imageUrl?: string;
4
- /** Event image alt text */
5
- imageAlt?: string;
6
- /** Event category/type (e.g., "Výstava", "Kino", "Divadlo") */
7
- category: string;
8
- /** Event title */
9
- title: string;
10
- /** Event description */
11
- description: string;
12
- /** Event date */
13
- date: string;
14
- /** Event time */
15
- time: string;
16
- /** Event location */
17
- location: string;
18
- /** Additional CSS classes */
19
- className?: string;
20
- /** Click handler for the card */
21
- onClick?: () => void;
22
- /** Button text */
23
- buttonText?: string;
24
- /** Button click handler */
25
- onButtonClick?: () => void;
26
- /** Button classes */
27
- buttonClassName?: string;
28
- }
29
- export declare const EventCard: ({ imageUrl, imageAlt, category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }: EventCardProps) => import("react/jsx-runtime").JSX.Element;
30
- export default EventCard;
@@ -1,18 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import Image from 'next/image';
4
- import buildClassesByJoining from '../../../utils/StyleHelper';
5
- import Button from '../../Base/button/Button';
6
- // Icons as SVG components for better performance and customization
7
- const CalendarIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
8
- const ClockIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
9
- const LocationIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
10
- const CategoryBadge = ({ category }) => (_jsxs("div", { className: "flex bg-white h-10.5 min-h-10.5 overflow-hidden w-77.5", children: [_jsx("div", { className: "w-63.5 bg-primary-grey px-5.75 py-1.75", children: _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic text-4.5 text-white", children: _jsx("p", { className: "leading-7", children: category }) }) }), _jsx("div", { className: "overflow-hidden w-14 bg-primary-grey", children: _jsx("div", { className: "bottom-0 left-0 right-[0.02%] top-0" }) })] }));
11
- export const EventCard = ({ imageUrl = "http://localhost:3845/assets/f60ef9ffaad11fe658d28ae57cd6e9548d7462de.png", imageAlt = "Event image", category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }) => {
12
- const containerClasses = buildClassesByJoining([
13
- "content-stretch flex flex-col items-start relative size-full cursor-pointer transition-all duration-300 hover:transform hover:scale-[1.03] hover:shadow-lg w-77.5",
14
- className
15
- ]);
16
- return (_jsx("div", { className: containerClasses, onClick: onClick, "data-name": "Event Card", children: _jsxs("div", { className: "flex flex-col relative shrink-0 w-77.5", children: [_jsx(Image, { src: imageUrl, alt: imageAlt, className: "object-cover max-h-43 md:max-h-60.5", width: 310, height: 234 }), _jsx(CategoryBadge, { category: category }), _jsxs("div", { className: "bg-white box-border content-stretch flex flex-col gap-4.5 items-start px-5.5 py-4.5 w-77.5", children: [_jsx("div", { className: "flex flex-col font-semibold justify-center min-w-full max-w-full not-italic text-primary-black text-6", children: _jsx("p", { className: "truncate", children: title }) }), _jsx("div", { className: "flex flex-col font-normal justify-center leading-0 min-w-full max-w-full not-italic relative shrink-0 text-primary-grey text-4", children: _jsx("p", { className: "leading-7 truncate", children: description }) }), _jsxs("div", { className: "content-stretch flex flex-col gap-2.5 items-start relative shrink-0", children: [_jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey box-border content-stretch flex gap-2.5 items-center p-1.25 relative rounded-[39px] shrink-0", children: _jsx("div", { className: "relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(CalendarIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: date }) })] }), _jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey content-stretch flex gap-2.5 items-center justify-center relative rounded-[39px] shrink-0 size-8.75", children: _jsx("div", { className: "overflow-hidden relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(ClockIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: time }) })] }), _jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey content-stretch flex gap-2.5 items-center justify-center relative rounded-[39px] shrink-0 size-8.75", children: _jsx("div", { className: "overflow-hidden relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(LocationIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: location }) })] })] })] }), buttonText && (_jsx(Button, { onClick: () => onButtonClick?.(), rounded: "none", className: buttonClassName, children: buttonText }))] }) }));
17
- };
18
- export default EventCard;
@@ -1,30 +0,0 @@
1
- export interface EventCardHorizontalProps {
2
- /** Event image URL */
3
- imageUrl?: string;
4
- /** Event image alt text */
5
- imageAlt?: string;
6
- /** Event category/type (e.g., "Výstava", "Kino", "Divadlo") */
7
- category: string;
8
- /** Event title */
9
- title: string;
10
- /** Event description */
11
- description: string;
12
- /** Event date */
13
- date: string;
14
- /** Event time */
15
- time: string;
16
- /** Event location */
17
- location: string;
18
- /** Additional CSS classes */
19
- className?: string;
20
- /** Click handler for the card */
21
- onClick?: () => void;
22
- /** Button text */
23
- buttonText?: string;
24
- /** Button click handler */
25
- onButtonClick?: () => void;
26
- /** Button classes */
27
- buttonClassName?: string;
28
- }
29
- export declare const EventCardHorizontal: ({ imageUrl, imageAlt, category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }: EventCardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
30
- export default EventCardHorizontal;
@@ -1,24 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import Image from 'next/image';
4
- import buildClassesByJoining from '../../../utils/StyleHelper';
5
- import Button from '../../Base/button/Button';
6
- // Icons as SVG components for better performance and customization
7
- const CalendarIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
8
- const ClockIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
9
- const LocationIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
10
- const CategoryBadge = ({ category }) => (_jsx("div", { className: "inline-flex items-center bg-primary-grey px-3 py-1 rounded-full", children: _jsx("span", { className: "text-white text-sm font-semibold", children: category }) }));
11
- export const EventCardHorizontal = ({ imageUrl = "http://localhost:3845/assets/f60ef9ffaad11fe658d28ae57cd6e9548d7462de.png", imageAlt = "Event image", category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }) => {
12
- const containerClasses = buildClassesByJoining([
13
- "flex flex-col md:flex-row bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer overflow-hidden",
14
- className
15
- ]);
16
- return (_jsxs("div", { className: containerClasses, onClick: onClick, "data-name": "Event Card Horizontal", children: [_jsx("div", { className: "relative w-full md:w-48 h-48 md:h-auto flex-shrink-0", children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 768px) 100vw, 192px" }) }), _jsxs("div", { className: "flex-1 p-4 flex flex-col justify-between", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(CategoryBadge, { category: category }), _jsx("h3", { className: "text-lg font-semibold text-primary-black leading-tight", children: title }), _jsx("p", { className: "text-sm text-primary-grey leading-relaxed line-clamp-2", children: description }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(CalendarIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: date })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(ClockIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: time })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(LocationIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: location })] })] })] }), buttonText && (_jsx("div", { className: "mt-4", children: _jsx(Button, { onClick: (e) => {
17
- e.stopPropagation();
18
- onButtonClick?.();
19
- }, rounded: "none", className: buildClassesByJoining([
20
- "w-full md:w-auto bg-primary-pink text-white px-6 py-2 text-sm font-semibold hover:bg-primary-pink/90 transition-colors",
21
- buttonClassName
22
- ]), children: buttonText }) }))] })] }));
23
- };
24
- export default EventCardHorizontal;