@scality/core-ui 0.115.0

package/dist/components/inputv2/inputv2.d.ts

@@ -0,0 +1,12 @@
+import { InputHTMLAttributes } from 'react';
+export declare const convertSizeToRem: (size?: '1' | '2/3' | '1/2' | '1/3') => "14rem" | "6rem" | "10rem" | "20.5rem";
+type InputSize = '1' | '2/3' | '1/2' | '1/3';
+export declare const Input: import("react").ForwardRefExoticComponent<{
+    error?: string | undefined;
+    id: string;
+    leftIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | undefined;
+    rightIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | undefined;
+    size?: InputSize | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=inputv2.d.ts.map

package/dist/components/inputv2/inputv2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAQxD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AA4EF,KAAK,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAU7C,eAAO,MAAM,KAAK;;QANZ,MAAM;;;;0GA6DX,CAAC"}

package/dist/components/inputv2/inputv2.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { Box } from '../box/Box';
+import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
+import { Icon } from '../icon/Icon.component';
+export const convertSizeToRem = (size) => {
+    if (size === '2/3')
+        return '14rem';
+    else if (size === '1/3')
+        return '6rem';
+    else if (size === '1/2')
+        return '10rem';
+    else
+        return '20.5rem';
+};
+const StyledInput = styled.input `
+  max-width: 100%;
+  font-family: 'Lato';
+  ${(props) => props.disabled &&
+    `
+  cursor: not-allowed;
+  `}
+  background: ${(props) => props.theme.backgroundLevel1};
+  font-size: 1rem;
+  color: ${(props) => props.theme.textPrimary};
+  border: 0;
+  flex: 1;
+  border-radius: ${spacing.r4};
+  line-height: ${spacing.r20};
+  &:placeholder-shown {
+    font-style: italic;
+  }
+  &::placeholder {
+    color: ${(props) => props.theme.textSecondary};
+    opacity: 0.5;
+  }
+  &:focus {
+    border: 0;
+    outline: none;
+  }
+`;
+const InputContainer = styled.div `
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 ${spacing.r8} 0 ${spacing.r8};
+  background: ${(props) => props.theme.backgroundLevel1};
+  border-radius: ${spacing.r4};
+  ${(props) => props.isContextAvailable &&
+    props.disabled &&
+    `
+  opacity: 0.5;
+  cursor: not-allowed;
+  `}
+`;
+const InputBorder = styled.div `
+  box-sizing: border-box;
+  width: ${(props) => props.width};
+  height: ${spacing.r32};
+  border: ${spacing.r1} solid
+    ${(props) => props.hasError ? props.theme.statusCritical : props.theme.border};
+  border-radius: ${spacing.r4};
+  &:hover {
+    ${(props) => !props.disabled &&
+    `border: ${spacing.r1} solid ${props.theme.infoPrimary};`}
+  }
+  &:focus-within {
+    border: ${spacing.r1} solid ${(props) => props.theme.infoPrimary};
+  }
+`;
+const SelfCenterredIcon = styled(Icon) `
+  align-self: center;
+`;
+export const Input = forwardRef(({ error, disabled, id, leftIcon, rightIcon, placeholder, size, ...inputProps }, ref) => {
+    const { isContextAvailable, disabled: disabledFromFieldContext, error: errorFromFieldContext, } = useFieldContext();
+    placeholder = placeholder ? `Example: ${placeholder}` : undefined;
+    return (_jsx(InputBorder, { disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), width: convertSizeToRem(size), children: _jsx(InputContainer, { isContextAvailable: isContextAvailable, disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), children: _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', width: "100%", gap: spacing['f8'], children: [leftIcon && _jsx(SelfCenterredIcon, { name: leftIcon }), _jsx(StyledInput, { ref: ref, disabled: disabled || disabledFromFieldContext, "aria-invalid": !!(error || errorFromFieldContext), "aria-describedby": `${DESCRIPTION_PREFIX}${id}`, id: id, ...inputProps, placeholder: placeholder }), rightIcon && _jsx(SelfCenterredIcon, { name: rightIcon })] }) }) }));
+});

package/dist/components/lateralnavbarlayout/LateralNavbarLayout.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Props as SidebarProps } from '../sidebar/Sidebar.component';
+type Props = {
+    sidebar: SidebarProps;
+    children: JSX.Element;
+};
+declare function LateralNavbarLayout({ children, sidebar, ...rest }: Props): JSX.Element;
+export { LateralNavbarLayout };
+//# sourceMappingURL=LateralNavbarLayout.component.d.ts.map

package/dist/components/lateralnavbarlayout/LateralNavbarLayout.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LateralNavbarLayout.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/lateralnavbarlayout/LateralNavbarLayout.component.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAiBF,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eASjE;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/lateralnavbarlayout/LateralNavbarLayout.component.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Sidebar } from '../sidebar/Sidebar.component';
+import { getThemePropSelector } from '../../utils';
+const LateralNavbarLayoutContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+`;
+const ContentContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+`;
+const MainContent = styled.div `
+  flex-grow: 1;
+  background-color: ${getThemePropSelector('backgroundLevel1')};
+`;
+function LateralNavbarLayout({ children, sidebar, ...rest }) {
+    return (_jsx(LateralNavbarLayoutContainer, { className: "sc-lateralnavbarlayout", ...rest, children: _jsxs(ContentContainer, { children: [sidebar && _jsx(Sidebar, { ...sidebar }), _jsx(MainContent, { className: "main", children: children })] }) }));
+}
+export { LateralNavbarLayout };

package/dist/components/layout/Layout.component.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Props as NavbarProps } from '../navbar/Navbar.component';
+import { Props as SidebarProps } from '../sidebar/Sidebar.component';
+type Props = {
+    navbar?: NavbarProps;
+    sidebar?: SidebarProps;
+    navbarElement?: JSX.Element;
+    children: JSX.Element;
+};
+declare function Layout({ children, sidebar, navbar, navbarElement, ...rest }: Props): JSX.Element;
+export { Layout };
+//# sourceMappingURL=Layout.component.d.ts.map

package/dist/components/layout/Layout.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/Layout.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAgBF,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAc3E;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/layout/Layout.component.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Navbar } from '../navbar/Navbar.component';
+import { Sidebar } from '../sidebar/Sidebar.component';
+import { getThemePropSelector } from '../../utils';
+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 }) {
+    return (_jsxs(LayoutContainer, { className: "sc-layout", ...rest, children: [navbar && _jsx(Navbar, { ...navbar }), !navbar &&
+                navbarElement !== undefined &&
+                navbarElement !== null &&
+                navbarElement, _jsxs(ContentContainer, { children: [sidebar && _jsx(Sidebar, { ...sidebar }), _jsx(MainContent, { className: "main", children: children })] })] }));
+}
+export { Layout };

