@mantine/code-highlight 7.0.0-alpha.1

package/src/CodeHighlightTabs.tsx

@@ -0,0 +1,252 @@
+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';
+
+export type CodeHighlightTabsVariant = string;
+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, `'6rem'` by default */
+  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: '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!,
+  }).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} />
+      <span>{node.fileName}</span>
+    </UnstyledButton>
+  ));
+
+  return (
+    <Box {...getStyles('root')} 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"
+                  {...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')}>
+                    <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)}
+      >
+        Expand code
+      </UnstyledButton>
+    </Box>
+  );
+});
+
+CodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';

package/src/CopyIcon.tsx

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,42 @@
+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

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

package/src/InlineCodeHighlight.test.tsx

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,72 @@
+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 type InlineCodeHighlightVariant = string;
+
+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

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

package/src/use-highlight.ts

@@ -0,0 +1,30 @@
+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 getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).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);
+    }
+  }, []);
+
+  return getCodeProps;
+}