@hhgtech/hhg-components
Version:
Hello Health Group common components
702 lines (686 loc) • 24.7 kB
JavaScript
;
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var dayjs = require('dayjs');
require('./index-0a047edc.js');
var Locale = require('./Locale-eb0da538.js');
var notifications = require('@mantine/notifications');
var index$1 = require('./index-ec32050c.js');
var core = require('@mantine/core');
var index$2 = require('./index-9301f298.js');
var miscTheme = require('./miscTheme.js');
var utils = require('./utils-5e3a8440.js');
var index = require('./index-04864074.js');
var shared = require('./shared-201fc49c.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefault(React);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
// Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
const MAPPED_LOCALE = {
[Locale.LOCALE.Vietnam]: 'vi',
[Locale.LOCALE.Cambodia]: 'km',
[Locale.LOCALE.India]: 'hi',
[Locale.LOCALE.Indonesia]: 'id',
[Locale.LOCALE.Malaysia]: 'ms',
[Locale.LOCALE.Thailand]: 'th',
[Locale.LOCALE.Taiwan]: 'zh-tw',
[Locale.LOCALE.PhilippinesTagalog]: 'tl-ph',
[Locale.LOCALE.PhilippinesEnglish]: 'en',
[Locale.LOCALE.Myanmar]: 'my',
[Locale.LOCALE.Singapore]: 'zh-cn',
};
const LOCALE_LOADERS = {
[Locale.LOCALE.Vietnam]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/vi.js')); }),
[Locale.LOCALE.Cambodia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/km.js')); }),
[Locale.LOCALE.India]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/hi.js')); }),
[Locale.LOCALE.Indonesia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/id.js')); }),
[Locale.LOCALE.Malaysia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/ms.js')); }),
[Locale.LOCALE.Thailand]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/th.js')); }),
[Locale.LOCALE.Taiwan]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/zh-tw.js')); }),
[Locale.LOCALE.Singapore]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/zh-cn.js')); }),
[Locale.LOCALE.PhilippinesTagalog]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/tl-ph.js')); }),
[Locale.LOCALE.PhilippinesEnglish]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/en.js')); }),
[Locale.LOCALE.Myanmar]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/my.js')); }),
};
const useMantineLocale = (locale) => {
const [isLoaded, setIsLoaded] = React.useState(false);
React.useEffect(() => {
(() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
var _a;
setIsLoaded(false);
yield ((_a = LOCALE_LOADERS[locale]) === null || _a === void 0 ? void 0 : _a.call(LOCALE_LOADERS));
dayjs__default["default"].locale(MAPPED_LOCALE[locale]);
setIsLoaded(true);
}))();
}, [locale]);
return {
isLoaded,
};
};
const GlobalButtonStyle = () => ({
Button: {
defaultProps: {
variant: 'primary',
size: 'md',
},
},
});
const themeColors$1 = {
[index.CustomStylesType.NONE]: {
hb: [
'#e3f2ff',
'#bcdeff',
'#91caff',
'#65b5ff',
'#45a4ff',
'#2b94ff',
'#2d87f3',
'#2c74df',
'#2b62cd',
'#2743ad',
],
mb: [
'#FFE9F1',
'#F8CCDC',
'#F5B4CB',
'#F29CBA',
'#EE84AA',
'#EB6B99',
'#E85388',
'#D34C7C',
'#BE446F',
'#A93D63',
],
blue: [
'#e3f2ff',
'#bcdeff',
'#91caff',
'#65b5ff',
'#45a4ff',
'#2b94ff',
'#2d87f3',
'#2c74df',
'#2b62cd',
'#2743ad',
],
gray: [
'#fafafa',
'#f2f2f2',
'#d9d9d9',
'#bfbfbf',
'#8c8c8c',
'#737373',
'#595959',
'#404040',
'#262626',
'#1a1a1a',
],
delftGray: [
'#F3F3F3',
'#EAEAEC',
'#D9DAE2',
'#B9BAC8',
'#9898A9',
'#7C7C8F',
'#5A5A72',
'#3E3F58',
'#202135',
'#0C0C12',
],
neutral: [
'#f7f9fc',
'#e4e8ec',
'#d2d6dc',
'#bfc5cc',
'#adb3bc',
'#9aa2ac',
'#87909c',
'#757f8c',
'#626d7c',
'#545E6C',
],
green: [
'#e0f8ee',
'#b3eed5',
'#7ce2b9',
'#2ed69e',
'#00CB8A',
'#00C076',
'#00B16A',
'#009E5C',
'#008C50',
'#006C39',
],
pink: [
'#fff1f6',
'#ffdce9',
'#fec7dc',
'#feb2cf',
'#fe9dc2',
'#fd87b4',
'#fd72a7',
'#fc5d9a',
'#fc488d',
'#e92d74',
],
violet: [
'#F5EDFF',
'#E7D2F7',
'#D8B7F0',
'#CA9CE8',
'#BB82E1',
'#AD67D9',
'#9E4CD1',
'#9031CA',
'#8116C2',
'#63059D',
],
yellow: [
'#fff8e2',
'#ffecb6',
'#ffe187',
'#ffd658',
'#ffcb37',
'#ffc326',
'#ffb521',
'#fea21e',
'#fe921d',
'#fc7419',
],
teal: [
'#e0f7fc',
'#b1ebf8',
'#7ddff3',
'#44d1ec',
'#00c7e6',
'#00bee0',
'#00aecd',
'#0099b2',
'#008599',
'#00626c',
],
indigol: [
'#CEDDF0',
'#ACC5E6',
'#95B3DA',
'#85A6CF',
'#6D91BE',
'#5F85B5',
'#4C77AC',
'#35639C',
'#284A75',
'#1B3250',
],
red: [
'#fae9e8',
'#feccbf',
'#FEAA96',
'#f44d2c',
'#ff6f4d',
'#ff5331',
'#f44d2c',
'#e64728',
'#d84023',
'#bf331b',
],
redViolet: [
'#F3EAEB',
'#E8D5D7',
'#DDC1C4',
'#D1ACB0',
'#C5979C',
'#BA8288',
'#AF6D74',
'#A35961',
'#97444D',
'#8C2F39',
],
},
[index.CustomStylesType.LEADGEN]: {
hb: [
'#e3f2ff',
'#bcdeff',
'#91caff',
'#65b5ff',
'#45a4ff',
'#2b94ff',
'#2d87f3',
'#2c74df',
'#2b62cd',
'#2743ad',
],
mb: [
'#FFE9F1',
'#F8CCDC',
'#F5B4CB',
'#F29CBA',
'#EE84AA',
'#EB6B99',
'#E85388',
'#D34C7C',
'#BE446F',
'#A93D63',
],
blue: [
'#e3f2ff',
'#bcdeff',
'#91caff',
'#65b5ff',
'#45a4ff',
'#2b94ff',
'#2d87f3',
'#2c74df',
'#2b62cd',
'#2743ad',
],
gray: [
'#fafafa',
'#f2f2f2',
'#d9d9d9',
'#bfbfbf',
'#8c8c8c',
'#737373',
'#595959',
'#404040',
'#262626',
'#111111',
],
delftGray: [
'#F3F3F3',
'#EAEAEC',
'#D9DAE2',
'#B9BAC8',
'#9898A9',
'#7C7C8F',
'#5A5A72',
'#3E3F58',
'#202135',
'#0C0C12',
],
neutral: [
'#f7f9fc',
'#e4e8ec',
'#d2d6dc',
'#bfc5cc',
'#adb3bc',
'#9aa2ac',
'#87909c',
'#757f8c',
'#626d7c',
'#545E6C',
],
green: [
'#e0f8ee',
'#b3eed5',
'#7ce2b9',
'#2ed69e',
'#00CB8A',
'#00C076',
'#00B16A',
'#009E5C',
'#008C50',
'#006C39',
],
pink: [
'#fff1f6',
'#ffdce9',
'#fec7dc',
'#feb2cf',
'#fe9dc2',
'#fd87b4',
'#fd72a7',
'#fc5d9a',
'#fc488d',
'#e92d74',
],
violet: [
'#F5EDFF',
'#E7D2F7',
'#D8B7F0',
'#CA9CE8',
'#BB82E1',
'#AD67D9',
'#9E4CD1',
'#9031CA',
'#8116C2',
'#63059D',
],
yellow: [
'#fff8e2',
'#ffecb6',
'#ffe187',
'#ffd658',
'#ffcb37',
'#ffc326',
'#ffb521',
'#fea21e',
'#fe921d',
'#fc7419',
],
teal: [
'#e0f7fc',
'#b1ebf8',
'#7ddff3',
'#44d1ec',
'#00c7e6',
'#00bee0',
'#00aecd',
'#0099b2',
'#008599',
'#00626c',
],
indigol: [
'#CEDDF0',
'#ACC5E6',
'#95B3DA',
'#85A6CF',
'#6D91BE',
'#5F85B5',
'#4C77AC',
'#35639C',
'#284A75',
'#1B3250',
],
red: [
'#fae9e8',
'#feccbf',
'#FEAA96',
'#f44d2c',
'#ff6f4d',
'#ff5331',
'#f44d2c',
'#e64728',
'#d84023',
'#bf331b',
],
redViolet: [
'#F3EAEB',
'#E8D5D7',
'#DDC1C4',
'#D1ACB0',
'#C5979C',
'#BA8288',
'#AF6D74',
'#A35961',
'#97444D',
'#8C2F39',
],
},
};
const DangerIcon = () => (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default["default"].createElement("path", { d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10", fill: "#262626" }),
React__default["default"].createElement("path", { d: "m14.829 9.172-5.657 5.656m-.001-5.656 5.657 5.656", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const InfoIcon = () => (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default["default"].createElement("path", { d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M8 11V8m0-3h.01", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const SuccessIcon = () => (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default["default"].createElement("path", { d: "M10 18.333a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666", fill: "#00B16A" }),
React__default["default"].createElement("path", { d: "m13.833 7.5-5.5 5-2.5-2.273", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const WarningIcon = () => (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1.66666C5.4 1.66666 1.66667 5.39999 1.66667 9.99999C1.66667 14.6 5.4 18.3333 10 18.3333C14.6 18.3333 18.3333 14.6 18.3333 9.99999C18.3333 5.39999 14.6 1.66666 10 1.66666ZM10 10.8333C9.54167 10.8333 9.16667 10.4583 9.16667 9.99999V6.66666C9.16667 6.20832 9.54167 5.83332 10 5.83332C10.4583 5.83332 10.8333 6.20832 10.8333 6.66666V9.99999C10.8333 10.4583 10.4583 10.8333 10 10.8333ZM9.16667 12.5V14.1667H10.8333V12.5H9.16667Z", fill: "#FE921D" })));
function NotificationsHandler() {
return (React__default["default"].createElement(notifications.Notifications, { position: "top-right", zIndex: index$1.ZINDEX_SSO + 5, autoClose: 5000 }));
}
const MappingColor = {
success: 'green',
danger: 'red',
warning: 'yellow',
info: 'blue',
firebase: 'gray',
};
const MappingIcon = {
success: React__default["default"].createElement(SuccessIcon, null),
danger: React__default["default"].createElement(DangerIcon, null),
warning: React__default["default"].createElement(WarningIcon, null),
info: React__default["default"].createElement(InfoIcon, null),
firebase: '',
};
const showNotification = (_a) => {
var { type, title } = _a, rest = tslib_es6.__rest(_a, ["type", "title"]);
const icon = MappingIcon[type];
// Most used notification props
notifications.notifications.show(Object.assign(Object.assign({ title: React__default["default"].createElement("b", null, title), icon, withCloseButton: true, closeButtonProps: {
label: 'Close alert',
} }, rest), { styles: (theme) => {
const mapColor = MappingColor[type] || 'blue';
return {
root: {
backgroundColor: theme.colors[mapColor][0],
borderColor: theme.colors[mapColor][0],
'&::before': { backgroundColor: theme.white },
},
title: { color: theme.colors[mapColor][8] },
description: { color: theme.black },
closeButton: {
color: theme.black,
'&:hover': {
backgroundColor: theme.colors[mapColor][0],
},
},
icon: {
backgroundColor: 'transparent',
padding: 0,
},
};
} }));
};
const GlobalContainerStyle = {
Container: {
defaultProps: {
sizes: {
lg: core.em(utils.Screens.LG),
},
},
},
};
const headingStyles = {
none: {
default: [
{ size: '40px', lineHeight: '52px', letterSpacing: '-1.2px' },
{ size: '32px', lineHeight: '42px', letterSpacing: '-1px' },
{ size: '26px', lineHeight: '36px', letterSpacing: '-0.8px' },
{ size: '22px', lineHeight: '32px', letterSpacing: '-0.6px' },
{ size: '18px', lineHeight: '28px', letterSpacing: '-0.2px' },
{ size: '16px', lineHeight: '24px', letterSpacing: 0 },
],
mbDown: [
{ size: '26px', lineHeight: '34px', letterSpacing: '-0.9px' },
{ size: '24px', lineHeight: '32px', letterSpacing: '-0.8px' },
{ size: '20px', lineHeight: '26px', letterSpacing: '-0.7px' },
{ size: '18px', lineHeight: '26px', letterSpacing: '-0.6px' },
{ size: '16px', lineHeight: '24px', letterSpacing: '-0.2px' },
{ size: '14px', lineHeight: '22px', letterSpacing: '-0.2px' },
],
},
leadgen: {
default: [
{ size: '40px', lineHeight: '48px', letterSpacing: '-1.2px' },
{ size: '32px', lineHeight: '40px', letterSpacing: '-1px' },
{ size: '26px', lineHeight: '32px', letterSpacing: '-0.6px' },
{ size: '20px', lineHeight: '28px', letterSpacing: '-0.4px' },
{ size: '17px', lineHeight: '24px', letterSpacing: '-0.4px' },
{ size: '15px', lineHeight: '24px', letterSpacing: '-0.3px' },
],
mbDown: [
{ size: '26px', lineHeight: '34px', letterSpacing: '-0.9px' },
{ size: '24px', lineHeight: '32px', letterSpacing: '-0.8px' },
{ size: '20px', lineHeight: '26px', letterSpacing: '-0.7px' },
{ size: '18px', lineHeight: '26px', letterSpacing: '-0.6px' },
{ size: '16px', lineHeight: '24px', letterSpacing: '-0.2px' },
{ size: '14px', lineHeight: '22px', letterSpacing: '-0.2px' },
],
},
};
const getHeadingStyles = (options) => {
const { version = index.CustomStylesType.NONE, mbDown } = options || {};
const currentStyles = headingStyles[version] || {};
return Object.fromEntries((currentStyles[mbDown ? 'mbDown' : 'default'] || []).map((style, index) => [
`h${index + 1}`,
{
fontSize: style.size,
lineHeight: style.lineHeight,
letterSpacing: style.letterSpacing,
},
]));
};
const GlobalHeadingStyle = (version = index.CustomStylesType.NONE) => {
return {
Title: {
styles: {
root: Object.assign(Object.assign({ fontWeight: index.FontWeight.bold }, getHeadingStyles({
version,
})), { [`&${utils.MediaQueries.mbDown}`]: Object.assign({}, getHeadingStyles({
version,
mbDown: true,
})) }),
},
},
};
};
const GlobalInputStyle = (locale) => {
var _a;
return ({
InputWrapper: {
styles: {
label: {
display: 'inline-flex',
gap: 4,
marginBottom: '0.25rem',
fontWeight: 600,
fontSize: core.rem(14),
lineHeight: '22px',
color: miscTheme.theme.colors.gray600,
},
description: {
fontWeight: 400,
fontSize: '12px',
lineHeight: '18px',
color: miscTheme.theme.colors.gray600,
marginBottom: '0.25rem',
},
error: {
marginTop: '0.25rem',
},
},
},
NumberInput: {
defaultProps: {
decimalSeparator: (_a = index$1.ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
},
},
Input: {
styles: (_theme, _, { size }) => ({
input: {
border: `1px solid ${miscTheme.theme.colors.gray200}`,
transition: `all ${shared.ANIMATION_DURATION} ease-in-out`,
['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
switch (size) {
case 'lg':
return {
height: 48,
minHeight: 'unset',
fontSize: 16,
lineHeight: '24px',
};
case 'md':
return {
height: 40,
minHeight: 'unset',
fontSize: core.rem(14),
lineHeight: '22px',
};
case 'sm':
return {
height: 32,
minHeight: 'unset',
fontSize: core.rem(14),
lineHeight: '22px',
};
}
})()),
'&:hover': {
border: `1px solid ${_theme.primaryColor}`,
// boxShadow: `0 0 2px 2px ${theme.colors.primary200}`,
},
'&:focus': {
boxShadow: `0px 0px 0px 2px ${_theme.colors[_theme.primaryColor][2]}`,
},
},
'&[data-invalid="true"]': {
border: `1px solid ${miscTheme.theme.colors.red600}`,
color: '#000',
},
}),
},
});
};
const getGlobalRadioStyle = {
Radio: {
defaultProps: {
size: 'sm',
color: 'blue.6',
},
styles: {
radio: {
backgroundColor: 'transparent',
'&:checked': {
backgroundColor: 'transparent',
},
},
},
},
};
const themeColors = themeColors$1[index.CustomStylesType.NONE];
const getMantineThemeOverride = (locale, template = 'hb', version) => {
var _a;
return {
defaultRadius: template === 'hb' ? 8 : 16,
cursorType: 'pointer',
colors: Object.assign(Object.assign(Object.assign({}, ((_a = themeColors$1[version]) !== null && _a !== void 0 ? _a : themeColors$1[index.CustomStylesType.NONE])), miscTheme.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
primaryColor: template,
primaryShade: 6,
fontFamily: (locale === Locale.LOCALE.Cambodia
? 'Battambang'
: locale === Locale.LOCALE.Thailand
? 'Noto Sans Thai'
: 'Inter') +
`, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
breakpoints: {
xs: core.em(utils.Breakpoints.BREAK_POINT_SMALL_MOBILE),
sm: core.em(utils.Breakpoints.BREAK_POINT_MOBILE),
md: core.em(utils.Breakpoints.BREAK_POINT_TABLET),
lg: core.em(utils.Breakpoints.BREAK_POINT_PC),
xl: core.em(utils.Breakpoints.BREAK_POINT_LGPC),
},
components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle()), GlobalHeadingStyle(version)), GlobalContainerStyle),
other: {
template,
customStyleType: version,
defaultImage: index$2.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
},
};
};
exports.MAPPED_LOCALE = MAPPED_LOCALE;
exports.NotificationsHandler = NotificationsHandler;
exports.getHeadingStyles = getHeadingStyles;
exports.getMantineThemeOverride = getMantineThemeOverride;
exports.showNotification = showNotification;
exports.themeColors = themeColors;
exports.useMantineLocale = useMantineLocale;