@brilo/base-blocks 0.1.0 → 0.1.1

package/src/blocks/groups/text-and-media-group/editor.scss

@@ -1,123 +0,0 @@
-@layer base {
-  .g-text-and-media {
-    padding: 8px;
-
-    &.--media-right .g-text-and-media__grid.--grid-style-2-1 {
-      grid-template-columns: 2fr 1fr;
-    }
-    &.--media-left .g-text-and-media__grid.--grid-style-2-1 {
-      grid-template-columns: 1fr 2fr;
-    }
-
-    &.--ratio-3\:2 {
-      --ratio: 3/2;
-    }
-    &.--ratio-4\:3 {
-      --ratio: 4/3;
-    }
-    &.--ratio-16\:9 {
-      --ratio: 16/9;
-    }
-    &.--ratio-1\:1 {
-      --ratio: 1/1;
-    }
-    &.--ratio-2\:1 {
-      --ratio: 2/1;
-    }
-    &.--ratio-3\:4 {
-      --ratio: 3/4;
-    }
-  }
-
-  .g-text-and-media__grid {
-    --grid-gap: 24px;
-    --grid-min-col-size: 240px;
-    align-items: center;
-  }
-
-  .g-text-and-media__media {
-    background: #f5f5f5;
-    border-radius: 4px;
-    min-height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-
-    .c-image-picker-body {
-      width: 100%;
-    }
-
-    .c-image-picker-body__preview img {
-      aspect-ratio: var(--ratio);
-      object-fit: cover;
-    }
-
-    .c-image-picker-body__placeholder {
-      min-height: 200px;
-    }
-  }
-
-  .g-text-and-media__text {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .g-text-and-media__overline {
-    display: block;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #888;
-  }
-
-  .g-text-and-media__heading {
-    margin: 0;
-    font-weight: 700;
-    font-size: var(--heading-size, 24px);
-  }
-
-  .g-text-and-media__inner-blocks {
-    margin-top: 8px;
-    min-height: 40px;
-  }
-
-  .g-text-and-media__chip {
-    position: absolute;
-    padding: 4px 10px;
-    border-radius: 20px;
-    font-size: 11px;
-    font-weight: 600;
-    background: #0073aa;
-    color: #fff;
-    white-space: nowrap;
-    pointer-events: none;
-
-    &.--top-left {
-      top: 8px;
-      left: 8px;
-    }
-    &.--top-right {
-      top: 8px;
-      right: 8px;
-    }
-    &.--bottom-left {
-      bottom: 8px;
-      left: 8px;
-    }
-    &.--bottom-right {
-      bottom: 40px;
-      right: 8px;
-    }
-
-    &.--secondary {
-      background: #555d6e;
-    }
-    &.--neutral {
-      background: #e0e0e0;
-      color: #333;
-    }
-  }
-}

package/src/blocks/groups/text-and-media-group/factory.tsx

@@ -1,100 +0,0 @@
-import {InnerBlocks} from '@wordpress/block-editor'
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import type {OptionArray} from '~/types'
-import {
-  DEFAULT_CHIP_VARIANTS,
-  DEFAULT_CONTENT_SIZES,
-  DEFAULT_GRID_STYLES,
-  DEFAULT_HEADING_STYLES,
-  DEFAULT_MEDIA_POSITIONS,
-  DEFAULT_RATIOS,
-  HEADING_LEVELS,
-} from './constants'
-import {createTextAndMediaGroupEdit} from './edit'
-import {icon as defaultIcon} from './icon'
-import type {TextAndMediaGroupAttributes, TextAndMediaGroupOptions} from './types'
-
-export type {TextAndMediaGroupAttributes, TextAndMediaGroupOptions}
-
-export function createTextAndMediaGroupBlock<
-  TRatios extends OptionArray = typeof DEFAULT_RATIOS,
-  TMediaPositions extends OptionArray = typeof DEFAULT_MEDIA_POSITIONS,
-  TGridStyles extends OptionArray = typeof DEFAULT_GRID_STYLES,
-  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
-  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
-  TChipVariants extends OptionArray = typeof DEFAULT_CHIP_VARIANTS,
->(
-  options: TextAndMediaGroupOptions<TRatios, TMediaPositions, TGridStyles, THeadingStyles, TContentSizes, TChipVariants>,
-): BlockConfiguration<
-  TextAndMediaGroupAttributes<
-    TRatios[number]['value'],
-    TMediaPositions[number]['value'],
-    TGridStyles[number]['value'],
-    THeadingStyles[number]['value'],
-    TContentSizes[number]['value'],
-    TChipVariants[number]['value']
-  >
-> {
-  const ratios = options.ratios ?? DEFAULT_RATIOS
-  const mediaPositions = options.mediaPositions ?? DEFAULT_MEDIA_POSITIONS
-  const gridStyles = options.gridStyles ?? DEFAULT_GRID_STYLES
-  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
-  const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
-  const chipVariants = options.chipVariants ?? DEFAULT_CHIP_VARIANTS
-
-  return {
-    name: options.name,
-    title: options.title ?? __('Text a média', '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: {
-      header: {
-        type: 'object',
-        default: {
-          heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1]?.value ?? headingStyles[0].value},
-          overline: {title: ''},
-        },
-      },
-      mediaPosition: {
-        type: 'string',
-        default: mediaPositions[1]?.value ?? mediaPositions[0].value,
-        enum: mediaPositions.map((p) => p.value),
-      },
-      img: {
-        type: 'object',
-        default: {
-          id: 0,
-          alt: '',
-          video: {src: ''},
-          chip: {title: '', position: 'bottom-right', variant: chipVariants[0].value},
-        },
-      },
-      ratio: {
-        type: 'string',
-        default: ratios[2]?.value ?? ratios[0].value,
-        enum: ratios.map((r) => r.value),
-      },
-      gridStyle: {
-        type: 'string',
-        default: gridStyles[0].value,
-        enum: gridStyles.map((g) => g.value),
-      },
-      content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
-    },
-    edit: createTextAndMediaGroupEdit(options as unknown as TextAndMediaGroupOptions),
-    save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<
-    TextAndMediaGroupAttributes<
-      TRatios[number]['value'],
-      TMediaPositions[number]['value'],
-      TGridStyles[number]['value'],
-      THeadingStyles[number]['value'],
-      TContentSizes[number]['value'],
-      TChipVariants[number]['value']
-    >
-  >
-}

