feat(client): add history list for desktop

packages/client/src/elements/Dialog/Dialog.styled.ts

@@ -1,6 +1,6 @@
 import styled, { keyframes } from 'styled-components';
 
-import hexToRgba from '../../utils/hexToRgba';
+import { hexToRgba } from '../../utils';
 import Card from '../Card';
 
 const fadeIn = keyframes`

packages/client/src/elements/buttons/CloseButton/CloseButton.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import React from 'react';
 
+import { CloseButtonProps } from './CloseButton.types';
 import CloseButton from './index';
 
 export default {
@@ -11,7 +12,3 @@ export default {
 const Template: Story<CloseButtonProps> = (args) => <CloseButton {...args} />;
 
 export const Default = Template.bind({});
-Default.args = {
-  noLabel: false,
-  label: 'Custom close label',
-};

packages/client/src/elements/buttons/CloseButton/CloseButton.styled.ts

@@ -1,50 +1,51 @@
 import styled, { css } from 'styled-components';
 
-const size = '21px';
-
-export const baseLineStyle = css`
-  background: ${({ theme: { palette } }) => palette.text.secondary};
-  border-radius: 2px;
-  height: 3px;
-  margin-top: 8px;
-  position: absolute;
-  transition: all 0.3s ease-in;
-  width: ${size};
-`;
+import { getCssColor } from '../../../utils';
+import { StyledCloseButtonProps } from './CloseButton.types';
 
 export const LeftRight = styled.div`
-  ${baseLineStyle};
   transform: rotate(45deg);
 `;
 
 export const RightLeft = styled.div`
