@mantine/code-highlight 7.3.0-alpha.0 → 7.3.0-alpha.2

package/src/CodeHighlight.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import cx from 'clsx';
-import {
-  Box,
-  BoxProps,
-  StylesApiProps,
-  factory,
-  ElementProps,
-  useProps,
-  useStyles,
-  CopyButton,
-  Tooltip,
-  ActionIcon,
-  ScrollArea,
-  Factory,
-} from '@mantine/core';
-import { useHighlight } from './use-highlight';
-import { CopyIcon } from './CopyIcon';
-import _classes from './CodeHighlight.module.css';
-import themeClasses from './CodeHighlight.theme.module.css';
-
-const classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };
-
-export type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';
-
-export interface CodeHighlightProps
-  extends BoxProps,
-    StylesApiProps<CodeHighlightFactory>,
-    ElementProps<'div'> {
-  /** Code to highlight */
-  code: string;
-
-  /** Code language, `'tsx'` by default */
-  language?: string;
-
-  /** Determines whether copy button should be displayed, `true` by default */
-  withCopyButton?: boolean;
-
-  /** Copy tooltip label, `'Copy code'` by default */
-  copyLabel?: string;
-
-  /** Copied tooltip label, `'Copied'` by default */
-  copiedLabel?: string;
-
-  /** Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), `false` by default */
-  highlightOnClient?: boolean;
-}
-
-export type CodeHighlightFactory = Factory<{
-  props: CodeHighlightProps;
-  ref: HTMLDivElement;
-  stylesNames: CodeHighlightStylesNames;
-}>;
-
-const defaultProps: Partial<CodeHighlightProps> = {
-  copyLabel: 'Copy code',
-  copiedLabel: 'Copied',
-  language: 'tsx',
-  withCopyButton: true,
-};
-
-export const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {
-  const props = useProps('CodeHighlight', defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    vars,
-    children,
-    code,
-    copiedLabel,
-    copyLabel,
-    language,
-    withCopyButton,
-    highlightOnClient,
-    ...others
-  } = props;
-
-  const getStyles = useStyles<CodeHighlightFactory>({
-    name: 'CodeHighlight',
-    props,
-    classes,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-  });
-
-  const getCodeProps = useHighlight({
-    code,
-    language: language!,
-    highlightOnClient,
-  });
-
-  return (
-    <Box {...getStyles('root')} ref={ref} {...others} dir="ltr">
-      {withCopyButton && (
-        <CopyButton value={code.trim()}>
-          {({ copied, copy }) => (
-            <Tooltip label={copied ? copiedLabel : copyLabel} fz="sm" position="left">
-              <ActionIcon onClick={copy} variant="none" {...getStyles('copy')}>
-                <CopyIcon copied={copied} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-        </CopyButton>
-      )}
-
-      <ScrollArea type="hover" dir="ltr" offsetScrollbars={false}>
-        <pre {...getStyles('pre')}>
-          <code {...getStyles('code')} {...getCodeProps()} />
-        </pre>
-      </ScrollArea>
-    </Box>
-  );
-});
-
-CodeHighlight.displayName = '@mantine/core/CodeHighlight';
-CodeHighlight.classes = classes;

package/src/CodeHighlightTabs.test.tsx

@@ -1,41 +0,0 @@
-import { tests } from '@mantine/tests';
-import {
-  CodeHighlightTabs,
-  CodeHighlightTabsProps,
-  CodeHighlightTabsStylesNames,
-} from './CodeHighlightTabs';
-
-const defaultProps: CodeHighlightTabsProps = {
-  code: [
-    { fileName: 'Demo.tsx', language: 'tsx', code: 'test-tsx' },
-    { fileName: 'Demo.module.css', language: 'css', code: 'test-css' },
-  ],
-};
-
-describe('@mantine/code-highlight/CodeHighlightTabs', () => {
-  tests.itSupportsSystemProps<CodeHighlightTabsProps, CodeHighlightTabsStylesNames>({
-    component: CodeHighlightTabs,
-    props: defaultProps,
-    polymorphic: true,
-    styleProps: true,
-    extend: true,
-    variant: true,
-    size: true,
-    id: true,
-    classes: true,
-    refType: HTMLDivElement,
-    displayName: '@mantine/core/CodeHighlightTabs',
-    stylesApiSelectors: [
-      'root',
-      'code',
-      'codeWrapper',
-      'control',
-      'controls',
-      'file',
-      'files',
-      'header',
-      'pre',
-      'showCodeButton',
-    ],
-  });
-});

package/src/CodeHighlightTabs.tsx

@@ -1,264 +0,0 @@
-import React from 'react';
-import hljs from 'highlight.js';
-import cx from 'clsx';
-import { useUncontrolled } from '@mantine/hooks';
-import {
-  Box,
-  BoxProps,
-  StylesApiProps,
-  factory,
-  ElementProps,
-  useProps,
-  useStyles,
-  CopyButton,
-  Tooltip,
-  ActionIcon,
-  UnstyledButton,
-  ScrollArea,
-  createVarsResolver,
-  rem,
-  Factory,
-} from '@mantine/core';
-import { CopyIcon } from './CopyIcon';
-import { FileIcon } from './FileIcon';
-import { ExpandIcon } from './ExpandIcon';
-import _classes from './CodeHighlight.module.css';
-import themeClasses from './CodeHighlight.theme.module.css';
-
-const classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };
-
-export type CodeHighlightTabsStylesNames =
-  | 'root'
-  | 'code'
-  | 'codeWrapper'
-  | 'showCodeButton'
-  | 'pre'
-  | 'controls'
-  | 'control'
-  | 'header'
-  | 'file'
-  | 'files'
-  | 'fileIcon';
-
-export type CodeHighlightTabsCssVariables = {
-  root: '--ch-max-collapsed-height';
-};
-
-export interface CodeHighlightTabsCode {
-  language?: string;
-  code: string;
-  fileName?: string;
-  icon?: React.ReactNode;
-}
-
-export interface CodeHighlightTabsProps
-  extends BoxProps,
-    StylesApiProps<CodeHighlightTabsFactory>,
-    ElementProps<'div'> {
-  /** Code to highlight with meta data (file name and icon) */
-  code: CodeHighlightTabsCode | CodeHighlightTabsCode[];
-
-  /** Default active tab index */
-  defaultActiveTab?: number;
-
-  /** Index of controlled active tab state */
-  activeTab?: number;
-
-  /** Called when tab changes */
-  onTabChange?: (tab: number) => void;
-
-  /** Determines whether header with file names and copy button should be rendered, `true` by default */
-  withHeader?: boolean;
-
-  /** Copy tooltip label, `'Copy code'` by default */
-  copyLabel?: string;
-
-  /** Copied tooltip label, `'Copied'` by default */
-  copiedLabel?: string;
-
-  /** Function that returns icon based on file name */
-  getFileIcon?: (fileName: string) => React.ReactNode;
-
-  /** `max-height` of code in collapsed state */
-  maxCollapsedHeight?: React.CSSProperties['maxHeight'];
-
-  /** Controlled expanded state */
-  expanded?: boolean;
-
-  /** Uncontrolled expanded state initial value */
-  defaultExpanded?: boolean;
-
-  /** Called when expanded state changes */
-  onExpandedChange?: (expanded: boolean) => void;
-
-  /** Expand button label and tooltip, `'Expand code'` by default */
-  expandCodeLabel?: string;
-
-  /** Collapse button label and tooltip, `'Collapse code'` by default */
-  collapseCodeLabel?: string;
-
-  /** Determines whether to show the expand button, `false` by default */
-  withExpandButton?: boolean;
-}
-
-export type CodeHighlightTabsFactory = Factory<{
-  props: CodeHighlightTabsProps;
-  ref: HTMLDivElement;
-  stylesNames: CodeHighlightTabsStylesNames;
-}>;
-
-const defaultProps: Partial<CodeHighlightTabsProps> = {
-  withHeader: true,
-  copyLabel: 'Copy code',
-  copiedLabel: 'Copied',
-  maxCollapsedHeight: rem('8rem'),
-  expandCodeLabel: 'Expand code',
-  collapseCodeLabel: 'Collapse code',
-};
-
-const varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({
-  root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },
-}));
-
-export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref) => {
-  const props = useProps('CodeHighlightTabs', defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    vars,
-    children,
-    code,
-    defaultActiveTab,
-    activeTab,
-    onTabChange,
-    withHeader,
-    copiedLabel,
-    copyLabel,
-    getFileIcon,
-    maxCollapsedHeight,
-    expanded,
-    defaultExpanded,
-    onExpandedChange,
-    expandCodeLabel,
-    collapseCodeLabel,
-    withExpandButton,
-    ...others
-  } = props;
-
-  const getStyles = useStyles<CodeHighlightTabsFactory>({
-    name: 'CodeHighlightTabs',
-    props,
-    classes,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    vars,
-    varsResolver,
-  });
-
-  const [value, setValue] = useUncontrolled({
-    defaultValue: defaultActiveTab,
-    value: activeTab,
-    finalValue: 0,
-    onChange: onTabChange,
-  });
-
-  const [_expanded, setExpanded] = useUncontrolled({
-    defaultValue: defaultExpanded,
-    value: expanded,
-    finalValue: true,
-    onChange: onExpandedChange,
-  });
-
-  const nodes = Array.isArray(code) ? code : [code];
-  const currentCode = nodes[value];
-
-  const highlighted = hljs.highlight(currentCode.code.trim(), {
-    language: currentCode.language || 'plaintext',
-  }).value;
-
-  const files = nodes.map((node, index) => (
-    <UnstyledButton
-      {...getStyles('file')}
-      key={node.fileName}
-      mod={{ active: index === value }}
-      onClick={() => setValue(index)}
-    >
-      <FileIcon
-        fileIcon={node.icon}
-        getFileIcon={getFileIcon}
-        fileName={node.fileName}
-        {...getStyles('fileIcon')}
-      />
-      <span>{node.fileName}</span>
-    </UnstyledButton>
-  ));
-
-  return (
-    <Box {...getStyles('root')} mod={{ collapsed: !_expanded }} ref={ref} {...others} dir="ltr">
-      {withHeader && (
-        <div {...getStyles('header')}>
-          <ScrollArea type="never" dir="ltr" offsetScrollbars={false}>
-            <div {...getStyles('files')}>{files}</div>
-          </ScrollArea>
-          <div {...getStyles('controls')}>
-            {withExpandButton && (
-              <Tooltip
-                label={_expanded ? collapseCodeLabel : expandCodeLabel}
-                fz="sm"
-                position="left"
-              >
-                <ActionIcon
-                  onClick={() => setExpanded(!_expanded)}
-                  variant="none"
-                  aria-label={_expanded ? collapseCodeLabel : expandCodeLabel}
-                  {...getStyles('control')}
-                >
-                  <ExpandIcon expanded={_expanded} />
-                </ActionIcon>
-              </Tooltip>
-            )}
-
-            <CopyButton value={currentCode.code.trim()}>
-              {({ copied, copy }) => (
-                <Tooltip label={copied ? copiedLabel : copyLabel} fz="sm" position="left">
-                  <ActionIcon
-                    onClick={copy}
-                    variant="none"
-                    {...getStyles('control')}
-                    aria-label={copied ? copiedLabel : copyLabel}
-                  >
-                    <CopyIcon copied={copied} />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-            </CopyButton>
-          </div>
-        </div>
-      )}
-
-      <ScrollArea type="auto" dir="ltr" offsetScrollbars={false}>
-        <Box {...getStyles('codeWrapper')} mod={{ expanded: _expanded }}>
-          <pre {...getStyles('pre')}>
-            <code {...getStyles('code')} dangerouslySetInnerHTML={{ __html: highlighted }} />
-          </pre>
-        </Box>
-      </ScrollArea>
-      <UnstyledButton
-        {...getStyles('showCodeButton')}
-        mod={{ hidden: _expanded }}
-        onClick={() => setExpanded(true)}
-      >
-        {expandCodeLabel}
-      </UnstyledButton>
-    </Box>
-  );
-});
-
-CodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';
-CodeHighlightTabs.classes = classes;

package/src/CopyIcon.tsx

@@ -1,37 +0,0 @@
-import { rem } from '@mantine/core';
-import React from 'react';
-
-interface CopyIconProps extends React.ComponentPropsWithoutRef<'svg'> {
-  copied: boolean;
-}
-
-export function CopyIcon({ copied, style, ...others }: CopyIconProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      style={{ width: rem(18), height: rem(18), ...style }}
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...others}
-    >
-      {copied ? (
-        <>
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M5 12l5 5l10 -10"></path>
-        </>
-      ) : (
-        <>
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path>
-          <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
-        </>
-      )}
-    </svg>
-  );
-}
-
-CopyIcon.displayName = '@mantine/code-highlight/CopyIcon';

