@brilo/base-blocks 0.1.26 → 0.1.28

package/src/blocks/document/documents-group/edit.tsx

@@ -0,0 +1,96 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {DOCUMENTS_GROUP_COLUMNS} from './constants'
+import type {DocumentsGroupAttributes, DocumentsGroupOptions} from './types'
+
+export function createDocumentsGroupEdit(options: DocumentsGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: DocumentsGroupAttributes
+    setAttributes: (a: Partial<DocumentsGroupAttributes>) => void
+  }) {
+    const {mode, listingStyle, sortBy, columns, selectedDocuments, selectedCategories} = attributes
+
+    const blockProps = useBlockProps({className: 'wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení výpisu', 'brilo-blocks')} initialOpen>
+            <ToggleGroupControl
+              label={__('Zdroj dokumentů', 'brilo-blocks')}
+              value={mode}
+              onChange={(value) => {
+                const nextMode = value as DocumentsGroupAttributes['mode']
+                setAttributes({
+                  mode: nextMode,
+                  sortBy: 'manual' === nextMode ? sortBy : sortBy === 'manual-order' ? 'menu_order' : sortBy,
+                })
+              }}
+              isBlock
+            >
+              <ToggleGroupControlOption value="manual" label={__('Ruční výběr', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="category" label={__('Dle kategorie', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            <ToggleGroupControl
+              label={__('Styl výpisu', 'brilo-blocks')}
+              value={listingStyle}
+              onChange={(value) => setAttributes({listingStyle: value as DocumentsGroupAttributes['listingStyle']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="classic" label={__('Klasický výpis', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="group-by-category" label={__('Dle kategorií', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            <ToggleGroupControl
+              label={__('Řazení', 'brilo-blocks')}
+              value={sortBy}
+              onChange={(value) => setAttributes({sortBy: value as DocumentsGroupAttributes['sortBy']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="menu_order" label={__('Pořadí', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="date" label={__('Datum', 'brilo-blocks')} />
+              {'manual' === mode && <ToggleGroupControlOption value="manual-order" label={__('Dle výběru', 'brilo-blocks')} />}
+            </ToggleGroupControl>
+
+            <ToggleGroupControl
+              label={__('Počet sloupců', 'brilo-blocks')}
+              help={
+                'group-by-category' === listingStyle ? __('Platí pro seznam dokumentů uvnitř každé kategorie.', 'brilo-blocks') : undefined
+              }
+              value={String(columns)}
+              onChange={(value) => setAttributes({columns: Number(value) as DocumentsGroupAttributes['columns']})}
+              isBlock
+            >
+              {DOCUMENTS_GROUP_COLUMNS.map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {'category' === mode &&
+            options.renderCategoryControl?.({
+              selectedItems: selectedCategories,
+              onChange: (ids: number[]) => setAttributes({selectedCategories: ids}),
+            })}
+
+          {'manual' === mode &&
+            options.renderDocumentsControl?.({
+              selectedItems: selectedDocuments,
+              onChange: (ids: number[]) => setAttributes({selectedDocuments: ids}),
+            })}
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/document/documents-group/factory.tsx

@@ -0,0 +1,59 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {
+  DOCUMENTS_GROUP_COLUMNS_DEFAULT,
+  DOCUMENTS_GROUP_LISTING_STYLE_DEFAULT,
+  DOCUMENTS_GROUP_MODE_DEFAULT,
+  DOCUMENTS_GROUP_SORT_BY_DEFAULT,
+} from './constants'
+import {createDocumentsGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {DocumentsGroupAttributes, DocumentsGroupOptions} from './types'
+
+export type {DocumentsGroupAttributes, DocumentsGroupOptions}
+
+export function createDocumentsGroupBlock(options: DocumentsGroupOptions): BlockConfiguration<DocumentsGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Dokumenty', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'widgets',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      mode: {
+        type: 'string',
+        default: DOCUMENTS_GROUP_MODE_DEFAULT,
+        enum: ['manual', 'category'],
+      },
+      listingStyle: {
+        type: 'string',
+        default: DOCUMENTS_GROUP_LISTING_STYLE_DEFAULT,
+        enum: ['classic', 'group-by-category'],
+      },
+      sortBy: {
+        type: 'string',
+        default: DOCUMENTS_GROUP_SORT_BY_DEFAULT,
+        enum: ['menu_order', 'date', 'manual-order'],
+      },
+      columns: {
+        type: 'number',
+        default: DOCUMENTS_GROUP_COLUMNS_DEFAULT,
+        enum: [1, 2, 3, 4, 6],
+      },
+      selectedDocuments: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+      selectedCategories: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+    },
+    edit: createDocumentsGroupEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<DocumentsGroupAttributes>
+}

package/src/blocks/document/documents-group/icon.tsx

@@ -0,0 +1,9 @@
+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 1H12L16 5V19H4V1Z" stroke="black" fill="none" />
+    <path d="M12 1V5H16" stroke="black" fill="none" />
+    <line x1="6.5" y1="9" x2="13.5" y2="9" stroke="black" />
+    <line x1="6.5" y1="12" x2="13.5" y2="12" stroke="black" />
+    <line x1="6.5" y1="15" x2="11" y2="15" stroke="black" />
+  </svg>
+)

package/src/blocks/document/documents-group/index.ts

@@ -0,0 +1,15 @@
+export type {
+  DocumentsGroupAttributes,
+  DocumentsGroupOptions,
+  DocumentsGroupListingStyle,
+  DocumentsGroupMode,
+  DocumentsGroupSortBy,
+} from './types'
+export {createDocumentsGroupBlock} from './factory'
+export {DocumentsSelectModal} from './DocumentsSelectModal'
+
+import type {DocumentsGroupOptions} from './types'
+
+export const documentsGroupDefaults: DocumentsGroupOptions = {
+  name: 'brilo/documents-group',
+}

package/src/blocks/document/documents-group/types.ts

@@ -0,0 +1,25 @@
+import type {BriloBlockType} from '~/types'
+
+export type DocumentsGroupMode = 'manual' | 'category'
+export type DocumentsGroupListingStyle = 'classic' | 'group-by-category'
+export type DocumentsGroupSortBy = 'menu_order' | 'date' | 'manual-order'
+export type DocumentsGroupColumns = 1 | 2 | 3 | 4 | 6
+
+export interface DocumentsGroupAttributes extends Record<string, unknown> {
+  mode: DocumentsGroupMode
+  listingStyle: DocumentsGroupListingStyle
+  sortBy: DocumentsGroupSortBy
+  columns: DocumentsGroupColumns
+  selectedDocuments: number[]
+  selectedCategories: number[]
+}
+
+export interface SelectControlProps {
+  selectedItems: number[]
+  onChange: (ids: number[]) => void
+}
+
+export interface DocumentsGroupOptions extends BriloBlockType {
+  renderCategoryControl?: (props: SelectControlProps) => JSX.Element
+  renderDocumentsControl?: (props: SelectControlProps) => JSX.Element
+}

package/src/blocks/layout/layout-aside/factory.tsx

@@ -6,9 +6,7 @@ import {createAsideEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {AsideAttributes, AsideOptions} from './types'
 
-export function createAsideBlock(
-  options: AsideOptions,
-): BlockConfiguration<AsideAttributes> {
+export function createAsideBlock(options: AsideOptions): BlockConfiguration<AsideAttributes> {
   return {
     name: options.name,
     title: options.title ?? __('Postranní panel', 'brilo-blocks'),

package/src/blocks/layout/layout-aside/icon.tsx

@@ -2,11 +2,6 @@ import React from 'react'
 
 export const icon = (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M8 4H20V20H8V4ZM10 6H18V18H10V6Z"
-      fill="currentColor"
-    />
+    <path fillRule="evenodd" clipRule="evenodd" d="M8 4H20V20H8V4ZM10 6H18V18H10V6Z" fill="currentColor" />
   </svg>
 )

package/src/blocks/layout/layout-content/editor.scss

@@ -6,4 +6,4 @@
     padding: 8px;
     min-height: 120px;
   }
-}
+}

package/src/blocks/layout/layout-content/factory.tsx

@@ -6,9 +6,7 @@ import {createContentEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {ContentAttributes, ContentOptions} from './types'
 
-export function createContentBlock(
-  options: ContentOptions,
-): BlockConfiguration<ContentAttributes> {
+export function createContentBlock(options: ContentOptions): BlockConfiguration<ContentAttributes> {
   return {
     name: options.name,
     title: options.title ?? __('Obsah', 'brilo-blocks'),

package/src/blocks/layout/layout-content/icon.tsx

@@ -2,11 +2,6 @@ import React from 'react'
 
 export const icon = (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4 4H16V20H4V4ZM6 6H14V18H6V6Z"
-      fill="currentColor"
-    />
+    <path fillRule="evenodd" clipRule="evenodd" d="M4 4H16V20H4V4ZM6 6H14V18H6V6Z" fill="currentColor" />
   </svg>
 )

package/src/blocks/layout/layout-content-w-aside/edit.tsx

@@ -1,5 +1,9 @@
 import {InspectorControls} from '@wordpress/block-editor'
-import {PanelBody, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption} from '@wordpress/components'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import React from 'react'
 import {useGroupBlock} from '~/hooks/useGroupBlock'

package/src/blocks/layout/layout-content-w-aside/factory.tsx

@@ -8,9 +8,7 @@ import {createContentWithAsideEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {ContentWithAsideAttributes, ContentWithAsideOptions} from './types'
 
-export function createContentWithAsideBlock<
-  TAsideSizes extends OptionArray = typeof ASIDE_SIZES,
->(
+export function createContentWithAsideBlock<TAsideSizes extends OptionArray = typeof ASIDE_SIZES>(
   options: ContentWithAsideOptions<TAsideSizes>,
 ): BlockConfiguration<ContentWithAsideAttributes<TAsideSizes[number]['value']>> {
   const asideSizes = options.asideSizes ?? ASIDE_SIZES

package/src/blocks/layout/layout-content-w-aside/icon.tsx

@@ -2,11 +2,6 @@ import React from 'react'
 
 export const icon = (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4 4H20V20H4V4ZM6 6H13V18H6V6ZM15 6H18V18H15V6Z"
-      fill="currentColor"
-    />
+    <path fillRule="evenodd" clipRule="evenodd" d="M4 4H20V20H4V4ZM6 6H13V18H6V6ZM15 6H18V18H15V6Z" fill="currentColor" />
   </svg>
 )

package/src/blocks/sections/base-section/controls.tsx

@@ -14,7 +14,13 @@ import {
 import {__} from '@wordpress/i18n'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 import type {BaseBlockAttributes, ExcludableBaseAttr, FluidDecoration, FluidDecorationImage} from './types'
-import {FLUID_DECORATION_DEFAULT_HEIGHT, FLUID_DECORATION_HEIGHT_PRESETS, FLUID_DECORATION_UNITS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+import {
+  FLUID_DECORATION_DEFAULT_HEIGHT,
+  FLUID_DECORATION_HEIGHT_PRESETS,
+  FLUID_DECORATION_UNITS,
+  SPACING_POSITIONS,
+  SPACING_SIZES,
+} from './constants'
 
 interface FluidDecorationControlProps {
   label: string

package/src/index.ts

@@ -34,6 +34,10 @@ export {
   createContactItemBlock,
   createContactItemEdit,
 } from './blocks/contact/contact-item'
+export type {AccordionItemAttributes, AccordionItemOptions} from './blocks/accordion/accordion-item'
+export {accordionItemDefaults, createAccordionItemBlock} from './blocks/accordion/accordion-item'
+export type {AccordionGroupAttributes, AccordionGroupOptions, AccordionHeadingLevel} from './blocks/accordion/accordion-group'
+export {accordionGroupDefaults, createAccordionGroupBlock} from './blocks/accordion/accordion-group'
 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'
@@ -145,6 +149,14 @@ export type {PostSliderGroupAttributes, PostSliderGroupOptions} from './blocks/p
 export {createPostSliderGroupBlock, postSliderGroupDefaults} from './blocks/post/post-slider-group'
 export type {PostsGridAttributes, PostsGridOptions} from './blocks/post/posts-grid'
 export {createPostsGridBlock, postsGridDefaults} from './blocks/post/posts-grid'
+export type {
+  DocumentsGroupAttributes,
+  DocumentsGroupOptions,
+  DocumentsGroupListingStyle,
+  DocumentsGroupMode,
+  DocumentsGroupSortBy,
+} from './blocks/document/documents-group'
+export {createDocumentsGroupBlock, documentsGroupDefaults, DocumentsSelectModal} from './blocks/document/documents-group'
 export type {LinkItemAttributes, LinkItemIcon, LinkItemOptions} from './blocks/link/link-item'
 export {createLinkItemBlock, linkItemDefaults} from './blocks/link/link-item'
 export type {ContentWithAsideAttributes, ContentWithAsideOptions} from './blocks/layout/layout-content-w-aside'