[FRNT-507] Implement data table

package.json

@@ -108,6 +108,8 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.5",
     "color-rgba": "^2.2.3",
+    "effector": "^21.8.12",
+    "effector-react": "^21.3.3",
     "nanoid": "^3.1.23",
     "react": "16.14.0",
     "react-colorful": "^5.2.3",

src/woly/atoms/table/index.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
 
 const map = (properties: { columns: number } & Priority) => ({
@@ -17,7 +17,7 @@ export const Table = styled.table.attrs(map)`
   display: grid;
   grid-template-columns: repeat(var(--local-columns), auto);
   gap: var(--local-gap);
-`;
+` as StyledComponent<'table', Record<string, unknown>, { columns: number } & Priority>;
 
 export const Thead = styled.thead`
   display: contents;
@@ -32,9 +32,13 @@ export const Th = styled.th`
   align-items: center;
   box-sizing: border-box;
   max-width: var(--local-cell-max-width);
+  /* TODO: Replace with box [09.08.2020] */
   padding: var(--local-vertical) var(--local-horizontal);
 
   color: var(--woly-canvas-text-disabled);
+  font-weight: normal;
+
+  line-height: var(--woly-line-height);
 
   background: var(--woly-shape-text-default);
 `;
@@ -46,6 +50,7 @@ export const Td = styled.td`
   padding: var(--local-vertical) var(--local-horizontal);
 
   color: var(--woly-canvas-text-default);
+  line-height: var(--woly-line-height);
 
   background: var(--woly-shape-text-default);
 `;

src/woly/atoms/table/usage.mdx

@@ -1,6 +1,11 @@
 import {Playground} from 'dev/playground'
 import {Table, Tbody, Td, Th, Thead, Tr} from 'ui'
 
+To create a table use Table, Thead, Tbody, Th, Tr, Td components.
+To set number of columns pass `columns` prop to the Table component.
+
+### Example
+
 export const tableHead = [
   {id: 'id', name: 'Id'},
   {id: 'firstName', name: 'First name'},
@@ -65,11 +70,6 @@ export const tableRows = [
   },
 ];
 
-To create a table use Table, Thead, Tbody, Th, Tr, Td components.
-To set number of columns pass `columns` prop to the Table component.
-
-### Example
-
 <Playground>
   <block.L style={{ background: '#f5f5f5', padding: '20px' }}>
     <Table columns={tableHead.length} priority="primary">

src/woly/molecules/data-table/filter.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { IconArrowDown } from 'static/icons';
+import { box } from 'ui/elements/box';
+
+import { Button, Checkbox, ListContainer, Popover, Surface } from '../../index';
+
+interface Option {
+  name: string;
+  value: string;
+}
+
+interface FilterProps {
+  title: React.ReactNode | string;
+  options: Option[];
+  value: string[];
+  onChange: (value: string[]) => void;
+}
+
+export const Filter: React.FC<FilterProps> = ({
+  title,
+  options,
+  value: checkedValues,
+  onChange,
+}) => {
+  const [isOpen, setOpen] = React.useReducer((is) => !is, false);
+
+  const getUpdatedValue = (value: string) => {
+    if (checkedValues.includes(value)) {
+      // remove
+      return checkedValues.filter((item) => item !== value);
+    }
+
+    // add
+    return checkedValues.concat(value);
+  };
+
+  const createCheckHandler = (item: string) => {
+    return () => onChange(getUpdatedValue(item));
+  };
+
+  if (options.length === 0) {
+    console.log('No options are passed to filter');
+    return null;
+  }
+
+  return (
+    <FilterBlock>
+      <Popover
+        isOpen={isOpen}
+        content={
+          <ListContainer>
+            <Dropdown>
+              {options.map(({ name, value }) => (
+                <Checkbox
+                  id={value}
+                  key={value}
+                  text={name}
+                  checked={checkedValues.includes(value)}
+                  onChange={createCheckHandler(value)}
+                  priority="primary"
+                />
+              ))}
+            </Dropdown>
+          </ListContainer>
+        }
+      >
+        <FilterButton onClick={setOpen}>
+          <div data-text>{title}</div>
+          <div data-icon>
+            <IconArrowDown />
+          </div>
+        </FilterButton>
+      </Popover>
+    </FilterBlock>
+  );
+};
+
+const Dropdown = styled(Surface)`
+  position: absolute;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  font-weight: normal;
+`;
+
+const FilterBlock = styled.div`
+  position: relative;
+`;
+
+const FilterButton = styled.div`
+  ${box}
+
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+
+  background: var(--woly-shape-text-default);
+
+  border: var(--woly-border-width) solid var(--woly-canvas-default);
+
+  cursor: pointer;
+
+  [data-icon] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    svg > path {
+      fill: var(--woly-canvas-text-disabled);
+    }
+  }
+`;

src/woly/molecules/data-table/index.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import { CellProps, DataTableProps, HeadGroupProps, HeadProps } from './types';
+import { Table, Tbody, Td, Th, Thead, Tr } from '../../atoms/table';
+
+export function DataTable<TValue, TRowKey extends string>({
+  rowKey,
+  columns,
+  placeholder = '----',
+  priority = 'secondary',
+  values,
+  ...rest
+}: DataTableProps<TValue, TRowKey>) {
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Table columns={columns.length} priority={priority} {...rest}>
+      <TableHeadGroup columns={columns} />
+      <Tbody>
+        {values.map((row) => (
+          <Tr key={row[rowKey]}>
+            {columns.map((column) => {
+              const Cell = column.cell || DefaultCell;
+
+              return (
+                <Td key={column.property}>
+                  <Cell
+                    value={row[column.property]}
+                    placeholder={column.placeholder || placeholder}
+                  />
+                </Td>
+              );
+            })}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+}
+
+function DefaultCell<T>({ value, placeholder }: CellProps<T>) {
+  return <>{value || placeholder}</>;
+}
+
+function DefaultHead({ title }: HeadProps) {
+  return <>{title}</>;
+}
+
+function TableHeadGroup<T>({ columns }: HeadGroupProps<T>) {
+  return (
+    <Thead>
+      <Tr>
+        {columns.map(({ title, property, head }) => {
+          const Head = head || DefaultHead;
+          const padding = isReactEntity(title) ? '0' : '';
+
+          return (
+            <Th key={property} style={{ padding }}>
+              <Head title={title} />
+            </Th>
+          );
+        })}
+      </Tr>
+    </Thead>
+  );
+}
+
+const isReactComponent = (value: unknown) => typeof value === 'function';
+const isReactElement = (value: unknown) => typeof value === 'object';
+const isReactEntity = (value: unknown) => isReactComponent(value) || isReactElement(value);
+
+export { DataTableColumn, HeadProps as DataTableHeadProps } from './types';

src/woly/molecules/data-table/range-cell.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface RangeProps {
+  value: {
+    from: number;
+    to: number;
+  };
+  placeholder: string;
+}
+
+export const RangeCell: React.FC<RangeProps> = ({ value, placeholder }) => (
+  <span>
+    from {value.from || placeholder} to {value.to || placeholder}
+  </span>
+);

src/woly/molecules/data-table/types.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Priority } from 'lib/types';
+
+export type CellType<TValue, TRowKey extends string> = {
+  [key in TRowKey]: string;
+} &
+  Record<string, TValue>;
+
+export interface HeadProps {
+  title: React.ReactNode | string;
+}
+
+export interface CellProps<TValue> {
+  placeholder?: React.ReactNode | string;
+  value: TValue;
+}
+
+export interface DataTableColumn<TValue> {
+  title: React.ReactNode | string;
+  property: string;
+  head?: React.FC<HeadProps>;
+  cell?: React.FC<CellProps<TValue>>;
+  placeholder?: React.ReactNode | string;
+}
+
+export type DataTableProps<
+  TValue,
+  TRowKey extends string
+> = React.HTMLAttributes<HTMLTableElement> &
+  Priority & {
+    rowKey: TRowKey;
+    columns: Array<DataTableColumn<TValue>>;
+    placeholder?: React.ReactNode | string;
+    values: Array<CellType<TValue, TRowKey>>;
+  };
+
+export interface HeadGroupProps<TValue> {
+  columns: Array<DataTableColumn<TValue>>;
+}