@scality/core-ui 0.115.0

package/src/lib/components/layout/Layout.component.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Navbar } from '../navbar/Navbar.component';
+import { Props as NavbarProps } from '../navbar/Navbar.component';
+import { Props as SidebarProps } from '../sidebar/Sidebar.component';
+import { Sidebar } from '../sidebar/Sidebar.component';
+import { getThemePropSelector } from '../../utils';
+type Props = {
+  navbar?: NavbarProps;
+  sidebar?: SidebarProps;
+  navbarElement?: JSX.Element;
+  children: JSX.Element;
+};
+const LayoutContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+`;
+const MainContent = styled.div`
+  flex-grow: 1;
+  background-color: ${getThemePropSelector('backgroundLevel1')};
+`;
+
+function Layout({ children, sidebar, navbar, navbarElement, ...rest }: Props) {
+  return (
+    <LayoutContainer className="sc-layout" {...rest}>
+      {navbar && <Navbar {...navbar} />}
+      {!navbar &&
+        navbarElement !== undefined &&
+        navbarElement !== null &&
+        navbarElement}
+      <ContentContainer>
+        {sidebar && <Sidebar {...sidebar} />}
+        <MainContent className="main">{children}</MainContent>
+      </ContentContainer>
+    </LayoutContainer>
+  );
+}
+
+export { Layout };

package/src/lib/components/layout/v2/AppContainer.tsx

@@ -0,0 +1,160 @@
+import { ReactElement, ReactNode } from 'react';
+import styled from 'styled-components';
+import { spacing } from '../../../spacing';
+import { ThemeColors } from '../../../style/theme';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+`;
+
+const FillAvailableFlexBox = styled.div`
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+`;
+
+const sectionDistance = spacing.r2;
+
+const ContextWrapper = styled.div<{
+  background?: ThemeColors;
+}>`
+  background: ${(props) =>
+    props.background ? props.theme[props.background] : 'initial'};
+  height: 2.5rem;
+  min-height: 2.5rem;
+  max-height: 2.5rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+
+const ContextContainer = ({
+  children,
+  background,
+  ...rest
+}: {
+  background?: ThemeColors;
+  children: ReactElement | ReactElement[];
+}) => (
+  <ContextWrapper background={background}>
+    <FillAvailableFlexBox {...rest}>{children}</FillAvailableFlexBox>
+  </ContextWrapper>
+);
+
+const OverallSummaryContainer = styled.div<{
+  noPadding?: boolean;
+  hasTopMargin?: boolean;
+  noBottomMargin?: boolean;
+  background?: ThemeColors;
+}>`
+  background: ${(props) => props.theme[props.background || 'backgroundLevel2']};
+  height: 6rem;
+  padding: ${({ noPadding }) => (noPadding ? '0' : '0 1rem')};
+  margin-bottom: ${({ noBottomMargin }) =>
+    noBottomMargin ? '0' : sectionDistance};
+  margin-top: ${({ hasTopMargin }) => (hasTopMargin ? '1rem' : '0')};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`;
+
+const OverallSummary = ({
+  children,
+  noPadding,
+  noBottomMargin,
+  hasTopMargin,
+  background,
+  ...rest
+}: {
+  children: any;
+  noPadding?: boolean;
+  noBottomMargin?: boolean;
+  hasTopMargin?: boolean;
+  background?: ThemeColors;
+}) => (
+  <OverallSummaryContainer
+    background={background}
+    noPadding={noPadding}
+    noBottomMargin={noBottomMargin}
+    hasTopMargin={hasTopMargin}
+  >
+    <FillAvailableFlexBox {...rest}>{children}</FillAvailableFlexBox>
+  </OverallSummaryContainer>
+);
+
+const MainContentContainer = styled.div<{
+  hasPadding?: boolean;
+  hasTopMargin?: boolean;
+  background?: ThemeColors;
+}>`
+  display: flex;
+  flex: 1;
+  padding: ${(props) => (props.hasPadding ? '1rem' : 'initial')};
+  margin-top: ${({ hasTopMargin }) => (hasTopMargin ? '1rem' : '0')};
+  background: ${(props) => props.theme[props.background || 'backgroundLevel3']};
+  overflow: hidden;
+`;
+
+const MainContent = ({
+  children,
+  hasPadding,
+  background,
+  hasTopMargin,
+  ...rest
+}: {
+  children: ReactNode;
+  hasPadding?: boolean;
+  hasTopMargin?: boolean;
+  background?: ThemeColors;
+}) => (
+  <MainContentContainer
+    hasPadding={hasPadding}
+    hasTopMargin={hasTopMargin}
+    background={background}
+    {...rest}
+  >
+    {children}
+  </MainContentContainer>
+);
+const AppChildrenContainer = styled.div<{
+  hasPadding?: boolean;
+}>`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => (props.hasPadding ? '0 1rem' : 'initial')};
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+function AppContainer({
+  children,
+  sidebarNavigation,
+  hasPadding,
+  ...rest
+}: {
+  children: ReactElement | ReactElement[];
+  sidebarNavigation?: ReactElement;
+  hasPadding?: boolean;
+}) {
+  return (
+    <Container {...rest}>
+      {sidebarNavigation}
+      <AppChildrenContainer hasPadding={hasPadding}>
+        {children}
+      </AppChildrenContainer>
+    </Container>
+  );
+}
+
+AppContainer.ContextContainer = ContextContainer;
+AppContainer.OverallSummary = OverallSummary;
+AppContainer.MainContent = MainContent;
+AppContainer.sectionDistance = sectionDistance;
+
+export { AppContainer };

