@brilo/base-blocks 0.1.0

package/src/blocks/core/basic-overline/edit.tsx

@@ -0,0 +1,28 @@
+import {RichText, useBlockProps} from '@wordpress/block-editor'
+import {__} from '@wordpress/i18n'
+import type {BasicOverlineAttributes, BasicOverlineOptions} from './types'
+
+export function createBasicOverlineEdit(options: BasicOverlineOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BasicOverlineAttributes
+    setAttributes: (a: Partial<BasicOverlineAttributes>) => void
+  }) {
+    const blockProps = useBlockProps({className: options.blockClassName ?? 'i-overline'})
+
+    return (
+      <div {...blockProps}>
+        <RichText
+          tagName="span"
+          className="i-overline__text u-text-editable"
+          value={attributes.title}
+          onChange={(value) => setAttributes({title: value})}
+          placeholder={__('Overline...', 'brilo-blocks')}
+          allowedFormats={[]}
+        />
+      </div>
+    )
+  }
+}

package/src/blocks/core/basic-overline/editor.scss

@@ -0,0 +1,14 @@
+@layer base {
+  .i-overline {
+    padding: 4px;
+  }
+
+  .i-overline__text {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #888;
+  }
+}

package/src/blocks/core/basic-overline/factory.tsx

@@ -0,0 +1,22 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createBasicOverlineEdit} from './edit'
+import type {BasicOverlineAttributes, BasicOverlineOptions} from './types'
+
+export type {BasicOverlineAttributes, BasicOverlineOptions}
+
+export function createBasicOverlineBlock(options: BasicOverlineOptions): BlockConfiguration<BasicOverlineAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Overline', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'text',
+    supports: {html: false, customClassName: false},
+    icon: options.icon ?? 'text',
+    attributes: {
+      title: {type: 'string', default: ''},
+    },
+    edit: createBasicOverlineEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<BasicOverlineAttributes>
+}

package/src/blocks/core/basic-overline/index.ts

@@ -0,0 +1,8 @@
+export type {BasicOverlineAttributes, BasicOverlineOptions} from './types'
+export {createBasicOverlineBlock} from './factory'
+
+import type {BasicOverlineOptions} from './types'
+
+export const basicOverlineDefaults: BasicOverlineOptions = {
+  name: 'brilo/basic-overline',
+}

package/src/blocks/core/basic-overline/types.ts

@@ -0,0 +1,7 @@
+import {BriloBlockType} from '~/types'
+
+export interface BasicOverlineAttributes extends Record<string, unknown> {
+  title: string
+}
+
+export interface BasicOverlineOptions extends BriloBlockType {}

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

