@brilo/base-blocks 0.1.1 → 0.1.3

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

@@ -0,0 +1,80 @@
+@layer base {
+  .i-button {
+    --background: transparent;
+    --font-color: inherit;
+    --border-color: transparent;
+    --padding-y: 10px;
+    --padding-x: 20px;
+    --font-size: 14px;
+    --font-weight: 600;
+    --border-radius: 4px;
+
+    display: contents;
+
+    &.--variant-primary {
+      --background: #0073aa;
+      --font-color: #fff;
+      --border-color: #0073aa;
+
+      &.--outline {
+        --background: transparent;
+        --font-color: #0073aa;
+        --border-color: #0073aa;
+      }
+    }
+
+    &.--variant-secondary {
+      --background: #5a6e8b;
+      --font-color: #fff;
+      --border-color: #5a6e8b;
+
+      &.--outline {
+        --background: transparent;
+        --font-color: #5a6e8b;
+        --border-color: #5a6e8b;
+      }
+    }
+
+    &.--variant-neutral {
+      --background: #e2e8f0;
+      --font-color: #1a202c;
+      --border-color: transparent;
+
+      &.--outline {
+        --background: transparent;
+        --font-color: #1a202c;
+        --border-color: #1a202c;
+      }
+    }
+
+    &.--variant-ghost {
+      --background: transparent;
+      --font-color: #1a202c;
+      --border-color: transparent;
+    }
+
+    &.--size-sm {
+      --padding-y: 6px;
+      --padding-x: 14px;
+      --font-size: 12px;
+    }
+  }
+
+  .i-button__inner {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--padding-y) var(--padding-x);
+    border-radius: var(--border-radius);
+    background-color: var(--background);
+    color: var(--font-color);
+    border: 1px solid var(--border-color);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .i-button__label {
+    pointer-events: auto;
+  }
+}

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

@@ -0,0 +1,54 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {DEFAULT_FULL_WIDTH_OPTIONS, DEFAULT_SIZES, DEFAULT_VARIANTS} from './constants'
+import {createBasicButtonEdit} from './edit'
+import type {BasicButtonAttributes, BasicButtonOptions} from './types'
+
+export type {BasicButtonAttributes, BasicButtonOptions}
+
+export function createBasicButtonBlock<
+  TVariants extends OptionArray = typeof DEFAULT_VARIANTS,
+  TSizes extends OptionArray = typeof DEFAULT_SIZES,
+  TFullWidthOptions extends OptionArray = typeof DEFAULT_FULL_WIDTH_OPTIONS,
+>(
+  options: BasicButtonOptions<TVariants, TSizes, TFullWidthOptions>,
+): BlockConfiguration<BasicButtonAttributes<TVariants[number]['value'], TSizes[number]['value'], TFullWidthOptions[number]['value']>> {
+  const variants = options.variants ?? DEFAULT_VARIANTS
+  const sizes = options.sizes ?? DEFAULT_SIZES
+  const fullWidthOptions = options.fullWidthOptions ?? DEFAULT_FULL_WIDTH_OPTIONS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Tlačítko', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'common',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'button',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+      outline: {type: 'boolean', default: false},
+      fullWidth: {
+        type: 'string',
+        default: fullWidthOptions[0].value,
+        enum: fullWidthOptions.map((o) => o.value),
+      },
+      size: {
+        type: 'string',
+        default: sizes[0].value,
+        enum: sizes.map((s) => s.value),
+      },
+      url: {type: 'object', default: {src: '', blank: false}},
+    },
+    edit: createBasicButtonEdit(options as unknown as BasicButtonOptions),
+    save: () => null,
+  } as unknown as BlockConfiguration<
+    BasicButtonAttributes<TVariants[number]['value'], TSizes[number]['value'], TFullWidthOptions[number]['value']>
+  >
+}

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

@@ -0,0 +1,8 @@
+export type {BasicButtonAttributes, BasicButtonOptions} from './types'
+export {createBasicButtonBlock} from './factory'
+
+import type {BasicButtonOptions} from './types'
+
+export const basicButtonDefaults: BasicButtonOptions = {
+  name: 'brilo/basic-button',
+}

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

@@ -0,0 +1,29 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {DEFAULT_FULL_WIDTH_OPTIONS, DEFAULT_SIZES, DEFAULT_VARIANTS} from './constants'
+
+export type ButtonVariant = (typeof DEFAULT_VARIANTS)[number]['value']
+export type ButtonSize = (typeof DEFAULT_SIZES)[number]['value']
+export type ButtonFullWidth = (typeof DEFAULT_FULL_WIDTH_OPTIONS)[number]['value']
+
+export interface BasicButtonAttributes<
+  TVariant extends string = ButtonVariant,
+  TSize extends string = ButtonSize,
+  TFullWidth extends string = ButtonFullWidth,
+> extends Record<string, unknown> {
+  title: string
+  variant: TVariant
+  outline: boolean
+  fullWidth: TFullWidth
+  size: TSize
+  url: {src: string; blank: boolean}
+}
+
+export interface BasicButtonOptions<
+  TVariants extends OptionArray = typeof DEFAULT_VARIANTS,
+  TSizes extends OptionArray = typeof DEFAULT_SIZES,
+  TFullWidthOptions extends OptionArray = typeof DEFAULT_FULL_WIDTH_OPTIONS,
+> extends BriloBlockType {
+  variants?: TVariants
+  sizes?: TSizes
+  fullWidthOptions?: TFullWidthOptions
+}

