@bitrise/bitkit 13.64.1-alpha.0 → 13.65.0

package/package.json

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

package/src/Components/Badge/Badge.theme.ts

@@ -1,12 +1,101 @@
+import { SystemStyleObject } from '@chakra-ui/styled-system';
+import { BadgeColorScheme, BadgeProps } from './Badge';
+
+const baseStyle: SystemStyleObject = {
+  borderRadius: '4',
+  display: 'inline-flex',
+  gap: '4',
+  padding: '4',
+  textStyle: 'comp/badge/sm',
+};
+
+type ColorsType = Record<'bold' | 'subtle', Record<BadgeColorScheme, Record<'color' | 'backgroundColor', string>>>;
+
+const colors: ColorsType = {
+  subtle: {
+    progress: {
+      backgroundColor: 'sys/interactive/subtle',
+      color: 'sys/interactive/strong',
+    },
+    neutral: {
+      backgroundColor: 'sys/neutral/subtle',
+      color: 'sys/neutral/strong',
+    },
+    info: {
+      backgroundColor: 'sys/info/subtle',
+      color: 'sys/info/strong',
+    },
+    positive: {
+      backgroundColor: 'sys/success/subtle',
+      color: 'sys/success/strong',
+    },
+    negative: {
+      backgroundColor: 'sys/critical/subtle',
+      color: 'sys/critical/strong',
+    },
+    warning: {
+      backgroundColor: 'sys/warning/subtle',
+      color: 'sys/warning/strong',
+    },
+    orange: {
+      backgroundColor: 'sys/orange/subtle',
+      color: 'sys/orange/strong',
+    },
+    turquoise: {
+      backgroundColor: 'sys/turquoise/subtle',
+      color: 'sys/turquoise/strong',
+    },
+  },
+  bold: {
+    progress: {
+      backgroundColor: 'sys/interactive/bold',
+      color: 'text/on-color',
+    },
+    neutral: {
+      backgroundColor: 'sys/neutral/bold',
+      color: 'text/on-color',
+    },
+    info: {
+      backgroundColor: 'sys/info/bold',
+      color: 'text/on-color',
+    },
+    positive: {
+      backgroundColor: 'sys/success/bold',
+      color: 'text/on-color',
+    },
+    negative: {
+      backgroundColor: 'sys/critical/bold',
+      color: 'text/on-color',
+    },
+    warning: {
+      backgroundColor: 'sys/warning/muted',
+      color: 'text/primary',
+    },
+    orange: {
+      backgroundColor: 'sys/orange/bold',
+      color: 'text/on-color',
+    },
+    turquoise: {
+      backgroundColor: 'sys/turquoise/bold',
+      color: 'text/on-color',
+    },
+  },
+};
+
+const getVariant = (props: BadgeProps) => {
+  const { colorScheme, variant } = props;
+  return colors[variant || 'subtle'][colorScheme || 'neutral'];
+};
+
 const BadgeTheme = {
-  baseStyle: {
-    borderRadius: '4',
-    display: 'inline-block',
-    paddingX: '8',
-    paddingY: '4',
-    textStyle: 'comp/badge/sm',
-    color: 'text/on-color',
-    backgroundColor: 'sys/primary/base',
+  baseStyle,
+  variants: {
+    bold: getVariant,
+    subtle: getVariant,
+  },
+  defaultProps: {
+    variant: 'subtle',
+    colorScheme: 'neutral',
   },
 };
 

package/src/Components/Badge/Badge.tsx

@@ -1,10 +1,38 @@
 import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps, forwardRef } from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../Icon/Icon';
+import Text from '../Text/Text';
 
-export type BadgeProps = ChakraBadgeProps;
+export type BadgeColorScheme =
+  | 'neutral'
+  | 'info'
+  | 'positive'
+  | 'negative'
+  | 'warning'
+  | 'progress'
+  | 'orange'
+  | 'turquoise';
+export interface BadgeProps extends ChakraBadgeProps {
+  children?: string | number;
+  colorScheme?: BadgeColorScheme;
+  iconName?: TypeIconName;
+  variant?: 'bold' | 'subtle';
+}
 
 /**
  * Badges are used to highlight an item's status for quick recognition.
  */
