Studio Registry

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

• Studio Registry
• Overview
• Installation
• Features
  • Component Registry
  • Design Registry
  • Data Binder
  • Breakpoint Registry

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

npm install @contentstack/studio-registry

Features

Component Registry

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

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.

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.

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.

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 }
]);