@lunit/oui 1.3.0 → 2.0.0

package/dist/presentations/Statistic/Statistic.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Container, HorizontalStatisticContainer, VerticalStatisticContainer, } from './Statistic.styled';
+import { PresentationSymbolIcon, PresentationTypography } from '../presentations.styled';
+const Statistic = ({ componentType = 'statistic', title, layout = 'vertical', metrics = '', size = 'medium', symbol, color, ...rest }) => {
+    return (_jsx(Container, { ...rest, sx: { width: '100%' }, children: layout === 'horizontal' ? (_jsxs(HorizontalStatisticContainer, { children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '6px',
+                    }, children: [symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color })), _jsx(PresentationTypography, { size: size, children: title })] }), _jsx(PresentationTypography, { size: size, children: metrics })] })) : (_jsx(VerticalStatisticContainer, { title: title, metrics: metrics })) }));
+};
+export default Statistic;

package/dist/presentations/Statistic/Statistic.styled.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const HorizontalStatisticContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const VerticalStatisticContainer: ({ title, metrics, }: {
+    title: string;
+    metrics: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/presentations/Statistic/Statistic.styled.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, styled, Typography } from '@mui/material';
+import theme from '../../theme';
+export const Container = styled(Box)(({ theme }) => ({
+    display: 'flex',
+}));
+export const HorizontalStatisticContainer = styled(Box)({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '6px',
+    width: '100%',
+});
+export const VerticalStatisticContainer = ({ title, metrics, }) => {
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '6px' }, children: [_jsx(Typography, { variant: "body8", color: theme.palette.neutralGrey[40], children: title }), _jsx(Typography, { variant: "body5", color: theme.palette.neutralGrey[0], children: metrics })] }));
+};

package/dist/presentations/Statistic/Statistic.types.d.ts

@@ -0,0 +1,11 @@
+import { BoxProps } from '@mui/material';
+import { PresentationSymbolProps } from '../presentations.types';
+export interface StatisticProps extends BoxProps {
+    componentType: 'statistic';
+    title: string;
+    layout?: 'horizontal' | 'vertical';
+    metrics?: string;
+    size?: 'small-dimmed' | 'small' | 'small-bold' | 'medium' | 'medium-bold' | 'large-bold';
+    symbol?: PresentationSymbolProps['symbol'];
+    color?: string;
+}

package/dist/presentations/Statistic/Statistic.types.js

@@ -0,0 +1 @@
+export {};

package/dist/presentations/Statistic/index.d.ts

@@ -0,0 +1,4 @@
+import Statistic from './Statistic';
+import type { StatisticProps } from './Statistic.types';
+export { Statistic };
+export type { StatisticProps };

package/dist/presentations/Statistic/index.js

@@ -0,0 +1,2 @@
+import Statistic from './Statistic';
+export { Statistic };

package/dist/presentations/ToggleControl/ToggleControl.d.ts

