Studio Registry

A comprehensive registry system for the Studio visual builder that manages components, design tokens, data binding, and breakpoints.

Overview

This package provides a centralized registry system for managing various aspects of the Studio visual builder:

- Component Registry: Register and manage React components with their properties and validation
- Design Registry: Handle design tokens, classes, and styling configurations
- Data Binder: Resolve data bindings and retrieve values from data sources
- Breakpoint Registry: Manage responsive breakpoints for components
- JSON RTE Registry: Handle rich text editor configurations

Installation

``bash
npm install @contentstack/studio-registry
`

Features

Component Registry

The component registry allows you to register React components with their properties, validation rules, and metadata.

`typescript
import { ComponentRegistry } from '@contentstack/studio-registry';

const registry = new ComponentRegistry({
allowedBuiltInComponents: true,
overrideDefaultComponents: false,
debug: false
});

// Register a component
registry.registerComponents([
{
name: 'MyButton',
component: MyButtonComponent,
props: {
text: {
type: 'string',
defaultValue: 'Click me',
required: true
},
variant: {
type: 'choice',
choices: ['primary', 'secondary', 'outline'],
defaultValue: 'primary'
}
}
}
]);
`

Design Registry

Manage design tokens and classes for consistent styling across components.

`typescript
import { DesignRegistry, DEFAULT_DESIGN_TOKENS } from '@contentstack/studio-registry';

const designRegistry = new DesignRegistry();

// Register design tokens
designRegistry.registerTokens({
colors: {
primary: '#007bff',
secondary: '#6c757d'
},
spacing: {
sm: '0.5rem',
md: '1rem',
lg: '1.5rem'
}
});
`

Data Binder

Resolve data bindings and retrieve values from various data sources.

`typescript
import { retrievePropValue } from '@contentstack/studio-registry';

const props = retrievePropValue({
data: compositionData,
defaultSlot: null,
componentOptions: componentSchema,
node: currentNode,
cslp: { appendTags: true },
nodeUid: 'node-123',
getSlots: getSlotsFunction,
jsonRTE: jsonRteOptions,
isCompositionBeingEdited: true
});
`

Breakpoint Registry

Manage responsive breakpoints for components.

`typescript
import { BreakpointRegistry } from '@contentstack/studio-registry';

const breakpointRegistry = new BreakpointRegistry();

// Register breakpoints
breakpointRegistry.registerBreakpoints([
{ name: 'mobile', width: 768 },
{ name: 'tablet', width: 1024 },
{ name: 'desktop', width: 1200 }
]);
``