package/src/ExpandIcon.tsx

@@ -1,42 +0,0 @@
-import { rem } from '@mantine/core';
-import React from 'react';
-
-interface ExpandIconProps extends React.ComponentPropsWithoutRef<'svg'> {
-  expanded: boolean;
-}
-
-export function ExpandIcon({ expanded, style, ...others }: ExpandIconProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      style={{ width: rem(18), height: rem(18), ...style }}
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...others}
-    >
-      {expanded ? (
-        <>
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M12 13v-8l-3 3m6 0l-3 -3" />
-          <path d="M9 17l1 0" />
-          <path d="M14 17l1 0" />
-          <path d="M19 17l1 0" />
-          <path d="M4 17l1 0" />
-        </>
-      ) : (
-        <>
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M12 11v8l3 -3m-6 0l3 3" />
-          <path d="M9 7l1 0" />
-          <path d="M14 7l1 0" />
-          <path d="M19 7l1 0" />
-          <path d="M4 7l1 0" />
-        </>
-      )}
-    </svg>
-  );
-}

package/src/FileIcon.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-interface FileIconProps {
-  fileName: string | undefined;
-  getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;
-  fileIcon: React.ReactNode | undefined;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export function FileIcon({ fileIcon, fileName, getFileIcon, className, style }: FileIconProps) {
-  if (fileIcon) {
-    return (
-      <span className={className} style={style}>
-        {fileIcon}
-      </span>
-    );
-  }
-
-  if (getFileIcon && fileName) {
-    return (
-      <span className={className} style={style}>
-        {getFileIcon(fileName)}
-      </span>
-    );
-  }
-
-  return null;
-}

package/src/InlineCodeHighlight.test.tsx

@@ -1,25 +0,0 @@
-import { tests } from '@mantine/tests';
-import {
-  InlineCodeHighlight,
-  InlineCodeHighlightProps,
-  InlineCodeHighlightStylesNames,
-} from './InlineCodeHighlight';
-
-const defaultProps: InlineCodeHighlightProps = {
-  code: 'test-code',
-};
-
-describe('@mantine/code-highlight/InlineCodeHighlight', () => {
-  tests.itSupportsSystemProps<InlineCodeHighlightProps, InlineCodeHighlightStylesNames>({
-    component: InlineCodeHighlight,
-    props: defaultProps,
-    polymorphic: true,
-    styleProps: true,
-    extend: true,
-    variant: true,
-    size: true,
-    refType: HTMLElement,
-    displayName: '@mantine/core/InlineCodeHighlight',
-    stylesApiSelectors: ['code'],
-  });
-});

package/src/InlineCodeHighlight.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import cx from 'clsx';
-import {
-  Box,
-  BoxProps,
-  StylesApiProps,
-  factory,
-  ElementProps,
-  useProps,
-  useStyles,
-  Factory,
-} from '@mantine/core';
-import hljs from 'highlight.js';
-import _classes from './CodeHighlight.module.css';
-import themeClasses from './CodeHighlight.theme.module.css';
-
-const classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };
-
-export type InlineCodeHighlightStylesNames = 'code';
-
-export interface InlineCodeHighlightProps
-  extends BoxProps,
-    StylesApiProps<InlineCodeHighlightFactory>,
-    ElementProps<'div'> {
-  /** Code to highlight */
-  code: string;
-
-  /** Code language, `'tsx'` by default */
-  language?: string;
-}
-
-export type InlineCodeHighlightFactory = Factory<{
-  props: InlineCodeHighlightProps;
-  ref: HTMLElement;
-  stylesNames: InlineCodeHighlightStylesNames;
-}>;
-
-const defaultProps: Partial<InlineCodeHighlightProps> = {
-  language: 'tsx',
-};
-
-export const InlineCodeHighlight = factory<InlineCodeHighlightFactory>((_props, ref) => {
-  const props = useProps('InlineCodeHighlight', defaultProps, _props);
-  const { classNames, className, style, styles, unstyled, vars, code, language, ...others } = props;
-
-  const getStyles = useStyles<InlineCodeHighlightFactory>({
-    name: 'InlineCodeHighlight',
-    props,
-    classes,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    rootSelector: 'code',
-  });
-
-  const highlighted = hljs.highlight(code.trim(), { language: language! }).value;
-
-  return (
-    <Box
-      {...getStyles('code')}
-      component="code"
-      ref={ref}
-      {...others}
-      dangerouslySetInnerHTML={{ __html: highlighted }}
-    />
-  );
-});
-
-InlineCodeHighlight.displayName = '@mantine/core/InlineCodeHighlight';

