@brilo/base-blocks 0.1.1 → 0.1.3

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

@@ -0,0 +1,65 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {Modal, PanelBody, ToggleControl, TextControl} from '@wordpress/components'
+import {useState} from '@wordpress/element'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {IconControl} from '~/components/IconControl'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {ICON_TYPES} from './constants'
+import type {UspItemAttributes, UspItemOptions} from './types'
+
+export function createUspItemEdit(options: UspItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: UspItemAttributes
+    setAttributes: (a: Partial<UspItemAttributes>) => void
+  }) {
+    const {title, content, url, icon} = attributes
+
+    const blockProps = useBlockProps({className: 'i-usp'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={ICON_TYPES} options={options} />
+          </PanelBody>
+          <PanelBody title={__('Odkaz', 'brilo-blocks')} initialOpen={false}>
+            <TextControl label={__('URL', 'brilo-blocks')} value={url.src} onChange={(v) => setAttributes({url: {...url, src: v}})} />
+            <ToggleControl
+              label={__('Otevřít v nové záložce', 'brilo-blocks')}
+              checked={url.blank}
+              onChange={(v) => setAttributes({url: {...url, blank: v}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-usp__inner wp-block-inner">
+            <ItemIconPreview icon={icon} className="i-usp__icon" setAttributes={setAttributes} options={options} />
+
+            <div className={clsx('i-usp__body', 'grow')}>
+              <RichText
+                tagName="h3"
+                className="i-usp__title u-text-editable"
+                value={title}
+                onChange={(v) => setAttributes({title: v})}
+                placeholder={__('Nadpis...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic']}
+              />
+              <RichText
+                tagName="p"
+                className="i-usp__content u-text-editable"
+                value={content}
+                onChange={(v) => setAttributes({content: v})}
+                placeholder={__('Popis...', 'brilo-blocks')}
+              />
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,17 @@
+.i-usp {
+  width: 100%;
+  margin-inline: 0;
+}
+
+.i-usp__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.i-usp__content {
+  font-size: 14px;
+  color: #555;
+  margin: 0;
+  line-height: 1.5;
+}

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

@@ -0,0 +1,30 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {ICON_TYPES} from './constants'
+import {createUspItemEdit} from './edit'
+import type {UspItemAttributes, UspItemOptions} from './types'
+
+export type {UspItemAttributes, UspItemOptions}
+
+export function createUspItemBlock(options: UspItemOptions): BlockConfiguration<UspItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('USP položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'star-filled',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      content: {type: 'string', default: ''},
+      url: {type: 'object', default: {src: '', blank: false}},
+      icon: {
+        type: 'object',
+        default: {type: ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
+      },
+    },
+    edit: createUspItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<UspItemAttributes>
+}

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

@@ -0,0 +1,11 @@
+export type {UspItemAttributes, UspItemOptions} from './types'
+export {createUspItemBlock} from './factory'
+
+import type {UspItemOptions} from './types'
+
+export const uspItemDefaults: UspItemOptions = {
+  name: 'brilo/usp-item',
+  parent: ['brilo/usp-group'],
+  icons: [],
+  iconsSrc: '',
+}

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

@@ -0,0 +1,17 @@
+import {BriloBlockType, Icon} from '~/types'
+import type {IconType} from '~/components/IconControl'
+import type {ICON_TYPES} from './constants'
+
+export type UspIconType = (typeof ICON_TYPES)[number]['value']
+
+export interface UspItemAttributes extends Record<string, unknown> {
+  title: string
+  content: string
+  url: {src: string; blank: boolean}
+  icon: Icon
+}
+
+export interface UspItemOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+}

package/src/components/IconControl/IconControl.tsx

@@ -0,0 +1,55 @@
+import {useState} from '@wordpress/element'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+
+export interface IconType {
+  value: string
+  label: string
+}
+
+interface IconControlProps {
+  value: string
+  label?: string
+  icons: IconType[]
+  iconsSrc: string
+  onChange: (icon: IconType) => void
+}
+
+export function IconControl({value, label, icons, iconsSrc, onChange}: IconControlProps) {
+  const getIconUrl = (name: string) => (name && name !== 'none' ? `${iconsSrc}${name}.svg` : '')
+  const [selectedIcon, setSelectedIcon] = useState<IconType>({
+    value,
+    label: label ?? '',
+  })
+
+  return (
+    <div className="icon-control flex column gap-4">
+      <div className="icon-control__hero-selected flex gap-4">
+        <div className="icon-control__hero-selected-img flex items-center justify-center">
+          {selectedIcon.value && <img src={getIconUrl(selectedIcon.value)} alt="" width={24} height={24} loading="lazy" />}
+        </div>
+        <div className="icon-control__hero-selected-body flex column gap-1">
+          <span>{__('Vybraná ikona', 'brilo-blocks')}</span>
+          <span className="icon-control__hero-selected-label">{selectedIcon.label}</span>
+        </div>
+      </div>
+      <div className="icon-control__group">
+        {icons.map((icon) => (
+          <button
+            key={icon.value}
+            type="button"
+            className={clsx('icon-control__item', 'flex', 'column', 'gap-2', 'items-center', 'justify-center', 'cursor-pointer', {
+              '--selected': selectedIcon.value === icon.value,
+            })}
+            onClick={() => {
+              onChange(icon)
+              setSelectedIcon(icon)
+            }}
+          >
+            <img src={getIconUrl(icon.value)} alt="" width={24} height={24} loading="lazy" />
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/IconControl/editor.scss

@@ -0,0 +1,53 @@
+@layer base {
+  .icon-control__group {
+    &.u-grid-responsive {
+      --grid-min-col-size: 64px;
+      --grid-gap: 2px;
+    }
+  }
+
+  .icon-control__item {
+    --border-color: #ddd;
+    --background-color: transparent;
+
+    width: 64px;
+    height: 64px;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
+    border-radius: 8px;
+    justify-self: center;
+    transition: border-color 0.3s ease;
+    transition-property: border-color, background-color;
+
+    img {
+      transition: filter 0.3s ease;
+    }
+
+    &.--selected {
+      --border-color: oklch(62.3% 0.214 259.815);
+      --background-color: oklch(62.3% 0.214 259.815);
+
+      img {
+        filter: invert(1);
+      }
+    }
+  }
+
+  .icon-control__hero-selected-img {
+    --border-color: #ddd;
+    --background-color: transparent;
+
+    width: 64px;
+    height: 64px;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
+    border-radius: 8px;
+  }
+
+  .icon-control__hero-selected {
+    padding-block: 8px;
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+  }
+}

package/src/components/IconControl/index.ts

@@ -0,0 +1,2 @@
+export type {IconType} from './IconControl'
+export {IconControl} from './IconControl'

package/src/components/IconControl/index.tsx

@@ -0,0 +1 @@
+// re-exported from index.ts — this file intentionally empty

package/src/components/ImagePicker/ImagePicker.tsx

@@ -0,0 +1,124 @@
+import {MediaUpload, MediaUploadCheck} from '@wordpress/block-editor'
+import {Button, TextControl} from '@wordpress/components'
+import {useSelect} from '@wordpress/data'
+import {__} from '@wordpress/i18n'
+import {CSSProperties} from 'react'
+
+export interface ImageValue {
+  id: number
+  alt: string
+}
+
+export interface ImageLabels {
+  select?: string
+  change?: string
+  remove?: string
+}
+
+interface ImagePickerProps {
+  value: ImageValue
+  onChange: (value: ImageValue) => void
+  allowedTypes?: string[]
+  placeholder?: string
+  labels?: ImageLabels
+  size?: [number, number]
+}
+
+export function useMediaUrl(id: number): string | undefined {
+  return useSelect(
+    (select) => {
+      if (!id) return undefined
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const media = (select('core') as any).getMedia(id)
+      return media?.source_url as string | undefined
+    },
+    [id],
+  )
+}
+
+function useImagePicker(value: ImageValue, onChange: (v: ImageValue) => void, labels?: ImageLabels) {
+  const mediaUrl = useMediaUrl(value.id)
+  const selectLabel = labels?.select ?? __('Vybrat obrázek', 'brilo-blocks')
+  const changeLabel = labels?.change ?? __('Změnit', 'brilo-blocks')
+  const removeLabel = labels?.remove ?? __('Odebrat', 'brilo-blocks')
+  const handleSelect = (media: {id: number; alt: string}) => onChange({id: media.id, alt: media.alt ?? ''})
+  const handleRemove = () => onChange({id: 0, alt: ''})
+  return {mediaUrl, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove}
+}
+
+export function ImagePickerBody({value, onChange, allowedTypes = ['image'], placeholder, labels}: ImagePickerProps) {
+  const {mediaUrl, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove} = useImagePicker(value, onChange, labels)
+
+  return (
+    <MediaUploadCheck>
+      <MediaUpload
+        onSelect={handleSelect}
+        allowedTypes={allowedTypes}
+        value={value.id || 0}
+        render={({open}: {open: () => void}) =>
+          value.id ? (
+            <div className="c-image-picker-body">
+              <div className="c-image-picker-body__preview">{mediaUrl && <img src={mediaUrl} alt={value.alt} />}</div>
+              <div className="c-image-picker-body__actions">
+                <Button onClick={open} variant="secondary">
+                  {changeLabel}
+                </Button>
+                <Button onClick={handleRemove} variant="tertiary" isDestructive>
+                  {removeLabel}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <button type="button" className="c-image-picker-body__placeholder" onClick={open}>
+              {placeholder ?? selectLabel}
+            </button>
+          )
+        }
+      />
+    </MediaUploadCheck>
+  )
+}
+
+export function ImagePickerControl({value, onChange, allowedTypes = ['image'], placeholder, labels, size = [48, 48]}: ImagePickerProps) {
+  const {mediaUrl, selectLabel, changeLabel, removeLabel, handleSelect, handleRemove} = useImagePicker(value, onChange, labels)
+
+  return (
+    <div
+      className="c-image-picker-control"
+      style={
+        {
+          '--image-picker-width': `${size[0]}px`,
+          '--image-picker-height': `${size[1]}px`,
+        } as CSSProperties
+      }
+    >
+      <MediaUploadCheck>
+        <MediaUpload
+          onSelect={handleSelect}
+          allowedTypes={allowedTypes}
+          value={value.id || 0}
+          render={({open}: {open: () => void}) => (
+            <div className="c-image-picker-control__row">
+              {!!value.id && !!mediaUrl && (
+                <div className="c-image-picker-control__thumb">
+                  <img src={mediaUrl} alt={value.alt} />
+                </div>
+              )}
+              <div className="c-image-picker-control__btns">
+                <Button onClick={open} variant="secondary" size="small">
+                  {value.id ? changeLabel : (placeholder ?? selectLabel)}
+                </Button>
+                {!!value.id && (
+                  <Button onClick={handleRemove} variant="tertiary" size="small" isDestructive>
+                    {removeLabel}
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+        />
+      </MediaUploadCheck>
+      {!!value.id && <TextControl label={__('Alt text', 'brilo-blocks')} value={value.alt} onChange={(alt) => onChange({...value, alt})} />}
+    </div>
+  )
+}

package/src/components/ImagePicker/editor.scss

@@ -0,0 +1,79 @@
+@layer base {
+  .c-image-picker-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .c-image-picker-body__preview {
+    width: 100%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      max-height: 100%;
+      height: auto;
+      display: block;
+      border-radius: 2px;
+    }
+  }
+
+  .c-image-picker-body__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+    padding: 8px;
+  }
+
+  .c-image-picker-body__placeholder {
+    width: 100%;
+    min-height: 120px;
+    background: #e8ecf1;
+    border: 2px dashed #b0bec5;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    color: #546e7a;
+    padding: 16px;
+    box-sizing: border-box;
+  }
+
+  .c-image-picker-control {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .c-image-picker-control__row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .c-image-picker-control__thumb {
+    width: var(--image-picker-width, 48px);
+    height: var(--image-picker-height, 48px);
+    flex-shrink: 0;
+    border-radius: 2px;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  .c-image-picker-control__btns {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+}

package/src/components/ImagePicker/index.ts

@@ -0,0 +1,2 @@
+export type {ImageLabels, ImageValue} from './ImagePicker'
+export {ImagePickerBody, ImagePickerControl, useMediaUrl} from './ImagePicker'

package/src/components/ImagePicker/index.tsx

@@ -0,0 +1 @@
+// re-exported from index.ts — this file intentionally empty

package/src/components/ItemIconControl/ItemIconControl.tsx

@@ -0,0 +1,72 @@
+import {
+  Button,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {useState} from '@wordpress/element'
+import {__} from '@wordpress/i18n'
+import {ImagePickerControl} from '~/components/ImagePicker'
+import type {ItemIconControlProps} from './types'
+import {ItemIconModal} from './ItemIconModal'
+
+export function ItemIconControl({icon, setAttributes, options, iconTypes}: ItemIconControlProps) {
+  const [isModalOpen, setModalOpen] = useState(false)
+  const preselectedIconUrl = icon.type === 'preselected' && icon.src ? `${options.iconsSrc}${icon.src}.svg` : ''
+
+  return (
+    <>
+      <ToggleGroupControl
+        label={__('Typ ikony', 'brilo-blocks')}
+        value={icon.type}
+        onChange={(v) => setAttributes({icon: {...icon, type: v as string}})}
+        isBlock
+      >
+        {iconTypes.map((t) => (
+          <ToggleGroupControlOption key={t.value} value={t.value} label={t.label} />
+        ))}
+      </ToggleGroupControl>
+
+      {icon.type === 'preselected' && (
+        <div className="i-item-icon__control-preselected">
+          {preselectedIconUrl && (
+            <div className="i-item-icon__preview">
+              <img src={preselectedIconUrl} alt="" width={32} height={32} />
+            </div>
+          )}
+          <Button variant="secondary" onClick={() => setModalOpen(true)}>
+            {icon.src ? __('Změnit ikonu', 'brilo-blocks') : __('Vybrat ikonu', 'brilo-blocks')}
+          </Button>
+        </div>
+      )}
+
+      {icon.type === 'media' && (
+        <ImagePickerControl
+          value={icon.media}
+          onChange={(val) => setAttributes({icon: {...icon, media: val}})}
+          labels={{
+            select: __('Vybrat ikonu', 'brilo-blocks'),
+            change: __('Změnit ikonu', 'brilo-blocks'),
+            remove: __('Odebrat ikonu', 'brilo-blocks'),
+          }}
+        />
+      )}
+
+      {icon.type === 'number' && (
+        <TextControl label={__('Číslo', 'brilo-blocks')} value={icon.src} onChange={(v) => setAttributes({icon: {...icon, src: v}})} />
+      )}
+
+      {isModalOpen && (
+        <ItemIconModal
+          icon={icon}
+          options={options}
+          onClose={() => setModalOpen(false)}
+          onChange={(selectedIcon) => {
+            setAttributes({icon: {...icon, src: selectedIcon.value}})
+            setModalOpen(false)
+          }}
+        />
+      )}
+    </>
+  )
+}

package/src/components/ItemIconControl/ItemIconModal.tsx

@@ -0,0 +1,12 @@
+import {Modal} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {IconControl} from '~/components/IconControl'
+import type {ItemIconModalProps} from './types'
+
+export function ItemIconModal({icon, options, onClose, onChange, className = 'i-item-icon__modal'}: ItemIconModalProps) {
+  return (
+    <Modal title={__('Vybrat ikonu', 'brilo-blocks')} onRequestClose={onClose} size="large" className={className}>
+      <IconControl value={icon.src} icons={options.icons} iconsSrc={options.iconsSrc} onChange={onChange} />
+    </Modal>
+  )
+}

package/src/components/ItemIconControl/ItemIconPreview.tsx

@@ -0,0 +1,93 @@
+import clsx from 'clsx'
+import {useState} from '@wordpress/element'
+import {useMediaUrl} from '~/components/ImagePicker'
+import type {ItemIconPreviewProps} from './types'
+import {ItemIconModal} from './ItemIconModal'
+
+export function ItemIconPreview({icon, className, options, setAttributes}: ItemIconPreviewProps) {
+  const [isModalOpen, setModalOpen] = useState(false)
+  const mediaIconUrl = useMediaUrl(icon.media.id)
+  const preselectedIconUrl = icon.type === 'preselected' && icon.src ? `${options.iconsSrc}${icon.src}.svg` : ''
+
+  const renderContent = () => {
+    if (icon.type === 'preselected') {
+      if (preselectedIconUrl) {
+        return (
+          <div className={clsx('i-item-icon', className)}>
+            <img
+              src={preselectedIconUrl}
+              alt=""
+              className={clsx(className ? `${className}-img` : 'i-item-icon__img')}
+              width={40}
+              height={40}
+            />
+          </div>
+        )
+      }
+      return (
+        <button
+          type="button"
+          className={clsx(
+            'i-item-icon',
+            className ? `${className}-placeholder` : null,
+            'i-item-icon__placeholder',
+            !isModalOpen && '--clickable',
+          )}
+          onClick={() => setModalOpen(true)}
+        >
+          <span>☆</span>
+        </button>
+      )
+    }
+
+    if (icon.type === 'media') {
+      if (icon.media.id && mediaIconUrl) {
+        return (
+          <div className={clsx('i-item-icon', className)}>
+            <img src={mediaIconUrl} alt={icon.media.alt} className={clsx(className ? `${className}-img` : null, 'i-item-icon__img')} />
+          </div>
+        )
+      }
+      return (
+        <div className={clsx('i-item-icon', className ? `${className}-placeholder` : 'i-item-icon__placeholder')}>
+          <span>☆</span>
+        </div>
+      )
+    }
+
+    if (icon.type === 'number') {
+      if (icon.src) {
+        return (
+          <div className={clsx('i-item-icon', className)}>
+            <span className={clsx(className ? `${className}-number` : 'i-item-icon__number')}>{icon.src}</span>
+          </div>
+        )
+      }
+      return (
+        <div className={clsx('i-item-icon', className ? `${className}-placeholder` : 'i-item-icon__placeholder')}>
+          <span>☆</span>
+        </div>
+      )
+    }
+
+    return null
+  }
+
+  return (
+    <>
+      {renderContent()}
+      {isModalOpen && (
+        <ItemIconModal
+          icon={icon}
+          options={options}
+          onClose={() => setModalOpen(false)}
+          onChange={(selectedIcon) => {
+            setAttributes({icon: {...icon, src: selectedIcon.value}})
+            setModalOpen(false)
+          }}
+          className="i-step__icon-modal"
+        />
+      )}
+    </>
+  )
+}