@@ -0,0 +1,3 @@
+import type { ToggleControlProps } from './ToggleControl.types';
+declare const ToggleControl: ({ componentType, title, size, symbol, tooltip, color, isParent, disabled, bar, checked, isDimmed, onChange, }: ToggleControlProps) => import("react/jsx-runtime").JSX.Element;
+export default ToggleControl;

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { v4 as uuidV4 } from 'uuid';
+import { Box } from '@mui/material';
+import { ToggleControlContainer, ToggleControlOuter } from './ToggleControl.styled';
+import { AnalysisBar } from '../AnalysisBar';
+import { StyledToggle } from '../../components/Toggle/Toggle.styled';
+import { PresentationSymbolIcon, PresentationTypography } from '../presentations.styled';
+import { FreeText } from '../FreeText';
+import { Statistic } from '../Statistic';
+import { Tooltip } from '../../components';
+import { Information } from '../../icons';
+import theme from '../../theme';
+const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], color, isParent = false, disabled = false, bar, checked, isDimmed = false, onChange, }) => {
+    const handleChange = (event) => {
+        onChange && onChange(event);
+    };
+    return (_jsxs(ToggleControlOuter, { "data-toggle-name": `toggle-control-${title?.replace(/\s/g, '-')}`, hasBar: !!bar, style: { marginBottom: isParent ? '4px' : '0' }, children: [_jsxs(ToggleControlContainer, { className: "toggle-inner-container", size: size, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '6px' }, className: "toggle-label", children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                    }, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, sx: { color: checked && !isDimmed ? 'inherit' : theme.palette.neutralGrey[65] }, children: title })] }), _jsx(StyledToggle, { disabled: disabled, checked: checked, onChange: handleChange })] }), bar && (_jsx(Box, { sx: { paddingRight: '16px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, caption: bar.caption, segments: bar.segments }) }))] }));
+};
+export default ToggleControl;

package/dist/presentations/ToggleControl/ToggleControl.styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PresentationElementSize } from '../presentations.types';
+interface ToggleControlContainerProps {
+    size?: PresentationElementSize;
+    isGrouped?: boolean;
+}
+export declare const ToggleControlOuter: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    hasBar: boolean;
+}, {}, {}>;
+export declare const ToggleControlContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleControlContainerProps, {}, {}>;
+export {};

package/dist/presentations/ToggleControl/ToggleControl.styled.js

@@ -0,0 +1,27 @@
+import { Box, styled } from '@mui/material';
+const getPadding = (size) => {
+    if (size === 'large-bold') {
+        return '14px 16px 14px 0';
+    }
+    return '0 16px 0 0';
+};
+export const ToggleControlOuter = styled(Box, { shouldForwardProp: (prop) => prop !== 'hasBar' })(({ hasBar }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: hasBar ? '10px' : '8px',
+    width: '100%',
+    height: hasBar ? 'auto' : '20px',
+}));
+export const ToggleControlContainer = styled(Box, {
+    shouldForwardProp: (prop) => !['size'].includes(prop.toString()),
+})(({ size }) => {
+    return {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: '34px',
+        padding: getPadding(size),
+        alignItems: 'center',
+    };
+});

