@bitrise/bitkit 13.258.0 → 13.260.0

package/package.json

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

package/src/Components/Table/Table.theme.ts

@@ -73,7 +73,7 @@ const Tabletheme = {
         borderTopWidth: '1px',
         height: rem(65),
         paddingX: '16',
-        paddingY: '8',
+        paddingY: '12',
         textAlign: 'left',
         textStyle: 'body/md/regular',
       },

package/src/Components/TreeView/TreeView.context.tsx

@@ -0,0 +1,43 @@
+import { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react';
+
+type TreeViewState = {
+  selectedId?: string;
+  selectNode: (id: string) => void;
+};
+
+const TreeViewContext = createContext<TreeViewState>({
+  selectedId: undefined,
+  selectNode: () => {},
+});
+
+type TreeViewContenxtProviderProps = PropsWithChildren<{
+  defaultSelectedId?: string;
+  onNodeSelect?: (id: string) => void;
+}>;
+export const TreeViewContextProvider = ({
+  defaultSelectedId,
+  onNodeSelect,
+  children,
+}: TreeViewContenxtProviderProps) => {
+  const [selectedId, setSelectedId] = useState(defaultSelectedId);
+
+  const selectNode = useCallback(
+    (id: string) => {
+      setSelectedId((prevId) => (prevId === id ? undefined : id));
+      onNodeSelect?.(id);
+    },
+    [onNodeSelect],
+  );
+
+  const contextValue = useMemo(() => ({ selectedId, selectNode }), [selectedId, selectNode]);
+
+  return <TreeViewContext.Provider value={contextValue}>{children}</TreeViewContext.Provider>;
+};
+
+export const useTreeViewContext = () => {
+  const context = useContext(TreeViewContext);
+  if (!context) {
+    throw new Error('useTreeViewContext must be used within a TreeViewProvider');
+  }
+  return context;
+};

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

@@ -0,0 +1,79 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
+  'icon',
+  'button',
+  'buttonContent',
+  'textBlock',
+  'suffixBlock',
+  'selectionIndicator',
+]);
+
+const baseStyle = definePartsStyle({
+  icon: {
+    marginTop: '10px',
+    marginBottom: '2px',
+    color: 'icon/primary',
+  },
+  button: {
+    pos: 'relative',
+    py: '0',
+    px: '16',
+    pl: 'calc(16px + 24px * var(--level))',
+    w: '100%',
+    _hover: {
+      bgColor: 'background/secondary',
+    },
+    _active: {
+      bgColor: 'background/tertiary',
+    },
+    _selected: {
+      tabIndex: 0,
+      bgColor: 'background/selected',
+      _hover: {
+        bgColor: 'background/selected-hover',
+      },
+      _active: {
+        bgColor: 'background/selected-hover',
+      },
+    },
+  },
+  buttonContent: {
+    w: '100%',
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: '8',
+    borderTop: '1px solid',
+    borderColor: 'border/minimal',
+  },
+  textBlock: {
+    display: 'flex',
+    flexDir: 'column',
+    alignItems: 'flex-start',
+    py: '8',
+    gap: '4',
+    flex: '1',
+  },
+  suffixBlock: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingTop: '8',
+    paddingLeft: '16',
+    gap: '8',
+  },
+  selectionIndicator: {
+    width: '3px',
+    height: '100%',
+    position: 'absolute',
+    right: '0',
+    bgColor: 'border/selected',
+    borderLeftRadius: '2',
+  },
+});
+
+const TreeViewTheme = defineMultiStyleConfig({
+  baseStyle,
+});
+
+export default TreeViewTheme;

package/src/Components/TreeView/TreeView.tsx

