@bitrise/bitkit 13.327.0 → 13.329.0

package/package.json

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

package/src/Components/PaginationLoadMore/PaginationLoadMore.theme.ts

@@ -0,0 +1,96 @@
+import { createMultiStyleConfigHelpers } from 'chakra-ui-2--styled-system';
+import { rem } from '../../utils/utils';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers([
+  'container',
+  'text',
+  'divider',
+  'button',
+  'progressIndicator',
+]);
+
+const PaginationLoadMoreTheme = defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingX: '16',
+    },
+    text: {
+      textColor: 'text/secondary',
+    },
+    progressIndicator: {
+      textColor: 'text/tertiary',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8',
+    },
+  },
+  sizes: {
+    xs: {
+      container: {
+        height: rem(32),
+        gap: '12',
+      },
+      text: {
+        textStyle: 'body/sm/regular',
+      },
+      divider: {
+        height: rem(20),
+      },
+      progressIndicator: {
+        textStyle: 'body/sm/regular',
+      },
+    },
+    sm: {
+      container: {
+        height: rem(48),
+        gap: '8',
+      },
+      text: {
+        textStyle: 'body/md/regular',
+      },
+      divider: {
+        height: rem(24),
+        marginLeft: '8',
+      },
+      button: {
+        '*': {
+          px: 4,
+        },
+      },
+      progressIndicator: {
+        pl: 12,
+        textStyle: 'body/md/regular',
+      },
+    },
+    md: {
+      container: {
+        height: rem(56),
+        gap: '12',
+      },
+      text: {
+        textStyle: 'body/md/regular',
+      },
+      divider: {
+        height: rem(24),
+        marginLeft: '12',
+      },
+      button: {
+        '*': {
+          px: 4,
+        },
+      },
+      progressIndicator: {
+        pl: 12,
+        textStyle: 'body/md/regular',
+      },
+    },
+  },
+  defaultProps: {
+    size: 'sm',
+  },
+});
+
+export default PaginationLoadMoreTheme;

package/src/Components/PaginationLoadMore/PaginationLoadMore.tsx

@@ -0,0 +1,74 @@
+import { useMultiStyleConfig } from 'chakra-ui-2--react';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import LinkButton from '../LinkButton/LinkButton';
+import Divider from '../Divider/Divider';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
+import Button from '../Button/Button';
+
+export type PaginationLoadMoreProps = {
+  loadedCount: number;
+  totalCount: number;
+  onLoadMore: () => void;
+  isLoading: boolean;
+  size?: 'xs' | 'sm' | 'md';
+  loadMoreCount?: number;
+};
+
+const PaginationLoadMore = ({
+  loadedCount,
+  totalCount,
+  onLoadMore,
+  isLoading,
+  size = 'sm',
+  loadMoreCount = 10,
+}: PaginationLoadMoreProps) => {
+  const styles = useMultiStyleConfig('PaginationLoadMore', { size });
+
+  const hasMore = loadedCount < totalCount;
+
+  const loadMoreButton = () => {
+    if (size === 'xs') {
+      return (
+        <LinkButton size="sm" onClick={onLoadMore}>
+          Load {loadMoreCount} more
+        </LinkButton>
+      );
+    }
+
+    return (
+      <Button variant="tertiary" size={size} onClick={onLoadMore}>
+        Load {loadMoreCount} more
+      </Button>
+    );
+  };
+
+  const renderLoadMoreAction = () => {
+    if (!hasMore) return null;
+
+    return (
+      <>
+        <Divider orientation="vertical" size="1" sx={styles.divider} />
+        {isLoading ? (
+          <Box sx={styles.progressIndicator}>
+            <ProgressSpinner color="sys/interactive/base" size="16" />
+            Loading more...
+          </Box>
+        ) : (
+          loadMoreButton()
+        )}
+      </>
+    );
+  };
+
+  return (
+    <Box sx={styles.container}>
+      <Text as="span" sx={styles.text}>
+        Showing {loadedCount} of {totalCount}
+      </Text>
+      {renderLoadMoreAction()}
+    </Box>
+  );
+};
+
+export default PaginationLoadMore;

package/src/Components/TreeView/TreeView.theme.ts

@@ -15,14 +15,14 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe
   'leafBadge',
 ]);
 
