@bitrise/bitkit 10.12.1 → 10.13.0-alpha-chakra.1

package/package.json

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

package/src/Components/Avatar/Avatar.tsx

@@ -9,6 +9,9 @@ export interface AvatarProps extends ChakraAvatarProps {
 }
 
 const getInitials = (name: string) => {
+  if (name.length < 3) {
+    return name;
+  }
   return `${name.charAt(0)}${name.charAt(name.length - 1)}`;
 };
 

package/src/Components/Table/SortIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const SortIcon = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" width="24" height="24" {...props}>
+    <path d="M7.68341 9.17991L11.6159 4.46093C11.8158 4.22105 12.1842 4.22106 12.3841 4.46093L16.3166 9.17991C16.588 9.50557 16.3564 10 15.9325 10H8.06752C7.6436 10 7.41203 9.50557 7.68341 9.17991Z" />
+    <path d="M16.3166 14.8201L12.3841 19.5391C12.1842 19.7789 11.8158 19.7789 11.6159 19.5391L7.68341 14.8201C7.41203 14.4944 7.6436 14 8.06752 14L15.9325 14C16.3564 14 16.588 14.4944 16.3166 14.8201Z" />
+  </Icon>
+));
+
+export default SortIcon;

package/src/Components/Table/Table.stories.tsx

@@ -0,0 +1,154 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Box from '../Box/Box';
+import Table from './Table';
+import TableContainer from './TableContainer';
+import Th from './Th';
+import Thead from './Thead';
+import Tbody from './Tbody';
+import Tr from './Tr';
+import Td from './Td';
+import TableCaption from './TableCaption';
+
+export default {
+  title: 'Components/Table',
+  component: Table,
+  args: {
+    isFixed: false,
+  },
+} as ComponentMeta<typeof Table>;
+
+const Template: ComponentStory<typeof Table> = (props) => (
+  <TableContainer>
+    <Table {...props} />
+  </TableContainer>
+);
+
+export const BasicVersion = Template.bind({});
+BasicVersion.args = {
+  children: (
+    <>
+      <TableCaption description="Table decription">Basic Table</TableCaption>
+      <Thead>
+        <Tr>
+          <Th>To convert</Th>
+          <Th>into</Th>
+          <Th textAlign="right">multiply by</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr>
+          <Td>inches</Td>
+          <Td>millimetres (mm)</Td>
+          <Td textAlign="right">25.4</Td>
+        </Tr>
+        <Tr>
+          <Td colSpan={3} textAlign="right" variant="separator">
+            Separator
+          </Td>
+        </Tr>
+        <Tr>
+          <Td>feet</Td>
+          <Td>centimetres (cm)</Td>
+          <Td textAlign="right">30.48</Td>
+        </Tr>
+        <Tr>
+          <Td>yards</Td>
+          <Td>metres (m)</Td>
+          <Td textAlign="right">0.91444</Td>
+        </Tr>
+      </Tbody>
+    </>
+  ),
+};
+
+export const SortableColumns = Template.bind({});
+SortableColumns.args = {
+  children: (
+    <>
+      <TableCaption description="You have to implelement the logic">Sortable columns</TableCaption>
+      <Thead>
+        <Tr>
+          <Th isSortable>isSortable: true</Th>
+          <Th isSortable sortedBy="ascending">
+            sortedBy: ascending
+          </Th>
+          <Th isSortable sortedBy="descending">
+            sortedBy: descending
+          </Th>
+          <Th>isSortable: false</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr>
+          <Td>1</Td>
+          <Td>foo</Td>
+          <Td>bar</Td>
+          <Td>baz</Td>
+        </Tr>
+        <Tr>
+          <Td>2</Td>
+          <Td>foo</Td>
+          <Td>bar</Td>
+          <Td>baz</Td>
+        </Tr>
+      </Tbody>
+    </>
+  ),
+};
+
+const onRowClick = () => {};
+
+export const ClickableRows = Template.bind({});
+ClickableRows.args = {
+  children: (
+    <>
+      <TableCaption description="You can add onClick to the Tr">
+        Clickable rows - This is a temporary solution, please use it only when it really necessary
+      </TableCaption>
+      <Thead>
+        <Tr>
+          <Th>Workflow</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr onClick={onRowClick}>
+          <Td>ci-rspec-apps</Td>
+        </Tr>
+        <Tr onClick={onRowClick}>
+          <Td>ci-rspes</Td>
+        </Tr>
+        <Tr onClick={onRowClick}>
+          <Td>ci-be-lint</Td>
+        </Tr>
+      </Tbody>
+    </>
+  ),
+};
+
+export const ExpandableRows = Template.bind({});
+ExpandableRows.args = {
+  children: (
+    <>
+      <TableCaption description="Click on a row">Expandable rows</TableCaption>
+      <Thead>
+        <Tr>
+          <Th colSpan={2}>ID</Th>
+          <Th>Status</Th>
+          <Th>Time</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr expandableContent={<Box paddingY="12">😎</Box>}>
+          <Td>f6963af857c8f2fe</Td>
+          <Td>Success</Td>
+          <Td>May 29, 2022 10:11:32am</Td>
+        </Tr>
+        <Tr expandableContent={<Box paddingY="12">🥳</Box>}>
+          <Td>f6963af857c8f2fe</Td>
+          <Td>Aborted</Td>
+          <Td>May 29, 2022 9:12:50am</Td>
+        </Tr>
+      </Tbody>
+    </>
+  ),
+};

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

