@scality/core-ui 0.115.0

package/src/lib/components/sparkline/SparkLine.component.tsx

@@ -0,0 +1,176 @@
+import { VegaChart } from '../vegachart/VegaChart.component';
+import { yellowOrange, green } from '../../style/theme';
+type Props = {
+  id: string;
+  title?: string;
+  width?: number;
+  height?: number;
+  data: Array<Record<string, any>>;
+  xAxis: Record<string, any>;
+  yAxis: Record<string, any>;
+  row: Record<string, any>;
+  lineConfig?: Record<string, any>;
+  sparkLineColor?: string;
+  upTrendColor?: string;
+  bottomTrendColor?: string;
+};
+
+function SparkLine({
+  id,
+  title,
+  width = 300,
+  height = 80,
+  data,
+  xAxis,
+  yAxis,
+  row,
+  lineConfig,
+  sparkLineColor,
+  upTrendColor = yellowOrange,
+  bottomTrendColor = green,
+}: Props) {
+  const spec = {
+    title: {
+      text: title,
+    },
+    data: {
+      values: data,
+    },
+    facet: {
+      row,
+    },
+    spec: {
+      width,
+      height,
+      layer: [
+        // display the sparkline chart
+        {
+          mark: {
+            type: 'line',
+            ...lineConfig,
+          },
+          encoding: {
+            x: xAxis,
+            y: yAxis,
+            color: {
+              value: sparkLineColor,
+            },
+          },
+        }, // display the label to specify the max/min data
+        {
+          mark: {
+            type: 'text',
+            style: 'labelMin',
+            align: 'bottom',
+            dy: height / 2,
+            dx: width / 2 + 10,
+          },
+          encoding: {
+            text: {
+              aggregate: 'min',
+              field: 'y',
+              type: 'quantitative',
+            },
+          },
+        },
+        {
+          mark: {
+            type: 'text',
+            style: 'labelMax',
+            align: 'top',
+            dy: -(height / 2),
+            dx: width / 2 + 10,
+          },
+          encoding: {
+            text: {
+              aggregate: 'max',
+              field: 'y',
+              type: 'quantitative',
+            },
+          },
+        }, // display the up and bottom trend line
+        {
+          mark: {
+            type: 'rule',
+            style: 'ruleMaxEnd',
+            color: upTrendColor,
+          },
+          encoding: {
+            y: {
+              aggregate: 'max',
+              field: 'y',
+              type: 'quantitative',
+            },
+            x: {
+              value: width - 15,
+            },
+            x2: {
+              value: width,
+            },
+          },
+        },
+        {
+          mark: {
+            type: 'rule',
+            style: 'ruleMaxStart',
+            color: upTrendColor,
+            opacity: 0.1,
+          },
+          encoding: {
+            y: {
+              aggregate: 'max',
+              field: 'y',
+              type: 'quantitative',
+            },
+            x: {
+              value: 0,
+            },
+            x2: {
+              value: width - 15,
+            },
+          },
+        },
+        {
+          mark: {
+            type: 'rule',
+            style: 'ruleMinEnd',
+            color: bottomTrendColor,
+          },
+          encoding: {
+            y: {
+              value: height,
+            },
+            x: {
+              value: width - 15,
+            },
+            x2: {
+              value: width,
+            },
+          },
+        },
+        {
+          mark: {
+            type: 'rule',
+            style: 'ruleMinStart',
+            color: bottomTrendColor,
+            opacity: 0.1,
+          },
+          encoding: {
+            y: {
+              value: height,
+            },
+            x: {
+              value: 0,
+            },
+            x2: {
+              value: width - 15,
+            },
+          },
+        },
+      ],
+    },
+  };
+  return <VegaChart className="sc-sparkline" id={id} spec={spec}></VegaChart>;
+}
+
+export const Sparkline = SparkLine;

