Preferences

/**
 * Wrapper component to make any component configurable
 * @param props - Configurable component configuration props
 * @returns Wrapped component with configuration capabilities
 */
function Configurable(props: ConfigurableProps): ReactElement;

interface ConfigurableProps {
  /** Child component to make configurable */
  children: ReactElement;
  /** Editor component for configuration UI */
  editor?: ReactElement;
  /** Unique preference key for storing configuration */
  preferenceKey: string;
  /** Label for the configuration button */
  openButtonLabel?: string;
  /** Material UI sx prop for styling */
  sx?: SxProps;
}

import { Configurable } from "ra-ui-materialui";

// Basic configurable component
const ConfigurableTextBlock = ({ preferenceKey = "TextBlock", ...props }) => (
  <Configurable 
    editor={<TextBlockInspector />} 
    preferenceKey={preferenceKey}
  >
    <TextBlock {...props} />
  </Configurable>
);

// Configurable with custom button label
const ConfigurableDashboard = () => (
  <Configurable
    preferenceKey="dashboard"
    openButtonLabel="Customize Dashboard"
    editor={<DashboardInspector />}
  >
    <Dashboard />
  </Configurable>
);

/**
 * Configuration inspector panel component
 * @param props - Inspector configuration props
 * @returns Configuration panel with controls
 */
function Inspector(props: InspectorProps): ReactElement;

interface InspectorProps {
  /** Child configuration controls */
  children?: ReactNode;
  /** CSS class name for styling */
  className?: string;
  /** Material UI sx prop for styling */
  sx?: SxProps;
}

import { Inspector, FieldToggle } from "ra-ui-materialui";

// Basic inspector with field toggles
const DatagridInspector = () => (
  <Inspector>
    <FieldToggle source="id" />
    <FieldToggle source="title" />
    <FieldToggle source="author" />
    <FieldToggle source="created_at" />
  </Inspector>
);

// Inspector with custom controls
const CustomInspector = () => (
  <Inspector>
    <Typography variant="h6">Display Options</Typography>
    <FormGroup>
      <FormControlLabel 
        control={<Switch />} 
        label="Show avatars" 
      />
      <FormControlLabel 
        control={<Switch />} 
        label="Compact view" 
      />
    </FormGroup>
  </Inspector>
);

/**
 * Button for toggling inspector panel visibility
 * @param props - Inspector button configuration props
 * @returns Button component for opening/closing inspector
 */
function InspectorButton(props: InspectorButtonProps): ReactElement;

interface InspectorButtonProps {
  /** Button label text */
  label?: string;
  /** Button icon component */
  icon?: ReactElement;
  /** CSS class name for styling */
  className?: string;
  /** Material UI sx prop for styling */
  sx?: SxProps;
}

import { InspectorButton } from "ra-ui-materialui";
import SettingsIcon from "@mui/icons-material/Settings";

// Basic inspector button
const MyInspectorButton = () => <InspectorButton />;

// Custom inspector button with icon
const CustomInspectorButton = () => (
  <InspectorButton 
    label="Customize"
    icon={<SettingsIcon />}
  />
);

/**
 * Toggle control for field visibility in configurable components
 * @param props - Field toggle configuration props
 * @returns Toggle switch for field visibility
 */
function FieldToggle(props: FieldToggleProps): ReactElement;

interface FieldToggleProps {
  /** Field source name */
  source: string;
  /** Display label for the field */
  label?: string;
  /** Whether the field is disabled */
  disabled?: boolean;
  /** CSS class name for styling */
  className?: string;
}

import { FieldToggle } from "ra-ui-materialui";

// Basic field toggle
const PostFieldToggle = () => <FieldToggle source="title" />;

// Field toggle with custom label
const CustomFieldToggle = () => (
  <FieldToggle 
    source="author_name"
    label="Author"
    disabled={false}
  />
);

/**
 * Component for selecting visible fields in configurable displays
 * @param props - Fields selector configuration props
 * @returns Field selection interface
 */
function FieldsSelector(props: FieldsSelectorProps): ReactElement;

interface FieldsSelectorProps {
  /** Available field options */
  fields?: FieldOption[];
  /** Currently selected fields */
  selectedFields?: string[];
  /** Callback when field selection changes */
  onSelectionChange?: (fields: string[]) => void;
  /** CSS class name for styling */
  className?: string;
}

interface FieldOption {
  /** Field source name */
  source: string;
  /** Display label */
  label: string;
  /** Whether field is required */
  required?: boolean;
}

import { FieldsSelector } from "ra-ui-materialui";

const PostFieldsSelector = () => {
  const fields = [
    { source: 'id', label: 'ID', required: true },
    { source: 'title', label: 'Title' },
    { source: 'author', label: 'Author' },
    { source: 'created_at', label: 'Created' },
  ];

  return (
    <FieldsSelector 
      fields={fields}
      selectedFields={['id', 'title', 'author']}
      onSelectionChange={(selected) => {
        // Save preference
        console.log('Selected fields:', selected);
      }}
    />
  );
};

/**
 * Hook for accessing preference key from context
 * @returns Current preference key string
 */
function usePreferenceKey(): string;

/**
 * Hook for accessing preferences editor context
 * @returns Preferences editor context object
 */
function usePreferencesEditor(): PreferencesEditorContext | null;

interface PreferencesEditorContext {
  /** Whether edit mode is enabled */
  isEnabled: boolean;
  /** Enable edit mode */
  enable: () => void;
  /** Disable edit mode */
  disable: () => void;
  /** Toggle edit mode */
  toggle: () => void;
}

import { usePreferenceKey, usePreferencesEditor } from "ra-ui-materialui";

const ConfigurableComponent = () => {
  const preferenceKey = usePreferenceKey();
  const editor = usePreferencesEditor();
  
  return (
    <div>
      <h3>Component: {preferenceKey}</h3>
      {editor?.isEnabled && (
        <button onClick={editor.disable}>
          Exit Edit Mode
        </button>
      )}
    </div>
  );
};

interface PreferenceKeyContextProvider {
  preferenceKey: string;
  children: ReactNode;
}

interface PreferencesState {
  [key: string]: any;
}

type PreferenceValue = string | number | boolean | object | null;