@@ -0,0 +1,99 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+export const separatorStyle: SystemStyleObject = {
+  backgroundColor: 'neutral.93',
+  color: 'neutral.50',
+  fontSize: '1',
+  fontWeight: 'bold',
+  lineHeight: '1',
+  textTransform: 'uppercase',
+};
+
+const Tabletheme: SystemStyleObject = {
+  baseStyle: {
+    caption: {
+      textAlign: 'left',
+      marginBottom: '24',
+    },
+    captionTitle: {
+      fontSize: '4',
+      lineHeight: '4',
+      fontWeight: 'bold',
+      color: 'purple.10',
+    },
+    captionDescription: {
+      marginTop: '4',
+      color: 'neutral.30',
+    },
+    table: {
+      fontVariantNumeric: 'lining-nums tabular-nums',
+      borderCollapse: 'separate',
+      borderRadius: '4',
+      border: '1px solid',
+      borderColor: 'neutral.93',
+      width: '100%',
+      borderSpacing: 0,
+      borderBottom: 0,
+    },
+    thead: {
+      backgroundColor: 'neutral.93',
+      borderTopLeftRadius: '4',
+      borderTopRightRadius: '4',
+    },
+    clickableTr: {
+      cursor: 'pointer',
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+    },
+    th: {
+      paddingX: '16',
+      paddingY: '12',
+      fontWeight: 'bold',
+      textAlign: 'left',
+    },
+    sortButton: {
+      display: 'flex',
+      gap: '8',
+      alignItems: 'center',
+      width: '100%',
+      paddingX: '16',
+      paddingY: '12',
+      fontWeight: 'bold',
+      textAlign: 'left',
+      _hover: {
+        backgroundColor: 'neutral.90',
+      },
+    },
+    sortIcon: {
+      path: {
+        fill: 'neutral.80',
+      },
+      '[aria-sort="none"]:hover & path': {
+        fill: 'purple.10',
+      },
+      '[aria-sort="ascending"] & path:first-child': {
+        fill: 'purple.10',
+      },
+      '[aria-sort="descending"] & path:last-child': {
+        fill: 'purple.10',
+      },
+    },
+    td: {
+      borderBottom: '1px solid',
+      borderColor: 'neutral.93',
+      paddingX: '16',
+      paddingY: '12',
+      textAlign: 'left',
+    },
+    expandTd: {
+      borderBottomColor: 'transparent',
+      width: '1%',
+      '+ td': {
+        paddingLeft: 0,
+      },
+    },
+  },
+};
+
+export default Tabletheme;

