@brizy/core/README.md

Brizy Core to register your own component into Brizy Builder

# Brizy Builder Core
![Logo](https://www.brizy.io/account/application/default/themes/themefuse/public/img/logo-account.png)

**Brizy Builder Core** package allow to Register your own third party components into Brizy Builder.


[![Stable Release](https://img.shields.io/npm/v/@brizy/core)](https://npm.im/@brizy/core)

## Limitations
This package can only be used in the Brizy Builder context. It cannot be used in other applications.

## Installation

Install my-project with npm

```bash
  npm install @brizy/core
```

## Usage/Examples

Import `Brizy` core, and then you can register your own component

```javascript
import { Brizy } from "@brizy/core";
import { ToolbarProps } from "../types/toolbars";
import { getItems as getSidebarItems } from "./sidebar";
import "./style.scss";
import { getItems as getToolbarItems } from "./toolbar";

export function MySuperComponent(props: Props): JSX.Element {
  return (
    <div className="componentToolbar">
      {/*... your component code...*/}
      
    </div>
  );
}

Brizy.registerComponent(MySuperComponent, {
  id: "MySupercomponentId",
  //... other props
  options: (props: ToolbarProps) => [
    {
      selector: ".componentToolbar",    // open toolbar when you click on element with this selector
      toolbar: getToolbarItems(props),  // toolbar description...
      sidebar: getSidebarItems(props)   // sidebar desription...
    }
  ]
});
```


## Core Interface
```typescript
Class Brizy{
    static registerComponent<T>(
        component:ComponentType, // this is React Component Type
        componentConfig: ComponentData<T>
  ){}
}

export interface ComponentData<T> {
  id: string;
  title: string;
  category?: string;
  keywords?: Array<string>;
  mode?: EditorMode;
  preview?: Preview;
  icon?: string;
  options?: (props: ValueGetter) => ToolbarConfig[];
}
```
... Other types you can find in `dist/types`


#  ImageUtility Class

This package also exports a helpful utility class called ImageUtility, designed to simplify the process of extracting image-related data from the element model.
## Import
```ts
import { ImageUtility } from "@brizy/core";
```

## Example Usage
```ts
// Inside your component
const imgUtils = new ImageUtility();
const imageData = imgUtils.getImageData({ id: imageKey, v: props });
```

## How It Works
The getImageData method reads the base image key (usually the ID of the imageUpload option) and automatically looks for related metadata fields in the element model by appending suffixes to the key:

For example, if the image key is "sectionBg", the utility will look for and return values from the following keys in the model:

- sectionBgImageSrc
- sectionBgImageWidth
- sectionBgImageHeight
- sectionBgImageFileName
- sectionBgImageExtension

## Returned Data Structure
The result is a typed object of shape:
```ts
export interface ImageData {
  src: string;
  fileName: string;
  extension: string;
  width: number;
  height: number;
}
```
This makes it easy to access all necessary image details for rendering or further processing.