0
# Demo System
1

2
Complete demo rendering system supporting multiple demo types with syntax highlighting, interactive controls, and code examples. Essential for documentation sites and component showcases.
3

4
## Capabilities
5

6
### Demo
7

8
Main demo wrapper component that renders different demo types based on configuration.
9

10
```typescript { .api }
11
/**
12
 * Main demo wrapper that renders different demo types
13
 * @param data - Demo configuration object specifying type and props
14
 */
15
interface DemoProps {
16
  data: MantineDemo;
17
}
18

19
function Demo(props: DemoProps): JSX.Element;
20

21
type MantineDemo = 
22
  | ({ type: 'code' } & DemoComponent & CodeDemoProps)
23
  | ({ type: 'configurator' } & DemoComponent & ConfiguratorDemoProps)
24
  | ({ type: 'styles-api' } & DemoComponent & StylesApiDemoProps);
25

26
interface DemoComponent {
27
  component: React.FC<any>;
28
}
29
```
30

31
**Usage Examples:**
32

33
```typescript
34
import { Demo } from "@mantine/ds";
35

36
// Code demo with syntax highlighting
37
const codeDemo = {
38
  type: 'code' as const,
39
  component: MyButton,
40
  code: `<Button variant="filled">Click me</Button>`,
41
  withPadding: true,
42
  centered: true
43
};
44

45
// Interactive configurator demo
46
const configuratorDemo = {
47
  type: 'configurator' as const,
48
  component: MyButton,
49
  code: (props) => `<Button ${Object.entries(props).map(([k,v]) => `${k}="${v}"`).join(' ')}>Button</Button>`,
50
  controls: [
51
    { type: 'select', prop: 'variant', data: ['filled', 'outline', 'light'] },
52
    { type: 'boolean', prop: 'disabled', initialValue: false }
53
  ]
54
};
55

56
// Styles API demo
57
const stylesDemo = {
58
  type: 'styles-api' as const,
59
  component: MyButton,
60
  code: `<Button>Styled Button</Button>`,
61
  data: { selectors: { root: 'button-root', label: 'button-label' } }
62
};
63

64
function ComponentShowcase() {
65
  return (
66
    <div>
67
      <Demo data={codeDemo} />
68
      <Demo data={configuratorDemo} />
69
      <Demo data={stylesDemo} />
70
    </div>
71
  );
72
}
73
```
74

75
### getCodeFileIcon
76

77
Utility function that returns appropriate icons for different file types in code examples.
78

79
```typescript { .api }
80
/**
81
 * Returns appropriate icon for file types based on file extension
82
 * @param fileName - Name of the file including extension
83
 * @returns Icon component for TypeScript/TSX files or CSS files, null for others
84
 */
85
function getCodeFileIcon(fileName: string): React.ReactNode | null;
86
```
87

88
**Usage Examples:**
89

90
```typescript
91
import { getCodeFileIcon } from "@mantine/ds";
92

93
// Returns TypeScript icon
94
const tsIcon = getCodeFileIcon('component.tsx');
95

96
// Returns CSS icon  
97
const cssIcon = getCodeFileIcon('styles.css');
98

99
// Returns null for unknown types
100
const unknownIcon = getCodeFileIcon('readme.txt');
101
```
102

103
## Types
104

105
```typescript { .api }
106
interface CodeDemoProps {
107
  /** Code string or code configuration for syntax highlighting */
108
  code?: string | CodeHighlightTabsCode | CodeHighlightTabsCode[];
109
  /** Whether code block is expanded by default */
110
  defaultExpanded?: boolean;
111
  /** Whether demo area has padding */
112
  withPadding?: boolean;
113
  /** Whether demo content is centered */
114
  centered?: boolean;
115
  /** Maximum width of demo area */
116
  maxWidth?: number | string;
117
  /** Minimum height of demo area */
118
  minHeight?: number | string;
119
  /** Whether demo area is dimmed */
120
  dimmed?: boolean;
121
  /** Whether demo area has striped background */
122
  striped?: boolean;
123
}
124

125
interface ConfiguratorDemoProps {
126
  /** Code string or function that generates code from props */
127
  code: string | ((props: Record<string, any>) => string);
128
  /** Array of control configurations for the interactive configurator */
129
  controls: ConfiguratorControlOptions[];
130
  /** Whether demo area has padding */
131
  withPadding?: boolean;
132
  /** Whether demo content is centered */
133
  centered?: boolean;
134
  /** Maximum width of demo area */
135
  maxWidth?: number | string;
136
  /** Minimum height of demo area */
137
  minHeight?: number | string;
138
  /** Whether demo area is dimmed */
139
  dimmed?: boolean;
140
  /** Whether demo area has striped background */
141
  striped?: boolean;
142
}
143

144
interface StylesApiDemoProps {
145
  /** Styles API data with CSS selectors */
146
  data: { selectors: Record<string, string> };
147
  /** Code string for the demo */
148
  code: string;
149
  /** Whether demo area has padding */
150
  withPadding?: boolean;
151
  /** Whether demo content is centered */
152
  centered?: boolean;
153
  /** Maximum width of demo area */
154
  maxWidth?: number | string;
155
  /** Minimum height of demo area */
156
  minHeight?: number | string;
157
  /** Whether demo area is dimmed */
158
  dimmed?: boolean;
159
  /** Whether demo area has striped background */
160
  striped?: boolean;
161
}
162

163
interface CodeHighlightTabsCode {
164
  code: string;
165
  fileName: string;
166
  language: string;
167
}
168
```