package/src/Components/Table/Table.tsx

@@ -0,0 +1,22 @@
+import { Table as ChakraTable, TableProps as ChakraTableProps, forwardRef } from '@chakra-ui/react';
+
+export interface TableProps extends ChakraTableProps {
+  isFixed?: boolean;
+}
+
+/**
+ * Table component is used to organize and display data efficiently. It renders a `<table>` element.
+ */
+const Table = forwardRef<TableProps, 'table'>((props, ref) => {
+  const { isFixed, ...rest } = props;
+
+  const properties: ChakraTableProps = {
+    sx: {
+      tableLayout: isFixed ? 'fixed' : 'auto',
+    },
+    ...rest,
+  };
+  return <ChakraTable {...properties} ref={ref} />;
+});
+
+export default Table;

package/src/Components/Table/TableCaption.tsx

@@ -0,0 +1,27 @@
+import {
+  TableCaption as ChakraTableCaption,
+  TableCaptionProps as ChakraTableCaptionProps,
+  forwardRef,
+  useTableStyles,
+} from '@chakra-ui/react';
+import Text from '../Text/Text';
+
+export interface TableCaptionProps extends Omit<ChakraTableCaptionProps, 'placement'> {
+  description?: string;
+}
+
+const TableCaption = forwardRef<TableCaptionProps, 'caption'>((props, ref) => {
+  const { children, description } = props;
+  const css = useTableStyles();
+
+  return (
+    <ChakraTableCaption {...props} placement="top" ref={ref}>
+      <Text as="h5" sx={css.captionTitle}>
+        {children}
+      </Text>
+      {!!description && <Text sx={css.captionDescription}>{description}</Text>}
+    </ChakraTableCaption>
+  );
+});
+
+export default TableCaption;

package/src/Components/Table/TableContainer.tsx

@@ -0,0 +1,9 @@
+import { TableContainer as ChakraTableContainer, TableContainerProps, forwardRef } from '@chakra-ui/react';
+
+const TableContainer = forwardRef<TableContainerProps, 'tbody'>((props, ref) => {
+  return <ChakraTableContainer {...props} ref={ref} />;
+});
+
+export type { TableContainerProps };
+
+export default TableContainer;

package/src/Components/Table/Tbody.tsx

@@ -0,0 +1,9 @@
+import { Tbody as ChakraTbody, TableBodyProps, forwardRef } from '@chakra-ui/react';
+
+const Tbody = forwardRef<TableBodyProps, 'div'>((props, ref) => {
+  return <ChakraTbody {...props} ref={ref} />;
+});
+
+export type { TableBodyProps };
+
+export default Tbody;

package/src/Components/Table/Td.tsx

@@ -0,0 +1,22 @@
+import { Td as ChakraTd, TableCellProps as ChakraTableCellProps, forwardRef } from '@chakra-ui/react';
+import { separatorStyle } from './Table.theme';
+
+export interface TableCellProps extends ChakraTableCellProps {
+  variant?: 'default' | 'separator';
+}
+
+const VARIANTS = {
+  default: {},
+  separator: separatorStyle,
+};
+
+const Td = forwardRef<TableCellProps, 'td'>((props, ref) => {
+  const { variant, ...rest } = props;
+  const properties: ChakraTableCellProps = {
+    sx: VARIANTS[variant || 'default'],
+    ...rest,
+  };
+  return <ChakraTd role="cell" {...properties} ref={ref} />;
+});
+
+export default Td;

package/src/Components/Table/Th.tsx

