@indico-data/design-system 2.43.1 → 2.45.0

package/src/legacy/components/ListTable/ListTable.tsx

@@ -1,140 +0,0 @@
-// 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 } from '@/legacy/components/Pagination';
-import { Accordion } from '@/legacy/components/Accordion';
-import { LoadingList } from '@/legacy/components/loading-indicators';
-import { Shrug } from '@/legacy/components/user-feedback';
-import { SectionBody } from '@/legacy/components/basic-section';
-
-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/legacy/components/ListTable/index.ts

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

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

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

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

@@ -1,291 +0,0 @@
-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/legacy/components/LoadingAwareContainer/LoadingAwareContainer.stories.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { LoadingAwareContainer } from './LoadingAwareContainer';
-
-const meta = {
-  component: LoadingAwareContainer,
-  title: 'legacy/LoadingAwareContainer',
-  argTypes: {
-    className: { control: { disable: true } },
-    style: { control: { disable: true } },
-  },
-} satisfies Meta<typeof LoadingAwareContainer>;
-
-export default meta;
-type Story = StoryObj<typeof LoadingAwareContainer>;
-
-function StoryRender(props: any) {
-  return (
-    <LoadingAwareContainer
-      isLoading={props.isLoading}
-      style={{ width: '50vw', height: '50vh', border: '1px solid white' }}
-    >
-      <p>Some basic content.</p>
-    </LoadingAwareContainer>
-  );
-}
-
-export const Loading: Story = {
-  args: {
-    isLoading: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Complete: Story = {
-  args: {
-    isLoading: false,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};

package/src/legacy/components/LoadingAwareContainer/LoadingAwareContainer.styles.ts

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledStatusContainer = styled.div`
-  position: absolute;
-  height: 0;
-  width: 0;
-  opacity: 0;
-`;
-
-export const StyledLoadingAwareContainer = styled.div`
-  &.loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-`;

package/src/legacy/components/LoadingAwareContainer/LoadingAwareContainer.tsx

@@ -1,36 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import classNames from 'classnames';
-
-import { LoadingIndicator } from '@/legacy/components';
-
-import { StyledLoadingAwareContainer, StyledStatusContainer } from './LoadingAwareContainer.styles';
-
-type Props = {
-  children: React.ReactNode | React.ReactNode[];
-  className?: string;
-  isLoading?: boolean;
-  style?: React.CSSProperties;
-};
-
-/**
- * A functional container for content that is yet to load or will change; displays a loading indicator and announces
- * to Assistive Technology as needed.
- *
- * todo: this is an extremely simple version of this component; as I get more familiar with LoadingIndicator use cases, this will be refactored. - jm 9/1/2020
- */
-export function LoadingAwareContainer(props: Props): React.ReactElement {
-  const { children, className, isLoading, style } = props;
-
-  return (
-    <StyledLoadingAwareContainer
-      className={classNames({ loading: isLoading }, className)}
-      style={style}
-    >
-      <StyledStatusContainer role="status">{isLoading && 'Loading'}</StyledStatusContainer>
-
-      {isLoading ? <LoadingIndicator /> : <>{children}</>}
-    </StyledLoadingAwareContainer>
-  );
-}

package/src/legacy/components/LoadingAwareContainer/index.ts

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

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Pagination } from './Pagination';
-
-const meta = {
-  component: Pagination,
-  title: 'legacy/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/legacy/components/Pagination/Pagination.styles.ts

@@ -1,51 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/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;
-      }
-    }
-  }
-`;