package/src/blocks/groups/text-and-media-group/icon.tsx

@@ -1,37 +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>Text and Media Group</title>
-    <g clipPath="url(#clip0_24_1038)">
-      <rect x="0.5" y="0.5" width="10" height="8" stroke="black" fill="none" />
-      <path fillRule="evenodd" clipRule="evenodd" d="M4.5 4L2 7L7 7L4.5 4Z" fill="black" />
-      <path d="M9 3C9 3.55228 8.55228 4 8 4C7.44772 4 7 3.55228 7 3C7 2.44772 7.44772 2 8 2C8.55228 2 9 2.44772 9 3Z" fill="black" />
-      <path d="M13 1H18V2H13V1Z" fill="black" />
-      <path d="M13 3H20V4H13V3Z" fill="black" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M14.5 5C13.6716 5 13 5.67157 13 6.5C13 7.32843 13.6716 8 14.5 8H18.5C19.3284 8 20 7.32843 20 6.5C20 5.67157 19.3284 5 18.5 5H14.5ZM18 6H15V7H18V6Z"
-        fill="#357AB5"
-      />
-      <rect x="9.5" y="11.5" width="10" height="8" stroke="black" fill="none" />
-      <path fillRule="evenodd" clipRule="evenodd" d="M13.5 15L11 18L16 18L13.5 15Z" fill="black" />
-      <path
-        d="M18 14C18 14.5523 17.5523 15 17 15C16.4477 15 16 14.5523 16 14C16 13.4477 16.4477 13 17 13C17.5523 13 18 13.4477 18 14Z"
-        fill="black"
-      />
-      <path d="M0 12H5V13H0V12Z" fill="black" />
-      <path d="M0 14H7V15H0V14Z" fill="black" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.5 16C0.671573 16 0 16.6716 0 17.5C0 18.3284 0.671573 19 1.5 19H5.5C6.32843 19 7 18.3284 7 17.5C7 16.6716 6.32843 16 5.5 16H1.5ZM5 17H2V18H5V17Z"
-        fill="#357AB5"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_24_1038">
-        <rect width="20" height="20" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-)

package/src/blocks/groups/text-and-media-group/index.ts

