tessl/npm-mantine--ds

Internal Mantine components used on *.mantine.dev websites including Demo, MantineLogo, SearchControl, HeaderControl, and SocialButton components

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Demo System

Name: tessl/npm-mantine--ds
Author: tessl

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

Capabilities

Demo

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

/**
 * Main demo wrapper that renders different demo types
 * @param data - Demo configuration object specifying type and props
 */
interface DemoProps {
  data: MantineDemo;
}

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

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

interface DemoComponent {
  component: React.FC<any>;
}

Usage Examples:

import { Demo } from "@mantine/ds";

// Code demo with syntax highlighting
const codeDemo = {
  type: 'code' as const,
  component: MyButton,
  code: `<Button variant="filled">Click me</Button>`,
  withPadding: true,
  centered: true
};

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

// Styles API demo
const stylesDemo = {
  type: 'styles-api' as const,
  component: MyButton,
  code: `<Button>Styled Button</Button>`,
  data: { selectors: { root: 'button-root', label: 'button-label' } }
};

function ComponentShowcase() {
  return (
    <div>
      <Demo data={codeDemo} />
      <Demo data={configuratorDemo} />
      <Demo data={stylesDemo} />
    </div>
  );
}

getCodeFileIcon

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

/**
 * Returns appropriate icon for file types based on file extension
 * @param fileName - Name of the file including extension
 * @returns Icon component for TypeScript/TSX files or CSS files, null for others
 */
function getCodeFileIcon(fileName: string): React.ReactNode | null;

Usage Examples:

import { getCodeFileIcon } from "@mantine/ds";

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

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

// Returns null for unknown types
const unknownIcon = getCodeFileIcon('readme.txt');

Types

interface CodeDemoProps {
  /** Code string or code configuration for syntax highlighting */
  code?: string | CodeHighlightTabsCode | CodeHighlightTabsCode[];
  /** Whether code block is expanded by default */
  defaultExpanded?: boolean;
  /** Whether demo area has padding */
  withPadding?: boolean;
  /** Whether demo content is centered */
  centered?: boolean;
  /** Maximum width of demo area */
  maxWidth?: number | string;
  /** Minimum height of demo area */
  minHeight?: number | string;
  /** Whether demo area is dimmed */
  dimmed?: boolean;
  /** Whether demo area has striped background */
  striped?: boolean;
}

interface ConfiguratorDemoProps {
  /** Code string or function that generates code from props */
  code: string | ((props: Record<string, any>) => string);
  /** Array of control configurations for the interactive configurator */
  controls: ConfiguratorControlOptions[];
  /** Whether demo area has padding */
  withPadding?: boolean;
  /** Whether demo content is centered */
  centered?: boolean;
  /** Maximum width of demo area */
  maxWidth?: number | string;
  /** Minimum height of demo area */
  minHeight?: number | string;
  /** Whether demo area is dimmed */
  dimmed?: boolean;
  /** Whether demo area has striped background */
  striped?: boolean;
}

interface StylesApiDemoProps {
  /** Styles API data with CSS selectors */
  data: { selectors: Record<string, string> };
  /** Code string for the demo */
  code: string;
  /** Whether demo area has padding */
  withPadding?: boolean;
  /** Whether demo content is centered */
  centered?: boolean;
  /** Maximum width of demo area */
  maxWidth?: number | string;
  /** Minimum height of demo area */
  minHeight?: number | string;
  /** Whether demo area is dimmed */
  dimmed?: boolean;
  /** Whether demo area has striped background */
  striped?: boolean;
}

interface CodeHighlightTabsCode {
  code: string;
  fileName: string;
  language: string;
}