@ntbjs/react-components 1.3.0-rc.8 → 2.0.0-rc.3

package/esm/components/widgets/AssetGallery/asset.propType.js

@@ -0,0 +1,53 @@
+import { objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+
+const assetShape = {
+  key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  previewUrl: PropTypes.string,
+  title: PropTypes.string,
+  note: PropTypes.shape({
+    icon: PropTypes.element,
+    message: PropTypes.string
+  }),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,
+  fileTypeIconPosition: PropTypes.oneOf(['top-left', 'top-right']),
+  group: PropTypes.string,
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    icon: PropTypes.element.isRequired,
+    onClick: PropTypes.func.isRequired,
+    className: PropTypes.shape,
+    component: PropTypes.func
+  })),
+  overlay: PropTypes.element,
+  completed: PropTypes.bool,
+  hasError: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  onContextMenu: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  summary: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    instructions: PropTypes.string,
+    instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),
+    headerLeft: PropTypes.node,
+    headerRight: PropTypes.node,
+    footerLeft: PropTypes.node,
+    footerRight: PropTypes.node
+  })
+};
+const assetShapeWithLayout = _objectSpread2(_objectSpread2({}, assetShape), {}, {
+  layout: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    translateX: PropTypes.number.isRequired,
+    translateY: PropTypes.number.isRequired,
+    type: PropTypes.oneOf(['groupLabel', 'asset']).isRequired,
+    hasHeightAndWidth: PropTypes.bool
+  }).isRequired
+});
+
+export { assetShape, assetShapeWithLayout };

package/esm/components/widgets/AssetGallery/widgets/AssetGallery/index.js

@@ -0,0 +1 @@
+export { default } from '../../AssetGallery.js';

package/esm/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js

@@ -0,0 +1,46 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../../node_modules/react/index.js';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { AssetPreviewTopBar as AssetPreviewTopBar$2, BackButtonContainer, BackHoverEffect, LeftText, ButtonsContainer } from './AssetPreviewTopBar.styled.js';
+import { ReactComponent as SvgArrowBack } from '../../../../icons/arrow-back.svg.js';
+import { ReactComponent as SvgClose } from '../../../../icons/close.svg.js';
+
+const _excluded = ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow", "border", "disabled"];
+const AssetPreviewTopBar = React.forwardRef(function AssetPreviewTopBar(_ref, forwardedRef) {
+  let {
+      onBackButtonClick,
+      backButtonText,
+      backButtonAsClose,
+      leftText,
+      buttons,
+      shadow,
+      border,
+      disabled
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(AssetPreviewTopBar$2, _extends({
+    ref: forwardedRef,
+    shadow: shadow,
+    border: border,
+    disabled: disabled
+  }, props), React.createElement(BackButtonContainer, {
+    onClick: onBackButtonClick,
+    disabled: disabled
+  }, backButtonAsClose ? React.createElement(React.Fragment, null, React.createElement(SvgClose, null), backButtonText) : React.createElement(BackHoverEffect, null, React.createElement(SvgArrowBack, null), backButtonText)), leftText && React.createElement(LeftText, null, leftText), Array.isArray(buttons) && React.createElement(ButtonsContainer, null, buttons.map((button, index) => React.createElement("span", {
+    key: 'topBarButton-' + index
+  }, button))));
+});
+AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  onBackButtonClick: PropTypes.func.isRequired,
+  backButtonText: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  backButtonAsClose: PropTypes.bool,
+  leftText: PropTypes.string,
+  shadow: PropTypes.bool,
+  border: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.node)
+} : {};
+AssetPreviewTopBar.defaultProps = {};
+var AssetPreviewTopBar$1 = AssetPreviewTopBar;
+
+export { AssetPreviewTopBar$1 as default };

package/esm/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js

@@ -0,0 +1,84 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7;
+const AssetPreviewTopBar = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  box-sizing: border-box;
+  align-items: center;
+  border-bottom: ${0};
+  color: inherit;
+  display: flex;
+  font-family: ${0};
+  font-weight: 400;
+  min-height: 72px;
+  padding: 0 24px;
+  width: 100%;
+
+  ${0}
+
+  ${0}
+
+      ${0}
+`), props => props.border ? `1px solid` : `none`, props => props.theme.primaryFontFamily, props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')), props => props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9'), props => props.disabled && css(_t2 || (_t2 = _`
+      cursor: not-allowed;
+    `)));
+const BackButtonContainer = styled.a.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  align-items: center;
+  display: flex;
+  font-size: 1.125rem;
+  ${0};
+
+  ${0}
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  > svg {
+    height: 24px;
+    margin-right: 16px;
+    width: 24px;
+  }
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.disabled && css(_t4 || (_t4 = _`
+      opacity: 0.5;
+      pointer-events: none;
+    `)));
+const BackHoverEffect = styled.div(_t5 || (_t5 = _`
+  display: inline-flex;
+  align-items: center;
+
+  > svg {
+    height: 24px;
+    margin-right: 16px;
+    width: 24px;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  &:hover > svg {
+    transform: translateX(-2px);
+  }
+`));
+const LeftText = styled.span.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+  font-size: 1.125rem;
+  margin-left: 16px;
+
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')));
+const ButtonsContainer = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+  align-items: center;
+  display: flex;
+  margin-left: auto;
+
+  > span {
+    margin-left: 16px;
+  }
+`));
+
+export { AssetPreviewTopBar, BackButtonContainer, BackHoverEffect, ButtonsContainer, LeftText };

