@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTAttachmentList/utils.js

@@ -0,0 +1,72 @@
+import { inputFiles } from '@widergy/web-utils/lib/constants/files';
+import { DEFAULT_ATTACHMENT_NAME } from './constants';
+if (window['pdfjs-dist/build/pdf']) window['pdfjs-dist/build/pdf'].GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(window['pdfjs-dist/build/pdf'].version, "/pdf.worker.js");
+const getImage = async imageUrl => fetch(imageUrl, {
+  method: 'GET'
+}).catch(error => console.error(error)); // eslint-disable-line no-console
+
+export const getBlobFromUrl = async (imageUrl, callback) => {
+  if (!imageUrl || !callback) return false;
+  const response = await getImage(imageUrl);
+  if (response !== null && response !== void 0 && response.ok) {
+    try {
+      const blob = await response.blob();
+      callback(blob);
+    } catch {
+      callback(null);
+    }
+  } else {
+    callback(null);
+  }
+};
+const lengthMatches = (length1, length2, toleranceInPercentage) => {
+  const delta = length1 * (toleranceInPercentage / 100);
+  return Math.abs(length1 - length2) < delta;
+};
+const pageMatches = (page, allowedPDFUploadSizes) => {
+  const viewport = page.getViewport({
+    scale: 1
+  });
+  return allowedPDFUploadSizes.some(size => lengthMatches(size.heightInPt, viewport.height, size.toleranceInPercentage) && lengthMatches(size.widthInPt, viewport.width, size.toleranceInPercentage) || lengthMatches(size.heightInPt, viewport.width, size.toleranceInPercentage) && lengthMatches(size.widthInPt, viewport.height, size.toleranceInPercentage));
+};
+export const pdfAspectRatioValidation = async (file, allowedPDFUploadSizes) => {
+  const documentLoadingTask = window['pdfjs-dist/build/pdf'].getDocument(URL.createObjectURL(file));
+  const document = await documentLoadingTask.promise;
+  const totalPages = document.numPages;
+  const getPagePromises = [];
+  for (let pageNumber = 1; pageNumber <= totalPages; pageNumber += 1) {
+    getPagePromises.push(document.getPage(pageNumber));
+  }
+  const pages = await Promise.all(getPagePromises);
+  return pages.every(page => pageMatches(page, allowedPDFUploadSizes));
+};
+export const isImage = file => inputFiles.image.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+export const isPDF = file => inputFiles.pdf.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+export const isAudio = file => inputFiles.audio.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+export const isVideo = file => inputFiles.video.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+export const isHTML = file => inputFiles.html.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+export const isCSV = file => inputFiles.csv.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+export const isXLS = file => inputFiles.xls.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+export const isXLSX = file => inputFiles.xlsx.validType.includes(file === null || file === void 0 ? void 0 : file.type);
+export const isDownloadable = file => isPDF(file) || isCSV(file) || isXLS(file) || isXLSX(file);
+export const hasPreview = file => isImage(file) || isAudio(file) || isVideo(file) || isPDF(file);
+export const isValidFile = file => hasPreview(file) || isPDF(file) || isHTML(file);
+export const isNewFile = (newFile, oldFile) => {
+  var _newFile$file, _oldFile$file;
+  if (!newFile && !oldFile) return false;
+  if (!newFile || !oldFile) return true;
+  const newFileType = typeof newFile;
+  const oldFileType = typeof oldFile;
+  if (newFileType !== oldFileType) return true;
+  if (newFileType === 'string') return newFile !== oldFile;
+  return ((_newFile$file = newFile.file) === null || _newFile$file === void 0 ? void 0 : _newFile$file.lastModified) !== ((_oldFile$file = oldFile.file) === null || _oldFile$file === void 0 ? void 0 : _oldFile$file.lastModified);
+};
+export const getAvailableFileTypesLabel = acceptedFileTypes => {
+  if (Array.isArray(acceptedFileTypes)) {
+    return acceptedFileTypes.join(', ').replace(/,\s([^,]+)$/, ' o $1');
+  }
+  return acceptedFileTypes.split(',').filter(type => type.trim().startsWith('.')).join(', ').replace(/,\s([^,]+)$/, ' o $1');
+};
+export const getSizeInMB = maxFileSize => (maxFileSize / 1048576).toFixed(2);
+export const getNotRepeatedFiles = files => files.filter((file, index, self) => index === self.findIndex(f => f.name === file.name));
+export const getDefaultAttachment = (fileType, index) => "".concat(DEFAULT_ATTACHMENT_NAME, "-").concat(index).concat(fileType && ".".concat(fileType));

package/dist/esm/components/UTAvatar/constants.js

