@scality/core-ui 0.115.0

package/src/lib/components/prettybytes/prettybytes.test.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { PrettyBytes } from './PrettyBytes.component';
+describe('PrettyBytes', () => {
+  test('simple/advanced bytes', () => {
+    const cases = [
+      {
+        bytes: 0,
+        prettyBytes: '0 B',
+      },
+      {
+        bytes: Math.pow(1024, 0),
+        prettyBytes: '1 B',
+      },
+      {
+        bytes: Math.pow(1024, 1),
+        prettyBytes: '1 KiB',
+      },
+      {
+        bytes: Math.pow(1024, 2),
+        prettyBytes: '1 MiB',
+      },
+      {
+        bytes: Math.pow(1024, 3),
+        prettyBytes: '1 GiB',
+      },
+      {
+        bytes: Math.pow(1024, 4),
+        prettyBytes: '1 TiB',
+      },
+      {
+        bytes: Math.pow(1024, 5),
+        prettyBytes: '1 PiB',
+      },
+      {
+        bytes: Math.pow(1024, 6),
+        prettyBytes: '1 EiB',
+      },
+      {
+        bytes: Math.pow(1024, 7),
+        prettyBytes: '1 ZiB',
+      },
+      {
+        bytes: Math.pow(1024, 8),
+        prettyBytes: '1 YiB',
+      },
+      {
+        bytes: Math.pow(232312, 5),
+        prettyBytes: '560 YiB',
+      },
+      {
+        bytes: Math.pow(2398123, 5),
+        prettyBytes: '65 608 124 YiB',
+      },
+      {
+        bytes: 2.10239,
+        prettyBytes: '2 B',
+      },
+      {
+        bytes: 0.1,
+        prettyBytes: '0 B',
+      },
+      {
+        bytes: 0.00000001,
+        prettyBytes: '0 B',
+      },
+      {
+        bytes: 1000,
+        prettyBytes: '1 000 B',
+      },
+      {
+        bytes: 2232134.10239,
+        prettyBytes: '2 MiB',
+      },
+      {
+        decimals: 0,
+        bytes: 0,
+        prettyBytes: '0 B',
+      },
+      {
+        decimals: 2,
+        bytes: 0,
+        prettyBytes: '0 B',
+      },
+      {
+        decimals: 0,
+        bytes: 1,
+        prettyBytes: '1 B',
+      },
+      {
+        decimals: 1,
+        bytes: 1,
+        prettyBytes: '1 B',
+      },
+      {
+        decimals: 3,
+        bytes: 1,
+        prettyBytes: '1 B',
+      },
+      {
+        decimals: 3,
+        bytes: Math.pow(1024, 5),
+        prettyBytes: '1.000 PiB',
+      },
+      {
+        decimals: 0,
+        bytes: 3.12345,
+        prettyBytes: '3 B',
+      },
+      {
+        decimals: 3,
+        bytes: 3.12345,
+        prettyBytes: '3 B',
+      },
+      {
+        decimals: 4,
+        bytes: 32398322.12345,
+        prettyBytes: '30.8974 MiB',
+      },
+      {
+        decimals: 4.5,
+        bytes: 32398322.12345,
+        prettyBytes: '30.8974 MiB',
+      },
+      {
+        decimals: 4.8,
+        bytes: 32398322.12345,
+        prettyBytes: '30.8974 MiB',
+      },
+    ];
+    cases.forEach((testCase) => {
+      expect(
+        render(
+          <PrettyBytes decimals={testCase.decimals} bytes={testCase.bytes} />,
+        ).container,
+      ).toHaveTextContent(testCase.prettyBytes);
+    });
+  });
+  test('error bytes / error decimals', () => {
+    const cases = [
+      {
+        bytes: null,
+        prettyBytes: '-',
+      },
+      {
+        bytes: undefined,
+        prettyBytes: '-',
+      },
+      {
+        bytes: Infinity,
+        prettyBytes: '0 B',
+      },
+      {
+        bytes: -Infinity,
+        prettyBytes: '0 B',
+      },
+      {
+        bytes: -0,
+        prettyBytes: '-',
+      },
+      {
+        bytes: -1,
+        prettyBytes: '-',
+      },
+      {
+        bytes: -0.23,
+        prettyBytes: '-',
+      },
+      {
+        bytes: NaN,
+        prettyBytes: '-',
+      },
+      {
+        decimals: null,
+        bytes: Math.pow(1024, 1),
+        prettyBytes: '1 KiB',
+      },
+      {
+        decimals: undefined,
+        bytes: Math.pow(1024, 1),
+        prettyBytes: '1 KiB',
+      },
+      {
+        decimals: Infinity,
+        bytes: Math.pow(1024, 1),
+        prettyBytes: '1 KiB',
+      },
+      {
+        decimals: -Infinity,
+        bytes: Math.pow(1024, 1),
+        prettyBytes: '1 KiB',
+      },
+      {
+        decimals: -0,
+        bytes: Math.pow(1024, 1),
+        prettyBytes: '1 KiB',
+      },
+      {
+        decimals: -1,
+        bytes: Math.pow(1024, 1),
+        prettyBytes: '1 KiB',
+      },
+      {
+        decimals: -0.23,
+        bytes: Math.pow(1024, 1),
+        prettyBytes: '1 KiB',
+      },
+    ];
+    cases.forEach((testCase) => {
+      expect(
+        render(
+          <PrettyBytes decimals={testCase.decimals} bytes={testCase.bytes} />,
+        ).container,
+      ).toHaveTextContent(testCase.prettyBytes);
+    });
+  });
+});

