@brilo/base-blocks 0.1.0 → 0.1.1

package/src/globals.scss

@@ -1,237 +0,0 @@
-// WordPress overrides — outside layer to beat unlayered WP styles
-html .wp-block {
-  max-width: 1200px;
-}
-
-@layer base {
-  .text-center {
-    text-align: center;
-  }
-
-  .wp-block-section {
-    --border-color: #ddd;
-
-    padding: 8px;
-    border: 1px solid var(--border-color);
-    cursor: pointer;
-    transition: border 0.3s ease;
-    max-width: 1200px;
-
-    &:hover {
-      --border-color: #0073aa;
-    }
-
-    &.--heading-style-h1 {
-      --heading-size: 32px;
-    }
-    &.--heading-style-h2 {
-      --heading-size: 28px;
-    }
-    &.--heading-style-h3 {
-      --heading-size: 24px;
-    }
-    &.--heading-style-h4 {
-      --heading-size: 20px;
-    }
-    &.--heading-style-h5 {
-      --heading-size: 18px;
-    }
-
-    &.--typo-size-sm {
-      --typo-size: 14px;
-    }
-    &.--typo-size-md {
-      --typo-size: 16px;
-    }
-    &.--typo-size-lg {
-      --typo-size: 18px;
-    }
-    &.--typo-size-xl {
-      --typo-size: 20px;
-    }
-    &.--typo-size-xxl {
-      --typo-size: 24px;
-    }
-
-    .wp-block-section__title {
-      font-size: var(--heading-size);
-    }
-    .wp-block-section__content {
-      font-size: var(--typo-size);
-    }
-  }
-
-  .wp-block-inner {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 12px;
-    border: 1px solid #eee;
-    border-radius: 4px;
-  }
-
-  .wp-block-inner-content {
-    --border-color: #ddd;
-
-    min-height: 64px;
-    margin-bottom: 16px;
-    padding: 8px;
-    border: 1px dashed var(--border-color);
-  }
-
-  .u-grid-responsive-blocks-list {
-    --grid-max-col-count: 2;
-    --grid-min-col-size: 150px;
-    --grid-gap: 1rem;
-    --grid-col-size-calc: calc((100% - var(--grid-gap) * var(--grid-max-col-count)) / var(--grid-max-col-count));
-    --grid-col-min-size-calc: min(100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)));
-
-    display: grid;
-    gap: var(--grid-gap);
-    grid-template-columns: repeat(auto-fill, minmax(var(--grid-col-min-size-calc), 1fr));
-
-    &.--cols-2 {
-      --grid-max-col-count: 2;
-    }
-    &.--cols-3 {
-      --grid-max-col-count: 3;
-    }
-    &.--cols-4 {
-      --grid-max-col-count: 4;
-    }
-    &.--cols-5 {
-      --grid-max-col-count: 5;
-    }
-    &.--cols-6 {
-      --grid-max-col-count: 6;
-    }
-    &.--cols-8 {
-      --grid-max-col-count: 8;
-    }
-    &.--cols-10 {
-      --grid-max-col-count: 10;
-    }
-    &.--cols-12 {
-      --grid-max-col-count: 12;
-    }
-  }
-
-  .u-grid-responsive {
-    --grid-max-col-count: 2;
-    --grid-min-col-size: 150px;
-    --grid-gap: 0.5rem;
-    --grid-col-size-calc: calc((100% - var(--grid-gap) * var(--grid-max-col-count)) / var(--grid-max-col-count));
-    --grid-col-min-size-calc: min(100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)));
-
-    display: grid;
-    gap: var(--grid-gap);
-    grid-template-columns: repeat(auto-fill, minmax(var(--grid-col-min-size-calc), 1fr));
-
-    &.--col-2 {
-      --grid-max-col-count: 2;
-    }
-    &.--col-3 {
-      --grid-max-col-count: 3;
-    }
-    &.--col-4 {
-      --grid-max-col-count: 4;
-    }
-    &.--col-5 {
-      --grid-max-col-count: 5;
-    }
-    &.--col-6 {
-      --grid-max-col-count: 6;
-    }
-    &.--col-12 {
-      --grid-max-col-count: 12;
-    }
-
-    &.--max-col-size-200px {
-      --grid-min-col-size: 200px;
-    }
-    &.--max-col-size-400px {
-      --grid-min-col-size: 400px;
-    }
-  }
-
-  .u-text-editable {
-    --border-color: #ccc;
-
-    border: 1px solid var(--border-color);
-    padding-inline: 4px;
-
-    &:focus {
-      --border-color: #0073aa;
-    }
-  }
-
-  .text-sm {
-    font-size: 14px;
-  }
-  .flex {
-    display: flex;
-  }
-  .column {
-    flex-direction: column;
-  }
-  .gap-1 {
-    gap: 4px;
-  }
-  .gap-2 {
-    gap: 8px;
-  }
-  .gap-3 {
-    gap: 16px;
-  }
-  .gap-4 {
-    gap: 24px;
-  }
-  .gap-5 {
-    gap: 32px;
-  }
-  .gap-6 {
-    gap: 40px;
-  }
-  .gap-7 {
-    gap: 48px;
-  }
-  .gap-8 {
-    gap: 64px;
-  }
-  .p-1 {
-    padding: 4px;
-  }
-  .p-2 {
-    padding: 8px;
-  }
-  .p-3 {
-    padding: 16px;
-  }
-  .cursor-pointer {
-    cursor: pointer;
-  }
-  .items-end {
-    align-items: end;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .justify-end {
-    justify-content: end;
-  }
-  .mt-4 {
-    margin-top: 16px;
-  }
-  .mb-4 {
-    margin-bottom: 16px;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .grow {
-    flex-grow: 1;
-  }
-}

package/src/hooks/useGroupBlock.ts

@@ -1,53 +0,0 @@
-import {useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
-import clsx, {type ClassValue} from 'clsx'
-import type {ComponentType, CSSProperties} from 'react'
-
-type BlockTemplate = [string, Record<string, unknown>][]
-type StyleWithVars = CSSProperties & {[key: `--${string}`]: string | number}
-
-export interface GroupBlockConfig {
-  blockClassName: ClassValue | ClassValue[]
-  containerClassName: ClassValue | ClassValue[]
-  containerStyle?: StyleWithVars
-  allowedBlocks?: string[]
-  template?: BlockTemplate
-  templateLock?: 'all' | 'insert' | false
-  orientation?: 'horizontal' | 'vertical'
-  layout?: {type: string; columnCount?: number; minimumColumnWidth?: string}
-  renderAppender?: ComponentType
-}
-
-type GroupBlockProps = Record<string, unknown>
-
-interface GroupBlockResult {
-  blockProps: GroupBlockProps
-  innerBlocksProps: GroupBlockProps
-}
-
-export function useGroupBlock({
-  blockClassName,
-  containerClassName,
-  containerStyle,
-  allowedBlocks,
-  template,
-  templateLock,
-  orientation,
-  layout,
-  renderAppender,
-}: GroupBlockConfig): GroupBlockResult {
-  const blockProps = useBlockProps({className: clsx(blockClassName)})
-
-  const innerBlocksProps = useInnerBlocksProps(
-    {
-      className: clsx(containerClassName),
-      ...(containerStyle && {style: containerStyle}),
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    {allowedBlocks, template, templateLock, orientation, layout, renderAppender} as any,
-  )
-
-  return {
-    blockProps: blockProps as unknown as GroupBlockProps,
-    innerBlocksProps: innerBlocksProps as unknown as GroupBlockProps,
-  }
-}

package/src/index.ts

@@ -1,122 +0,0 @@
-export type {
-  ContactColumns,
-  ContactGroupAttributes,
-  ContactGroupOptions,
-} from './blocks/contact/contact-group'
-export {
-  CONTACT_COLUMNS,
-  CONTACT_COLUMNS_CONTEXT,
-  contactGroupDefaults,
-  createContactGroupBlock,
-} from './blocks/contact/contact-group'
-export type {
-  ContactIconSize,
-  ContactIconSizeVariant,
-  ContactItemAttributes,
-  ContactItemOptions,
-} from './blocks/contact/contact-item'
-export {
-  CONTACT_ICON_SIZE_RANGE,
-  CONTACT_ICON_SIZES,
-  CONTACT_ICON_TYPES,
-  contactItemDefaults,
-  createContactItemBlock,
-} from './blocks/contact/contact-item'
-export type {FaqItemAttributes, FaqItemOptions} from './blocks/faq/faq-item'
-export {createFaqItemBlock, faqItemDefaults} from './blocks/faq/faq-item'
-export type {FaqGroupAttributes, FaqGroupOptions} from './blocks/faq/faq-group'
-export {createFaqGroupBlock, faqGroupDefaults} from './blocks/faq/faq-group'
-export type {BasicButtonAttributes, BasicButtonOptions} from './blocks/core/basic-button'
-export {basicButtonDefaults, createBasicButtonBlock} from './blocks/core/basic-button'
-export type {BasicHeadingAttributes, BasicHeadingOptions} from './blocks/core/basic-heading'
-export {basicHeadingDefaults, createBasicHeadingBlock} from './blocks/core/basic-heading'
-export type {BasicOverlineAttributes, BasicOverlineOptions} from './blocks/core/basic-overline'
-export {basicOverlineDefaults, createBasicOverlineBlock} from './blocks/core/basic-overline'
-export type {HeroItemAttributes, HeroItemOptions} from './blocks/hero/hero-item'
-export {createHeroItemBlock, heroItemDefaults} from './blocks/hero/hero-item'
-export type {HeroGroupAttributes, HeroGroupOptions} from './blocks/hero/hero-group'
-export {createHeroGroupBlock, heroGroupDefaults} from './blocks/hero/hero-group'
-export type {MapGroupAttributes, MapGroupOptions} from './blocks/map/map-group'
-export {createMapGroupBlock, mapGroupDefaults} from './blocks/map/map-group'
-export type {BasicHeaderGroupAttributes, BasicHeaderGroupOptions} from './blocks/groups/basic-header-group'
-export {basicHeaderGroupDefaults, createBasicHeaderGroupBlock} from './blocks/groups/basic-header-group'
-export type {ButtonGroupAttributes, ButtonGroupOptions} from './blocks/groups/button-group'
-export {buttonGroupDefaults, createButtonGroupBlock} from './blocks/groups/button-group'
-export type {BannerGroupAttributes, BannerGroupOptions} from './blocks/groups/banner-group'
-export {createBannerGroupBlock, bannerGroupDefaults} from './blocks/groups/banner-group'
-export type {TextAndMediaGroupAttributes, TextAndMediaGroupOptions} from './blocks/groups/text-and-media-group'
-export {createTextAndMediaGroupBlock, textAndMediaGroupDefaults} from './blocks/groups/text-and-media-group'
-export type {TextAndFormGroupAttributes, TextAndFormGroupOptions} from './blocks/text-and-form/text-and-form-group'
-export {createTextAndFormGroupBlock, textAndFormGroupDefaults} from './blocks/text-and-form/text-and-form-group'
-export type {TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions} from './blocks/text-and-form/text-and-form-text-column'
-export {createTextAndFormTextColumnBlock, textAndFormTextColumnDefaults} from './blocks/text-and-form/text-and-form-text-column'
-export type {UspGroupAttributes, UspGroupOptions} from './blocks/usp/usp-group'
-export {createUspGroupBlock, uspGroupDefaults} from './blocks/usp/usp-group'
-export type {UspItemAttributes, UspItemOptions} from './blocks/usp/usp-item'
-export {createUspItemBlock, uspItemDefaults} from './blocks/usp/usp-item'
-export type {TestimonialGroupAttributes} from './blocks/testimonial/testimonial-group'
-export {createTestimonialGroupBlock, testimonialGroupDefaults} from './blocks/testimonial/testimonial-group'
-export type {TestimonialItemAttributes} from './blocks/testimonial/testimonial-item'
-export {createTestimonialItemBlock, testimonialItemDefaults} from './blocks/testimonial/testimonial-item'
-export type {CompareGroupAttributes, CompareGroupOptions} from './blocks/compare/compare-group'
-export {createCompareGroupBlock, compareGroupDefaults} from './blocks/compare/compare-group'
-export type {CompareItemAttributes, CompareItemOptions} from './blocks/compare/compare-item'
-export {createCompareItemBlock, compareItemDefaults} from './blocks/compare/compare-item'
-export type {CompareOptionAttributes, CompareOptionOptions} from './blocks/compare/compare-option'
-export {createCompareOptionBlock, compareOptionDefaults} from './blocks/compare/compare-option'
-export type {SignpostGroupAttributes, SignpostGroupOptions} from './blocks/signpost/signpost-group'
-export {createSignpostGroupBlock, signpostGroupDefaults} from './blocks/signpost/signpost-group'
-export type {SignpostItemAttributes, SignpostItemOptions} from './blocks/signpost/signpost-item'
-export {createSignpostItemBlock, signpostItemDefaults} from './blocks/signpost/signpost-item'
-export type {StepItemAttributes, StepItemOptions} from './blocks/step/step-item'
-export {createStepItemBlock, stepItemDefaults} from './blocks/step/step-item'
-export type {StepGroupAttributes, StepGroupOptions} from './blocks/step/step-group'
-export {createStepGroupBlock, stepGroupDefaults} from './blocks/step/step-group'
-export type {NewsletterFormAttributes, NewsletterFormOptions} from './blocks/newsletter/newsletter-form'
-export {createNewsletterFormBlock, newsletterFormDefaults} from './blocks/newsletter/newsletter-form'
-export type {ColumnGroupAttributes, ColumnGroupOptions} from './blocks/column/column-group'
-export {createColumnGroupBlock, columnGroupDefaults} from './blocks/column/column-group'
-export type {ColumnItemAttributes, ColumnItemOptions} from './blocks/column/column-item'
-export {createColumnItemBlock, columnItemDefaults} from './blocks/column/column-item'
-export type {BaseBlockAttributes, BaseSectionOptions, ExcludableBaseAttr} from './blocks/sections/base-section'
-export {
-  BACKGROUNDS,
-  baseAttributes,
-  baseSectionDefaults,
-  createBaseSectionBlock,
-  createBaseSectionEdit,
-  SPACING_POSITIONS,
-  SPACING_SIZES,
-} from './blocks/sections/base-section'
-export type {IconType} from './components/IconControl'
-export {IconControl} from './components/IconControl'
-export type {ImageLabels, ImageValue} from './components/ImagePicker'
-export {ImagePickerBody, ImagePickerControl, useMediaUrl} from './components/ImagePicker'
-export type {GroupBlockConfig} from './hooks/useGroupBlock'
-export {useGroupBlock} from './hooks/useGroupBlock'
-export type {TypedEditComponent} from './utils/createEditAdapter'
-export {HEADING_LEVELS, HEADING_STYLES, HEADING_STYLE_OPTIONS} from './constants'
-export type {HeadingStyleOption} from './constants'
-export {createEditAdapter} from './utils/createEditAdapter'
-export type {
-  ExternalMethod,
-  FormGroupAttributes,
-  FormGroupOptions,
-  InternalSubmitBehavior,
-  ProcessingMode,
-} from './blocks/form/form-group'
-export {
-  createFormGroupBlock,
-  formGroupDefaults,
-  EXTERNAL_METHODS,
-  INTERNAL_SUBMIT_BEHAVIORS,
-  PROCESSING_MODES,
-} from './blocks/form/form-group'
-export type {FormFieldAttributes, FormFieldOptions, FormFieldType} from './blocks/form/form-field'
-export {createFormFieldBlock, formFieldDefaults, FIELD_TYPES, FIELD_COLUMNS_RANGE, FIELD_COLUMNS_DEFAULT} from './blocks/form/form-field'
-export type {ResponsiveGridGroupAttributes, ResponsiveGridGroupOptions} from './blocks/responsive-grid/responsive-grid-group'
-export {createResponsiveGridGroupBlock, responsiveGridGroupDefaults} from './blocks/responsive-grid/responsive-grid-group'
-export type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './blocks/responsive-grid/responsive-grid-item'
-export {createResponsiveGridItemBlock, responsiveGridItemDefaults} from './blocks/responsive-grid/responsive-grid-item'
-export type {PostSliderGroupAttributes, PostSliderGroupOptions} from './blocks/post/post-slider-group'
-export {createPostSliderGroupBlock, postSliderGroupDefaults} from './blocks/post/post-slider-group'

package/src/types.ts

@@ -1,33 +0,0 @@
-import {BlockTypeIconDescriptor} from '@wordpress/blocks'
-export interface SelectOption {
-  value: string
-  label: string
-}
-
-export interface Media {
-  id: number
-  alt: string
-}
-
-export interface Icon {
-  type: string
-  src: string
-  media: Media
-}
-
-export type OptionArray = ReadonlyArray<{value: string; label: string}>
-export type NumberArray = ReadonlyArray<number>
-export type StringArray = ReadonlyArray<string>
-
-export interface BriloBlockType {
-  name: string
-  title?: string
-  description?: string
-  category?: string
-  allowedBlocks?: string[]
-  template?: [string, Record<string, unknown>][]
-  blockClassName?: string
-  containerClassName?: string
-  icon?: BlockTypeIconDescriptor
-  parent?: string[]
-}

package/src/utils/createEditAdapter.ts

@@ -1,11 +0,0 @@
-import type {BlockEditProps, BlockType} from '@wordpress/blocks'
-
-export type TypedEditComponent<Attributes extends Record<string, unknown>> = (props: BlockEditProps<Attributes>) => JSX.Element
-
-export function createEditAdapter<Attributes extends Record<string, unknown>>(
-  EditComponent: TypedEditComponent<Attributes>,
-): NonNullable<Partial<BlockType>['edit']> {
-  return function EditAdapter(props) {
-    return EditComponent(props as BlockEditProps<Attributes>)
-  }
-}

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2019",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "jsx": "react-jsx",
-    "outDir": "./build",
-    "rootDir": "./src",
-    "declaration": true,
-    "declarationMap": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "build"]
-}