@fixefy/fixefy-ui-components 0.0.8 → 0.0.9

package/dist-cjs/FxStyledComponents/index.jsx

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bars = exports.DataWrapper = exports.ShowMoreContainer = exports.ShowMore = exports.Text = exports.Link = exports.PageTitle = exports.Value = exports.BoldValue = exports.Label = exports.PageHeader = exports.Card = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const material_1 = require("@mui/material");
+exports.Card = (0, styles_1.styled)(material_1.Paper)(({ theme }) => ({
+    borderRadius: 8,
+    padding: 16,
+    overflow: 'hidden',
+    position: 'relative',
+}));
+exports.PageHeader = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    backgroundColor: '#E2EEF1',
+    width: '100%',
+    height: 220,
+    padding: 32,
+}));
+exports.Label = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.overLineCaption), { color: theme.palette.statistics.label })));
+exports.BoldValue = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.subtitle2), { fontWeight: 700, lineHeight: '16px', color: theme.palette.typography.title })));
+exports.Value = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { fontFamily: theme.typography.fontFamily, lineHeight: '20px', color: theme.palette.typography.title })));
+exports.PageTitle = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.h4), { color: theme.palette.common.black })));
+exports.Link = (0, styles_1.styled)(material_1.Link)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { lineHeight: '20px', fontStyle: 'italic', color: theme.palette.primary[500], cursor: 'pointer', textDecoration: 'none' })));
+exports.Text = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { color: theme.palette.typography.title, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' })));
+exports.ShowMore = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { color: theme.palette.primary['500'], fontWeight: 600, fontSize: '12px', letterSpacing: '0.5px', lineHeight: '24px', cursor: 'pointer' })));
+exports.ShowMoreContainer = (0, styles_1.styled)(material_1.Grid)(({ theme }) => ({
+    backgroundColor: theme.palette.common.white,
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    cursor: 'pointer',
+}));
+const DataWrapper = ({ values = [], title, icon, columns = 4, cardStyle = {}, wrapperStyle = {} }) => {
+    const normalizedValues = values.length % columns !== 0 ? [...values, ...new Array(columns - (values.length % columns))] : values;
+    const last4Items = normalizedValues.splice(-columns);
+    const containerColumns = columns === 5 ? 10 : 12;
+    return (<material_1.Box sx={Object.assign({}, wrapperStyle)}>
+      {(title || icon) && (<material_1.Box display="flex" alignItems="center" sx={{ ml: 2, mb: 1 }}>
+          {icon && icon}
+          {title && <exports.BoldValue sx={{ ml: 1 }}>{(0, fixefy_ui_utils_1.titleCase)(title)}</exports.BoldValue>}
+        </material_1.Box>)}
+      <exports.Card elevation={0} sx={Object.assign({ padding: 0, border: `1px solid #F0F0F0` }, cardStyle)}>
+        <material_1.Grid container columns={containerColumns}>
+          {normalizedValues.map((value, index) => {
+            return (<material_1.Grid sx={{
+                    minHeight: 74,
+                    padding: 2,
+                    borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
+                    borderBottom: value && `1px solid #F0F0F0`,
+                    display: 'flex',
+                    alignItems: 'center',
+                }} item key={index} xs={containerColumns / columns}>
+                {value && react_1.default.cloneElement(value)}
+              </material_1.Grid>);
+        })}
+          {last4Items.map((value, index) => {
+            return (<material_1.Grid sx={{
+                    minHeight: 74,
+                    padding: 2,
+                    borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
+                    display: 'flex',
+                    alignItems: 'center',
+                }} item key={index} xs={containerColumns / columns}>
+                {value && react_1.default.cloneElement(value)}
+              </material_1.Grid>);
+        })}
+        </material_1.Grid>
+      </exports.Card>
+    </material_1.Box>);
+};
+exports.DataWrapper = DataWrapper;
+const Bars = ({ fields }) => {
+    const max = (0, react_1.useMemo)(() => {
+        return fields.reduce((total, acc) => {
+            return acc.value > total ? acc.value : total;
+        }, 0);
+    }, [fields]);
+    const calculateTheValue = (value) => {
+        const calculatedValue = (value * 24) / max;
+        if (calculatedValue > 0 && calculatedValue < 2) {
+            return 2;
+        }
+        if (calculatedValue < 1) {
+            return 1;
+        }
+        return calculatedValue;
+    };
+    return (<div style={{ display: 'flex', alignItems: 'flex-end' }}>
+      {fields.map((field, index) => {
+            return (<div key={index} style={{
+                    width: 8,
+                    borderRadius: '0.75px',
+                    height: calculateTheValue(field.value),
+                    backgroundColor: field.color,
+                    marginRight: 2,
+                }}/>);
+        })}
+    </div>);
+};
+exports.Bars = Bars;