@@ -0,0 +1,144 @@
+export const DEFAULT_ICON = 'IconUser';
+export const SHAPE = {
+  CIRCLE: 'circle',
+  SQUARE: 'rounded'
+};
+export const SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  XLARGE: 'xlarge',
+  XXLARGE: 'xxlarge',
+  XXXLARGE: 'xxxlarge'
+};
+export const TYPE = {
+  ICON: 'icon',
+  LETTER: 'letter'
+};
+export const SIZE_VARIANTS = {
+  [SIZE.SMALL]: {
+    [TYPE.LETTER]: 'small',
+    [TYPE.ICON]: 16
+  },
+  [SIZE.MEDIUM]: {
+    [TYPE.LETTER]: 'subtitle1',
+    [TYPE.ICON]: 16
+  },
+  [SIZE.LARGE]: {
+    [TYPE.LETTER]: 'subtitle1',
+    [TYPE.ICON]: 18
+  },
+  [SIZE.XLARGE]: {
+    [TYPE.LETTER]: 'title2',
+    [TYPE.ICON]: 24
+  },
+  [SIZE.XXLARGE]: {
+    [TYPE.LETTER]: 'title1',
+    [TYPE.ICON]: 28
+  },
+  [SIZE.XXXLARGE]: {
+    [TYPE.LETTER]: 'title1',
+    [TYPE.ICON]: 32
+  }
+};
+export const defaultPalette = [{
+  backgroundColor: 'rgb(0, 0, 180)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(175, 13, 102)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(146,248,70)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(255, 200, 47)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(255,118,0)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(0, 0, 180)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(235,235,222)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(100,100,100)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(255,255,0)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(55,19,112)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(255,255,150)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(202,62,94)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(205,145,63)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(12,75,100)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(175,155,50)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: '#000',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(37,70,25)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(121,33,135)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(83,140,208)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(0,154,37)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(178,220,205)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(255,152,213)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(0,0,74)',
+  color: '#FFF',
+  colorTheme: 'light'
+}, {
+  backgroundColor: 'rgb(175,200,74)',
+  color: '#000',
+  colorTheme: 'dark'
+}, {
+  backgroundColor: 'rgb(63,25,12)',
+  color: '#FFF',
+  colorTheme: 'light'
+}];

package/dist/esm/components/UTAvatar/index.js

@@ -0,0 +1,73 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import { arrayOf, bool, shape, string } from 'prop-types';
+import UTLabel from '../UTLabel';
+import UTIcon from '../UTIcon';
+import componentUtils from '../../utils/componentUtils';
+import { defaultPalette, DEFAULT_ICON, SHAPE, SIZE, SIZE_VARIANTS, TYPE } from './constants';
+import ownStyles from './styles.module.scss';
+const UTAvatar = _ref => {
+  var _iconProps$name;
+  let {
+    abbreviation,
+    areaShape = SHAPE.CIRCLE,
+    className,
+    iconProps,
+    labelProps,
+    manualColors,
+    palette,
+    size = SIZE.MEDIUM,
+    dataTestId,
+    type = TYPE.LETTER,
+    userName
+  } = _ref;
+  const {
+    getFirstLetter,
+    getAvatarColors
+  } = componentUtils;
+  const {
+    colorTheme,
+    ...styles
+  } = getAvatarColors(type === TYPE.LETTER ? userName || abbreviation : (_iconProps$name = iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) !== null && _iconProps$name !== void 0 ? _iconProps$name : DEFAULT_ICON, palette || defaultPalette);
+  const sizeVariant = SIZE_VARIANTS[size][type];
+  const textToShow = abbreviation || getFirstLetter(userName);
+  return /*#__PURE__*/React.createElement(Avatar, {
+    className: "".concat(className !== null && className !== void 0 ? className : '', " ").concat(size ? ownStyles[size] : ''),
+    style: manualColors ? {} : styles,
+    variant: areaShape,
+    "data-testid": dataTestId
+  }, type === TYPE.LETTER ? /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: colorTheme,
+    variant: sizeVariant,
+    weight: "medium"
+  }, labelProps), textToShow) : /*#__PURE__*/React.createElement(UTIcon, _extends({
+    colorTheme: colorTheme,
+    name: DEFAULT_ICON,
+    size: sizeVariant
+  }, iconProps)));
+};
+UTAvatar.propTypes = {
+  abbreviation: string,
+  className: string,
+  iconProps: shape({
+    className: string,
+    variant: string
+  }),
+  labelProps: shape({
+    className: string,
+    variant: string,
+    weight: string
+  }),
+  manualColors: bool,
+  palette: arrayOf(shape({
+    color: string,
+    backgroundColor: string
+  })),
+  areaShape: string,
+  size: string,
+  dataTestId: string,
+  type: string,
+  userName: string
+};
+export default UTAvatar;

