@mantine/code-highlight 7.0.0-alpha.1

package/src/CodeHighlight.module.css

@@ -0,0 +1,153 @@
+.code {
+  display: inline-block;
+  padding: rem(1px) rem(3px);
+  font-size: rem(13px);
+  border-radius: var(--mantine-radius-xs);
+  line-height: var(--_code-line-height, var(--mantine-line-height));
+  font-family: var(--mantine-font-family-monospace);
+}
+
+.pre {
+  display: block;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  margin: 0;
+  --_code-line-height: 1.7;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.controls {
+  display: flex;
+  margin-top: rem(7px);
+  margin-right: rem(7px);
+}
+
+.copy,
+.control {
+  background-color: transparent;
+  opacity: 0.8;
+  margin: 0;
+
+  @mixin hover {
+    opacity: 1;
+  }
+
+  @media (max-width: 40em) {
+    display: none;
+  }
+}
+
+.copy {
+  position: absolute;
+  top: rem(5px);
+  right: rem(5px);
+  z-index: 1;
+}
+
+.file {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--mantine-font-size-xs);
+  gap: rem(7px);
+  padding: rem(7px) rem(12px);
+  font-family: var(--mantine-font-family-monospace);
+  font-weight: 700;
+  line-height: 1;
+  user-select: none;
+  cursor: var(--_file-cursor);
+  border: rem(1px) solid var(--_file-bd);
+  border-top: 0;
+  border-left: 0;
+  color: var(--_file-color);
+  opacity: var(--_file-opacity);
+  background-color: var(--_file-bg);
+
+  @mixin hover {
+    --_file-opacity: 1;
+  }
+
+  &:last-of-type {
+    border-bottom-right-radius: var(--mantine-radius-sm);
+  }
+
+  &:only-child {
+    --_file-cursor: default;
+  }
+
+  &[data-active] {
+    --_file-opacity: 1;
+    --_file-color: var(--_file-active-color) !important;
+    --_file-bg: var(--_file-active-bg);
+  }
+
+  --_file-opacity: 0.8;
+  --_file-cursor: pointer;
+
+  @mixin light {
+    --_file-color: var(--mantine-color-gray-8);
+    --_file-bd: var(--mantine-color-gray-2);
+    --_file-active-bg: var(--mantine-color-white);
+    --_file-active-color: var(--mantine-color-black);
+  }
+
+  @mixin dark {
+    --_file-color: var(--mantine-color-dark-0);
+    --_file-bd: var(--mantine-color-dark-4);
+    --_file-active-bg: var(--mantine-color-dark-6);
+    --_file-active-color: var(--mantine-color-white);
+  }
+}
+
+.files {
+  display: flex;
+}
+
+.codeWrapper {
+  max-height: var(--ch-max-collapsed-height);
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image: linear-gradient(0deg, var(--_background) 16%, rgba(0, 0, 0, 0) 100%);
+    border-radius: calc(var(--mantine-radius-md) - rem(1px));
+  }
+
+  &[data-expanded] {
+    max-height: none;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
+.showCodeButton {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-anchor);
+  width: 100%;
+  text-align: center;
+  padding-top: var(--mantine-spacing-xs);
+  padding-bottom: var(--mantine-spacing-xs);
+
+  &[data-hidden] {
+    display: none;
+  }
+}
+
+.root {
+  margin-top: 0;
+  position: relative;
+}

