@bitrise/bitkit 12.44.1 → 12.45.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.44.1",
+  "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/Components/Toggle/Toggle.theme.ts

@@ -33,7 +33,7 @@ const ToggleTheme: ComponentStyleConfig = {
         },
         _before: {
           content: '""',
-          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.213 13.915 17.234 7l1.49 1.49L10.212 17 5 11.68l1.49-1.489 3.723 3.724Z' fill='white' /%3E%3C/svg%3E")`,
+          backgroundImage: `/**/url(...), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.213 13.915 17.234 7l1.49 1.49L10.212 17 5 11.68l1.49-1.489 3.723 3.724Z' fill='white' /%3E%3C/svg%3E")`,
           backgroundPositionX: '0.125rem',
           position: 'absolute',
           left: 0,
@@ -43,7 +43,7 @@ const ToggleTheme: ComponentStyleConfig = {
         },
         _after: {
           content: '""',
-          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E")`,
+          backgroundImage: `/**/url(...), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E")`,
           backgroundPositionX: '-0.125rem',
           position: 'absolute',
           left: '50%',

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,