@plumile/ui 0.1.104 → 0.1.106

package/lib/esm/HighlightCode-KpWSo7Zx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HighlightCode-KpWSo7Zx.js","names":[],"sources":["../../src/theme/tools.ts","../../src/icons/markdown/MarkdownCopySuccessSvg.tsx","../../src/icons/markdown/MarkdownCopySvg.tsx","../../src/atomic/molecules/markdown/components/MarkdownCodeCopyButton.css.ts","../../src/atomic/molecules/markdown/components/MarkdownCodeCopyButton.tsx","../../src/atomic/molecules/highlight/HighlightCode.css.ts","../../src/atomic/molecules/highlight/HighlightCode.tsx"],"sourcesContent":["/**\n * Returns array of only strings\n */\nexport function onlyDefinedStyles(\n  styles: (string | null | undefined)[],\n): string[] {\n  const filteredStyles: string[] = [];\n\n  for (const style of styles) {\n    if (style != null) {\n      filteredStyles.push(style);\n    }\n  }\n\n  return filteredStyles;\n}\n\n/**\n * Converts a single class item into a string or null.\n * Accepts strings and objects like { [className]: boolean }.\n */\nfunction normalizeClassItem(\n  item: string | null | undefined | Record<string, boolean>,\n): string | null {\n  if (item == null) {\n    return null;\n  }\n  if (typeof item === 'string') {\n    return item;\n  }\n\n  const enabled = Object.entries(item)\n    .filter(([, on]) => {\n      return on;\n    })\n    .map(([name]) => {\n      return name;\n    });\n\n  if (enabled.length === 0) {\n    return null;\n  }\n\n  return enabled.join(' ');\n}\n\n/**\n * Returns a string of valid css classes to be used in className.\n * Accepts strings and objects like { [className]: boolean }.\n */\nexport function cx(\n  ...styles: (string | null | undefined | Record<string, boolean>)[]\n): string {\n  return onlyDefinedStyles(styles.map(normalizeClassItem)).join(' ');\n}\n","import { type JSX, type SVGProps } from 'react';\n\nexport const MarkdownCopySuccessSvg = (\n  props: SVGProps<SVGSVGElement>,\n): JSX.Element => {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      width=\"16\"\n      {...props}\n    >\n      <rect\n        fill=\"none\"\n        height=\"9.5\"\n        rx=\"1.25\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n        width=\"8.5\"\n        x=\"5.25\"\n        y=\"3.25\"\n      />\n      <path\n        d=\"M3.5 5.75v6.75a1 1 0 0 0 1 1h5.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.25\"\n      />\n      <path\n        d=\"M7.25 7.75l1.75 1.75 3-3\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.25\"\n      />\n    </svg>\n  );\n};\n\nexport default MarkdownCopySuccessSvg;\n","import { type JSX, type SVGProps } from 'react';\n\nexport const MarkdownCopySvg = (\n  props: SVGProps<SVGSVGElement>,\n): JSX.Element => {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      width=\"16\"\n      {...props}\n    >\n      <rect\n        fill=\"none\"\n        height=\"9.5\"\n        rx=\"1.25\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n        width=\"8.5\"\n        x=\"5.25\"\n        y=\"3.25\"\n      />\n      <path\n        d=\"M3.5 5.75v6.75a1 1 0 0 0 1 1h5.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.25\"\n      />\n    </svg>\n  );\n};\n\nexport default MarkdownCopySvg;\n","import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\n\nexport const copyButton = style([\n  sprinkles({\n    alignItems: 'center',\n    backgroundColor: 'brandLightGray',\n    borderRadius: 'sm',\n    borderStyle: 'none',\n    borderWidth: 0,\n    color: 'brandDarkGray',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    gap: 1,\n    paddingX: 2,\n    paddingY: 1,\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease-in-out',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.primaryLight,\n      },\n      '&:focus-visible': {\n        outline: `${vars.borderWidth.default} solid ${vars.colors.brandPrimaryRed}`,\n        outlineOffset: vars.spacing[0.5],\n      },\n      '&:disabled': {\n        cursor: 'default',\n        opacity: 0.6,\n      },\n    },\n  },\n]);\n\nexport const label = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'medium',\n});\n\nexport const icon = sprinkles({\n  height: 4,\n  width: 4,\n});\n","import { useCallback, useEffect, useRef, useState, type JSX } from 'react';\n\nimport { MarkdownCopySuccessSvg } from '../../../../icons/markdown/MarkdownCopySuccessSvg.js';\nimport { MarkdownCopySvg } from '../../../../icons/markdown/MarkdownCopySvg.js';\n\nimport {\n  copyButton,\n  icon as iconClass,\n  label,\n} from './MarkdownCodeCopyButton.css.js';\n\ntype Props = {\n  code: string;\n};\n\nexport const MarkdownCodeCopyButton = ({ code }: Props): JSX.Element => {\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current != null) {\n        window.clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    try {\n      let clipboard: Clipboard | undefined;\n      if (typeof navigator !== 'undefined') {\n        clipboard = navigator.clipboard;\n      }\n      if (clipboard != null && typeof clipboard.writeText === 'function') {\n        await clipboard.writeText(code);\n      } else {\n        const textarea = document.createElement('textarea');\n        textarea.value = code;\n        textarea.setAttribute('readonly', '');\n        textarea.style.position = 'absolute';\n        textarea.style.left = '-9999px';\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n      }\n      setCopied(true);\n      if (timeoutRef.current != null) {\n        window.clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = window.setTimeout(() => {\n        setCopied(false);\n        timeoutRef.current = null;\n      }, 2000);\n    } catch {\n      // silently ignore copy failures\n    }\n  }, [code]);\n\n  let buttonTitle = 'Copier le code';\n  if (copied) {\n    buttonTitle = 'Copié !';\n  }\n\n  let iconElement: JSX.Element = <MarkdownCopySvg className={iconClass} />;\n  if (copied) {\n    iconElement = <MarkdownCopySuccessSvg className={iconClass} />;\n  }\n\n  let labelText = 'Copier';\n  if (copied) {\n    labelText = 'Copié';\n  }\n\n  return (\n    <button\n      className={copyButton}\n      onClick={() => {\n        handleCopy().catch(() => {\n          // ignore copy failures surfaced via promise rejection\n        });\n      }}\n      title={buttonTitle}\n      type=\"button\"\n    >\n      {iconElement}\n      <span className={label}>{labelText}</span>\n    </button>\n  );\n};\n","import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  marginBottom: 4,\n  backgroundColor: 'brandLightGray',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'primaryLight',\n  borderRadius: 'lg',\n  color: 'brandDarkGray',\n  maxWidth: 'full',\n  minWidth: 0,\n  overflow: 'hidden',\n  position: 'relative',\n  width: 'full',\n});\n\nexport const toolbar = sprinkles({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'space-between',\n  paddingLeft: 3,\n  paddingRight: 3,\n  paddingTop: 3,\n  paddingBottom: 3,\n  backgroundColor: 'primaryLight',\n  gap: 2,\n});\n\nexport const badge = sprinkles({\n  backgroundColor: 'primaryLight',\n  borderRadius: 'full',\n  color: 'brandPrimaryRed',\n  fontSize: 'xs',\n  fontWeight: 'medium',\n  paddingY: 0.5,\n  paddingX: 2,\n  textTransform: 'uppercase',\n});\n\nexport const content = sprinkles({\n  maxHeight: 'full',\n  maxWidth: 'full',\n  minWidth: 0,\n  overflowX: 'auto',\n  paddingY: 3,\n  paddingX: 3,\n  width: 'full',\n});\n\nexport const shikiWrapper = sprinkles({});\n\nexport const shikiPre = sprinkles({\n  margin: 0,\n});\n\nexport const fallbackCode = sprinkles({\n  color: 'brandDarkGray',\n  fontFamily: 'mono',\n  fontSize: 'sm',\n  lineHeight: 1.6,\n  margin: 0,\n  whiteSpace: 'pre',\n});\n\nexport const placeholder = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  fontStyle: 'italic',\n});\n","import { cloneElement, isValidElement, type JSX, type ReactNode } from 'react';\n\nimport { MarkdownCodeCopyButton } from '../markdown/components/MarkdownCodeCopyButton.js';\nimport {\n  badge,\n  container,\n  content,\n  fallbackCode,\n  placeholder,\n  shikiPre,\n  shikiWrapper,\n  toolbar,\n} from './HighlightCode.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype HighlightContent = ReactNode | string | null | undefined;\n\ntype Props = {\n  badgeLabel: string;\n  copyCode?: string | null;\n  highlighted?: HighlightContent;\n  fallbackCodeText?: string | null;\n  placeholderText?: string | null;\n};\n\nconst withPreClassName = (node: ReactNode): ReactNode => {\n  if (!isValidElement<{ className?: string }>(node)) {\n    return node;\n  }\n  if (typeof node.type !== 'string' || node.type !== 'pre') {\n    return node;\n  }\n  const existingClassName = node.props.className;\n  return cloneElement(node, {\n    className: cx(shikiPre, existingClassName),\n  });\n};\n\nexport const HighlightCode = ({\n  badgeLabel,\n  copyCode,\n  highlighted,\n  fallbackCodeText,\n  placeholderText,\n}: Props): JSX.Element => {\n  let body: JSX.Element;\n  if (placeholderText != null) {\n    body = <span className={placeholder}>{placeholderText}</span>;\n  } else if (highlighted != null) {\n    if (typeof highlighted === 'string') {\n      body = (\n        <pre\n          className={fallbackCode}\n          dangerouslySetInnerHTML={{ __html: highlighted }}\n        />\n      );\n    } else {\n      body = (\n        <div className={shikiWrapper}>{withPreClassName(highlighted)}</div>\n      );\n    }\n  } else {\n    body = <pre className={fallbackCode}>{fallbackCodeText ?? ''}</pre>;\n  }\n\n  let copyButton: JSX.Element | null = null;\n  if (typeof copyCode === 'string' && copyCode !== '') {\n    copyButton = <MarkdownCodeCopyButton code={copyCode} />;\n  }\n\n  return (\n    <div className={container}>\n      <div className={toolbar}>\n        <span className={badge}>{badgeLabel}</span>\n        {copyButton}\n      </div>\n      <div className={content}>{body}</div>\n    </div>\n  );\n};\n\nexport default HighlightCode;\n"],"mappings":"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"}