@bitrise/bitkit 12.44.2 → 12.46.0

package/package.json

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

@@ -21,13 +21,14 @@ const decorationColor = {
   success: 'green.50',
 };
 const NoteTheme = {
-  parts: ['container', 'icon', 'body'],
-  baseStyle({ status }: { status: Status }) {
+  parts: ['container', 'icon', 'body', 'buttonContainer'],
+  baseStyle({ isExpanded, status }: { isExpanded: boolean; status: Status }) {
     return {
       wrapper: {
         display: 'flex',
         boxShadow: 'medium',
         borderRadius: '8',
+        position: 'relative',
       },
       decoration: {
         color: decorationColor[status],
@@ -46,13 +47,30 @@ const NoteTheme = {
         flexGrow: 1,
         paddingTop: '24',
         paddingRight: '24',
-        paddingBottom: '32',
+        paddingBottom: ['80', '32'],
         paddingLeft: '16',
         borderTopRightRadius: '8',
         borderBottomRightRadius: '8',
         borderWidth: '1px',
         borderLeft: 'none',
         borderColor: borderColor[status],
+        overflow: 'hidden',
+      },
+      buttonContainer: {
+        position: 'absolute',
+        left: isExpanded ? 'auto' : '40px',
+        right: 1,
+        bottom: 1,
+        textAlign: 'right',
+        paddingX: '24',
+        paddingTop: '80',
+        paddingBottom: '16',
+        background: isExpanded ? undefined : 'linear-gradient(0deg, #FFF 12.57%, rgba(255, 255, 255, 0.00) 100%)',
+        borderBottomRadius: '8',
+        svg: {
+          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+          transition: '300ms',
+        },
       },
     };
   },

package/src/Components/Note/Note.tsx

@@ -1,7 +1,9 @@
-import { ReactNode } from 'react';
+import { useState, ReactNode } from 'react';
 import { useMultiStyleConfig } from '@chakra-ui/react';
 import Box from '../Box/Box';
+import Collapse from '../Collapse/Collapse';
 import Icon from '../Icon/Icon';
+import Button from '../Button/Button';
 
 export type Status = 'info' | 'success' | 'error' | 'warning';
 const iconNames = {
@@ -10,14 +12,54 @@ const iconNames = {
   error: 'ErrorGeneral',
   warning: 'Warning',
 } as const;
-const Note = ({ children, status }: { children: ReactNode; status: Status }) => {
-  const { container, decoration, wrapper } = useMultiStyleConfig('Note', { status });
+
+export type NoteProps = {
+  children: ReactNode;
+  startingHeight?: number;
+  status: Status;
+};
+
+type ContainerProps = { children: ReactNode; isExpanded: boolean; startingHeight?: number };
+
+const Container = ({ children, isExpanded, startingHeight }: ContainerProps) => {
+  if (startingHeight) {
+    return (
+      <Collapse
+        in={isExpanded}
+        startingHeight={startingHeight}
+        transition={{ enter: { duration: 0.5 }, exit: { duration: 0.5 } }}
+      >
+        {children}
+      </Collapse>
+    );
+  }
+  return <>{children}</>;
+};
+
+const Note = ({ children, startingHeight, status }: NoteProps) => {
+  const [isExpanded, setExpanded] = useState(false);
+  const { buttonContainer, container, decoration, wrapper } = useMultiStyleConfig('Note', {
+    isExpanded,
+    status,
+  });
+
   return (
     <Box __css={wrapper}>
       <Box __css={decoration}>
         <Icon size="24" name={iconNames[status]} />
       </Box>
-      <Box __css={container}>{children}</Box>
+      <Box __css={container}>
+        <Container isExpanded={isExpanded} startingHeight={startingHeight}>
+          {children}
+        </Container>
+      </Box>
+      {!!startingHeight && (
+        <Box __css={buttonContainer}>
+          <Button leftIconName="ChevronDown" onClick={() => setExpanded(!isExpanded)} size="small" variant="secondary">
+            {isExpanded ? 'Show less' : 'Show more'}
+          </Button>
+        </Box>
+      )}
     </Box>
   );
 };

package/src/index.ts

@@ -283,9 +283,11 @@ export { default as SelectableRow } from './Components/Table/SelectableRow';
 export type { TagProps } from './Components/Tag/Tag';
 export { default as Tag } from './Components/Tag/Tag';
 
+export type { NoteProps } from './Components/Note/Note';
 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,