package/src/lib/components/statuswrapper/Statuswrapper.component.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+import { Status } from '../constants';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faQuestionCircle,
+  faExclamationCircle,
+  faTimesCircle,
+} from '@fortawesome/free-solid-svg-icons';
+const BadgeWrapper = styled.span`
+  height: fit-content;
+  width: fit-content;
+  position: relative;
+  margin-right: 0.5rem;
+  display: inline-block;
+`;
+const BadgeStyled = styled(FontAwesomeIcon)`
+  ${(props) => {
+    const theme = props.theme;
+    return css`
+      background: ${theme.backgroundLevel1};
+      border-radius: 50%;
+      color: ${theme.textSecondary};
+      position: absolute;
+      top: -25%;
+      right: -35%;
+      transform: scale(0.5);
+      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    `;
+  }}
+`;
+
+const getBadgeIcon = (status: Status) => {
+  switch (status) {
+    case 'warning':
+      return faExclamationCircle;
+
+    case 'critical':
+      return faTimesCircle;
+
+    case 'unknown':
+      return faQuestionCircle;
+
+    case 'healthy':
+    default:
+      return null;
+  }
+};
+
+type Props = {
+  status: Status;
+  children: React.ReactNode;
+};
+
+function StatusWrapper({ status, children }: Props) {
+  const icon = getBadgeIcon(status);
+  return (
+    <BadgeWrapper>
+      {children}
+      {icon !== null && <BadgeStyled icon={icon} />}
+    </BadgeWrapper>
+  );
+}
+
+export { StatusWrapper };

package/src/lib/components/steppers/Stepper.component.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+type MAXIMUM_DEPTH = 20;
+type GetResults<T> = T extends Step<infer Props> ? Step<Props> : never;
+type Length<T extends any[]> = T extends {
+  length: infer L;
+}
+  ? L
+  : never;
+type BuildTuple<L extends number, T extends any[] = []> = T extends {
+  length: L;
+}
+  ? T
+  : BuildTuple<L, [...T, any]>;
+export interface Step<T> {
+  label: string;
+  Component: (args: T) => ReactNode;
+}
+export type Steps<
+  T extends any[],
+  Result extends any[] = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? Step<unknown>[]
+  : T extends []
+  ? []
+  : T extends [infer Head]
+  ? [...Result, GetResults<Head>]
+  : T extends [infer Head, ...infer Tail]
+  ? Steps<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
+  : unknown[] extends T
+  ? T
+  : never;
+export type Add<A extends number, B extends number> = Length<
+  [...BuildTuple<A>, ...BuildTuple<B>]
+>;
+export type Subtract<
+  A extends number,
+  B extends number,
+> = BuildTuple<A> extends [...infer U, ...BuildTuple<B>] ? Length<U> : -1;
+export type ExctractProps<T> = T extends Step<infer Props> ? Props : never;
+
+declare global {
+  export declare type UseStepper = <
+    T extends any[],
+    StepIndex extends number,
+    NextIndex = Add<StepIndex, 1>,
+    PrevIndex = Subtract<StepIndex, 1>,
+  >(
+    index: StepIndex,
+    steps: readonly [...Steps<T>],
+  ) => (NextIndex extends number
+    ? {
+        next: (props: ExctractProps<T[NextIndex]>) => void;
+      }
+    : Record<string, unknown>) &
+    (PrevIndex extends -1
+      ? Record<string, unknown>
+      : PrevIndex extends number
+      ? {
+          prev: (props: ExctractProps<T[PrevIndex]>) => void;
+        }
+      : Record<string, unknown>);
+  export declare type Stepper = <T extends any[]>({
+    steps,
+  }: {
+    steps: readonly [...Steps<T>];
+  }) => JSX.Element;
+  export {};
+}
+//# sourceMappingURL=Stepper.component.d.ts.map

package/src/lib/components/steppers/Stepper.component.tsx

@@ -0,0 +1,62 @@
+/// <reference path="./Stepper.component.d.ts" />
+import { createContext, useContext, useState } from 'react';
+import { Steppers } from './Steppers.component';
+import { Box } from '../box/Box';
+export interface StepperContextType {
+  next: (props: Record<string, unknown>) => void;
+  prev: (props: Record<string, unknown>) => void;
+}
+declare global {
+  interface Window {
+    StepperContext: React.Context<StepperContextType | null>;
+  }
+}
+if (!window.StepperContext) {
+  window.StepperContext = createContext<StepperContextType | null>(null);
+}
+
+//@ts-ignore
+export const useStepper: UseStepper = (index, steps) => {
+  const context = useContext(window.StepperContext);
+
+  if (context === null) {
+    throw new Error('Cannot use useStepper outside of Stepper');
+  }
+  const { next, prev } = context;
+
+  return { next, prev };
+};
+
+export const Stepper: Stepper = ({ steps }) => {
+  const [stepProps, setStepProps] = useState<{
+    step: number;
+    props: Record<string, unknown>;
+  }>({ step: 0, props: {} });
+
+  const next = (props: Record<string, unknown>) => {
+    setStepProps({ step: stepProps.step + 1, props });
+  };
+
+  const prev = (props: Record<string, unknown>) => {
+    setStepProps({ step: stepProps.step - 1, props });
+  };
+
+  const { Component } = steps[stepProps.step];
+  const StepperContext = window.StepperContext;
+
+  return (
+    <StepperContext.Provider value={{ next, prev }}>
+      <Box display="flex" gap={32} flex={1} height="100%">
+        <Steppers
+          activeStep={stepProps.step}
+          steps={steps.map((step) => {
+            return {
+              title: step.label,
+            };
+          })}
+        />
+        <Component {...stepProps.props} />
+      </Box>
+    </StepperContext.Provider>
+  );
+};