package/src/lib/components/layout/v2/index.tsx

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+import { navbarHeight } from '../../../style/theme';
+
+const LayoutContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  box-sizing: border-box;
+  background: ${(props) => props.theme['backgroundLevel1']};
+`;
+
+const Navigation = styled.div`
+  height: ${navbarHeight};
+`;
+
+export function Layout({
+  children: app,
+  headerNavigation,
+}: {
+  children: ReactElement | ReactElement[];
+  headerNavigation: ReactElement;
+}) {
+  return (
+    <LayoutContainer className="layout-container">
+      <Navigation>{headerNavigation}</Navigation>
+      {app}
+    </LayoutContainer>
+  );
+}

package/src/lib/components/layout/v2/panels.tsx

@@ -0,0 +1,105 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+import { ThemeColors } from '../../../style/theme';
+import { AppContainer } from './AppContainer';
+
+interface Ratio {
+  left: number;
+  right: number;
+}
+
+const ThirtySeventy: Ratio = {
+  left: 0.3,
+  right: 0.7,
+};
+
+const SixtyFiveThirtyFive: Ratio = {
+  left: 0.65,
+  right: 0.35,
+};
+
+// const SeventyThirty: Ratio = {
+//   left: 0.7,
+//   right: 0.3,
+// };
+
+const FiftyFifty: Ratio = {
+  left: 0.5,
+  right: 0.5,
+};
+
+const PanelsContainer = styled.div<{ noGap?: boolean }>`
+  display: flex;
+  flex: 1;
+  gap: ${({ noGap }) => (noGap ? 0 : AppContainer.sectionDistance)};
+`;
+
+const LeftPanel = styled.div<{
+  hasPadding?: boolean;
+  flex?: number;
+  background?: ThemeColors;
+}>`
+  flex: ${(props) => props.flex || '0 auto'};
+  background: ${(props) => props.theme[props.background || 'backgroundLevel3']};
+  display: flex;
+  min-width: 0;
+`;
+
+const RightPanel = styled.div<{
+  hasPadding?: boolean;
+  flex?: number;
+  background?: ThemeColors;
+}>`
+  flex: ${(props) => props.flex || '0 auto'};
+  background: ${(props) => props.theme[props.background || 'backgroundLevel4']};
+  display: flex;
+  min-width: 0;
+`;
+
+type RatioString = '50-50' | '65-35' | '30-70';
+
+function getPanelsObjectRation(ratio: RatioString) {
+  if (ratio === '50-50') {
+    return FiftyFifty;
+  }
+  if (ratio === '65-35') {
+    return SixtyFiveThirtyFive;
+  }
+  if (ratio === '30-70') {
+    return ThirtySeventy;
+  }
+
+  throw new Error('Unsupported ratio');
+}
+
+export const TwoPanelLayout = ({
+  panelsRatio,
+  leftPanel,
+  rightPanel,
+  noGap,
+  ...rest
+}: {
+  panelsRatio: RatioString;
+  leftPanel: { children: ReactElement; background?: ThemeColors };
+  rightPanel: { children: ReactElement; background?: ThemeColors };
+  noGap?: boolean;
+}) => {
+  const panelsObjectRatio = getPanelsObjectRation(panelsRatio);
+
+  return (
+    <PanelsContainer noGap={noGap} {...rest}>
+      <LeftPanel
+        flex={panelsObjectRatio.left}
+        background={leftPanel.background}
+      >
+        {leftPanel.children}
+      </LeftPanel>
+      <RightPanel
+        flex={panelsObjectRatio.right}
+        background={rightPanel.background}
+      >
+        {rightPanel.children}
+      </RightPanel>
+    </PanelsContainer>
+  );
+};

package/src/lib/components/linechart/LineChart.component.tsx

@@ -0,0 +1,152 @@
+// @ts-nocheck
+import { $PropertyType } from 'utility-types';
+import { VegaChart } from '../vegachart/VegaChart.component';
+import type { Encoding, Field } from 'vega-lite';
+type Props = {
+  id: string;
+  data: Array<Record<string, any>>;
+  xAxis: Record<string, any>;
+  yAxis: Array<Record<string, any>>;
+  color?: Record<string, any>;
+  tooltip?: boolean;
+  lineConfig?: Record<string, any>;
+  width?: number;
+  height?: number;
+  displayTrendLine?: boolean;
+  strokeDashEncodingConfig?: $PropertyType<Encoding<Field>, 'strokeDash'>;
+  opacityEncodingConfig?: $PropertyType<Encoding<Field>, 'opacity'>;
+  tooltipConfig?: $PropertyType<Encoding<Field>, 'tooltip'>;
+  tooltipTheme?: 'light' | 'dark' | 'custom';
+};
+
+function LineChart({
+  id,
+  data,
+  xAxis,
+  yAxis,
+  color,
+  tooltip = false,
+  lineConfig,
+  height = 300,
+  width = 1000,
+  displayTrendLine = false,
+  strokeDashEncodingConfig,
+  opacityEncodingConfig,
+  tooltipConfig,
+  tooltipTheme,
+  ...rest
+}: Props) {
+  // hardcode the trendline configuration for tooltip
+  const trendline = {
+    mark: 'rule',
+    selection: {
+      index: {
+        type: 'single',
+        on: 'mousemove',
+        encodings: ['x'],
+        nearest: true,
+      },
+    },
+    encoding: {
+      color: {
+        condition: {
+          selection: {
+            not: 'index',
+          },
+          value: 'transparent',
+        },
+      },
+    },
+  };
+
+  /*
+   ** strokeDash encoding allows to define a field in data items that defines the line stroke dash property
+   ** this would allow to get same color lines but having some dashed and some plains
+   ** https://vega.github.io/vega-lite/docs/line.html#multi-series-line-chart-with-varying-dashes
+   */
+
+  /*
+   ** opacity Encoding allows to define rules for each line's opacity
+   */
+  const lines = yAxis.map((y) => ({
+    mark: {
+      type: 'line',
+      ...lineConfig,
+    },
+    encoding: {
+      y,
+      strokeDash: strokeDashEncodingConfig,
+      opacity: opacityEncodingConfig,
+    },
+  }));
+  const currentTimeTrendline = {
+    mark: {
+      type: 'rule',
+      style: 'ruleCurrentTime',
+      color: 'white',
+      opacity: 0.2,
+    },
+    encoding: {
+      x: {
+        value: width / 2,
+      },
+      y: {
+        value: height,
+      },
+      y2: {
+        value: 0,
+      },
+    },
+  };
+  const topTrendline = {
+    mark: {
+      type: 'rule',
+      style: 'ruleTop',
+      color: 'orange',
+      opacity: 0.2,
+    },
+    encoding: {
+      y: {
+        aggregate: 'max',
+        field: 'capacity',
+        type: 'quantitative',
+      },
+      x: {
+        value: 0,
+      },
+      x2: {
+        value: width,
+      },
+    },
+  };
+  const spec = {
+    data: {
+      values: data,
+    },
+    encoding: {
+      x: xAxis,
+      color,
+      // To disable tooltips for a particular single view specification, you can set the "tooltip" property of a mark definition block to null.
+      tooltip: tooltip ? [xAxis, ...yAxis] : null,
+    },
+    height,
+    width,
+    layer: [...lines],
+    ...rest,
+  };
+
+  if (tooltip) {
+    spec.layer.push(tooltipConfig || trendline);
+  }
+
+  if (displayTrendLine) {
+    spec.layer.push(currentTimeTrendline);
+    spec.layer.push(topTrendline);
+  }
+
+  return (
+    <VegaChart id={id} spec={spec} theme={tooltipTheme || 'light'}></VegaChart>
+  );
+}
+
+export { LineChart };