package/src/lib/components/progressbar/ProgressBar.component.tsx

@@ -0,0 +1,217 @@
+import styled, { css, useTheme } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Size } from '../constants';
+export type ProgressBarProps = {
+  percentage: number;
+  size?: Size | 'custom';
+  color?: string;
+  // The color of unfill bar
+  backgroundColor?: string;
+  topLeftLabel?: string;
+  topRightLabel?: string;
+  bottomLeftLabel?: string;
+  bottomRightLabel?: string;
+  buildinLabel?: string;
+  // The animation to full the progress bar
+  isAnimation?: boolean;
+  height?: React.CSSProperties['height'];
+};
+const Container = styled.div``;
+const ProgressBarContainer = styled.div<{
+  backgroundColor: string;
+  size: keyof typeof fontSize | 'custom';
+  buildinLabel?: string;
+  height?: React.CSSProperties['height'];
+}>`
+  display: flex;
+  border-radius: 4px;
+  justify-content: space-between;
+  align-items: center;
+
+  ${(props) => {
+    switch (props.size) {
+      case 'smaller':
+        return css`
+          height: ${fontSize.smaller};
+          font-size: ${fontSize.smaller};
+        `;
+
+      case 'base':
+        return css`
+          height: ${fontSize.small};
+          font-size: ${fontSize.small};
+        `;
+
+      case 'large':
+        return css`
+          height: ${fontSize.base};
+          font-size: ${fontSize.base};
+        `;
+
+      case 'larger':
+        return css`
+          height: 20px;
+        `;
+
+      case 'custom':
+        return css`
+          height: ${props.height};
+          font-size: ${props.height};
+        `;
+      default:
+        return css`
+          height: ${fontSize.base};
+          font-size: ${fontSize.base};
+        `;
+    }
+  }};
+
+  background-color: ${(props) => {
+    return props.backgroundColor;
+  }};
+  /* Add the border for the progress bar when there is label inside.*/
+  ${(props) => {
+    if (props.buildinLabel) {
+      return css`
+        border: 1px solid;
+        border-color: ${getThemePropSelector('border')};
+      `;
+    }
+  }};
+`;
+const TopLeftLabel = styled.span`
+  display: inline-block;
+  font-size: ${fontSize.large};
+  font-weight: ${fontWeight.bold};
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const TopRightLabel = styled.span`
+  display: inline-block;
+  font-size: ${fontSize.small};
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const BottomLabel = styled.span`
+  display: inline-block;
+  color: ${getThemePropSelector('textSecondary')};
+`;
+const TopLabelsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 ${spacing.r4} 0;
+`;
+const BottomLabelsContainer = styled(TopLabelsContainer)`
+  margin: ${spacing.r4} 0 0 0;
+  font-size: ${fontSize.smaller};
+`;
+const FilledAreaContainer = styled.div<{
+  isAnimation?: boolean;
+  width: number;
+}>`
+  display: flex;
+  justify-content: flex-start;
+  border-radius: 4px;
+  height: 100%;
+  ${(props) => {
+    if (props.isAnimation) {
+      return css`
+      @keyframes widthAnimation {
+        from {
+          width: 0%;
+        }
+        to {
+          width: ${props.width} + "%";
+        }
+      }
+      animation-duration: 1s;
+      animation-fill-mode: both;
+      animation-name: widthAnimation;
+
+      background-color: ${props.color || props.theme.selectedActive}
+      width: ${props.width}%;
+    `;
+    } else {
+      return css`
+        background-color: ${props.color || props.theme.selectedActive};
+        width: ${props.width}%;
+      `;
+    }
+  }}
+`;
+const BuildinLabel = styled.div`
+  color: ${getThemePropSelector('textPrimary')};
+  padding-left: 5px;
+  white-space: nowrap;
+`;
+
+function ProgressBar({
+  percentage = 50,
+  size = 'base',
+  color,
+  backgroundColor,
+  topLeftLabel,
+  topRightLabel,
+  bottomLeftLabel,
+  bottomRightLabel,
+  buildinLabel,
+  isAnimation = false,
+  height,
+  ...rest
+}: ProgressBarProps) {
+  const theme = useTheme();
+  if (!backgroundColor) {
+    backgroundColor = theme.backgroundLevel2;
+  }
+  return (
+    <Container className="sc-progressbar" {...rest}>
+      {(topLeftLabel || topRightLabel) && (
+        <TopLabelsContainer>
+          {topLeftLabel && (
+            <TopLeftLabel className="sc-progressbar-topLeftLabel">
+              {topLeftLabel}
+            </TopLeftLabel>
+          )}
+          {topRightLabel && (
+            <TopRightLabel className="sc-progressbar-toprightlabel">
+              {topRightLabel}
+            </TopRightLabel>
+          )}
+        </TopLabelsContainer>
+      )}
+      <ProgressBarContainer
+        className="sc-progressbarcontainer"
+        size={size}
+        buildinLabel={buildinLabel}
+        backgroundColor={backgroundColor}
+        height={height}
+      >
+        <FilledAreaContainer
+          color={color}
+          width={percentage}
+          isAnimation={isAnimation}
+        >
+          <BuildinLabel>{buildinLabel}</BuildinLabel>
+        </FilledAreaContainer>
+      </ProgressBarContainer>
+
+      {(bottomLeftLabel || bottomRightLabel) && (
+        <BottomLabelsContainer>
+          {bottomLeftLabel && (
+            <BottomLabel className="sc-progressbar-bottomleftlabel">
+              {bottomLeftLabel}
+            </BottomLabel>
+          )}
+          {bottomRightLabel && (
+            <BottomLabel className="sc-progressbar-bottomrightlabel">
+              {bottomRightLabel}
+            </BottomLabel>
+          )}
+        </BottomLabelsContainer>
+      )}
+    </Container>
+  );
+}
+
+export { ProgressBar };

package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import styled, { createGlobalStyle, css } from 'styled-components';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const GlobalStyle = createGlobalStyle`
+${(props) => {
+  const brand = props.theme;
+  return css`
+    // Custom scrollbar
+    * {
+      // Chrome / Safari / Edge
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background: ${brand.backgroundLevel3};
+      }
+
+      ::-webkit-scrollbar-thumb {
+        width: 4px;
+        height: 4px;
+        min-height: 20px;
+        background: ${brand.buttonSecondary};
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        background-clip: padding-box;
+        border: 2px solid rgba(0, 0, 0, 0);
+      }
+
+      ::-webkit-scrollbar-thumb:vertical:hover,
+      ::-webkit-scrollbar-thumb:horizontal:hover {
+        background-color: rgba(89, 90, 120, 0.5);
+      }
+
+      ::-webkit-scrollbar-button {
+        width: 0;
+        height: 0;
+        display: none;
+      }
+      ::-webkit-scrollbar-corner {
+        background-color: transparent;
+      }
+
+      // Firefox
+      scrollbar-color: ${brand.buttonSecondary} ${brand.backgroundLevel3};
+      scrollbar-width: thin;
+    }
+  `;
+}}
+`;
+
+function ScrollbarWrapper({ children }: Props) {
+  return (
+    <>
+      <GlobalStyle />
+      {children}
+    </>
+  );
+}
+
+export { ScrollbarWrapper };

package/src/lib/components/searchinput/SearchInput.component.tsx

@@ -0,0 +1,146 @@
+import { ChangeEvent, forwardRef, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { fontSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+import { Input } from '../input/Input.component';
+export type Props = {
+  placeholder?: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onReset?: () => void;
+  disableToggle: boolean;
+  disabled?: boolean;
+};
+const SearchInputContainer = styled.div<{
+  docked?: boolean;
+  disabled?: boolean;
+}>`
+  position: relative;
+
+  ${(props) => {
+    if (props.disabled) {
+      return css`
+        i {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+      `;
+    }
+  }}
+
+  .sc-input {
+    display: block;
+    input[type='text'] {
+      width: ${(props) => (props.docked ? '40px' : '100%')};
+      box-sizing: border-box;
+      padding-left: ${(props) => (props.docked ? '28px' : '40px')};
+      transition: width 0.2s ease-in-out;
+    }
+  }
+`;
+const IconButton = styled.button`
+  position: absolute;
+  border: none;
+  outline: none;
+  top: 1px;
+  padding: 8px 12px;
+  border-radius: 5px;
+  font-size: ${fontSize.base};
+  color: ${getThemePropSelector('textSecondary')};
+  background-color: transparent;
+  ${(props) => {
+    // TODO
+    return (
+      !props.disabled &&
+      css`
+        cursor: pointer;
+        &:hover {
+          color: ${getThemePropSelector('selectedActive')};
+        }
+      `
+    );
+  }};
+`;
+const SearchIcon = styled(IconButton)`
+  left: 1px;
+`;
+const ResetIcon = styled(IconButton)<{ visible?: boolean }>`
+  right: 1px;
+  visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
+  opacity: ${(props) => (props.visible ? 1 : 0)};
+  transition: opacity 0.5s ease-in-out;
+`;
+
+const SearchInput = forwardRef(
+  (
+    {
+      disableToggle,
+      placeholder,
+      value,
+      onChange,
+      onReset,
+      disabled,
+      ...rest
+    }: Props,
+    forwardedRef,
+  ) => {
+    const [docked, setDocked] = useState(!disableToggle);
+    const myInputRef = useRef<HTMLInputElement | null>(null);
+
+    const toggle = () => {
+      if (!disableToggle) {
+        setDocked(!docked);
+        if (myInputRef.current) {
+          myInputRef.current.focus();
+        }
+      }
+    };
+
+    const reset = () => {
+      if (onReset) {
+        onReset();
+      }
+
+      if (!disableToggle) {
+        setDocked(true);
+      }
+    };
+
+    return (
+      <SearchInputContainer
+        className="sc-searchinput"
+        disabled={disabled}
+        docked={docked}
+        {...rest}
+      >
+        <Input
+          min={'1'}
+          type="text"
+          aria-label="search"
+          name="search"
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          inputRef={(element) => {
+            myInputRef.current = element;
+            if (typeof forwardedRef === 'function') {
+              forwardedRef(element);
+            } else if (forwardedRef) {
+              forwardedRef.current = element;
+            }
+          }}
+        />
+        <SearchIcon onClick={toggle} disabled={!docked}>
+          <Icon name="Search" />
+        </SearchIcon>
+        <ResetIcon onClick={reset} visible={!!value && !docked && !!onReset}>
+          <Icon name="Times-circle" />
+        </ResetIcon>
+      </SearchInputContainer>
+    );
+  },
+);
+
+export { SearchInput };