polpo 0.1.6 → 0.1.8

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

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

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

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

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

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