package/dist/components/layout/v2/AppContainer.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode } from 'react';
+declare function AppContainer({ children, sidebarNavigation, hasPadding, ...rest }: {
+    children: ReactElement | ReactElement[];
+    sidebarNavigation?: ReactElement;
+    hasPadding?: boolean;
+}): JSX.Element;
+declare namespace AppContainer {
+    var ContextContainer: ({ children, background, ...rest }: {
+        background?: keyof import("../../../style/theme").CoreUITheme | undefined;
+        children: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+    }) => JSX.Element;
+    var OverallSummary: ({ children, noPadding, noBottomMargin, hasTopMargin, background, ...rest }: {
+        children: any;
+        noPadding?: boolean | undefined;
+        noBottomMargin?: boolean | undefined;
+        hasTopMargin?: boolean | undefined;
+        background?: keyof import("../../../style/theme").CoreUITheme | undefined;
+    }) => JSX.Element;
+    var MainContent: ({ children, hasPadding, background, hasTopMargin, ...rest }: {
+        children: ReactNode;
+        hasPadding?: boolean | undefined;
+        hasTopMargin?: boolean | undefined;
+        background?: keyof import("../../../style/theme").CoreUITheme | undefined;
+    }) => JSX.Element;
+    var sectionDistance: string;
+}
+export { AppContainer };
+//# sourceMappingURL=AppContainer.d.ts.map