@@ -0,0 +1,74 @@
+import { PropsWithChildren } from 'react';
+import { TreeViewContextProvider } from './TreeView.context';
+import TreeViewGroup from './TreeViewGroup';
+import TreeViewNode, { TreeViewNodeProps } from './TreeViewNode';
+import { TreeViewData } from './TreeView.types';
+
+const TreeViewLeaf = (props: Omit<TreeViewNodeProps, 'children'>) => <TreeViewNode type="leaf" {...props} />;
+const TreeViewBranch = (props: Omit<TreeViewNodeProps, 'type'>) => <TreeViewNode type="branch" {...props} />;
+
+const renderTreeNodes = (nodes: TreeViewData, level: number) => {
+  return nodes.map((node) => {
+    const { id, title, description, iconName, iconColor, suffixText, suffixIconName, suffixIconColor, children, type } =
+      node;
+
+    const nodeType = type || (children && children.length > 0 ? 'branch' : 'leaf');
+    const isBranch = nodeType === 'branch';
+
+    if (isBranch) {
+      return (
+        <TreeViewBranch
+          key={id}
+          id={id}
+          level={level}
+          title={title}
+          description={description}
+          iconName={iconName}
+          iconColor={iconColor}
+          suffixText={suffixText}
+          suffixIconName={suffixIconName}
+          suffixIconColor={suffixIconColor}
+        >
+          {children && renderTreeNodes(children, level + 1)}
+        </TreeViewBranch>
+      );
+    }
+
+    return (
+      <TreeViewLeaf
+        key={id}
+        id={id}
+        level={level}
+        title={title}
+        description={description}
+        iconName={iconName}
+        iconColor={iconColor}
+        suffixText={suffixText}
+        suffixIconName={suffixIconName}
+        suffixIconColor={suffixIconColor}
+      />
+    );
+  });
+};
+
+type TreeViewProps = {
+  label: string;
+  data?: TreeViewData;
+  defaultSelectedId?: string;
+  onNodeSelect?: (id: string) => void;
+};
+
+const TreeView = ({ children, label, data, defaultSelectedId, onNodeSelect }: PropsWithChildren<TreeViewProps>) => {
+  return (
+    <TreeViewContextProvider defaultSelectedId={defaultSelectedId} onNodeSelect={onNodeSelect}>
+      <TreeViewGroup level={1} label={label} role="tree">
+        {data ? renderTreeNodes(data, 1) : children}
+      </TreeViewGroup>
+    </TreeViewContextProvider>
+  );
+};
+
+TreeView.Leaf = TreeViewLeaf;
+TreeView.Branch = TreeViewBranch;
+
+export default TreeView;

package/src/Components/TreeView/TreeView.types.ts

@@ -0,0 +1,18 @@
+import { TypeIconName } from '../Icon/Icon';
+
+export type TreeNodeData = {
+  id: string;
+  type?: 'branch' | 'leaf';
+  title: string;
+  description?: string;
+  iconName?: TypeIconName;
+  iconColor?: string;
+  suffixText?: string;
+  suffixIconName?: TypeIconName;
+  suffixIconColor?: string;
+  disabled?: boolean;
+  expanded?: boolean;
+  children?: TreeNodeData[];
+};
+
+export type TreeViewData = TreeNodeData[];

package/src/Components/TreeView/TreeViewGroup.tsx

@@ -0,0 +1,20 @@
+import { Children, cloneElement, isValidElement, memo, PropsWithChildren } from 'react';
+import Box from '../Box/Box';
+
+type TreeViewGroupProps = PropsWithChildren<{
+  level: number;
+  label?: string;
+  role?: string;
+}>;
+
+const TreeViewGroup = ({ label, role, level, children }: TreeViewGroupProps) => {
+  return (
+    <Box as="ul" role={role} aria-label={label} listStyleType="none" textStyle="body/md/regular">
+      {Children.map(children, (child) =>
+        isValidElement(child) ? cloneElement(child, { level } as { level: number }) : child,
+      )}
+    </Box>
+  );
+};
+
+export default memo(TreeViewGroup);

package/src/Components/TreeView/TreeViewNode.tsx

