@brilo/base-blocks 0.1.0

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 140,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": false
+}

package/README.md

@@ -0,0 +1,59 @@
+# @brilo/base-blocks
+
+Shared Gutenberg block factory library. Tenants consume it as a local file dependency — each tenant calls factory functions, registers the result, and owns only block.json + icon files.
+
+## Install (tenant)
+
+In tenant `package.json`:
+```json
+"@brilo/base-blocks": "file:../../../../assets/lib/brilo/base-blocks"
+```
+
+Then run `bun install`. Re-run after adding new files to base-blocks (bun links only files known at install time).
+
+## Structure
+
+```
+src/
+  blocks/
+    sections/   base-section
+    groups/     basic-header-group · button-group · usp-group · text-and-media-group
+    core/       basic-button · basic-heading · basic-overline
+    items/      usp-item
+  components/   IconControl · ImagePicker
+  hooks/        useGroupBlock
+  utils/        createEditAdapter
+  editor.scss   SCSS barrel — @forward all block + component + global styles
+  globals.scss  global editor utility classes (flex, gap-*, u-grid-*, …)
+  index.ts      JS/TS barrel
+  types.ts      shared types (BaseBlockAttributes, BaseSectionOptions, …)
+```
+
+## Styles (tenant)
+
+In tenant `index.scss`:
+```scss
+@use "@brilo/base-blocks/src/editor";  /* all block styles in @layer base */
+@import "@brilo/gutenberg-toolkit/build/index.css";
+
+@layer base, tenant;  /* tenant layer always wins */
+```
+
+Override any base style in tenant SCSS with `@layer tenant { }`.
+
+## Build
+
+```bash
+# in base-blocks
+bun run build   # tsc compile → build/
+
+# in tenant (prebuild hook runs tsc automatically)
+bun run build
+bun run start
+```
+
+## API
+
+See [USAGE.md](./USAGE.md) for factory examples.
+
+All factories return `BlockConfiguration<Attributes>` — pass directly to `registerBlockType`.

package/USAGE.md

