polpo 0.1.13 → 0.1.16

package/src/components/smart-table/smart-table.column.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+import { MdArrowDownward, MdArrowUpward } from 'react-icons/md';
+
+import { useClassNames } from '../../hooks';
+import { Grid } from '../../layouts';
+import { Ripple } from '../ripple';
+import { Typography } from '../typography';
+
+import { ColumnData, Order, RowDataObject } from './smart-table.types';
+
+type SmartTableColumnProps<RowData extends RowDataObject> = ColumnData<RowData> & {
+  toggleSortField: (field: ColumnData<RowData>['sortBy']) => void;
+  sortField: ColumnData<RowData>['sortBy'] | null;
+  orderField: Order | null;
+};
+
+export const SmartTableColumn = <RowData extends RowDataObject>({
+  header,
+  sortBy,
+  icon: Icon,
+  width,
+  field,
+  toggleSortField,
+  sortField,
+  orderField,
+  hidden,
+}: SmartTableColumnProps<RowData>) => {
+  const sortByKey = sortBy !== undefined ? sortBy : field;
+
+  const columnClassName = useClassNames({
+    'sort-on-click': Boolean(sortByKey),
+  });
+
+  const columnOnClick = sortByKey ? () => toggleSortField(sortByKey) : undefined;
+
+  const sortIcon = useMemo(() => {
+    if (!sortByKey) return null;
+
+    return (
+      <span className='sort-icon'>
+        {Boolean(sortField) &&
+          sortField === sortByKey &&
+          (orderField === 'asc' ? <MdArrowUpward /> : <MdArrowDownward />)}
+      </span>
+    );
+  }, [sortByKey, sortField, orderField]);
+
+  if (hidden) return null;
+
+  return (
+    <th style={{ width }} className={columnClassName} onClick={columnOnClick}>
+      <Grid flow='column' gap='0.5em' jc='space-between' ai='center'>
+        {Icon ? <Icon /> : null}
+        <Typography variant='label' noPadding>
+          {header}
+        </Typography>
+        {sortIcon}
+      </Grid>
+      <Ripple color='var(--color-primary-700)' />
+    </th>
+  );
+};

package/src/components/smart-table/smart-table.component.tsx

