@scality/core-ui 0.115.0

package/src/lib/components/text/Text.component.tsx

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { CoreUITheme } from '../../style/theme';
+
+type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
+type Props = {
+  children: React.ReactNode | string;
+  status?: Status;
+  id?: string;
+};
+const BasicTextStyle = styled.span`
+  color: ${(props) => props.theme.textPrimary};
+  font-size: 1rem;
+  line-height: ${spacing.r24};
+  font-weight: 400;
+`;
+const SecondaryTextStyle = styled(BasicTextStyle)`
+  color: ${(props) => props.theme.textSecondary};
+`;
+const LargerTextStyle = styled(BasicTextStyle)`
+  font-size: 1.43rem;
+  line-height: 1.5;
+`;
+const EmphaseTextStyle = styled(BasicTextStyle)`
+  font-weight: 700;
+`;
+const StatusTextStyle = styled(BasicTextStyle)<{ statusColor: string }>`
+  color: ${(props) => props.theme[`${props.statusColor}`]};
+`;
+const LargetStyle = styled(BasicTextStyle)`
+  font-size: 1.14rem;
+  line-height: 1.5;
+`;
+const SmallerTextStyle = styled(BasicTextStyle)`
+  font-size: 0.71rem;
+  line-height: 1.4;
+  letter-spacing: 2%; // to be defined, percentage value is not valid
+`;
+const SmallerSecondaryTextStyle = styled(SmallerTextStyle)`
+  color: ${(props) => props.theme.textSecondary};
+`;
+const getStatusColor = (status?: Status) => {
+  let statusColor: string;
+
+  switch (status) {
+    case 'healthy':
+      statusColor = 'statusHealthy';
+      break;
+
+    case 'warning':
+      statusColor = 'statusWarning';
+      break;
+
+    case 'critical':
+      statusColor = 'statusCritical';
+      break;
+
+    default:
+      statusColor = 'textSecondary';
+  }
+  return statusColor;
+};
+
+export const SmallerEmphaseTextStyle = styled(SmallerTextStyle)<{
+  statusColor: string;
+}>`
+  font-weight: 700;
+  color: ${(props) => props.theme[`${props.statusColor}`]};
+`;
+const ChartTitleTextStyle = styled(BasicTextStyle)`
+  letter-spacing: ${spacing.r2};
+`;
+export function BasicText({ children, ...rest }: Props) {
+  return <BasicTextStyle {...rest}>{children}</BasicTextStyle>;
+}
+export function SecondaryText({ children, ...rest }: Props) {
+  return <SecondaryTextStyle {...rest}>{children}</SecondaryTextStyle>;
+}
+export function LargerText({ children, ...rest }: Props) {
+  return <LargerTextStyle {...rest}>{children}</LargerTextStyle>;
+}
+export function EmphaseText({ children, ...rest }: Props) {
+  return <EmphaseTextStyle {...rest}>{children}</EmphaseTextStyle>;
+}
+export function StatusText({ children, status, ...rest }: Props) {
+  const statusColor = getStatusColor(status);
+  return (
+    <StatusTextStyle statusColor={statusColor} {...rest}>
+      {children}
+    </StatusTextStyle>
+  );
+}
+export function LargeText({ children, ...rest }: Props) {
+  return <LargetStyle {...rest}>{children}</LargetStyle>;
+}
+export function SmallerText({ children, ...rest }: Props) {
+  return <SmallerTextStyle {...rest}>{children}</SmallerTextStyle>;
+}
+export function SmallerSecondaryText({ children, ...rest }: Props) {
+  return (
+    <SmallerSecondaryTextStyle {...rest}>{children}</SmallerSecondaryTextStyle>
+  );
+}
+export function SmallerEmphaseText({ children, status, ...rest }: Props) {
+  const statusColor = getStatusColor(status);
+  return (
+    <SmallerEmphaseTextStyle statusColor={statusColor} {...rest}>
+      {children}
+    </SmallerEmphaseTextStyle>
+  );
+}
+
+export function ChartTitleText({ children, ...rest }: Props) {
+  return <ChartTitleTextStyle {...rest}>{children}</ChartTitleTextStyle>;
+}
+export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
+  alignRight?: boolean;
+}>`
+  font-style: italic;
+  ${(props) =>
+    props.alignRight
+      ? `
+    text-align: right;
+    display: block;
+  `
+      : ''}
+`;
+
+export const Text = styled.span<{
+  variant?: 'ChartTitle' | 'Basic' | 'Smaller' | 'Larger' | 'Large';
+  color?: keyof CoreUITheme;
+  isEmphazed?: boolean;
+  isGentleEmphazed?: boolean;
+}>`
+  color: ${(props) => props.theme[props.color || 'textPrimary']};
+  ${(props) =>
+    props.variant === 'Larger'
+      ? `
+  font-size: 1.43rem;
+  line-height: 1.5;
+      `
+      : props.variant === 'Large'
+      ? `
+  font-size: 1.14rem;
+  line-height: 1.5;
+      `
+      : props.variant === 'Smaller'
+      ? `
+  font-size: 0.71rem;
+  line-height: 1.4;
+  letter-spacing: 2%;// to be defined, percentage value is not valid
+      `
+      : `
+  font-size: 1rem;
+  line-height: ${spacing.r24};
+      `}
+
+  ${(props) =>
+    props.isEmphazed
+      ? `
+  font-weight: 700;
+      `
+      : `
+  font-weight: 400;
+      `}
+
+  ${(props) =>
+    props.isGentleEmphazed
+      ? `
+  font-style: italic;
+      `
+      : ``}
+    
+  ${(props) =>
+    props.variant === 'ChartTitle' && `letter-spacing: ${spacing.r2};`}
+`;
+
+export const Link = styled.a`
+  font-size: 1rem;
+  line-height: ${spacing.r24};
+  color: ${(props) => props.theme.textLink};
+  cursor: pointer;
+  text-decoration-line: none;
+  width: fit-content;
+  &:hover {
+    text-decoration-line: underline;
+  }
+  // :focus-visible is the keyboard-only version of :focus
+  &:focus-visible {
+    outline: dashed ${spacing.r2} ${(props) => props.theme.textLink};
+    outline-offset: ${spacing.r2};
+  }
+`;

