@brilo/base-blocks 0.1.42 → 0.1.44

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

@@ -0,0 +1,158 @@
+import {InspectorControls, RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  TextControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ImagePickerBody, ImagePickerControl, useMediaUrl} from '~/components/ImagePicker'
+import {ALIGNMENTS, CHIP_VARIANTS} from './constants'
+import type {PriceplanAlignment, PriceplanChipVariant, PriceplanItemAttributes, PriceplanItemOptions} from './types'
+
+export function createPriceplanItemEdit(options: PriceplanItemOptions) {
+  const ALIGNMENTS_OPTIONS = options.alignments ?? ALIGNMENTS
+  const CHIP_VARIANTS_OPTIONS = options.chipVariants ?? CHIP_VARIANTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: PriceplanItemAttributes
+    setAttributes: (a: Partial<PriceplanItemAttributes>) => void
+  }) {
+    const {title, description, alignment, img, price, highlighted, chip, footer} = attributes
+    const chipIconUrl = useMediaUrl(chip?.icon?.id)
+
+    const blockProps = useBlockProps({
+      className: clsx('i-priceplan', `--align-${alignment}`, highlighted && '--highlighted'),
+    })
+
+    const innerBlocksProps = useInnerBlocksProps(
+      {className: 'i-priceplan__inner'},
+      {
+        allowedBlocks: options.allowedBlocks,
+        template: options.template,
+      },
+    )
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Karta', 'brilo-blocks')}>
+            <ToggleControl
+              label={__('Zvýrazněná karta', 'brilo-blocks')}
+              checked={highlighted}
+              onChange={(value) => setAttributes({highlighted: value})}
+            />
+            <ToggleGroupControl
+              label={__('Zarovnání', 'brilo-blocks')}
+              value={alignment}
+              onChange={(value) => setAttributes({alignment: value as PriceplanAlignment})}
+              isBlock
+            >
+              {ALIGNMENTS_OPTIONS.map((a) => (
+                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')} initialOpen={false}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+          <PanelBody title={__('Chip / badge', 'brilo-blocks')} initialOpen={false}>
+            <TextControl
+              label={__('Text chipu', 'brilo-blocks')}
+              value={chip?.title ?? ''}
+              onChange={(value) => setAttributes({chip: {...chip, title: value}})}
+              placeholder={__('např. Doporučujeme', 'brilo-blocks')}
+            />
+            <ToggleGroupControl
+              label={__('Varianta chipu', 'brilo-blocks')}
+              value={chip?.variant ?? 'primary'}
+              onChange={(value) => setAttributes({chip: {...chip, variant: value as PriceplanChipVariant}})}
+              isBlock
+            >
+              {CHIP_VARIANTS_OPTIONS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <ImagePickerControl
+              value={chip?.icon ?? {id: 0, alt: ''}}
+              onChange={(val) => setAttributes({chip: {...chip, icon: val}})}
+              labels={{
+                select: __('Vybrat ikonu chipu', 'brilo-blocks'),
+                change: __('Změnit ikonu', 'brilo-blocks'),
+                remove: __('Odebrat ikonu', 'brilo-blocks'),
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-priceplan__wrap">
+            {chip?.title && (
+              <div className={clsx('i-priceplan__chip', `--chip-${chip.variant}`)}>
+                {!!chip.icon?.id && chipIconUrl && <img src={chipIconUrl} alt={chip.icon?.alt ?? ''} className="i-priceplan__chip-icon" />}
+                <span>{chip.title}</span>
+              </div>
+            )}
+
+            <div className="i-priceplan__header">
+              <RichText
+                tagName="h3"
+                className="i-priceplan__title u-text-editable"
+                value={title}
+                onChange={(value) => setAttributes({title: value})}
+                placeholder={__('Název balíčku...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic', 'brilo-blocks/text-color']}
+              />
+              <RichText
+                tagName="p"
+                className="i-priceplan__description u-text-editable"
+                value={description}
+                onChange={(value) => setAttributes({description: value})}
+                placeholder={__('Popis balíčku...', 'brilo-blocks')}
+              />
+            </div>
+
+            <div className="i-priceplan__image">
+              <ImagePickerBody value={img} onChange={(val) => setAttributes({img: val})} />
+            </div>
+
+            <div className="i-priceplan__price">
+              <RichText
+                tagName="p"
+                className="i-priceplan__price-value u-text-editable"
+                value={price?.value ?? ''}
+                onChange={(value) => setAttributes({price: {...price, value}})}
+                placeholder={__('od 0 Kč', 'brilo-blocks')}
+                allowedFormats={[]}
+              />
+              <RichText
+                tagName="p"
+                className="i-priceplan__price-footer u-text-editable"
+                value={price?.footer ?? ''}
+                onChange={(value) => setAttributes({price: {...price, footer: value}})}
+                placeholder={__('s DPH · po odečtení dotace...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic', 'core/link', 'brilo-blocks/text-color']}
+              />
+            </div>
+
+            <div {...innerBlocksProps} />
+
+            <RichText
+              tagName="p"
+              className="i-priceplan__footer u-text-editable"
+              value={footer}
+              onChange={(value) => setAttributes({footer: value})}
+              placeholder={__('Poznámka (volitelné)...', 'brilo-blocks')}
+              allowedFormats={['core/bold', 'core/italic', 'core/link', 'brilo-blocks/text-color']}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,131 @@
+.i-priceplan {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+  position: relative;
+
+  &.--highlighted {
+    border-color: #333;
+    border-width: 2px;
+  }
+
+  &.--align-center {
+    text-align: center;
+
+    .i-priceplan__wrap > .i-priceplan__chip {
+      align-self: center;
+    }
+  }
+}
+
+.i-priceplan__wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+
+.i-priceplan__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  align-self: flex-start;
+
+  &.--chip-primary {
+    background: #f60;
+    color: #fff;
+  }
+
+  &.--chip-secondary {
+    background: #eee;
+    color: #333;
+  }
+}
+
+.i-priceplan__chip-icon {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+}
+
+.i-priceplan__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.i-priceplan__title {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.i-priceplan__description {
+  font-size: 13px;
+  color: #666;
+  margin: 0;
+}
+
+.i-priceplan__image {
+  width: 100%;
+
+  .c-image-picker-body__preview img {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    display: block;
+    border-radius: 4px;
+  }
+
+  .c-image-picker-body__placeholder {
+    aspect-ratio: 16/9;
+    min-height: unset;
+    border-radius: 4px;
+  }
+}
+
+.i-priceplan__price {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.i-priceplan__price-value {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.i-priceplan__price-footer {
+  font-size: 12px;
+  color: #888;
+  margin: 0;
+}
+
+.i-priceplan__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  > * {
+    margin-block: 0 !important;
+  }
+}
+
+.i-priceplan__wrap .g-button-group__inner {
+  flex-direction: column;
+}
+
+.i-priceplan__footer {
+  font-size: 12px;
+  color: #888;
+  margin: 0;
+  padding-top: 8px;
+  border-top: 1px solid #eee;
+}

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

@@ -0,0 +1,80 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {ALIGNMENTS, CHIP_VARIANTS} from './constants'
+import {createPriceplanItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {PriceplanItemAttributes, PriceplanItemOptions} from './types'
+
+export type {PriceplanItemAttributes, PriceplanItemOptions}
+
+export function createPriceplanItemBlock<
+  TAlignments extends OptionArray = typeof ALIGNMENTS,
+  TChipVariants extends OptionArray = typeof CHIP_VARIANTS,
+>(
+  options: PriceplanItemOptions<TAlignments, TChipVariants>,
+): BlockConfiguration<PriceplanItemAttributes<TAlignments[number]['value'], TChipVariants[number]['value']>> {
+  const alignments = options.alignments ?? ALIGNMENTS
+  const chipVariants = options.chipVariants ?? CHIP_VARIANTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Ceník položka', 'brilo-blocks'),
+    description: options.description ?? __('Ceníková karta s cenou, seznamem funkcí a tlačítkem', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {
+        type: 'string',
+        default: '',
+      },
+      description: {
+        type: 'string',
+        default: '',
+      },
+      alignment: {
+        type: 'string',
+        default: alignments[0].value,
+        enum: alignments.map((a) => a.value),
+      },
+      price: {
+        type: 'object',
+        default: {
+          value: '',
+          footer: '',
+        },
+      },
+      highlighted: {
+        type: 'boolean',
+        default: false,
+      },
+      chip: {
+        type: 'object',
+        default: {
+          title: '',
+          variant: chipVariants[0].value,
+          icon: {
+            id: 0,
+            alt: '',
+          },
+        },
+      },
+      img: {
+        type: 'object',
+        default: {
+          id: 0,
+          alt: '',
+        },
+      },
+      footer: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createPriceplanItemEdit(options as unknown as PriceplanItemOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<PriceplanItemAttributes<TAlignments[number]['value'], TChipVariants[number]['value']>>
+}

package/src/blocks/priceplan/priceplan-item/icon.tsx

@@ -0,0 +1,9 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Priceplan Item</title>
+    <rect x="3" y="2" width="14" height="16" rx="1.5" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <path d="M6 6H14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M6 9H11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M6 13H14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)

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

@@ -0,0 +1,16 @@
+import type {PriceplanItemOptions} from './types'
+
+export type {PriceplanItemAttributes, PriceplanItemOptions} from './types'
+export {createPriceplanItemBlock} from './factory'
+
+export const priceplanItemDefaults: PriceplanItemOptions = {
+  name: 'brilo/priceplan-item',
+  parent: ['brilo/priceplan-group'],
+  allowedBlocks: ['brilo/priceplan-list-item', 'brilo/button-group'],
+  template: [
+    ['brilo/priceplan-list-item', {}],
+    ['brilo/priceplan-list-item', {}],
+    ['brilo/priceplan-list-item', {}],
+    ['brilo/button-group', {}],
+  ],
+}

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

@@ -0,0 +1,34 @@
+import type {ImageValue} from '~/components/ImagePicker'
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {ALIGNMENTS, CHIP_VARIANTS} from './constants'
+
+export type PriceplanAlignment = (typeof ALIGNMENTS)[number]['value']
+export type PriceplanChipVariant = (typeof CHIP_VARIANTS)[number]['value']
+
+export interface PriceplanItemAttributes<TAlignment extends string = PriceplanAlignment, TChipVariant extends string = PriceplanChipVariant>
+  extends Record<string, unknown> {
+  title: string
+  description: string
+  alignment: TAlignment
+  img: ImageValue
+  price: {
+    value: string
+    footer: string
+  }
+  highlighted: boolean
+  chip: {
+    title: string
+    variant: TChipVariant
+    icon: ImageValue
+  }
+  footer: string
+}
+
+export interface PriceplanItemOptions<
+  TAlignments extends OptionArray = typeof ALIGNMENTS,
+  TChipVariants extends OptionArray = typeof CHIP_VARIANTS,
+> extends BriloBlockType {
+  allowedBlocks?: string[]
+  alignments?: TAlignments
+  chipVariants?: TChipVariants
+}

package/src/blocks/priceplan/priceplan-list-item/constants.ts

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const LIST_VARIANTS = [
+  {value: 'included', label: __('Zahrnuto', 'brilo-blocks')},
+  {value: 'excluded', label: __('Nezahrnuto', 'brilo-blocks')},
+] as const

package/src/blocks/priceplan/priceplan-list-item/edit.tsx

@@ -0,0 +1,59 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {LIST_VARIANTS} from './constants'
+import type {PriceplanListItemAttributes, PriceplanListItemOptions, PriceplanListVariant} from './types'
+
+export function createPriceplanListItemEdit(options: PriceplanListItemOptions) {
+  const LIST_VARIANTS_OPTIONS = options.variants ?? LIST_VARIANTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: PriceplanListItemAttributes
+    setAttributes: (a: Partial<PriceplanListItemAttributes>) => void
+  }) {
+    const {title, variant} = attributes
+
+    const blockProps = useBlockProps({
+      className: clsx('i-priceplan-list', `--${variant}`),
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Položka', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Stav', 'brilo-blocks')}
+              value={variant}
+              onChange={(value) => setAttributes({variant: value as PriceplanListVariant})}
+              isBlock
+            >
+              {LIST_VARIANTS_OPTIONS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <span className="i-priceplan-list__icon">{variant === 'included' ? '✓' : '✕'}</span>
+          <RichText
+            tagName="span"
+            className="i-priceplan-list__title u-text-editable"
+            value={title}
+            onChange={(value) => setAttributes({title: value})}
+            placeholder={__('Funkce...', 'brilo-blocks')}
+            allowedFormats={['core/bold', 'core/italic', 'core/link', 'brilo-blocks/text-color']}
+          />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/priceplan/priceplan-list-item/editor.scss

@@ -0,0 +1,21 @@
+.i-priceplan-list {
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 2px 0;
+
+  &.--excluded {
+    opacity: 0.45;
+  }
+}
+
+.i-priceplan-list__icon {
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.i-priceplan-list__title {
+  font-size: 13px;
+}

package/src/blocks/priceplan/priceplan-list-item/factory.tsx

@@ -0,0 +1,38 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {LIST_VARIANTS} from './constants'
+import {createPriceplanListItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {PriceplanListItemAttributes, PriceplanListItemOptions} from './types'
+
+export type {PriceplanListItemAttributes, PriceplanListItemOptions}
+
+export function createPriceplanListItemBlock<TVariants extends OptionArray = typeof LIST_VARIANTS>(
+  options: PriceplanListItemOptions<TVariants>,
+): BlockConfiguration<PriceplanListItemAttributes<TVariants[number]['value']>> {
+  const variants = options.variants ?? LIST_VARIANTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Ceník položka seznamu', 'brilo-blocks'),
+    description: options.description ?? __('Položka ceníkového seznamu funkcí (zahrnuto / nezahrnuto)', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {
+        type: 'string',
+        default: '',
+      },
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+    },
+    edit: createPriceplanListItemEdit(options as unknown as PriceplanListItemOptions),
+    save: () => null,
+  } as unknown as BlockConfiguration<PriceplanListItemAttributes<TVariants[number]['value']>>
+}

package/src/blocks/priceplan/priceplan-list-item/icon.tsx

@@ -0,0 +1,9 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Priceplan List Item</title>
+    <path d="M4 6L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M13 6H17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M4 14L6 16L10 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M13 14H17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)

package/src/blocks/priceplan/priceplan-list-item/index.ts

@@ -0,0 +1,9 @@
+import type {PriceplanListItemOptions} from './types'
+
+export type {PriceplanListItemAttributes, PriceplanListItemOptions} from './types'
+export {createPriceplanListItemBlock} from './factory'
+
+export const priceplanListItemDefaults: PriceplanListItemOptions = {
+  name: 'brilo/priceplan-list-item',
+  parent: ['brilo/priceplan-item'],
+}

package/src/blocks/priceplan/priceplan-list-item/types.ts

@@ -0,0 +1,13 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {LIST_VARIANTS} from './constants'
+
+export type PriceplanListVariant = (typeof LIST_VARIANTS)[number]['value']
+
+export interface PriceplanListItemAttributes<TVariant extends string = PriceplanListVariant> extends Record<string, unknown> {
+  title: string
+  variant: TVariant
+}
+
+export interface PriceplanListItemOptions<TVariants extends OptionArray = typeof LIST_VARIANTS> extends BriloBlockType {
+  variants?: TVariants
+}

package/src/blocks/review/review-group/constants.ts

@@ -0,0 +1,25 @@
+import {__} from '@wordpress/i18n'
+
+export const VARIANTS = [
+  {
+    value: 'default',
+    label: __('Výchozí', 'brilo-blocks'),
+  },
+  {
+    value: 'slider',
+    label: __('Slider', 'brilo-blocks'),
+  },
+] as const
+
+export const COLUMNS = [2, 3, 4] as const
+
+export const DEFAULT_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
+export const IMAGE_MODES = [
+  {value: 'avatar', label: __('Zobrazit', 'brilo-blocks')},
+  {value: 'none', label: __('Skrýt', 'brilo-blocks')},
+] as const