@@ -0,0 +1,45 @@
+import {
+  Th as ChakraTh,
+  TableColumnHeaderProps as ChakraTableColumnHeaderProps,
+  forwardRef,
+  useTableStyles,
+} from '@chakra-ui/react';
+import Box from '../Box/Box';
+import SortIcon from './SortIcon';
+
+type SortType = 'ascending' | 'descending' | undefined;
+
+export interface TableColumnHeaderProps extends ChakraTableColumnHeaderProps {
+  isSortable?: boolean;
+  onSortClick?: (sortDirection?: SortType) => void;
+  sortedBy?: SortType;
+}
+
+const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
+  const { children, isSortable, onSortClick, sortedBy, ...rest } = props;
+  const css = useTableStyles();
+  const properties: ChakraTableColumnHeaderProps = {
+    children,
+    ...rest,
+  };
+
+  if (isSortable) {
+    const onClick = () => {
+      if (onSortClick) {
+        onSortClick(sortedBy);
+      }
+    };
+    properties.padding = '0';
+    properties['aria-sort'] = sortedBy || 'none';
+    properties.children = (
+      <Box as="button" onClick={onClick} sx={css.sortButton}>
+        {children}
+        <SortIcon sx={css.sortIcon} />
+      </Box>
+    );
+  }
+
+  return <ChakraTh {...properties} ref={ref} />;
+});
+
+export default Th;

package/src/Components/Table/Thead.tsx

@@ -0,0 +1,9 @@
+import { Thead as ChakraThead, TableHeadProps, forwardRef } from '@chakra-ui/react';
+
+const Thead = forwardRef<TableHeadProps, 'thead'>((props, ref) => {
+  return <ChakraThead {...props} ref={ref} />;
+});
+
+export type { TableHeadProps };
+
+export default Thead;

package/src/Components/Table/Tr.tsx

@@ -0,0 +1,61 @@
+import { Children, ReactNode } from 'react';
+import {
+  Collapse,
+  Tr as ChakraTr,
+  TableRowProps as ChakraTableRowProps,
+  forwardRef,
+  useDisclosure,
+  useTableStyles,
+} from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+import Td from './Td';
+
+export interface TableRowProps extends ChakraTableRowProps {
+  expandableContent?: ReactNode | undefined;
+  /**
+   * @deprecated - Please use it only when really necessary, we are working on a new table-like components with clickable items
+   */
+  onClick?: ChakraTableRowProps['onClick'];
+}
+
+const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
+  const { isOpen, onToggle } = useDisclosure();
+  const css = useTableStyles();
+
+  const { children, expandableContent, onClick, ...rest } = props;
+  const properties: ChakraTableRowProps = {
+    onClick,
+    ...rest,
+  };
+
+  if (expandableContent || onClick) {
+    properties.role = 'button';
+    properties.sx = css.clickableTr;
+  }
+
+  if (expandableContent) {
+    const colSpan = Children.count(children) + 1;
+    return (
+      <>
+        <ChakraTr {...properties} ref={ref} onClick={onToggle}>
+          <Td sx={css.expandTd}>
+            <Icon name="ChevronDown" transform={isOpen ? 'rotate(-180deg)' : 'rotate(0deg)'} transition="300ms" />
+          </Td>
+          {children}
+        </ChakraTr>
+        <ChakraTr>
+          <Td colSpan={colSpan} paddingY="0" transform={isOpen ? 'none' : 'translateY(-1px)'}>
+            <Collapse in={isOpen}>{expandableContent}</Collapse>
+          </Td>
+        </ChakraTr>
+      </>
+    );
+  }
+  return (
+    <ChakraTr {...properties} ref={ref}>
+      {children}
+    </ChakraTr>
+  );
+});
+
+export default Tr;

package/src/index.ts

@@ -159,3 +159,27 @@ export { default as Accordion } from './Components/Accordion/Accordion';
 
 export type { AccordionItemProps } from './Components/Accordion/AccordionItem';
 export { default as AccordionItem } from './Components/Accordion/AccordionItem';