@@ -1,18 +0,0 @@
-export type {TextAndMediaGroupAttributes, TextAndMediaGroupOptions} from './types'
-export {createTextAndMediaGroupBlock} from './factory'
-
-import type {TextAndMediaGroupOptions} from './types'
-
-export const textAndMediaGroupDefaults: TextAndMediaGroupOptions = {
-  name: 'brilo/text-and-media-group',
-  parent: ['brilo/base-section'],
-  allowedBlocks: [
-    'brilo/basic-button',
-    'brilo/basic-heading',
-    'brilo/basic-overline',
-    'brilo/button-group',
-    'core/heading',
-    'core/list',
-    'core/paragraph',
-  ],
-}

package/src/blocks/groups/text-and-media-group/types.ts

@@ -1,60 +0,0 @@
-import type {BriloBlockType, OptionArray} from '~/types'
-import type {
-  CHIP_POSITIONS,
-  DEFAULT_CHIP_VARIANTS,
-  DEFAULT_CONTENT_SIZES,
-  DEFAULT_GRID_STYLES,
-  DEFAULT_HEADING_STYLES,
-  DEFAULT_MEDIA_POSITIONS,
-  DEFAULT_RATIOS,
-  HEADING_LEVELS,
-} from './constants'
-
-export type MediaPositions = (typeof DEFAULT_MEDIA_POSITIONS)[number]['value']
-export type Ratios = (typeof DEFAULT_RATIOS)[number]['value']
-export type GridStyles = (typeof DEFAULT_GRID_STYLES)[number]['value']
-export type HeadingStyles = (typeof DEFAULT_HEADING_STYLES)[number]['value']
-export type HeadingLevels = (typeof HEADING_LEVELS)[number]
-export type ContentSizes = (typeof DEFAULT_CONTENT_SIZES)[number]['value']
-export type ChipPositions = (typeof CHIP_POSITIONS)[number]['value']
-export type ChipVariants = (typeof DEFAULT_CHIP_VARIANTS)[number]['value']
-
-export interface TextAndMediaGroupAttributes<
-  TRatio extends string = Ratios,
-  TMediaPosition extends string = MediaPositions,
-  TGridStyle extends string = GridStyles,
-  THeadingStyle extends string = HeadingStyles,
-  TContentSize extends string = ContentSizes,
-  TChipVariant extends string = ChipVariants,
-> extends Record<string, unknown> {
-  header: {
-    heading: {title: string; level: HeadingLevels; style: THeadingStyle}
-    overline: {title: string}
-  }
-  mediaPosition: TMediaPosition
-  img: {
-    id: number
-    alt: string
-    video: {src: string}
-    chip: {title: string; position: ChipPositions; variant: TChipVariant}
-  }
-  ratio: TRatio
-  gridStyle: TGridStyle
-  content: {size: TContentSize}
-}
-
-export interface TextAndMediaGroupOptions<
-  TRatios extends OptionArray = typeof DEFAULT_RATIOS,
-  TMediaPositions extends OptionArray = typeof DEFAULT_MEDIA_POSITIONS,
-  TGridStyles extends OptionArray = typeof DEFAULT_GRID_STYLES,
-  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
-  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
-  TChipVariants extends OptionArray = typeof DEFAULT_CHIP_VARIANTS,
-> extends BriloBlockType {
-  ratios?: TRatios
-  mediaPositions?: TMediaPositions
-  gridStyles?: TGridStyles
-  headingStyles?: THeadingStyles
-  contentSizes?: TContentSizes
-  chipVariants?: TChipVariants
-}

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

@@ -1,23 +0,0 @@
-import {__} from '@wordpress/i18n'
-
-export const VARIANTS = [
-  {
-    value: 'default',
-    label: __('Výchozí', 'brilo-blocks'),
-  },
-  {
-    value: 'full-width',
-    label: __('Na plnou šířku', 'brilo-blocks'),
-  },
-] as const
-
-export const EFFECTS = [
-  {
-    value: 'creative',
-    label: __('Slide', 'brilo-blocks'),
-  },
-  {
-    value: 'fade',
-    label: __('Fade', 'brilo-blocks'),
-  },
-] as const

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

