@coorpacademy/components 11.25.1 → 11.28.0

package/README.md

@@ -169,7 +169,7 @@ For more info see the [mobile documentation](https://github.com/CoorpAcademy/mob
 
 You may need to install these optional libs depending on which native components you use:
 
-- `color`
+- `colorjs.io`
 - `react-native-modal`
 - `react-native-render-html`
 - `react-native-linear-gradient`

package/es/atom/gradient/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/gradient/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACvC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAIvC,oBAAY,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,oBAAoB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;CACvE,CAAC;AAEF,QAAA,MAAM,QAAQ,qFAQX,KAAK,gBA+BP,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/gradient/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACvC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAIvC,oBAAY,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,oBAAoB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;CACvE,CAAC;AAEF,QAAA,MAAM,QAAQ,qFAQX,KAAK,gBAkCP,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/es/atom/gradient/index.native.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import Color from 'color';
+import Color from 'colorjs.io';
 
 const Gradient = ({
   children,
@@ -14,12 +14,10 @@ const Gradient = ({
   let calculatedColors = colors;
 
   if (colors.length === 1) {
-    const {
-      r,
-      g,
-      b
-    } = Color(colors[0]).object();
-    calculatedColors = transparencyPosition === 'top' ? [`rgba(${r}, ${g}, ${b}, 0)`, colors[0], colors[0]] : [colors[0], colors[0], `rgba(${r}, ${g}, ${b}, 0)`];
+    const [raw] = colors;
+    const transparent = new Color(raw).to('srgb');
+    transparent.alpha = 0;
+    calculatedColors = transparencyPosition === 'top' ? [transparent.toString(), raw, raw] : [raw, raw, transparent.toString()];
   }
 
   const _style = [];

package/es/atom/gradient/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","LinearGradient","Color","Gradient","children","colors","transparencyPosition","height","style","testID","pointerEvents","calculatedColors","length","r","g","b","object","_style","push"],"sources":["../../../src/atom/gradient/index.native.tsx"],"sourcesContent":["import React, {ReactNode} from 'react';\nimport {ViewStyle} from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport Color from 'color';\n\nexport type Props = {\n  children?: ReactNode;\n  colors: Array<string>;\n  transparencyPosition?: 'top' | 'bottom';\n  height?: number;\n  style?: ViewStyle | ViewStyle[];\n  testID?: string;\n  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only' | undefined;\n};\n\nconst Gradient = ({\n  children,\n  colors,\n  transparencyPosition = 'top',\n  height,\n  style,\n  testID,\n  pointerEvents\n}: Props) => {\n  let calculatedColors = colors;\n  if (colors.length === 1) {\n    const {r, g, b} = Color(colors[0]).object();\n    calculatedColors =\n      transparencyPosition === 'top'\n        ? [`rgba(${r}, ${g}, ${b}, 0)`, colors[0], colors[0]]\n        : [colors[0], colors[0], `rgba(${r}, ${g}, ${b}, 0)`];\n  }\n\n  const _style = [];\n\n  if (style) {\n    _style.push(style);\n  }\n  if (height) {\n    _style.push({height});\n  }\n\n  return (\n    (\n      <LinearGradient\n        colors={calculatedColors}\n        style={_style}\n        pointerEvents={pointerEvents}\n        testID={testID}\n      >\n        {children}\n      </LinearGradient>\n    ) || null\n  );\n};\n\nexport default Gradient;\n"],"mappings":"AAAA,OAAOA,KAAP,MAA+B,OAA/B;AAEA,OAAOC,cAAP,MAA2B,8BAA3B;AACA,OAAOC,KAAP,MAAkB,OAAlB;;AAYA,MAAMC,QAAQ,GAAG,CAAC;EAChBC,QADgB;EAEhBC,MAFgB;EAGhBC,oBAAoB,GAAG,KAHP;EAIhBC,MAJgB;EAKhBC,KALgB;EAMhBC,MANgB;EAOhBC;AAPgB,CAAD,KAQJ;EACX,IAAIC,gBAAgB,GAAGN,MAAvB;;EACA,IAAIA,MAAM,CAACO,MAAP,KAAkB,CAAtB,EAAyB;IACvB,MAAM;MAACC,CAAD;MAAIC,CAAJ;MAAOC;IAAP,IAAYb,KAAK,CAACG,MAAM,CAAC,CAAD,CAAP,CAAL,CAAiBW,MAAjB,EAAlB;IACAL,gBAAgB,GACdL,oBAAoB,KAAK,KAAzB,GACI,CAAE,QAAOO,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAAvB,EAA8BV,MAAM,CAAC,CAAD,CAApC,EAAyCA,MAAM,CAAC,CAAD,CAA/C,CADJ,GAEI,CAACA,MAAM,CAAC,CAAD,CAAP,EAAYA,MAAM,CAAC,CAAD,CAAlB,EAAwB,QAAOQ,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAA7C,CAHN;EAID;;EAED,MAAME,MAAM,GAAG,EAAf;;EAEA,IAAIT,KAAJ,EAAW;IACTS,MAAM,CAACC,IAAP,CAAYV,KAAZ;EACD;;EACD,IAAID,MAAJ,EAAY;IACVU,MAAM,CAACC,IAAP,CAAY;MAACX;IAAD,CAAZ;EACD;;EAED,OACE,aACE,oBAAC,cAAD;IACE,MAAM,EAAEI,gBADV;IAEE,KAAK,EAAEM,MAFT;IAGE,aAAa,EAAEP,aAHjB;IAIE,MAAM,EAAED;EAJV,GAMGL,QANH,CADF,IASK,IAVP;AAYD,CAvCD;;AAyCA,eAAeD,QAAf"}
+{"version":3,"file":"index.native.js","names":["React","LinearGradient","Color","Gradient","children","colors","transparencyPosition","height","style","testID","pointerEvents","calculatedColors","length","raw","transparent","to","alpha","toString","_style","push"],"sources":["../../../src/atom/gradient/index.native.tsx"],"sourcesContent":["import React, {ReactNode} from 'react';\nimport {ViewStyle} from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport Color from 'colorjs.io';\n\nexport type Props = {\n  children?: ReactNode;\n  colors: Array<string>;\n  transparencyPosition?: 'top' | 'bottom';\n  height?: number;\n  style?: ViewStyle | ViewStyle[];\n  testID?: string;\n  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only' | undefined;\n};\n\nconst Gradient = ({\n  children,\n  colors,\n  transparencyPosition = 'top',\n  height,\n  style,\n  testID,\n  pointerEvents\n}: Props) => {\n  let calculatedColors = colors;\n  if (colors.length === 1) {\n    const [raw] = colors;\n    const transparent = new Color(raw).to('srgb');\n    transparent.alpha = 0;\n\n    calculatedColors =\n      transparencyPosition === 'top'\n        ? [transparent.toString(), raw, raw]\n        : [raw, raw, transparent.toString()];\n  }\n\n  const _style = [];\n\n  if (style) {\n    _style.push(style);\n  }\n  if (height) {\n    _style.push({height});\n  }\n\n  return (\n    (\n      <LinearGradient\n        colors={calculatedColors}\n        style={_style}\n        pointerEvents={pointerEvents}\n        testID={testID}\n      >\n        {children}\n      </LinearGradient>\n    ) || null\n  );\n};\n\nexport default Gradient;\n"],"mappings":"AAAA,OAAOA,KAAP,MAA+B,OAA/B;AAEA,OAAOC,cAAP,MAA2B,8BAA3B;AACA,OAAOC,KAAP,MAAkB,YAAlB;;AAYA,MAAMC,QAAQ,GAAG,CAAC;EAChBC,QADgB;EAEhBC,MAFgB;EAGhBC,oBAAoB,GAAG,KAHP;EAIhBC,MAJgB;EAKhBC,KALgB;EAMhBC,MANgB;EAOhBC;AAPgB,CAAD,KAQJ;EACX,IAAIC,gBAAgB,GAAGN,MAAvB;;EACA,IAAIA,MAAM,CAACO,MAAP,KAAkB,CAAtB,EAAyB;IACvB,MAAM,CAACC,GAAD,IAAQR,MAAd;IACA,MAAMS,WAAW,GAAG,IAAIZ,KAAJ,CAAUW,GAAV,EAAeE,EAAf,CAAkB,MAAlB,CAApB;IACAD,WAAW,CAACE,KAAZ,GAAoB,CAApB;IAEAL,gBAAgB,GACdL,oBAAoB,KAAK,KAAzB,GACI,CAACQ,WAAW,CAACG,QAAZ,EAAD,EAAyBJ,GAAzB,EAA8BA,GAA9B,CADJ,GAEI,CAACA,GAAD,EAAMA,GAAN,EAAWC,WAAW,CAACG,QAAZ,EAAX,CAHN;EAID;;EAED,MAAMC,MAAM,GAAG,EAAf;;EAEA,IAAIV,KAAJ,EAAW;IACTU,MAAM,CAACC,IAAP,CAAYX,KAAZ;EACD;;EACD,IAAID,MAAJ,EAAY;IACVW,MAAM,CAACC,IAAP,CAAY;MAACZ;IAAD,CAAZ;EACD;;EAED,OACE,aACE,oBAAC,cAAD;IACE,MAAM,EAAEI,gBADV;IAEE,KAAK,EAAEO,MAFT;IAGE,aAAa,EAAER,aAHjB;IAIE,MAAM,EAAED;EAJV,GAMGL,QANH,CADF,IASK,IAVP;AAYD,CA1CD;;AA4CA,eAAeD,QAAf"}

package/es/atom/icon/index.d.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_ICON_COLOR: "hsl(0, 0%, 32%)";
+export function getForegroundColor(backgroundColor: any): string;
+export default Icon;
+declare const Icon: React.NamedExoticComponent<object>;
+import React from "react";
+//# sourceMappingURL=index.d.ts.map

package/es/atom/icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,iEACoE;;AAE3E,uDAgCG"}

package/es/atom/icon/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes, { number } from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { fas } from '@fortawesome/pro-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import toLower from 'lodash/fp/toLower';
+import merge from 'lodash/fp/merge';
+import getOr from 'lodash/fp/getOr';
+import Color from 'colorjs.io';
+import style from './style.css';
+library.add(fas);
+const DEFAULT_PRESET = 'm';
+const ICON_LUMINOSITY = 32;
+const DEFAULT_WRAPPER_SIZE = 40;
+const ICON_PADDING = 8;
+export const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';
+const SIZE_CONFIGS = {
+  s: {
+    faSize: 12,
+    wrapperSize: 32
+  },
+  m: {
+    faSize: 16,
+    wrapperSize: DEFAULT_WRAPPER_SIZE
+  },
+  xl: {
+    faSize: 20,
+    wrapperSize: 48
+  }
+};
+export const getForegroundColor = backgroundColor => new Color(backgroundColor).to('hsl').set({
+  l: ICON_LUMINOSITY
+}).toString();
+const Icon = /*#__PURE__*/React.memo(function Icon({
+  iconName,
+  iconColor,
+  backgroundColor,
+  preset = DEFAULT_PRESET,
+  size
+}) {
+  const effectiveIconColor = iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;
+  const effectiveSize = size ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size) : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);
+  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
+  const iconWrapperStyle = {
+    backgroundColor,
+    width: wrapperSize,
+    height: wrapperSize,
+    padding: ICON_PADDING
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.iconWrapper,
+    style: iconWrapperStyle
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: `fa-${iconName}`,
+    color: effectiveIconColor,
+    "font-size": effectiveSize.faSize
+  }));
+});
+Icon.propTypes = process.env.NODE_ENV !== "production" ? {
+  iconName: PropTypes.string.isRequired,
+  iconColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  preset: PropTypes.oneOf(['s', 'm', 'xl']),
+  size: PropTypes.shape({
+    faSize: number,
+    wrapperSize: PropTypes.number
+  })
+} : {};
+export default Icon;
+//# sourceMappingURL=index.js.map

package/es/atom/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","number","FontAwesomeIcon","fas","library","toLower","merge","getOr","Color","style","add","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","to","set","l","toString","Icon","memo","iconName","iconColor","preset","size","effectiveIconColor","effectiveSize","iconWrapperStyle","width","height","padding","iconWrapper","propTypes","string","isRequired","oneOf","shape"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport Color from 'colorjs.io';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n  s: {\n    faSize: 12,\n    wrapperSize: 32\n  },\n  m: {\n    faSize: 16,\n    wrapperSize: DEFAULT_WRAPPER_SIZE\n  },\n  xl: {\n    faSize: 20,\n    wrapperSize: 48\n  }\n};\n\nexport const getForegroundColor = backgroundColor =>\n  new Color(backgroundColor).to('hsl').set({l: ICON_LUMINOSITY}).toString();\n\nconst Icon = React.memo(function Icon({\n  iconName,\n  iconColor,\n  backgroundColor,\n  preset = DEFAULT_PRESET,\n  size\n}) {\n  const effectiveIconColor =\n    iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;\n\n  const effectiveSize = size\n    ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n    : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n  const iconWrapperStyle = {\n    backgroundColor,\n    width: wrapperSize,\n    height: wrapperSize,\n    padding: ICON_PADDING\n  };\n\n  return (\n    <div className={style.iconWrapper} style={iconWrapperStyle}>\n      <FontAwesomeIcon\n        icon={`fa-${iconName}`}\n        color={effectiveIconColor}\n        font-size={effectiveSize.faSize}\n      />\n    </div>\n  );\n});\n\nIcon.propTypes = {\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  preset: PropTypes.oneOf(['s', 'm', 'xl']),\n  size: PropTypes.shape({\n    faSize: number,\n    wrapperSize: PropTypes.number\n  })\n};\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,IAAmBC,MAAnB,QAAgC,YAAhC;AACA,SAAQC,eAAR,QAA8B,gCAA9B;AACA,SAAQC,GAAR,QAAkB,kCAAlB;AACA,SAAQC,OAAR,QAAsB,mCAAtB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,KAAP,MAAkB,YAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEAL,OAAO,CAACM,GAAR,CAAYP,GAAZ;AAEA,MAAMQ,cAAc,GAAG,GAAvB;AACA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;AACA,MAAMC,YAAY,GAAG,CAArB;AACA,OAAO,MAAMC,kBAAkB,GAAG,iBAA3B;AAEP,MAAMC,YAAY,GAAG;EACnBC,CAAC,EAAE;IACDC,MAAM,EAAE,EADP;IAEDC,WAAW,EAAE;EAFZ,CADgB;EAKnBC,CAAC,EAAE;IACDF,MAAM,EAAE,EADP;IAEDC,WAAW,EAAEN;EAFZ,CALgB;EASnBQ,EAAE,EAAE;IACFH,MAAM,EAAE,EADN;IAEFC,WAAW,EAAE;EAFX;AATe,CAArB;AAeA,OAAO,MAAMG,kBAAkB,GAAGC,eAAe,IAC/C,IAAIf,KAAJ,CAAUe,eAAV,EAA2BC,EAA3B,CAA8B,KAA9B,EAAqCC,GAArC,CAAyC;EAACC,CAAC,EAAEd;AAAJ,CAAzC,EAA+De,QAA/D,EADK;AAGP,MAAMC,IAAI,gBAAG7B,KAAK,CAAC8B,IAAN,CAAW,SAASD,IAAT,CAAc;EACpCE,QADoC;EAEpCC,SAFoC;EAGpCR,eAHoC;EAIpCS,MAAM,GAAGrB,cAJ2B;EAKpCsB;AALoC,CAAd,EAMrB;EACD,MAAMC,kBAAkB,GACtBH,SAAS,IAAIR,eAAb,GAA+BD,kBAAkB,CAACC,eAAD,CAAjD,GAAqER,kBADvE;EAGA,MAAMoB,aAAa,GAAGF,IAAI,GACtB3B,KAAK,CAACU,YAAY,CAACL,cAAD,CAAb,EAA+BsB,IAA/B,CADiB,GAEtB1B,KAAK,CAACS,YAAY,CAACL,cAAD,CAAb,EAA+BN,OAAO,CAAC2B,MAAD,CAAtC,EAAgDhB,YAAhD,CAFT;EAIA,MAAMG,WAAW,GAAGgB,aAAa,CAAChB,WAAd,GAA4BL,YAAY,GAAG,CAA/D;EAEA,MAAMsB,gBAAgB,GAAG;IACvBb,eADuB;IAEvBc,KAAK,EAAElB,WAFgB;IAGvBmB,MAAM,EAAEnB,WAHe;IAIvBoB,OAAO,EAAEzB;EAJc,CAAzB;EAOA,oBACE;IAAK,SAAS,EAAEL,KAAK,CAAC+B,WAAtB;IAAmC,KAAK,EAAEJ;EAA1C,gBACE,oBAAC,eAAD;IACE,IAAI,EAAG,MAAKN,QAAS,EADvB;IAEE,KAAK,EAAEI,kBAFT;IAGE,aAAWC,aAAa,CAACjB;EAH3B,EADF,CADF;AASD,CAhCY,CAAb;AAkCAU,IAAI,CAACa,SAAL,2CAAiB;EACfX,QAAQ,EAAE9B,SAAS,CAAC0C,MAAV,CAAiBC,UADZ;EAEfZ,SAAS,EAAE/B,SAAS,CAAC0C,MAFN;EAGfnB,eAAe,EAAEvB,SAAS,CAAC0C,MAHZ;EAIfV,MAAM,EAAEhC,SAAS,CAAC4C,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CAAhB,CAJO;EAKfX,IAAI,EAAEjC,SAAS,CAAC6C,KAAV,CAAgB;IACpB3B,MAAM,EAAEjB,MADY;IAEpBkB,WAAW,EAAEnB,SAAS,CAACC;EAFH,CAAhB;AALS,CAAjB;AAWA,eAAe2B,IAAf"}

package/es/atom/icon/style.css

@@ -0,0 +1,6 @@
+.iconWrapper {
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/globals.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'browser-env';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'css-color-function';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}
+{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'browser-env';\ndeclare module 'react-native/*';\ndeclare module 'css-color-function';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}

package/es/molecule/dashboard/learning-profile-banner/style.css

@@ -148,10 +148,6 @@
     font-size: 16px;
     line-height: 19px;
   }