package/dist-cjs/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WizardContextProvider = exports.WizardContext = exports.FxWizard = exports.FxTodo = exports.FxTextField = exports.FxTag = exports.FxStatusBar = exports.FxStatisticsBar = exports.FxSlider = exports.FxShowMore = exports.FxScore = exports.FxProgressCounter = exports.FxProgressCircle = exports.FxNumberField = exports.FxNotes = exports.FxModal = exports.FxIcon = exports.FxChip = exports.FxButton = exports.FxAvatar = exports.FxAsyncDropdown = exports.FxAggregationsBar = exports.FxActionsTray = void 0;
+const tslib_1 = require("tslib");
 var FxActionsTray_1 = require("./FxActionsTray");
 Object.defineProperty(exports, "FxActionsTray", { enumerable: true, get: function () { return FxActionsTray_1.FxActionsTray; } });
 var FxAggregationsBar_1 = require("./FxAggregationsBar");
@@ -45,3 +46,4 @@ var FxWizard_1 = require("./FxWizard");
 Object.defineProperty(exports, "FxWizard", { enumerable: true, get: function () { return FxWizard_1.FxWizard; } });
 Object.defineProperty(exports, "WizardContext", { enumerable: true, get: function () { return FxWizard_1.WizardContext; } });
 Object.defineProperty(exports, "WizardContextProvider", { enumerable: true, get: function () { return FxWizard_1.WizardContextProvider; } });
+tslib_1.__exportStar(require("./FxStyledComponents"), exports);

package/dist-es/FxStyledComponents/index.jsx

