or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

cards.md descriptions.md field-rendering.md form-components.md index.md layout.md providers.md skeleton.md table-list.md utilities.md

tile.json

Provider System

Configuration, theming, and internationalization management system for all Pro components with comprehensive provider architecture for global settings and customization.

Capabilities

ProConfigProvider - Main Configuration Provider

Primary configuration provider that manages global settings, theme, and component behavior across all Pro components.

/**
 * Main configuration provider for Pro components
 * @param props - ProConfigProvider configuration props
 * @returns JSX.Element
 */
function ProConfigProvider(props: ConfigContextPropsType): JSX.Element;

/**
 * Configuration consumer component
 * @param props - ConfigConsumer configuration props
 * @returns JSX.Element
 */
function ConfigConsumer(props: ConfigConsumerProps): JSX.Element;

interface ConfigContextPropsType {
  /** Internationalization configuration */
  intl?: IntlType;
  /** Value type mapping for custom field types */
  valueTypeMap?: Record<string, ProRenderFieldPropsType>;
  /** Theme configuration */
  theme?: any;
  /** Design tokens */
  token?: ProTokenType;
  /** CSS-in-JS hash mode */
  hashed?: boolean;
  /** Dark mode configuration */
  dark?: boolean;
  /** Prefix class name */
  prefixCls?: string;
  /** Icon prefix class name */
  iconPrefixCls?: string;
  /** Component size */
  componentSize?: 'small' | 'middle' | 'large';
  /** Component disabled state */
  componentDisabled?: boolean;
  /** Custom render functions */
  renderEmpty?: (componentName?: string) => React.ReactNode;
  /** Auto insert space in button */
  autoInsertSpaceInButton?: boolean;
  /** Page header ghost mode */
  pageHeader?: {
    ghost: boolean;
  };
  /** Direction (RTL support) */
  direction?: 'ltr' | 'rtl';
  /** Space configuration */
  space?: {
    size?: 'small' | 'middle' | 'large' | number;
  };
  /** Virtual scrolling */
  virtual?: boolean;
  /** Drop down match select width */
  dropdownMatchSelectWidth?: boolean;
  /** Form configuration */
  form?: {
    validateMessages?: any;
    requiredMark?: boolean | 'optional';
    colon?: boolean;
    scrollToFirstError?: boolean | ScrollOptions;
  };
  /** Children components */
  children?: React.ReactNode;
}

interface ConfigConsumerProps {
  /** Render function receiving config */
  children: (config: ConfigContextPropsType) => React.ReactNode;
}

Usage Examples:

import { ProConfigProvider, ConfigConsumer } from "@ant-design/pro-components";
import { zhCNIntl, enUSIntl } from "@ant-design/pro-components";

// Basic provider setup
const AppProvider = ({ children }) => {
  return (
    <ProConfigProvider
      intl={zhCNIntl}
      token={{
        header: {
          colorBgHeader: '#001529',
          colorHeaderTitle: '#fff',
        },
        pageContainer: {
          colorBgPageContainer: '#f5f5f5',
        },
      }}
      hashed={false}
    >
      {children}
    </ProConfigProvider>
  );
};

// Dynamic theme configuration
const ThemeProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(false);
  const [locale, setLocale] = useState('zh-CN');

  return (
    <ProConfigProvider
      dark={isDark}
      intl={locale === 'zh-CN' ? zhCNIntl : enUSIntl}
      valueTypeMap={{
        customType: {
          render: (text) => <span style={{ color: 'red' }}>{text}</span>,
        },
      }}
    >
      <ConfigConsumer>
        {(config) => (
          <div>
            <button onClick={() => setIsDark(!isDark)}>
              {isDark ? 'Light Mode' : 'Dark Mode'}
            </button>
            <button onClick={() => setLocale(locale === 'zh-CN' ? 'en-US' : 'zh-CN')}>
              {locale === 'zh-CN' ? 'English' : '中文'}
            </button>
            {children}
          </div>
        )}
      </ConfigConsumer>
    </ProConfigProvider>
  );
};

