@bitrise/bitkit 13.12.0 → 13.14.0

package/package.json

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

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

@@ -1,15 +1,31 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 
-const itemHelpers = createMultiStyleConfigHelpers(['container', 'codeBox', 'copyIcon']);
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers([
+  'container',
+  'codeBox',
+  'copyIcon',
+]);
 
-const CodeBlockTheme = itemHelpers.defineMultiStyleConfig({
+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',
-      fontSize: '2',
       minHeight: '4rem',
       overflowY: 'auto',
       px: '12',
@@ -26,6 +42,10 @@ const CodeBlockTheme = itemHelpers.defineMultiStyleConfig({
       top: '1rem',
     },
   },
+  defaultProps: {
+    size: 'lg',
+  },
+  sizes,
 });
 
 export default CodeBlockTheme;

package/src/Components/CodeBlock/CodeBlock.tsx

@@ -5,10 +5,11 @@ 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');
+  const style = useMultiStyleConfig('CodeBlock', props);
 
   const { onCopy } = useClipboard(children);
 
@@ -33,4 +34,8 @@ const CodeBlock = ({ children, isCopiable, ...props }: CodeBlockProps) => {
   );
 };
 
+CodeBlock.defaultProps = {
+  size: 'lg',
+} as CodeBlockProps;
+
 export default CodeBlock;

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

@@ -1,36 +1,45 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 
+const sizes = {
+  lg: defineStyle({
+    textStyle: 'code/lg',
+  }),
+  md: defineStyle({
+    textStyle: 'code/md',
+  }),
+};
+
+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',
-    fontFamily: 'mono',
-    fontSize: '2',
-    lineHeight: '20px',
     px: '6px',
     py: '2px',
     width: 'fit-content',
   };
 
-  if (isCopiable) {
-    return {
-      ...style,
-      _active: {
-        background: 'neutral.90',
-      },
-      _focusVisible: {
-        boxShadow: 'outline',
-      },
-      _hover: {
-        background: 'neutral.93',
-      },
-      cursor: 'pointer',
-    };
-  }
-
-  return style;
+  return { ...style, ...(isCopiable ? copiableStyle : {}) };
 });
 