-const Badge = forwardRef<BadgeProps, 'span'>((props, ref) => <ChakraBadge {...props} ref={ref} />);
+const Badge = forwardRef<BadgeProps, 'span'>((props, ref) => {
+  const { children, iconName, ...rest } = props;
+  return (
+    <ChakraBadge {...rest} ref={ref} paddingInlineStart={iconName ? '4' : '8'} paddingInlineEnd={children ? '8' : '4'}>
+      {!!iconName && <Icon size="16" name={iconName} />}
+      {!!children && (
+        <Text hasEllipsis as="span">
+          {children}
+        </Text>
+      )}
+    </ChakraBadge>
+  );
+});
 
 export default Badge;

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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,37 @@
+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;

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

@@ -1,140 +1,45 @@
-import { defineStyle, defineStyleConfig, SystemStyleObject } from '@chakra-ui/styled-system';
-import { CodeSnippetProps } from './CodeSnippet';
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 
-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 sizes = {
+  lg: defineStyle({
+    textStyle: 'code/lg',
+  }),
+  md: defineStyle({
+    textStyle: 'code/md',
+  }),
 };
 
-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',
-      },
-    },
+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',
   };
+
+  return { ...style, ...(isCopiable ? copiableStyle : {}) };
 });
 
 const CodeSnippetTheme = defineStyleConfig({
   baseStyle,
+  defaultProps: {
+    size: 'lg',
+  },
+  sizes,
 });
 
 export default CodeSnippetTheme;

package/src/Components/CodeSnippet/CodeSnippet.tsx

@@ -1,101 +1,37 @@
 import { useState } from 'react';
-import { useClipboard, useMultiStyleConfig } from '@chakra-ui/react';
+import { useClipboard, useStyleConfig } 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;
-  size?: 'md' | 'lg';
-  startingHeight?: number;
+  isCopiable?: boolean;
   textToCopy?: string;
-  variant: 'inline' | 'single' | 'multi';
+  size?: 'md' | 'lg';
 }
 
 const CodeSnippet = (props: CodeSnippetProps) => {
-  const { children, variant, textToCopy, size = 'lg', startingHeight, ...rest } = props;
-
-  const [isExpanded, setExpanded] = useState(false);
-
-  const styles = useMultiStyleConfig('CodeSnippet', { variant, size, isExpanded });
-
+  const { children, isCopiable, textToCopy, ...rest } = props;
+  const css = useStyleConfig('CodeSnippet', props);
   const { hasCopied, onCopy } = useClipboard(textToCopy || children);
 
-  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>
-      );
-  }
+  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>
+  );
 };
 
 export default CodeSnippet;

package/src/Components/Filter/Filter.theme.ts

@@ -45,10 +45,7 @@ const FilterTheme = defineMultiStyleConfig({
       padding: '16',
     },
     formBadge: {
-      backgroundColor: 'neutral.93',
-      color: 'neutral.40',
       fontVariantNumeric: 'tabular-nums',
-      fontWeight: 'bold',
     },
     formButtonGroup: {
       display: 'flex',

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -117,7 +117,11 @@ const FilterForm = (props: FilterFormProps) => {
         <Text as="h5" sx={filterStyle.formTitle}>
           {categoryName || category}
         </Text>
-        {isMultiple && <Badge sx={filterStyle.formBadge}>{selected[0] === '' ? '0' : selected.length}</Badge>}
+        {isMultiple && (
+          <Badge variant="subtle" colorScheme="neutral" sx={filterStyle.formBadge}>
+            {selected[0] === '' ? '0' : selected.length}
+          </Badge>
+        )}
       </Box>
       {(withSearch || isAsync) && (
         <SearchInput

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -7,6 +7,7 @@ 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>;
@@ -30,7 +31,7 @@ const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Compo
       </Box>
     ),
     code: ({ node, ...props }) => (
-      <CodeSnippet variant="multi" {...props}>
+      <CodeSnippet size={codeSize} {...props}>
         {props.children as string}
       </CodeSnippet>
     ),
@@ -44,11 +45,7 @@ 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 }) => (
-      <CodeSnippet variant="multi" size={codeSize}>
-        {props.children as string}
-      </CodeSnippet>
-    ),
+    pre: ({ node, ...props }) => <CodeBlock size={codeSize}>{props.children as string}</CodeBlock>,
     ul: ({ node, ...props }) => <List {...props} />,
   };
 };

package/src/Components/components.theme.ts

@@ -38,6 +38,7 @@ 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';
@@ -65,6 +66,7 @@ const components = {
   ...Form,
   Alert,
   CloseButton,
+  CodeBlock,
   CodeSnippet,
   DatePickerDay,
   DefinitionTooltip,

package/src/index.ts

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