package/src/lib/components/textarea/TextArea.component.tsx

@@ -0,0 +1,106 @@
+import React, {
+  CSSProperties,
+  forwardRef,
+  TextareaHTMLAttributes,
+} from 'react';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+
+type TextAreaVariant = 'code' | 'text';
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  variant?: TextAreaVariant;
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+};
+type RefType = HTMLTextAreaElement | null;
+
+const TextAreaContainer = styled.textarea<{
+  variant: TextAreaVariant;
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+}>`
+  padding: ${spacing.r12} ${spacing.r8};
+  border-radius: 4px;
+  resize: vertical;
+  font-family: ${(props) =>
+    props.variant === 'code' ? 'Courier New' : 'Lato'};
+  font-size: ${spacing.f14};
+
+  ${(props) =>
+    props.disabled &&
+    css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+
+  ${(props) =>
+    props.width &&
+    css`
+      width: ${props.width};
+    `}
+
+  ${(props) =>
+    props.height &&
+    css`
+      height: ${props.height};
+    `}
+
+  &:placeholder-shown {
+    font-style: italic;
+  }
+  &::placeholder {
+    color: ${(props) => props.theme.textSecondary};
+  }
+  &:hover {
+    ${(props) =>
+      !props.disabled &&
+      `border: ${spacing.r1} solid ${props.theme.infoPrimary};`}
+  }
+  &:focus {
+    border: ${spacing.r1} solid ${(props) => props.theme.infoPrimary};
+  }
+  ${(props) => {
+    const { border, textSecondary, backgroundLevel1, selectedActive } =
+      props.theme;
+    return css`
+      border-color: ${border};
+      color: ${textSecondary};
+      background: ${backgroundLevel1};
+      &:focus {
+        border-color: ${selectedActive};
+        outline: none;
+      }
+    `;
+  }}
+`;
+
+function TextAreaElement(
+  { rows = 3, cols = 20, width, height, variant = 'code', ...rest }: Props,
+  ref: React.ForwardedRef<RefType>,
+) {
+  if (width || height) {
+    return (
+      <TextAreaContainer
+        className="sc-textarea"
+        width={width}
+        height={height}
+        variant={variant}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+
+  return (
+    <TextAreaContainer
+      className="sc-textarea"
+      rows={rows}
+      cols={cols}
+      variant={variant}
+      {...rest}
+      ref={ref}
+    />
+  );
+}
+
+export const TextArea = forwardRef<RefType, Props>(TextAreaElement);

package/src/lib/components/textbadge/TextBadge.component.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontWeight } from '../../style/theme';
+
+const StyledTextBadge = styled.span`
+  ${({ theme, variant }) => `
+      background-color: ${theme[variant]};
+      color: ${
+        variant === 'infoSecondary' ? theme.textPrimary : theme.textReverse
+      };
+      padding: 2px ${spacing.r4};
+      border-radius: 4px;
+      font-size: 0.9rem;
+      font-weight: ${fontWeight.bold};
+      margin: 0 ${spacing.r4} 0 ${spacing.r4};
+    `}
+`;
+type Props = {
+  text: string;
+  className?: string;
+  variant?:
+    | 'statusHealthy'
+    | 'statusWarning'
+    | 'statusCritical'
+    | 'infoPrimary'
+    | 'infoSecondary';
+};
+export function TextBadge({
+  text,
+  variant = 'infoPrimary',
+  className,
+  ...rest
+}: Props) {
+  return (
+    <StyledTextBadge
+      className={['sc-text-badge', className].join(' ')}
+      variant={variant}
+      {...rest}
+    >
+      {text}
+    </StyledTextBadge>
+  );
+}

package/src/lib/components/toast/DurationBasedProgressBar.tsx

@@ -0,0 +1,45 @@
+import { darken } from 'polished';
+import { useEffect, useState } from 'react';
+import { ProgressBar } from '../progressbar/ProgressBar.component';
+
+export function DurationBasedProgressBar({
+  duration,
+  color,
+}: {
+  duration: number | null;
+  color: string;
+}) {
+  const [progress, setProgress] = useState<number>(0);
+
+  useEffect(() => {
+    if (duration) {
+      const interval = setInterval(() => {
+        setProgress((prevProgress) => prevProgress + (100 / duration) * 1000);
+      }, 1000);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }
+  }, [duration]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        borderRadius: 4,
+      }}
+    >
+      <ProgressBar
+        size="custom"
+        percentage={progress}
+        color={color}
+        backgroundColor={`${darken(0.1, color)}`}
+        height={'4px'}
+      />
+    </div>
+  );
+}

