@brilo/base-blocks 0.1.56 → 0.1.58

package/src/blocks/food-menu/food-menu-group/edit.tsx

@@ -0,0 +1,153 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalText as Text,
+  TextareaControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__, sprintf} from '@wordpress/i18n'
+import clsx from 'clsx'
+// biome-ignore lint/correctness/noUnusedImports: required in scope for classic JSX transform
+import React from 'react'
+import {plural} from '~/utils/plural'
+import {FoodMenuPreview} from './FoodMenuPreview'
+import type {FoodMenuGroupAttributes, FoodMenuGroupOptions} from './types'
+
+const MODE_HINTS: Record<FoodMenuGroupAttributes['mode'], string> = {
+  manual: __('Zobrazí se ručně vybrané lístky.', 'brilo-blocks'),
+  today: __('Zobrazí se denní lístek s dnešním datem.', 'brilo-blocks'),
+  week: __('Zobrazí se denní lístky aktuálního pracovního týdne (pondělí až pátek).', 'brilo-blocks'),
+}
+
+const EMPTY_HINTS: Record<FoodMenuGroupAttributes['emptyBehaviour'], string> = {
+  message: __('Návštěvník uvidí krátkou větu, že lístek zatím není vypsaný.', 'brilo-blocks'),
+  permanent: __('Místo chybějícího denního lístku se nabídne stálá nabídka. Když žádná není, ukáže se věta.', 'brilo-blocks'),
+  hide: __('Blok ze stránky zmizí. Stránka pak může zůstat prázdná.', 'brilo-blocks'),
+}
+
+function pickedNote(count: number): string {
+  if (0 === count) {
+    return __('Zatím nevybrán žádný lístek.', 'brilo-blocks')
+  }
+
+  const picked = plural(
+    count,
+    __('Vybrán %d lístek', 'brilo-blocks'),
+    __('Vybrány %d lístky', 'brilo-blocks'),
+    __('Vybráno %d lístků', 'brilo-blocks'),
+  )
+
+  return `${sprintf(picked, count)} · ${__('pořadí změníte ve výběru lístků', 'brilo-blocks')}`
+}
+
+export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: FoodMenuGroupAttributes
+    setAttributes: (a: Partial<FoodMenuGroupAttributes>) => void
+  }) {
+    const {mode, layout, menuIds, showPrices, showAllergens, showReservation, emptyBehaviour, emptyText} = attributes
+
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'g-food-menu', `--${layout}`)})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení lístku', 'brilo-blocks')} initialOpen>
+            <ToggleGroupControl
+              label={__('Zdroj lístků', 'brilo-blocks')}
+              help={MODE_HINTS[mode]}
+              value={mode}
+              onChange={(value) => setAttributes({mode: value as FoodMenuGroupAttributes['mode']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="manual" label={__('Ruční výběr', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="today" label={__('Dnešní', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="week" label={__('Týden', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            <ToggleGroupControl
+              label={__('Rozvržení', 'brilo-blocks')}
+              help={__('Slider se použije jen tehdy, když je lístků víc než jeden.', 'brilo-blocks')}
+              value={layout}
+              onChange={(value) => setAttributes({layout: value as FoodMenuGroupAttributes['layout']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="slider" label={__('Slider', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="list" label={__('Seznam', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            <ToggleControl
+              __nextHasNoMarginBottom
+              label={__('Zobrazit ceny', 'brilo-blocks')}
+              checked={showPrices}
+              onChange={(value) => setAttributes({showPrices: value})}
+            />
+
+            <ToggleControl
+              __nextHasNoMarginBottom
+              label={__('Zobrazit alergeny a legendu', 'brilo-blocks')}
+              checked={showAllergens}
+              onChange={(value) => setAttributes({showAllergens: value})}
+            />
+
+            <ToggleControl
+              __nextHasNoMarginBottom
+              label={__('Umožnit objednání obědu', 'brilo-blocks')}
+              help={__(
+                'Objednávkové tlačítko se ukáže jen u denních lístků a jen když jsou rezervace zapnuté v nastavení modulu.',
+                'brilo-blocks',
+              )}
+              checked={showReservation}
+              onChange={(value) => setAttributes({showReservation: value})}
+            />
+          </PanelBody>
+
+          <PanelBody title={__('Když není co zobrazit', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              label={__('Chování', 'brilo-blocks')}
+              help={EMPTY_HINTS[emptyBehaviour]}
+              value={emptyBehaviour}
+              onChange={(value) => setAttributes({emptyBehaviour: value as FoodMenuGroupAttributes['emptyBehaviour']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="message" label={__('Zpráva', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="permanent" label={__('Stálá nabídka', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="hide" label={__('Skrýt', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            {'hide' !== emptyBehaviour && (
+              <TextareaControl
+                __nextHasNoMarginBottom
+                label={__('Vlastní text zprávy', 'brilo-blocks')}
+                help={__('Když zůstane prázdné, použije se věta podle zvoleného zdroje lístků.', 'brilo-blocks')}
+                rows={2}
+                value={emptyText}
+                onChange={(value) => setAttributes({emptyText: value})}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {'manual' === mode && (
+            <div className="brilo-food-menu-preview__pick">
+              {options.renderMenusControl?.({
+                selectedItems: menuIds,
+                onChange: (ids: number[]) => setAttributes({menuIds: ids}),
+              })}
+
+              <Text variant="muted">{pickedNote(menuIds.length)}</Text>
+            </div>
+          )}
+
+          <FoodMenuPreview attributes={attributes} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/food-menu/food-menu-group/editor.scss

@@ -0,0 +1,269 @@
+// Editor preview of the menu block: an admin card, not a copy of the page.
+// wp-admin palette only — the canvas carries the theme's front-end styles,
+// and none of its tokens belong here.
+$fg: #1e1e1e;
+$muted: #757575;
+$line: #dcdcde;
+$surface: #f6f7f7;
+$accent: #3858e9;
+$ok: #1d7c4d;
+$ok-soft: #e5f3ec;
+$warn: #9a6700;
+
+@layer base {
+  .brilo-food-menu-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    color: $fg;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    text-align: left;
+
+    &--loading {
+      opacity: 0.6;
+    }
+  }
+
+  .brilo-food-menu-preview__pick {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    padding: 10px 0 14px;
+  }
+
+  .brilo-food-menu-preview__head {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    background: $surface;
+    border: 1px solid $line;
+    border-bottom: 0;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .brilo-food-menu-preview__card--loading .brilo-food-menu-preview__head {
+    // Same height as a loaded head, so the block does not jump when it lands.
+    min-height: 43px;
+    justify-content: center;
+    border-bottom: 1px solid $line;
+    border-radius: 4px;
+
+    .components-spinner {
+      margin: 0;
+    }
+  }
+
+  .brilo-food-menu-preview__title {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    min-width: 0;
+    font-weight: 600;
+
+    svg {
+      flex: none;
+      width: 18px;
+      height: 18px;
+      color: $muted;
+    }
+  }
+
+  .brilo-food-menu-preview__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .brilo-food-menu-preview__pill {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    padding: 2px 9px;
+    color: $accent;
+    font-weight: 600;
+    font-size: 12px;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+    background: rgba($accent, 0.1);
+    border-radius: 999px;
+
+    &--ok {
+      color: $ok;
+      background: $ok-soft;
+    }
+
+    &--muted {
+      color: $muted;
+      background: $surface;
+    }
+  }
+
+  .brilo-food-menu-preview__body {
+    border: 1px solid $line;
+    border-radius: 0 0 4px 4px;
+  }
+
+  .brilo-food-menu-preview__days {
+    display: flex;
+    overflow-x: auto;
+    // A shadow, not a border: the selected tab's underline paints over it
+    // without a negative margin, which would make the strip scroll vertically.
+    box-shadow: inset 0 -1px 0 $line;
+  }
+
+  .brilo-food-menu-preview__day {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    margin: 0;
+    padding: 8px 14px;
+    color: $muted;
+    font: inherit;
+    font-size: 13px;
+    white-space: nowrap;
+    background: none;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
+    cursor: pointer;
+
+    &[aria-selected="true"] {
+      color: $fg;
+      font-weight: 600;
+      border-bottom-color: $accent;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $accent;
+      outline-offset: -2px;
+    }
+  }
+
+  .brilo-food-menu-preview__dot {
+    width: 6px;
+    height: 6px;
+    background: $ok;
+    border-radius: 50%;
+
+    &--off {
+      background: $line;
+    }
+  }
+
+  .brilo-food-menu-preview__section {
+    padding: 10px 14px 4px;
+
+    & + & {
+      border-top: 1px solid $line;
+    }
+  }
+
+  .brilo-food-menu-preview__section-title {
+    margin: 0 0 4px;
+    color: $muted;
+    font-weight: 600;
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .brilo-food-menu-preview__row {
+    display: grid;
+    grid-template-columns: 48px 1fr auto;
+    gap: 10px;
+    align-items: baseline;
+    padding: 6px 0;
+    font-size: 14px;
+
+    &--no-price {
+      grid-template-columns: 48px 1fr;
+    }
+  }
+
+  .brilo-food-menu-preview__unit {
+    color: $muted;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .brilo-food-menu-preview__name {
+    min-width: 0;
+
+    &--missing {
+      color: $muted;
+      font-style: italic;
+    }
+  }
+
+  .brilo-food-menu-preview__note {
+    display: block;
+    color: $muted;
+    font-size: 12px;
+  }
+
+  .brilo-food-menu-preview__chip {
+    display: inline-block;
+    margin-left: 4px;
+    padding: 0 5px;
+    color: $muted;
+    font-weight: 600;
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    line-height: 16px;
+    background: $surface;
+    border: 1px solid $line;
+    border-radius: 3px;
+  }
+
+  .brilo-food-menu-preview__price {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .brilo-food-menu-preview__foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: space-between;
+    padding: 8px 14px;
+    color: $muted;
+    font-size: 12px;
+    background: $surface;
+    border-top: 1px solid $line;
+    border-radius: 0 0 4px 4px;
+  }
+
+  .brilo-food-menu-preview__empty {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 14px 16px;
+    color: $muted;
+    font-size: 14px;
+    border: 1px dashed $line;
+    border-radius: 4px;
+
+    b {
+      display: block;
+      color: $fg;
+      font-weight: 600;
+    }
+  }
+
+  .brilo-food-menu-preview__empty-icon {
+    flex: none;
+    width: 20px;
+    height: 20px;
+    color: $warn;
+  }
+
+  .brilo-food-menu-preview__retry {
+    margin-top: 8px;
+  }
+}

package/src/blocks/food-menu/food-menu-group/factory.tsx

@@ -0,0 +1,66 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {
+  FOOD_MENU_GROUP_EMPTY_BEHAVIOUR,
+  FOOD_MENU_GROUP_EMPTY_BEHAVIOURS,
+  FOOD_MENU_GROUP_LAYOUT,
+  FOOD_MENU_GROUP_LAYOUTS,
+  FOOD_MENU_GROUP_MODE,
+  FOOD_MENU_GROUP_MODES,
+} from './constants'
+import {createFoodMenuGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {FoodMenuGroupAttributes, FoodMenuGroupOptions} from './types'
+
+export function createFoodMenuGroupBlock(options: FoodMenuGroupOptions): BlockConfiguration<FoodMenuGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Jídelní lístek', 'brilo-blocks'),
+    description: options.description ?? __('Zobrazí vybraný lístek, dnešní denní lístek nebo celý týden.', 'brilo-blocks'),
+    category: options.category ?? 'widgets',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      mode: {
+        type: 'string',
+        default: FOOD_MENU_GROUP_MODE,
+        enum: [...FOOD_MENU_GROUP_MODES],
+      },
+      layout: {
+        type: 'string',
+        default: FOOD_MENU_GROUP_LAYOUT,
+        enum: [...FOOD_MENU_GROUP_LAYOUTS],
+      },
+      menuIds: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+      showPrices: {
+        type: 'boolean',
+        default: true,
+      },
+      showAllergens: {
+        type: 'boolean',
+        default: true,
+      },
+      showReservation: {
+        type: 'boolean',
+        default: true,
+      },
+      emptyBehaviour: {
+        type: 'string',
+        default: FOOD_MENU_GROUP_EMPTY_BEHAVIOUR,
+        enum: [...FOOD_MENU_GROUP_EMPTY_BEHAVIOURS],
+      },
+      // Empty means "use the wording the server picks for this mode".
+      emptyText: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createFoodMenuGroupEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<FoodMenuGroupAttributes>
+}

package/src/blocks/food-menu/food-menu-group/icon.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Jídelní lístek">
+    <rect x="3" y="2" width="14" height="16" stroke="currentColor" fill="none" />
+    <line x1="6" y1="6" x2="14" y2="6" stroke="currentColor" />
+    <line x1="6" y1="10" x2="14" y2="10" stroke="currentColor" />
+    <line x1="6" y1="14" x2="11" y2="14" stroke="currentColor" />
+  </svg>
+)

package/src/blocks/food-menu/food-menu-group/index.ts

@@ -0,0 +1,17 @@
+export type {
+  FoodMenuGroupAttributes,
+  FoodMenuGroupEmptyBehaviour,
+  FoodMenuGroupLayout,
+  FoodMenuGroupMode,
+  FoodMenuGroupOptions,
+} from './types'
+export {createFoodMenuGroupBlock} from './factory'
+export {FoodMenuSelectModal} from './FoodMenuSelectModal'
+
+import type {FoodMenuGroupOptions} from './types'
+
+export const foodMenuGroupDefaults: FoodMenuGroupOptions = {
+  name: 'brilo/food-menu-group',
+  // Also allowed inside a content column, so a menu can sit next to a gallery.
+  parent: ['brilo/base-section', 'brilo/column-item'],
+}

package/src/blocks/food-menu/food-menu-group/types.ts

@@ -0,0 +1,21 @@
+import type {BriloBlockType, SelectControlProps} from '~/types'
+import type {FOOD_MENU_GROUP_EMPTY_BEHAVIOURS, FOOD_MENU_GROUP_LAYOUTS, FOOD_MENU_GROUP_MODES} from './constants'
+
+export type FoodMenuGroupMode = (typeof FOOD_MENU_GROUP_MODES)[number]
+export type FoodMenuGroupLayout = (typeof FOOD_MENU_GROUP_LAYOUTS)[number]
+export type FoodMenuGroupEmptyBehaviour = (typeof FOOD_MENU_GROUP_EMPTY_BEHAVIOURS)[number]
+
+export interface FoodMenuGroupAttributes extends Record<string, unknown> {
+  mode: FoodMenuGroupMode
+  layout: FoodMenuGroupLayout
+  menuIds: number[]
+  showPrices: boolean
+  showAllergens: boolean
+  showReservation: boolean
+  emptyBehaviour: FoodMenuGroupEmptyBehaviour
+  emptyText: string
+}
+
+export interface FoodMenuGroupOptions extends BriloBlockType {
+  renderMenusControl?: (props: SelectControlProps) => JSX.Element
+}

package/src/blocks/gallery/gallery-group/index.ts

@@ -5,7 +5,7 @@ import type {GalleryGroupOptions} from './types'
 
 export const galleryGroupDefaults: GalleryGroupOptions = {
   name: 'brilo/gallery-group',
-  parent: ['brilo/base-section'],
+  parent: ['brilo/base-section', 'brilo/column-item'],
   allowedBlocks: ['brilo/gallery-item'],
   template: [],
 }

package/src/blocks/text-and-form/text-and-form-text-column/factory.tsx

@@ -31,7 +31,7 @@ export function createTextAndFormTextColumnBlock<
         type: 'object',
         default: {
           heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1]?.value ?? headingStyles[0].value},
-          overline: {type: 'object', default: {title: '', color: '', background: ''}},
+          overline: {title: '', color: '', background: ''},
         },
       },
       content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},

package/src/components/EntitySelectModal/EntitySelectModal.tsx

@@ -45,6 +45,12 @@ export type EntitySelectModalConfig<T extends EntityRecord> = {
   modalTitle: string
   emptyLabel: string
   className?: string
+  /**
+   * Keep the reorderable selection inside the modal instead of under the
+   * button — for blocks whose canvas already previews the picked items in
+   * order, where a second list would only repeat them.
+   */
+  listInModal?: boolean
 }
 
 function useEntities<T extends EntityRecord>(endpoint: string) {
@@ -191,19 +197,23 @@ export function createEntitySelectModal<T extends EntityRecord>(config: EntitySe
       onChange(selectedItems.includes(id) ? selectedItems.filter((itemId) => itemId !== id) : [...selectedItems, id])
     }
 
+    const selectedList = (
+      <SelectedOrderList
+        items={selectedEntities}
+        getItemLabel={config.getItemLabel}
+        emptyLabel={config.emptyLabel}
+        onChange={onChange}
+        onRemove={(id) => onChange(selectedItems.filter((itemId) => itemId !== id))}
+      />
+    )
+
     return (
       <VStack spacing={3} className={config.className ?? 'i-event-select-modal'}>
         <Button variant="secondary" icon={plusCircle} onClick={() => setIsOpen(true)}>
           {config.buttonLabel}
         </Button>
 
-        <SelectedOrderList
-          items={selectedEntities}
-          getItemLabel={config.getItemLabel}
-          emptyLabel={config.emptyLabel}
-          onChange={onChange}
-          onRemove={(id) => onChange(selectedItems.filter((itemId) => itemId !== id))}
-        />
+        {!config.listInModal && selectedList}
 
         {isOpen && (
           <Modal title={config.modalTitle} onRequestClose={() => setIsOpen(false)} size="fill">
@@ -236,6 +246,8 @@ export function createEntitySelectModal<T extends EntityRecord>(config: EntitySe
                 />
               </div>
 
+              {config.listInModal && selectedList}
+
               <HStack justify="flex-end">
                 <Button variant="primary" onClick={() => setIsOpen(false)}>
                   {__('Hotovo', 'brilo-blocks')}

package/src/editor.scss

@@ -41,6 +41,7 @@
 @forward "./blocks/person/person-item/editor";
 @forward "./blocks/event/event-calendar-group/editor";
 @forward "./blocks/event/event-list-group/editor";
+@forward "./blocks/food-menu/food-menu-group/editor";
 @forward "./blocks/responsive-grid/responsive-grid-item/editor";
 @forward "./blocks/layout/layout-aside/editor";
 @forward "./blocks/layout/layout-content/editor";

package/src/index.ts

@@ -189,6 +189,13 @@ export {
   DocumentsSelectModal,
   DocumentTermSelectModal,
 } from './blocks/document/documents-grid'
+export type {
+  FoodMenuGroupAttributes,
+  FoodMenuGroupLayout,
+  FoodMenuGroupMode,
+  FoodMenuGroupOptions,
+} from './blocks/food-menu/food-menu-group'
+export {createFoodMenuGroupBlock, foodMenuGroupDefaults, FoodMenuSelectModal} from './blocks/food-menu/food-menu-group'
 export type {LinkItemAttributes, LinkItemIcon, LinkItemOptions} from './blocks/link/link-item'
 export {createLinkItemBlock, linkItemDefaults} from './blocks/link/link-item'
 export type {ContentWithAsideAttributes, ContentWithAsideOptions} from './blocks/layout/layout-content-w-aside'

package/src/utils/plural.ts

@@ -0,0 +1,13 @@
+/** Picks the Czech plural form: 1, 2–4, 0 and 5+. `_n` only knows two. */
+export function plural<One extends string, Few extends string, Many extends string>(
+  count: number,
+  one: One,
+  few: Few,
+  many: Many,
+): One | Few | Many {
+  if (count === 1) {
+    return one
+  }
+
+  return count >= 2 && count <= 4 ? few : many
+}