@widergy/energy-ui 3.158.1 → 3.160.0

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

@@ -0,0 +1,215 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { joinArgTypes } from 'stories/utils';
+import { VARIANTS } from '../UTStatus/constants';
+import UTKpi from '.';
+const UTKpiPlayground = _ref => {
+  let {
+    title,
+    primaryPrefix,
+    primaryValue,
+    primarySuffix,
+    secondaryPrefix,
+    secondaryValue,
+    secondarySuffix,
+    statusPrefix,
+    statusValue,
+    statusSuffix,
+    statusVariant,
+    statusIcon
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTKpi, {
+    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
+    }
+  });
+};
+export 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: joinArgTypes(Object.keys(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'
+};
+export const 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/esm/components/UTKpi/index.js

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { string, shape, objectOf } from 'prop-types';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import UTLabel from '../UTLabel';
+import UTStatus from '../UTStatus';
+import WithTheme from '../WithTheme';
+import ownStyles from './styles.module.scss';
+import { retrieveStyle } from './theme';
+const UTKpi = _ref => {
+  let {
+    classes: theme,
+    classNames,
+    title,
+    primaryValue = {},
+    secondaryValue = {},
+    status = {},
+    statusProps = {}
+  } = _ref;
+  const styles = useMemo(() => mergeMultipleClassNames(ownStyles, theme, classNames), [ownStyles, 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.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    weight: "medium"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: styles.contentContainer
+  }, (primaryValueText || secondaryValueText) && /*#__PURE__*/React.createElement("div", {
+    className: styles.valuesContainer
+  }, primaryValueText && /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "title3",
+    weight: "medium"
+  }, primaryValueText), secondaryValueText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, secondaryValueText)), statusText && /*#__PURE__*/React.createElement(UTStatus, {
+    type: "light",
+    size: "small",
+    variant: statusProps.variant,
+    Icon: statusProps.Icon
+  }, statusText)));
+};
+UTKpi.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  title: string,
+  primaryValue: shape({
+    prefix: string,
+    value: string,
+    suffix: string
+  }),
+  secondaryValue: shape({
+    prefix: string,
+    value: string,
+    suffix: string
+  }),
+  status: shape({
+    prefix: string,
+    value: string,
+    suffix: string
+  }),
+  statusProps: shape({
+    variant: string,
+    Icon: string
+  })
+};
+export default WithTheme(retrieveStyle)(UTKpi);

package/dist/esm/components/UTKpi/styles.module.scss

@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  padding: 16px 16px 12px 16px;
+  gap: 16px;
+}
+
+.contentContainer {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.valuesContainer {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

package/dist/esm/components/UTKpi/theme.js

@@ -0,0 +1,17 @@
+import { getShadow } from '../../utils/shadowUtils';
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade01],
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 1
+      })
+    }
+  };
+};

package/dist/esm/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    |

package/dist/esm/components/UTLabel/UTLabel.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTLabelStories from './UTLabel.stories';
+
+<Meta of={UTLabelStories} />
+
+<Title>UTLabel</Title>
+
+<Description of={UTLabelStories} />
+
+<Canvas of={UTLabelStories.Default} withToolbar name="UTLabel" />
+
+<ArgTypes exclude={['classes', 'style', 'title']} />

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

@@ -0,0 +1,147 @@
+import { joinArgTypes } from 'stories/utils';
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+import { DEFAULT_PROPS, VARIANTS, WEIGHTS } from './constants';
+import UTLabel from '.';
+export default {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Texto a mostrar en el componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    colorTheme: {
+      control: 'select',
+      description: 'Determina el color de la paleta a usar.',
+      options: Object.values(COLOR_THEMES),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.colorTheme
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    shade: {
+      control: 'select',
+      description: 'Determina el tono de la prop `colorTheme` a usar.',
+      options: Object.values(COLOR_SHADES),
+      table: {
+        defaultValue: {
+          summary: '05'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    markdownExtended: {
+      control: 'boolean',
+      description: 'Habilita todos los plugins de markdown',
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.markdownExtended
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    markdownRenderers: {
+      control: false,
+      description: 'Mapper de componentes HTML a componentes react. Para más detalles revisar la sección Markdown Renderers',
+      table: {
+        defaultValue: {
+          summary: 'Detalles',
+          detail: 'Por defecto hay un renderer para elementos <a> que presetea algunos atributos de la etiqueta.'
+        },
+        type: {
+          summary: 'Object'
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Determina el componente HTML a renderizar.',
+      options: Object.keys(VARIANTS),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.variant
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(VARIANTS))
+        }
+      }
+    },
+    weight: {
+      control: 'select',
+      description: 'Determina el valor del atributo `font-weight`.',
+      options: Object.keys(WEIGHTS),
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.weight
+        },
+        type: {
+          summary: joinArgTypes(Object.keys(WEIGHTS))
+        }
+      }
+    },
+    withMarkdown: {
+      control: 'boolean',
+      description: 'Determina si renderizar el contenido como markdown o texto plano.',
+      table: {
+        defaultValue: {
+          summary: DEFAULT_PROPS.withMarkdown
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    className: {
+      control: false,
+      description: 'Clase que se le pasa al elemento contenedor.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  component: UTLabel,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'field', 'style', 'title']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para renderizar texto. Consume la paleta de colores. Acepta markdown para formatear texto.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTLabel'
+};
+export const Default = {
+  args: {
+    colorTheme: DEFAULT_PROPS.colorTheme,
+    markdownExtended: DEFAULT_PROPS.markdownExtended,
+    variant: DEFAULT_PROPS.variant,
+    weight: DEFAULT_PROPS.weight,
+    withMarkdown: DEFAULT_PROPS.withMarkdown,
+    shade: '05'
+  },
+  name: 'Playground'
+};