@bitrise/bitkit 13.67.0 → 13.67.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.67.0",
+  "version": "13.67.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

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

@@ -1,45 +1,140 @@
-import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+import { defineStyle, defineStyleConfig, SystemStyleObject } from '@chakra-ui/styled-system';
+import { CodeSnippetProps } from './CodeSnippet';
 
-const sizes = {
-  lg: defineStyle({
-    textStyle: 'code/lg',
-  }),
-  md: defineStyle({
-    textStyle: 'code/md',
-  }),
+const contentPadding = (variant: CodeSnippetProps['variant']) => {
+  switch (variant) {
+    case 'single':
+      return {
+        padding: '.75rem',
+        paddingLeft: '1rem',
+        paddingRight: '0',
+      };
+    case 'multi':
+      return {
+        padding: '1rem',
+      };
+    default:
+      return {
+        paddingX: '.375rem',
+        paddingY: '.125rem',
+      };
+  }
 };
 
-const copiableStyle = defineStyle({
-  cursor: 'pointer',
-  _hover: {
-    background: 'neutral.93',
-  },
-  _active: {
-    background: 'neutral.90',
-  },
-  _focusVisible: {
-    boxShadow: 'outline',
-  },
-});
-
-const baseStyle = defineStyle(({ isCopiable }) => {
-  const style = {
-    bg: 'neutral.95',
-    borderRadius: '2',
-    px: '6px',
-    py: '2px',
-    width: 'fit-content',
+const baseStyle = defineStyle(({ variant, size, isExpanded }): SystemStyleObject => {
+  return {
+    wrapper: {
+      display: 'flex',
+      position: 'relative',
+      width: 'fit-content',
+      borderRadius: '2',
+    },
+    copyContainer: {
+      _after:
+        variant === 'single'
+          ? {
+              content: `""`,
+              position: 'absolute',
+              width: '8',
+              top: '0',
+              bottom: '0',
+              right: '0',
+              bgGradient: `linear(to-l, transparent, background/secondary)`,
+            }
+          : 'none',
+      _focusVisible: {
+        boxShadow: 'outline',
+        zIndex: 1,
+      },
+      bg: 'background/secondary',
+      borderRadius: '2',
+      borderTopRightRadius: variant === 'single' ? '0' : '2',
+      borderBottomRightRadius: variant === 'single' ? '0' : '2',
+      cursor: 'pointer',
+      '.chakra-collapse': {
+        overflow: 'auto !important',
+      },
+      minHeight: variant === 'inline' ? '1.5rem' : '2.5rem',
+      overflow: 'auto',
+      scrollbarHeight: variant === 'single' ? 'none' : undefined,
+      '::-webkit-scrollbar': {
+        height: variant === 'single' ? 0 : undefined,
+      },
+      position: variant === 'single' ? 'relative' : 'static',
+      textColor: 'text/body',
+      textStyle: size === 'md' ? 'code/md' : 'code/lg',
+      lineHeight: '1rem',
+      width: '100%',
+      whiteSpace: variant === 'single' ? 'nowrap' : 'pre',
+      ...contentPadding(variant),
+    },
+    copyIcon: {
+      bg: 'background/secondary',
+      border: 'none',
+      borderRadius: variant === 'multi' ? '2' : 'unset',
+      borderTopRightRadius: '2',
+      borderBottomRightRadius: '2',
+      position: variant === 'multi' ? 'absolute' : 'relative',
+      px: variant === 'multi' ? '4' : '12',
+      py: variant === 'multi' ? '4' : '8',
+      right: variant === 'multi' ? '4' : '0',
+      svg: {
+        color: 'icon/secondary',
+      },
+      top: variant === 'multi' ? '4' : '0',
+      _hover: {
+        bg: 'background/hover',
+        svg: {
+          color: 'text/primary',
+        },
+      },
+      _active: {
+        bg: 'background/active',
+        svg: {
+          color: 'text/primary',
+        },
+      },
+      _focusVisible: {
+        boxShadow: 'outline',
+        zIndex: 1,
+      },
+    },
+    showMoreButtonContainer: {
+      background: 'background/secondary',
+      borderRadius: 4,
+      bottom: 4,
+      button: {
+        color: 'text/secondary',
+      },
+      padding: 4,
+      position: 'absolute',
+      right: 4,
+      svg: {
+        transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+        transition: '300ms',
+      },
+      textAlign: 'right',
+      _hover: {
+        bg: 'background/hover',
+        button: {
+          color: 'text/primary',
+        },
+      },
+      _active: {
+        bg: 'background/active',
+        button: {
+          color: 'text/primary',
+        },
+      },
+      _focusVisible: {
+        boxShadow: 'outline',
+      },
+    },
   };
-
-  return { ...style, ...(isCopiable ? copiableStyle : {}) };
 });
 
 const CodeSnippetTheme = defineStyleConfig({
   baseStyle,
-  defaultProps: {
-    size: 'lg',
-  },
-  sizes,
 });
 
 export default CodeSnippetTheme;

package/src/Components/CodeSnippet/CodeSnippet.tsx

@@ -1,37 +1,101 @@
 import { useState } from 'react';
-import { useClipboard, useStyleConfig } from '@chakra-ui/react';
+import { useClipboard, useMultiStyleConfig } from '@chakra-ui/react';
 import Box, { BoxProps } from '../Box/Box';
 import Tooltip from '../Tooltip/Tooltip';
+import Button from '../Button/Button';
+import Collapse from '../Collapse/Collapse';
+import IconButton from '../IconButton/IconButton';
 
 export interface CodeSnippetProps extends Omit<BoxProps, 'children'> {
   children: string;
-  isCopiable?: boolean;
-  textToCopy?: string;
   size?: 'md' | 'lg';
+  startingHeight?: number;
+  textToCopy?: string;
+  variant: 'inline' | 'single' | 'multi';
 }
 
 const CodeSnippet = (props: CodeSnippetProps) => {
-  const { children, isCopiable, textToCopy, ...rest } = props;
-  const css = useStyleConfig('CodeSnippet', props);
+  const { children, variant, textToCopy, size = 'lg', startingHeight, ...rest } = props;
+
+  const [isExpanded, setExpanded] = useState(false);
+
+  const styles = useMultiStyleConfig('CodeSnippet', { variant, size, isExpanded });
+
   const { hasCopied, onCopy } = useClipboard(textToCopy || children);
 
-  const [isTooltipOpen, setTooltipOpen] = useState(false);
-
-  return (
-    <Tooltip isOpen={isTooltipOpen} label={hasCopied ? 'Copied to clipboard' : 'Copy to clipboard'}>
-      <Box
-        __css={css}
-        as="code"
-        onClick={isCopiable ? onCopy : undefined}
-        onMouseEnter={() => (isCopiable ? setTooltipOpen(true) : undefined)}
-        onMouseLeave={() => (isCopiable ? setTooltipOpen(false) : undefined)}
-        tabIndex={0}
-        {...rest}
-      >
-        {children}
-      </Box>
-    </Tooltip>
-  );
+  const tooltipLabel = hasCopied ? 'Copied to clipboard' : 'Copy to clipboard';
+  const isShowMoreButtonVisible = variant === 'multi' && startingHeight;
+  const showMoreButtonText = isExpanded ? 'Show less' : 'Show more';
+
+  switch (variant) {
+    case 'inline':
+      return (
+        <Tooltip label={tooltipLabel} closeDelay={500}>
+          <Box as="code" onClick={onCopy} sx={styles.copyContainer} {...rest}>
+            {children}
+          </Box>
+        </Tooltip>
+      );
+    case 'single':
+      return (
+        <Box __css={styles.wrapper} {...rest}>
+          <Box as="code" sx={styles.copyContainer}>
+            {children}
+          </Box>
+          <IconButton
+            aria-label={tooltipLabel}
+            iconName="Duplicate"
+            onClick={onCopy}
+            size="md"
+            tooltipCloseDelay={500}
+            variant="secondary"
+            sx={styles.copyIcon}
+          />
+        </Box>
+      );
+    case 'multi':
+      return (
+        <Box __css={styles.wrapper} {...rest}>
+          <Box as="code" sx={styles.copyContainer}>
+            {startingHeight ? (
+              <Collapse
+                in={isExpanded}
+                startingHeight={startingHeight}
+                endingHeight="100vh"
+                transition={{ enter: { duration: 0.5 }, exit: { duration: 0.5 } }}
+              >
+                {children}
+              </Collapse>
+            ) : (
+              children
+            )}
+          </Box>
+          <IconButton
+            aria-label={tooltipLabel}
+            iconName="Duplicate"
+            iconSize="24"
+            onClick={onCopy}
+            size="md"
+            tooltipCloseDelay={500}
+            variant="secondary"
+            sx={styles.copyIcon}
+          />
+          {isShowMoreButtonVisible && (
+            <Box __css={styles.showMoreButtonContainer}>
+              <Button
+                aria-label={showMoreButtonText}
+                rightIconName="ChevronDown"
+                onClick={() => setExpanded(!isExpanded)}
+                size="sm"
+                variant="tertiary"
+              >
+                {showMoreButtonText}
+              </Button>
+            </Box>
+          )}
+        </Box>
+      );
+  }
 };
 
 export default CodeSnippet;

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -7,7 +7,6 @@ import ListItem from '../List/ListItem';
 import Box, { BoxProps } from '../Box/Box';
 import Divider from '../Divider/Divider';
 import Text from '../Text/Text';
-import CodeBlock from '../CodeBlock/CodeBlock';
 import CodeSnippet from '../CodeSnippet/CodeSnippet';
 
 type GapType = Exclude<BoxProps['gap'], undefined>;
@@ -31,7 +30,7 @@ const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Compo
       </Box>
     ),
     code: ({ node, ...props }) => (
-      <CodeSnippet size={codeSize} {...props}>
+      <CodeSnippet variant="multi" {...props}>
         {props.children as string}
       </CodeSnippet>
     ),
@@ -45,7 +44,11 @@ const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Compo
     li: ({ node, ...props }) => <ListItem {...props} />,
     ol: ({ node, ...props }) => <List isOrdered {...props} />,
     p: ({ node, ...props }) => <Text {...props} />,
-    pre: ({ node, ...props }) => <CodeBlock size={codeSize}>{props.children as string}</CodeBlock>,
+    pre: ({ node, ...props }) => (
+      <CodeSnippet variant="multi" size={codeSize}>
+        {props.children as string}
+      </CodeSnippet>
+    ),
     ul: ({ node, ...props }) => <List {...props} />,
   };
 };

package/src/Components/components.theme.ts

@@ -38,7 +38,6 @@ import SidebarItem from './Sidebar/SidebarItem.theme';
 import SegmentedControl from './SegmentedControl/SegmentedControl.theme';
 import Tag from './Tag/Tag.theme';
 import Note from './Note/Note.theme';
-import CodeBlock from './CodeBlock/CodeBlock.theme';
 import CodeSnippet from './CodeSnippet/CodeSnippet.theme';
 import DefinitionTooltip from './DefinitionTooltip/DefinitionTooltip.theme';
 import ExpandableCard from './ExpandableCard/ExpandableCard.theme';
@@ -66,7 +65,6 @@ const components = {
   ...Form,
   Alert,
   CloseButton,
-  CodeBlock,
   CodeSnippet,
   DatePickerDay,
   DefinitionTooltip,

package/src/index.ts

@@ -283,7 +283,6 @@ 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';

package/src/Components/CodeBlock/CodeBlock.theme.ts

@@ -1,51 +0,0 @@
-import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
-
-const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers([
-  'container',
-  'codeBox',
-  'copyIcon',
-]);
-
-const sizes = {
-  lg: definePartsStyle({
-    codeBox: {
-      textStyle: 'code/lg',
-    },
-  }),
-  md: definePartsStyle({
-    codeBox: {
-      textStyle: 'code/md',
-    },
-  }),
-};
-
-const CodeBlockTheme = defineMultiStyleConfig({
-  baseStyle: {
-    codeBox: {
-      bg: 'neutral.95',
-      border: '1px solid',
-      borderColor: 'separator.primary',
-      borderRadius: '8',
-      minHeight: '4rem',
-      overflowY: 'auto',
-      px: '12',
-      py: '8',
-      textWrap: 'wrap',
-      wordBreak: 'break-all',
-    },
-    container: {
-      position: 'relative',
-    },
-    copyIcon: {
-      position: 'absolute',
-      right: '1rem',
-      top: '1rem',
-    },
-  },
-  defaultProps: {
-    size: 'lg',
-  },
-  sizes,
-});
-
-export default CodeBlockTheme;

package/src/Components/CodeBlock/CodeBlock.tsx

@@ -1,37 +0,0 @@
-import { BoxProps, useClipboard, useMultiStyleConfig } from '@chakra-ui/react';
-import Box from '../Box/Box';
-import IconButton from '../IconButton/IconButton';
-
-interface CodeBlockProps extends BoxProps {
-  children: string;
-  isCopiable?: boolean;
-  size?: 'md' | 'lg';
-}
-
-const CodeBlock = ({ children, isCopiable, ...props }: CodeBlockProps) => {
-  const style = useMultiStyleConfig('CodeBlock', props);
-
-  const { onCopy } = useClipboard(children);
-
-  const { maxHeight, ...otherProps } = props;
-
-  return (
-    <Box sx={style.container} {...otherProps}>
-      <Box as="pre" maxHeight={maxHeight} sx={style.codeBox}>
-        {children}
-      </Box>
-      {isCopiable && (
-        <IconButton
-          aria-label="Copy to clipboard"
-          iconName="Duplicate"
-          onClick={onCopy}
-          size="sm"
-          sx={style.copyIcon}
-          variant="secondary"
-        />
-      )}
-    </Box>
-  );
-};
-
-export default CodeBlock;