package/src/index.ts

@@ -1,20 +0,0 @@
-export { CodeHighlightTabs } from './CodeHighlightTabs';
-export { CodeHighlight } from './CodeHighlight';
-export { InlineCodeHighlight } from './InlineCodeHighlight';
-export type {
-  CodeHighlightTabsFactory,
-  CodeHighlightTabsStylesNames,
-  CodeHighlightTabsProps,
-  CodeHighlightTabsCode,
-  CodeHighlightTabsCssVariables,
-} from './CodeHighlightTabs';
-export type {
-  CodeHighlightFactory,
-  CodeHighlightProps,
-  CodeHighlightStylesNames,
-} from './CodeHighlight';
-export type {
-  InlineCodeHighlightFactory,
-  InlineCodeHighlightProps,
-  InlineCodeHighlightStylesNames,
-} from './InlineCodeHighlight';

package/src/use-highlight.ts

@@ -1,35 +0,0 @@
-import { useState, useEffect } from 'react';
-import hljs from 'highlight.js';
-
-interface UseHighlightInput {
-  code: string;
-  language: string;
-  highlightOnClient: boolean | undefined;
-}
-
-export function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {
-  const lang = hljs.getLanguage(language) ? language : 'plaintext';
-  const getHighlightedCode = () => hljs.highlight(code.trim(), { language: lang }).value;
-  const [highlighted, setHighlighted] = useState(!highlightOnClient);
-  const [highlightedCode, setHighlightedCode] = useState(
-    highlightOnClient ? code : getHighlightedCode()
-  );
-
-  const getCodeProps = () =>
-    highlighted
-      ? { dangerouslySetInnerHTML: { __html: highlightedCode } }
-      : { children: code.trim() };
-
-  useEffect(() => {
-    if (highlightOnClient) {
-      setHighlightedCode(getHighlightedCode());
-      setHighlighted(true);
-    }
-  }, []);
-
-  useEffect(() => {
-    setHighlightedCode(getHighlightedCode());
-  }, [code]);
-
-  return getCodeProps;
-}