@scality/core-ui 0.115.0

package/src/lib/components/collapsiblepanel/CollapsiblePanel.component.tsx

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize } from '../../style/theme';
+import { Icon } from '../icon/Icon.component';
+type Props = {
+  expanded: boolean;
+  onHeaderClick: (arg0: any) => void;
+  children: React.ReactNode;
+  headerItems: Array<JSX.Element>;
+};
+const ARROW = {
+  colapsed: 'fas fa-angle-down',
+  expanded: 'fas fa-angle-up',
+};
+const HeaderText = styled.div`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+`;
+const HeaderItem = styled.div`
+  margin-right: ${spacing.r16};
+  display: flex;
+  flex-grow: 1;
+`;
+const HeaderIcon = styled.div`
+  font-size: ${fontSize.larger};
+  margin: 0 ${spacing.r16};
+`;
+const CollapsiblePanelContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  color: ${(props) => props.theme.textPrimary};
+`;
+const HeaderContainer = styled.div`
+  display: flex;
+  cursor: pointer;
+  padding: ${spacing.r16};
+`;
+const ExpandedContainer = styled.div`
+  padding: ${spacing.r16};
+  color: ${(props) => props.theme.textPrimary};
+  background-color: ${(props) => props.theme.backgroundLevel1};
+`;
+
+function CollapsiblePanel({
+  expanded = false,
+  onHeaderClick,
+  children,
+  headerItems = [],
+}: Props) {
+  return (
+    <CollapsiblePanelContainer className="sc-collapsiblepanel">
+      <HeaderContainer
+        onClick={onHeaderClick}
+        className="sc-collapsiblepanel-header"
+      >
+        <HeaderText>
+          {headerItems.map((item, index) => (
+            <HeaderItem key={index}>{item}</HeaderItem>
+          ))}
+        </HeaderText>
+        <HeaderIcon>
+          <Icon name={expanded ? 'Dropdown-up' : 'Dropdown-down'} />
+        </HeaderIcon>
+      </HeaderContainer>
+      {expanded && (
+        <ExpandedContainer className="sc-collapsiblepanel-content">
+          {children}
+        </ExpandedContainer>
+      )}
+    </CollapsiblePanelContainer>
+  );
+}
+
+export { CollapsiblePanel };

package/src/lib/components/constants.ts

@@ -0,0 +1,67 @@
+export const LOADER_SIZE: { [Key in Size]: Key } = {
+  smaller: 'smaller',
+  small: 'small',
+  base: 'base',
+  large: 'large',
+  larger: 'larger',
+  huge: 'huge',
+  massive: 'massive',
+};
+export type Size =
+  | 'smaller'
+  | 'small'
+  | 'base'
+  | 'large'
+  | 'larger'
+  | 'huge'
+  | 'massive';
+// Replace the "success" by "health", but keep the key in the color-palette for the moment.
+export type Variant =  'base' | 'selected' | 'healthy' | 'warning' | 'danger';
+// metric chart
+// url query
+export const QUERY_LAST_SEVEN_DAYS = 'now-7d';
+export const QUERY_LAST_TWENTY_FOUR_HOURS = 'now-24h';
+export const QUERY_LAST_ONE_HOUR = 'now-1h';
+// label in timespan selector
+export const LAST_SEVEN_DAYS = 'Last 7 days';
+export const LAST_TWENTY_FOUR_HOURS = 'Last 24 hours';
+export const LAST_ONE_HOUR = 'Last 1 hour';
+// sample duration
+export const SAMPLE_DURATION_LAST_SEVEN_DAYS = 7 * 24 * 60 * 60;
+export const SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS = 24 * 60 * 60;
+export const SAMPLE_DURATION_LAST_ONE_HOUR = 60 * 60;
+// sample frequency
+export const SAMPLE_FREQUENCY_LAST_SEVEN_DAYS = 60 * 60;
+export const SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS = 720;
+export const SAMPLE_FREQUENCY_LAST_ONE_HOUR = 30;
+export type QueryTimeSpan = {
+  query: string;
+  // the text in the query parameter
+  label: string;
+  // the label display in the timespan selector
+  duration: number;
+  // time span in second
+  frequency: number;
+};
+export const queryTimeSpansCodes: QueryTimeSpan[] = [
+  {
+    query: QUERY_LAST_SEVEN_DAYS,
+    label: LAST_SEVEN_DAYS,
+    duration: SAMPLE_DURATION_LAST_SEVEN_DAYS,
+    frequency: SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
+  },
+  {
+    query: QUERY_LAST_TWENTY_FOUR_HOURS,
+    label: LAST_TWENTY_FOUR_HOURS,
+    duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+    frequency: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+  },
+  {
+    query: QUERY_LAST_ONE_HOUR,
+    label: LAST_ONE_HOUR,
+    duration: SAMPLE_DURATION_LAST_ONE_HOUR,
+    frequency: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
+  },
+];
+export const NAN_STRING = 'NAN';
+export type Status = 'unknown' | 'healthy' | 'warning' | 'critical';

package/src/lib/components/constrainedtext/Constrainedtext.component.tsx

@@ -0,0 +1,93 @@
+// @ts-nocheck
+import { $PropertyType } from 'utility-types';
+import { useCallback, useState } from 'react';
+import styled from 'styled-components';
+
+import { Tooltip } from '../tooltip/Tooltip.component';
+import { Props as TooltipProps } from '../tooltip/Tooltip.component';
+
+type Props = {
+  text: string | number | JSX.Element | JSX.Element[];
+  tooltipStyle?: $PropertyType<TooltipProps, 'overlayStyle'>;
+  tooltipPlacement?: $PropertyType<TooltipProps, 'placement'>;
+  lineClamp?: number;
+};
+// for lineClamp cf https://css-tricks.com/almanac/properties/l/line-clamp/
+// it should work on all major navigator, despite the --webkit prefix
+// just in case if we don't use line clamp we can just use the classic way
+const ConstrainedTextContainer = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${(props) =>
+    props.lineClamp > 1
+      ? `
+  display: -webkit-box;
+  -webkit-line-clamp: ${props.lineClamp};
+  -webkit-box-orient: vertical;
+  overflow-wrap: break-word;
+  `
+      : `overflow-wrap: break-word;
+      white-space: nowrap;`}
+}
+
+;
+`;
+const BlockTooltip = styled.div`
+  width: stretch;
+  & > .sc-tooltip {
+    display: block;
+  }
+`;
+
+function isEllipsisActive(element: HTMLDivElement) {
+  return (
+    element &&
+    (element.offsetWidth < element.scrollWidth ||
+      element.offsetHeight < element.scrollHeight)
+  );
+}
+
+function getConstrainedTextContainer(constrainedTextRef, lineClamp, text) {
+  return (
+    <ConstrainedTextContainer
+      ref={constrainedTextRef}
+      className="sc-constrainedtext"
+      lineClamp={lineClamp}
+    >
+      {text}
+    </ConstrainedTextContainer>
+  );
+}
+
+function ConstrainedText({
+  text,
+  tooltipStyle,
+  tooltipPlacement,
+  lineClamp = 1,
+}: Props): JSX.Element {
+  const [displayToolTip, setDisplayToolTip] = useState(false);
+  const constrainedTextRef = useCallback(
+    (element) => {
+      element && text && setDisplayToolTip(isEllipsisActive(element));
+    },
+    [text],
+  );
+  return (
+    <BlockTooltip>
+      {displayToolTip ? (
+        <Tooltip
+          overlay={text}
+          overlayStyle={tooltipStyle}
+          placement={tooltipPlacement}
+        >
+          {getConstrainedTextContainer(constrainedTextRef, lineClamp, text)}
+        </Tooltip>
+      ) : (
+        getConstrainedTextContainer(constrainedTextRef, lineClamp, text)
+      )}
+    </BlockTooltip>
+  );
+}
+
+export { ConstrainedText };