// Custom value type registration
const CustomFieldProvider = ({ children }) => {
  return (
    <ProConfigProvider
      valueTypeMap={{
        phone: {
          render: (text) => (
            <a href={`tel:${text}`}>{text}</a>
          ),
          renderFormItem: (text, props, dom) => (
            <Input {...props.fieldProps} placeholder="请输入手机号" />
          ),
        },
        email: {
          render: (text) => (
            <a href={`mailto:${text}`}>{text}</a>
          ),
        },
      }}
    >
      {children}
    </ProConfigProvider>
  );
};

Provider Contexts

Context objects for accessing configuration throughout the component tree.

/**
 * Main provider context (alias for ProConfigContext)
 */
const ProProvider: React.Context<ConfigContextPropsType>;

/**
 * Configuration context for Pro components
 */
const ProConfigContext: React.Context<ConfigContextPropsType>;

Internationalization System

Comprehensive internationalization support with built-in locales and custom message handling.

/**
 * Internationalization hook for accessing locale messages
 * @returns IntlType instance
 */
function useIntl(): IntlType;

/**
 * Check if hash mode is needed for routing
 * @param hash - Hash configuration
 * @returns Boolean indicating if hash mode is needed
 */
function isNeedOpenHash(hash?: boolean): boolean;

/**
 * Find internationalization key by Ant Design locale key
 * @param antdLocaleKey - Ant Design locale identifier
 * @returns Pro components locale key
 */
function findIntlKeyByAntdLocaleKey(antdLocaleKey: string): string;

interface IntlType {
  /** Get localized message */
  getMessage: (id: string, defaultMessage?: string, ...args: any[]) => string;
  /** Get formatted message with placeholders */
  formatMessage: (descriptor: { id: string; defaultMessage?: string }, values?: any) => string;
  /** Current locale identifier */
  locale: string;
  /** Available messages */
  messages: Record<string, string>;
}

// Built-in internationalization objects
const intlMap: Record<string, IntlType>;
const zhCNIntl: IntlType;

Usage Examples:

import { useIntl, zhCNIntl, enUSIntl } from "@ant-design/pro-components";

// Using the intl hook
const MyComponent = () => {
  const intl = useIntl();

  return (
    <div>
      <h1>{intl.getMessage('app.title', 'Default Title')}</h1>
      <p>{intl.formatMessage({ id: 'app.description' }, { name: 'Pro Components' })}</p>
    </div>
  );
};

// Custom locale setup
const customIntl: IntlType = {
  locale: 'en-US',
  getMessage: (id, defaultMessage) => {
    const messages = {
      'app.title': 'My Application',
      'app.description': 'Built with Pro Components',
      'table.reload': 'Refresh',
      'table.search': 'Search',
    };
    return messages[id] || defaultMessage || id;
  },
  formatMessage: (descriptor, values) => {
    let message = descriptor.defaultMessage || descriptor.id;
    if (values) {
      Object.keys(values).forEach(key => {
        message = message.replace(`{${key}}`, values[key]);
      });
    }
    return message;
  },
  messages: {},
};

Theming and Styling System

Comprehensive theming system with design tokens and CSS-in-JS support.

/**
 * Styling hook for component theming
 * @param componentName - Component name for styling
 * @param styleFn - Style function
 * @returns Style object and CSS class
 */
function useStyle(componentName: string, styleFn?: (token: any) => any): {
  wrapSSR: (node: React.ReactNode) => React.ReactNode;
  hashId: string;
};

/**
 * Get layout design tokens
 * @param props - Layout props
 * @returns Design token object
 */
function getLayoutDesignToken(props: any): any;

/**
 * Merge objects with deep merging
 * @param target - Target object
 * @param sources - Source objects to merge
 * @returns Merged object
 */
function merge<T>(target: T, ...sources: Partial<T>[]): T;