package/src/lib/components/steppers/Steppers.component.tsx

@@ -0,0 +1,157 @@
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { gray, white } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+import { Loader } from '../loader/Loader.component';
+type StepProps = {
+  title: React.ReactNode;
+  content?: React.ReactNode;
+  active?: boolean;
+  completed?: boolean;
+  isLast?: boolean;
+  index?: number;
+  error?: boolean;
+  inProgress?: boolean;
+};
+type Props = {
+  steps: Array<StepProps>;
+  activeStep: number;
+};
+const SteppersContainer = styled.div`
+  padding-top: 4rem;
+  padding-left: 2rem;
+`;
+const StepContainer = styled.div`
+  display: flex;
+  min-height: 50px;
+  min-width: 20rem;
+`;
+const Panel = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const Circle = styled.div<{
+  error?: boolean;
+  completed?: boolean;
+  active?: boolean;
+}>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+
+  ${(props) => {
+    const { statusCritical, statusHealthy, selectedActive, buttonSecondary } =
+      props.theme;
+
+    if (props.error) {
+      return css`
+        background-color: ${statusCritical};
+        color: ${white};
+      `;
+    } else if (props.active) {
+      return css`
+        background-color: ${selectedActive};
+        color: ${white};
+        svg {
+          fill: ${white};
+        }
+      `;
+    } else if (props.completed) {
+      return css`
+        background-color: ${statusHealthy};
+        color: ${white};
+      `;
+    } else {
+      return css`
+        background-color: ${buttonSecondary};
+        color: ${white};
+      `;
+    }
+  }};
+`;
+const StepHeader = styled.span<{ active?: boolean }>`
+  padding: 8px;
+  color: ${(props) =>
+    props.active
+      ? getThemePropSelector('textPrimary')
+      : getThemePropSelector('textSecondary')};
+`;
+const StepContent = styled.div`
+  padding: ${spacing.r8};
+`;
+const BottomBar = styled.hr<{ completed?: boolean }>`
+  flex-grow: 1;
+  margin: 0;
+  border: none;
+  margin: 4px 14px;
+
+  ${(props) => {
+    if (props.completed) {
+      return css`
+        border-left: 2px solid ${props.theme.statusHealthy};
+      `;
+    } else {
+      return css`
+        border-left: 2px solid ${gray};
+      `;
+    }
+  }};
+`;
+
+function Step(props: StepProps) {
+  const {
+    title,
+    content,
+    active,
+    completed,
+    isLast,
+    index = 0,
+    error,
+    inProgress,
+  } = props;
+  const circleContent = completed ? <Icon name="Check" /> : index + 1;
+
+  return (
+    <StepContainer>
+      <Panel>
+        <Circle active={active} error={error} completed={completed}>
+          {active && inProgress ? (
+            <Loader size="base" />
+          ) : (
+            <span>{circleContent}</span>
+          )}
+        </Circle>
+        {!isLast && <BottomBar completed={completed} />}
+      </Panel>
+      <Panel>
+        <StepHeader active={active}>{title}</StepHeader>
+        {active && <StepContent>{content}</StepContent>}
+      </Panel>
+    </StepContainer>
+  );
+}
+
+function Steppers({ steps, activeStep, ...rest }: Props) {
+  return (
+    <SteppersContainer className="sc-steppers" {...rest}>
+      {steps.map(({ title, content, ...stepRest }, index) => (
+        <Step
+          key={index}
+          title={title}
+          content={content}
+          active={index === activeStep}
+          completed={index < activeStep}
+          isLast={index === steps.length - 1}
+          index={index}
+          {...stepRest}
+        />
+      ))}
+    </SteppersContainer>
+  );
+}
+
+export { Steppers };