@brilo/base-blocks 0.1.0 → 0.1.1

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

@@ -1,10 +0,0 @@
-export type {ColumnItemAttributes, ColumnItemOptions} from './types'
-export {createColumnItemBlock} from './factory'
-
-import type {ColumnItemOptions} from './types'
-
-export const columnItemDefaults: ColumnItemOptions = {
-  name: 'brilo/column-item',
-  parent: ['brilo/column-group'],
-  allowedBlocks: ['core/paragraph', 'core/list', 'core/image', 'core/heading', 'core/embed', 'core/quote', 'core/table', 'core/gallery'],
-}

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

@@ -1,7 +0,0 @@
-import type {BriloBlockType} from '~/types'
-
-export interface ColumnItemAttributes extends Record<string, unknown> {
-  size: string
-}
-
-export interface ColumnItemOptions extends BriloBlockType {}

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

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

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

@@ -1,52 +0,0 @@
-import {InspectorControls} from '@wordpress/block-editor'
-import {
-  PanelBody,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
-import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {HEADING_LEVELS} from './constants'
-import type {CompareGroupAttributes, CompareGroupOptions} from './types'
-
-export function createCompareGroupEdit(options: CompareGroupOptions) {
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: CompareGroupAttributes
-    setAttributes: (a: Partial<CompareGroupAttributes>) => void
-  }) {
-    const {headingLevel} = attributes
-    const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: options.blockClassName ?? 'g-compare wp-block-section',
-      containerClassName: [options.containerClassName ?? 'u-grid-responsive'],
-      allowedBlocks: options.allowedBlocks,
-      orientation: 'horizontal',
-      template: options.template,
-      layout: {type: 'default'},
-    })
-
-    return (
-      <>
-        <InspectorControls>
-          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
-            <ToggleGroupControl
-              isBlock
-              label={__('Úroveň nadpisu', 'brilo-blocks')}
-              value={String(headingLevel)}
-              onChange={(v) => setAttributes({headingLevel: Number(v) as CompareGroupAttributes['headingLevel']})}
-            >
-              {HEADING_LEVELS.map((l) => (
-                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
-              ))}
-            </ToggleGroupControl>
-          </PanelBody>
-        </InspectorControls>
-        <div {...blockProps}>
-          <div {...innerBlocksProps} />
-        </div>
-      </>
-    )
-  }
-}

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

@@ -1,29 +0,0 @@
-import {InnerBlocks} from '@wordpress/block-editor'
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import {createCompareGroupEdit} from './edit'
-import {icon as defaultIcon} from './icon'
-import {HEADING_LEVELS} from './constants'
-import type {CompareGroupAttributes, CompareGroupOptions} from './types'
-
-export type {CompareGroupAttributes, CompareGroupOptions}
-
-export function createCompareGroupBlock(options: CompareGroupOptions): BlockConfiguration<CompareGroupAttributes> {
-  return {
-    name: options.name,
-    title: options.title ?? __('Srovnání', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? {src: defaultIcon},
-    supports: {html: false, customClassName: false},
-    attributes: {
-      headingLevel: {
-        type: 'number',
-        default: HEADING_LEVELS[1],
-      },
-    },
-    edit: createCompareGroupEdit(options),
-    save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<CompareGroupAttributes>
-}

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

@@ -1,7 +0,0 @@
-export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <title>Compare Group</title>
-    <rect x="2" y="2" width="7" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
-    <rect x="11" y="2" width="7" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
-  </svg>
-)

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

@@ -1,13 +0,0 @@
-export type {CompareGroupAttributes, CompareGroupOptions} from './types'
-export {createCompareGroupBlock} from './factory'
-import type {CompareGroupOptions} from './types'
-
-export const compareGroupDefaults: CompareGroupOptions = {
-  name: 'brilo/compare-group',
-  parent: ['brilo/base-section'],
-  allowedBlocks: ['brilo/compare-item'],
-  template: [
-    ['brilo/compare-item', {}],
-    ['brilo/compare-item', {}],
-  ],
-}

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

@@ -1,12 +0,0 @@
-import {HEADING_LEVELS} from './constants'
-import type {BriloBlockType} from '~/types'
-
-export type CompareHeadingLevel = (typeof HEADING_LEVELS)[number]
-
-export interface CompareGroupAttributes extends Record<string, unknown> {
-  headingLevel: CompareHeadingLevel
-}
-
-export interface CompareGroupOptions extends BriloBlockType {
-  allowedBlocks: string[]
-}

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

@@ -1,38 +0,0 @@
-import {RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
-import {__} from '@wordpress/i18n'
-import type {CompareItemAttributes, CompareItemOptions} from './types'
-
-export function createCompareItemEdit(options: CompareItemOptions) {
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: CompareItemAttributes
-    setAttributes: (a: Partial<CompareItemAttributes>) => void
-  }) {
-    const {title} = attributes
-    const blockProps = useBlockProps({className: 'i-compare'})
-    const innerBlocksProps = useInnerBlocksProps(
-      {className: 'i-compare__options wp-block-inner-content'},
-      {
-        allowedBlocks: options.allowedBlocks,
-        template: options.template,
-      },
-    )
-
-    return (
-      <div {...blockProps}>
-        <div className={'i-compare__inner'}>
-          <RichText
-            tagName={'div'}
-            className="i-compare__title u-text-editable"
-            value={title}
-            onChange={(v) => setAttributes({title: v})}
-            placeholder={__('Nadpis...', 'brilo-blocks')}
-          />
-          <div {...innerBlocksProps} />
-        </div>
-      </div>
-    )
-  }
-}

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

