@bitrise/bitkit 12.65.1 → 12.66.1

package/package.json

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

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

@@ -1,17 +1,30 @@
-import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 
-const baseStyle = defineStyle({
-  py: '8',
-  px: '12',
-  bg: 'neutral.95',
-  border: '1px solid',
-  borderColor: 'separator.primary',
-  borderRadius: '8',
-  textWrap: 'wrap',
-  wordBreak: 'break-all',
-  overflowY: 'auto',
-});
+const itemHelpers = createMultiStyleConfigHelpers(['container', 'codeBox', 'copyIcon']);
 
-export default defineStyleConfig({
-  baseStyle,
+const CodeBlockTheme = itemHelpers.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      position: 'relative',
+    },
+    codeBox: {
+      py: '8',
+      px: '12',
+      bg: 'neutral.95',
+      border: '1px solid',
+      borderColor: 'separator.primary',
+      borderRadius: '8',
+      fontSize: '2',
+      textWrap: 'wrap',
+      wordBreak: 'break-all',
+      overflowY: 'auto',
+    },
+    copyIcon: {
+      position: 'absolute',
+      right: '1rem',
+      top: '1rem',
+    },
+  },
 });
+
+export default CodeBlockTheme;

package/src/Components/CodeBlock/CodeBlock.tsx

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

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