package/dist/components/layout/v2/AppContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/AppContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsIhD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,eASA;kBAlBQ,YAAY;;;;;;;;;;;;;;;;;;;;AAyBrB,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/layout/v2/AppContainer.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { spacing } from '../../../spacing';
+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: ${(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 }) => (_jsx(ContextWrapper, { background: background, children: _jsx(FillAvailableFlexBox, { ...rest, children: children }) }));
+const OverallSummaryContainer = styled.div `
+  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 }) => (_jsx(OverallSummaryContainer, { background: background, noPadding: noPadding, noBottomMargin: noBottomMargin, hasTopMargin: hasTopMargin, children: _jsx(FillAvailableFlexBox, { ...rest, children: children }) }));
+const MainContentContainer = styled.div `
+  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 }) => (_jsx(MainContentContainer, { hasPadding: hasPadding, hasTopMargin: hasTopMargin, background: background, ...rest, children: children }));
+const AppChildrenContainer = styled.div `
+  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 }) {
+    return (_jsxs(Container, { ...rest, children: [sidebarNavigation, _jsx(AppChildrenContainer, { hasPadding: hasPadding, children: children })] }));
+}
+AppContainer.ContextContainer = ContextContainer;
+AppContainer.OverallSummary = OverallSummary;
+AppContainer.MainContent = MainContent;
+AppContainer.sectionDistance = sectionDistance;
+export { AppContainer };

package/dist/components/layout/v2/index.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+export declare function Layout({ children: app, headerNavigation, }: {
+    children: ReactElement | ReactElement[];
+    headerNavigation: ReactElement;
+}): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/v2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBrC,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EAAE,GAAG,EACb,gBAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,gBAAgB,EAAE,YAAY,CAAC;CAChC,eAOA"}

package/dist/components/layout/v2/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) {
+    return (_jsxs(LayoutContainer, { className: "layout-container", children: [_jsx(Navigation, { children: headerNavigation }), app] }));
+}

package/dist/components/layout/v2/panels.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { ThemeColors } from '../../../style/theme';
+type RatioString = '50-50' | '65-35' | '30-70';
+export declare const TwoPanelLayout: ({ panelsRatio, leftPanel, rightPanel, noGap, ...rest }: {
+    panelsRatio: RatioString;
+    leftPanel: {
+        children: ReactElement;
+        background?: ThemeColors;
+    };
+    rightPanel: {
+        children: ReactElement;
+        background?: ThemeColors;
+    };
+    noGap?: boolean | undefined;
+}) => JSX.Element;
+export {};
+//# sourceMappingURL=panels.d.ts.map

package/dist/components/layout/v2/panels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/panels.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAwDnD,KAAK,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAgB/C,eAAO,MAAM,cAAc;iBAOZ,WAAW;eACb;QAAE,QAAQ,EAAE,YAAY,CAAC;QAAC,UAAU,CAAC,EAAE,WAAW,CAAA;KAAE;gBACnD;QAAE,QAAQ,EAAE,YAAY,CAAC;QAAC,UAAU,CAAC,EAAE,WAAW,CAAA;KAAE;;iBAqBjE,CAAC"}

package/dist/components/layout/v2/panels.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { AppContainer } from './AppContainer';
+const ThirtySeventy = {
+    left: 0.3,
+    right: 0.7,
+};
+const SixtyFiveThirtyFive = {
+    left: 0.65,
+    right: 0.35,
+};
+// const SeventyThirty: Ratio = {
+//   left: 0.7,
+//   right: 0.3,
+// };
+const FiftyFifty = {
+    left: 0.5,
+    right: 0.5,
+};
+const PanelsContainer = styled.div `
+  display: flex;
+  flex: 1;
+  gap: ${({ noGap }) => (noGap ? 0 : AppContainer.sectionDistance)};
+`;
+const LeftPanel = styled.div `
+  flex: ${(props) => props.flex || '0 auto'};
+  background: ${(props) => props.theme[props.background || 'backgroundLevel3']};
+  display: flex;
+  min-width: 0;
+`;
+const RightPanel = styled.div `
+  flex: ${(props) => props.flex || '0 auto'};
+  background: ${(props) => props.theme[props.background || 'backgroundLevel4']};
+  display: flex;
+  min-width: 0;
+`;
+function getPanelsObjectRation(ratio) {
+    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 }) => {
+    const panelsObjectRatio = getPanelsObjectRation(panelsRatio);
+    return (_jsxs(PanelsContainer, { noGap: noGap, ...rest, children: [_jsx(LeftPanel, { flex: panelsObjectRatio.left, background: leftPanel.background, children: leftPanel.children }), _jsx(RightPanel, { flex: panelsObjectRatio.right, background: rightPanel.background, children: rightPanel.children })] }));
+};

package/dist/components/linechart/LineChart.component.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { $PropertyType } from 'utility-types';
+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';
+};
+declare function LineChart({ id, data, xAxis, yAxis, color, tooltip, lineConfig, height, width, displayTrendLine, strokeDashEncodingConfig, opacityEncodingConfig, tooltipConfig, tooltipTheme, ...rest }: Props): JSX.Element;
+export { LineChart };
+//# sourceMappingURL=LineChart.component.d.ts.map

package/dist/components/linechart/LineChart.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linechart/LineChart.component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACjD,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wBAAwB,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC;IACxE,qBAAqB,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC5C,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAe,EACf,UAAU,EACV,MAAY,EACZ,KAAY,EACZ,gBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,eAgHP;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/linechart/LineChart.component.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VegaChart } from '../vegachart/VegaChart.component';
+function LineChart({ id, data, xAxis, yAxis, color, tooltip = false, lineConfig, height = 300, width = 1000, displayTrendLine = false, strokeDashEncodingConfig, opacityEncodingConfig, tooltipConfig, tooltipTheme, ...rest }) {
+    // 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 (_jsx(VegaChart, { id: id, spec: spec, theme: tooltipTheme || 'light' }));
+}
+export { LineChart };

package/dist/components/linetemporalchart/ChartUtil.d.ts

@@ -0,0 +1,40 @@
+import { Serie } from './LineTemporalChart.component';
+import './LineTemporalChart.component';
+export type VegaData = {
+    timestamp: number;
+    label: string;
+    value: number | 'NAN';
+    isNegativeValue: boolean;
+    isDashed: boolean;
+}[];
+export declare function normlizeVegaFieldName(fieldName: string): string;
+export declare function convert2VegaData(addedMissingDataPointSeries: Serie[]): VegaData;
+export declare function convertDataBaseValue(data: VegaData, base: number): VegaData;
+/**
+ * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
+ * @param {any} unitRange
+ * @param {any} maxValue the maximum value among the data set
+ * @returns {any}
+ */
+export declare function getUnitLabel(unitRange: {
+    threshold: number;
+    label: string;
+}[], maxValue: number): {
+    valueBase: number;
+    unitLabel: string;
+};
+/**
+ * This function manually adds the missing data points with `null` value caused by downtime of the VMs
+ *
+ * @param {array} orginalValues - The array of the data points are already sorted according to the time series
+ * @param {number} startingTimeStamp - The starting timestamp in seconds
+ * @param {number} sampleDuration - The time span value in seconds
+ * @param {number} sampleFrequency - The time difference between two data points in seconds
+ *
+ */
+export declare function addMissingDataPoint(orginalValues: [number, string | null][], startingTimeStamp: number, sampleDuration: number, sampleFrequency: number): [number, string | null][];
+export declare const getRelativeValue: (value: number, base: number) => number;
+export declare const relativeDatumToOriginalDatum: <T>(datum: T, base: number) => T;
+export declare const getAbsoluteValue: (relativeValue: number, base: number) => number;
+export declare const getColorDomains: (series: Serie[]) => string[];
+//# sourceMappingURL=ChartUtil.d.ts.map

package/dist/components/linetemporalchart/ChartUtil.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAkCA;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,EACxC,iBAAiB,EAAE,MAAM,EACzB,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAsC3B;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,sBAAuB,MAAM,MAQrE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}