package/esm/components/widgets/AssetPreview/AssetPreviewTopBar/widgets/AssetPreview/AssetPreviewTopBar/index.js

@@ -0,0 +1 @@
+export { default } from '../../../AssetPreviewTopBar.js';

package/esm/components/widgets/ContextMenu/ContextMenu.js

@@ -0,0 +1,24 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { ContextMenu as ContextMenu$2 } from './ContextMenu.styled.js';
+
+const _excluded = ["children"];
+const ContextMenu = React.forwardRef(function ContextMenu(_ref, forwardedRef) {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(ContextMenu$2, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "menu"
+  }), children);
+});
+ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.any
+} : {};
+ContextMenu.defaultProps = {};
+var ContextMenu$1 = ContextMenu;
+
+export { ContextMenu$1 as default };

package/esm/components/widgets/ContextMenu/ContextMenu.styled.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t;
+const ContextMenu = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  padding: 3px 0;
+`), props => props.theme.primaryFontFamily);
+
+export { ContextMenu };

package/esm/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -0,0 +1,46 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../../node_modules/react/index.js';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { ContextMenuItem as ContextMenuItem$2, IconContainer, SublevelIconContainer } from './ContextMenuItem.styled.js';
+import { ReactComponent as SvgTriangleRight } from '../../../../icons/triangle-right.svg.js';
+
+const _excluded = ["title", "icon", "onClickEffect", "opensSublevel", "hoverColors", "hoverBackgroundColors"];
+const ContextMenuItem = React.forwardRef(function ContextMenuItem(_ref, forwardedRef) {
+  let {
+      title,
+      icon,
+      onClickEffect,
+      opensSublevel,
+      hoverColors,
+      hoverBackgroundColors
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(ContextMenuItem$2, _extends({
+    ref: forwardedRef,
+    icon: icon,
+    onClick: onClickEffect,
+    hoverColors: hoverColors,
+    hoverBackgroundColors: hoverBackgroundColors,
+    opensSublevel: opensSublevel,
+    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
+  }, props, {
+    role: "menuitem"
+  }), icon && React.createElement(IconContainer, null, icon), React.createElement("span", null, title), opensSublevel && React.createElement(SublevelIconContainer, null, React.createElement(SvgTriangleRight, null)));
+});
+ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.element,
+  onClickEffect: PropTypes.func,
+  opensSublevel: PropTypes.bool,
+  hoverColors: PropTypes.arrayOf(PropTypes.string),
+  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)
+} : {};
+ContextMenuItem.defaultProps = {
+  icon: undefined,
+  hoverColors: undefined,
+  hoverBackgroundColors: undefined,
+  opensSublevel: false
+};
+var ContextMenuItem$1 = ContextMenuItem;
+
+export { ContextMenuItem$1 as default };

package/esm/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js

@@ -0,0 +1,83 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6;
+const ContextMenuItem = styled.span.attrs(applyDefaultTheme)(_t || (_t = _`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-family: ${0};
+  font-size: 0.875rem;
+  font-weight: normal;
+  height: 31px;
+  min-width: 160px;
+  padding: ${0};
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  :not(:last-of-type) {
+    border-bottom: 1px solid;
+
+    ${0}
+  }
+
+  :last-of-type {
+    height: 32px;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    ${0}
+  }
+
+  ${0}
+
+  ${0}
+`), props => props.theme.primaryFontFamily, props => props.opensSublevel ? '0 8px' : '0 28px 0 8px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE'), props => !props.icon && css(_t2 || (_t2 = _`
+      padding-left: 28px;
+    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.hoverColors && props.hoverColors[0] && props.hoverColors[1] && css(_t3 || (_t3 = _`
+      &&:hover {
+        ${0}
+      }
+    `), props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])), props => props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && css(_t4 || (_t4 = _`
+      &&:hover {
+        ${0}
+      }
+    `), props => props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1])));
+const IconContainer = styled.span.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-right: 8px;
+
+  svg {
+    height: 12px;
+  }
+`));
+const SublevelIconContainer = styled.span.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-left: auto;
+  margin-right: 8px;
+  padding-left: 24px;
+
+  svg {
+    height: 12px;
+  }
+`));
+
+export { ContextMenuItem, IconContainer, SublevelIconContainer };

