@indico-data/design-system 2.43.0 → 2.44.0

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;
-      }
-    }
-  }
-`;

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

@@ -1,118 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import { numberUtils } from '@/legacy/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/legacy/components/Pagination/index.ts

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

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

@@ -1,56 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Toggle } from './Toggle';
-
-const meta = {
-  component: Toggle,
-  title: 'legacy/Toggle',
-  argTypes: {},
-  args: {},
-} satisfies Meta<typeof Toggle>;
-
-export default meta;
-type Story = StoryObj<typeof Toggle>;
-
-function StoryRender(props: any) {
-  const [isPressed, setIsPressed] = useState(false);
-
-  return (
-    <Toggle
-      {...props}
-      value={isPressed}
-      onChange={() => {
-        console.log(isPressed);
-        setIsPressed(!isPressed);
-      }}
-      disabled={props.disabled}
-    />
-  );
-}
-
-export const Normal: Story = {
-  args: {},
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Icons: Story = {
-  args: {
-    checkedIconName: 'fa-check',
-    notCheckedIconName: 'x-close',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};