@scality/core-ui 0.115.0

package/src/lib/components/dropdown/Dropdown.component.tsx

@@ -0,0 +1,184 @@
+// @ts-nocheck
+import { useState, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+  ButtonStyled,
+  ButtonIcon,
+  ButtonText,
+} from '../button/Button.component';
+import { zIndex } from '../../style/theme';
+import { spacing } from '../../spacing';
+import { fontSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+export type Item = {
+  label: string;
+  name?: string;
+  selected?: boolean;
+  onClick: (arg0: any) => void;
+};
+type Items = Array<Item>;
+type Props = {
+  text?: string;
+  size?: string;
+  variant?: string;
+  title?: string;
+  items: Items;
+  icon?: JSX.Element;
+  caret?: boolean;
+};
+const DropdownStyled = styled.div`
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+  .trigger {
+    margin: 0;
+    border-radius: 0;
+  }
+`;
+const DropdownMenuStyled = styled.ul`
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border: 1px solid ${getThemePropSelector('backgroundLevel1')};
+  z-index: ${zIndex.dropdown};
+  max-height: 200px;
+  min-width: 100%;
+  overflow: auto;
+  border-bottom: 0.3px solid ${getThemePropSelector('border')};
+  ${(props) => {
+    if (
+      props.size &&
+      props.triggerSize &&
+      props.triggerSize.x + props.size.width > window.innerWidth
+    ) {
+      return css`
+        right: 0;
+        top: 100%;
+      `;
+    } else if (
+      props.size &&
+      props.triggerSize &&
+      props.triggerSize.y + props.size.height > window.innerHeight
+    ) {
+      return css`
+        left: 0;
+        bottom: ${props.triggerSize.height + 'px'};
+      `;
+    } else {
+      return css`
+        left: 0;
+        top: 100%;
+      `;
+    }
+  }};
+`;
+const DropdownMenuItemStyled = styled.li`
+  display: flex;
+  align-items: center;
+  padding: ${spacing.r16};
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: ${fontSize.base};
+
+  ${css`
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    color: ${getThemePropSelector('textPrimary')};
+    border-top: 0.3px solid ${getThemePropSelector('border')};
+    border-left: 0.3px solid ${getThemePropSelector('border')};
+    border-right: 0.3px solid ${getThemePropSelector('border')};
+    &:hover {
+      background-color: ${getThemePropSelector('highlight')};
+    }
+    &:active {
+      background-color: ${getThemePropSelector('highlight')};
+    }
+  `};
+`;
+const Caret = styled.span`
+  margin-left: ${spacing.r16};
+`;
+const TriggerStyled = ButtonStyled.withComponent('div');
+
+function Dropdown({
+  items,
+  text,
+  icon,
+  size = 'base',
+  variant = 'buttonSecondary',
+  title,
+  caret = true,
+  ...rest
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const [menuSize, setMenuSize] = useState();
+  const [triggerSize, setTriggerSize] = useState();
+  const refMenuCallback = useCallback((node) => {
+    if (node !== null) {
+      setMenuSize(node.getBoundingClientRect());
+    }
+  }, []);
+  const refTriggerCallback = useCallback((node) => {
+    if (node !== null) {
+      setTriggerSize(node.getBoundingClientRect());
+    }
+  }, []);
+  return (
+    <DropdownStyled
+      active={open}
+      variant={variant}
+      className="sc-dropdown"
+      {...rest}
+    >
+      <TriggerStyled
+        variant={variant}
+        size={size}
+        className="trigger"
+        onBlur={() => setOpen(!open)}
+        onFocus={() => setOpen(!open)}
+        onClick={(event) => event.stopPropagation()}
+        tabIndex="0"
+        title={title}
+        ref={refTriggerCallback}
+      >
+        {icon && (
+          <ButtonIcon text={text} size={size}>
+            {icon}
+          </ButtonIcon>
+        )}
+        {text && <ButtonText className="sc-trigger-text">{text}</ButtonText>}
+        {caret && (
+          <Caret>
+            <Icon name="Dropdown-down" />
+          </Caret>
+        )}
+        {open && (
+          <DropdownMenuStyled
+            className="menu-item"
+            postion={'right'}
+            ref={refMenuCallback}
+            size={menuSize}
+            triggerSize={triggerSize}
+          >
+            {items.map(({ label, onClick, ...itemRest }) => {
+              return (
+                <DropdownMenuItemStyled
+                  className="menu-item-label"
+                  key={label}
+                  onClick={onClick}
+                  variant={variant}
+                  {...itemRest}
+                >
+                  {label}
+                </DropdownMenuItemStyled>
+              );
+            })}
+          </DropdownMenuStyled>
+        )}
+      </TriggerStyled>
+    </DropdownStyled>
+  );
+}
+
+export { Dropdown };

package/src/lib/components/dropzone/Dropzone.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { DropzoneOptions, useDropzone } from 'react-dropzone';
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { Text } from '../text/Text.component';
+
+const DropzoneContainer = styled.div<{
+  isDragActive: boolean;
+  variant: 'inline' | 'large';
+}>`
+  padding: ${spacing.r24};
+  border: ${spacing.f2} dashed
+    ${(props) =>
+      !props.isDragActive
+        ? props.theme.textSecondary
+        : props.theme.selectedActive};
+  box-sizing: border-box;
+  display: flex;
+  ${(props) => (props.variant === 'large' ? `text-align: center;` : ``)}
+`;
+
+const FileList = styled.div`
+  max-height: 100px;
+  overflow-y: auto;
+  flex: 1;
+  width: 100%;
+`;
+const FileListItem = styled(Wrap)`
+  align-items: baseline;
+  &:hover {
+    background: ${(props) => props.theme.selectedActive};
+  }
+`;
+
+const defaultDropzoneLabels = {
+  doesnt_meet_our_requirements: "doesn't meet our requirements",
+  or: 'OR',
+  label: 'Drag and drop files and folders here',
+  buttonLabel: 'Add files',
+  buttonAddMoreLabel: 'Add more files',
+};
+
+export function Dropzone({
+  labels,
+  onChange,
+  variant,
+  ...dropzoneOptions
+}: DropzoneOptions & {
+  variant: 'inline' | 'large';
+  labels?: Partial<typeof defaultDropzoneLabels>;
+  onChange?: (files: File[]) => void;
+}) {
+  labels = { ...defaultDropzoneLabels, ...labels };
+  const [acceptedFiles, setAcceptedFiles] = useState<File[]>([]);
+  const { getRootProps, getInputProps, isDragActive, fileRejections } =
+    useDropzone({
+      ...dropzoneOptions,
+      onDrop: (acceptedFiles, rejectedFiles, e) => {
+        const { multiple } = dropzoneOptions;
+
+        setAcceptedFiles((alreadyAcceptedFiles) => {
+          const singleFileAlreadyHasFile =
+            !multiple && alreadyAcceptedFiles.length === 1;
+
+          const newAcceptedFiles = singleFileAlreadyHasFile
+            ? alreadyAcceptedFiles
+            : [...alreadyAcceptedFiles, ...acceptedFiles];
+
+          if (onChange) {
+            onChange(newAcceptedFiles);
+          }
+          return newAcceptedFiles;
+        });
+        if (dropzoneOptions.onDrop) {
+          dropzoneOptions.onDrop(acceptedFiles, rejectedFiles, e);
+        }
+      },
+    });
+  const { multiple } = dropzoneOptions;
+
+  const { onClick, ...rootProps } = getRootProps();
+
+  const removeFile = (fileIndex: number) => {
+    setAcceptedFiles((alreadyAcceptedFiles) => {
+      const newAcceptedFiles = [...alreadyAcceptedFiles];
+      newAcceptedFiles.splice(fileIndex, 1);
+      if (onChange) {
+        onChange(newAcceptedFiles);
+      }
+      return newAcceptedFiles;
+    });
+  };
+
+  return (
+    <Stack direction="vertical">
+      <DropzoneContainer
+        {...rootProps}
+        isDragActive={isDragActive}
+        variant={variant}
+      >
+        <input {...getInputProps()} />
+        <div style={{ flex: '1' }}>
+          {!multiple && acceptedFiles.length === 1 ? (
+            <FileListItem>
+              <Text>{acceptedFiles[0].name}</Text>
+              <Button
+                icon={<Icon name="Close" />}
+                tooltip={{ overlay: 'Remove' }}
+                aria-label={`Remove ${acceptedFiles[0].name}`}
+                type="button"
+                onClick={() => {
+                  removeFile(0);
+                }}
+              />
+            </FileListItem>
+          ) : multiple && acceptedFiles.length > 0 ? (
+            <Stack direction="vertical">
+              <Button
+                icon={
+                  variant === 'large' ? <Icon name="Create-add" /> : undefined
+                }
+                variant="secondary"
+                type="button"
+                label={labels.buttonAddMoreLabel}
+                onClick={onClick}
+              />
+              <FileList>
+                {acceptedFiles.map((file, index) => (
+                  <FileListItem key={index}>
+                    <Text>{file.name}</Text>
+                    <Button
+                      icon={<Icon name="Close" />}
+                      tooltip={{ overlay: 'Remove' }}
+                      aria-label={`Remove ${file.name}`}
+                      type="button"
+                      onClick={() => {
+                        removeFile(index);
+                      }}
+                    />
+                  </FileListItem>
+                ))}
+              </FileList>
+            </Stack>
+          ) : (
+            <Stack
+              direction={variant === 'large' ? 'vertical' : 'horizontal'}
+              gap={'f16'}
+            >
+              <Text>
+                <Icon name="Upload" size="3x" />
+              </Text>
+              <Text>{labels.label}</Text>
+              {variant === 'large' && <Text>{labels.or}</Text>}
+              <Button
+                icon={
+                  variant === 'large' ? <Icon name="Create-add" /> : undefined
+                }
+                label={labels.buttonLabel}
+                variant="secondary"
+                type="button"
+                onClick={onClick}
+              />
+            </Stack>
+          )}
+        </div>
+      </DropzoneContainer>
+      <Text variant="Smaller" isEmphazed color="statusCritical">
+        {fileRejections.length > 0 ? (
+          fileRejections.map((rejection) => rejection.file.name) +
+          ' ' +
+          labels.doesnt_meet_our_requirements
+        ) : (
+          <>&nbsp;</>
+        )}
+      </Text>
+    </Stack>
+  );
+}

package/src/lib/components/emptystate/Emptystate.component.tsx

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components';
+
+import { spacing } from '../../spacing';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon, IconName } from '../icon/Icon.component';
+import { LargeText } from '../text/Text.component';
+type Props = {
+  label: string;
+  icon: IconName;
+  link?: string;
+  history?: Record<string, any>;
+};
+const EmptystateContainer = styled.div`
+  ${(props) => {
+    const brand = props.theme;
+    return css`
+      color: ${brand.textSecondary};
+    `;
+  }}
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-top: 10%;
+`;
+export const EmptyStateRow = styled.div`
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: ${spacing.r24};
+`;
+export const ActionWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;
+
+function EmptyState(props: Props) {
+  const { icon, label, link, history } = props;
+  return (
+    <EmptystateContainer className="sc-emptystate">
+      <EmptyStateRow>
+        <Icon name={icon} color="infoPrimary" size="5x" withWrapper />
+      </EmptyStateRow>
+      <EmptyStateRow>
+        <LargeText>A list of {`${label}s`} will appear here.</LargeText>
+      </EmptyStateRow>
+      <EmptyStateRow>
+        <LargeText>
+          There are no {`${label}s`} created yet, let's create your first{' '}
+          {label}.
+        </LargeText>
+      </EmptyStateRow>
+      {history && (
+        <ActionWrapper>
+          <Button
+            label={`Create ${label}`}
+            icon={<Icon name="Create-add" />}
+            type="button"
+            variant="primary"
+            onClick={() => history.push(link)}
+          />
+        </ActionWrapper>
+      )}
+    </EmptystateContainer>
+  );
+}
+
+export { EmptyState };

package/src/lib/components/emptytable/Emptytable.component.tsx

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+
+// useDiv returns a div wrapper instead of tr more adapted to div based table (instead of tbody/thead/...)
+type Props = {
+  children: Node | React.ReactNode;
+  useDiv?: boolean;
+};
+const EmptytableContainer = styled.tr`
+  width: 100%;
+  padding: ${spacing.r20};
+  box-sizing: border-box;
+  display: table;
+  table-layout: fixed;
+
+  ${(props) => {
+    const brand = props.theme;
+    return css`
+      background: ${brand.backgroundLevel2};
+      border-top: 1px solid ${brand.border};
+    `;
+  }}
+`;
+const EmptytableContainerDiv = styled.div`
+  width: 100%;
+  padding: ${spacing.r20};
+  box-sizing: border-box;
+  display: table;
+  table-layout: fixed;
+
+  ${(props) => {
+    const brand = props.theme;
+    return css`
+      background: ${brand.backgroundLevel2};
+      border-top: 1px solid ${brand.border};
+    `;
+  }}
+`;
+// Using !important as the only way to prioritize this over the general tr td styling that may be defined in the apps
+const EmptytableContent = styled.td`
+  text-align: center !important;
+  border: none !important;
+  ${(props) => {
+    const brand = props.theme;
+    return css`
+      background: ${brand.backgroundLevel2};
+      color: ${brand.textSecondary};
+    `;
+  }}
+`;
+const EmptytableContentDiv = styled.div`
+  text-align: center !important;
+  border: none !important;
+  ${(props) => {
+    const brand = props.theme;
+    return css`
+      background: ${brand.backgroundLevel2};
+      color: ${brand.textSecondary};
+    `;
+  }}
+`;
+
+function EmptyTable(props: Props) {
+  if (props.useDiv)
+    return (
+      <EmptytableContainerDiv className="sc-emptytable">
+        <EmptytableContentDiv>{props.children}</EmptytableContentDiv>
+      </EmptytableContainerDiv>
+    );
+  return (
+    <EmptytableContainer className="sc-emptytable">
+      <EmptytableContent>{props.children}</EmptytableContent>
+    </EmptytableContainer>
+  );
+}
+
+export { EmptyTable };

package/src/lib/components/error-pages/ErrorPage401.component.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  ErrorPageContainer,
+  Row,
+  Title,
+  Description,
+  DescriptionContent,
+  Link,
+} from './ErrorPageStyle';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+const translations = {
+  en: {
+    unexpected_error: 'Not authorized',
+    error_desc: `You don't have permission to view this page using the credentials you have supplied.`,
+    may_also_contact: 'You can contact ',
+    to_report_issue: ' to report this issue.',
+    return_home: 'Return Home',
+  },
+  fr: {
+    unexpected_error: `Accès refusé`,
+    error_desc: `Les identifiants fournis ne vous permettent pas de consulter cette page.`,
+    may_also_contact: 'Vous pouvez contacter le ',
+    to_report_issue: ' pour signaler le problème.',
+    return_home: "Retour à l'accueil",
+  },
+};
+type Props = {
+  supportLink?: string;
+  locale?: string;
+  onReturnHomeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+function ErrorPage401({
+  supportLink = undefined,
+  locale = 'en',
+  onReturnHomeClick,
+  ...rest
+}: Props) {
+  if (!translations[locale]) locale = 'en';
+  // Ensure the locale formatting is consistent
+  locale = locale.toLowerCase();
+  return (
+    <ErrorPageContainer className="sc-error-page401" {...rest}>
+      <Row>
+        <Icon name="Exclamation-triangle" size="2x" color="statusWarning" />
+        <Title>{translations[locale].unexpected_error}</Title>
+      </Row>
+      <Row>
+        <Description>
+          <DescriptionContent>
+            {translations[locale].error_desc}
+          </DescriptionContent>
+          {supportLink && (
+            <DescriptionContent>
+              {translations[locale].may_also_contact}
+              <Link href={supportLink}>
+                support <Icon name="External-link" />
+              </Link>
+              {translations[locale].to_report_issue}
+            </DescriptionContent>
+          )}
+        </Description>
+      </Row>
+
+      {onReturnHomeClick && (
+        <Button
+          label={translations[locale].return_home}
+          variant="secondary"
+          onClick={onReturnHomeClick}
+        />
+      )}
+    </ErrorPageContainer>
+  );
+}
+
+export { ErrorPage401 };

package/src/lib/components/error-pages/ErrorPage404.component.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  ErrorPageContainer,
+  Row,
+  Title,
+  Description,
+  DescriptionContent,
+} from './ErrorPageStyle';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+const translations = {
+  en: {
+    not_exist: 'Error: this page does not exist',
+    error_desc: 'It might be the wrong address or the page has moved.',
+    should_do:
+      'You might check the url, or contact your admin if the error remains.',
+    return_home: 'Return Home',
+  },
+  fr: {
+    not_exist: "Erreur: cette page n'existe pas",
+    error_desc:
+      'Il se peut que ce soit une mauvaise adresse ou que la page ait été déplacée.',
+    should_do:
+      "Vous pouvez vérifier l'url, ou contacter votre administrateur si l'erreur persiste.",
+    return_home: "Retour à l'accueil",
+  },
+};
+type Props = {
+  locale?: string;
+  onReturnHomeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+function ErrorPage404({ locale = 'en', onReturnHomeClick, ...rest }: Props) {
+  if (!translations[locale]) locale = 'en';
+  // Ensure the locale formatting is consistent
+  locale = locale.toLowerCase();
+  return (
+    <ErrorPageContainer className="sc-error-page404" {...rest}>
+      <Row>
+        <Icon name="Exclamation-triangle" size="2x" color="statusWarning" />
+        <Title>{translations[locale].not_exist}</Title>
+      </Row>
+      <Row>
+        <Description>
+          <DescriptionContent>
+            {translations[locale].error_desc}
+          </DescriptionContent>
+          <DescriptionContent>
+            {translations[locale].should_do}
+          </DescriptionContent>
+        </Description>
+      </Row>
+      {onReturnHomeClick && (
+        <Button
+          label={translations[locale].return_home}
+          variant="secondary"
+          onClick={onReturnHomeClick}
+        />
+      )}
+    </ErrorPageContainer>
+  );
+}
+
+export { ErrorPage404 };