package/esm/components/widgets/ContextMenu/ContextMenuItem/widgets/ContextMenu/ContextMenuItem/index.js

@@ -0,0 +1 @@
+export { default } from '../../../ContextMenuItem.js';

package/esm/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js

@@ -0,0 +1,24 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../../node_modules/react/index.js';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { ContextMenuItemsGroup as ContextMenuItemsGroup$2 } from './ContextMenuItemsGroup.styled.js';
+
+const _excluded = ["children"];
+const ContextMenuItemsGroup = React.forwardRef(function ContextMenuItemsGroup(_ref, forwardedRef) {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(ContextMenuItemsGroup$2, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "group"
+  }), children);
+});
+ContextMenuItemsGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.arrayOf(PropTypes.node)
+} : {};
+ContextMenuItemsGroup.defaultProps = {};
+var ContextMenuItemsGroup$1 = ContextMenuItemsGroup;
+
+export { ContextMenuItemsGroup$1 as default };

package/esm/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t;
+const ContextMenuItemsGroup = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  :not(:last-child) {
+    border-bottom: 1px solid;
+
+    ${0}
+  }
+
+  > * {
+    border-bottom: none !important;
+  }
+
+  > *:not(:last-child) {
+    height: 32px;
+  }
+`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')));
+
+export { ContextMenuItemsGroup };

package/esm/components/widgets/ContextMenu/ContextMenuItemsGroup/widgets/ContextMenu/ContextMenuItemsGroup/index.js

@@ -0,0 +1 @@
+export { default } from '../../../ContextMenuItemsGroup.js';

package/esm/components/widgets/ContextMenu/widgets/ContextMenu/index.js

@@ -0,0 +1 @@
+export { default } from '../../ContextMenu.js';

package/esm/components/widgets/InfoCard/InfoCard.js

@@ -0,0 +1,35 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { Container, MetricsContainer, IconTotalContainer, IconContainer, Total, Label, Link, ButtonLink, StyledArrowIcon } from './InfoCard.styled.js';
+
+const _excluded = ["icon", "total", "label", "linkLabel", "onClick", "height"];
+const InfoCard = React.forwardRef(function InfoCard(_ref, forwardedRef) {
+  let {
+      icon,
+      total,
+      label,
+      linkLabel,
+      onClick,
+      height
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const handleLinkClick = e => onClick(e);
+  return React.createElement(Container, _extends({
+    height: height,
+    ref: forwardedRef
+  }, props), React.createElement(MetricsContainer, null, React.createElement(IconTotalContainer, null, React.createElement(IconContainer, null, icon), React.createElement(Total, null, total)), React.createElement(Label, null, label)), linkLabel && onClick && React.createElement(Link, {
+    onClick: handleLinkClick
+  }, React.createElement(ButtonLink, null, linkLabel), React.createElement(StyledArrowIcon, null)));
+});
+InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: PropTypes.element.isRequired,
+  total: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  linkLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  height: PropTypes.number
+} : {};
+var InfoCard$1 = InfoCard;
+
+export { InfoCard$1 as default };

package/esm/components/widgets/InfoCard/InfoCard.styled.js

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+import { ReactComponent as SvgArrowForward } from '../../../icons/arrow-forward.svg.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9;
+const Container = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 500;
+  ${0};
+  height: ${0};
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 0;
+`), props => props.theme.primaryFontFamily, props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')), props => props.height ? `${props.height}px` : '50px');
+const MetricsContainer = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 70%;
+  gap: 5px;
+  padding-left: 15px;
+`));
+const IconTotalContainer = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`));
+const Total = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+  font-size: 1.22rem;
+  font-weight: 700;
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+const Label = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+  font-size: 0.875rem;
+  font-weight: 400;
+  opacity: 0.8;
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500')));
+const IconContainer = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 18px;
+  margin-top: -0.05rem;
+`));
+const Link = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 30%;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 20px;
+  cursor: pointer;
+  height: 100%;
+  gap: 10px;
+  svg {
+    transition: transform 0.2s ease-in-out;
+  }
+  &:hover svg {
+    transform: translateX(2px);
+  }
+`));
+const ButtonLink = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('black')));
+const StyledArrowIcon = styled(SvgArrowForward).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+  height: 20px;
+  margin-right: 10px;
+  ${0};
+`), props => props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('black')));
+
+export { ButtonLink, Container, IconContainer, IconTotalContainer, Label, Link, MetricsContainer, StyledArrowIcon, Total };

package/esm/components/widgets/InfoCard/widgets/InfoCard/index.js

@@ -0,0 +1 @@
+export { default } from '../../InfoCard.js';