package/dist/presentations/ToggleControl/ToggleControl.types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { FreeTextProps } from '../FreeText';
+import type { AnalysisBarProps } from '../AnalysisBar';
+import type { PresentationElementSize, PresentationSymbol } from '../presentations.types';
+import { StatisticProps } from '../Statistic';
+export interface ToggleControlSpec {
+    componentType: 'toggle';
+    title: string;
+    size?: PresentationElementSize;
+    symbol?: PresentationSymbol;
+    color?: string;
+    checked: boolean;
+    tooltip?: (StatisticProps | FreeTextProps)[];
+    bar?: AnalysisBarProps;
+}
+export interface ToggleControlProps extends ToggleControlSpec {
+    isParent?: boolean;
+    isDimmed?: boolean;
+    disabled?: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/presentations/ToggleControl/ToggleControl.types.js

@@ -0,0 +1 @@
+export {};

package/dist/presentations/ToggleControl/index.d.ts

@@ -0,0 +1,4 @@
+import ToggleControl from './ToggleControl';
+import type { ToggleControlProps, ToggleControlSpec } from './ToggleControl.types';
+export { ToggleControl };
+export type { ToggleControlProps, ToggleControlSpec };

package/dist/presentations/ToggleControl/index.js

@@ -0,0 +1,2 @@
+import ToggleControl from './ToggleControl';
+export { ToggleControl };

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.d.ts

@@ -0,0 +1,3 @@
+import type { ToggleControlGroupProps } from './ToggleControlGroup.types';
+declare const ToggleControlGroup: ({ componentType, size, title, tooltip, bar, childToggles, disabled, checked, behavior, onChange, }: ToggleControlGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default ToggleControlGroup;

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+import { filter as _filter } from 'lodash';
+import { ToggleControlGroupContainer } from './ToggleControlGroup.styled';
+import ToggleControl from '../ToggleControl/ToggleControl';
+const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', title, tooltip = [], bar, childToggles, disabled, checked, behavior = 'multi', onChange, }) => {
+    const [toggleChecked, setToggleChecked] = useState(checked || _filter(childToggles, (child) => child.checked).length > 0);
+    const [childrenChecked, setChildrenChecked] = useState(childToggles?.map((child) => child.checked) || []);
+    const handleToggleChange = (event) => {
+        setToggleChecked(!toggleChecked);
+        onChange(event);
+    };
+    const handleMultiChange = (index) => {
+        const newState = [...childrenChecked];
+        newState[index] = !newState[index];
+        setChildrenChecked(newState);
+    };
+    const handleExclusiveChange = (index, event) => {
+        const newState = Array(childrenChecked.length).fill(false);
+        setChildrenChecked(newState);
+        newState[index] = event.target.checked;
+        setChildrenChecked(newState);
+    };
+    return (_jsxs(ToggleControlGroupContainer, { children: [_jsx(ToggleControl, { isParent: true, componentType: "toggle", bar: bar, disabled: disabled, size: size, title: title, tooltip: tooltip, checked: toggleChecked, onChange: handleToggleChange }), childToggles?.map((child, index) => {
+                return (_jsx(ToggleControl, { componentType: "toggle", title: child.title, size: size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: !toggleChecked, checked: childrenChecked[index], disabled: !toggleChecked, onChange: (event) => {
+                        behavior === 'multi' ? handleMultiChange(index) : handleExclusiveChange(index, event);
+                        child.onChange(event);
+                    } }, uuidV4()));
+            })] }));
+};
+export default ToggleControlGroup;

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ToggleControlGroupContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.styled.js

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material';
+export const ToggleControlGroupContainer = styled(Box)(() => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: '8px',
+    };
+});

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { AnalysisBarProps } from '../AnalysisBar';
+import { FreeTextProps } from '../FreeText';
+import type { PresentationElementSize } from '../presentations.types';
+import { StatisticProps } from '../Statistic';
+import type { ToggleControlProps } from '../ToggleControl';
+export type ToggleControlGroupBehavior = 'exclusive' | 'multi';
+export interface ToggleGroupControlSpec {
+    componentType: 'toggleGroup';
+    title: string;
+    behavior?: ToggleControlGroupBehavior;
+    size?: PresentationElementSize;
+    tooltip?: (StatisticProps | FreeTextProps)[];
+    bar?: AnalysisBarProps;
+    checked: boolean;
+    childToggles: ToggleControlProps[];
+}
+export interface ToggleControlGroupProps extends ToggleGroupControlSpec {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+}

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.types.js

@@ -0,0 +1 @@
+export {};

package/dist/presentations/ToggleControlGroup/index.d.ts

@@ -0,0 +1,2 @@
+import ToggleControlGroup from './ToggleControlGroup';
+export { ToggleControlGroup };

package/dist/presentations/ToggleControlGroup/index.js

@@ -0,0 +1,2 @@
+import ToggleControlGroup from './ToggleControlGroup';
+export { ToggleControlGroup };

package/dist/presentations/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Accordion';
+export * from './AnalysisBar';
+export * from './FreeText';
+export * from './Histogram';
+export * from './HorizonDivider';
+export * from './Score';
+export * from './Statistic';
+export * from './ToggleControl';
+export * from './ToggleControlGroup';

package/dist/presentations/index.js

@@ -0,0 +1,9 @@
+export * from './Accordion';
+export * from './AnalysisBar';
+export * from './FreeText';
+export * from './Histogram';
+export * from './HorizonDivider';
+export * from './Score';
+export * from './Statistic';
+export * from './ToggleControl';
+export * from './ToggleControlGroup';

package/dist/presentations/presentations.styled.d.ts