package/src/CodeHighlight.story.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import { CodeHighlightTabs } from './CodeHighlightTabs';
+import { CodeHighlight } from './CodeHighlight';
+import { InlineCodeHighlight } from './InlineCodeHighlight';
+
+export default { title: 'CodeHighlight' };
+
+const tsxCode = `
+import { forwardRef } from 'react';
+import { Group, Avatar, Text, Select } from '@mantine/core';
+
+// Data for select
+// You can use any data structure you want
+
+const data = [
+  {
+    image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
+    label: 'Bender Bending Rodríguez',
+    value: 'Bender Bending Rodríguez',
+    description: 'Fascinated with cooking',
+  },
+
+  {
+    image: 'https://img.icons8.com/clouds/256/000000/futurama-mom.png',
+    label: 'Carol Miller',
+    value: 'Carol Miller',
+    description: 'One of the richest people on Earth',
+  },
+  {
+    image: 'https://img.icons8.com/clouds/256/000000/homer-simpson.png',
+    label: 'Homer Simpson',
+    value: 'Homer Simpson',
+    description: 'Overweight, lazy, and often ignorant',
+  },
+  {
+    image: 'https://img.icons8.com/clouds/256/000000/spongebob-squarepants.png',
+    label: 'Spongebob Squarepants',
+    value: 'Spongebob Squarepants',
+    description: 'Not just a sponge',
+  },
+];
+
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  image: string;
+  label: string;
+  description: string;
+}
+
+const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
+  ({ image, label, description, ...others }: ItemProps, ref) => (
+    <div ref={ref} {...others}>
+      <Group noWrap>
+        <Avatar src={image} />
+
+        <div>
+          <Text size="sm">{label}</Text>
+          <Text size="xs" opacity={0.65}>
+            {description}
+          </Text>
+        </div>
+      </Group>
+    </div>
+  )
+);
+
+function Demo() {
+  return (
+    <Select
+      label="Choose employee of the month"
+      placeholder="Pick one"
+      itemComponent={SelectItem}
+      data={data}
+      searchable
+      maxDropdownHeight={400}
+      nothingFound="Nobody here"
+      filter={(value, item) =>
+        item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
+        item.description.toLowerCase().includes(value.toLowerCase().trim())
+      }
+    />
+  );
+}
+`;
+
+const cssCode = `.root {
+  --ai-size-xs: rem(18px);
+  --ai-size-sm: rem(22px);
+  --ai-size-md: rem(28px);
+  --ai-size-lg: rem(34px);
+  --ai-size-xl: rem(44px);
+
+  --_bg: var(--ai-bg);
+  --_color: var(--ai-color);
+  --_cursor: pointer;
+
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  user-select: none;
+
+  width: var(--ai-size);
+  height: var(--ai-size);
+  min-width: var(--ai-size);
+  min-height: var(--ai-size);
+  border-radius: var(--ai-radius);
+  background: var(--_bg);
+  color: var(--_color);
+  border: var(--ai-bd);
+  cursor: var(--_cursor);
+
+  @mixin hover {
+    &:not([data-loading]):not(:disabled):not([data-disabled]) {
+      --_bg: var(--ai-hover);
+    }
+  }
+
+  @mixin light {
+    --_loading-overlay-bg: rgba(255, 255, 255, 0.35);
+    --_disabled-bg: var(--mantine-color-gray-1);
+    --_disabled-color: var(--mantine-color-gray-5);
+  }
+
+  @mixin dark {
+    --_loading-overlay-bg: rgba(0, 0, 0, 0.35);
+    --_disabled-bg: var(--mantine-color-dark-6);
+    --_disabled-color: var(--mantine-color-dark-3);
+  }
+
+  &[data-loading] {
+    --_cursor: not-allowed;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: rem(-1px);
+      border-radius: var(--ai-radius);
+      background-color: var(--_loading-overlay_bg);
+    }
+  }
+
+  &:disabled:not([data-loading]),
+  &[data-disabled]:not([data-loading]) {
+    --_cursor: not-allowed;
+    --_bg: var(--_disabled-bg);
+    --_color: var(--_disabled-color);
+  }
+}
+
+.loader {
+  z-index: 1;
+}
+`;
+
+function TsIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width={18} height={18} {...props}>
+      <path fill="#1976d2" d="M6 6h36v36H6z" />
+      <path
+        fill="#fff"
+        d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"
+      />
+    </svg>
+  );
+}
+
+function CSSIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width={18} height={18} {...props}>
+      <path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z" />
+      <path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z" />
+      <path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z" />
+      <path
+        fill="#EEE"
+        d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"
+      />
+    </svg>
+  );
+}
+
+export function Usage() {
+  return (
+    <div style={{ padding: 40 }}>
+      <CodeHighlight code={tsxCode} highlightOnClient />
+    </div>
+  );
+}
+
+export function Tabs() {
+  return (
+    <div style={{ padding: 40 }}>
+      <CodeHighlightTabs
+        code={[
+          { code: tsxCode, language: 'tsx', icon: <TsIcon />, fileName: 'Component.tsx' },
+          { code: cssCode, language: 'css', icon: <CSSIcon />, fileName: 'Component.module.css' },
+        ]}
+        defaultExpanded={false}
+      >
+        {tsxCode}
+      </CodeHighlightTabs>
+    </div>
+  );
+}
+
+export function Inline() {
+  return (
+    <div style={{ padding: 40 }}>
+      <p>
+        Hello there! this is{' '}
+        <InlineCodeHighlight code="import React from 'react';" language="tsx" /> some code Lorem
+        ipsum dolor sit amet consectetur adipisicing elit. Aliquid reiciendis, facilis repudiandae
+        vero mollitia non dolorum cupiditate assumenda odio unde quaerat beatae explicabo veritatis
+        nam temporibus! Quibusdam quod enim voluptatibus?
+      </p>
+    </div>
+  );
+}

