SQLRooms

Appearance

@sqlrooms/room-config ​

A central configuration and type definitions package that maintains base room configuration schemas and Zod schema definitions. It provides TypeScript types and interfaces along with essential constants and utilities used throughout the framework.

Features ​

  • 📝 Room Configuration: Define and manage room configuration schemas
  • 🔍 Type Safety: Strong TypeScript typing for configuration objects
  • 🧩 Layout Configuration: Flexible layout configuration system
  • ✅ Validation: Zod schemas for runtime validation of configuration

Installation ​

bash
npm install @sqlrooms/room-config
# or
yarn add @sqlrooms/room-config

Basic Usage ​

Working with Base Room Configuration ​

tsx
import {BaseRoomConfig} from '@sqlrooms/room-config';

// Create a new room configuration
const roomConfig: BaseRoomConfig = {
  name: 'My SQL Room',
  description: 'A data analysis room using SQLRooms',
  version: '1.0.0',
  settings: {
    theme: 'dark',
    // Other settings...
  },
};

// Access configuration properties
console.log(roomConfig.name); // 'My SQL Room'

Persisting Room Configuration ​

Room configuration is designed to be saved and restored between sessions. Here's how to use it with Zustand's persist middleware:

tsx
import {persist} from 'zustand/middleware';
import {createRoomStore, createRoomSlice} from '@sqlrooms/room-shell';
import {BaseRoomConfig} from '@sqlrooms/room-config';

// Create a store with persistence for configuration
const {useRoomStore} = createRoomStore(
  persist(
    (set, get, store) => ({
      ...createRoomSlice({
        // Config is stored at the root level of state for persisting the app state
        config: {
          title: 'My Room',
          // Other configuration properties
        },
        // Room object contains panels and runtime-only state
        room: {
          panels: {
            // Panel definitions
          },
        },
      })(set, get, store),
    }),
    {
      name: 'room-config-storage',
      // Only persist the configuration part of the state
      partialize: (state) => ({
        config: state.config,
      }),
    },
  ),
);

// Access the config in components
function ConfigComponent() {
  // Config is accessed directly from state, not from state.room.config
  const config = useRoomStore((state) => state.config);

  return <div>{config.title}</div>;
}

Using Layout Configuration ​

tsx
import {LayoutConfig} from '@sqlrooms/room-config';

// Define a layout configuration
const layoutConfig: LayoutConfig = {
  layout: 'grid',
  panels: [
    {
      id: 'editor',
      type: 'sql-editor',
      position: {x: 0, y: 0, width: 6, height: 4},
    },
    {
      id: 'results',
      type: 'data-table',
      position: {x: 0, y: 4, width: 6, height: 4},
    },
  ],
};

// Use the layout configuration in your application
function renderLayout(config: LayoutConfig) {
  // Implementation...
}

Advanced Features ​

  • Schema Extensions: Extend base schemas for custom room types
  • Configuration Validation: Validate configurations at runtime
  • Serialization: Convert configurations to/from JSON for storage

For more information, visit the SQLRooms documentation.

Type Aliases ​

Variables ​

Functions ​

Supported by Foursquare Logo