@scality/core-ui 0.115.0

package/src/lib/components/navbar/Navbar.component.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Logo } from '../../icons/branding';
+import { spacing } from '../../spacing';
+import { fontSize, navbarHeight, navbarItemWidth } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Button } from '../button/Button.component';
+import { Dropdown, Item } from '../dropdown/Dropdown.component';
+import { Icon } from '../icon/Icon.component';
+type Action = {
+  type: string;
+  items?: Array<Item>;
+};
+type Actions = Array<Action>;
+type Tab = {
+  title?: string;
+  selected?: boolean;
+  onClick?: (arg0: any) => void;
+  link?: JSX.Element;
+};
+export type Props = {
+  onToggleClick?: () => void;
+  rightActions: Actions;
+  logo?: JSX.Element;
+  tabs?: Array<Tab>;
+};
+const NavbarContainer = styled.div`
+  height: ${navbarHeight};
+  display: flex;
+  justify-content: space-between;
+  ${css`
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    color: ${getThemePropSelector('textPrimary')};
+    .fas,
+    .sc-trigger-text {
+      color: ${getThemePropSelector('textPrimary')};
+    }
+    border-bottom: ${spacing.r1} solid
+      ${getThemePropSelector('backgroundLevel1')};
+  `};
+`;
+const NavbarMenu = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const NavbarTabs = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  a {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    height: 100%;
+    padding: 0 ${spacing.r16};
+    border-bottom: ${spacing.r2} solid transparent;
+    border-top: ${spacing.r2} solid transparent;
+    ${(props) => {
+      const { selectedActive } = props.theme;
+      return css`
+        color: ${getThemePropSelector('textPrimary')};
+        &:hover {
+          background-color: ${getThemePropSelector('highlight')};
+        }
+        &.selected {
+          color: ${getThemePropSelector('textPrimary')};
+          font-weight: bold;
+          border-bottom-color: ${selectedActive};
+        }
+      `;
+    }};
+  }
+`;
+const TabItem = styled.div<{ selected: boolean }>`
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 ${spacing.r16};
+  ${(props) => {
+    const { textPrimary } = props.theme;
+    return css`
+      color: ${textPrimary};
+      &:hover {
+        border-bottom: ${spacing.r2} solid;
+        border-top: ${spacing.r2} solid;
+        cursor: pointer;
+      }
+    `;
+  }};
+  ${(props) =>
+    props.selected &&
+    css`
+      border-top: ${spacing.r2} solid;
+      border-bottom: ${spacing.r2} solid;
+    `};
+`;
+const NavbarMenuItem = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .sc-dropdown {
+    .trigger {
+      background-color: ${getThemePropSelector('backgroundLevel1')};
+      &:hover {
+        background-color: ${getThemePropSelector('highlight')};
+      }
+      height: ${navbarHeight};
+      font-size: ${fontSize.base};
+    }
+    .menu-item {
+      max-height: unset;
+    }
+  }
+
+  .sc-button {
+    margin: 0;
+    border-radius: 0;
+    height: ${navbarHeight};
+    font-size: ${fontSize.base};
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    &:hover {
+      background-color: ${getThemePropSelector('highlight')};
+    }
+    width: ${navbarItemWidth};
+  }
+`;
+
+const LogoContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 ${spacing.r16};
+  svg {
+    width: 7.143rem;
+    height: 2.143rem;
+  }
+`;
+
+const getActionRenderer = ({ type, items = null, ...rest }, index) => {
+  if (type === 'dropdown') {
+    return items ? (
+      <Dropdown
+        key={`navbar_right_action_${index}`}
+        size="larger"
+        variant="backgroundLevel1"
+        items={items}
+        caret={false}
+        {...rest}
+      />
+    ) : null;
+  } else if (type === 'button') {
+    return (
+      <Button
+        key={`navbar_right_action_${index}`}
+        size="larger"
+        variant="backgroundLevel1"
+        {...rest}
+      />
+    );
+  } else if (type === 'custom') {
+    return <rest.render key={`navbar_right_action_${index}`} />;
+  }
+
+  return null;
+};
+
+function NavBar({
+  onToggleClick,
+  logo,
+  tabs = [],
+  rightActions = [],
+  ...rest
+}: Props) {
+  return (
+    <NavbarContainer className="sc-navbar" {...rest}>
+      <NavbarMenu>
+        {onToggleClick && (
+          <NavbarMenuItem onClick={onToggleClick}>
+            <Button
+              size="larger"
+              variant="backgroundLevel1"
+              icon={<Icon name="Lat-menu" />}
+              title="Main Menu"
+            />
+          </NavbarMenuItem>
+        )}
+        <NavbarMenuItem>
+          <LogoContainer className="sc-logo">
+            {logo ? logo : <Logo />}
+          </LogoContainer>
+        </NavbarMenuItem>
+      </NavbarMenu>
+      {tabs.length ? (
+        <NavbarTabs>
+          {tabs.map(({ link, title, selected, onClick }, index) => {
+            return link ? (
+              React.cloneElement(link, {
+                className: selected ? 'selected' : '',
+                'aria-selected': selected,
+                role: 'tab',
+                key: `navbar_tab_item_${index}`,
+              })
+            ) : (
+              <TabItem
+                onClick={onClick}
+                role="tab"
+                selected={!!selected}
+                aria-selected={selected}
+                key={`navbar_tab_item_${index}`}
+              >
+                <span>{title}</span>
+              </TabItem>
+            );
+          })}
+        </NavbarTabs>
+      ) : null}
+      {rightActions.length ? (
+        <NavbarMenu>
+          <NavbarMenuItem>
+            {rightActions.map((action, index) =>
+              //@ts-ignore too costly to type this one now
+              getActionRenderer(action, index),
+            )}
+          </NavbarMenuItem>
+        </NavbarMenu>
+      ) : null}
+    </NavbarContainer>
+  );
+}
+
+export const Navbar = NavBar;

package/src/lib/components/notifications/Notification.component.tsx

@@ -0,0 +1,160 @@
+import { darken } from 'polished';
+import { useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import {
+  fontWeight,
+  grayDarkest,
+  black,
+  white,
+  grayLightest,
+} from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Variant } from '../constants';
+import { Icon } from '../icon/Icon.component';
+export type Props = {
+  uid: string;
+  title: string;
+  message?: string;
+  variant?: Variant;
+  dismissAfter?: number;
+  onDismiss?: (arg0: string) => void;
+};
+const NotificationContainer = styled.div<{ variant?: Variant }>`
+  position: relative;
+  padding: ${spacing.r16};
+  margin-top: ${spacing.r16};
+  border-radius: 5px;
+  box-shadow: 0px 0px 3px ${grayDarkest};
+
+  ${(props) => {
+    const variant = props.variant ?? 'backgroundLevel1';
+    const background = getThemePropSelector(variant)(props);
+    switch (props.variant) {
+      case 'warning':
+        return css`
+          background-color: ${background};
+          color: ${black};
+        `;
+      case undefined:
+        return css`
+          background-color: ${background};
+          color: ${props.theme.textPrimary};
+        `;
+      default:
+        return css`
+          background-color: ${background};
+          color: ${white};
+        `;
+    }
+  }};
+`;
+const NotificationTitle = styled.div`
+  padding: 0 ${spacing.r16} ${spacing.r4} 0;
+  font-weight: ${fontWeight.bold};
+`;
+const NotificationDismissProgress = styled.div<{
+  variant?: Variant;
+  value: number;
+  max: number;
+}>`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  border-radius: 5px;
+  ${(props) => {
+    const variant = props.variant || 'backgroundLevel1';
+    const background = getThemePropSelector(variant)(props);
+    const brandDark = darken(0.1, background);
+    return css`
+      background-color: ${brandDark};
+      width: ${(props.value / props.max) * 100}%;
+      transition: width 1s;
+      transition-timing-function: linear;
+    `;
+  }};
+`;
+const NotificationClose = styled.div`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  cursor: pointer;
+  &:hover {
+    color: ${grayLightest};
+  }
+`;
+
+function Notification({
+  uid,
+  title,
+  message,
+  variant,
+  dismissAfter,
+  onDismiss,
+  ...rest
+}: Props) {
+  const [dismissProgress, setDismissProgress] = useState(0);
+  const [timerId, setTimerId] = useState<number | undefined>(undefined);
+  const dismissProgressRef = useRef(dismissProgress);
+  dismissProgressRef.current = dismissProgress;
+  useEffect(() => {
+    resumeTimer();
+  });
+
+  const clearTimer = () => {
+    if (dismissAfter) {
+      setTimerId(undefined);
+      clearTimeout(timerId);
+    }
+  };
+
+  const resumeTimer = () => {
+    if (dismissAfter) {
+      if (dismissProgressRef.current === dismissAfter) {
+        dismiss();
+      } else if (!timerId) {
+        setTimerId(
+          //@ts-ignore node typing detected here instead of Dom one
+          setTimeout(() => {
+            setDismissProgress(dismissProgressRef.current + 1000);
+            resumeTimer();
+          }, 1000),
+        );
+      }
+    }
+  };
+
+  const dismiss = () => {
+    if (timerId) {
+      clearTimer();
+    }
+
+    onDismiss && onDismiss(uid);
+  };
+
+  return (
+    <NotificationContainer
+      className="sc-notification"
+      variant={variant}
+      onMouseEnter={clearTimer}
+      onMouseLeave={resumeTimer}
+      {...rest}
+    >
+      <NotificationTitle>{title}</NotificationTitle>
+      <div>{message}</div>
+      {!!dismissAfter && (
+        <NotificationDismissProgress
+          value={dismissProgress}
+          max={dismissAfter}
+          variant={variant}
+        />
+      )}
+      <NotificationClose onClick={dismiss}>
+        <Icon name="Close" />
+      </NotificationClose>
+    </NotificationContainer>
+  );
+}
+
+export { Notification };

package/src/lib/components/notifications/Notifications.component.tsx

@@ -0,0 +1,73 @@
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { zIndex } from '../../style/theme';
+import {
+  Notification,
+  Props as NotificationProps,
+} from './Notification.component';
+export const TOP_LEFT = 'tl';
+export const TOP_RIGHT = 'tr';
+export const BOTTOM_LEFT = 'bl';
+export const BOTTOM_RIGHT = 'br';
+type Position =
+  | typeof TOP_LEFT
+  | typeof TOP_RIGHT
+  | typeof BOTTOM_LEFT
+  | typeof BOTTOM_RIGHT;
+type Props = {
+  position?: Position;
+  notifications: Array<NotificationProps>;
+  onDismiss: (arg0: string) => void;
+};
+const NotificationsContainer = styled.div<{ position?: Position }>`
+  position: fixed;
+  z-index: ${zIndex.notification};
+  margin: ${spacing.r24};
+  ${(props) => {
+    switch (props.position) {
+      case TOP_LEFT:
+        return css`
+          top: 0;
+          left: 0;
+        `;
+
+      case BOTTOM_RIGHT:
+        return css`
+          bottom: 0;
+          right: 0;
+        `;
+
+      case BOTTOM_LEFT:
+        return css`
+          bottom: 0;
+          left: 0;
+        `;
+
+      default:
+        return css`
+          top: 0;
+          right: 0;
+        `;
+    }
+  }};
+`;
+
+function Notifications({ position, notifications, onDismiss, ...rest }: Props) {
+  return (
+    <NotificationsContainer
+      className="sc-notifications"
+      position={position}
+      {...rest}
+    >
+      {notifications.map((notification) => (
+        <Notification
+          key={notification.uid}
+          {...notification}
+          onDismiss={onDismiss}
+        />
+      ))}
+    </NotificationsContainer>
+  );
+}
+
+export { Notifications };

package/src/lib/components/prettybytes/PrettyBytes.component.tsx

@@ -0,0 +1,39 @@
+import prettyBytes from 'pretty-bytes';
+type Props = {
+  bytes?: number | null;
+  decimals?: number | null;
+  unit?: 'iB' | 'B';
+};
+
+function PrettyBytes({ bytes, decimals = 0, unit = 'iB' }: Props) {
+  if (bytes === undefined || bytes === null) return <>-</>;
+  let fractionDigits = decimals;
+  if (
+    !Number.isFinite(decimals) ||
+    (decimals !== undefined && decimals !== null && decimals < 0) ||
+    bytes < 1024
+  )
+    fractionDigits = 0;
+  if (!Number.isFinite(bytes) || !bytes || bytes < 0)
+    return bytes === Infinity ||
+      bytes === -Infinity ||
+      (bytes === 0 && !Object.is(bytes, -0)) ? (
+      <>0 B</>
+    ) : (
+      <>-</>
+    );
+  return (
+    <>
+      {prettyBytes(bytes, {
+        locale: 'en',
+        binary: unit === 'iB',
+        minimumFractionDigits: fractionDigits ?? undefined,
+        maximumFractionDigits: fractionDigits ?? undefined,
+      })
+        .replace(/,/g, ' ')
+        .replace(/kiB/g, 'KiB')}
+    </>
+  );
+}
+
+export { PrettyBytes };