package/src/CodeHighlight.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, tests } from '@mantine/tests';
+import { CodeHighlight, CodeHighlightProps, CodeHighlightStylesNames } from './CodeHighlight';
+
+const defaultProps: CodeHighlightProps = {
+  code: 'test-code',
+};
+
+describe('@mantine/code-highlight/CodeHighlight', () => {
+  tests.itSupportsSystemProps<CodeHighlightProps, CodeHighlightStylesNames>({
+    component: CodeHighlight,
+    props: defaultProps,
+    polymorphic: true,
+    styleProps: true,
+    extend: true,
+    variant: true,
+    size: true,
+    refType: HTMLDivElement,
+    displayName: '@mantine/core/CodeHighlight',
+    stylesApiSelectors: ['root', 'code', 'copy', 'pre'],
+  });
+
+  it('renders copy button based on withCopyButton prop', () => {
+    const { container, rerender } = render(<CodeHighlight {...defaultProps} withCopyButton />);
+    expect(container.querySelector('.mantine-CodeHighlight-copy')).toBeInTheDocument();
+
+    rerender(<CodeHighlight {...defaultProps} withCopyButton={false} />);
+    expect(container.querySelector('.mantine-CodeHighlight-copy')).not.toBeInTheDocument();
+  });
+});

package/src/CodeHighlight.theme.module.css

@@ -0,0 +1,95 @@
+.theme {
+  color: var(--_color);
+  background: var(--_background);
+
+  @mixin light {
+    --_color: var(--mantine-color-gray-7);
+    --_background: var(--mantine-color-gray-0);
+    --code-comment-color: var(--mantine-color-gray-6);
+    --code-keyword-color: var(--mantine-color-violet-8);
+    --code-tag-color: var(--mantine-color-red-9);
+    --code-literal-color: var(--mantine-color-blue-6);
+    --code-string-color: var(--mantine-color-blue-9);
+    --code-variable-color: var(--mantine-color-lime-9);
+    --code-class-color: var(--mantine-color-orange-9);
+  }
+
+  @mixin dark {
+    --_color: var(--mantine-color-dark-1);
+    --_background: var(--mantine-color-dark-8);
+    --code-comment-color: var(--mantine-color-dark-3);
+    --code-keyword-color: var(--mantine-color-violet-3);
+    --code-tag-color: var(--mantine-color-yellow-4);
+    --code-literal-color: var(--mantine-color-blue-4);
+    --code-string-color: var(--mantine-color-green-6);
+    --code-variable-color: var(--mantine-color-blue-2);
+    --code-class-color: var(--mantine-color-orange-5);
+  }
+
+  :global(.hljs-comment),
+  :global(.hljs-quote) {
+    font-style: italic;
+    color: var(--code-comment-color);
+  }
+
+  :global(.hljs-doctag),
+  :global(.hljs-formula),
+  :global(.hljs-keyword) {
+    color: var(--code-keyword-color);
+  }
+
+  :global(.hljs-deletion),
+  :global(.hljs-name),
+  :global(.hljs-section),
+  :global(.hljs-selector-tag),
+  :global(.hljs-subst) {
+    color: var(--code-tag-color);
+  }
+
+  :global(.hljs-literal) {
+    color: var(--code-literal-color);
+  }
+
+  :global(.hljs-addition),
+  :global(.hljs-attribute),
+  :global(.hljs-meta .hljs-string),
+  :global(.hljs-regexp),
+  :global(.hljs-string) {
+    color: var(--code-string-color);
+  }
+
+  :global(.hljs-attr),
+  :global(.hljs-number),
+  :global(.hljs-selector-attr),
+  :global(.hljs-selector-class),
+  :global(.hljs-selector-pseudo),
+  :global(.hljs-template-variable),
+  :global(.hljs-type),
+  :global(.hljs-variable) {
+    color: var(--code-variable-color);
+  }
+
+  :global(.hljs-bullet),
+  :global(.hljs-link),
+  :global(.hljs-meta),
+  :global(.hljs-selector-id),
+  :global(.hljs-symbol),
+  :global(.hljs-title),
+  :global(.hljs-built_in),
+  :global(.hljs-class .hljs-title),
+  :global(.hljs-title.class_) {
+    color: var(--code-class-color);
+  }
+
+  :global(.hljs-emphasis) {
+    font-style: italic;
+  }
+
+  :global(.hljs-strong) {
+    font-weight: 700;
+  }
+
+  :global(.hljs-link) {
+    text-decoration: underline;
+  }
+}

package/src/CodeHighlight.tsx

@@ -0,0 +1,123 @@
+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 type CodeHighlightVariant = string;
+
+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;
+  variant: CodeHighlightVariant;
+}>;
+
+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="auto" dir="ltr" offsetScrollbars={false}>
+        <pre {...getStyles('pre')}>
+          <code {...getStyles('code')} {...getCodeProps()} />
+        </pre>
+      </ScrollArea>
+    </Box>
+  );
+});
+
+CodeHighlight.displayName = '@mantine/core/CodeHighlight';

package/src/CodeHighlightTabs.test.tsx

@@ -0,0 +1,39 @@
+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,
+    refType: HTMLDivElement,
+    displayName: '@mantine/core/CodeHighlightTabs',
+    stylesApiSelectors: [
+      'root',
+      'code',
+      'codeWrapper',
+      'control',
+      'controls',
+      'file',
+      'files',
+      'header',
+      'pre',
+      'showCodeButton',
+    ],
+  });
+});