-  ${baseLineStyle};
   transform: rotate(-45deg);
 `;
 
-export const StyledButton = styled.button`
-  align-items: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: ${size};
-  outline: none;
-  position: relative;
-  width: ${size};
+export const StyledButton = styled.button<StyledCloseButtonProps>(
+  ({ theme, size, color }) => css`
+    align-items: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    height: ${size};
+    outline: none;
+    position: relative;
+    width: ${size};
 
-  :focus-visible {
-    box-shadow: 0 0 0 2px ${({ theme: { palette } }) => palette.primary.main};
-    transition: box-shadow 150ms ease-in-out;
-  }
+    :focus-visible {
+      box-shadow: 0 0 0 2px ${theme.palette.primary.main};
+      transition: box-shadow 150ms ease-in-out;
+    }
 
-  &:hover ${LeftRight} {
-    background: ${({ theme: { palette } }) => palette.colors.red};
-    transform: rotate(-45deg);
-  }
-  &:hover ${RightLeft} {
-    background: ${({ theme: { palette } }) => palette.colors.red};
-    transform: rotate(45deg);
-  }
-`;
+    ${LeftRight}, ${RightLeft} {
+      border-radius: 2px;
+      height: 3px;
+      margin-top: 8px;
+      position: absolute;
+      transition: all 0.3s ease-in;
+      width: ${size};
+      background: ${getCssColor({ theme, color })};
+    }
+
+    &:hover ${LeftRight} {
+      background: ${theme.palette.colors.red};
+      transform: rotate(-45deg);
+    }
+    &:hover ${RightLeft} {
+      background: ${theme.palette.colors.red};
+      transform: rotate(45deg);
+    }
+  `,
+);

packages/client/src/elements/buttons/CloseButton/CloseButton.types.d.ts

@@ -1 +1,11 @@
-type CloseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+import { ButtonHTMLAttributes } from 'react';
+
+interface CloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: string;
+  color?: string;
+}
+
+interface StyledCloseButtonProps {
+  size: string;
+  color: string;
+}

packages/client/src/elements/buttons/CloseButton/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
 import { LeftRight, RightLeft, StyledButton } from './CloseButton.styled';
+import { CloseButtonProps } from './CloseButton.types';
 
-const CloseButton = (props: CloseButtonProps) => (
-  <StyledButton data-testid="closeButton" {...props}>
+const CloseButton = ({ color = 'text-secondary', size = '21px', ...rest }: CloseButtonProps) => (
+  <StyledButton data-testid="closeButton" color={color} size={size} {...rest}>
     <LeftRight />
     <RightLeft />
   </StyledButton>

packages/client/src/elements/fields/DateField/index.tsx

@@ -4,11 +4,20 @@ import { useTranslation } from 'react-i18next';
 import { BaseRecordField } from '../Fields.types';
 import { DateFieldProps } from './DateField.types';
 
-const DateField = <T extends BaseRecordField>({ source, record, showTime }: DateFieldProps<T>) => {
+const DateField = <T extends BaseRecordField>({
+  source,
+  record,
+  showTime,
+  style,
+}: DateFieldProps<T>) => {
   const { i18n } = useTranslation();
 
   if (!record || !record[source]) {
-    return <p data-testid="dateField">-</p>;
+    return (
+      <p data-testid="dateField" style={style}>
+        -
+      </p>
+    );
   }
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   const date = new Date(record[source].toString());
@@ -18,7 +27,11 @@ const DateField = <T extends BaseRecordField>({ source, record, showTime }: Date
   });
   const formattedDate = formatter.format(date);
 
-  return <p data-testid="dateField">{formattedDate}</p>;
+  return (
+    <p data-testid="dateField" style={style}>
+      {formattedDate}
+    </p>
+  );
 };
 
 DateField.displayName = 'DateField';

packages/client/src/elements/fields/Fields.types.d.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 import { BaseApiResource } from '../../interfaces/api.types';
 
 interface BaseFieldProps<T> {
@@ -7,6 +9,7 @@ interface BaseFieldProps<T> {
   asTitle?: boolean;
   noLabel?: boolean;
   noTranslation?: boolean;
+  style?: CSSProperties;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/client/src/elements/fields/FunctionField/FunctionField.styled.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const FunctionFieldParagraph = styled.p`
+  display: flex;
+  align-items: center;
+`;

packages/client/src/elements/fields/FunctionField/index.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
 
 import { BaseRecordField } from '../Fields.types';
+import { FunctionFieldParagraph } from './FunctionField.styled';
 import { FunctionFieldProps } from './FunctionField.types';
 
-const FunctionField = <T extends BaseRecordField>({ render, record }: FunctionFieldProps<T>) => {
+const FunctionField = <T extends BaseRecordField>({
+  render,
+  record,
+  style,
+}: FunctionFieldProps<T>) => {
   if (!record) {
     return null;
   }
 
-  return <p data-testid="functionField">{render(record)}</p>;
+  return (
+    <FunctionFieldParagraph data-testid="functionField" style={style}>
+      {render(record)}
+    </FunctionFieldParagraph>
+  );
 };
 
 FunctionField.displayName = 'FunctionField';

packages/client/src/elements/fields/InvitationStatusField/index.tsx

@@ -16,14 +16,18 @@ const getStatusIcon = (status: InvitationStatus, expirationDate: Date) => {
   return <PendingIcon />;
 };
 
-const InvitationStatusField = ({ record }: InvitationStatusFieldProps) => {
+const InvitationStatusField = ({ record, style }: InvitationStatusFieldProps) => {
   if (!record) {
     return null;
   }
   const { status, expirationDate } = record;
   const statusIcon = getStatusIcon(status, expirationDate);
 
-  return <Wrapper data-testid="invitationStatusField">{statusIcon}</Wrapper>;
+  return (
+    <Wrapper data-testid="invitationStatusField" style={style}>
+      {statusIcon}
+    </Wrapper>
+  );
 };
 
 InvitationStatusField.displayName = 'InvitationStatusField';

packages/client/src/elements/fields/TextField/index.tsx

@@ -5,15 +5,20 @@ import { BaseRecordField } from '../Fields.types';
 import { Label, Wrapper } from './TextField.styled';
 import { TextFieldProps } from './TextField.types';
 
-const TextField = <T extends BaseRecordField>({ source, record, label }: TextFieldProps<T>) => {
+const TextField = <T extends BaseRecordField>({
+  source,
+  record,
+  label,
+  style,
+}: TextFieldProps<T>) => {
   const { t } = useTranslation();
 
   if (!record) {
     return null;
   }
 
   return (
-    <Wrapper>
+    <Wrapper style={style}>
       {label && <Label>{t(label as never)}</Label>}
       <p data-testid="textField">{record[source] ?? <strong>-</strong>}</p>
     </Wrapper>

packages/client/src/elements/lists/DetailedList/DetailedList.styled.ts

@@ -129,12 +129,8 @@ export const BulkActionsWrapper = styled.div<{ isOpen: boolean }>`
     `}
 `;
 
-export const BulkCancelButton = styled(IconButton)`
-  color: ${({ theme }) => theme.palette.text.dark};
-  margin-right: 9px;
-  svg {
-    width: 14px;
-  }
+export const BulkCancelButtonWrapper = styled.div`
+  margin: 0 10px;
 `;
 
 export const BulkCancelWrapper = styled.div`

packages/client/src/elements/lists/DetailedList/DetailedList.types.d.ts

@@ -1,13 +1,16 @@
-import { MouseEvent, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 
 import { ITheme } from '../../../theme/Theme';
 
 export interface DetailedListProps {
   onRowClick?: (event: MouseEvent) => void;
   resource: string;
   children: ReactNode;
+  noDataLabel?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rowStyle?: (record: any, theme: ITheme) => CSSProperties;
+  rowStyle?: (record: any, theme: ITheme) => CSSProperties | undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rowCellsStyle?: (record: any, theme: ITheme) => CSSProperties | undefined;
 }
 
 type PerPage = 5 | 10 | 15 | 25;

packages/client/src/elements/lists/DetailedList/NoData/NoData.styled.ts

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components';
+
+import { NoDataIcon } from '../../../../icons';
+import Card from '../../../Card';
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+`;
+
+export const StyledNoDataIcon = styled(NoDataIcon)(
+  ({ theme: { palette } }) => css`
+    color: ${palette.primary.mainInvert};
+  `,
+);
+
+export const NoDataCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  width: 600px;
+  padding: 40px 0;
+`;

packages/client/src/elements/lists/DetailedList/NoData/NoData.types.d.ts

@@ -0,0 +1,3 @@
+interface NoDataProps {
+  label: string | undefined;
+}

packages/client/src/elements/lists/DetailedList/NoData/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { NoDataCard, StyledNoDataIcon, Wrapper } from './NoData.styled';
+
+const NoData = ({ label }: NoDataProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Wrapper>
+      <NoDataCard>
+        <h2>{t(label as never) ?? t('lists.general.noData')}</h2>
+        <StyledNoDataIcon />
+      </NoDataCard>
+    </Wrapper>
+  );
+};
+
+export default NoData;