@@ -1,15 +0,0 @@
-@layer base {
-  .i-compare__inner {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding: 16px;
-    border: 1px solid #ccc;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .i-compare {
-    width: 100%;
-  }
-}

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

@@ -1,28 +0,0 @@
-import {InnerBlocks} from '@wordpress/block-editor'
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import {createCompareItemEdit} from './edit'
-import {icon as defaultIcon} from './icon'
-import type {CompareItemAttributes, CompareItemOptions} from './types'
-
-export type {CompareItemAttributes, CompareItemOptions}
-
-export function createCompareItemBlock(options: CompareItemOptions): BlockConfiguration<CompareItemAttributes> {
-  return {
-    name: options.name,
-    title: options.title ?? __('Položka srovnání', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? {src: defaultIcon},
-    supports: {html: false, customClassName: false},
-    attributes: {
-      title: {
-        type: 'string',
-        default: '',
-      },
-    },
-    edit: createCompareItemEdit(options),
-    save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<CompareItemAttributes>
-}

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

@@ -1,9 +0,0 @@
-export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <title>Compare Item</title>
-    <rect x="4" y="2" width="12" height="16" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
-    <path d="M7 6H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    <path d="M7 9H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    <path d="M7 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-  </svg>
-)

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

@@ -1,13 +0,0 @@
-export type {CompareItemAttributes, CompareItemOptions} from './types'
-export {createCompareItemBlock} from './factory'
-import type {CompareItemOptions} from './types'
-
-export const compareItemDefaults: CompareItemOptions = {
-  name: 'brilo/compare-item',
-  parent: ['brilo/compare-group'],
-  allowedBlocks: ['brilo/compare-option'],
-  template: [
-    ['brilo/compare-option', {variant: 'plus'}],
-    ['brilo/compare-option', {variant: 'minus'}],
-  ],
-}

package/src/blocks/compare/compare-option/constants.ts

@@ -1,7 +0,0 @@
-import {__} from '@wordpress/i18n'
-
-export const VARIANTS = [
-  {value: 'plus', label: __('+', 'brilo-blocks')},
-  {value: 'minus', label: __('-', 'brilo-blocks')},
-  {value: 'custom', label: __('Vlastní', 'brilo-blocks')},
-] as const

package/src/blocks/compare/compare-option/edit.tsx

@@ -1,64 +0,0 @@
-import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
-import {
-  PanelBody,
-  TextControl,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
-import {VARIANTS} from './constants'
-import type {CompareOptionAttributes, CompareOptionOptions} from './types'
-
-export function createCompareOptionEdit(options: CompareOptionOptions) {
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: CompareOptionAttributes
-    setAttributes: (a: Partial<CompareOptionAttributes>) => void
-  }) {
-    const {text, variant, customChar} = attributes
-    const blockProps = useBlockProps({className: 'i-compare-option'})
-
-    return (
-      <>
-        <InspectorControls>
-          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
-            <ToggleGroupControl
-              isBlock
-              label={__('Varianta', 'brilo-blocks')}
-              value={variant}
-              onChange={(v) => setAttributes({variant: v as CompareOptionAttributes['variant']})}
-            >
-              {VARIANTS.map((v) => (
-                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
-              ))}
-            </ToggleGroupControl>
-            {variant === 'custom' && (
-              <TextControl
-                label={__('Vlastní znak', 'brilo-blocks')}
-                value={customChar}
-                onChange={(v) => setAttributes({customChar: v.substring(0, 1)})}
-                help={__('Zadejte 1 znak', 'brilo-blocks')}
-              />
-            )}
-          </PanelBody>
-        </InspectorControls>
-        <div {...blockProps}>
-          <div className="i-compare-option__bullet">
-            {variant === 'plus' && '+'}
-            {variant === 'minus' && '−'}
-            {variant === 'custom' && (customChar || '?')}
-          </div>
-          <RichText
-            tagName="span"
-            className="i-compare-option__text u-text-editable"
-            value={text}
-            onChange={(v) => setAttributes({text: v})}
-            placeholder={__('Text...', 'brilo-blocks')}
-          />
-        </div>
-      </>
-    )
-  }
-}

