@indico-data/design-system 1.0.1

package/src/components/ListTable/ListTable.tsx

@@ -0,0 +1,135 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+import { v4 as uuid } from 'uuid';
+
+import { Pagination, Accordion, LoadingList, Shrug, SectionBody } from '@/components';
+import { PermafrostComponent } from '@/types';
+
+import { Header } from './Header';
+import { StyledListTable } from './ListTable.styles';
+
+type Props = PermafrostComponent & {
+  accordion?: boolean;
+  accordionDefaultOpen?: boolean;
+  emptyListMessage?: string;
+  error?: any;
+  errorMessage?: any;
+  headerComponent?: React.ReactNode;
+  listHeader: React.ReactNode;
+  listItems: React.ReactNode[];
+  loading?: any;
+  pagination?: {
+    currentPage: number;
+    limit: number;
+    pageInfo: {
+      startCursor: number;
+      endCursor: number;
+      hasNextPage: boolean;
+      aggregateCount: number;
+    };
+    getNextPage: (before: number) => void;
+    getPage: (after: number, pageOffset: number) => void;
+    getPreviousPage: (after: number) => void;
+  };
+  sortBy?: {
+    descending: boolean;
+    items: { name: string; value: string }[];
+    value: string;
+    onSort: (value: string) => void;
+    updateDescending: () => void;
+  };
+  subTitle?: string | React.ReactNode;
+  title: string;
+  totalCount?: number;
+};
+
+export const ListTable = (props: Props) => {
+  const header = (
+    <Header
+      selectProps={{ 'data-cy': 'dataset--sort-by-select' }}
+      title={props.title}
+      headerComponent={props.headerComponent}
+      sortBy={props.sortBy}
+      aggregateCount={props?.pagination?.pageInfo?.aggregateCount || props.totalCount}
+    />
+  );
+
+  const RenderList = () => {
+    if (props.loading) {
+      return <LoadingList />;
+    }
+    if (props.error) {
+      return (
+        <SectionBody className="error-shrug">
+          <Shrug message={props.errorMessage || 'Sorry, there was an error retrieving this data'} />
+        </SectionBody>
+      );
+    }
+
+    return (
+      <>
+        {props.listItems.length === 0 ? (
+          <SectionBody className="error-shrug">
+            <Shrug message={props.emptyListMessage || 'No results found'} />
+          </SectionBody>
+        ) : (
+          <ul className="list-container">
+            {props.listItems.map((li) => {
+              const key = uuid();
+              return (
+                <li className="list-item" key={key}>
+                  {li}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+        {props.pagination ? (
+          <Pagination
+            limit={props.pagination.limit}
+            pageInfo={props.pagination.pageInfo}
+            currentPage={props.pagination.currentPage}
+            getPage={props.pagination.getPage}
+            getPreviousPage={props.pagination.getPreviousPage}
+            getNextPage={props.pagination.getNextPage}
+            quantity={props.listItems.length}
+          />
+        ) : null}
+      </>
+    );
+  };
+
+  const list = (
+    <StyledListTable>
+      {props.subTitle ? (
+        <div className="sub-title">
+          {typeof props.subTitle === 'string' ? (
+            <p style={{ maxWidth: '75%' }}>{props.subTitle}</p>
+          ) : (
+            props.subTitle
+          )}
+        </div>
+      ) : null}
+      <div className="list">
+        {!props.error ? <div className="list-header-container">{props.listHeader}</div> : null}
+        <RenderList />
+      </div>
+    </StyledListTable>
+  );
+
+  return (
+    <StyledListTable className={props.className} data-cy={props['data-cy']} id={props.id}>
+      {props.accordion ? (
+        <Accordion header={header} content={list} open={props.accordionDefaultOpen} />
+      ) : (
+        <>
+          {header}
+          {list}
+        </>
+      )}
+    </StyledListTable>
+  );
+};
+
+export default ListTable;

package/src/components/ListTable/index.ts

@@ -0,0 +1 @@
+export { ListTable } from './ListTable';

package/src/components/ListTable/mock-data/index.ts

@@ -0,0 +1 @@
+export { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';

package/src/components/ListTable/mock-data/mock-data.ts

@@ -0,0 +1,291 @@
+export const mockUserHeaders = [
+  { name: 'ID', value: 'ID' },
+  { name: 'Name', value: 'NAME' },
+  { name: 'Email', value: 'EMAIL' },
+  { name: 'Created', value: 'REGISTERED_AT' },
+];
+
+export const mockDocProcHeaders = [
+  { name: 'Date', value: 'CREATED_ON' },
+  { name: 'Name', value: 'NAME' },
+  { name: 'Status', value: 'STATUS' },
+];
+
+export const mockAllUsers = {
+  users: [
+    {
+      id: 240,
+      name: 'other user@email.com',
+      email: 'other user@email.com',
+      registeredAt: '1612905437.021334',
+      active: true,
+      scopes: [{ scope: 'APP_ACCESS', __typename: 'ScopeAccess' }],
+      __typename: 'User',
+    },
+    {
+      id: 239,
+      name: 'jay',
+      email: 'jay@email.com',
+      registeredAt: '1612385431.071407',
+      active: true,
+      scopes: [
+        { scope: 'CELERY_FLOWER', __typename: 'ScopeAccess' },
+        { scope: 'MANAGE_USERS', __typename: 'ScopeAccess' },
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 238,
+      name: 'ryan no accesss',
+      email: 'ryan+123@email.com',
+      registeredAt: '1611954642.254328',
+      active: true,
+      scopes: [{ scope: 'APP_ACCESS', __typename: 'ScopeAccess' }],
+      __typename: 'User',
+    },
+    {
+      id: 237,
+      name: 'Kazmer Test',
+      email: 'mike+123@email.com',
+      registeredAt: '1611883365.793202',
+      active: true,
+      scopes: [{ scope: 'APP_ACCESS', __typename: 'ScopeAccess' }],
+      __typename: 'User',
+    },
+    {
+      id: 236,
+      name: 'andy+012621a@email.com',
+      email: 'andy+012621a@email.com',
+      registeredAt: '1611708023.136021',
+      active: true,
+      scopes: [],
+      __typename: 'User',
+    },
+    {
+      id: 235,
+      name: 'other_user@email.com',
+      email: 'other_user@email.com',
+      registeredAt: '1611588266.058129',
+      active: true,
+      scopes: [{ scope: 'APP_ACCESS', __typename: 'ScopeAccess' }],
+      __typename: 'User',
+    },
+    {
+      id: 234,
+      name: 'Matthew',
+      email: 'matthew@bayers.org',
+      registeredAt: '1611267047.427759',
+      active: true,
+      scopes: [
+        { scope: 'CELERY_FLOWER', __typename: 'ScopeAccess' },
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 233,
+      name: 'Kazmer Test',
+      email: 'mike.test@email.com',
+      registeredAt: '1611256056.678655',
+      active: null,
+      scopes: [],
+      __typename: 'User',
+    },
+    {
+      id: 232,
+      name: 'meg',
+      email: 'meg@email.com',
+      registeredAt: '1611157563.220335',
+      active: true,
+      scopes: [
+        { scope: 'MANAGE_USERS', __typename: 'ScopeAccess' },
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 231,
+      name: 'Ryan',
+      email: 'ryan@email.com',
+      registeredAt: '1611069234.797305',
+      active: true,
+      scopes: [
+        { scope: 'CELERY_FLOWER', __typename: 'ScopeAccess' },
+        { scope: 'MANAGE_USERS', __typename: 'ScopeAccess' },
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 230,
+      name: 'dataset2_permissions@email.com',
+      email: 'dataset2_permissions@email.com',
+      registeredAt: '1611009197.841298',
+      active: true,
+      scopes: [{ scope: 'APP_ACCESS', __typename: 'ScopeAccess' }],
+      __typename: 'User',
+    },
+    {
+      id: 229,
+      name: 'dataset1_permissions@email.com',
+      email: 'dataset1_permissions@email.com',
+      registeredAt: '1611009196.388319',
+      active: true,
+      scopes: [{ scope: 'APP_ACCESS', __typename: 'ScopeAccess' }],
+      __typename: 'User',
+    },
+    {
+      id: 228,
+      name: 'rafal@email.com',
+      email: 'rafal@email.com',
+      registeredAt: '1610614811.580037',
+      active: true,
+      scopes: [],
+      __typename: 'User',
+    },
+    {
+      id: 227,
+      name: 'Jonas',
+      email: 'jonas@email.com',
+      registeredAt: '1610544934.971219',
+      active: true,
+      scopes: [
+        { scope: 'CELERY_FLOWER', __typename: 'ScopeAccess' },
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 226,
+      name: 'Elias',
+      email: 'elias@email.com',
+      registeredAt: '1610378674.648602',
+      active: true,
+      scopes: [
+        { scope: 'CELERY_FLOWER', __typename: 'ScopeAccess' },
+        { scope: 'MANAGE_USERS', __typename: 'ScopeAccess' },
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 225,
+      name: 'Michael',
+      email: 'michael@email.com',
+      registeredAt: '1610377784.876469',
+      active: true,
+      scopes: [
+        { scope: 'CELERY_FLOWER', __typename: 'ScopeAccess' },
+        { scope: 'MANAGE_USERS', __typename: 'ScopeAccess' },
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 224,
+      name: 'Automated Testing',
+      email: 'test+platform@email.com',
+      registeredAt: '1609428969.611241',
+      active: true,
+      scopes: [
+        { scope: 'CELERY_FLOWER', __typename: 'ScopeAccess' },
+        { scope: 'MANAGE_USERS', __typename: 'ScopeAccess' },
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 223,
+      name: 'admin_permissions2@email.com',
+      email: 'admin_permissions2@email.com',
+      registeredAt: '1609428428.431605',
+      active: true,
+      scopes: [
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+    {
+      id: 222,
+      name: 'admin_permissions@email.com',
+      email: 'admin_permissions@email.com',
+      registeredAt: '1609428416.321584',
+      active: true,
+      scopes: [{ scope: 'APP_ACCESS', __typename: 'ScopeAccess' }],
+      __typename: 'User',
+    },
+    {
+      id: 221,
+      name: 'test+small3@email.com',
+      email: 'test+small3@email.com',
+      registeredAt: '1607885687.72808',
+      active: true,
+      scopes: [
+        { scope: 'APP_ACCESS', __typename: 'ScopeAccess' },
+        { scope: 'GRAPHIQL', __typename: 'ScopeAccess' },
+      ],
+      __typename: 'User',
+    },
+  ],
+  pageInfo: {
+    startCursor: 240,
+    endCursor: 221,
+    hasNextPage: true,
+    aggregateCount: 149,
+    __typename: 'PageInfo',
+  },
+  __typename: 'UserPage',
+};
+
+export const mockDocProcReport = {
+  reports: [
+    {
+      id: 1,
+      name: 'Doc_Processing_Report1_01_02_2021',
+      status: 'Complete',
+      createdOn: '1607885687.72808',
+    },
+    {
+      id: 2,
+      name: 'Doc_Processing_Report2_01_02_2021',
+      status: 'Complete',
+      createdOn: '1607885687.72808',
+    },
+    {
+      id: 3,
+      name: 'Doc_Processing_Report3_01_02_2021',
+      status: 'Complete',
+      createdOn: '1607885687.72808',
+    },
+    {
+      id: 4,
+      name: 'Doc_Processing_Report4_01_02_2021',
+      status: 'Complete',
+      createdOn: '1607885687.72808',
+    },
+    {
+      id: 5,
+      name: 'Doc_Processing_Report5_01_02_2021',
+      status: 'Complete',
+      createdOn: '1607885687.72808',
+    },
+  ],
+  pageInfo: {
+    startCursor: 240,
+    endCursor: 221,
+    hasNextPage: true,
+    aggregateCount: 15,
+    __typename: 'PageInfo',
+  },
+  __typename: 'UserPage',
+};

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pagination } from './Pagination';
+
+const meta = {
+  component: Pagination,
+  title: 'Pagination',
+  argTypes: {},
+  args: {
+    skip: 0,
+    limit: 10,
+    getPage: () => {},
+    getNextPage: () => {},
+    getPreviousPage: () => {},
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+export const Normal: Story = {
+  args: {
+    currentPage: 3,
+    pageInfo: {
+      aggregateCount: 60,
+      endCursor: 51,
+      hasNextPage: true,
+      startCursor: 60,
+    },
+    quantity: 10,
+  },
+};
+
+export const WithoutPages: Story = {
+  args: {
+    currentPage: 1,
+    pageInfo: {
+      aggregateCount: 9,
+      endCursor: 1,
+      hasNextPage: false,
+      startCursor: 9,
+    },
+    quantity: 9,
+  },
+};

package/src/components/Pagination/Pagination.styles.ts

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+import { COLORS } from '@/tokens';
+
+const paddingRight = '30px';
+
+export const StyledPagination = styled.div`
+  width: 100%;
+  position: relative;
+
+  .Pagination--stats {
+    display: inline-block;
+    padding: 10px 0;
+    line-height: 1.6;
+  }
+
+  .Pagination--button-group {
+    display: flex;
+    justify-content: flex-end;
+    width: calc(25% + ${paddingRight});
+    padding: 10px ${paddingRight} 10px 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    > * {
+      display: inline-block;
+      font-size: 18px;
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+
+    button {
+      width: auto;
+      padding: 0;
+      display: inline-block;
+      background: none;
+      box-shadow: none;
+      text-decoration: underline;
+      color: ${COLORS.midFontColor};
+
+      &:hover {
+        color: ${COLORS.defaultFontColor};
+      }
+
+      &.Pagination--non-click {
+        text-decoration: none;
+      }
+    }
+  }
+`;

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,118 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { numberUtils } from '@indico-data/utils';
+
+import { PermafrostComponent } from '@/types';
+
+import { StyledPagination } from './Pagination.styles';
+
+type Props = PermafrostComponent & {
+  currentPage: number;
+  limit: number;
+  pageInfo: {
+    aggregateCount: number;
+    endCursor: number;
+    hasNextPage: boolean;
+    startCursor: number;
+  };
+  quantity: number;
+  skip?: number;
+  getPage(startCursor: number, endCursor: number): void;
+  getNextPage(cursor: number): void;
+  getPreviousPage(cursor: number): void;
+};
+
+export function Pagination(props: Props) {
+  //   renderPreviousPages = (currentPage, lastPage) => {
+  //     if (currentPage === lastPage - 2) {
+  //       return null
+  //     }
+  //     // this.props.getPage(endCursor, 1)
+  //     if (currentPage === lastPage - 1) {
+  //       return <>{lastPage - 2 >= 1 && <button onClick={() => this.props.getBeforePage(startCursor, )}>{lastPage - 2}</button>}</>
+  //     }
+
+  //     if (currentPage === lastPage) {
+  //       return (
+  //         <>
+  //           {lastPage - 2 >= 1 && <button>{lastPage - 2}</button>}
+  //           {lastPage - 1 >= 1 && <button>{lastPage - 1}</button>}
+  //         </>
+  //       )
+  //     }
+  //   }
+
+  const { aggregateCount, hasNextPage, endCursor, startCursor } = props.pageInfo;
+  const { currentPage, limit, quantity } = props;
+  const lastPage = Math.ceil(aggregateCount / limit);
+  const currentItemNumber = (currentPage - 1) * limit + 1;
+
+  return (
+    <StyledPagination className={props.className} data-cy={props['data-cy']} id={props.id}>
+      <div className="Pagination--stats">
+        <p>
+          Showing{' '}
+          {aggregateCount === 0 ? (
+            <></>
+          ) : (
+            <>
+              {currentItemNumber} - {currentItemNumber + quantity - 1} of{' '}
+            </>
+          )}
+          {numberUtils.numberWithCommas(aggregateCount)} entries
+        </p>
+      </div>
+      {aggregateCount > limit && (
+        <div className="Pagination--button-group" data-cy="Pagination--button-group">
+          <p data-cy="pagination--label">Page:&nbsp;</p>
+          {currentPage > 1 && (
+            <button onClick={() => props.getPreviousPage(startCursor)}>Prev</button>
+          )}
+          {/* {currentPage >= lastPage - 2 && this.renderPreviousPages(currentPage, lastPage)} */}
+          <p data-cy="pagination--current-page">{currentPage}</p>
+          {lastPage > currentPage + 1 && (
+            <button
+              onClick={() => props.getPage(endCursor, 1)}
+              data-cy="pagination--second-page-number"
+            >
+              {currentPage + 1}
+            </button>
+          )}
+          {lastPage > currentPage + 2 && (
+            <button
+              onClick={() => props.getPage(endCursor, 2)}
+              data-cy="pagination--third-page-number"
+            >
+              {currentPage + 2}
+            </button>
+          )}
+          {lastPage > currentPage + 3 && (
+            <button onClick={() => props.getPage(endCursor, 3)}>{currentPage + 3}</button>
+          )}
+          {lastPage - (currentPage + 2) === 3 && (
+            <button onClick={() => props.getPage(endCursor, 4)}>{currentPage + 4}</button>
+          )}
+          {lastPage - (currentPage + 2) > 2 && lastPage - (currentPage + 2) !== 3 && <p>...</p>}
+          {lastPage !== currentPage && (
+            <button
+              onClick={() => props.getPage(endCursor, lastPage - currentPage)}
+              data-cy="pagination--last-page"
+            >
+              {lastPage}
+            </button>
+          )}
+          {hasNextPage && (
+            <button
+              onClick={() => props.getNextPage(endCursor)}
+              data-cy="pagination--next-page-number"
+            >
+              Next
+            </button>
+          )}
+        </div>
+      )}
+    </StyledPagination>
+  );
+}

package/src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/src/components/basic-section/Section/Section.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Section } from './Section';
+
+const meta = {
+  component: Section,
+  title: 'Basic Section/Section',
+  argTypes: {},
+} satisfies Meta<typeof Section>;
+
+export default meta;
+type Story = StoryObj<typeof Section>;
+
+export const Normal: Story = {};

package/src/components/basic-section/Section/Section.styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const StyledSection = styled.article`
+  position: relative;
+  float: left;
+  margin-bottom: 20px;
+  width: 100%;
+`;