@@ -0,0 +1,263 @@
+# Usage Examples — @brilo/base-blocks
+
+## createBaseSectionBlock
+
+Section container. Holds inner blocks, controls background + spacing.
+
+```tsx
+// src/blocks/sections/base-section/index.tsx
+import { createBaseSectionBlock } from "@brilo/base-blocks"
+import { InnerBlocks } from "@wordpress/block-editor"
+import { registerBlockType } from "@wordpress/blocks"
+import { ToggleControl } from "@wordpress/components"
+import { __ } from "@wordpress/i18n"
+import { icon } from "./icon"
+
+type ExtraAttrs = { overlap: boolean }
+
+const config = createBaseSectionBlock<ExtraAttrs>({
+  name: "my-tenant/base-section",
+  title: "Sekce",
+  description: "Základní kontejner pro sekce",
+  category: "layout",
+  allowedBlocks: [
+    "my-tenant/basic-header-group",
+    "my-tenant/usp-group",
+  ],
+  blockClassName: "s-base",
+  containerClassName: "s-base__inner",
+  // optional: add tenant-specific attributes on top of base attrs
+  extraAttributes: {
+    overlap: { type: "boolean", default: false },
+  },
+  // optional: extra Inspector panel controls rendered below base controls
+  extraControls: ({ attributes, setAttributes }) => (
+    <ToggleControl
+      label={__("Překrytí sekce", "brilo-blocks")}
+      checked={attributes.overlap}
+      onChange={(value) => setAttributes({ overlap: value })}
+    />
+  ),
+  // optional: exclude base attributes you don't need
+  // exclude: ["background"],
+})
+
+registerBlockType(config.name as string, {
+  ...config,
+  save: () => <InnerBlocks.Content />,
+  icon: { src: icon },
+})
+```
+
+**Base attributes always included:** `id`, `background`, `spacing` (position + size). Exclude any with `exclude: ["background"]`.
+
+---
+
+## createBasicHeaderGroupBlock
+
+Header group — overline + heading combo, alignment control.
+
+```tsx
+import { createBasicHeaderGroupBlock } from "@brilo/base-blocks"
+import { registerBlockType } from "@wordpress/blocks"
+import metadata from "./block.json"
+import { icon } from "./icon"
+
+const config = createBasicHeaderGroupBlock({
+  name: metadata.name,
+  parent: metadata.parent as string[],
+  icon: { src: icon },
+})
+
+registerBlockType(config.name as string, config)
+```
+
+---
+
+## createBasicButtonBlock
+
+Single button with variant + size controls.
+
+```tsx
+import { createBasicButtonBlock } from "@brilo/base-blocks"
+import { registerBlockType } from "@wordpress/blocks"
+import metadata from "./block.json"
+
+const config = createBasicButtonBlock({
+  name: metadata.name,
+  parent: metadata.parent as string[],
+})
+
+registerBlockType(config.name as string, config)
+```
+
+---
+
+## createBasicHeadingBlock / createBasicOverlineBlock
+
+Minimal blocks — RichText heading or overline text.
+
+```tsx
+import { createBasicHeadingBlock, createBasicOverlineBlock } from "@brilo/base-blocks"
+import { registerBlockType } from "@wordpress/blocks"
+import metadata from "./block.json"
+
+const headingConfig = createBasicHeadingBlock({
+  name: metadata.name,
+  parent: metadata.parent as string[],
+})
+registerBlockType(headingConfig.name as string, headingConfig)
+
+const overlineConfig = createBasicOverlineBlock({
+  name: metadata.name,
+  parent: metadata.parent as string[],
+})
+registerBlockType(overlineConfig.name as string, overlineConfig)
+```
+
+---
+
+## createButtonGroupBlock
+
+Container for buttons — layout + alignment controls.
+
+```tsx
+import { createButtonGroupBlock } from "@brilo/base-blocks"
+import { registerBlockType } from "@wordpress/blocks"
+import metadata from "./block.json"
+
+const config = createButtonGroupBlock({
+  name: metadata.name,
+  parent: metadata.parent as string[],
+  allowedBlocks: ["my-tenant/basic-button"],
+})
+
+registerBlockType(config.name as string, config)
+```
+
+---
+
+## createUspGroupBlock
+
+USP grid group — columns, direction, card style controls.
+
+```tsx
+import { createUspGroupBlock } from "@brilo/base-blocks"
+import { registerBlockType } from "@wordpress/blocks"
+import metadata from "./block.json"
+
+const config = createUspGroupBlock({
+  name: metadata.name,
+  parent: metadata.parent as string[],
+  allowedBlocks: ["my-tenant/usp-item"],
+})
+
+registerBlockType(config.name as string, config)
+```
+
+---
+
+## createUspItemBlock
+
+Single USP item — icon (preselected SVG / media / number), title, content, URL.
+
+```tsx
+import { createUspItemBlock } from "@brilo/base-blocks"
+import { registerBlockType } from "@wordpress/blocks"
+import metadata from "./block.json"
+import { ICONS, ICONS_SRC } from "./icons"
+
+// icons.ts — export list of available icon slugs + base URL
+// export const ICONS_SRC = "/wp-content/themes/my-tenant/assets/icons/"
+// export const ICONS: IconType[] = [
+//   { value: "arrow", label: "Arrow" },
+//   { value: "check", label: "Check" },
+// ]
+
+const config = createUspItemBlock({
+  name: metadata.name,
+  parent: metadata.parent as string[],
+  icons: ICONS,
+  iconsSrc: ICONS_SRC,
+})
+
+registerBlockType(config.name as string, config)
+```
+
+---
+
+## createTextAndMediaGroupBlock
+
+Two-column text + media group — image/video, media position, ratios, chip overlay.
+
+```tsx
+import { createTextAndMediaGroupBlock } from "@brilo/base-blocks"
+import { registerBlockType } from "@wordpress/blocks"
+import metadata from "./block.json"
+import { icon } from "./icon"
+
+const ALLOWED_INNER_BLOCKS = [
+  "my-tenant/basic-button",
+  "my-tenant/basic-heading",
+  "my-tenant/basic-overline",
+  "my-tenant/button-group",
+  "core/heading",
+  "core/list",
+  "core/paragraph",
+]
+
+const config = createTextAndMediaGroupBlock({
+  name: metadata.name,
+  parent: metadata.parent as string[],
+  allowedBlocks: ALLOWED_INNER_BLOCKS,
+  icon: { src: icon },
+})
+
+registerBlockType(config.name as string, config)
+```
+
+---
+
+## Components (direct use)
+
+When building custom factory blocks, components can be imported directly:
+
+```tsx
+import { IconControl, ImagePickerBody, ImagePickerControl, useMediaUrl } from "@brilo/base-blocks"
+
+// ImagePickerControl — sidebar panel with upload + select
+<ImagePickerControl
+  value={attributes.img}
+  onChange={(val) => setAttributes({ img: val })}
+  labels={{ title: "Obrázek", button: "Vybrat" }}
+/>
+
+// ImagePickerBody — renders the image in the editor canvas
+<ImagePickerBody value={attributes.img} />
+
+// useMediaUrl — resolve media ID → URL
+const url = useMediaUrl(attributes.img.id)
+
+// IconControl — grid of SVG icon selectors
+<IconControl
+  selected={attributes.icon.src}
+  icons={ICONS}
+  iconsSrc={ICONS_SRC}
+  onChange={(src) => setAttributes({ icon: { ...attributes.icon, src } })}
+/>
+```
+
+---
+
+## Tenant SCSS override
+
+Base styles live in `@layer base`. Override in `@layer tenant` — no specificity fight needed:
+
+```scss
+// tenant/src/blocks/groups/usp-group/editor.scss
+@layer tenant {
+  .g-usp {
+    gap: 2rem;  // overrides base gap
+  }
+}
+```

package/biome.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.15/schema.json",
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "warn",
+        "useIterableCallbackReturn": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 140
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded",
+      "trailingCommas": "all",
+      "bracketSpacing": false
+    }
+  },
+  "files": {
+    "includes": ["**", "!build", "!node_modules"]
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}