package/src/lib/components/toast/Toast.component.tsx

@@ -0,0 +1,181 @@
+import { motion } from 'framer-motion';
+import React, { ReactNode, useRef } from 'react';
+import { useTheme } from 'styled-components';
+import { Box } from '../box/Box';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { BasicText } from '../text/Text.component';
+import { ToastPosition, positionOutput } from './ToastPositionHelpers';
+import { DurationBasedProgressBar } from './DurationBasedProgressBar';
+import { useToastParameters } from './useToastParameters';
+import styled from 'styled-components';
+
+export type ToastStatus = 'success' | 'error' | 'warning' | 'info';
+
+export type ToastProps = {
+  open: boolean;
+  message: ReactNode;
+  onClose: () => void;
+  status?: ToastStatus;
+  position?: ToastPosition;
+  autoDismiss?: boolean;
+  duration?: number;
+  icon?: React.ReactNode;
+  width?: React.CSSProperties['width'];
+  withProgressBar?: boolean;
+  style?: React.CSSProperties;
+};
+
+export const useGetBackgroundColor = (status: string) => {
+  const theme = useTheme();
+  switch (status) {
+    case 'success':
+      return theme.statusHealthy;
+    case 'error':
+      return theme.statusCritical;
+    case 'warning':
+      return theme.statusWarning;
+    default:
+      return theme.infoPrimary;
+  }
+};
+
+const useGetRgbBackgroundColor = (status: string) => {
+  const theme = useTheme();
+  switch (status) {
+    case 'success':
+      return `rgba(${theme.statusHealthyRGB}, 0.4)`;
+    case 'error':
+      return `rgba(${theme.statusCriticalRGB}, 0.4)`;
+    case 'warning':
+      return `rgba(${theme.statusWarningRGB}, 0.4)`;
+    default:
+      return theme.infoSecondary;
+  }
+};
+
+const defaultIconName = (status: string) => {
+  switch (status) {
+    case 'success':
+      return 'Check-circle';
+    case 'error':
+      return 'Times-circle';
+    case 'warning':
+      return 'Exclamation-circle';
+    default:
+      return 'Info-circle';
+  }
+};
+
+const DefaultIcon = ({ status }: { status: string }) => {
+  const color = useGetBackgroundColor(status);
+  const iconName = defaultIconName(status);
+
+  return <Icon name={iconName} color={color} />;
+};
+
+const DEFAULT_WIDTH = '25rem';
+
+const IconContainer = styled.div<{ bgColor: string }>`
+  align-items: center;
+  align-self: stretch;
+  border-radius: 4px 0px 0px 4px;
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  position: relative;
+  width: 32px;
+  background-color: ${(props) => props.bgColor};
+`;
+
+const ContentContainer = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 1;
+  flex-grow: 1;
+  gap: 8px;
+  padding: 0px 16px;
+  position: relative;
+`;
+
+function Toast({
+  open,
+  message,
+  onClose,
+  position = 'top-right',
+  status = 'info',
+  autoDismiss = true,
+  duration = 5000,
+  icon = <DefaultIcon status={status} />,
+  width = DEFAULT_WIDTH,
+  withProgressBar = false,
+  style,
+}: ToastProps) {
+  const ref = useRef(null);
+  const { params } = useToastParameters({
+    open,
+    duration: autoDismiss ? duration : null,
+    onClose,
+  });
+
+  const positionStyle = positionOutput[position];
+
+  const bgColor = useGetBackgroundColor(status);
+  const rgbBgColor = useGetRgbBackgroundColor(status);
+  const theme = useTheme();
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      role="status"
+      aria-live="polite"
+      style={{
+        position: 'fixed',
+        ...(style || positionStyle),
+        width,
+      }}
+    >
+      <motion.div
+        key="toast"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+        transition={{ duration: 0.3 }}
+        style={{
+          alignItems: 'flex-end',
+          backgroundColor: theme.backgroundLevel1,
+          border: `1px solid ${theme.border}`,
+          boxShadow: '0px 4px 10px 4px #000',
+          display: 'flex',
+          borderRadius: '4px',
+          position: 'relative',
+        }}
+      >
+        <IconContainer bgColor={rgbBgColor}>{icon}</IconContainer>
+        <ContentContainer>
+          <BasicText>{message}</BasicText>
+        </ContentContainer>
+        <Box display="flex" alignItems="center" alignSelf="stretch">
+          <Button
+            icon={<Icon name="Close" size="lg" color="textSecondary" />}
+            onClick={params?.onClose}
+            aria-label="Close"
+          />
+        </Box>
+      </motion.div>
+      {withProgressBar && (
+        <DurationBasedProgressBar
+          duration={autoDismiss ? duration : null}
+          color={bgColor}
+        />
+      )}
+    </div>
+  );
+}
+
+export { Toast };

package/src/lib/components/toast/ToastPositionHelpers.ts

@@ -0,0 +1,38 @@
+import { CSSProperties } from 'react';
+
+export type ToastPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'top-center'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'bottom-center';
+
+export const positionOutput: Record<ToastPosition, CSSProperties> = {
+  'top-left': {
+    top: '3rem',
+    left: '1rem',
+  },
+  'top-right': {
+    top: '3rem',
+    right: '1rem',
+  },
+  'top-center': {
+    top: '1rem',
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  'bottom-left': {
+    bottom: '1rem',
+    left: '1rem',
+  },
+  'bottom-right': {
+    bottom: '1rem',
+    right: '1rem',
+  },
+  'bottom-center': {
+    bottom: '1rem',
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+};

package/src/lib/components/toast/ToastProvider.tsx

@@ -0,0 +1,40 @@
+import { ReactNode, createContext, useContext, useState } from 'react';
+import { Toast, ToastProps } from './Toast.component';
+
+export type ToastContextState = Omit<ToastProps, 'onClose'>;
+
+export interface ToastContextType {
+  showToast: (toastProps: ToastContextState) => void;
+}
+
+export const ToastContext = createContext<ToastContextType | undefined>(
+  undefined,
+);
+
+interface ToastProviderProps {
+  children: ReactNode;
+}
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toastProps, setToastProps] = useState<ToastContextState | null>(null);
+
+  const showToast = (toastProps: ToastContextState) => {
+    setToastProps(toastProps);
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      {toastProps && (
+        <Toast {...toastProps} onClose={() => setToastProps(null)} />
+      )}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};