@brilo/base-blocks 0.1.0 → 0.1.1

package/src/components/IconControl/editor.scss

@@ -1,53 +0,0 @@
-@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

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

package/src/components/IconControl/index.tsx

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

package/src/components/ImagePicker/ImagePicker.tsx

@@ -1,124 +0,0 @@
-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

@@ -1,79 +0,0 @@
-@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

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

package/src/components/ImagePicker/index.tsx

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

package/src/components/ItemIconControl/ItemIconControl.tsx

@@ -1,72 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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"
-        />
-      )}
-    </>
-  )
-}

package/src/components/ItemIconControl/editor.scss

@@ -1,52 +0,0 @@
-@layer base {
-  .i-item-icon,
-  .i-item-icon__placeholder {
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #f0f6fb;
-    border-radius: 4px;
-    font-size: 18px;
-    color: #0073aa;
-    flex-shrink: 0;
-  }
-
-  .i-item-icon {
-    img,
-    .i-item-icon__img {
-      max-width: 100%;
-      max-height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  .i-item-icon__placeholder {
-    &.--clickable {
-      cursor: pointer;
-      background: none;
-      border: 1px dashed #0073aa;
-    }
-  }
-
-  .i-item-icon__preview {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 0;
-  }
-
-  .i-item-icon__control-preselected {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-top: 16px;
-  }
-
-  .i-item-icon__number {
-    font-size: 22px;
-    font-weight: 700;
-    color: #0073aa;
-  }
-}

package/src/components/ItemIconControl/index.ts

@@ -1,2 +0,0 @@
-export * from './ItemIconControl'
-export * from './ItemIconPreview'

package/src/components/ItemIconControl/types.d.ts

@@ -1,30 +0,0 @@
-import type {Icon, SelectOption} from '~/types'
-import type {IconType} from '../IconControl/IconControl'
-import {UspIconType} from '~/blocks/usp/usp-item/types'
-
-export interface ItemIconOptions {
-  icons: IconType[]
-  iconsSrc: string
-}
-
-export interface ItemIconControlProps {
-  icon: Icon
-  setAttributes: (attributes: {icon: Icon}) => void
-  options: ItemIconOptions
-  iconTypes: readonly SelectOption[]
-}
-
-export interface ItemIconPreviewProps {
-  icon: Icon
-  className?: string
-  options: ItemIconOptions
-  setAttributes: (attributes: {icon: Icon}) => void
-}
-
-export interface ItemIconModalProps {
-  icon: Icon
-  options: ItemIconOptions
-  onClose: () => void
-  onChange: (selectedIcon: IconType) => void
-  className?: string
-}

package/src/constants.ts

@@ -1,20 +0,0 @@
-import {__} from '@wordpress/i18n'
-
-export const HEADING_LEVELS = [1, 2, 3, 4] as const
-
-export const HEADING_STYLES = ['h1', 'h2', 'h3', 'h4'] as const
-
-export const HEADING_STYLE_OPTIONS = [
-  {value: 'h1', label: 'H1 styl'},
-  {value: 'h2', label: 'H2 styl'},
-  {value: 'h3', label: 'H3 styl'},
-  {value: 'h4', label: 'H4 styl'},
-] as const
-
-export type HeadingStyleOption = (typeof HEADING_STYLE_OPTIONS)[number]['value']
-
-export const CONTENT_SIZES = [
-  {value: 'sm', label: __('Malá', 'brilo-blocks')},
-  {value: 'default', label: __('Výchozí', 'brilo-blocks')},
-  {value: 'lg', label: __('Velká', 'brilo-blocks')},
-] as const

package/src/editor.scss

@@ -1,34 +0,0 @@
-@forward "./globals";
-@forward "./blocks/column/column-group/editor";
-@forward "./blocks/column/column-item/editor";
-@forward "./blocks/compare/compare-item/editor";
-@forward "./blocks/compare/compare-option/editor";
-@forward "./blocks/contact/contact-group/editor";
-@forward "./blocks/contact/contact-item/editor";
-@forward "./blocks/core/basic-button/editor";
-@forward "./blocks/core/basic-heading/editor";
-@forward "./blocks/core/basic-overline/editor";
-@forward "./blocks/faq/faq-group/editor";
-@forward "./blocks/faq/faq-item/editor";
-@forward "./blocks/form/form-field/editor";
-@forward "./blocks/form/form-group/editor";
-@forward "./blocks/groups/banner-group/editor";
-@forward "./blocks/groups/basic-header-group/editor";
-@forward "./blocks/groups/button-group/editor";
-@forward "./blocks/groups/text-and-media-group/editor";
-@forward "./blocks/hero/hero-item/editor";
-@forward "./blocks/map/map-group/editor";
-@forward "./blocks/newsletter/newsletter-form/editor";
-@forward "./blocks/sections/base-section/editor";
-@forward "./blocks/signpost/signpost-item/editor";
-@forward "./blocks/step/step-group/editor";
-@forward "./blocks/step/step-item/editor";
-@forward "./blocks/testimonial/testimonial-group/editor";
-@forward "./blocks/testimonial/testimonial-item/editor";
-@forward "./blocks/text-and-form/text-and-form-group/editor";
-@forward "./blocks/text-and-form/text-and-form-text-column/editor";
-@forward "./blocks/usp/usp-group/editor";
-@forward "./blocks/usp/usp-item/editor";
-@forward "./components/IconControl/editor";
-@forward "./components/ImagePicker/editor";
-@forward "./components/ItemIconControl/editor";