@@ -0,0 +1,133 @@
+import React, { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
+import { titleCase } from '@fixefy/fixefy-ui-utils';
+import { Paper, Link as MuiLink, Typography, Box, Grid } from '@mui/material';
+export const Card = styled(Paper)(({ theme }) => ({
+    borderRadius: 8,
+    padding: 16,
+    overflow: 'hidden',
+    position: 'relative',
+}));
+export const PageHeader = styled(Box)(({ theme }) => ({
+    backgroundColor: '#E2EEF1',
+    width: '100%',
+    height: 220,
+    padding: 32,
+}));
+export const Label = styled(Typography)(({ theme }) => ({
+    ...theme.typography.overLineCaption,
+    color: theme.palette.statistics.label,
+}));
+export const BoldValue = styled(Typography)(({ theme }) => ({
+    ...theme.typography.subtitle2,
+    fontWeight: 700,
+    lineHeight: '16px',
+    color: theme.palette.typography.title,
+}));
+export const Value = styled(Typography)(({ theme }) => ({
+    ...theme.typography.body1,
+    fontFamily: theme.typography.fontFamily,
+    lineHeight: '20px',
+    color: theme.palette.typography.title,
+}));
+export const PageTitle = styled(Typography)(({ theme }) => ({
+    ...theme.typography.h4,
+    color: theme.palette.common.black,
+}));
+export const Link = styled(MuiLink)(({ theme }) => ({
+    ...theme.typography.body1,
+    lineHeight: '20px',
+    fontStyle: 'italic',
+    color: theme.palette.primary[500],
+    cursor: 'pointer',
+    textDecoration: 'none',
+}));
+export const Text = styled(Typography)(({ theme }) => ({
+    ...theme.typography.body1,
+    color: theme.palette.typography.title,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+}));
+export const ShowMore = styled(Typography)(({ theme }) => ({
+    ...theme.typography.body1,
+    color: theme.palette.primary['500'],
+    fontWeight: 600,
+    fontSize: '12px',
+    letterSpacing: '0.5px',
+    lineHeight: '24px',
+    cursor: 'pointer',
+}));
+export const ShowMoreContainer = styled(Grid)(({ theme }) => ({
+    backgroundColor: theme.palette.common.white,
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    cursor: 'pointer',
+}));
+export const DataWrapper = ({ values = [], title, icon, columns = 4, cardStyle = {}, wrapperStyle = {} }) => {
+    const normalizedValues = values.length % columns !== 0 ? [...values, ...new Array(columns - (values.length % columns))] : values;
+    const last4Items = normalizedValues.splice(-columns);
+    const containerColumns = columns === 5 ? 10 : 12;
+    return (<Box sx={{ ...wrapperStyle }}>
+      {(title || icon) && (<Box display="flex" alignItems="center" sx={{ ml: 2, mb: 1 }}>
+          {icon && icon}
+          {title && <BoldValue sx={{ ml: 1 }}>{titleCase(title)}</BoldValue>}
+        </Box>)}
+      <Card elevation={0} sx={{ padding: 0, border: `1px solid #F0F0F0`, ...cardStyle }}>
+        <Grid container columns={containerColumns}>
+          {normalizedValues.map((value, index) => {
+            return (<Grid sx={{
+                    minHeight: 74,
+                    padding: 2,
+                    borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
+                    borderBottom: value && `1px solid #F0F0F0`,
+                    display: 'flex',
+                    alignItems: 'center',
+                }} item key={index} xs={containerColumns / columns}>
+                {value && React.cloneElement(value)}
+              </Grid>);
+        })}
+          {last4Items.map((value, index) => {
+            return (<Grid sx={{
+                    minHeight: 74,
+                    padding: 2,
+                    borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
+                    display: 'flex',
+                    alignItems: 'center',
+                }} item key={index} xs={containerColumns / columns}>
+                {value && React.cloneElement(value)}
+              </Grid>);
+        })}
+        </Grid>
+      </Card>
+    </Box>);
+};
+export const Bars = ({ fields }) => {
+    const max = useMemo(() => {
+        return fields.reduce((total, acc) => {
+            return acc.value > total ? acc.value : total;
+        }, 0);
+    }, [fields]);
+    const calculateTheValue = (value) => {
+        const calculatedValue = (value * 24) / max;
+        if (calculatedValue > 0 && calculatedValue < 2) {
+            return 2;
+        }
+        if (calculatedValue < 1) {
+            return 1;
+        }
+        return calculatedValue;
+    };
+    return (<div style={{ display: 'flex', alignItems: 'flex-end' }}>
+      {fields.map((field, index) => {
+            return (<div key={index} style={{
+                    width: 8,
+                    borderRadius: '0.75px',
+                    height: calculateTheValue(field.value),
+                    backgroundColor: field.color,
+                    marginRight: 2,
+                }}/>);
+        })}
+    </div>);
+};

package/dist-es/index.js

@@ -19,3 +19,4 @@ export { FxTag } from './FxTag';
 export { FxTextField } from './FxTextField';
 export { FxTodo } from './FxTodo';
 export { FxWizard, WizardContext, WizardContextProvider } from './FxWizard';
+export * from './FxStyledComponents';

package/dist-types/FxStyledComponents/index.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactElement } from 'react';
+export declare const Card: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const PageHeader: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const Label: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const BoldValue: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const Value: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const PageTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const Link: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const Text: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const ShowMore: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const ShowMoreContainer: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const DataWrapper: ({ values, title, icon, columns, cardStyle, wrapperStyle }: {
+    values: ReactElement[];
+    title?: string | undefined;
+    columns?: number | undefined;
+    icon?: any;
+    cardStyle?: any;
+    wrapperStyle?: any;
+}) => React.JSX.Element;
+interface field {
+    value: number;
+    color: string;
+}
+export declare const Bars: ({ fields }: {
+    fields: field[];
+}) => React.JSX.Element;
+export {};

package/dist-types/index.d.ts

@@ -19,3 +19,4 @@ export { FxTag, TagPropsType } from './FxTag';
 export { FxTextField, TextFieldPropsType } from './FxTextField';
 export { FxTodo, TodoPropsType } from './FxTodo';
 export { FxWizard, WizardPropsType, WizardContext, WizardContextProvider } from './FxWizard';
+export * from './FxStyledComponents';

package/package.json

@@ -5,7 +5,7 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.8.4",
-		"@fixefy/fixefy-ui-utils": "^0.0.6",
+		"@fixefy/fixefy-ui-utils": "^0.0.7",
 		"@mui/icons-material": "^5.14.11",
 		"@mui/material": "^5.14.11",
 		"@mui/styled-engine": "^5.14.11",
@@ -62,5 +62,5 @@
 		}
 	},
 	"types": "./dist-types/index.d.ts",
-	"version": "0.0.8"
+	"version": "0.0.9"
 }