@bitrise/bitkit 12.44.2 → 12.45.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.44.2",
+  "version": "12.45.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/CodeSnippet/CodeSnippet.theme.ts

@@ -0,0 +1,34 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+
+const baseStyle = defineStyle(({ isCopiable }) => {
+  const style = {
+    fontFamily: 'mono',
+    py: '4',
+    px: '8',
+    borderRadius: '2',
+    bg: 'neutral.95',
+    width: 'fit-content',
+  };
+
+  if (isCopiable) {
+    return {
+      ...style,
+      cursor: 'pointer',
+      _hover: {
+        background: 'neutral.93',
+      },
+      _active: {
+        background: 'neutral.90',
+      },
+      _focusVisible: {
+        boxShadow: 'outline',
+      },
+    };
+  }
+
+  return style;
+});
+
+export default defineStyleConfig({
+  baseStyle,
+});

package/src/Components/CodeSnippet/CodeSnippet.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { useClipboard, useStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Tooltip from '../Tooltip/Tooltip';
+
+export interface CodeSnippetProps {
+  children: string;
+  isCopiable?: boolean;
+}
+
+const CodeSnippet = (props: CodeSnippetProps) => {
+  const { children, isCopiable } = props;
+  const css = useStyleConfig('CodeSnippet', { isCopiable });
+  const { onCopy, hasCopied } = useClipboard(children);
+
+  const [isTooltipOpen, setTooltipOpen] = useState(false);
+
+  return (
+    <Tooltip isOpen={isTooltipOpen} label={hasCopied ? 'Copied to clipboard' : 'Copy to clipboard'}>
+      <Box
+        __css={css}
+        as="code"
+        tabIndex={0}
+        onClick={isCopiable ? onCopy : undefined}
+        onMouseEnter={() => (isCopiable ? setTooltipOpen(true) : undefined)}
+        onMouseLeave={() => (isCopiable ? setTooltipOpen(false) : undefined)}
+      >
+        {children}
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default CodeSnippet;

package/src/index.ts

@@ -286,6 +286,7 @@ export { default as Tag } from './Components/Tag/Tag';
 export { default as Note } from './Components/Note/Note';
 export { default as MarkdownContent } from './Components/Note/NoteMarkdownContent';
 export { default as CodeBlock } from './Components/CodeBlock/CodeBlock';
+export { default as CodeSnippet } from './Components/CodeSnippet/CodeSnippet';
 
 export type { DefinitionTooltipProps } from './Components/DefinitionTooltip/DefinitionTooltip';
 export { default as DefinitionTooltip } from './Components/DefinitionTooltip/DefinitionTooltip';

package/src/theme.ts

@@ -38,6 +38,7 @@ import SegmentedControl from './Components/SegmentedControl/SegmentedControl.the
 import Tag from './Components/Tag/Tag.theme';
 import Note from './Components/Note/Note.theme';
 import CodeBlock from './Components/CodeBlock/CodeBlock.theme';
+import CodeSnippet from './Components/CodeSnippet/CodeSnippet.theme';
 import DefinitionTooltip from './Components/DefinitionTooltip/DefinitionTooltip.theme';
 import ExpandableCard from './Components/ExpandableCard/ExpandableCard.theme';
 import FileInput from './Components/Form/FileInput/FileInput.theme';
@@ -127,6 +128,7 @@ const theme = {
     Tag,
     Note,
     CodeBlock,
+    CodeSnippet,
     DefinitionTooltip,
     Toggletip,
     ExpandableCard,