@ultraviolet/plus 0.4.10 → 0.5.1

package/dist/src/components/EstimateCost/componentStyle.js

@@ -0,0 +1,196 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { Badge, zoomIn } from '@ultraviolet/ui';
+import { MAX_CELL_WIDTH } from './constants.js';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const spacedChildren = process.env.NODE_ENV === "production" ? {
+  name: "14bpf6g",
+  styles: ">*{margin-top:0;}>*+*{margin-top:16px;}"
+} : {
+  name: "14bpf6g",
+  styles: ">*{margin-top:0;}>*+*{margin-top:16px;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const StyledDiv = /*#__PURE__*/_styled("div", {
+  target: "e1xb5k8j14"
+})(process.env.NODE_ENV === "production" ? {
+  name: "158icaa",
+  styles: "margin-left:4px"
+} : {
+  name: "158icaa",
+  styles: "margin-left:4px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledTable = /*#__PURE__*/_styled('table', {
+  shouldForwardProp: prop => !['noTotal'].includes(prop),
+  target: "e1xb5k8j13"
+})("width:100%;", spacedChildren, ";border:1px solid ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.border;
+}, ";", _ref2 => {
+  let {
+    noTotal
+  } = _ref2;
+  return noTotal ? 'border-radius: 4px;' : 'border-radius: 4px 4px 0 4px;';
+}, ";");
+const StyledFeesTable = /*#__PURE__*/_styled('table', {
+  target: "e1xb5k8j12"
+})("width:100%;", spacedChildren, ";border:1px solid ", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.border;
+}, ";border-radius:4px;margin-top:16px;");
+const PriceCol = /*#__PURE__*/_styled("td", {
+  target: "e1xb5k8j11"
+})("background-color:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.background;
+}, ";");
+const PriceCell = theme => /*#__PURE__*/css("border-left:1px solid ", theme.colors.neutral.border, ";background-color:", theme.colors.neutral.backgroundWeak, ";");
+const Cell = /*#__PURE__*/_styled('td', {
+  shouldForwardProp: prop => !['tabulation', 'hasBorder', 'primary'].includes(prop),
+  target: "e1xb5k8j10"
+})("padding-left:", _ref5 => {
+  let {
+    tabulation
+  } = _ref5;
+  return (tabulation ?? 0) * 8 + 16;
+}, "px;padding-right:16px;position:relative;max-width:", MAX_CELL_WIDTH, ";", _ref6 => {
+  let {
+    theme,
+    hasBorder
+  } = _ref6;
+  return hasBorder && /*#__PURE__*/css("&:before{content:'';position:absolute;left:0;bottom:0;height:1px;width:calc(100% - 32px);margin-left:16px;border-bottom:1px solid ", theme.colors.neutral.border, ";}");
+}, " ", _ref7 => {
+  let {
+    theme,
+    primary
+  } = _ref7;
+  return primary ? /*#__PURE__*/css("background:", theme.colors.primary.background, ";") : null;
+}, ";");
+const TotalPriceCell = /*#__PURE__*/_styled(Cell, {
+  target: "e1xb5k8j9"
+})("border-color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral.border;
+}, ";border-style:solid;border-width:0 1px 1px 1px;border-radius:0 0 4px 4px;min-width:195px;height:56px;background-color:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.primary.background;
+}, ";");
+const EmptyTable = /*#__PURE__*/_styled("table", {
+  target: "e1xb5k8j8"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1bmvmcg",
+  styles: "margin:0;width:100%"
+} : {
+  name: "1bmvmcg",
+  styles: "margin:0;width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Title = /*#__PURE__*/_styled("h3", {
+  target: "e1xb5k8j7"
+})("display:flex;align-items:center;padding:0;margin:0;font-size:18px;color:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral.text;
+}, ";font-weight:500;padding:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space['2'];
+}, ";");
+const EmptyCell = /*#__PURE__*/_styled("td", {
+  target: "e1xb5k8j6"
+})(process.env.NODE_ENV === "production" ? {
+  name: "22sgtr",
+  styles: "width:538px"
+} : {
+  name: "22sgtr",
+  styles: "width:538px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const TimeCell = /*#__PURE__*/_styled("div", {
+  target: "e1xb5k8j5"
+})(process.env.NODE_ENV === "production" ? {
+  name: "vvsuqs",
+  styles: "max-width:220px;padding:16px;align-items:start;text-align:left;float:right"
+} : {
+  name: "vvsuqs",
+  styles: "max-width:220px;padding:16px;align-items:start;text-align:left;float:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const BadgeBeta = /*#__PURE__*/_styled(Badge, {
+  shouldForwardProp: prop => !['long'].includes(prop),
+  target: "e1xb5k8j4"
+})("margin-left:", _ref12 => {
+  let {
+    long
+  } = _ref12;
+  return long ? '-185px' : '-115px';
+}, ";position:absolute;top:calc(50% - 16px);");
+const OverlayRow = /*#__PURE__*/_styled('li', {
+  shouldForwardProp: prop => !['isFirstElement', 'shouldBeHidden', 'hideFromOverlay'].includes(prop),
+  target: "e1xb5k8j3"
+})("min-width:200px;padding:0 24px;border-left:1px solid ", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.neutral.border;
+}, ";", _ref14 => {
+  let {
+    isFirstElement
+  } = _ref14;
+  return isFirstElement && `border: 0;`;
+}, " &:first-of-type,&:last-child{border:0;}@media (max-width: 1420px){", _ref15 => {
+  let {
+    shouldBeHidden
+  } = _ref15;
+  return shouldBeHidden && 'display: none;';
+}, ";}", _ref16 => {
+  let {
+    hideFromOverlay
+  } = _ref16;
+  return hideFromOverlay && 'display: none;';
+}, ";");
+const StyledLeftSide = /*#__PURE__*/_styled("div", {
+  target: "e1xb5k8j2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1x1yonv",
+  styles: "display:flex;flex-direction:row;-webkit-box-pack:justify;justify-content:space-between;align-items:center;min-height:56px;padding-top:8px;padding-bottom:8px"
+} : {
+  name: "1x1yonv",
+  styles: "display:flex;flex-direction:row;-webkit-box-pack:justify;justify-content:space-between;align-items:center;min-height:56px;padding-top:8px;padding-bottom:8px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ItemResourceName = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['animated'].includes(prop),
+  target: "e1xb5k8j1"
+})("height:48px;display:flex;flex-direction:column;-webkit-box-pack:center;justify-content:center;animation:", _ref17 => {
+  let {
+    animated
+  } = _ref17;
+  return animated ? /*#__PURE__*/css("800ms ", zoomIn, ";") : '';
+}, ";");
+const StyledBadge = /*#__PURE__*/_styled(Badge, {
+  target: "e1xb5k8j0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "72s22w",
+  styles: "display:inline-block;height:24px;line-height:18px;font-size:12px;margin-right:8px"
+} : {
+  name: "72s22w",
+  styles: "display:inline-block;height:24px;line-height:18px;font-size:12px;margin-right:8px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+export { BadgeBeta, Cell, EmptyCell, EmptyTable, ItemResourceName, OverlayRow, PriceCell, PriceCol, StyledBadge, StyledDiv, StyledFeesTable, StyledLeftSide, StyledTable, TimeCell, Title, TotalPriceCell };

package/dist/src/components/EstimateCost/constants.js

@@ -0,0 +1,31 @@
+const APPROXIMATE_HOURS_IN_MONTH = 730;
+
+// As we base ou calculation on hours we need to multiply them by a multiplier
+// 1 month = 730 hours
+const multiplier = {
+  seconds: 1 / 60 / 60,
+  minutes: 1 / 60,
+  hours: 1,
+  days: 24,
+  months: APPROXIMATE_HOURS_IN_MONTH
+};
+
+// This is used to tell how many decimals depending on time unit
+// "hours": 5 === 5 decimals on hour unit
+const maximumFractionDigits = {
+  seconds: 10,
+  minutes: 8,
+  hours: 5,
+  days: 3,
+  months: 2
+};
+const maximumFractionDigitsLong = {
+  seconds: 12,
+  minutes: 10,
+  hours: 8,
+  days: 4,
+  months: 2
+};
+const MAX_CELL_WIDTH = '537px';
+
+export { APPROXIMATE_HOURS_IN_MONTH, MAX_CELL_WIDTH, maximumFractionDigits, maximumFractionDigitsLong, multiplier };

package/dist/src/components/EstimateCost/helper.js

@@ -0,0 +1,23 @@
+import { multiplier } from './constants.js';
+
+// time unit = hours, days, months
+// timeAmount = number of hours / days / months
+const calculatePrice = _ref => {
+  let {
+    price,
+    amount,
+    amountFree = 0,
+    timeUnit,
+    timeAmount,
+    discount = 0
+  } = _ref;
+  const value = (price - price * discount) * (timeAmount * multiplier[`${timeUnit}`]) * Math.max(amount - amountFree, 0);
+
+  // Avoid having negative price in any cases
+  if (value < 0) {
+    return 0;
+  }
+  return value;
+};
+
+export { calculatePrice };

package/dist/src/components/EstimateCost/locales/en.js

@@ -0,0 +1,23 @@
+var EstimateCostLocales = {
+  'estimate.cost.description': 'This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.',
+  'estimate.cost.label': 'Estimated cost',
+  'estimate.cost.beta.free': 'Free During Beta',
+  'estimate.cost.beta.discount': '% off during Beta',
+  'estimate.cost.beta.badge': 'Beta Version',
+  'estimate.cost.units.seconds.label': 'Second(s)',
+  'estimate.cost.units.minutes.label': 'Minute(s)',
+  'estimate.cost.units.hours.label': 'Hour(s)',
+  'estimate.cost.units.days.label': 'Day(s)',
+  'estimate.cost.units.months.label': 'Month(s)',
+  'estimate.cost.units.years.label': 'Year(s)',
+  'estimate.cost.fees.oneTime.title': 'One time fees',
+  'estimate.cost.fees.monthly.title': 'Each month',
+  'estimate.cost.fees.commitment': 'Commitment Fees',
+  'estimate.cost.units.gb.label': 'GB',
+  'estimate.cost.notDefined': 'Not defined',
+  'estimate.cost.submit.label': 'Create',
+  'estimate.cost.region.label': 'Region',
+  'estimate.cost.az.label': 'Availability Zone'
+};
+
+export { EstimateCostLocales as default };

package/dist/src/index.js

@@ -1,3 +1,4 @@
 export { ContentCard } from './components/ContentCard/index.js';
 export { ContentCardGroup } from './components/ContentCardGroup/index.js';
 export { CodeEditor } from './components/CodeEditor/CodeEditor.js';
+export { EstimateCost } from './components/EstimateCost/EstimateCost.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "0.4.10",
+  "version": "0.5.1",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -27,6 +27,7 @@
   ],
   "sideEffects": false,
   "type": "module",
+  "types": "./dist/index.d.ts",
   "exports": {
     "types": "./dist/index.d.ts",
     "default": "./dist/src/index.js"
@@ -40,16 +41,22 @@
   "devDependencies": {
     "@babel/core": "7.23.3",
     "@emotion/babel-plugin": "11.11.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "@ultraviolet/icons": "2.5.5"
   },
   "dependencies": {
     "@uiw/codemirror-extensions-langs": "4.21.20",
     "@uiw/codemirror-theme-material": "4.21.20",
     "@uiw/react-codemirror": "4.21.20",
+    "react-flatten-children": "1.1.2",
+    "react-intersection-observer": "9.5.3",
     "@ultraviolet/themes": "1.5.0",
-    "@ultraviolet/ui": "1.26.2"
+    "@ultraviolet/ui": "1.27.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"