Salta ai contenuti

Sistema di Plugin

I plugin sono il principale meccanismo di estensione in Rebase. Possono:

  • Avvolgere l’intera app con un provider (contesto, gestione dello stato)
  • Aggiungere azioni e widget della home page
  • Iniettare componenti della vista collezione (barra degli strumenti, builder di colonne)
  • Aggiungere componenti del modulo (builder di campi, pannelli aggiuntivi)
  • Iniettare o modificare collezioni dinamicamente
interface RebasePlugin {
key: string; // Unique identifier
loading?: boolean; // Show loading state while initializing
// Wrap the app with a provider
provider?: {
Component: React.ComponentType;
};
// Home page customization
homePage?: {
additionalActions?: React.ReactNode;
additionalChildrenStart?: React.ReactNode;
additionalChildrenEnd?: React.ReactNode;
};
// Collection view customization
collectionView?: {
showTextSearchBar?: boolean;
CollectionActions?: React.ComponentType[];
AddColumnComponent?: React.ComponentType;
onCellValueChange?: (params) => void;
};
// Entity form customization
form?: {
Actions?: React.ComponentType;
provider?: { Component: React.ComponentType };
fieldBuilder?: (params) => React.ReactNode | null;
};
// Collection injection/modification
collection?: {
injectCollections?: (params) => EntityCollection[];
modifyCollection?: (params) => EntityCollection;
};
}

Passa le istanze dei plugin al controller di navigazione:

const dataEnhancementPlugin = useDataEnhancementPlugin();
const plugins = [dataEnhancementPlugin];
const navigationStateController = useBuildNavigationStateController({
plugins,
collections: () => collections,
// ...
});

Ecco un plugin minimo che aggiunge un’azione alla barra degli strumenti a ogni collezione:

import { RebasePlugin } from "@rebasepro/types";
function useMyPlugin(): RebasePlugin {
return {
key: "my_plugin",
collectionView: {
CollectionActions: [MyToolbarAction]
},
form: {
fieldBuilder: ({ property, ...rest }) => {
// Return a custom field for specific property configs
if (property.propertyConfig === "my_custom_field") {
return <MyCustomField {...rest} />;
}
return null; // Use default field
}
}
};
}

Autocompletamento dei campi basato sull’IA:

import { useDataEnhancementPlugin } from "@rebasepro/data_enhancement";
const enhancementPlugin = useDataEnhancementPlugin();

Miglioramento dei dati

I plugin possono aggiungere dinamicamente nuove collezioni:

collection: {
injectCollections: ({ collections, user }) => {
// Add an audit log collection for admins
if (user?.roles?.includes("admin")) {
return [auditLogCollection];
}
return [];
}
}

I plugin possono modificare collezioni esistenti:

collection: {
modifyCollection: ({ collection }) => {
// Add a "last_modified_by" field to every collection
return {
...collection,
properties: {
...collection.properties,
last_modified_by: {
type: "string",
name: "Modified By",
readOnly: true
}
}
};
}
}