@brilo/base-blocks 0.1.42 → 0.1.44

package/src/blocks/review/review-group/edit.tsx

@@ -0,0 +1,116 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import type {BlockEditProps} from '@wordpress/blocks'
+import {
+  BaseControl,
+  ColorPalette,
+  PanelBody,
+  SelectControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {COLUMNS, DEFAULT_SHADOWS, VARIANTS} from './constants'
+import type {ReviewColumns, ReviewGroupAttributes, ReviewGroupOptions, ReviewImageMode, ReviewShadow, Variant} from './types'
+
+export function createReviewGroupEdit(options: ReviewGroupOptions) {
+  const VARIANTS_OPTIONS = options.variants ?? VARIANTS
+  const exclude = options.exclude ?? []
+
+  return function ReviewGroupEdit({attributes, setAttributes}: BlockEditProps<ReviewGroupAttributes>) {
+    const {columns, image, variant, style} = attributes
+    const {paletteColors} = useTenantColorPalette()
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(
+        options.blockClassName ?? 'g-review wp-block-section',
+        `--variant-${variant}`,
+        image === 'none' && '--image-none',
+      ),
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive-blocks-list', `--col-${columns}`],
+      containerStyle: {'--grid-max-col-count': columns},
+      allowedBlocks: options.allowedBlocks ?? ['brilo/review-item'],
+      template: options.template ?? [
+        ['brilo/review-item', {}],
+        ['brilo/review-item', {}],
+        ['brilo/review-item', {}],
+      ],
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as Variant})}
+            >
+              {VARIANTS_OPTIONS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <SelectControl
+              label={__('Počet sloupců', 'brilo-blocks')}
+              value={String(columns)}
+              options={COLUMNS.map((c) => ({value: String(c), label: String(c)}))}
+              onChange={(value) => setAttributes({columns: Number(value) as ReviewColumns})}
+            />
+            <ToggleControl
+              label={__('Zobrazit foto autora', 'brilo-blocks')}
+              checked={image === 'avatar'}
+              onChange={(checked) => setAttributes({image: (checked ? 'avatar' : 'none') as ReviewImageMode})}
+            />
+          </PanelBody>
+          {!exclude.includes('colors') && style && (
+            <PanelBody title={__('Styl', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as ReviewShadow}})}
+              >
+                {DEFAULT_SHADOWS.map((s) => (
+                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+                ))}
+              </ToggleGroupControl>
+              <BaseControl
+                label={__('Barva okraje', 'brilo-blocks')}
+                help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+                id="review-group-border-color"
+              >
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.borderColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, borderColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id="review-group-background-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.backgroundColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, backgroundColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva textu', 'brilo-blocks')} id="review-group-text-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.textColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+                />
+              </BaseControl>
+            </PanelBody>
+          )}
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/review/review-group/editor.scss

@@ -0,0 +1,10 @@
+.g-review {
+  padding: 8px;
+  min-height: 60px;
+
+  &.--image-none {
+    .i-review__avatar {
+      display: none;
+    }
+  }
+}

package/src/blocks/review/review-group/factory.tsx

