polpo 0.1.0

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

@@ -0,0 +1,301 @@
+import { Icon } from '../icon';
+
+import { SmartTable } from './smart-table';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const users = [
+  {
+    age: '25',
+    gender: 'male',
+    occupation: 'Software engineer',
+    hobbies: ['Reading', 'Hiking'],
+    email: 'john@example.com',
+    phone: '123-456-7890',
+    username: 'johnny25',
+    name: 'John Doe',
+    country: 'USA',
+    id: '1',
+  },
+  {
+    age: '30',
+    gender: 'female',
+    occupation: 'Graphic designer',
+    hobbies: ['Painting', 'Yoga'],
+    email: 'jane@example.com',
+    phone: '987-654-3210',
+    username: 'janeD30',
+    name: 'Jane Smith',
+    country: 'Canada',
+    id: '2',
+  },
+  {
+    age: '28',
+    gender: 'male',
+    occupation: 'Data analyst',
+    hobbies: ['Gaming', 'Cycling'],
+    email: 'mike@example.com',
+    phone: '555-123-4567',
+    username: 'mikeA28',
+    name: 'Mike Johnson',
+    country: 'UK',
+    id: '3',
+  },
+  {
+    age: '35',
+    gender: 'female',
+    occupation: 'Marketing manager',
+    hobbies: ['Traveling', 'Cooking'],
+    email: 'sara@example.com',
+    phone: '444-987-6543',
+    username: 'saraM35',
+    name: 'Sara Wilson',
+    country: 'Australia',
+    id: '4',
+  },
+  {
+    age: '22',
+    gender: 'male',
+    occupation: 'Web developer',
+    hobbies: ['Programming', 'Photography'],
+    email: 'alex@example.com',
+    phone: '333-555-1234',
+    username: 'alexD22',
+    name: 'Alex Brown',
+    country: 'Germany',
+    id: '5',
+  },
+  {
+    age: '27',
+    gender: 'female',
+    occupation: 'HR specialist',
+    hobbies: ['Dancing', 'Reading'],
+    email: 'lisa@example.com',
+    phone: '222-444-9876',
+    username: 'lisaS27',
+    name: 'Lisa Davis',
+    country: 'France',
+    id: '6',
+  },
+  {
+    age: '31',
+    gender: 'male',
+    occupation: 'Financial analyst',
+    hobbies: ['Investing', 'Golfing'],
+    email: 'tom@example.com',
+    phone: '111-333-5555',
+    username: 'tomA31',
+    name: 'Tom Miller',
+    country: 'Japan',
+    id: '7',
+  },
+  {
+    age: '29',
+    gender: 'female',
+    occupation: 'Sales executive',
+    hobbies: ['Shopping', 'Running'],
+    email: 'anna@example.com',
+    phone: '666-222-4444',
+    username: 'annaE29',
+    name: 'Anna Taylor',
+    country: 'Brazil',
+    id: '8',
+  },
+  {
+    age: '26',
+    gender: 'male',
+    occupation: 'IT support',
+    hobbies: ['Gaming', 'Watching movies'],
+    email: 'jake@example.com',
+    phone: '777-111-3333',
+    username: 'jakeS26',
+    name: 'Jake Anderson',
+    country: 'India',
+    id: '9',
+  },
+  {
+    age: '33',
+    gender: 'female',
+    occupation: 'Nurse',
+    hobbies: ['Cooking', 'Painting'],
+    email: 'kate@example.com',
+    phone: '888-666-2222',
+    username: 'kateN33',
+    name: 'Kate Thomas',
+    country: 'Italy',
+    id: '10',
+  },
+  {
+    age: '24',
+    gender: 'male',
+    occupation: 'Teacher',
+    hobbies: ['Reading', 'Traveling'],
+    email: 'ryan@example.com',
+    phone: '999-777-1111',
+    username: 'ryanT24',
+    name: 'Ryan Jackson',
+    country: 'Mexico',
+    id: '11',
+  },
+  {
+    age: '32',
+    gender: 'female',
+    occupation: 'Lawyer',
+    hobbies: ['Running', 'Yoga'],
+    email: 'lily@example.com',
+    phone: '000-888-6666',
+    username: 'lilyL32',
+    name: 'Lily White',
+    country: 'South Africa',
+    id: '12',
+  },
+  {
+    age: '23',
+    gender: 'male',
+    occupation: 'Mechanic',
+    hobbies: ['Fixing cars', 'Fishing'],
+    email: 'matt@example.com',
+    phone: '111-999-7777',
+    username: 'mattM23',
+    name: 'Matt Harris',
+    country: 'Russia',
+    id: '13',
+  },
+  {
+    age: '34',
+    gender: 'female',
+    occupation: 'Architect',
+    hobbies: ['Designing', 'Hiking'],
+    email: 'sophia@example.com',
+    phone: '222-000-8888',
+    username: 'sophiaA34',
+    name: 'Sophia Clark',
+    country: 'Spain',
+    id: '14',
+  },
+  {
+    age: '21',
+    gender: 'male',
+    occupation: 'Intern',
+    hobbies: ['Learning', 'Reading'],
+    email: 'chris@example.com',
+    phone: '333-111-9999',
+    username: 'chrisI21',
+    name: 'Chris Lewis',
+    country: 'Netherlands',
+    id: '15',
+  },
+  {
+    age: '36',
+    gender: 'female',
+    occupation: 'CEO',
+    hobbies: ['Gambling', 'Traveling'],
+    email: 'emily@example.com',
+    phone: '444-222-0000',
+    username: 'emilyC36',
+    name: 'Emily Robinson',
+    country: 'Sweden',
+    id: '16',
+  },
+  {
+    age: '37',
+    gender: 'male',
+    occupation: 'Doctor',
+    hobbies: ['Helping others', 'Running'],
+    email: 'david@example.com',
+    phone: '555-333-1111',
+    username: 'davidD37',
+    name: 'David Hall',
+    country: 'Norway',
+    id: '17',
+  },
+  {
+    age: '38',
+    gender: 'female',
+    occupation: 'Accountant',
+    hobbies: ['Calculating', 'Reading'],
+    email: 'olivia@example.com',
+    phone: '666-444-2222',
+    username: 'oliviaA38',
+    name: 'Olivia Young',
+    country: 'Finland',
+    id: '18',
+  },
+  {
+    age: '39',
+    gender: 'male',
+    occupation: 'Plumber',
+    hobbies: ['Fixing pipes', 'Fishing'],
+    email: 'noah@example.com',
+    phone: '777-555-3333',
+    username: 'noahP39',
+    name: 'Noah King',
+    country: 'Denmark',
+    id: '19',
+  },
+  {
+    age: '40',
+    gender: 'female',
+    occupation: 'Teacher',
+    hobbies: ['Teaching', 'Traveling'],
+    email: 'ava@example.com',
+    phone: '888-666-4444',
+    username: 'avaT40',
+    name: 'Ava Scott',
+    country: 'Belgium',
+    id: '20',
+  },
+];
+
+const meta: Meta<typeof SmartTable> = {
+  title: 'Smart Table',
+  component: SmartTable,
+  argTypes: {
+    columns: { control: false },
+    data: { control: false },
+    width: { control: 'inline-radio', options: ['scroll', 'content'] },
+    selectable: { control: 'boolean' },
+    rowId: { control: false },
+  },
+  args: {},
+  decorators: [
+    Story => (
+      <div style={{ width: '100%', maxHeight: '500px', overflow: 'auto' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof SmartTable>;
+
+export const Users: Story = {
+  args: {
+    // @ts-expect-error Storybook doesn't recognize the rowId prop
+    rowId: 'id',
+    data: users,
+    columns: [
+      // @ts-expect-error Storybook doesn't recognize props
+      { header: 'Name', field: 'name' },
+      // @ts-expect-error Storybook doesn't recognize props
+      { header: 'Age', field: 'age' },
+      // @ts-expect-error Storybook doesn't recognize props
+      { header: 'Email', field: 'email' },
+      // @ts-expect-error Storybook doesn't recognize props
+      { header: 'Username', field: 'username' },
+      // @ts-expect-error Storybook doesn't recognize props
+      { header: 'Phone', field: 'phone' },
+      {
+        header: 'Gender',
+        render: data => <Icon name={data.gender === 'male' ? 'user' : 'camera'} />,
+        // @ts-expect-error Storybook doesn't recognize props
+        sortBy: 'gender',
+      },
+      // @ts-expect-error Storybook doesn't recognize props
+      { header: 'Country', field: 'country' },
+      // @ts-expect-error Storybook doesn't recognize props
+      { header: 'Occupation', field: 'occupation' },
+    ],
+  },
+};

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

@@ -0,0 +1,102 @@
+import { styled } from 'styled-components';
+
+export const SmartTableContainerStyle = styled.section`
+  border: 1px solid ${props => props.theme.colors.primary.main};
+  border-radius: 10px;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+`;
+
+export const SmartTableStyle = styled.table`
+  border-collapse: collapse;
+  position: relative;
+
+  &.layout-fixed {
+    table-layout: fixed;
+  }
+
+  &.layout-scrollable {
+    table-layout: auto;
+  }
+`;
+
+export const SmartHeaderStyle = styled.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);
+`;
+
+export const SmartBodyStyle = styled.tbody``;
+
+export const SmartColumnStyle = styled.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;
+  }
+`;
+
+export const SmartHeaderRowStyle = styled.tr`
+  background: ${props => props.theme.colors.primary.main};
+  color: ${props => props.theme.colors.primary.contrast};
+  transition: all 300ms ease;
+`;
+
+export const SmartRowStyle = styled.tr`
+  background: ${props => props.theme.colors.background.main};
+  box-shadow: inset 0 0 0 0 ${props => props.theme.colors.primary.main};
+  transition: box-shadow 300ms ease;
+
+  &.row-selected,
+  &:hover {
+    background: ${props => props.theme.colors.background.paper};
+  }
+
+  &.row-selected {
+    box-shadow: inset 10px 0 0 -5px ${props => props.theme.colors.primary.main};
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid ${props => props.theme.colors.border.main};
+  }
+`;
+
+export const SmartCellStyle = styled.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.tsx

@@ -0,0 +1,112 @@
+import { useMemo, useState } from 'react';
+
+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 {
+  SmartBodyStyle,
+  SmartHeaderStyle,
+  SmartTableStyle,
+  SmartHeaderRowStyle,
+  SmartTableContainerStyle,
+} from './smart-table.style';
+import { ColumnData, RowDataObject } from './smart-table.types';
+
+import { useClassNames } from '@polpo/hooks';
+
+type SmartTableProps<RowData extends RowDataObject> = {
+  columns: Array<ColumnData<RowData>>;
+  data: Array<RowData>;
+  width?: 'scroll' | 'content';
+  selectable?: boolean;
+  rowId: KeyValuesOf<RowData, React.Key>;
+};
+
+export const SmartTable = <RowData extends RowDataObject>({
+  columns: initialColumns,
+  data,
+  width,
+  selectable = false,
+  rowId,
+}: SmartTableProps<RowData>) => {
+  const [selected, setSelected] = useState<{ [key: string]: RowData }>({});
+
+  const tableClassName = useClassNames({
+    'layout-fixed': width === 'content',
+    'layout-scrollable': width === 'scroll',
+  });
+
+  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 (
+    <SmartTableContainerStyle>
+      <SmartTableStyle className={tableClassName}>
+        <SmartHeaderStyle>
+          <SmartHeaderRowStyle>
+            {columns.map((column, key) => (
+              <SmartTableColumn
+                key={key}
+                toggleSortField={toggleSortField}
+                sortField={sortBy}
+                orderField={order}
+                {...column}
+              />
+            ))}
+          </SmartHeaderRowStyle>
+        </SmartHeaderStyle>
+        <SmartBodyStyle>
+          {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}
+            />
+          ))}
+        </SmartBodyStyle>
+      </SmartTableStyle>
+    </SmartTableContainerStyle>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { KeyValuesOf } from '../../types';
+import { IconNameT } from '../icon';
+
+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>;
+  icon?: IconNameT;
+  width?: `${number}px` | `${number}em` | `${number}%`;
+};
+
+type ColumnDataField<RowData extends RowDataObject> = ColumnDataCommon<RowData> & {
+  field: KeyValuesOf<RowData, Primitive>;
+  sortBy?: never;
+  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';