@@ -3,12 +3,12 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 const baseStyle = defineStyle(({ isCopiable }) => {
   const style = {
     fontFamily: 'mono',
-    fontSize: '14px',
     py: '4',
     px: '8',
     borderRadius: '2',
     bg: 'neutral.95',
     width: 'fit-content',
+    fontSize: '2',
   };
 
   if (isCopiable) {

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -23,7 +23,7 @@ const defaultComponents: Components = {
   ol: ({ node, ...props }) => <List isOrdered {...props} />,
   li: ({ node, ...props }) => <ListItem {...props} />,
   code: ({ node, ...props }) => <code {...props} />,
-  pre: ({ node, ...props }) => <CodeBlock>{props.children}</CodeBlock>,
+  pre: ({ node, ...props }) => <CodeBlock>{props.children as string}</CodeBlock>,
   blockquote: ({ children }) => (
     <Box
       py="8"

package/src/Components/ProgressIndicator/ProgressIndicator.theme.ts

@@ -18,12 +18,12 @@ const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
       flexGrow: '1',
     },
     label: {
-      size: '2',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       overflow: 'hidden',
       maxWidth: 'calc(100% - 1rem)',
       lineHeight: '1.5rem',
+      alignSelf: 'flex-start',
     },
   },
   variants: {

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -1,13 +1,11 @@
-import { createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
 import Box from '../Box/Box';
 import Icon, { IconProps } from '../Icon/Icon';
 import Text from '../Text/Text';
 import Divider, { DividerProps } from '../Divider/Divider';
 import Link, { LinkProps } from '../Link/Link';
 
-const [ProgressIndicatorContext] = createStylesContext('ProgressIndicator');
-
-type ProgressIndicatorProps = {
+export type ProgressIndicatorProps = {
   stages: {
     label: string;
     isInvalid?: boolean;
@@ -27,76 +25,75 @@ const ProgressIndicator = ({ stages, activeStageIndex, variant }: ProgressIndica
   const style = useMultiStyleConfig('ProgressIndicator', { variant });
 
   return (
-    <ProgressIndicatorContext value={style}>
-      <Box sx={style.container}>
-        {stages.map(({ label, isInvalid, isDisabled, action }, index, array) => {
-          let iconName: IconProps['name'];
-          let iconColor: IconProps['color'] = 'purple.50';
+    <Box sx={style.container}>
+      {stages.map(({ label, isInvalid, isDisabled, action }, index, array) => {
+        let iconName: IconProps['name'];
+        let iconColor: IconProps['color'] = 'purple.50';
 
-          let dividerProps: {
-            color: DividerProps['color'];
-            variant?: DividerProps['variant'];
-          } = { color: 'neutral.93' };
+        let dividerProps: {
+          color: DividerProps['color'];
+          variant?: DividerProps['variant'];
+        } = { color: 'neutral.93' };
 
-          if (index < activeStageIndex) {
-            iconName = 'BuildstatusSuccessful';
-            dividerProps = { ...dividerProps, color: 'purple.50' };
-          } else if (index === activeStageIndex) {
-            iconName = 'StageCurrent';
-            dividerProps = {
-              ...dividerProps,
-              color: 'purple.50',
-              variant: 'dashed',
-            };
-          } else {
-            iconName = 'StageIncomplete';
-            iconColor = 'neutral.60';
-          }
-          if (isInvalid) {
-            iconName = 'StepstatusWarning';
-            iconColor = 'red.50';
-          }
-          if (isDisabled) {
-            iconColor = 'neutral.80';
-          }
+        if (index < activeStageIndex) {
+          iconName = 'BuildstatusSuccessful';
+          dividerProps = { ...dividerProps, color: 'purple.50' };
+        } else if (index === activeStageIndex) {
+          iconName = 'StageCurrent';
+          dividerProps = {
+            ...dividerProps,
+            color: 'purple.50',
+            variant: 'dashed',
+          };
+        } else {
+          iconName = 'StageIncomplete';
+          iconColor = 'neutral.60';
+        }
+        if (isInvalid) {
+          iconName = 'StepstatusWarning';
+          iconColor = 'red.50';
+        }
+        if (isDisabled) {
+          iconColor = 'neutral.80';
+        }
 
-          return (
-            <Box
-              width={variant === 'horizontal' ? `${100 / array.length}%` : 'auto'}
-              sx={style.stage}
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
-            >
-              <Box sx={style.iconWithLine}>
-                <Icon name={iconName} color={iconColor} />
-                <Divider
-                  sx={style.line}
-                  size="2"
-                  orientation={variant === 'horizontal' ? 'horizontal' : 'vertical'}
-                  {...dividerProps}
-                />
-              </Box>
-              {action && !isDisabled ? (
-                <Link
-                  colorScheme="purple"
-                  as={action.href ? 'a' : 'button'}
-                  href={action.href}
-                  onClick={action.onClick}
-                  isExternal={action.isExternal}
-                  sx={style.label}
-                >
-                  {label}
-                </Link>
-              ) : (
-                <Text color={isDisabled ? 'neutral.80' : 'neutral.10'} sx={style.label}>
-                  {label}
-                </Text>
-              )}
+        return (
+          <Box
+            width={variant === 'horizontal' ? `${100 / array.length}%` : 'auto'}
+            sx={style.stage}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+          >
+            <Box sx={style.iconWithLine}>
+              <Icon name={iconName} color={iconColor} />
+              <Divider
+                sx={style.line}
+                size="2"
+                orientation={variant === 'horizontal' ? 'horizontal' : 'vertical'}
+                {...dividerProps}
+              />
             </Box>
-          );
-        })}
-      </Box>
-    </ProgressIndicatorContext>
+            {action && !isDisabled ? (
+              <Link
+                sx={style.label}
+                size="2"
+                colorScheme="purple"
+                as={action.href ? 'a' : 'button'}
+                href={action.href}
+                onClick={action.onClick}
+                isExternal={action.isExternal}
+              >
+                {label}
+              </Link>
+            ) : (
+              <Text sx={style.label} color={isDisabled ? 'neutral.80' : 'neutral.10'} size="2">
+                {label}
+              </Text>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
   );
 };
 

package/src/index.ts

@@ -320,3 +320,6 @@ export { default as FilterSwitchGroup } from './Components/Form/FilterSwitch/Fil
 
 export type { TablePaginationProps } from './Components/Table/TablePagination';
 export { default as TablePagination } from './Components/Table/TablePagination';
+
+export type { ProgressIndicatorProps } from './Components/ProgressIndicator/ProgressIndicator';
+export { default as ProgressIndicator } from './Components/ProgressIndicator/ProgressIndicator';