+
+export type { TableProps } from './Components/Table/Table';
+export { default as Table } from './Components/Table/Table';
+
+export type { TableCaptionProps } from './Components/Table/TableCaption';
+export { default as TableCaption } from './Components/Table/TableCaption';
+
+export type { TableContainerProps } from './Components/Table/TableContainer';
+export { default as TableContainer } from './Components/Table/TableContainer';
+
+export type { TableBodyProps } from './Components/Table/Tbody';
+export { default as Tbody } from './Components/Table/Tbody';
+
+export type { TableCellProps } from './Components/Table/Td';
+export { default as Td } from './Components/Table/Td';
+
+export type { TableColumnHeaderProps } from './Components/Table/Th';
+export { default as Th } from './Components/Table/Th';
+
+export type { TableHeadProps } from './Components/Table/Thead';
+export { default as Thead } from './Components/Table/Thead';
+
+export type { TableRowProps } from './Components/Table/Tr';
+export { default as Tr } from './Components/Table/Tr';

package/src/old.ts

@@ -72,27 +72,27 @@ export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
 export type { Props as Status500Props } from './Old/Status/Status500';
 export { default as Status500 } from './Old/Status/Status500';
 
-export type { Props as TableProps } from './Old/Table/Table';
-export { default as Table } from './Old/Table/Table';
+export type { Props as OldTableProps } from './Old/Table/Table';
+export { default as OldTable } from './Old/Table/Table';
 
-export type { Props as TableBodyProps } from './Old/Table/TableBody';
-export { default as TableBody } from './Old/Table/TableBody';
+export type { Props as OldTableBodyProps } from './Old/Table/TableBody';
+export { default as OldTableBody } from './Old/Table/TableBody';
 
-export type { Props as TableCellProps } from './Old/Table/TableCell';
-export { default as TableCell } from './Old/Table/TableCell';
+export type { Props as OldTableCellProps } from './Old/Table/TableCell';
+export { default as OldTableCell } from './Old/Table/TableCell';
 
-export type { Props as TableHeaderProps } from './Old/Table/TableHeader';
-export { default as TableHeader } from './Old/Table/TableHeader';
+export type { Props as OldTableHeaderProps } from './Old/Table/TableHeader';
+export { default as OldTableHeader } from './Old/Table/TableHeader';
 
-export type { Props as TableHeaderCellProps } from './Old/Table/TableHeaderCell';
+export type { Props as OldTableHeaderCellProps } from './Old/Table/TableHeaderCell';
 export type { TypeTableSort } from './Old/Table/TableHeaderCell';
-export { default as TableHeaderCell } from './Old/Table/TableHeaderCell';
+export { default as OldTableHeaderCell } from './Old/Table/TableHeaderCell';
 
-export type { Props as TableHeaderRowProps } from './Old/Table/TableHeaderRow';
-export { default as TableHeaderRow } from './Old/Table/TableHeaderRow';
+export type { Props as OldTableHeaderRowProps } from './Old/Table/TableHeaderRow';
+export { default as OldTableHeaderRow } from './Old/Table/TableHeaderRow';
 
-export type { Props as TableRowProps } from './Old/Table/TableRow';
-export { default as TableRow } from './Old/Table/TableRow';
+export type { Props as OldTableRowProps } from './Old/Table/TableRow';
+export { default as OldTableRow } from './Old/Table/TableRow';
 
 export type { Props as TextareaProps } from './Old/Textarea/Textarea';
 export { default as Textarea } from './Old/Textarea/Textarea';

package/src/theme.ts

@@ -18,6 +18,7 @@ import Input from './Components/Input/Input.theme';
 import Dropdown from './Components/Dropdown/Dropdown.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
+import Table from './Components/Table/Table.theme';
 import Alert from './Foundations/Themes/Alert.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
@@ -76,6 +77,7 @@ const theme = {
     Checkbox,
     ColorButton,
     Divider,
+    Dropdown,
     EmptyState,
     Link,
     List,
@@ -83,7 +85,7 @@ const theme = {
     Modal: Dialog,
     Radio,
     Select,
-    Dropdown,
+    Table,
     Tabs,
     Text,
     Tooltip,