-const baseStyle = definePartsStyle({
+const baseStyle = definePartsStyle(({ variant, isEmpty }) => ({
   listItem: {
     overflow: 'hidden',
   },
   icon: {
     marginTop: '10px',
     marginBottom: '2px',
-    color: 'icon/primary',
+    color: isEmpty ? 'icon/disabled' : 'icon/primary',
   },
   leafBadge: {
     marginTop: '10px',
@@ -92,7 +92,7 @@ const baseStyle = definePartsStyle({
     display: 'flex',
     alignItems: 'flex-start',
     textAlign: 'start',
-    borderBottom: '1px solid',
+    borderBottom: variant === 'files' ? 'none' : '1px solid',
     borderColor: 'border/minimal',
   },
   textBlock: {
@@ -102,6 +102,13 @@ const baseStyle = definePartsStyle({
     py: '8',
     gap: '4',
     flex: '1',
+    color: isEmpty ? 'text/tertiary' : 'text/body',
+    '& > .description-text': {
+      wordBreak: 'break-word',
+      overflowWrap: 'break-word',
+      textStyle: 'body/sm/regular',
+      color: 'text/secondary',
+    },
   },
   suffixBlock: {
     display: 'flex',
@@ -144,7 +151,7 @@ const baseStyle = definePartsStyle({
     display: 'none',
     alignItems: 'center',
   },
-});
+}));
 
 const TreeViewTheme = defineMultiStyleConfig({
   baseStyle,

package/src/Components/TreeView/TreeViewNode.tsx

@@ -49,13 +49,18 @@ const TreeViewNodeContent = memo(
     onClick,
     children,
   }: TreeViewNodeContentProps) => {
-    const styles = useMultiStyleConfig('TreeView', {});
     const { variant } = useTreeViewContext();
 
     const isFilesVariant = variant === 'files';
     const hasChildren = Boolean(children);
-    const isSelectable = !(isBranch && !hasChildren);
     const isEmptyBranch = isBranch && !hasChildren;
+    const isSelectable = !isEmptyBranch;
+
+    const styles = useMultiStyleConfig('TreeView', {
+      variant,
+      isEmpty: isEmptyBranch,
+    });
+
     const chevronIcon = isExpanded ? 'ChevronDown' : 'ChevronRight';
     const primaryIconName = isFilesVariant ? 'FolderEmpty' : chevronIcon;
 
@@ -137,16 +142,7 @@ const TreeViewNodeContent = memo(
                 <Text fontWeight={isExpanded ? 'semibold' : 'normal'} overflowWrap="break-word" wordBreak="break-word">
                   {title}
                 </Text>
-                {description && (
-                  <Text
-                    color="text/secondary"
-                    wordBreak="break-word"
-                    overflowWrap="break-word"
-                    textStyle="body/sm/regular"
-                  >
-                    {description}
-                  </Text>
-                )}
+                {description && <Text className="description-text">{description}</Text>}
               </Box>
 
               {(hasLabelContent || hasHoverActions) && (

package/src/Components/components.theme.ts

@@ -53,6 +53,7 @@ import DraggableCard from './DraggableCard/DraggableCard.theme';
 import SelectableTag from './SelectableTag/SelectableTag.theme';
 import DataWidget from './DataWidget/DataWidget.theme';
 import TreeView from './TreeView/TreeView.theme';
+import PaginationLoadMore from './PaginationLoadMore/PaginationLoadMore.theme';
 
 const components = {
   Accordion,
@@ -88,6 +89,7 @@ const components = {
   Note,
   NoteCard,
   NumberInput,
+  PaginationLoadMore,
   Popover,
   Progress: ProgressBar,
   ProgressIndicator,

package/src/index.ts

@@ -334,6 +334,9 @@ export { default as TablePagination } from './Components/Table/TablePagination';
 export type { PaginationProps } from './Components/Pagination/Pagination';
 export { default as Pagination } from './Components/Pagination/Pagination';
 
+export type { PaginationLoadMoreProps } from './Components/PaginationLoadMore/PaginationLoadMore';
+export { default as PaginationLoadMore } from './Components/PaginationLoadMore/PaginationLoadMore';
+
 export type { ProgressIndicatorProps } from './Components/ProgressIndicator/ProgressIndicator';
 export { default as ProgressIndicator } from './Components/ProgressIndicator/ProgressIndicator';