@@ -1,85 +0,0 @@
-import {InspectorControls} from '@wordpress/block-editor'
-import {
-  PanelBody,
-  SelectControl,
-  ToggleControl,
-  __experimentalNumberControl as NumberControl,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
-import clsx from 'clsx'
-import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {EFFECTS, VARIANTS} from './constants'
-import type {Effect, HeroGroupAttributes, HeroGroupOptions, Variant} from './types'
-
-export function createHeroGroupEdit(options: HeroGroupOptions) {
-  const VARIANTS_OPTIONS = options.variants ?? VARIANTS
-  const EFFECTS_OPTIONS = options.effects ?? EFFECTS
-
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: HeroGroupAttributes
-    setAttributes: (a: Partial<HeroGroupAttributes>) => void
-  }) {
-    const {variant, effect, autoplay, autoplaySpeed, pauseOnHover} = attributes
-
-    const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(options.blockClassName ?? 'g-hero wp-block-section', `--variant-${variant}`, `--effect-${effect}`),
-      containerClassName: [options.containerClassName ?? 'g-hero__container'],
-      allowedBlocks: options.allowedBlocks,
-      orientation: 'horizontal',
-      template: options.template,
-      layout: {type: 'default'},
-    })
-
-    return (
-      <>
-        <InspectorControls>
-          <PanelBody title={__('Rozložení a efekty', 'brilo-blocks')}>
-            <ToggleGroupControl
-              isBlock
-              label={__('Varianta', 'brilo-blocks')}
-              value={variant}
-              onChange={(v) => setAttributes({variant: v as Variant})}
-            >
-              {VARIANTS_OPTIONS.map((v) => (
-                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
-              ))}
-            </ToggleGroupControl>
-            <SelectControl
-              label={__('Efekt přechodu', 'brilo-blocks')}
-              value={effect}
-              options={EFFECTS_OPTIONS as any}
-              onChange={(v) => setAttributes({effect: v as Effect})}
-            />
-          </PanelBody>
-          <PanelBody title={__('Nastavení slideru', 'brilo-blocks')}>
-            <ToggleControl
-              label={__('Automatické přehrávání', 'brilo-blocks')}
-              checked={autoplay}
-              onChange={(v) => setAttributes({autoplay: v})}
-            />
-            {autoplay && (
-              <NumberControl
-                label={__('Rychlost přehrávání (ms)', 'brilo-blocks')}
-                value={autoplaySpeed}
-                onChange={(v) => setAttributes({autoplaySpeed: parseInt(v ?? '3000')})}
-              />
-            )}
-            <ToggleControl
-              label={__('Pozastavit při najetí myší', 'brilo-blocks')}
-              checked={pauseOnHover}
-              onChange={(v) => setAttributes({pauseOnHover: v})}
-            />
-          </PanelBody>
-        </InspectorControls>
-        <div {...blockProps}>
-          <div {...innerBlocksProps} />
-        </div>
-      </>
-    )
-  }
-}

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