@@ -0,0 +1,165 @@
+import { memo, PropsWithChildren, useCallback, useMemo, useState } from 'react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import Collapse from '../Collapse/Collapse';
+import TreeViewGroup from './TreeViewGroup';
+import { useTreeViewContext } from './TreeView.context';
+import { TreeNodeData } from './TreeView.types';
+
+export type TreeViewNodeProps = PropsWithChildren<
+  Omit<TreeNodeData, 'disabled' | 'expanded' | 'children'> & {
+    level?: number;
+    defaultDisabled?: boolean;
+    defaultExpanded?: boolean;
+  }
+>;
+
+type TreeViewNodeContentProps = Omit<TreeViewNodeProps, 'defaultDisabled' | 'defaultExpanded' | 'level'> & {
+  level: number;
+  isBranch?: boolean;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  isExpanded?: boolean;
+  onClick: VoidFunction;
+};
+
+const TreeViewNodeContent = memo(
+  ({
+    id,
+    children,
+    level,
+    iconName,
+    iconColor,
+    title,
+    description,
+    suffixText,
+    suffixIconName,
+    suffixIconColor,
+    isBranch,
+    isDisabled,
+    isExpanded,
+    isSelected,
+    onClick,
+  }: TreeViewNodeContentProps) => {
+    const styles = useMultiStyleConfig('TreeView', {});
+
+    return (
+      <Box
+        as="li"
+        id={id}
+        role="treeitem"
+        aria-level={level}
+        aria-disabled={isDisabled}
+        aria-selected={isSelected}
+        {...(isBranch ? { 'aria-expanded': isExpanded } : {})}
+      >
+        <Box
+          as="button"
+          tabIndex={isSelected ? 0 : -1}
+          data-selected={isSelected ? '' : undefined}
+          sx={{ '--level': `${level - 1}`, ...styles.button }}
+          onClick={onClick}
+        >
+          <Box sx={{ ...styles.buttonContent }}>
+            {isBranch && <Icon size="16" name={isExpanded ? 'ChevronDown' : 'ChevronRight'} sx={styles.icon} />}
+            {iconName && (
+              <Icon
+                size="16"
+                name={iconName}
+                sx={{ ...styles.icon, ...{ color: iconColor || (isSelected ? 'icon/primary' : 'icon/secondary') } }}
+              />
+            )}
+            <Box sx={styles.textBlock}>
+              <Text fontWeight={isExpanded ? 'semibold' : 'normal'}>{title}</Text>
+              {description && (
+                <Text textStyle="body/sm/regular" color="text/secondary">
+                  {description}
+                </Text>
+              )}
+            </Box>
+            {(suffixText || suffixIconName) && (
+              <Box sx={styles.suffixBlock} color={isSelected || isExpanded ? 'text/primary' : 'text/secondary'}>
+                {suffixIconName && <Icon name={suffixIconName} size="16" color={suffixIconColor} />}
+                {suffixText && (
+                  <Text textStyle="body/md/regular" textAlign="right">
+                    {suffixText}
+                  </Text>
+                )}
+              </Box>
+            )}
+            {isSelected && <Box sx={styles.selectionIndicator} />}
+          </Box>
+        </Box>
+        {isBranch && children && (
+          <Collapse in={isExpanded} unmountOnExit>
+            <TreeViewGroup level={level + 1} role="group">
+              {children}
+            </TreeViewGroup>
+          </Collapse>
+        )}
+      </Box>
+    );
+  },
+);
+
+const TreeViewNode = ({
+  id,
+  type,
+  level = 1,
+  iconName,
+  iconColor,
+  title,
+  description,
+  suffixText,
+  suffixIconName,
+  suffixIconColor,
+  defaultDisabled,
+  defaultExpanded,
+  children,
+}: TreeViewNodeProps) => {
+  const { selectedId, selectNode } = useTreeViewContext();
+
+  const isBranch = (type || (children ? 'branch' : 'leaf')) === 'branch';
+  const [isDisabled] = useState(defaultDisabled || false);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded || false);
+  const isSelected = useMemo(() => id === selectedId, [id, selectedId]);
+
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    if (!isSelected) {
+      selectNode(id);
+    }
+
+    if (isBranch) {
+      setIsExpanded((prev) => !prev);
+    }
+  }, [id, isDisabled, isSelected, selectNode, isBranch]);
+
+  return (
+    <TreeViewNodeContent
+      id={id}
+      level={level}
+      iconName={iconName}
+      iconColor={iconColor}
+      title={title}
+      description={description}
+      suffixText={suffixText}
+      suffixIconName={suffixIconName}
+      suffixIconColor={suffixIconColor}
+      isBranch={isBranch}
+      isDisabled={isDisabled}
+      isExpanded={isExpanded}
+      isSelected={isSelected}
+      onClick={handleClick}
+    >
+      {children}
+    </TreeViewNodeContent>
+  );
+};
+
+export default memo(TreeViewNode);

package/src/Components/components.theme.ts

@@ -51,6 +51,7 @@ import TagsInput from './Form/TagsInput/TagsInput.theme';
 import DraggableCard from './DraggableCard/DraggableCard.theme';
 import SelectableTag from './SelectableTag/SelectableTag.theme';
 import DataWidget from './DataWidget/DataWidget.theme';
+import TreeView from './TreeView/TreeView.theme';
 
 const components = {
   Accordion,
@@ -105,6 +106,7 @@ const components = {
   Textarea,
   Toggletip,
   Tooltip,
+  TreeView,
   SettingsCard,
 };