package/src/lib/components/coreuithemeprovider/CoreUiThemeProvider.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { space, fontSize, CoreUITheme } from '../../style/theme';
+
+type Props = {
+  theme: CoreUITheme;
+  children: React.ReactNode;
+};
+
+const CoreUiThemeProvider = ({ theme, children }: Props) => {
+  const newTheme = {
+    ...theme,
+    space,
+    fontSizes: fontSize,
+    colors: { ...theme },
+  };
+
+  return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;
+};
+
+export { CoreUiThemeProvider };

package/src/lib/components/date/FormattedDateTime.spec.tsx

@@ -0,0 +1,217 @@
+import { render, screen } from '@testing-library/react';
+import { FormattedDateTime } from './FormattedDateTime';
+import userEvent from '@testing-library/user-event';
+
+describe('FormatttedDateTime', () => {
+  it('should display the date in the expected format', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="date"
+        value={new Date('2022-10-01T00:00:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('2022-10-01')).toBeInTheDocument();
+  });
+
+  it('should display the date time second in the expected format', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="date-time-second"
+        value={new Date('2022-10-01T00:00:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('2022-10-01 00:00:00')).toBeInTheDocument();
+  });
+
+  it('should display the date time in the expected format', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="date-time"
+        value={new Date('2022-10-01T00:00:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('2022-10-01 00:00')).toBeInTheDocument();
+  });
+
+  it('should display the time second in the expected format', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="time-second"
+        value={new Date('2022-10-01T00:00:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('00:00:00')).toBeInTheDocument();
+  });
+
+  it('should display the time in the expected format', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="time"
+        value={new Date('2022-10-01T00:00:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('00:00')).toBeInTheDocument();
+  });
+
+  it('should display a relative date with the right format when the date occured few seconds before', async () => {
+    //S
+    const today = new Date('2022-10-10T12:00:00Z');
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(today);
+    render(
+      <FormattedDateTime
+        format="relative"
+        value={new Date('2022-10-10T11:59:37Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('few seconds ago')).toBeInTheDocument();
+    //E
+    await userEvent.hover(screen.getByText('few seconds ago'));
+    //V
+    expect(screen.getByText('2022-10-10 11:59:37')).toBeInTheDocument();
+  });
+
+  it('should display a relative date with the right format when the date occured 1 minute before', async () => {
+    //S
+    const today = new Date('2022-10-10T12:00:00Z');
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(today);
+    render(
+      <FormattedDateTime
+        format="relative"
+        value={new Date('2022-10-10T11:59:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('1 minute ago')).toBeInTheDocument();
+    //E
+    await userEvent.hover(screen.getByText('1 minute ago'));
+    //V
+    expect(screen.getByText('2022-10-10 11:59:00')).toBeInTheDocument();
+  });
+
+  it('should display a relative date with the right format when the date occured 2 minutes before', async () => {
+    //S
+    const today = new Date('2022-10-10T12:00:00Z');
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(today);
+    render(
+      <FormattedDateTime
+        format="relative"
+        value={new Date('2022-10-10T11:57:26Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('2 minutes ago')).toBeInTheDocument();
+    //E
+    await userEvent.hover(screen.getByText('2 minutes ago'));
+    //V
+    expect(screen.getByText('2022-10-10 11:57:26')).toBeInTheDocument();
+  });
+
+  it('should display a relative date with the right format when the date occured 1 day before', async () => {
+    //S
+    const today = new Date('2022-10-10T12:00:00Z');
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(today);
+    render(
+      <FormattedDateTime
+        format="relative"
+        value={new Date('2022-10-09T11:57:26Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('1 day ago')).toBeInTheDocument();
+    //E
+    await userEvent.hover(screen.getByText('1 day ago'));
+    //V
+    expect(screen.getByText('2022-10-09 11:57:26')).toBeInTheDocument();
+  });
+
+  it('should display a relative date with the right format when the date occured 2 days before', async () => {
+    //S
+    const today = new Date('2022-10-10T12:00:00Z');
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(today);
+    render(
+      <FormattedDateTime
+        format="relative"
+        value={new Date('2022-10-08T11:57:26Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('2 days ago')).toBeInTheDocument();
+    //E
+    await userEvent.hover(screen.getByText('2 days ago'));
+    //V
+    expect(screen.getByText('2022-10-08 11:57:26')).toBeInTheDocument();
+  });
+
+  it('should display a relative date with the right format when the date occured 1 month before', async () => {
+    //S
+    const today = new Date('2022-10-10T12:00:00Z');
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(today);
+    render(
+      <FormattedDateTime
+        format="relative"
+        value={new Date('2022-09-08T11:57:26Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('32 days ago')).toBeInTheDocument();
+    //E
+    await userEvent.hover(screen.getByText('32 days ago'));
+    //V
+    expect(screen.getByText('2022-09-08 11:57:26')).toBeInTheDocument();
+  });
+
+  it('should display a relative date with the right format when the date occured 2 months before', async () => {
+    //S
+    const today = new Date('2022-10-10T12:00:00Z');
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(today);
+    render(
+      <FormattedDateTime
+        format="relative"
+        value={new Date('2022-08-08T11:57:26Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('63 days ago')).toBeInTheDocument();
+    //E
+    await userEvent.hover(screen.getByText('63 days ago'));
+    //V
+    expect(screen.getByText('2022-08-08 11:57:26')).toBeInTheDocument();
+  });
+
+  it('should display a relative date with the right format when the date occured 2 months after', async () => {
+    //S
+    const today = new Date('2022-10-10T12:00:00Z');
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(today);
+    render(
+      <FormattedDateTime
+        format="relative"
+        value={new Date('2022-12-12T11:57:26Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('in 63 days')).toBeInTheDocument();
+    //E
+    await userEvent.hover(screen.getByText('in 63 days'));
+    //V
+    expect(screen.getByText('2022-12-12 11:57:26')).toBeInTheDocument();
+  });
+});

package/src/lib/components/date/FormattedDateTime.tsx

@@ -0,0 +1,150 @@
+import { getDateDaysDiff } from './dateDiffer';
+import { Tooltip } from '../tooltip/Tooltip.component';
+
+export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour12: false,
+});
+
+export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
+  hour12: false,
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
+  hour12: false,
+  hour: '2-digit',
+  minute: '2-digit',
+});
+
+type FormattedDateTimeProps = {
+  format:
+    | 'date'
+    | 'date-time'
+    | 'date-time-second'
+    | 'time'
+    | 'time-second'
+    | 'relative';
+  value: Date;
+};
+
+const isItFutureOrIsItPast = (
+  timeDiff: number,
+  stringToBeFormatted: string,
+) => {
+  if (timeDiff > 0) {
+    return `${stringToBeFormatted} ago`;
+  } else {
+    return `in ${stringToBeFormatted}`;
+  }
+};
+
+export const FormattedDateTime = ({
+  format,
+  value,
+}: FormattedDateTimeProps) => {
+  switch (format) {
+    case 'date':
+      return <>{DATE_FORMATER.format(value)}</>;
+    case 'date-time':
+      return (
+        <>{DATE_FORMATER.format(value) + ' ' + TIME_FORMATER.format(value)}</>
+      );
+    case 'date-time-second':
+      return (
+        <>
+          {DATE_FORMATER.format(value) +
+            ' ' +
+            TIME_SECOND_FORMATER.format(value)}
+        </>
+      );
+    case 'time':
+      return <>{TIME_FORMATER.format(value)}</>;
+    case 'time-second':
+      return <>{TIME_SECOND_FORMATER.format(value)}</>;
+    case 'relative':
+      const now = new Date();
+      const monthDiff = getDateDaysDiff(value, now, 'months');
+      const dayDiff = getDateDaysDiff(value, now, 'days');
+
+      if (monthDiff !== 0 && Math.abs(dayDiff) > 90) {
+        return (
+          <Tooltip
+            overlay={
+              <FormattedDateTime format="date-time-second" value={value} />
+            }
+          >
+            {isItFutureOrIsItPast(
+              monthDiff,
+              `${Math.abs(monthDiff)} month${
+                Math.abs(monthDiff) > 1 ? 's' : ''
+              }`,
+            )}
+          </Tooltip>
+        );
+      }
+
+      if (dayDiff !== 0) {
+        return (
+          <Tooltip
+            overlay={
+              <FormattedDateTime format="date-time-second" value={value} />
+            }
+          >
+            {isItFutureOrIsItPast(
+              dayDiff,
+              `${Math.abs(dayDiff)} day${Math.abs(dayDiff) > 1 ? 's' : ''}`,
+            )}
+          </Tooltip>
+        );
+      }
+      const hourDiff = getDateDaysDiff(value, now, 'hours');
+      if (hourDiff !== 0) {
+        return (
+          <Tooltip
+            overlay={
+              <FormattedDateTime format="date-time-second" value={value} />
+            }
+          >
+            {isItFutureOrIsItPast(
+              hourDiff,
+              `${Math.abs(hourDiff)} hour${Math.abs(hourDiff) > 1 ? 's' : ''}`,
+            )}
+          </Tooltip>
+        );
+      }
+      const minuteDiff = getDateDaysDiff(value, now, 'minutes');
+      if (minuteDiff !== 0) {
+        return (
+          <Tooltip
+            overlay={
+              <FormattedDateTime format="date-time-second" value={value} />
+            }
+          >
+            {isItFutureOrIsItPast(
+              minuteDiff,
+              `${Math.abs(minuteDiff)} minute${
+                Math.abs(minuteDiff) > 1 ? 's' : ''
+              }`,
+            )}
+          </Tooltip>
+        );
+      }
+      return (
+        <Tooltip
+          overlay={
+            <FormattedDateTime format="date-time-second" value={value} />
+          }
+        >
+          few seconds ago
+        </Tooltip>
+      );
+    //TO FINISH
+    default:
+      return <></>;
+  }
+};

package/src/lib/components/date/dateDiffer.spec.ts

@@ -0,0 +1,13 @@
+import { getDateDaysDiff } from './dateDiffer';
+
+describe('Date Differ', () => {
+  it('should computes the difference of days between 2 dates', () => {
+    expect(
+      getDateDaysDiff(
+        new Date('2022-10-10T20:10:39Z'),
+        new Date('2022-11-29T15:14:39Z'),
+        'days',
+      ),
+    ).toBe(49);
+  });
+});

package/src/lib/components/date/dateDiffer.ts

@@ -0,0 +1,12 @@
+import { Temporal } from '@js-temporal/polyfill';
+
+export function getDateDaysDiff(
+  startDate: Date,
+  endDate: Date,
+  unit: 'months' | 'days' | 'hours' | 'minutes',
+) {
+  const diff = Temporal.Duration.from({
+    milliseconds: endDate.getTime() - startDate.getTime(),
+  }).total({ unit: unit, relativeTo: startDate.toISOString().split('T')[0] });
+  return diff > 0 ? Math.floor(diff) : Math.round(diff);
+}