package/src/blocks/compare/compare-option/editor.scss

@@ -1,26 +0,0 @@
-@layer base {
-  .i-compare-option__bullet {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    width: 24px;
-    height: 24px;
-    background-color: #006ba1;
-    color: #fff;
-    font-weight: 900;
-    font-size: 18px;
-    flex-shrink: 0;
-  }
-
-  .i-compare-option__text {
-    flex-grow: 1;
-  }
-
-  .i-compare-option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-  }
-}

package/src/blocks/compare/compare-option/factory.tsx

@@ -1,35 +0,0 @@
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import {createCompareOptionEdit} from './edit'
-import {icon as defaultIcon} from './icon'
-import type {CompareOptionAttributes, CompareOptionOptions} from './types'
-
-export type {CompareOptionAttributes, CompareOptionOptions}
-
-export function createCompareOptionBlock(options: CompareOptionOptions): BlockConfiguration<CompareOptionAttributes> {
-  return {
-    name: options.name,
-    title: options.title ?? __('Možnost srovnání', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? {src: defaultIcon},
-    supports: {html: false, customClassName: false},
-    attributes: {
-      text: {
-        type: 'string',
-        default: '',
-      },
-      variant: {
-        type: 'string',
-        default: 'plus',
-      },
-      customChar: {
-        type: 'string',
-        default: '',
-      },
-    },
-    edit: createCompareOptionEdit(options),
-    save: () => null,
-  } as unknown as BlockConfiguration<CompareOptionAttributes>
-}

package/src/blocks/compare/compare-option/icon.tsx

@@ -1,7 +0,0 @@
-export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <title>Compare Option</title>
-    <path d="M4 10H16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    <path d="M10 4V16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-  </svg>
-)

package/src/blocks/compare/compare-option/index.ts

@@ -1,8 +0,0 @@
-export type {CompareOptionAttributes, CompareOptionOptions} from './types'
-export {createCompareOptionBlock} from './factory'
-import type {CompareOptionOptions} from './types'
-
-export const compareOptionDefaults: CompareOptionOptions = {
-  name: 'brilo/compare-option',
-  parent: ['brilo/compare-item'],
-}

package/src/blocks/compare/compare-option/types.ts

@@ -1,12 +0,0 @@
-import type {BriloBlockType} from '~/types'
-import {VARIANTS} from './constants'
-
-export type CompareOptionVariant = (typeof VARIANTS)[number]['value']
-
-export interface CompareOptionAttributes extends Record<string, unknown> {
-  text: string
-  variant: CompareOptionVariant
-  customChar: string
-}
-
-export interface CompareOptionOptions extends BriloBlockType {}

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

@@ -1,3 +0,0 @@
-export const CONTACT_COLUMNS = [2, 3] as const
-
-export const CONTACT_COLUMNS_CONTEXT = 'brilo/contact-columns'

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

@@ -1,57 +0,0 @@
-import {InspectorControls} from '@wordpress/block-editor'
-import {
-  PanelBody,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
-import clsx from 'clsx'
-import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {CONTACT_COLUMNS} from './constants'
-import type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
-
-export function createContactGroupEdit(options: ContactGroupOptions) {
-  const COLUMNS = options.columns ?? CONTACT_COLUMNS
-
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: ContactGroupAttributes
-    setAttributes: (a: Partial<ContactGroupAttributes>) => void
-  }) {
-    const {columns} = attributes
-
-    const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(options.blockClassName ?? 'g-contact wp-block-section'),
-      containerClassName: [options.containerClassName ?? 'g-contact__items', `--cols-${columns}`],
-      containerStyle: {'--grid-max-col-count': columns},
-      allowedBlocks: options.allowedBlocks,
-      orientation: 'horizontal',
-      template: options.template,
-      layout: {type: 'default'},
-    })
-
-    return (
-      <>
-        <InspectorControls>
-          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
-            <ToggleGroupControl
-              isBlock
-              label={__('Počet sloupců', 'brilo-blocks')}
-              value={String(columns)}
-              onChange={(v) => setAttributes({columns: Number(v) as ContactColumns})}
-            >
-              {COLUMNS.map((c) => (
-                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
-              ))}
-            </ToggleGroupControl>
-          </PanelBody>
-        </InspectorControls>
-        <div {...blockProps}>
-          <div {...innerBlocksProps} />
-        </div>
-      </>
-    )
-  }
-}

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