@@ -0,0 +1,11 @@
+import {__} from '@wordpress/i18n'
+
+export const FAQ_HEADING_LEVELS = ['2', '3'] as const
+
+export const DEFAULT_ICON_VARIANTS = [
+  {value: 'none', label: __('Nic', 'brilo-blocks')},
+  {value: 'question', label: __('Otazník', 'brilo-blocks')},
+  {value: 'exclamation', label: __('Vykřičník', 'brilo-blocks')},
+  {value: 'info', label: __('Informace', 'brilo-blocks')},
+  {value: 'message', label: __('Zpráva', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,55 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {PanelBody, SelectControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant} from './types'
+
+export function createFaqGroupEdit(options: FaqGroupOptions) {
+  const ICON_VARIANTS = options.iconVariants ?? DEFAULT_ICON_VARIANTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: FaqGroupAttributes
+    setAttributes: (a: Partial<FaqGroupAttributes>) => void
+  }) {
+    const {headingLevel, iconVariant} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: options.blockClassName ?? 'g-faq wp-block-section',
+      containerClassName: options.containerClassName ?? 'g-faq__items',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+      orientation: 'vertical',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nadpis', 'brilo-blocks')}>
+            <SelectControl
+              label={__('Level nadpisu FAQ', 'brilo-blocks')}
+              value={headingLevel}
+              options={FAQ_HEADING_LEVELS.map((level) => ({value: level, label: `H${level}`}))}
+              onChange={(value) => setAttributes({headingLevel: value as FaqHeadingLevel})}
+            />
+          </PanelBody>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <SelectControl
+              label={__('Typ ikonky', 'brilo-blocks')}
+              value={iconVariant}
+              options={ICON_VARIANTS.map((v) => ({value: v.value, label: v.label}))}
+              onChange={(value) => setAttributes({iconVariant: value as FaqIconVariant})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,11 @@
+.g-faq {
+  .g-faq__items {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .faq-item {
+      margin-inline: 0;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+import {createFaqGroupEdit} from './edit'
+import type {FaqGroupAttributes, FaqGroupOptions} from './types'
+
+export type {FaqGroupAttributes, FaqGroupOptions}
+
+export function createFaqGroupBlock<TIconVariants extends OptionArray = typeof DEFAULT_ICON_VARIANTS>(
+  options: FaqGroupOptions<TIconVariants>,
+): BlockConfiguration<FaqGroupAttributes<TIconVariants[number]['value']>> {
+  const iconVariants = options.iconVariants ?? DEFAULT_ICON_VARIANTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('FAQ', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'editor-help',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      headingLevel: {
+        type: 'string',
+        default: FAQ_HEADING_LEVELS[1],
+        enum: [...FAQ_HEADING_LEVELS],
+      },
+      iconVariant: {
+        type: 'string',
+        default: iconVariants[1]?.value ?? iconVariants[0].value,
+        enum: iconVariants.map((v) => v.value),
+      },
+    },
+    edit: createFaqGroupEdit(options as unknown as FaqGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<FaqGroupAttributes<TIconVariants[number]['value']>>
+}

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

@@ -0,0 +1,11 @@
+export type {FaqGroupAttributes, FaqGroupOptions} from './types'
+export {createFaqGroupBlock} from './factory'
+
+import type {FaqGroupOptions} from './types'
+
+export const faqGroupDefaults: FaqGroupOptions = {
+  name: 'brilo/faq-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/faq-item'],
+  template: [['brilo/faq-item', {}]],
+}

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

@@ -0,0 +1,14 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+
+export type FaqHeadingLevel = (typeof FAQ_HEADING_LEVELS)[number]
+export type FaqIconVariant = (typeof DEFAULT_ICON_VARIANTS)[number]['value']
+
+export interface FaqGroupAttributes<TIconVariant extends string = FaqIconVariant> extends Record<string, unknown> {
+  headingLevel: FaqHeadingLevel
+  iconVariant: TIconVariant
+}
+
+export interface FaqGroupOptions<TIconVariants extends OptionArray = typeof DEFAULT_ICON_VARIANTS> extends BriloBlockType {
+  iconVariants?: TIconVariants
+}

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

@@ -0,0 +1,50 @@
+import {InspectorControls, RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {BaseControl, PanelBody} from '@wordpress/components'
+import {Icon, chevronDown} from '@wordpress/icons'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import type {FaqItemAttributes, FaqItemOptions} from './types'
+
+export function createFaqItemEdit(_options: FaqItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: FaqItemAttributes
+    setAttributes: (a: Partial<FaqItemAttributes>) => void
+  }) {
+    const {title} = attributes
+
+    const blockProps = useBlockProps({className: clsx('faq-item')})
+    const innerBlocksProps = useInnerBlocksProps(
+      {},
+      {allowedBlocks: ['core/paragraph', 'core/list', 'core/image', 'core/table', 'brilo/button-group']},
+    )
+
+    return (
+      <>
+        <div {...blockProps}>
+          <header className="faq-item__header flex gap-2">
+            <RichText
+              identifier="title"
+              className="title u-text-editable grow"
+              tagName="h3"
+              value={title}
+              allowedFormats={[]}
+              onChange={(value: string) => setAttributes({title: value})}
+              placeholder={__('Nadpis prvku', 'brilo-blocks')}
+              data-custom-placeholder={true}
+            />
+            <label className="faq-item__dropdown flex items-center justify-center cursor-pointer">
+              <Icon icon={chevronDown} size={32} className="faq-item__dropdown-icon" color="white" />
+              <input type="checkbox" defaultChecked />
+            </label>
+          </header>
+          <BaseControl label={__('Odpověď:', 'brilo-blocks')} className="faq-item__content">
+            <div {...innerBlocksProps} />
+          </BaseControl>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,57 @@
+.wp-block-brilo-faq-item {
+  padding: 16px;
+  border: 1px solid var(--border-color);
+  background: white;
+}
+
+.faq-item {
+  --dropdown-scale: -1;
+  --content-display: block;
+
+  &:has(input:checked) {
+    --dropdown-scale: 1;
+    --content-display: none;
+  }
+
+  .block-editor-block-list__layout {
+    p {
+      margin-block: 0;
+    }
+  }
+}
+
+.faq-item__content {
+  border: 1px solid var(--border-color);
+  padding: 12px;
+  display: var(--content-display);
+}
+
+.faq-item__dropdown {
+  height: 32px;
+  width: 32px;
+  margin-top: 21px;
+  border-radius: 4px;
+  position: relative;
+  background-color: #2271b1;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #135e96;
+  }
+
+  svg {
+    fill: white;
+  }
+
+  input {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    display: none;
+  }
+}
+
+.faq-item__dropdown-icon {
+  transition: transform 0.3s ease;
+  transform: scale(var(--dropdown-scale));
+}

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

@@ -0,0 +1,24 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createFaqItemEdit} from './edit'
+import type {FaqItemAttributes, FaqItemOptions} from './types'
+
+export type {FaqItemAttributes, FaqItemOptions}
+
+export function createFaqItemBlock(options: FaqItemOptions): BlockConfiguration<FaqItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('FAQ položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'editor-help',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+    },
+    edit: createFaqItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<FaqItemAttributes>
+}

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

@@ -0,0 +1,9 @@
+export type {FaqItemAttributes, FaqItemOptions} from './types'
+export {createFaqItemBlock} from './factory'
+
+import type {FaqItemOptions} from './types'
+
+export const faqItemDefaults: FaqItemOptions = {
+  name: 'brilo/faq-item',
+  parent: ['brilo/faq-group'],
+}

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

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

package/src/blocks/form/form-field/constants.ts

@@ -0,0 +1,14 @@
+import {__} from '@wordpress/i18n'
+
+export const FIELD_TYPE_VALUES = ['text', 'textarea', 'select', 'hidden'] as const
+
+export const FIELD_TYPES = [
+  {value: FIELD_TYPE_VALUES[0], label: __('Text', 'brilo-blocks')},
+  {value: FIELD_TYPE_VALUES[1], label: __('Textarea', 'brilo-blocks')},
+  {value: FIELD_TYPE_VALUES[2], label: __('Select', 'brilo-blocks')},
+  {value: FIELD_TYPE_VALUES[3], label: __('Hidden', 'brilo-blocks')},
+] as const
+
+export const FIELD_COLUMNS_RANGE = {min: 1, max: 12} as const
+
+export const FIELD_COLUMNS_DEFAULT = 6

package/src/blocks/form/form-field/edit.tsx

@@ -0,0 +1,178 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {Button, FormTokenField, PanelBody, RangeControl, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {FIELD_COLUMNS_DEFAULT, FIELD_COLUMNS_RANGE, FIELD_TYPES} from './constants'
+import type {FormFieldAttributes, FormFieldOptions, FormFieldType} from './types'
+
+const {min: MIN_COLUMNS, max: MAX_COLUMNS} = FIELD_COLUMNS_RANGE
+
+function sanitizeHtmlName(raw: string): string {
+  return (raw ?? '')
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/[^a-zA-Z0-9_-]/g, '')
+    .replace(/[-_]{2,}/g, '-')
+    .replace(/^[-_]+/g, '')
+    .toLowerCase()
+}
+
+export function createFormFieldEdit(_options: FormFieldOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: FormFieldAttributes
+    setAttributes: (a: Partial<FormFieldAttributes>) => void
+  }) {
+    const currentColumns = Math.max(MIN_COLUMNS, Math.min(MAX_COLUMNS, attributes.columns || MIN_COLUMNS))
+
+    const blockProps = useBlockProps({
+      className: clsx('i-form-field', `--type-${attributes.type}`, `--cols-${currentColumns}`, attributes.required && '--required'),
+    })
+
+    const options = Array.isArray(attributes.options) ? attributes.options.filter((opt): opt is string => typeof opt === 'string') : []
+
+    const selectOptions = [{label: __('Žádná', 'brilo-blocks'), value: ''}, ...options.map((opt) => ({label: opt, value: opt}))]
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Pole formuláře', 'brilo-blocks')}>
+            <SelectControl
+              label={__('Typ inputu', 'brilo-blocks')}
+              value={attributes.type}
+              options={FIELD_TYPES.map((t) => ({label: t.label, value: t.value}))}
+              onChange={(type) => setAttributes({type: type as FormFieldType})}
+            />
+
+            {attributes.type !== 'hidden' && (
+              <>
+                <TextControl label={__('Popisek', 'brilo-blocks')} value={attributes.label} onChange={(label) => setAttributes({label})} />
+                <ToggleControl
+                  label={__('Povinné', 'brilo-blocks')}
+                  checked={attributes.required}
+                  onChange={(required) => setAttributes({required})}
+                />
+                <TextControl
+                  label={__('Název html atributu', 'brilo-blocks')}
+                  value={attributes.name}
+                  help={__(
+                    'Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Např. city-born-to. Mezery a diakritika se automaticky odstraní.',
+                    'brilo-blocks',
+                  )}
+                  onChange={(name) => setAttributes({name: sanitizeHtmlName(name)})}
+                />
+                <TextControl
+                  label={__('Placeholder', 'brilo-blocks')}
+                  value={attributes.placeholder}
+                  onChange={(placeholder) => setAttributes({placeholder})}
+                />
+              </>
+            )}
+
+            {attributes.type === 'select' && (
+              <>
+                <FormTokenField
+                  label={__('Možnosti', 'brilo-blocks')}
+                  value={options}
+                  onChange={(nextOptions) =>
+                    setAttributes({
+                      options: (nextOptions ?? [])
+                        .map((opt) => (typeof opt === 'string' ? opt : (opt as {value?: unknown}).value))
+                        .filter((opt): opt is string => typeof opt === 'string' && opt.length > 0),
+                    })
+                  }
+                />
+
+                <SelectControl
+                  label={__('Výchozí hodnota', 'brilo-blocks')}
+                  value={attributes.defaultValue ?? ''}
+                  options={selectOptions}
+                  onChange={(defaultValue) => setAttributes({defaultValue: defaultValue ?? ''})}
+                />
+              </>
+            )}
+
+            {attributes.type === 'hidden' && (
+              <>
+                <TextControl
+                  label={__('Hodnota', 'brilo-blocks')}
+                  value={attributes.value ?? ''}
+                  onChange={(value) => setAttributes({value})}
+                  help={__('Hodnota, která bude odeslána s formulářem.', 'brilo-blocks')}
+                />
+                <TextControl
+                  label={__('Název html atributu', 'brilo-blocks')}
+                  value={attributes.name}
+                  help={__(
+                    'Použijte pouze bezpečné znaky: a-z, 0-9, pomlčka a podtržítko. Mezery a diakritika se automaticky odstraní.',
+                    'brilo-blocks',
+                  )}
+                  onChange={(name) => setAttributes({name: sanitizeHtmlName(name)})}
+                />
+              </>
+            )}
+
+            {attributes.type !== 'hidden' && (
+              <RangeControl
+                label={__('Počet sloupců', 'brilo-blocks')}
+                value={currentColumns}
+                min={MIN_COLUMNS}
+                max={MAX_COLUMNS}
+                onChange={(columns) =>
+                  setAttributes({columns: Math.max(MIN_COLUMNS, Math.min(MAX_COLUMNS, columns ?? FIELD_COLUMNS_DEFAULT))})
+                }
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-form-field__wrapper">
+            {attributes.type === 'hidden' ? (
+              <>
+                <strong>{__('Skryté pole', 'brilo-blocks')}</strong>
+                <div>
+                  {__('Hodnota', 'brilo-blocks')}: {attributes.value ?? ''}
+                </div>
+                <div>
+                  {__('Název', 'brilo-blocks')}: {attributes.name ?? ''}
+                </div>
+              </>
+            ) : (
+              <>
+                <strong>{attributes.label || __('Pole', 'brilo-blocks')}</strong>
+                <div>{attributes.type}</div>
+                <div className="i-form-field__columns-control">
+                  <Button
+                    size="small"
+                    variant="secondary"
+                    onClick={() => setAttributes({columns: Math.max(MIN_COLUMNS, currentColumns - 1)})}
+                    disabled={currentColumns <= MIN_COLUMNS}
+                    aria-label={__('Snížit počet sloupců', 'brilo-blocks')}
+                  >
+                    -
+                  </Button>
+
+                  <div className="i-form-field__columns-value">{`${currentColumns}/${MAX_COLUMNS}`}</div>
+
+                  <Button
+                    size="small"
+                    variant="secondary"
+                    onClick={() => setAttributes({columns: Math.min(MAX_COLUMNS, currentColumns + 1)})}
+                    disabled={currentColumns >= MAX_COLUMNS}
+                    aria-label={__('Zvýšit počet sloupců', 'brilo-blocks')}
+                  >
+                    +
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/form/form-field/editor.scss

@@ -0,0 +1,71 @@
+.i-form-field {
+  width: 100%;
+  margin-block: 0;
+
+  &.--cols-1 {
+    grid-column: span 1;
+  }
+  &.--cols-2 {
+    grid-column: span 2;
+  }
+  &.--cols-3 {
+    grid-column: span 3;
+  }
+  &.--cols-4 {
+    grid-column: span 4;
+  }
+  &.--cols-5 {
+    grid-column: span 5;
+  }
+  &.--cols-6 {
+    grid-column: span 6;
+  }
+  &.--cols-7 {
+    grid-column: span 7;
+  }
+  &.--cols-8 {
+    grid-column: span 8;
+  }
+  &.--cols-9 {
+    grid-column: span 9;
+  }
+  &.--cols-10 {
+    grid-column: span 10;
+  }
+  &.--cols-11 {
+    grid-column: span 11;
+  }
+  &.--cols-12 {
+    grid-column: span 12;
+  }
+
+  // Hidden fields span the full row — no column control
+  &.--type-hidden {
+    grid-column: span 12;
+  }
+
+  &.--type-hidden .i-form-field__wrapper {
+    background: #f6f7f7;
+    border-style: dotted;
+  }
+}
+
+.i-form-field__wrapper {
+  padding: 12px;
+  border: 1px dashed rgba(0, 0, 0, 0.25);
+  background: #fff;
+}
+
+.i-form-field__columns-control {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.i-form-field__columns-value {
+  flex: 1;
+  text-align: center;
+  font-weight: 600;
+}