@@ -0,0 +1,3 @@
+import type { PresentationSymbolProps, PresentationTypographyProps } from './presentations.types';
+export declare const PresentationTypography: (props: PresentationTypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PresentationSymbolIcon: ({ symbol, color, isDimmed, }: PresentationSymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/presentations/presentations.styled.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import theme from '../theme';
+export const PresentationTypography = (props) => {
+    const { size, ...rest } = props;
+    if (size === 'small-dimmed') {
+        return (_jsx(Typography, { variant: "body_m2", sx: { color: theme.palette.neutralGrey[40] }, ...rest }));
+    }
+    if (size === 'small') {
+        return (_jsx(Typography, { variant: "body8", ...rest }));
+    }
+    if (size === 'small-bold') {
+        return (_jsx(Typography, { variant: "body8", sx: { fontWeight: 'bold' }, ...rest }));
+    }
+    if (size === 'medium') {
+        return (_jsx(Typography, { variant: "body5", ...rest }));
+    }
+    if (size === 'medium-bold') {
+        return (_jsx(Typography, { variant: "body_b1", ...rest }));
+    }
+    if (size === 'large-bold') {
+        return (_jsx(Typography, { variant: "h9", ...rest }));
+    }
+    return _jsx(Typography, { ...rest });
+};
+export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = false, }) => {
+    if (symbol === 'circle') {
+        return (_jsx("div", { style: {
+                height: '100%',
+                width: '10px',
+                display: 'flex',
+                opacity: isDimmed ? 0.5 : 1,
+            }, children: _jsx("span", { style: {
+                    height: '6px',
+                    width: '6px',
+                    backgroundColor: color,
+                    borderRadius: '50%',
+                    border: '1px solid black',
+                } }) }));
+    }
+    if (symbol === 'rectangle') {
+        return (_jsx("div", { style: {
+                height: '100%',
+                width: '10px',
+                display: 'flex',
+                opacity: isDimmed ? 0.5 : 1,
+            }, children: _jsx("span", { style: {
+                    height: '10px',
+                    width: '10px',
+                    backgroundColor: color,
+                } }) }));
+    }
+    if (symbol === 'border-circle') {
+        return (_jsx("div", { style: {
+                height: '100%',
+                width: '10px',
+                display: 'flex',
+                opacity: isDimmed ? 0.5 : 1,
+            }, children: _jsx("span", { style: {
+                    height: '10px',
+                    width: '10px',
+                    backgroundColor: color,
+                    borderRadius: '50%',
+                    border: '1px solid black',
+                } }) }));
+    }
+    if (symbol === 'border-rectangle') {
+        return (_jsx("div", { style: {
+                height: '100%',
+                width: '10px',
+                display: 'flex',
+                opacity: isDimmed ? 0.5 : 1,
+            }, children: _jsx("span", { style: {
+                    height: '10px',
+                    width: '10px',
+                    backgroundColor: color,
+                    border: '1px solid black',
+                } }) }));
+    }
+    // Fallback
+    return (_jsx("div", { style: {
+            height: '100%',
+            width: '10px',
+            display: 'flex',
+            opacity: isDimmed ? 0.5 : 1,
+        }, children: _jsx("span", { style: {
+                height: '10px',
+                width: '10px',
+                backgroundColor: 'black',
+            } }) }));
+};

package/dist/presentations/presentations.types.d.ts

@@ -0,0 +1,12 @@
+import { TypographyProps } from '@mui/material';
+export type PresentationElementSize = 'small-dimmed' | 'small' | 'small-bold' | 'medium' | 'medium-bold' | 'large-bold';
+export type PresentationSymbol = 'circle' | 'rectangle' | 'border-circle' | 'border-rectangle';
+interface PresentationSymbolProps {
+    symbol?: PresentationSymbol;
+    color?: string;
+    isDimmed?: boolean;
+}
+interface PresentationTypographyProps extends TypographyProps {
+    size?: PresentationElementSize;
+}
+export type { PresentationSymbolProps, PresentationTypographyProps };

package/dist/presentations/presentations.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"
@@ -77,6 +77,7 @@
     "terser-webpack-plugin": "^5.2.5",
     "tinycolor2": "^1.6.0",
     "typescript": "^4.9.5",
+    "victory": "^37.3.6",
     "web-vitals": "^2.1.4",
     "webpack": "^5.64.4",
     "webpack-dev-server": "^4.6.0",
@@ -196,6 +197,7 @@
     "storybook": "^7.6.6",
     "ts-loader": "^9.5.1",
     "typescript-eslint": "^8.18.1",
+    "uuid": "^11.1.0",
     "webpack-cli": "^5.1.4",
     "webpack-node-externals": "^3.0.0"
   },