interface ProTokenType {
  /** Layout tokens */
  layout?: {
    /** Layout background color */
    colorBgLayout?: string;
    /** Layout border radius */
    borderRadius?: number;
    /** Sider background color */
    siderBg?: string;
    /** Header height */
    headerHeight?: number;
  };
  /** Header tokens */
  header?: {
    /** Header background color */
    colorBgHeader?: string;
    /** Header text color */
    colorHeaderTitle?: string;
    /** Header border color */
    colorBorderHeader?: string;
    /** Header height */
    heightLayoutHeader?: number;
  };
  /** Sider tokens */
  sider?: {
    /** Sider background color */
    colorBgCollapsedButton?: string;
    /** Menu background color */
    colorBgMenuItemCollapsedElevated?: string;
    /** Menu item hover color */
    colorBgMenuItemHover?: string;
    /** Menu item selected color */
    colorBgMenuItemSelected?: string;
  };
  /** PageContainer tokens */
  pageContainer?: {
    /** Page container background */
    colorBgPageContainer?: string;
    /** Page container border radius */
    borderRadiusLG?: number;
    /** Content margin */
    marginXS?: number;
    /** Content padding */
    paddingInlinePageContainerContent?: number;
  };
}

interface ProAliasToken extends ProTokenType {
  /** Color primary */
  colorPrimary?: string;
  /** Color success */
  colorSuccess?: string;
  /** Color warning */
  colorWarning?: string;
  /** Color error */
  colorError?: string;
  /** Color info */
  colorInfo?: string;
  /** Color text base */
  colorTextBase?: string;
  /** Color bg base */
  colorBgBase?: string;
}

// Theme configuration objects
const proTheme: {
  /** Default algorithm */
  defaultAlgorithm: (token: any) => any;
  /** Dark algorithm */
  darkAlgorithm: (token: any) => any;
  /** Compact algorithm */
  compactAlgorithm: (token: any) => any;
};

const defaultToken: ProTokenType;
const emptyTheme: Record<string, any>;

Usage Examples:

import { useStyle, proTheme, ProConfigProvider } from "@ant-design/pro-components";

// Custom styled component
const StyledComponent = () => {
  const { wrapSSR, hashId } = useStyle('MyComponent', (token) => ({
    container: {
      backgroundColor: token.colorBgBase,
      padding: token.padding,
      borderRadius: token.borderRadius,
    },
    title: {
      color: token.colorPrimary,
      fontSize: token.fontSizeLG,
    },
  }));

  return wrapSSR(
    <div className={`my-component ${hashId}`}>
      <h1 className="title">Styled Title</h1>
    </div>
  );
};

// Theme provider with custom tokens
const ThemedApp = ({ children }) => {
  return (
    <ProConfigProvider
      token={{
        header: {
          colorBgHeader: '#001529',
          colorHeaderTitle: '#ffffff',
          heightLayoutHeader: 64,
        },
        sider: {
          colorBgMenuItemSelected: '#1890ff',
          colorBgMenuItemHover: 'rgba(24, 144, 255, 0.1)',
        },
        pageContainer: {
          colorBgPageContainer: '#f0f2f5',
          paddingInlinePageContainerContent: 24,
        },
      }}
    >
      {children}
    </ProConfigProvider>
  );
};

Field Type System

Custom field type registration and management for ProField components.

interface ProRenderFieldPropsType {
  /** Render function for read mode */
  render?: (
    text: any,
    props: ProFieldFCRenderProps,
    dom: JSX.Element
  ) => React.ReactNode;
  /** Render function for edit mode */
  renderFormItem?: (
    text: any,
    props: ProFieldFCRenderProps,
    dom: JSX.Element
  ) => React.ReactNode;
  /** Value type identifier */
  valueType?: string;
  /** Default props for the field */
  defaultProps?: any;
}

interface ProFieldFCRenderProps {
  /** Field mode */
  mode: 'read' | 'edit';
  /** Field value */
  value?: any;
  /** Change handler */
  onChange?: (...args: any[]) => void;
  /** Placeholder text */
  placeholder?: string | string[];
  /** Field properties */
  fieldProps?: any;
  /** Readonly state */
  readonly?: boolean;
  /** Disabled state */
  disabled?: boolean;
}