@@ -0,0 +1,58 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {COLUMNS, DEFAULT_SHADOWS, VARIANTS} from './constants'
+import {createReviewGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {ReviewGroupAttributes, ReviewGroupOptions} from './types'
+
+export type {ReviewGroupAttributes, ReviewGroupOptions}
+
+export function createReviewGroupBlock<TVariants extends OptionArray = typeof VARIANTS>(
+  options: ReviewGroupOptions<TVariants>,
+): BlockConfiguration<ReviewGroupAttributes<TVariants[number]['value']>> {
+  const variants = options.variants ?? VARIANTS
+  const exclude = options.exclude ?? []
+
+  const attributes: Record<string, unknown> = {
+    variant: {
+      type: 'string',
+      default: variants[0].value,
+      enum: variants.map((v) => v.value),
+    },
+    columns: {
+      type: 'number',
+      default: COLUMNS[1],
+    },
+    image: {
+      type: 'string',
+      default: 'none',
+    },
+  }
+
+  if (!exclude.includes('colors')) {
+    attributes.style = {
+      type: 'object',
+      default: {
+        shadow: DEFAULT_SHADOWS[0].value,
+        borderColor: '',
+        backgroundColor: '',
+        textColor: '',
+      },
+    }
+  }
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Recenze', 'brilo-blocks'),
+    description: options.description ?? __('Grid recenzí / hodnocení zákazníků', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes,
+    edit: createReviewGroupEdit(options as unknown as ReviewGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ReviewGroupAttributes<TVariants[number]['value']>>
+}

package/src/blocks/review/review-group/icon.tsx

@@ -0,0 +1,12 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Review Group</title>
+    <path
+      d="M3 4C3 2.89543 3.89543 2 5 2H15C16.1046 2 17 2.89543 17 4V13C17 14.1046 16.1046 15 15 15H11L7 18V15H5C3.89543 15 3 14.1046 3 13V4Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path d="M6 6H14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M6 9H11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)

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

@@ -0,0 +1,19 @@
+import type {ReviewGroupOptions} from './types'
+
+export type {
+  ExcludableReviewAttr,
+  ReviewColumns,
+  ReviewGroupAttributes,
+  ReviewGroupOptions,
+  ReviewImageMode,
+  ReviewShadow,
+  ReviewVariant,
+  Variant,
+} from './types'
+export {createReviewGroupBlock} from './factory'
+
+export const reviewGroupDefaults: ReviewGroupOptions = {
+  name: 'brilo/review-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/review-item'],
+}

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

@@ -0,0 +1,27 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {COLUMNS, DEFAULT_SHADOWS, IMAGE_MODES, VARIANTS} from './constants'
+
+export type Variant = (typeof VARIANTS)[number]['value']
+export type ReviewVariant = Variant
+export type ReviewColumns = (typeof COLUMNS)[number]
+export type ReviewImageMode = (typeof IMAGE_MODES)[number]['value']
+export type ReviewShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type ExcludableReviewAttr = 'colors'
+
+export interface ReviewGroupAttributes<TVariant extends string = Variant> extends Record<string, unknown> {
+  variant: TVariant
+  columns: ReviewColumns
+  image: ReviewImageMode
+  style: {
+    shadow: ReviewShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+  }
+}
+
+export interface ReviewGroupOptions<TVariants extends OptionArray = typeof VARIANTS> extends BriloBlockType {
+  variants?: TVariants
+  exclude?: ExcludableReviewAttr[]
+}

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

@@ -0,0 +1 @@
+export const RATINGS = [1, 2, 3, 4, 5] as const

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

@@ -0,0 +1,126 @@
+import {InspectorControls, MediaUpload, MediaUploadCheck, RichText, useBlockProps} from '@wordpress/block-editor'
+import type {BlockEditProps} from '@wordpress/blocks'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ImagePickerControl, useMediaUrl} from '~/components/ImagePicker'
+import {RATINGS} from './constants'
+import type {ReviewItemAttributes, ReviewItemOptions, ReviewRating} from './types'
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0].toUpperCase())
+    .join('')
+}
+
+export function createReviewItemEdit(options: ReviewItemOptions) {
+  return function ReviewItemEdit({attributes, setAttributes}: BlockEditProps<ReviewItemAttributes>) {
+    const {rating = 5, text = '', author = {img: {id: 0, alt: ''}, name: '', meta: ''}} = attributes
+    const avatarUrl = useMediaUrl(author?.img?.id)
+
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'i-review')})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Hodnocení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Počet hvězd', 'brilo-blocks')}
+              value={rating}
+              isBlock
+              onChange={(value) => setAttributes({rating: Number(value) as ReviewRating})}
+            >
+              {RATINGS.map((r) => (
+                <ToggleGroupControlOption key={r} value={r} label={String(r)} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Autor', 'brilo-blocks')}>
+            <ImagePickerControl
+              value={author?.img ?? {id: 0, alt: ''}}
+              onChange={(val) => setAttributes({author: {...author, img: val}})}
+              labels={{
+                select: __('Vybrat fotku', 'brilo-blocks'),
+                change: __('Změnit fotku', 'brilo-blocks'),
+                remove: __('Odstranit fotku', 'brilo-blocks'),
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div className="i-review__inner">
+            <div className="i-review__stars">
+              {RATINGS.map((n) => (
+                <button
+                  type="button"
+                  key={n}
+                  className="i-review__star"
+                  aria-label={`${n} z 5`}
+                  onClick={() => setAttributes({rating: n as ReviewRating})}
+                >
+                  {n <= rating ? '★' : '☆'}
+                </button>
+              ))}
+            </div>
+            <RichText
+              tagName="p"
+              className="i-review__text u-text-editable"
+              value={text}
+              onChange={(value) => setAttributes({text: value})}
+              placeholder={__('„Text recenze..."', 'brilo-blocks')}
+              allowedFormats={['core/bold', 'core/italic', 'brilo-blocks/text-color']}
+            />
+            <hr className="i-review__divider" />
+            <div className="i-review__author">
+              <MediaUploadCheck>
+                <MediaUpload
+                  onSelect={(media: {id: number; alt: string}) =>
+                    setAttributes({author: {...author, img: {id: media.id, alt: media.alt ?? ''}}})
+                  }
+                  allowedTypes={['image']}
+                  value={author?.img?.id || 0}
+                  render={({open}: {open: () => void}) => (
+                    <button type="button" className="i-review__avatar" onClick={open}>
+                      {author?.img?.id && avatarUrl ? (
+                        <img src={avatarUrl} alt={author?.img?.alt || ''} className="i-review__avatar-img" />
+                      ) : author?.name ? (
+                        getInitials(author.name)
+                      ) : (
+                        '?'
+                      )}
+                    </button>
+                  )}
+                />
+              </MediaUploadCheck>
+              <div className="i-review__author-info">
+                <RichText
+                  tagName="strong"
+                  className="i-review__author-name u-text-editable"
+                  value={author?.name}
+                  onChange={(value) => setAttributes({author: {...author, name: value}})}
+                  placeholder={__('Jméno Příjmení', 'brilo-blocks')}
+                  allowedFormats={[]}
+                />
+                <RichText
+                  tagName="span"
+                  className="i-review__author-meta u-text-editable"
+                  value={author?.meta}
+                  onChange={(value) => setAttributes({author: {...author, meta: value}})}
+                  placeholder={__('Město · služba', 'brilo-blocks')}
+                  allowedFormats={['core/bold', 'core/italic', 'core/link', 'brilo-blocks/text-color']}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,96 @@
+.i-review {
+  width: 100%;
+}
+
+.i-review__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  border: 1px solid #e0e4ea;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.i-review__stars {
+  font-size: 20px;
+  color: #1e2d45;
+  letter-spacing: 2px;
+}
+
+.i-review__star {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  line-height: 1;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.i-review__text {
+  font-style: italic;
+  color: #2c3e50;
+  margin: 0;
+  flex: 1;
+}
+
+.i-review__divider {
+  border: none;
+  border-top: 1px solid #e0e4ea;
+  margin: 0;
+}
+
+.i-review__author {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.i-review__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #e8ecf1;
+  color: #4a5568;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border: none;
+  padding: 0;
+}
+
+.i-review__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.i-review__author-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.i-review__author-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e2d45;
+}
+
+.i-review__author-meta {
+  font-size: 12px;
+  color: #718096;
+}

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

@@ -0,0 +1,40 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {RATINGS} from './constants'
+import {createReviewItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {ReviewItemAttributes, ReviewItemOptions} from './types'
+
+export type {ReviewItemAttributes, ReviewItemOptions}
+
+export function createReviewItemBlock(options: ReviewItemOptions): BlockConfiguration<ReviewItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Recenze položka', 'brilo-blocks'),
+    description: options.description ?? __('Karta recenze se hodnocením, textem a autorem', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      rating: {
+        type: 'number',
+        default: RATINGS[4],
+      },
+      text: {
+        type: 'string',
+        default: '',
+      },
+      author: {
+        type: 'object',
+        default: {
+          img: {id: 0, alt: ''},
+          name: '',
+          meta: '',
+        },
+      },
+    },
+    edit: createReviewItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<ReviewItemAttributes>
+}

package/src/blocks/review/review-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>Review Item</title>
+    <path
+      d="M10 2L12.472 7.008L18 7.81L14 11.708L14.944 17.212L10 14.612L5.056 17.212L6 11.708L2 7.81L7.528 7.008L10 2Z"
+      fill="currentColor"
+    />
+  </svg>
+)

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

@@ -0,0 +1,9 @@
+import type {ReviewItemOptions} from './types'
+
+export type {ReviewAuthor, ReviewItemAttributes, ReviewItemOptions, ReviewRating} from './types'
+export {createReviewItemBlock} from './factory'
+
+export const reviewItemDefaults: ReviewItemOptions = {
+  name: 'brilo/review-item',
+  parent: ['brilo/review-group'],
+}

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

@@ -0,0 +1,19 @@
+import type {ImageValue} from '~/components/ImagePicker'
+import type {BriloBlockType} from '~/types'
+import type {RATINGS} from './constants'
+
+export type ReviewRating = (typeof RATINGS)[number]
+
+export interface ReviewAuthor {
+  img: ImageValue
+  name: string
+  meta: string
+}
+
+export interface ReviewItemAttributes extends Record<string, unknown> {
+  rating: ReviewRating
+  text: string
+  author: ReviewAuthor
+}
+
+export interface ReviewItemOptions extends BriloBlockType {}

package/src/blocks/sections/base-section/attributes.ts

@@ -33,4 +33,13 @@ export const baseAttributes = {
       position: 'center center',
     },
   },
+  border: {
+    type: 'object',
+    default: {
+      top: {width: 0, color: '', style: 'solid'},
+      bottom: {width: 0, color: '', style: 'solid'},
+      left: {width: 0, color: '', style: 'solid'},
+      right: {width: 0, color: '', style: 'solid'},
+    },
+  },
 } as const