@@ -0,0 +1,116 @@
+import { useMemo, useState } from 'react';
+
+import { useClassNames } from '../../hooks';
+import { KeyValuesOf } from '../../types';
+import { Checkbox } from '../form';
+
+import { SmartTableColumn } from './smart-table.column';
+import { sortData } from './smart-table.helpers';
+import { useSort } from './smart-table.hooks';
+import { SmartTableRow } from './smart-table.row';
+import './smart-table.styles.css';
+import { ColumnData, RowDataObject } from './smart-table.types';
+
+type SmartTableProps<RowData extends RowDataObject> = {
+  columns: Array<ColumnData<RowData>>;
+  data: Array<RowData>;
+  width?: 'scroll' | 'content';
+  selectable?: boolean;
+  rowId: KeyValuesOf<RowData, React.Key>;
+  className?: string;
+  tableClassName?: string;
+};
+
+export const SmartTable = <RowData extends RowDataObject>({
+  columns: initialColumns,
+  data,
+  width,
+  selectable = false,
+  rowId,
+  className = '',
+  tableClassName: _tableClassName = '',
+}: SmartTableProps<RowData>) => {
+  const [selected, setSelected] = useState<{ [key: string]: RowData }>({});
+
+  const tableClassName = useClassNames({
+    'smart-table': true,
+    [_tableClassName]: Boolean(_tableClassName),
+    'layout-fixed': width === 'content',
+    'layout-scrollable': width === 'scroll',
+  });
+
+  const tableContainerClassName = useClassNames({
+    'smart-table-container': true,
+    [className]: Boolean(className),
+  });
+
+  const { sortBy, order, toggleSortField } = useSort<RowData>();
+
+  const columns = useMemo(() => {
+    let finalColumns = [...initialColumns];
+
+    if (selectable) {
+      finalColumns = [
+        {
+          header: `${Object.values(selected).length}`,
+          render: (data, rowKey) => (
+            <Checkbox
+              name={`selected-${rowKey}`}
+              value={`${rowKey}` in selected}
+              setValue={isSelected => {
+                setSelected(prev => {
+                  const copy = { ...prev };
+
+                  if (isSelected) {
+                    copy[`${rowKey}`] = data;
+                  } else {
+                    delete copy[`${rowKey}`];
+                  }
+
+                  return copy;
+                });
+              }}
+            />
+          ),
+        },
+        ...finalColumns,
+      ];
+    }
+
+    return finalColumns;
+  }, [initialColumns, selectable, selected]);
+
+  const rows = useMemo(() => sortData<RowData>(data, sortBy, order), [data, sortBy, order]);
+
+  return (
+    <section className={tableContainerClassName}>
+      <table className={tableClassName}>
+        <thead>
+          <tr>
+            {columns.map((column, key) => (
+              <SmartTableColumn
+                key={key}
+                toggleSortField={toggleSortField}
+                sortField={sortBy}
+                orderField={order}
+                {...column}
+              />
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map(row => (
+            <SmartTableRow
+              key={row[rowId] as React.Key}
+              rowKey={row[rowId] as React.Key}
+              data={row}
+              columns={columns}
+              isSelected={`${row[rowId] as React.Key}` in selected}
+              selectable={selectable}
+            />
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+};

package/src/components/smart-table/smart-table.helpers.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { Typography } from '../typography';
+
+import { ColumnData, Order, Primitive, RowDataObject } from './smart-table.types';
+
+const renderRowColumn = <RowData extends RowDataObject>(
+  data: RowData,
+  { field, render, Component }: ColumnData<RowData>,
+  rowKey: React.Key,
+): React.ReactNode => {
+  if (field && data[field])
+    return (
+      <Typography noPadding nowrap>
+        {data[field] as Primitive}
+      </Typography>
+    );
+
+  if (render) return render(data, rowKey);
+
+  if (Component) return <Component data={data} rowKey={rowKey} />;
+};
+
+export const renderRow = <RowData extends RowDataObject>(
+  data: RowData,
+  columns: Array<ColumnData<RowData>>,
+  rowKey: React.Key,
+) => columns.map((column, key) => (column.hidden ? null : <td key={key}>{renderRowColumn(data, column, rowKey)}</td>));
+
+export const sortData = <RowData extends RowDataObject>(
+  data: Array<RowData>,
+  sortBy: ColumnData<RowData>['sortBy'] | null,
+  order: Order | null,
+) => {
+  if (sortBy) {
+    return data.toSorted((a, b) => {
+      const fieldA = a[sortBy];
+      const fieldB = b[sortBy];
+
+      if (
+        ['number', 'boolean', 'string'].includes(typeof fieldA) &&
+        ['number', 'boolean', 'string'].includes(typeof fieldB)
+      ) {
+        if (fieldA === fieldB) return 0;
+
+        if (order === 'asc') {
+          return fieldA > fieldB ? 1 : -1;
+        }
+
+        return fieldA > fieldB ? -1 : 1;
+      }
+
+      return 0;
+    });
+  }
+
+  return data;
+};

package/src/components/smart-table/smart-table.hooks.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState } from 'react';
+
+import { ColumnData, Order, RowDataObject } from './smart-table.types';
+
+export const useSort = <RowData extends RowDataObject>() => {
+  const [[sortBy, order], setSortField] = useState<[ColumnData<RowData>['sortBy'] | null, Order | null]>([null, null]);
+
+  const toggleSortField = useCallback((sortByField: ColumnData<RowData>['sortBy']) => {
+    setSortField(([sortBy, order]) => {
+      if (sortByField !== sortBy) {
+        return [sortByField, 'asc'];
+      }
+
+      if (order === 'asc') {
+        return [sortByField, 'desc'];
+      }
+
+      return [null, null];
+    });
+  }, []);
+
+  return {
+    sortBy,
+    order,
+    toggleSortField,
+  };
+};

package/src/components/smart-table/smart-table.row.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { useClassNames } from '../../hooks';
+
+import { renderRow } from './smart-table.helpers';
+import { ColumnData, RowDataObject } from './smart-table.types';
+
+type SmartTableRowProps<RowData extends RowDataObject> = {
+  data: RowData;
+  columns: Array<ColumnData<RowData>>;
+  isSelected: boolean;
+  selectable: boolean;
+  rowKey: React.Key;
+};
+
+export const SmartTableRow = <RowData extends RowDataObject>({
+  data,
+  columns,
+  isSelected = false,
+  selectable = false,
+  rowKey,
+}: SmartTableRowProps<RowData>) => {
+  const rowClassName = useClassNames({
+    'row-selected': selectable && isSelected,
+  });
+
+  return <tr className={rowClassName}>{renderRow(data, columns, rowKey)}</tr>;
+};

package/src/components/smart-table/smart-table.styles.css

@@ -0,0 +1,102 @@
+@reference "polpo-tailwind-config/styles";
+
+.smart-table-container {
+    border: 0 solid var(--color-primary-500);
+    border-radius: 5px;
+    overflow: auto;
+    height: 100%;
+    width: 100%;
+    margin: auto;
+}
+
+.smart-table {
+    border-collapse: collapse;
+    position: relative;
+    width: 100%;
+
+    &.layout-fixed {
+        table-layout: fixed;
+    }
+
+    &.layout-scrollable {
+        table-layout: auto;
+    }
+
+    thead {
+        position: sticky;
+        z-index: 10;
+        top: 0;
+        box-shadow:
+                0 3px 5px 0 rgba(0, 0, 0, 0.2),
+                0 1px 10px 0 rgba(0, 0, 0, 0.12);
+
+        tr {
+            background: var(--color-primary-500);
+            color: var(--color-primary-50);
+            transition: all 300ms ease;
+        }
+    }
+
+    tbody {
+        tr {
+            box-shadow: inset 0 0 0 0 var(--color-primary-500);
+            transition: box-shadow 300ms ease;
+
+            &.row-selected,
+            &:hover {
+                background: var(--color-background-paper);
+            }
+
+            &.row-selected {
+                box-shadow: inset 10px 0 0 -5px var(--color-primary-500);
+            }
+
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--color-border);
+            }
+        }
+    }
+
+    th {
+        padding: 0.8em 1.2em;
+        user-select: none;
+
+        &.sort-on-click {
+            cursor: pointer;
+        }
+
+        .sort-icon {
+            width: 1em;
+            display: block;
+        }
+
+        svg {
+            animation: fadeIn 300ms ease;
+        }
+
+        path {
+            transition: all 300ms ease;
+        }
+
+        &:first-child {
+            padding-left: 2em;
+        }
+
+        &:last-child {
+            padding-right: 2em;
+        }
+    }
+
+    td {
+        transition: all 300ms ease;
+        padding: 0.6em 1em;
+
+        &:first-child {
+            padding-left: 2em;
+        }
+
+        &:last-child {
+            padding-right: 2em;
+        }
+    }
+}

package/src/components/smart-table/smart-table.types.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IconType } from 'react-icons';
+
+import { KeyValuesOf } from '../../types';
+
+export type Primitive = string | number | boolean;
+
+export type RowDataObject = { [key: string]: Primitive | object };
+
+export type Order = 'asc' | 'desc';
+
+type ColumnDataCommon<RowData extends RowDataObject> = {
+  header: React.ReactNode;
+  sortBy?: KeyValuesOf<RowData, Primitive> | null;
+  icon?: IconType;
+  width?: `${number}px` | `${number}em` | `${number}%`;
+  hidden?: boolean;
+};
+
+type ColumnDataField<RowData extends RowDataObject> = ColumnDataCommon<RowData> & {
+  field: KeyValuesOf<RowData, Primitive>;
+  sortBy?: null;
+  render?: never;
+  Component?: never;
+};
+
+type ColumnDataRender<RowData extends RowDataObject> = ColumnDataCommon<RowData> & {
+  field?: never;
+  render: (row: RowData, rowKey: React.Key) => React.ReactNode;
+  Component?: never;
+};
+
+type ColumnDataComponent<RowData extends RowDataObject> = ColumnDataCommon<RowData> & {
+  field?: never;
+  render?: never;
+  Component: React.FC<{ data: RowData; rowKey: React.Key }>;
+};
+
+export type ColumnData<RowData extends RowDataObject> =
+  | ColumnDataField<RowData>
+  | ColumnDataRender<RowData>
+  | ColumnDataComponent<RowData>;

package/src/components/tabs/index.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/src/components/tabs/tabs-list.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { useClassNames } from '../../hooks';
+
+import { Tabs } from './tabs';
+
+export enum RadiusVariants {
+  None = 'none',
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+  Full = 'full',
+}
+
+export enum SizeVariants {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
+const DefaultRect = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+};
+
+export enum TabListVariant {
+  SOLID = 'solid',
+  GHOST = 'ghost',
+  FLAT = 'flat',
+  LINE = 'line',
+}
+
+export enum TabListColor {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+}
+
+export enum TabListDirection {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
+
+export type TabListProps = {
+  openTab: string;
+  variant?: `${TabListVariant}`;
+  children?: React.ReactNode;
+  size?: `${SizeVariants}`;
+  color?: `${TabListColor}`;
+  radius?: `${RadiusVariants}`;
+  direction?: `${TabListDirection}`;
+  className?: string;
+  style?: React.CSSProperties;
+  tabs?: Array<{
+    id: string;
+    label: React.ReactNode;
+  }>;
+};
+
+export const TabsList = ({
+  tabs = [],
+  variant = TabListVariant.SOLID,
+  radius = RadiusVariants.Full,
+  direction = TabListDirection.HORIZONTAL,
+  color,
+  children,
+  openTab,
+  size = SizeVariants.Medium,
+  className = '',
+  style = {},
+}: TabListProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const selectedTabRef = useRef<HTMLSpanElement>(null);
+  const [isSelectorActive, setIsSelectorActive] = useState(false);
+  const [selector, setSelector] = useState(DefaultRect);
+  const containerClassNames = useClassNames({
+    'tab-list': true,
+    [`variant-${variant}`]: Boolean(variant),
+    [`size-${size}`]: Boolean(size),
+    [`radius-${radius}`]: Boolean(radius),
+    [`color-${color}`]: Boolean(color),
+    'vertical-direction': direction === TabListDirection.VERTICAL,
+    [className]: Boolean(className),
+  });
+
+  useEffect(() => {
+    const selectedRect = selectedTabRef.current?.getBoundingClientRect() ?? DefaultRect;
+    const containerRect = containerRef.current?.getBoundingClientRect() ?? DefaultRect;
+
+    const width = selectedRect.width;
+    const height = variant === TabListVariant.LINE ? 2 : selectedRect.height;
+    const left = selectedRect.left - containerRect.left;
+    const top =
+      variant === TabListVariant.LINE
+        ? selectedRect.top + selectedRect.height - containerRect.top
+        : selectedRect.top - containerRect.top;
+
+    setSelector({ left, top, width, height });
+
+    if (!isSelectorActive) {
+      setTimeout(() => {
+        setIsSelectorActive(true);
+      }, 100);
+    }
+  }, [isSelectorActive, variant, openTab]);
+
+  return (
+    <section className={containerClassNames} ref={containerRef} style={style}>
+      {Boolean(variant) && <span className={`tabs-selector ${isSelectorActive ? 'active' : ''}`} style={selector} />}
+      {tabs.map(({ id, label }) => (
+        <Tabs.Tab key={id} id={id} ref={id === openTab ? selectedTabRef : undefined}>
+          {label}
+        </Tabs.Tab>
+      ))}
+      {children}
+    </section>
+  );
+};