type BaseProFieldFC = React.FC<{
  text: any;
  mode: 'read' | 'edit';
  fieldProps?: any;
}>;

type ProFieldFCMode = 'read' | 'edit';

interface ProSchemaValueEnumType {
  [key: string]: {
    text: React.ReactNode;
    status?: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default';
    color?: string;
    disabled?: boolean;
  };
}

Global Configuration Types

Type definitions for global configuration and shared interfaces.

// Deep partial utility type for configuration objects
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

// Parameters type for requests
type ParamsType = Record<string, any>;

// Configuration context prop types
interface ConfigContextProps {
  /** Auto insert space in buttons */
  autoInsertSpaceInButton?: boolean;
  /** Component size */
  componentSize?: 'small' | 'middle' | 'large';
  /** Csp configuration */
  csp?: {
    nonce?: string;
  };
  /** Direction */
  direction?: 'ltr' | 'rtl';
  /** Disabled state */
  componentDisabled?: boolean;
  /** Form configuration */
  form?: {
    validateMessages?: any;
    requiredMark?: boolean | 'optional';
    colon?: boolean;
  };
  /** Input configuration */
  input?: {
    autoComplete?: string;
  };
  /** Locale configuration */
  locale?: any;
  /** Page header configuration */
  pageHeader?: {
    ghost: boolean;
  };
  /** Prefix class name */
  prefixCls?: string;
  /** Render empty */
  renderEmpty?: (componentName?: string) => React.ReactNode;
  /** Space configuration */
  space?: {
    size?: 'small' | 'middle' | 'large' | number;
  };
  /** Theme configuration */
  theme?: any;
  /** Virtual configuration */
  virtual?: boolean;
}

Provider Usage Patterns

// Common provider patterns
interface ProviderPatterns {
  /** Global configuration */
  global: {
    description: 'App-level configuration for all Pro components';
    usage: 'Wrap entire application';
    features: ['Theme', 'Locale', 'Global settings'];
  };

  /** Feature-specific */
  feature: {
    description: 'Configuration for specific feature areas';
    usage: 'Wrap feature modules';
    features: ['Custom value types', 'Feature-specific themes'];
  };

  /** Page-level */
  page: {
    description: 'Page-specific overrides';
    usage: 'Wrap individual pages';
    features: ['Page themes', 'Locale overrides'];
  };

  /** Component-level */
  component: {
    description: 'Component-specific configuration';
    usage: 'Wrap specific components';
    features: ['Component customization', 'Local overrides'];
  };
}

// Configuration inheritance
interface ConfigInheritance {
  /** Configuration merging order */
  order: [
    'Default configuration',
    'Global ProConfigProvider',
    'Feature ProConfigProvider',
    'Page ProConfigProvider',
    'Component props'
  ];

  /** Merge strategy */
  strategy: {
    theme: 'Deep merge';
    intl: 'Replace';
    valueTypeMap: 'Merge';
    token: 'Deep merge';
  };
}

Advanced Configuration

// Advanced configuration options
interface AdvancedConfig {
  /** Performance optimization */
  performance: {
    /** Enable virtual scrolling */
    virtual?: boolean;
    /** Lazy loading */
    lazy?: boolean;
    /** Debounce search */
    searchDebounce?: number;
  };

  /** Accessibility */
  accessibility: {
    /** Screen reader support */
    ariaLabels?: Record<string, string>;
    /** Keyboard navigation */
    keyboardNav?: boolean;
    /** High contrast mode */
    highContrast?: boolean;
  };

  /** Development */
  development: {
    /** Show prop warnings */
    showWarnings?: boolean;
    /** Debug mode */
    debug?: boolean;
    /** Performance monitoring */
    monitor?: boolean;
  };
}

Version

Tile

Files

providers.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Provider System

Capabilities

ProConfigProvider - Main Configuration Provider

Provider Contexts

Internationalization System

Theming and Styling System

Field Type System

Global Configuration Types

Provider Usage Patterns

Advanced Configuration

providers.mddocs/