@brilo/base-blocks 0.1.58 → 0.1.60

package/src/blocks/urgency/urgency-item/edit.tsx

@@ -0,0 +1,319 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  BaseControl,
+  Button,
+  ColorPalette,
+  DateTimePicker,
+  Notice,
+  PanelBody,
+  RangeControl,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {useDispatch} from '@wordpress/data'
+import {dateI18n, getDate, getSettings} from '@wordpress/date'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {type CSSProperties, useEffect} from 'react'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {
+  COUNTDOWN_UNITS,
+  DEADLINE_DISPLAYS,
+  TEXTS,
+  NUMBER_SIZE_MAX,
+  NUMBER_SIZE_MIN,
+  NUMBER_SIZE_PRESETS,
+  TEXT_SIZES,
+  TYPES,
+} from './constants'
+import type {UrgencyDeadlineDisplay, UrgencyItemAttributes, UrgencyItemOptions, UrgencyTextSize, UrgencyType} from './types'
+
+const TEXT_VALUES: string[] = Object.values(TEXTS)
+
+function defaultTextFor(type: UrgencyType, display: UrgencyDeadlineDisplay): string {
+  return type === 'deadline' ? TEXTS[display] : TEXTS[type]
+}
+
+function parseCount(value: string): number | undefined {
+  return value === '' ? undefined : Math.max(0, Number.parseInt(value, 10) || 0)
+}
+
+function countdownParts(milliseconds: number): Record<(typeof COUNTDOWN_UNITS)[number]['key'], string> {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000))
+  const pad = (n: number) => String(n).padStart(2, '0')
+
+  return {
+    days: pad(Math.floor(totalSeconds / 86400)),
+    hours: pad(Math.floor((totalSeconds % 86400) / 3600)),
+    minutes: pad(Math.floor((totalSeconds % 3600) / 60)),
+    seconds: pad(totalSeconds % 60),
+  }
+}
+
+function formatDeadline(deadline: string): string {
+  const {formats} = getSettings()
+  const time = deadline.slice(11, 16)
+  const format = time === '00:00' || time === '23:59' ? formats.date : `${formats.date} ${formats.time}`
+
+  return dateI18n(format, getDate(deadline))
+}
+
+function endOfDay(date: string): number {
+  return getDate(`${date}T23:59:59`).getTime()
+}
+
+function ColorControl({label, id, value, onChange}: {label: string; id: string; value: string; onChange: (v: string) => void}) {
+  const {paletteColors} = useTenantColorPalette()
+
+  return (
+    <BaseControl label={label} id={id}>
+      <ColorPalette colors={paletteColors} value={value || undefined} onChange={(v) => onChange(v ?? '')} />
+    </BaseControl>
+  )
+}
+
+function NumberSizeControl({value, onChange}: {value?: number; onChange: (v?: number) => void}) {
+  return (
+    <BaseControl
+      label={__('Velikost čísel (px)', 'brilo-blocks')}
+      help={__('Bez nastavení se použije velikost nadpisu ze šablony.', 'brilo-blocks')}
+      id="urgency-item-number-size"
+    >
+      <div className="i-urgency__number-presets">
+        {NUMBER_SIZE_PRESETS.map((p) => (
+          <Button key={p.label} variant={value === p.value ? 'primary' : 'secondary'} size="small" onClick={() => onChange(p.value)}>
+            {p.label}
+          </Button>
+        ))}
+      </div>
+      <RangeControl value={value} onChange={onChange} min={NUMBER_SIZE_MIN} max={NUMBER_SIZE_MAX} step={1} withInputField allowReset />
+    </BaseControl>
+  )
+}
+
+export function createUrgencyItemEdit(options: UrgencyItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+    clientId,
+  }: {
+    attributes: UrgencyItemAttributes
+    setAttributes: (a: Partial<UrgencyItemAttributes>) => void
+    clientId: string
+  }) {
+    const {
+      type,
+      text,
+      deadline,
+      display,
+      remaining,
+      total,
+      endDate,
+      textSize,
+      numberSize,
+      backgroundColor,
+      numberBackgroundColor,
+      textColor,
+    } = attributes
+    // core/editor is missing outside the post editor (widgets, site editor) – dispatch returns undefined there.
+    const editorDispatch = useDispatch('core/editor') as unknown as
+      | {lockPostSaving: (lockName: string) => void; unlockPostSaving: (lockName: string) => void}
+      | undefined
+    const lockPostSaving = editorDispatch?.lockPostSaving
+    const unlockPostSaving = editorDispatch?.unlockPostSaving
+
+    const isDeadlineMissing = type === 'deadline' && !deadline
+    const isCapacityMissing = type === 'capacity' && (typeof remaining !== 'number' || typeof total !== 'number' || total <= 0)
+    const expiresAt =
+      type === 'deadline' && deadline ? getDate(deadline).getTime() : type === 'season' && endDate ? endOfDay(endDate) : null
+    const isExpired = expiresAt !== null && expiresAt <= Date.now()
+
+    useEffect(() => {
+      if (!lockPostSaving || !unlockPostSaving) {
+        return
+      }
+
+      const lockName = `brilo-urgency-item-${clientId}`
+
+      if (isDeadlineMissing || isCapacityMissing) {
+        lockPostSaving(lockName)
+      } else {
+        unlockPostSaving(lockName)
+      }
+
+      return () => unlockPostSaving(lockName)
+    }, [clientId, isDeadlineMissing, isCapacityMissing, lockPostSaving, unlockPostSaving])
+
+    const switchText = (nextType: UrgencyType, nextDisplay: UrgencyDeadlineDisplay) =>
+      !text || TEXT_VALUES.includes(text) ? {text: defaultTextFor(nextType, nextDisplay)} : {}
+
+    const countdown = countdownParts(deadline ? getDate(deadline).getTime() - Date.now() : 0)
+    const takenPercent =
+      type === 'capacity' && total ? Math.min(100, Math.max(0, ((total - Math.min(remaining ?? total, total)) / total) * 100)) : 0
+
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'i-urgency wp-block-section', `--${type}`)})
+    const isCountdown = type === 'deadline' && display === 'countdown'
+    const cardStyle = {
+      color: textColor || undefined,
+      '--urgency-background': backgroundColor || undefined,
+      '--urgency-number-background': numberBackgroundColor || undefined,
+      '--urgency-text-color': textColor || undefined,
+      '--urgency-number-size': numberSize ? `${numberSize}px` : undefined,
+    } as CSSProperties
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Co zobrazit', 'brilo-blocks')}
+              value={type}
+              onChange={(v) => setAttributes({type: v as UrgencyType, ...switchText(v as UrgencyType, display)})}
+            >
+              {TYPES.map((t) => (
+                <ToggleGroupControlOption key={t.value} value={t.value} label={t.label} />
+              ))}
+            </ToggleGroupControl>
+            <TextControl
+              label={__('Text', 'brilo-blocks')}
+              value={text}
+              placeholder={defaultTextFor(type, display)}
+              onChange={(v) => setAttributes({text: v})}
+            />
+          </PanelBody>
+
+          {type === 'deadline' && (
+            <PanelBody title={__('Termín', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Zobrazit jako', 'brilo-blocks')}
+                value={display}
+                onChange={(v) => setAttributes({display: v as UrgencyDeadlineDisplay, ...switchText(type, v as UrgencyDeadlineDisplay)})}
+              >
+                {DEADLINE_DISPLAYS.map((d) => (
+                  <ToggleGroupControlOption key={d.value} value={d.value} label={d.label} />
+                ))}
+              </ToggleGroupControl>
+              <DateTimePicker currentDate={deadline || null} onChange={(v) => setAttributes({deadline: v ?? ''})} is12Hour={false} />
+            </PanelBody>
+          )}
+
+          {type === 'capacity' && (
+            <PanelBody title={__('Volná místa', 'brilo-blocks')}>
+              <TextControl
+                type="number"
+                min={0}
+                label={__('Zbývá míst', 'brilo-blocks')}
+                value={typeof remaining === 'number' ? String(remaining) : ''}
+                onChange={(v) => setAttributes({remaining: parseCount(v)})}
+              />
+              <TextControl
+                type="number"
+                min={1}
+                label={__('Celkem míst', 'brilo-blocks')}
+                value={typeof total === 'number' ? String(total) : ''}
+                onChange={(v) => setAttributes({total: parseCount(v)})}
+              />
+            </PanelBody>
+          )}
+
+          {type === 'season' && (
+            <PanelBody title={__('Sezóna', 'brilo-blocks')}>
+              <TextControl
+                type="date"
+                label={__('Konec sezóny (volitelné)', 'brilo-blocks')}
+                help={__('Po tomto dni se blok na webu skryje.', 'brilo-blocks')}
+                value={endDate}
+                onChange={(v) => setAttributes({endDate: v})}
+              />
+            </PanelBody>
+          )}
+
+          <PanelBody title={__('Styl', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost textu', 'brilo-blocks')}
+              value={textSize}
+              onChange={(v) => setAttributes({textSize: v as UrgencyTextSize})}
+            >
+              {TEXT_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            {type !== 'season' && <NumberSizeControl value={numberSize} onChange={(v) => setAttributes({numberSize: v})} />}
+            <ColorControl
+              label={__('Barva pozadí', 'brilo-blocks')}
+              id="urgency-item-background-color"
+              value={backgroundColor}
+              onChange={(v) => setAttributes({backgroundColor: v})}
+            />
+            {isCountdown && (
+              <ColorControl
+                label={__('Pozadí čísel', 'brilo-blocks')}
+                id="urgency-item-number-background-color"
+                value={numberBackgroundColor}
+                onChange={(v) => setAttributes({numberBackgroundColor: v})}
+              />
+            )}
+            <ColorControl
+              label={__('Barva textu', 'brilo-blocks')}
+              id="urgency-item-text-color"
+              value={textColor}
+              onChange={(v) => setAttributes({textColor: v})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {isDeadlineMissing && (
+            <Notice status="error" isDismissible={false}>
+              {__('Vyberte termín v postranním panelu – bez něj nelze stránku uložit.', 'brilo-blocks')}
+            </Notice>
+          )}
+          {isCapacityMissing && (
+            <Notice status="error" isDismissible={false}>
+              {__('Vyplňte volná a celková místa v postranním panelu – bez nich nelze stránku uložit.', 'brilo-blocks')}
+            </Notice>
+          )}
+          {isExpired && (
+            <Notice status="warning" isDismissible={false}>
+              {__('Termín vypršel – na webu se nezobrazuje.', 'brilo-blocks')}
+            </Notice>
+          )}
+
+          <div className={clsx('i-urgency__card', `--text-${textSize}`)} style={cardStyle}>
+            {text && <span className="i-urgency__label">{text}</span>}
+
+            {isCountdown && (
+              <span className="i-urgency__countdown">
+                {COUNTDOWN_UNITS.map((unit) => (
+                  <span key={unit.key} className="i-urgency__unit">
+                    <span className="i-urgency__number">{countdown[unit.key]}</span>
+                    <span className="i-urgency__unit-label">{unit.label}</span>
+                  </span>
+                ))}
+              </span>
+            )}
+
+            {type === 'deadline' && display === 'date' && (
+              <span className="i-urgency__value">{deadline ? formatDeadline(deadline) : '—'}</span>
+            )}
+
+            {type === 'capacity' && (
+              <>
+                <span className="i-urgency__value">
+                  {remaining ?? '—'} / {total ?? '—'}
+                </span>
+                <span className="i-urgency__progress">
+                  <span className="i-urgency__progress-fill" style={{width: `${takenPercent}%`}} />
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/urgency/urgency-item/editor.scss

@@ -0,0 +1,99 @@
+.i-urgency {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .components-notice {
+    margin: 0;
+  }
+}
+
+.i-urgency__card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 16px;
+  border-radius: 8px;
+  background: var(--urgency-background, #f3f4f6);
+  text-align: center;
+
+  &.--text-sm {
+    .i-urgency__label {
+      font-size: 14px;
+    }
+
+    .i-urgency__unit-label {
+      font-size: 12px;
+    }
+  }
+
+  &.--text-lg {
+    .i-urgency__label {
+      font-size: 18px;
+    }
+
+    .i-urgency__unit-label {
+      font-size: 16px;
+    }
+  }
+}
+
+.i-urgency__label {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.i-urgency__countdown {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+.i-urgency__unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 64px;
+  padding: 10px 8px;
+  border-radius: 6px;
+  background: var(--urgency-number-background, #fff);
+}
+
+.i-urgency__number,
+.i-urgency__value {
+  font-size: var(--urgency-number-size, 28px);
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.i-urgency__unit-label {
+  font-size: 14px;
+  color: var(--urgency-text-color, #50575e);
+}
+
+.i-urgency__progress {
+  display: block;
+  width: 240px;
+  max-width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.i-urgency__progress-fill {
+  display: block;
+  height: 100%;
+  background: #1e2d45;
+}
+
+.i-urgency__number-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+}

package/src/blocks/urgency/urgency-item/factory.tsx

@@ -0,0 +1,36 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEADLINE_DISPLAYS, TEXTS, TEXT_SIZES, TYPES} from './constants'
+import {createUrgencyItemEdit} from './edit'
+import type {UrgencyItemAttributes, UrgencyItemOptions} from './types'
+
+export type {UrgencyItemAttributes, UrgencyItemOptions}
+
+export function createUrgencyItemBlock(options: UrgencyItemOptions): BlockConfiguration<UrgencyItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Naléhavost', 'brilo-blocks'),
+    description:
+      options.description ?? __('Skutečný termín, počet volných míst nebo sezóna. Po vypršení termínu se na webu skryje.', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'clock',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      type: {type: 'string', default: TYPES[0].value, enum: TYPES.map((t) => t.value)},
+      text: {type: 'string', default: TEXTS.countdown},
+      deadline: {type: 'string', default: ''},
+      display: {type: 'string', default: DEADLINE_DISPLAYS[0].value, enum: DEADLINE_DISPLAYS.map((d) => d.value)},
+      remaining: {type: 'number'},
+      total: {type: 'number'},
+      endDate: {type: 'string', default: ''},
+      textSize: {type: 'string', default: TEXT_SIZES[1].value, enum: TEXT_SIZES.map((s) => s.value)},
+      numberSize: {type: 'number'},
+      backgroundColor: {type: 'string', default: ''},
+      numberBackgroundColor: {type: 'string', default: ''},
+      textColor: {type: 'string', default: ''},
+    },
+    edit: createUrgencyItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<UrgencyItemAttributes>
+}

package/src/blocks/urgency/urgency-item/index.ts

@@ -0,0 +1,9 @@
+export type {UrgencyItemAttributes, UrgencyItemOptions} from './types'
+export {createUrgencyItemBlock} from './factory'
+
+import type {UrgencyItemOptions} from './types'
+
+export const urgencyItemDefaults: UrgencyItemOptions = {
+  name: 'brilo/urgency-item',
+  parent: ['brilo/base-section', 'brilo/text-and-media-group', 'brilo/text-and-form-text-column', 'brilo/column-item'],
+}

package/src/blocks/urgency/urgency-item/types.ts

@@ -0,0 +1,23 @@
+import type {BriloBlockType} from '~/types'
+import type {DEADLINE_DISPLAYS, TEXT_SIZES, TYPES} from './constants'
+
+export type UrgencyType = (typeof TYPES)[number]['value']
+export type UrgencyDeadlineDisplay = (typeof DEADLINE_DISPLAYS)[number]['value']
+export type UrgencyTextSize = (typeof TEXT_SIZES)[number]['value']
+
+export interface UrgencyItemAttributes extends Record<string, unknown> {
+  type: UrgencyType
+  text: string
+  deadline: string
+  display: UrgencyDeadlineDisplay
+  remaining?: number
+  total?: number
+  endDate: string
+  textSize: UrgencyTextSize
+  numberSize?: number
+  backgroundColor: string
+  numberBackgroundColor: string
+  textColor: string
+}
+
+export interface UrgencyItemOptions extends BriloBlockType {}

package/src/components/GalleryImagesAppender/editor.scss

@@ -0,0 +1,15 @@
+.g-gallery__appender {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed lightblue;
+  height: 100%;
+  cursor: pointer;
+  box-sizing: border-box;
+  min-height: 256px;
+  width: 100%;
+  background: none;
+  font: inherit;
+  color: inherit;
+}

package/src/components/GalleryImagesAppender/index.tsx

@@ -0,0 +1,29 @@
+import {MediaUpload} from '@wordpress/block-editor'
+import {createBlock} from '@wordpress/blocks'
+import {useDispatch} from '@wordpress/data'
+import {__} from '@wordpress/i18n'
+
+export function GalleryImagesAppender({clientId, itemBlock}: {clientId: string; itemBlock: string}) {
+  const {insertBlocks} = useDispatch('core/block-editor')
+
+  const onSelectImages = (media: {id: number}[]) => {
+    insertBlocks(
+      media.map((item) => createBlock(itemBlock, {img: {id: item.id}})),
+      undefined,
+      clientId,
+    )
+  }
+
+  return (
+    <MediaUpload
+      onSelect={onSelectImages}
+      multiple="add"
+      allowedTypes={['image']}
+      render={({open}) => (
+        <button type="button" onClick={open} className="g-gallery__appender">
+          {__('Přidat obrázky', 'brilo-blocks')}
+        </button>
+      )}
+    />
+  )
+}

package/src/constants.ts

@@ -18,3 +18,12 @@ export const CONTENT_SIZES = [
   {value: 'default', label: __('Výchozí', 'brilo-blocks')},
   {value: 'lg', label: __('Velká', 'brilo-blocks')},
 ] as const
+
+export const GALLERY_RATIOS = [
+  {value: '4:3', label: '4:3'},
+  {value: '16:9', label: '16:9'},
+  {value: '3:2', label: '3:2'},
+  {value: '1:1', label: '1:1'},
+  {value: '2:1', label: '2:1'},
+  {value: '3:4', label: '3:4'},
+] as const

package/src/editor.scss

@@ -47,6 +47,7 @@
 @forward "./blocks/layout/layout-content/editor";
 @forward "./blocks/layout/layout-content-w-aside/editor";
 @forward "./components/IconControl/editor";
+@forward "./components/GalleryImagesAppender/editor";
 @forward "./components/ImagePicker/editor";
 @forward "./components/ItemIconControl/editor";
 @forward "./blocks/priceplan/priceplan-group/editor";
@@ -55,3 +56,6 @@
 @forward "./blocks/video/video-group/editor";
 @forward "./blocks/review/review-group/editor";
 @forward "./blocks/review/review-item/editor";
+@forward "./blocks/review/review-summary-item/editor";
+@forward "./blocks/gallery/gallery-strip-group/editor";
+@forward "./blocks/urgency/urgency-item/editor";

package/src/index.ts

@@ -270,3 +270,9 @@ export type {ReviewGroupAttributes, ReviewGroupOptions} from './blocks/review/re
 export {createReviewGroupBlock, reviewGroupDefaults} from './blocks/review/review-group'
 export type {ReviewAuthor, ReviewItemAttributes, ReviewItemOptions, ReviewRating} from './blocks/review/review-item'
 export {createReviewItemBlock, reviewItemDefaults} from './blocks/review/review-item'
+export type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions} from './blocks/review/review-summary-item'
+export {createReviewSummaryItemBlock, reviewSummaryItemDefaults} from './blocks/review/review-summary-item'
+export type {GalleryStripGroupAttributes, GalleryStripGroupOptions} from './blocks/gallery/gallery-strip-group'
+export {createGalleryStripGroupBlock, galleryStripGroupDefaults} from './blocks/gallery/gallery-strip-group'
+export type {UrgencyItemAttributes, UrgencyItemOptions} from './blocks/urgency/urgency-item'
+export {createUrgencyItemBlock, urgencyItemDefaults} from './blocks/urgency/urgency-item'