@bitrise/bitkit 13.19.0 → 13.21.0

package/package.json

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

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -4,13 +4,17 @@ import ReactMarkdown, { Components } from 'react-markdown';
 import List from '../List/List';
 import Link from '../Link/Link';
 import ListItem from '../List/ListItem';
-import Box from '../Box/Box';
+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';
 
-const defaultComponents = (size: 'md' | 'lg'): Components => {
+type GapType = Exclude<BoxProps['gap'], undefined>;
+
+const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Components => {
+  const codeSize = size === 'lg' ? 'lg' : 'md';
+
   return {
     a: ({ node, ...props }) => <Link colorScheme="purple" isUnderlined target="_blank" {...props} />,
     blockquote: ({ children }) => (
@@ -27,7 +31,7 @@ const defaultComponents = (size: 'md' | 'lg'): Components => {
       </Box>
     ),
     code: ({ node, ...props }) => (
-      <CodeSnippet size={size} {...props}>
+      <CodeSnippet size={codeSize} {...props}>
         {props.children as string}
       </CodeSnippet>
     ),
@@ -37,24 +41,26 @@ const defaultComponents = (size: 'md' | 'lg'): Components => {
     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" />,
+    hr: () => <Divider borderColor="separator.primary" my={gap} 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>,
+    pre: ({ node, ...props }) => <CodeBlock size={codeSize}>{props.children as string}</CodeBlock>,
     ul: ({ node, ...props }) => <List {...props} />,
   };
 };
 
-type NoteMarkdownContentProps = { md: string; size?: 'md' | 'lg' } & Pick<
-  ComponentProps<typeof ReactMarkdown>,
-  'components' | 'rehypePlugins'
->;
-const NoteMarkdownContent = ({ components, md, size = 'lg', ...rest }: NoteMarkdownContentProps) => {
+type NoteMarkdownContentProps = {
+  md: string;
+  gap?: GapType;
+  size?: 'sm' | 'md' | 'lg';
+} & Pick<ComponentProps<typeof ReactMarkdown>, 'components' | 'rehypePlugins'>;
+
+const NoteMarkdownContent = ({ components, md, gap = '16', size = 'lg', ...rest }: NoteMarkdownContentProps) => {
   const extendedComponents = { ...defaultComponents(size), ...components };
   const textStyle = `body/${size}/regular`;
   return (
-    <Box display="flex" flexDirection="column" gap="16" textStyle={textStyle}>
+    <Box display="flex" flexDirection="column" gap={gap} textStyle={textStyle}>
       <ReactMarkdown components={extendedComponents} {...rest}>
         {md}
       </ReactMarkdown>

package/src/Components/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { createContext, ReactNode, useContext } from 'react';
-import { BoxProps, createStylesContext, SpaceProps, useMultiStyleConfig } from '@chakra-ui/react';
+import { BoxProps, createStylesContext, forwardRef, SpaceProps, useMultiStyleConfig } from '@chakra-ui/react';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import Divider from '../Divider/Divider';
@@ -57,17 +57,17 @@ export type SidebarProps = { children: ReactNode; title?: string } & Omit<
   BoxProps,
   'display' | 'd' | 'flexDirection' | 'flexDir' | 'as'
 >;
-const Sidebar = ({ children, title, ...boxProps }: SidebarProps) => {
+const Sidebar = forwardRef<SidebarProps, 'nav'>(({ children, title, ...boxProps }, ref) => {
   const theme = useMultiStyleConfig('Sidebar');
   return (
     <SidebarContext value={theme}>
-      <Box as="nav" display="flex" flexDirection="column" {...boxProps}>
+      <Box as="nav" display="flex" flexDirection="column" {...boxProps} ref={ref}>
         <SidebarHeader title={title} />
         {children}
       </Box>
     </SidebarContext>
   );
-};
+});
 
 const SidebarButton = ({ onClick, title }: Pick<BoxProps, 'onClick'> & { title: string }) => {
   return (

package/src/Components/Sidebar/SidebarItem.tsx

@@ -3,6 +3,7 @@ import { chakra, ChakraProps, createStylesContext, IconProps, useMultiStyleConfi
 import { DateTime } from 'luxon';
 import Text from '../Text/Text';
 import Icon, { TypeIconName } from '../Icon/Icon';
+import Link from '../Link/Link';
 
 type SidebarItemProps = {
   children: ReactNode;
@@ -10,7 +11,17 @@ type SidebarItemProps = {
   disabled?: boolean;
   onClick?: () => void;
   href?: string;
-};
+  isExternal?: boolean;
+} & (
+  | {
+      href: string;
+      isExternal?: boolean;
+    }
+  | {
+      onClick?: () => void;
+      isExternal?: never;
+    }
+);
 
 const [SidebarItemStyleProvider, useSidebarItemStyle] = createStylesContext('SidebarItem');
 
@@ -26,7 +37,7 @@ const sidebarVariant = ({ disabled, selected }: { selected?: boolean; disabled?:
 
 const SidebarItem = forwardRef(
   (
-    { children, disabled, href, onClick, selected }: SidebarItemProps,
+    { children, disabled, href, isExternal, onClick, selected }: SidebarItemProps,
     ref: React.Ref<HTMLButtonElement & HTMLAnchorElement>,
   ) => {
     const style = useMultiStyleConfig('SidebarItem', { variant: sidebarVariant({ disabled, selected }) });
@@ -41,7 +52,7 @@ const SidebarItem = forwardRef(
     if (onClick || disabled) {
       return <chakra.button ref={ref} disabled={disabled} {...shared} />;
     }
-    return <chakra.a ref={ref} {...shared} />;
+    return <Link ref={ref} {...shared} isExternal={isExternal} />;
   },
 );