-  
-  .cta {
-    max-width: 175px;
-  }
 }
 
 @media mobile {
@@ -162,6 +158,8 @@
 
   .banner {
     justify-content: center;
+    padding-right: 24px;
+    padding-left: 24px;
   }
 
   .right {
@@ -183,7 +181,7 @@
   }
 
   .cta {
-    max-width: 150px;
+    margin-top: 12px;
   }
 }
 

package/es/molecule/learning-profile-radar-chart/index.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { FormatedDataType, LearningProfileRadarChartPropTypes } from './types';
+export declare const formatData: (legend: {
+    [ref: string]: string;
+}, data_: LearningProfileRadarChartPropTypes['data']) => FormatedDataType[];
+export declare const LearningProfileRadarChart: {
+    ({ data, legend, totalDataset, colors: colorsProps, onClick, width, height }: LearningProfileRadarChartPropTypes): JSX.Element;
+    propTypes: {
+        data: import("prop-types").Validator<{
+            [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
+        }>;
+        totalDataset: import("prop-types").Validator<number>;
+        onDotClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        colors: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            gradient: import("prop-types").Requireable<import("prop-types").InferProps<{
+                fill: import("prop-types").Requireable<(string | null | undefined)[]>;
+                stroke: import("prop-types").Requireable<(string | null | undefined)[]>;
+            }>>;
+            percentage: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+                background: import("prop-types").Requireable<string>;
+            }>>;
+            label: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+            }>>;
+        }> | null | undefined)[]>;
+        width: import("prop-types").Requireable<number>;
+        height: import("prop-types").Requireable<number>;
+    };
+};
+declare const ResponsiveLearningProfileRadarChart: {
+    (props: LearningProfileRadarChartPropTypes): JSX.Element;
+    propTypes: {
+        data: import("prop-types").Validator<{
+            [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
+        }>;
+        totalDataset: import("prop-types").Validator<number>;
+        onDotClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        colors: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            gradient: import("prop-types").Requireable<import("prop-types").InferProps<{
+                fill: import("prop-types").Requireable<(string | null | undefined)[]>;
+                stroke: import("prop-types").Requireable<(string | null | undefined)[]>;
+            }>>;
+            percentage: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+                background: import("prop-types").Requireable<string>;
+            }>>;
+            label: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: import("prop-types").Requireable<string>;
+            }>>;
+        }> | null | undefined)[]>;
+        width: import("prop-types").Requireable<number>;
+        height: import("prop-types").Requireable<number>;
+    };
+};
+export default ResponsiveLearningProfileRadarChart;
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/learning-profile-radar-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AA+OjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;kFAQnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CA8GpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}