@@ -1,20 +0,0 @@
-@layer base {
-  .g-contact {
-    .g-contact__items {
-      display: grid;
-      grid-template-columns: repeat(var(--grid-max-col-count, 3), minmax(0, 1fr));
-      gap: 16px;
-      align-items: start;
-    }
-  }
-}
-
-// WP core sets `margin-left/right: auto` on `.wp-block` children of containers whose
-// layout type isn't flex/grid (ours is `default`). That rule is UNLAYERED, so a
-// layered override can't beat it regardless of specificity — keep this UNLAYERED and
-// bump above WP's (0,2,0) specificity to win.
-.editor-styles-wrapper .g-contact__items > .wp-block {
-  margin-left: 0;
-  margin-right: 0;
-  max-width: none;
-}

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

@@ -1,35 +0,0 @@
-import {InnerBlocks} from '@wordpress/block-editor'
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import type {NumberArray} from '~/types'
-import {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
-import {createContactGroupEdit} from './edit'
-import type {ContactGroupAttributes, ContactGroupOptions} from './types'
-
-export type {ContactGroupAttributes, ContactGroupOptions}
-
-export function createContactGroupBlock<TColumns extends NumberArray = typeof CONTACT_COLUMNS>(
-  options: ContactGroupOptions<TColumns>,
-): BlockConfiguration<ContactGroupAttributes<TColumns[number]>> {
-  const columns = options.columns ?? CONTACT_COLUMNS
-
-  return {
-    name: options.name,
-    title: options.title ?? __('Kontakty', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? 'id-alt',
-    supports: {html: false, customClassName: false},
-    providesContext: {[CONTACT_COLUMNS_CONTEXT]: 'columns'},
-    attributes: {
-      columns: {
-        type: 'number',
-        default: columns[1] ?? columns[0],
-        enum: [...columns],
-      },
-    },
-    edit: createContactGroupEdit(options as unknown as ContactGroupOptions),
-    save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<ContactGroupAttributes<TColumns[number]>>
-}

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

@@ -1,12 +0,0 @@
-export type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
-export {createContactGroupBlock} from './factory'
-export {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
-
-import type {ContactGroupOptions} from './types'
-
-export const contactGroupDefaults: ContactGroupOptions = {
-  name: 'brilo/contact-group',
-  parent: ['brilo/base-section'],
-  allowedBlocks: ['brilo/contact-item'],
-  template: [['brilo/contact-item', {}]],
-}

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

@@ -1,12 +0,0 @@
-import type {BriloBlockType, NumberArray} from '~/types'
-import type {CONTACT_COLUMNS} from './constants'
-
-export type ContactColumns = (typeof CONTACT_COLUMNS)[number]
-
-export interface ContactGroupAttributes<TColumns extends number = ContactColumns> extends Record<string, unknown> {
-  columns: TColumns
-}
-
-export interface ContactGroupOptions<TColumns extends NumberArray = typeof CONTACT_COLUMNS> extends BriloBlockType {
-  columns?: TColumns
-}

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

@@ -1,17 +0,0 @@
-import {__} from '@wordpress/i18n'
-
-export const CONTACT_ICON_TYPES = [
-  {value: 'preselected', label: __('Předvolená', 'brilo-blocks')},
-  {value: 'media', label: __('Obrázek', 'brilo-blocks')},
-] as const
-
-export const CONTACT_ICON_SIZES = [
-  {value: 'sm', label: __('Malá', 'brilo-blocks'), size: 24},
-  {value: 'md', label: __('Střední', 'brilo-blocks'), size: 32},
-  {value: 'lg', label: __('Velká', 'brilo-blocks'), size: 48},
-  {value: 'custom', label: __('Vlastní', 'brilo-blocks')},
-] as const
-
-export const CONTACT_ICON_SIZE_RANGE = {min: 8, max: 100} as const
-
-export const CONTACT_ICON_SIZE_DEFAULT = 32