package/dist/esm/components/UTAvatar/stories/UTAvatar.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTAvatarStories from './UTAvatar.stories';
+
+<Meta of={UTAvatarStories} />
+
+<Title>UTAvatar</Title>
+
+<Description of={UTAvatarStories} />
+
+<Canvas of={UTAvatarStories.Playground} withToolbar />
+
+<ArgTypes exclude={['classes']} />

package/dist/esm/components/UTAvatar/stories/UTAvatar.stories.js

@@ -0,0 +1,31 @@
+import UTAvatar from '../index';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTAvatar',
+  component: UTAvatar,
+  args: {
+    userName: undefined,
+    className: undefined,
+    labelProps: undefined,
+    iconProps: undefined,
+    palette: undefined,
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS,
+    options: {
+      storySort: {
+        method: 'alphabetical'
+      }
+    }
+  }
+};
+export const Playground = {
+  args: {
+    userName: 'John Doe'
+  },
+  name: 'Playground'
+};

package/dist/esm/components/UTAvatar/stories/UTAvatarColors.stories.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import UTAvatar from '../index';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTAvatar/Colors',
+  component: UTAvatar,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const AutomaticColors = {
+  args: {
+    userName: 'John Doe',
+    manualColors: false
+  }
+};
+export const ManualColors = {
+  args: {
+    userName: 'Manual Colors',
+    manualColors: true
+  }
+};
+export const DifferentNames = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Alice"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Bob"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Charlie"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Diana"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Edward"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Fiona"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "George"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Hannah"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Isaac"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Julia"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Kevin"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Laura"
+  }))
+};
+export const SameNameConsistentColor = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Doe John"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Doe John"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Doe John"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Smith Jane"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Smith Jane"
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Smith Jane"
+  }))
+};

package/dist/esm/components/UTAvatar/stories/UTAvatarShapes.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import UTAvatar from '../index';
+import { SHAPE } from '../constants';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTAvatar/Shapes',
+  component: UTAvatar,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const Circle = {
+  args: {
+    userName: 'Isabella Martinez',
+    areaShape: SHAPE.CIRCLE
+  }
+};
+export const Square = {
+  args: {
+    userName: 'Jack Robinson',
+    areaShape: SHAPE.SQUARE
+  }
+};
+export const AllShapes = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Circle",
+    areaShape: SHAPE.CIRCLE
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Square",
+    areaShape: SHAPE.SQUARE
+  }))
+};

package/dist/esm/components/UTAvatar/stories/UTAvatarSizes.stories.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import UTAvatar from '../index';
+import { SIZE, TYPE } from '../constants';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTAvatar/Sizes',
+  component: UTAvatar,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const Small = {
+  args: {
+    userName: 'Alice Brown',
+    size: SIZE.SMALL
+  }
+};
+export const Medium = {
+  args: {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: SIZE.MEDIUM,
+    type: TYPE.ICON
+  }
+};
+export const Large = {
+  args: {
+    userName: 'Emma Wilson',
+    size: SIZE.LARGE
+  }
+};
+export const XLarge = {
+  args: {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: SIZE.XLARGE,
+    type: TYPE.ICON
+  }
+};
+export const XXLarge = {
+  args: {
+    userName: 'Grace Taylor',
+    size: SIZE.XXLARGE
+  }
+};
+export const XXXLarge = {
+  args: {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: SIZE.XXXLARGE,
+    type: TYPE.ICON
+  }
+};
+export const AllSizes = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Small",
+    size: SIZE.SMALL
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: SIZE.MEDIUM,
+    type: TYPE.ICON
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Large",
+    size: SIZE.LARGE
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: SIZE.XLARGE,
+    type: TYPE.ICON
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "XXLarge",
+    size: SIZE.XXLARGE
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: SIZE.XXXLARGE,
+    type: TYPE.ICON
+  }))
+};

package/dist/esm/components/UTAvatar/stories/UTAvatarTypes.stories.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import UTAvatar from '../index';
+import { TYPE } from '../constants';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTAvatar/Types',
+  component: UTAvatar,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const Letter = {
+  args: {
+    userName: 'John Doe',
+    type: TYPE.LETTER
+  }
+};
+export const WithAbbreviation = {
+  args: {
+    userName: 'John Doe',
+    abbreviation: 'JD',
+    type: TYPE.LETTER
+  },
+  name: 'With Abbreviation'
+};
+export const Icon = {
+  args: {
+    userName: 'Icon Avatar',
+    type: TYPE.ICON
+  }
+};
+export const LetterVsIcon = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Letter Type",
+    type: TYPE.LETTER
+  }), /*#__PURE__*/React.createElement(UTAvatar, {
+    userName: "Icon Type",
+    type: TYPE.ICON
+  }))
+};