[FRNT-507] Implement data table (#124)

* feat: implement data-table

* feat(data-table): add head renderer

* feat(data-table): add rowKey

* refactor(data-table): split up things

* fix(data-table/filter): checkboxes behavior

* refactor(data-table): small changes

* fix(data-table): types

* fix(data-table): import

* feat(data-table): add an export for DataTableColumn type

* fix(data-table): usage and types

* refactor(data-table): imports

Co-authored-by: Ainur <33234903+purplecandle@users.noreply.github.com>

* style(data-table): format

* refactor(data-table): remove unnecessary variable for placeholder

* fix(data-table): replace variant with priority

* [FRNT-548] Add documentation configurator (#170)

* feat(docs): add configurators (+ color configurator)

* style(docs): fix spaces

* style(icons): format

* style: lint styles

* chore: add lint:style:fix command

* perf(configurators): replace heavy libraries

* [FRNT-562] add icon component (#163)

* add icon component

* fix

* fix naming

* fix usage

* fix usage

* [FRNT-559] add toast weight (#165)

* add toast weight

* fix chip and button usage

* fix toast styles

* [FRNT-564] Implement color palette fabrics (#162)

* feat: implement color palette fabrucs

* refactor: remame variable

Co-authored-by: Шараев Айнур Раильевич <mr.sharaevainur@yandex.ru>

* [FRNT-568] add font stacks (#153)

* feat: add system-ui as a fallback font, add a font-weight vars

* feat: move font-stacks to a separate file

* refactor: remove font-weight, rename system font-stack

* refactor: rebase and format

* [FRNT-560] add weight to button-icon (#164)

* add weight to button-icon

* add goast styles

* fix icon-button styles

* [FRNT-396] Rewrite data selectors (#150)

* fix: rewrite data-selector, fix grammar

* feat: write styleguide for data-attribute

* update Styleguide

Co-authored-by: Ira <i.aristova@opends.tech>

* [FRNT-520] Rewrite tooltip (#129)

* chore: bump version (#169)

* feat(docs): add configurators (+ color configurator)

* style(docs): fix spaces

* feat(docs): add white priority to configurators

* refactor(configurators): change layout and color

* chore(deps): update lock

* fix(configurators): hardcoded configurator name

* refactor(configurators): remove unused data-attribute

* refactor(configurators): replace transparency parrent with svg

* refactor(configurators): styling

* style(configurators): remove unnecessary xmlns attribute

* refactor(configurators): styling

* style(configurators): remove unnecessary variables

* style(configurators): remove useless code

* refactor(configurator): stylesheets, simplify and add some comments

* fix(configurators): add viewbox for svg

* refactor(configurators): remove unused refs

* feat(configurators): add scope colors

* feat(configurators): limit the height of configurator's tab

* refactor(configurators): remove unused forwardRef

* fix(configurators): typo

Co-authored-by: Ainur <33234903+purplecandle@users.noreply.github.com>

* refactor(configurators): simplify toggle state

* chore(deps): sync lock

* refactor(configurators): size units

* fix(configurators): remove tertiary priority, add success priority

Co-authored-by: Irina Aristova <38761239+Irinaristova@users.noreply.github.com>
Co-authored-by: tatinacher <tatinacher@gmail.com>
Co-authored-by: Шараев Айнур Раильевич <mr.sharaevainur@yandex.ru>
Co-authored-by: Ainur <33234903+purplecandle@users.noreply.github.com>
Co-authored-by: Ira <i.aristova@opends.tech>
Co-authored-by: rchubarkin <dasasd31@gmail.com>

* [FRNT-603] Refactor data-attributes (#181)

* style: change styling data-attributes

* docs(styleguide): update information about data-attributes

* feat: move all dev stuff from lib to dev dir (#182)

* feat(docs): upgrade gatsby theme version (#183)

* [FRNT-592] feat: implement level decrement (#179)

* feat: implement level decrement

task: FRNT-592

* fix(LevelDecrement): style inner component instead of wrapper

* fix(LevelDecrement): naming

* feat: implement level downgrade

* fix: more specific exported global styles name

* fix(lib): level downgrade better naming

* [FRNT-543] create tab and tabbar component (#123)

* create tab ana tabbar component

* fix lint styles

* fix tabs styles

* fix tab styles

* fix shadow

* fix styles

* rewtire styles

* update tabs styles

* fix styles

* update styles

* add weight to tab

* update tab styles

* fix styles

* fix styles

* [DS-40] Fix refactored data-icon in box components (#186)

* feat(data-table): improve usage

* fix(table): text color

* fix(data-table): typo

Co-authored-by: Ainur <33234903+purplecandle@users.noreply.github.com>

* fix(table): add comment

Co-authored-by: risenforces <risenforces@gmail.com>
Co-authored-by: Ainur <33234903+purplecandle@users.noreply.github.com>
Co-authored-by: Irina Aristova <38761239+Irinaristova@users.noreply.github.com>
Co-authored-by: Шараев Айнур Раильевич <mr.sharaevainur@yandex.ru>
Co-authored-by: Ira <i.aristova@opends.tech>
Co-authored-by: rchubarkin <dasasd31@gmail.com>

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>>;
+}