package/src/blocks/core/basic-heading/constants.ts

@@ -0,0 +1 @@
+export {HEADING_LEVELS as DEFAULT_LEVELS, HEADING_STYLES as DEFAULT_STYLES} from '~/constants'

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

@@ -0,0 +1,76 @@
+import {BlockControls, InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  ToolbarButton,
+  ToolbarGroup,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
+import type {BasicHeadingAttributes, BasicHeadingOptions, HeadingStyle} from './types'
+
+export function createBasicHeadingEdit(options: BasicHeadingOptions) {
+  const LEVELS = options.levels ?? DEFAULT_LEVELS
+  const STYLES = options.styles ?? DEFAULT_STYLES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BasicHeadingAttributes
+    setAttributes: (a: Partial<BasicHeadingAttributes>) => void
+  }) {
+    const {title, level, style} = attributes
+    const blockProps = useBlockProps({
+      className: clsx(options.blockClassName ?? 'i-heading', `--heading-style-${style}`),
+    })
+
+    return (
+      <>
+        <BlockControls>
+          <ToolbarGroup>
+            {LEVELS.map((l) => (
+              <ToolbarButton key={l} isActive={level === l} onClick={() => setAttributes({level: l as BasicHeadingAttributes['level']})}>
+                {`H${l}`}
+              </ToolbarButton>
+            ))}
+          </ToolbarGroup>
+        </BlockControls>
+        <InspectorControls>
+          <PanelBody title={__('Nadpis', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Úroveň', 'brilo-blocks')}
+              value={String(level)}
+              onChange={(value) => setAttributes({level: Number(value) as BasicHeadingAttributes['level']})}
+              isBlock
+            >
+              {LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl', 'brilo-blocks')}
+              value={style}
+              onChange={(value) => setAttributes({style: value as HeadingStyle})}
+              isBlock
+            >
+              {STYLES.map((s) => (
+                <ToggleGroupControlOption key={s} value={s} label={s.toUpperCase()} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+        <RichText
+          {...blockProps}
+          tagName={`h${level}` as 'h1' | 'h2' | 'h3' | 'h4'}
+          value={title}
+          onChange={(value) => setAttributes({title: value})}
+          placeholder={__('Nadpis...', 'brilo-blocks')}
+          allowedFormats={['core/bold', 'core/italic']}
+        />
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,8 @@
+@layer base {
+  .i-heading {
+    font-weight: 700;
+    font-size: var(--heading-size, 24px);
+    margin: 0;
+    padding: 4px;
+  }
+}

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

@@ -0,0 +1,40 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {NumberArray, StringArray} from '~/types'
+import {DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
+import {createBasicHeadingEdit} from './edit'
+import type {BasicHeadingAttributes, BasicHeadingOptions} from './types'
+
+export type {BasicHeadingAttributes, BasicHeadingOptions}
+
+export function createBasicHeadingBlock<
+  TLevels extends NumberArray = typeof DEFAULT_LEVELS,
+  TStyles extends StringArray = typeof DEFAULT_STYLES,
+>(options: BasicHeadingOptions<TLevels, TStyles>): BlockConfiguration<BasicHeadingAttributes<TLevels[number], TStyles[number]>> {
+  const levels = options.levels ?? DEFAULT_LEVELS
+  const styles = options.styles ?? DEFAULT_STYLES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Nadpis', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'text',
+    supports: {html: false, customClassName: false},
+    icon: options.icon ?? 'heading',
+    attributes: {
+      title: {type: 'string', default: ''},
+      level: {
+        type: 'number',
+        default: levels[1] ?? levels[0],
+        enum: [...levels],
+      },
+      style: {
+        type: 'string',
+        default: styles[1] ?? styles[0],
+        enum: [...styles],
+      },
+    },
+    edit: createBasicHeadingEdit(options as unknown as BasicHeadingOptions),
+    save: () => null,
+  } as unknown as BlockConfiguration<BasicHeadingAttributes<TLevels[number], TStyles[number]>>
+}

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

@@ -0,0 +1,8 @@
+export type {BasicHeadingAttributes, BasicHeadingOptions} from './types'
+export {createBasicHeadingBlock} from './factory'
+
+import type {BasicHeadingOptions} from './types'
+
+export const basicHeadingDefaults: BasicHeadingOptions = {
+  name: 'brilo/basic-heading',
+}

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

@@ -0,0 +1,20 @@
+import type {BriloBlockType, NumberArray, StringArray} from '~/types'
+import type {DEFAULT_LEVELS, DEFAULT_STYLES} from './constants'
+
+export type HeadingLevel = (typeof DEFAULT_LEVELS)[number]
+export type HeadingStyle = (typeof DEFAULT_STYLES)[number]
+
+export interface BasicHeadingAttributes<TLevel extends number = HeadingLevel, TStyle extends string = HeadingStyle>
+  extends Record<string, unknown> {
+  title: string
+  level: TLevel
+  style: TStyle
+}
+
+export interface BasicHeadingOptions<
+  TLevels extends NumberArray = typeof DEFAULT_LEVELS,
+  TStyles extends StringArray = typeof DEFAULT_STYLES,
+> extends BriloBlockType {
+  levels?: TLevels
+  styles?: TStyles
+}

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>
+      </>
+    )
+  }
+}