@bitrise/bitkit 10.12.0-alpha-table.1 → 10.12.0

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

@@ -1,154 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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',
-      width: '100%',
-      paddingX: '16',
-      paddingY: '12',
-      fontWeight: 'bold',
-      textAlign: 'left',
-      _hover: {
-        backgroundColor: 'neutral.90',
-      },
-    },
-    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

@@ -1,22 +0,0 @@
-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

@@ -1,27 +0,0 @@
-import {
-  TableCaption as ChakraTableCaption,
-  TableCaptionProps as ChakraTableCaptionProps,
-  forwardRef,
-  useMultiStyleConfig,
-} 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 = useMultiStyleConfig('Table');
-
-  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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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 {...properties} ref={ref} />;
-});
-
-export default Td;

package/src/Components/Table/Th.tsx

@@ -1,50 +0,0 @@
-import {
-  Th as ChakraTh,
-  TableColumnHeaderProps as ChakraTableColumnHeaderProps,
-  forwardRef,
-  useMultiStyleConfig,
-} from '@chakra-ui/react';
-import Box from '../Box/Box';
-import Icon, { TypeIconName } from '../Icon/Icon';
-
-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 = useMultiStyleConfig('Table');
-  const properties: ChakraTableColumnHeaderProps = {
-    children,
-    ...rest,
-  };
-
-  if (isSortable) {
-    let iconName: TypeIconName = 'Request';
-    if (sortedBy === 'ascending') {
-      iconName = 'ArrowUp';
-    } else if (sortedBy === 'descending') {
-      iconName = 'ArrowDown';
-    }
-    const onClick = () => {
-      if (onSortClick) {
-        onSortClick(sortedBy);
-      }
-    };
-    properties.padding = '0';
-    properties.children = (
-      <Box as="button" onClick={onClick} sx={css.sortButton}>
-        {children}
-        <Icon name={iconName} transform={sortedBy ? 'none' : 'rotate(90deg)'} />
-      </Box>
-    );
-  }
-
-  return <ChakraTh {...properties} ref={ref} />;
-});
-
-export default Th;

package/src/Components/Table/Thead.tsx

@@ -1,9 +0,0 @@
-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

@@ -1,61 +0,0 @@
-import { Children, ReactNode } from 'react';
-import {
-  Collapse,
-  Tr as ChakraTr,
-  TableRowProps as ChakraTableRowProps,
-  forwardRef,
-  useDisclosure,
-  useMultiStyleConfig,
-} 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 = useMultiStyleConfig('Table');
-
-  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;