package/es/molecule/learning-profile-radar-chart/index.js

@@ -0,0 +1,387 @@
+import _findKey from "lodash/fp/findKey";
+import _flatten from "lodash/fp/flatten";
+import _times from "lodash/fp/times";
+import _fromPairs from "lodash/fp/fromPairs";
+import _omit from "lodash/fp/omit";
+import _isEmpty from "lodash/fp/isEmpty";
+import _values from "lodash/fp/values";
+import _toPairs from "lodash/fp/toPairs";
+import _map from "lodash/fp/map";
+import _getOr from "lodash/fp/getOr";
+import _size from "lodash/fp/size";
+import _mapValues from "lodash/fp/mapValues";
+import _keyBy from "lodash/fp/keyBy";
+import _pipe from "lodash/fp/pipe";
+const _excluded = ["offset", "alignment"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Radar, RadarChart, PolarGrid, PolarAngleAxis, ResponsiveContainer, Tooltip, PolarRadiusAxis } from 'recharts';
+import classnames from 'classnames';
+import { isMobile as getIsMobile } from '../../util/check-is-mobile';
+import style from './style.css';
+import { learningProfileRadarChartPropTypes } from './types';
+
+/* TICK_POSITIONS */
+const top = {
+  offset: {
+    x: -100,
+    y: -65
+  },
+  alignment: 'center',
+  margin: 'auto'
+};
+const bottom = {
+  offset: {
+    x: -100,
+    y: 10
+  },
+  alignment: 'center',
+  margin: 'auto'
+};
+const right = {
+  offset: {
+    x: 30,
+    y: -10
+  },
+  alignment: 'start',
+  marginRight: 'auto'
+};
+const left = {
+  offset: {
+    x: -230,
+    y: -10
+  },
+  alignment: 'end',
+  marginLeft: 'auto'
+};
+/* CONSTANTS */
+
+const BLACK = '#000000ff';
+const WHITE = '#ffffffff';
+const DEFAULT_MAIN_COLOR = '#0062ffff';
+const DEFAULT_COLORS = {
+  gradient: {
+    fill: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR],
+    stroke: [DEFAULT_MAIN_COLOR, DEFAULT_MAIN_COLOR]
+  },
+  percentage: {
+    color: BLACK,
+    background: WHITE
+  },
+  label: {
+    color: BLACK
+  }
+};
+const CHART_CONFIGS = {
+  triangle: {
+    name: 'triangle',
+    ticks: [top, right, left],
+    sideCount: 3
+  },
+  quadrilateral: {
+    name: 'quadrilateral',
+    ticks: [top, right, bottom, left],
+    sideCount: 4
+  },
+  pentagon: {
+    name: 'pentagon',
+    ticks: [top, right, right, left, left],
+    sideCount: 5
+  },
+  hexagon: {
+    name: 'hexagon',
+    ticks: [top, right, right, bottom, left, left],
+    sideCount: 6
+  }
+};
+const DOT_DEFAULT_PROPS = {
+  strokeWidth: 4,
+  strokeOpacity: 0.2,
+  fill: '#fff',
+  r: 8,
+  pointerEvents: 'all',
+  style: {
+    cursor: 'pointer'
+  }
+};
+const DOT_ACTIVE_PROPS = {
+  fill: '#fff',
+  r: 8,
+  strokeWidth: 6,
+  strokeOpacity: 0.5
+};
+const RADAR_DEFAULT_PROPS = {
+  strokeWidth: 6,
+  strokeOpacity: 0.2,
+  fillOpacity: 0.2
+};
+/* COMPONENTS */
+
+const Gradient = ({
+  type,
+  colors: [firstColor, secondColor]
+}) => /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  id: `gradient-${type}`,
+  x1: "0%",
+  y1: "0%",
+  x2: "0%",
+  y2: "100%"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: "0%",
+  stopColor: firstColor
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "100%",
+  stopColor: secondColor
+})));
+
+const CustomTooltip = ({
+  active,
+  payload,
+  label
+}) => active && !!payload?.length ? /*#__PURE__*/React.createElement("div", {
+  className: style.tooltip
+}, /*#__PURE__*/React.createElement("p", null, label), /*#__PURE__*/React.createElement("p", null, payload[0].value, "%")) : null;
+
+const CustomDot = ({
+  cx,
+  cy,
+  payload,
+  onDotClick,
+  stroke,
+  activeDot,
+  dataName
+}) => /*#__PURE__*/React.createElement("circle", _extends({}, DOT_DEFAULT_PROPS, payload?.payload.subject === activeDot?.label && DOT_ACTIVE_PROPS, {
+  stroke,
+  cx,
+  cy,
+  onClick: e => {
+    e.stopPropagation();
+    if (!payload?.name) return;
+    onDotClick(payload.name);
+  },
+  'data-name': dataName
+}));
+
+const buildRadars = (totalDataset, handleOnDotClick, activeDot) => _times(index => {
+  const datakey = `value${index + 1}`;
+  const dataset = `dataset-${index + 1}`;
+  return /*#__PURE__*/React.createElement(Radar, _extends({}, RADAR_DEFAULT_PROPS, {
+    fill: `url(#gradient-fill-${index})`,
+    stroke: `url(#gradient-stroke-${index})`,
+    key: dataset,
+    name: dataset,
+    dataKey: datakey,
+    activeDot: _extends({}, DOT_ACTIVE_PROPS, {
+      stroke: `url(#gradient-stroke-${index})`
+    }) // only on mobile
+    // to handle dot style on hover (convert to click)
+    // use with the tooltip component
+    ,
+    dot: /*#__PURE__*/React.createElement(CustomDot, {
+      onDotClick: handleOnDotClick(datakey),
+      activeDot: activeDot,
+      dataKey: datakey,
+      stroke: `url(#gradient-stroke-${index})`,
+      dataName: dataset
+    })
+  }));
+}, totalDataset);
+
+const buildCustomLabel = ({
+  index,
+  x,
+  y,
+  percentagesValues,
+  label,
+  activeDot,
+  chartType,
+  formatedColors
+}) => {
+  const isCurrentDotActive = activeDot?.label === label;
+
+  const _CHART_CONFIGS$chartT = CHART_CONFIGS[chartType].ticks[index],
+        {
+    offset: {
+      x: offsetX,
+      y: offsetY
+    },
+    alignment
+  } = _CHART_CONFIGS$chartT,
+        rest = _objectWithoutPropertiesLoose(_CHART_CONFIGS$chartT, _excluded);
+
+  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("foreignObject", {
+    x: x + offsetX,
+    y: y + offsetY,
+    width: "200",
+    height: "65"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(style.tickWrapper, isCurrentDotActive && style.tickWrapperFocus),
+    style: _extends({}, rest, {
+      alignItems: alignment,
+      textAlign: alignment,
+      opacity: !_isEmpty(activeDot) && !isCurrentDotActive ? 0.3 : 1
+    })
+  }, formatedColors.map(({
+    percentage: {
+      color,
+      background
+    },
+    label: {
+      color: colorLabel
+    }
+  }, i) => /*#__PURE__*/React.createElement(Fragment, {
+    key: i
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.tickValue,
+    style: {
+      color,
+      background
+    }
+  }, percentagesValues[i]), /*#__PURE__*/React.createElement("span", {
+    className: style.tickLabel,
+    style: {
+      color: colorLabel
+    }
+  }, label))))));
+};
+/* UTILS */
+
+
+const CHART_CONFIGS_BY_SIDE_COUNT = _pipe(_keyBy('sideCount'), _mapValues('name'))(CHART_CONFIGS);
+
+const formatValues = _pipe(values_ => _flatten([values_]), values_ => values_.map((val, i) => [`value${i + 1}`, val]), _fromPairs);
+/* this convert incoming component data to rechart data structure */
+
+
+export const formatData = (legend, data_) => _pipe(_toPairs, _map(([ref, values_]) => _extends({}, formatValues(values_), {
+  subject: legend[ref]
+})))(data_);
+export const LearningProfileRadarChart = ({
+  data,
+  legend,
+  totalDataset,
+  colors: colorsProps,
+  onClick,
+  width,
+  height
+}) => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [activeDot, setActiveDot] = useState();
+
+  const formatedColors = _times(i => {
+    if (!colorsProps?.length) return DEFAULT_COLORS;
+    const colors = colorsProps[i];
+    return colors ? Object.assign({}, DEFAULT_COLORS, colors) : DEFAULT_COLORS;
+  })(totalDataset);
+
+  const chartType = useMemo(() => _getOr('hexagon', _size(data), CHART_CONFIGS_BY_SIDE_COUNT), [data]);
+  const gradients = useMemo(() => formatedColors.map(({
+    gradient: {
+      fill,
+      stroke
+    }
+  }, index) => /*#__PURE__*/React.createElement("svg", {
+    key: `gradient-${index}`
+  }, /*#__PURE__*/React.createElement(Gradient, {
+    type: `fill-${index}`,
+    colors: fill
+  }), /*#__PURE__*/React.createElement(Gradient, {
+    type: `stroke-${index}`,
+    colors: stroke
+  }))), [formatedColors]);
+  const userAgent = navigator?.userAgent;
+  const isMobile_ = useMemo(() => getIsMobile(userAgent), [userAgent]);
+  const setIsMobile_ = useCallback(() => {
+    setIsMobile(isMobile_);
+  }, [isMobile_]);
+  useEffect(() => setIsMobile_(), [setIsMobile_]);
+  useEffect(() => {
+    const handleClick = () => setActiveDot(undefined);
+
+    !_isEmpty(activeDot) && window.addEventListener('click', handleClick);
+    return () => {
+      window.removeEventListener('click', handleClick);
+    };
+  }, [activeDot]);
+
+  function handleOnDotClick(datakey) {
+    return label => {
+      const payload = formatedData.find(data_ => data_.subject === label);
+
+      const skillRef = _findKey(val => val === payload?.subject, legend);
+
+      if (payload && skillRef) {
+        setActiveDot({
+          key: datakey,
+          value: payload[datakey],
+          label: payload.subject
+        });
+        onClick(skillRef);
+      }
+    };
+  }
+
+  function renderCustomLabel({
+    x,
+    y,
+    payload: {
+      value: label
+    },
+    index
+  }) {
+    const currentData = formatedData.find(({
+      subject
+    }) => subject === label);
+
+    const percentagesValues = _pipe(_omit('subject'), _mapValues(value => `${value}%`), _values)(currentData);
+
+    return buildCustomLabel({
+      index,
+      x,
+      y,
+      percentagesValues,
+      label,
+      activeDot,
+      chartType,
+      formatedColors
+    });
+  }
+
+  const formatedData = useMemo(() => formatData(legend, data), [legend, data]);
+  return /*#__PURE__*/React.createElement(RadarChart, {
+    width: width,
+    height: height,
+    cx: "50%",
+    cy: "50%",
+    outerRadius: "80%",
+    data: formatedData
+  }, gradients, buildRadars(totalDataset, handleOnDotClick, activeDot), /*#__PURE__*/React.createElement(PolarGrid, {
+    strokeDasharray: 15,
+    strokeWidth: 3,
+    radialLines: false
+  }), /*#__PURE__*/React.createElement(PolarAngleAxis, {
+    dataKey: "subject",
+    tick: !isMobile && renderCustomLabel
+  }), /*#__PURE__*/React.createElement(PolarRadiusAxis, {
+    tick: false,
+    axisLine: false,
+    domain: [0, 100]
+  }), isMobile ? /*#__PURE__*/React.createElement(Tooltip, {
+    cursor: false,
+    content: /*#__PURE__*/React.createElement(CustomTooltip, null)
+  }) : null);
+};
+
+const ResponsiveLearningProfileRadarChart = props => /*#__PURE__*/React.createElement(ResponsiveContainer, {
+  width: "100%",
+  height: "100%"
+}, /*#__PURE__*/React.createElement(LearningProfileRadarChart, props));
+
+LearningProfileRadarChart.propTypes = process.env.NODE_ENV !== "production" ? learningProfileRadarChartPropTypes : {};
+ResponsiveLearningProfileRadarChart.propTypes = process.env.NODE_ENV !== "production" ? learningProfileRadarChartPropTypes : {};
+export default ResponsiveLearningProfileRadarChart;
+//# sourceMappingURL=index.js.map