-export default defineStyleConfig({
+const CodeSnippetTheme = defineStyleConfig({
   baseStyle,
+  defaultProps: {
+    size: 'lg',
+  },
+  sizes,
 });
+
+export default CodeSnippetTheme;

package/src/Components/CodeSnippet/CodeSnippet.tsx

@@ -7,11 +7,12 @@ export interface CodeSnippetProps extends Omit<BoxProps, 'children'> {
   children: string;
   isCopiable?: boolean;
   textToCopy?: string;
+  size?: 'md' | 'lg';
 }
 
 const CodeSnippet = (props: CodeSnippetProps) => {
   const { children, isCopiable, textToCopy, ...rest } = props;
-  const css = useStyleConfig('CodeSnippet', { isCopiable });
+  const css = useStyleConfig('CodeSnippet', props);
   const { hasCopied, onCopy } = useClipboard(textToCopy || children);
 
   const [isTooltipOpen, setTooltipOpen] = useState(false);
@@ -33,4 +34,8 @@ const CodeSnippet = (props: CodeSnippetProps) => {
   );
 };
 
+CodeSnippet.defaultProps = {
+  size: 'lg',
+} as CodeSnippetProps;
+
 export default CodeSnippet;

package/src/Components/Form/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, Fragment, ReactNode, Ref, useState } from 'react';
+import { ChangeEvent, ReactNode, Ref, useState } from 'react';
 import {
   FormControl,
   FormControlProps,
@@ -49,6 +49,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   inputHeight?: number;
   inputRef?: Ref<HTMLInputElement>;
   inputStyle?: SystemStyleObject;
+  inputWrapperStyle?: SystemStyleObject;
   label?: ReactNode;
   leftIconColor?: TypeColors;
   leftIconName?: TypeIconName;
@@ -73,6 +74,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     inputHeight,
     inputRef,
     inputStyle,
+    inputWrapperStyle,
     isDisabled,
     isInvalid,
     isLoading,
@@ -125,8 +127,10 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     value,
   };
 
-  let InputWrapper: any = Fragment;
-  const inputWrapperProps: SystemStyleObject = {};
+  let InputWrapper: any = Box;
+  const inputWrapperProps: SystemStyleObject = {
+    ...inputWrapperStyle,
+  };
   if (leftIconName || rightAddon || rightIconName) {
     InputWrapper = InputGroup;
     inputWrapperProps.zIndex = 0;

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -8,44 +8,53 @@ import Box from '../Box/Box';
 import Divider from '../Divider/Divider';
 import Text from '../Text/Text';
 import CodeBlock from '../CodeBlock/CodeBlock';
+import CodeSnippet from '../CodeSnippet/CodeSnippet';
 
-const defaultComponents: Components = {
-  a: ({ node, ...props }) => <Link colorScheme="purple" isUnderlined target="_blank" {...props} />,
-  blockquote: ({ children }) => (
-    <Box
-      as="blockquote"
-      borderColor="separator.primary"
-      borderLeftStyle="solid"
-      borderLeftWidth="2px"
-      color="text.secondary"
-      paddingLeft="16"
-      py="8"
-    >
-      {children}
-    </Box>
-  ),
-  code: ({ node, ...props }) => <code {...props} />,
-  h1: ({ node, ...props }) => <Text as="h1" size="6" {...props} />,
-  h2: ({ node, ...props }) => <Text as="h2" size="5" {...props} />,
-  h3: ({ node, ...props }) => <Text as="h3" fontWeight="bold" size="4" {...props} />,
-  h4: ({ node, ...props }) => <Text as="h4" fontWeight="bold" size="3" {...props} />,
-  h5: ({ node, ...props }) => <Text as="h5" fontWeight="bold" size="2" {...props} />,
-  h6: ({ node, ...props }) => <Text as="h6" fontWeight="bold" size="1" {...props} />,
-  hr: () => <Divider borderColor="separator.primary" my="16" size="2" />,
-  li: ({ node, ...props }) => <ListItem {...props} />,
-  ol: ({ node, ...props }) => <List isOrdered {...props} />,
-  p: ({ node, ...props }) => <Text {...props} />,
-  pre: ({ node, ...props }) => <CodeBlock>{props.children as string}</CodeBlock>,
-  ul: ({ node, ...props }) => <List {...props} />,
+const defaultComponents = (size: 'md' | 'lg'): Components => {
+  return {
+    a: ({ node, ...props }) => <Link colorScheme="purple" isUnderlined target="_blank" {...props} />,
+    blockquote: ({ children }) => (
+      <Box
+        as="blockquote"
+        borderColor="separator.primary"
+        borderLeftStyle="solid"
+        borderLeftWidth="2px"
+        color="text.secondary"
+        paddingLeft="16"
+        py="8"
+      >
+        {children}
+      </Box>
+    ),
+    code: ({ node, ...props }) => (
+      <CodeSnippet size={size} {...props}>
+        {props.children as string}
+      </CodeSnippet>
+    ),
+    h1: ({ node, ...props }) => <Text as="h1" textStyle="heading/h1" {...props} />,
+    h2: ({ node, ...props }) => <Text as="h2" textStyle="heading/h2" {...props} />,
+    h3: ({ node, ...props }) => <Text as="h3" textStyle="heading/h3" {...props} />,
+    h4: ({ node, ...props }) => <Text as="h4" textStyle="heading/h4" {...props} />,
+    h5: ({ node, ...props }) => <Text as="h5" textStyle="heading/h5" {...props} />,
+    h6: ({ node, ...props }) => <Text as="h6" textStyle="heading/h6" {...props} />,
+    hr: () => <Divider borderColor="separator.primary" my="16" size="2" />,
+    li: ({ node, ...props }) => <ListItem {...props} />,
+    ol: ({ node, ...props }) => <List isOrdered {...props} />,
+    p: ({ node, ...props }) => <Text {...props} />,
+    pre: ({ node, ...props }) => <CodeBlock size={size}>{props.children as string}</CodeBlock>,
+    ul: ({ node, ...props }) => <List {...props} />,
+  };
 };
-type NoteMarkdownContentProps = { md: string } & Pick<
+
+type NoteMarkdownContentProps = { md: string; size?: 'md' | 'lg' } & Pick<
   ComponentProps<typeof ReactMarkdown>,
   'components' | 'rehypePlugins'
 >;
-const NoteMarkdownContent = ({ components, md, ...rest }: NoteMarkdownContentProps) => {
-  const extendedComponents = { ...defaultComponents, ...components };
+const NoteMarkdownContent = ({ components, md, size = 'lg', ...rest }: NoteMarkdownContentProps) => {
+  const extendedComponents = { ...defaultComponents(size), ...components };
+  const textStyle = `body/${size}/regular`;
   return (
-    <Box display="flex" flexDirection="column" gap="16">
+    <Box display="flex" flexDirection="column" gap="16" textStyle={textStyle}>
       <ReactMarkdown components={extendedComponents} {...rest}>
         {md}
       </ReactMarkdown>