@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTKpi/UTKpi.stories.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("stories/utils");
+var _constants = require("../UTStatus/constants");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react/prop-types */
+
+const UTKpiPlayground = _ref => {
+  let {
+    title,
+    primaryPrefix,
+    primaryValue,
+    primarySuffix,
+    secondaryPrefix,
+    secondaryValue,
+    secondarySuffix,
+    statusPrefix,
+    statusValue,
+    statusSuffix,
+    statusVariant,
+    statusIcon
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_.default, {
+    title: title,
+    primaryValue: {
+      prefix: primaryPrefix,
+      value: primaryValue,
+      suffix: primarySuffix
+    },
+    secondaryValue: {
+      prefix: secondaryPrefix,
+      value: secondaryValue,
+      suffix: secondarySuffix
+    },
+    status: {
+      prefix: statusPrefix,
+      value: statusValue,
+      suffix: statusSuffix
+    },
+    statusProps: {
+      variant: statusVariant,
+      Icon: statusIcon
+    }
+  });
+};
+var _default = exports.default = {
+  component: UTKpiPlayground,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título del KPI.',
+      table: {
+        category: 'Contenido',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    primaryPrefix: {
+      control: 'text',
+      name: 'primaryValue.prefix',
+      description: 'Prefijo del valor principal.',
+      table: {
+        category: 'PrimaryValue',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    primaryValue: {
+      control: 'text',
+      name: 'primaryValue.value',
+      description: 'Valor principal.',
+      table: {
+        category: 'PrimaryValue',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    primarySuffix: {
+      control: 'text',
+      name: 'primaryValue.suffix',
+      description: 'Sufijo del valor principal.',
+      table: {
+        category: 'PrimaryValue',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    secondaryPrefix: {
+      control: 'text',
+      name: 'secondaryValue.prefix',
+      description: 'Prefijo del valor secundario.',
+      table: {
+        category: 'SecondaryValue',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    secondaryValue: {
+      control: 'text',
+      name: 'secondaryValue.value',
+      description: 'Valor secundario.',
+      table: {
+        category: 'SecondaryValue',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    secondarySuffix: {
+      control: 'text',
+      name: 'secondaryValue.suffix',
+      description: 'Sufijo del valor secundario.',
+      table: {
+        category: 'SecondaryValue',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    statusPrefix: {
+      control: 'text',
+      name: 'status.prefix',
+      description: 'Prefijo del valor del estado.',
+      table: {
+        category: 'Status',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    statusValue: {
+      control: 'text',
+      name: 'status.value',
+      description: 'Valor del estado.',
+      table: {
+        category: 'Status',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    statusSuffix: {
+      control: 'text',
+      name: 'status.suffix',
+      description: 'Sufijo del valor del estado.',
+      table: {
+        category: 'Status',
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    statusVariant: {
+      name: 'statusProps.variant',
+      control: {
+        type: 'select'
+      },
+      options: ['error', 'information', 'success', 'unassigned', 'warning'],
+      description: 'Variante visual del badge',
+      table: {
+        category: 'Status',
+        defaultValue: {
+          summary: 'success'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.VARIANTS))
+        }
+      }
+    },
+    statusIcon: {
+      name: 'statusProps.Icon',
+      control: {
+        type: 'text'
+      },
+      description: 'Nombre del ícono',
+      table: {
+        category: 'Status',
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ['primaryValue', 'secondaryValue', 'status', 'statusProps']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para mostrar KPIs con un título, un valor principal y un valor secundario. También puede mostrar un estado con un icono, una variante y un texto.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTKpi'
+};
+const Default = exports.Default = {
+  name: 'Playground',
+  args: {
+    title: 'Total a pagar / Total neto',
+    primaryPrefix: '$',
+    primaryValue: '30000000',
+    primarySuffix: null,
+    secondaryPrefix: '+ IVA $',
+    secondaryValue: '12000000',
+    secondarySuffix: null,
+    statusPrefix: null,
+    statusValue: '3',
+    statusSuffix: '%',
+    statusVariant: 'success',
+    statusIcon: 'IconTrendingUp'
+  }
+};

package/dist/components/UTKpi/index.js

@@ -1 +1,76 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_classesUtils=require("../../utils/classesUtils"),_UTLabel=_interopRequireDefault(require("../UTLabel")),_UTStatus=_interopRequireDefault(require("../UTStatus")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_theme=require("./theme");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const UTKpi=_ref=>{let{classes:theme,classNames:classNames,title:title,primaryValue:primaryValue={},secondaryValue:secondaryValue={},status:status={},statusProps:statusProps={}}=_ref;const styles=(0,_react.useMemo)(()=>(0,_classesUtils.mergeMultipleClassNames)(_stylesModule.default,theme,classNames),[_stylesModule.default,theme,classNames]),primaryValueText=[primaryValue.prefix,primaryValue.value,primaryValue.suffix].filter(Boolean).join(""),secondaryValueText=[secondaryValue.prefix,secondaryValue.value,secondaryValue.suffix].filter(Boolean).join(""),statusText=[status.prefix,status.value,status.suffix].filter(Boolean).join("");return _react.default.createElement("div",{className:styles.container},_react.default.createElement(_UTLabel.default,{weight:"medium"},title),_react.default.createElement("div",{className:styles.contentContainer},(primaryValueText||secondaryValueText)&&_react.default.createElement("div",{className:styles.valuesContainer},primaryValueText&&_react.default.createElement(_UTLabel.default,{variant:"title3",weight:"medium"},primaryValueText),secondaryValueText&&_react.default.createElement(_UTLabel.default,{colorTheme:"gray",variant:"small"},secondaryValueText)),statusText&&_react.default.createElement(_UTStatus.default,{type:"light",size:"small",variant:statusProps.variant,Icon:statusProps.Icon},statusText)))};UTKpi.propTypes={classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),title:_propTypes.string,primaryValue:(0,_propTypes.shape)({prefix:_propTypes.string,value:_propTypes.string,suffix:_propTypes.string}),secondaryValue:(0,_propTypes.shape)({prefix:_propTypes.string,value:_propTypes.string,suffix:_propTypes.string}),status:(0,_propTypes.shape)({prefix:_propTypes.string,value:_propTypes.string,suffix:_propTypes.string}),statusProps:(0,_propTypes.shape)({variant:_propTypes.string,Icon:_propTypes.string})};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTKpi);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _classesUtils = require("../../utils/classesUtils");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTStatus = _interopRequireDefault(require("../UTStatus"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _theme = require("./theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const UTKpi = _ref => {
+  let {
+    classes: theme,
+    classNames,
+    title,
+    primaryValue = {},
+    secondaryValue = {},
+    status = {},
+    statusProps = {}
+  } = _ref;
+  const styles = (0, _react.useMemo)(() => (0, _classesUtils.mergeMultipleClassNames)(_stylesModule.default, theme, classNames), [_stylesModule.default, theme, classNames]);
+  const primaryValueText = [primaryValue.prefix, primaryValue.value, primaryValue.suffix].filter(Boolean).join('');
+  const secondaryValueText = [secondaryValue.prefix, secondaryValue.value, secondaryValue.suffix].filter(Boolean).join('');
+  const statusText = [status.prefix, status.value, status.suffix].filter(Boolean).join('');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "medium"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.contentContainer
+  }, (primaryValueText || secondaryValueText) && /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.valuesContainer
+  }, primaryValueText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "title3",
+    weight: "medium"
+  }, primaryValueText), secondaryValueText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small"
+  }, secondaryValueText)), statusText && /*#__PURE__*/_react.default.createElement(_UTStatus.default, {
+    type: "light",
+    size: "small",
+    variant: statusProps.variant,
+    Icon: statusProps.Icon
+  }, statusText)));
+};
+UTKpi.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  title: _propTypes.string,
+  primaryValue: (0, _propTypes.shape)({
+    prefix: _propTypes.string,
+    value: _propTypes.string,
+    suffix: _propTypes.string
+  }),
+  secondaryValue: (0, _propTypes.shape)({
+    prefix: _propTypes.string,
+    value: _propTypes.string,
+    suffix: _propTypes.string
+  }),
+  status: (0, _propTypes.shape)({
+    prefix: _propTypes.string,
+    value: _propTypes.string,
+    suffix: _propTypes.string
+  }),
+  statusProps: (0, _propTypes.shape)({
+    variant: _propTypes.string,
+    Icon: _propTypes.string
+  })
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTKpi);

package/dist/components/UTKpi/theme.js

@@ -1 +1,24 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _shadowUtils=require("../../utils/shadowUtils"),_Palette=require("../../constants/Palette");const retrieveStyle=_ref=>{var _theme$Palette$shadow;let{theme:theme}=_ref;return{container:{backgroundColor:theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade01],boxShadow:(0,_shadowUtils.getShadow)({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow.grayscale,level:1})}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _shadowUtils = require("../../utils/shadowUtils");
+var _Palette = require("../../constants/Palette");
+const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade01],
+      boxShadow: (0, _shadowUtils.getShadow)({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 1
+      })
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTLabel/README.md

@@ -0,0 +1,179 @@
+# UTLabel
+
+Component used for displaying text values and markdown.
+
+## Props
+
+
+| Name              | Type   | Default                                  | Description                                                                                                                                                                                                                 |
+| ------------------- | -------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| align             | string |                                    | Alignment of the text content. Accepts values like 'left', 'center', 'right', or 'justify'.                                                                                                                                 |
+| className         | string |                                          | Additional classes.                                                                                                                                                                                                         |
+| classes           | string |                                          | Classes returned by UTLabel's own[theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                   |
+| colorTheme        | string | 'primary'                                | Color theme to style the UTLabel. Has to be defined in the proyect theme.[Example](#colortheme).                                                                                                                            |
+| markdownExtended  | bool   | false                                    | ⚠️ Requires`withMarkdown` to be set to `true` <br />Activates all markdown plugins for extended markdown support.                                                                                                            |
+| markdownRenderers | object | [MARKDOWN_RENDERERS](./constants.js#L36) | ⚠️ Requires`withMarkdown` to be set to `true` <br />Object mapping tag names to React components. The keys in components are HTML equivalents for the things you write with markdown [List of tags](#markdown-renderers). |
+| title             | string |                                          | [Title global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title).                                                                                                                        |
+| variant           | string | 'body'                                   | Defines html component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire proyect) through the proyect's theme.                                           |
+| weight            | string | 'regular'                                | Defines font-weight to be used. For a list of available options, check [here](#font-weights).                                                                                                                                |
+| withMarkdown      | bool   | false                                    | Tells the component whether or not to render text inside as markdown.                                                                                                                                                       |
+
+## Examples
+
+### colorTheme
+
+```js
+UTLabel: {
+    colorThemes: {
+      primary: {
+        color: Colors.primary
+      },
+    }
+}
+```
+
+### Use
+
+```JSX
+<UTLabel colorTheme='primary'>Your text here</UTLabel>
+```
+
+### Markdown renderers
+
+
+| markdown                  | component                                |
+| --------------------------- | ------------------------------------------ |
+| `blockquote`              | `blockquote`                             |
+| `break`                   | `br`                                     |
+| `code`, `inlineCode`      | `code`, `pre`**\***                      |
+| `definition`              | **†**                                   |
+| `emphasis`                | `em`                                     |
+| `heading`                 | `h1`, `h2`, `h3`, `h4`, `h5`, `h6`**§** |
+| `image`, `imageReference` | `img`**†**                              |
+| `link`, `linkReference`   | `a`**†**                                |
+| `list`                    | `ol`, `ul`**¶**                         |
+| `listItem`                | `li`                                     |
+| `paragraph`               | `p`                                      |
+| `strong`                  | `strong`                                 |
+| `text`                    |                                          |
+| `thematicBreak`           | `hr`                                     |
+
+- **\*** It’s possible to differentiate between code based on the `inline`
+  prop.
+  Block code is also wrapped in a `pre`
+- **†** Resource (`[text](url)`) and reference (`[text][id]`) style links and
+  images (and their definitions) are now resolved and treated the same
+- **§** It’s possible to differentiate between heading based on the `level`
+  prop
+- **¶** It’s possible to differentiate between lists based on the `ordered`
+  prop
+
+Example
+
+```JSX
+const markdownRenderers = {
+   a: ({ href, children }) => ( <a href={href}>{children}</a> );
+};
+
+<UTLabel withMarkdown markdownRenderers={markdownRenderers}>
+
+```
+
+<details>
+<summary>Show list of props for each component</summary>
+
+**Custom Handler Behavior:**
+If an element already has internal handling within UTLabel (such as `a`, `blockquote`, `h2`, etc.) and you pass a `customHandler` that returns `null`, the component will use its default internal behavior. This allows you to selectively override rendering for specific cases while falling back to the built-in logic when needed.
+
+The keys in components are HTML equivalents for the things you write with
+markdown (such as `h1` for `# heading`)**†**
+
+**†** Normally, in markdown, those are: `a`, `blockquote`, `code`, `em`, `h1`,
+`h2`, `h3`, `h4`, `h5`, `h6`, `hr`, `img`, `li`, `ol`, `p`, `pre`, `strong`, and
+`ul`.
+
+The props that are passed are what you probably would expect: an `a` (link) will
+get `href` (and `title`) props, and `img` (image) an `src` (and `title`), etc.
+There are some extra props passed.
+
+- `code`
+  - `inline` (`boolean?`)
+    — set to `true` for inline code
+  - `className` (`string?`)
+    — set to `language-js` or so when using ` ```js`
+- `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
+  - `level` (`number` beween 1 and 6)
+    — heading rank
+- `input` (when using [`remark-gfm`][gfm])
+  - `checked` (`boolean`)
+    — whether the item is checked
+  - `disabled` (`true`)
+  - `type` (`'checkbox'`)
+- `li`
+  - `index` (`number`)
+    — number of preceding items (so first gets `0`, etc.)
+  - `ordered` (`boolean`)
+    — whether the parent is an `ol` or not
+  - `checked` (`boolean?`)
+    — `null` normally, `boolean` when using [`remark-gfm`][gfm]’s tasklists
+  - `className` (`string?`)
+    — set to `task-list-item` when using [`remark-gfm`][gfm] and the
+    item1 is a tasklist
+- `ol`, `ul`
+  - `depth` (`number`)
+    — number of ancestral lists (so first gets `0`, etc.)
+  - `ordered` (`boolean`)
+    — whether it’s an `ol` or not
+  - `className` (`string?`)
+    — set to `contains-task-list` when using [`remark-gfm`][gfm] and the
+    list contains one or more tasklists
+- `td`, `th` (when using [`remark-gfm`][gfm])
+  - `style` (`Object?`)
+    — something like `{textAlign: 'left'}` depending on how the cell is
+    aligned
+  - `isHeader` (`boolean`)
+    — whether it’s a `th` or not
+- `tr` (when using [`remark-gfm`][gfm])
+  - `isHeader` (`boolean`)
+    — whether it’s in the `thead` or not
+
+Every component will receive a `node` (`Object`).
+This is the original [hast](https://github.com/syntax-tree/hast) element being
+turned into a React element.
+
+Every element will receive a `key` (`string`).
+See [React’s docs](https://reactjs.org/docs/lists-and-keys.html#keys) for more
+info.
+
+</details>
+
+### variants
+
+
+| Variant   | Component | Default font size |
+| ----------- | ----------- | ------------------- |
+| title1    | h1        | 30px              |
+| title2    | h2        | 24px              |
+| title3    | h3        | 22px              |
+| subtitle1 | h4        | 18px              |
+| subtitle2 | h5        | 16px              |
+| body      | span      | 16px              |
+| small     | span      | 14px              |
+| xsmall    | span      | 13px              |
+| th        | th        | 16px              |
+| td        | td        | 16px              |
+
+### font-weights
+
+
+| Name       | Weight |
+| ------------ | -------- |
+| thin       | 100    |
+| extralight | 200    |
+| light      | 300    |
+| regular    | 400    |
+| medium     | 500    |
+| semibold   | 600    |
+| bold       | 700    |
+| extrabold  | 800    |
+| black      | 900    |