@@ -1,45 +0,0 @@
-import {InnerBlocks} from '@wordpress/block-editor'
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import type {OptionArray} from '~/types'
-import {EFFECTS, VARIANTS} from './constants'
-import {createHeroGroupEdit} from './edit'
-import type {HeroGroupAttributes, HeroGroupOptions} from './types'
-import {icon} from './icon'
-
-export type {HeroGroupAttributes, HeroGroupOptions}
-
-export function createHeroGroupBlock<TVariants extends OptionArray = typeof VARIANTS, TEffects extends OptionArray = typeof EFFECTS>(
-  options: HeroGroupOptions<TVariants, TEffects>,
-): BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']>> {
-  const variants = options.variants ?? VARIANTS
-  const effects = options.effects ?? EFFECTS
-
-  return {
-    name: options.name,
-    title: options.title ?? __('Hero Slider', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? icon,
-    supports: {html: false, customClassName: false},
-    attributes: {
-      items: {type: 'array', default: []},
-      variant: {
-        type: 'string',
-        default: variants[0].value,
-        enum: variants.map((v) => v.value),
-      },
-      autoplay: {type: 'boolean', default: false},
-      autoplaySpeed: {type: 'number', default: 3000},
-      pauseOnHover: {type: 'boolean', default: true},
-      effect: {
-        type: 'string',
-        default: effects[0].value,
-        enum: effects.map((e) => e.value),
-      },
-    },
-    edit: createHeroGroupEdit(options as unknown as HeroGroupOptions),
-    save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<HeroGroupAttributes<TVariants[number]['value'], TEffects[number]['value']>>
-}

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

@@ -1,28 +0,0 @@
-export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4 4H8V5H4V4Z" fill="black" />
-    <path d="M7 19H9V20H7V19Z" fill="black" />
-    <path d="M10 19H11V20H10V19Z" fill="black" />
-    <path d="M12 19H13V20H12V19Z" fill="black" />
-    <path d="M9 4H16V5H9V4Z" fill="black" />
-    <path
-      d="M12 2C12 1.44772 12.4477 1 13 1H14C14.5523 1 15 1.44772 15 2C15 2.55228 14.5523 3 14 3H13C12.4477 3 12 2.55228 12 2Z"
-      fill="black"
-    />
-    <path d="M5 2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3H6C5.44772 3 5 2.55228 5 2Z" fill="black" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 11L6 15L13 15L9.5 11Z" fill="black" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M1 10L1 7H19V10H18V8H2V10H1ZM19 15V18H1L1 15H2V17H18V15H19Z" fill="black" />
-    <path
-      d="M14 11C14 11.5523 13.5523 12 13 12C12.4477 12 12 11.5523 12 11C12 10.4477 12.4477 10 13 10C13.5523 10 14 10.4477 14 11Z"
-      fill="black"
-    />
-    <path
-      d="M0 12.5C0 11.6716 0.671573 11 1.5 11C2.32843 11 3 11.6716 3 12.5C3 13.3284 2.32843 14 1.5 14C0.671573 14 0 13.3284 0 12.5Z"
-      fill="#357AB5"
-    />
-    <path
-      d="M17 12.5C17 11.6716 17.6716 11 18.5 11C19.3284 11 20 11.6716 20 12.5C20 13.3284 19.3284 14 18.5 14C17.6716 14 17 13.3284 17 12.5Z"
-      fill="#357AB5"
-    />
-  </svg>
-)

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

@@ -1,11 +0,0 @@
-export type {HeroGroupAttributes, HeroGroupOptions} from './types'
-export {createHeroGroupBlock} from './factory'
-
-import type {HeroGroupOptions} from './types'
-
-export const heroGroupDefaults: HeroGroupOptions = {
-  name: 'brilo/hero-group',
-  parent: ['brilo/base-section'],
-  allowedBlocks: ['brilo/hero-item'],
-  template: [['brilo/hero-item', {}]],
-}

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

@@ -1,22 +0,0 @@
-import type {BriloBlockType, OptionArray} from '~/types'
-import type {HeroSliderItem} from '../hero-item/types'
-import type {EFFECTS, VARIANTS} from './constants'
-
-export type Variant = (typeof VARIANTS)[number]['value']
-export type Effect = (typeof EFFECTS)[number]['value']
-
-export interface HeroGroupAttributes<TVariant extends string = Variant, TEffect extends string = Effect> extends Record<string, unknown> {
-  items: HeroSliderItem[]
-  variant: TVariant
-  autoplay: boolean
-  autoplaySpeed: number
-  pauseOnHover: boolean
-  effect: TEffect
-}
-
-export interface HeroGroupOptions<TVariants extends OptionArray = typeof VARIANTS, TEffects extends OptionArray = typeof EFFECTS>
-  extends BriloBlockType {
-  allowedBlocks: string[]
-  variants?: TVariants
-  effects?: TEffects
-}

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

@@ -1,15 +0,0 @@
-import {__} from '@wordpress/i18n'
-
-export const CONTENT_POSITIONS = [
-  {value: 'top left', label: __('Vlevo nahoře', 'brilo-blocks')},
-  {value: 'top center', label: __('Uprostřed nahoře', 'brilo-blocks')},
-  {value: 'top right', label: __('Vpravo nahoře', 'brilo-blocks')},
-  {value: 'center left', label: __('Vlevo uprostřed', 'brilo-blocks')},
-  {value: 'center center', label: __('Uprostřed', 'brilo-blocks')},
-  {value: 'center right', label: __('Vpravo uprostřed', 'brilo-blocks')},
-  {value: 'bottom left', label: __('Vlevo dole', 'brilo-blocks')},
-  {value: 'bottom center', label: __('Uprostřed dole', 'brilo-blocks')},
-  {value: 'bottom right', label: __('Vpravo dole', 'brilo-blocks')},
-] as const
-
-export const HEADING_LEVELS = [1, 2, 3] as const