@lideralia/alife-uikit 1.3.13 → 1.3.15

package/dist/organisms/BiographicalEditor/EditorGeneratingCard/EditorGeneratingCard.stories.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SinEstado = exports.Playground = exports.Escribiendo = exports.Default = exports.ConEditorIlustracion = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _imgs = require("../../../atoms/imgs");
+
+var _Layout = require("../../../atoms/Layout");
+
+var _EditorGeneratingCard = require("./EditorGeneratingCard");
+
+var _default = {
+  title: 'Organisms/BiographicalEditor/EditorGeneratingCard',
+  component: _EditorGeneratingCard.EditorGeneratingCard,
+  argTypes: {
+    title: {
+      control: 'text'
+    },
+    subtitle: {
+      control: 'text'
+    },
+    statusLabel: {
+      control: 'text'
+    }
+  },
+  parameters: {
+    layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-93891'
+    }
+  }
+};
+exports.default = _default;
+
+const MobileFrame = _ref => {
+  let {
+    children
+  } = _ref;
+  return _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+    justifyContent: "center"
+  }, _react.default.createElement(_Layout.Col, {
+    width: [1, 1, '375px']
+  }, _react.default.createElement("div", {
+    style: {
+      padding: '24px 18px',
+      background: '#f2f2f3'
+    }
+  }, children))));
+};
+
+const Default = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorGeneratingCard.EditorGeneratingCard, args));
+
+exports.Default = Default;
+Default.args = {
+  title: 'Generando memoria biográfica',
+  subtitle: 'Estamos creando un texto único\nbasado en tus respuestas',
+  statusLabel: 'Razonando...'
+};
+Default.storyName = 'Razonando';
+
+const Escribiendo = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorGeneratingCard.EditorGeneratingCard, args));
+
+exports.Escribiendo = Escribiendo;
+Escribiendo.args = {
+  title: 'Generando memoria biográfica',
+  subtitle: 'Estamos creando un texto único\nbasado en tus respuestas',
+  statusLabel: 'Escribiendo...'
+};
+Escribiendo.storyName = 'Escribiendo';
+
+const ConEditorIlustracion = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorGeneratingCard.EditorGeneratingCard, (0, _extends2.default)({}, args, {
+  illustration: _react.default.createElement(_imgs.BiographicalEditor, {
+    width: 60,
+    height: 60
+  })
+})));
+
+exports.ConEditorIlustracion = ConEditorIlustracion;
+ConEditorIlustracion.args = {
+  title: 'Generando memoria biográfica',
+  subtitle: 'Estamos creando un texto único\nbasado en tus respuestas',
+  statusLabel: 'Razonando...'
+};
+ConEditorIlustracion.storyName = 'Con BiographicalEditor';
+
+const SinEstado = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorGeneratingCard.EditorGeneratingCard, args));
+
+exports.SinEstado = SinEstado;
+SinEstado.args = {
+  title: 'Generando memoria biográfica',
+  subtitle: 'Estamos creando un texto único\nbasado en tus respuestas',
+  statusLabel: null
+};
+SinEstado.storyName = 'Sin etiqueta de estado';
+
+const Playground = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorGeneratingCard.EditorGeneratingCard, args));
+
+exports.Playground = Playground;
+Playground.args = {
+  title: 'Generando memoria biográfica',
+  subtitle: 'Estamos creando un texto único\nbasado en tus respuestas',
+  statusLabel: 'Razonando...'
+};
+Playground.storyName = 'Playground (interactivo)';

package/dist/organisms/BiographicalEditor/EditorGeneratingCard/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditorGeneratingCard", {
+  enumerable: true,
+  get: function () {
+    return _EditorGeneratingCard.default;
+  }
+});
+
+var _EditorGeneratingCard = _interopRequireDefault(require("./EditorGeneratingCard"));

package/dist/organisms/BiographicalEditor/EditorProgress/EditorProgress.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EditorProgress = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Icon = require("../../../atoms/Icon");
+
+var _Icons = require("../../../atoms/Icons");
+
+var _Layout = require("../../../atoms/Layout");
+
+var _Typography = require("../../../atoms/Typography");
+
+var _BlockProgress = require("../BlockProgress");
+
+const Wrap = _styledComponents.default.div.withConfig({
+  displayName: "EditorProgress__Wrap",
+  componentId: "sc-781det-0"
+})(["width:100%;background:#ffffff;border-radius:18px 18px 0 0;box-shadow:0px -8px 18px 0px rgba(60,54,58,0.1);display:flex;flex-direction:column;padding:18px 0 0;overflow:hidden;"]);
+
+const ProgressSection = _styledComponents.default.div.withConfig({
+  displayName: "EditorProgress__ProgressSection",
+  componentId: "sc-781det-1"
+})(["padding:0 18px;"]);
+
+const ButtonsSection = (0, _styledComponents.default)(_Layout.Flex).withConfig({
+  displayName: "EditorProgress__ButtonsSection",
+  componentId: "sc-781det-2"
+})(["flex-direction:column;gap:12px;padding:12px 18px 18px;"]);
+const ButtonsRow = (0, _styledComponents.default)(_Layout.Flex).withConfig({
+  displayName: "EditorProgress__ButtonsRow",
+  componentId: "sc-781det-3"
+})(["gap:12px;align-items:center;"]);
+
+const CloseBtn = _styledComponents.default.button.withConfig({
+  displayName: "EditorProgress__CloseBtn",
+  componentId: "sc-781det-4"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:60px;height:60px;border:none;border-radius:16px;background-color:#f0f0f2;cursor:pointer;color:#4c4c5b;padding:0;&:hover{background-color:#e5e5e8;}&:active{background-color:#d5d5da;}"]);
+
+const GenerateBtn = _styledComponents.default.button.withConfig({
+  displayName: "EditorProgress__GenerateBtn",
+  componentId: "sc-781det-5"
+})(["display:flex;align-items:center;justify-content:center;gap:9px;flex:1;height:60px;min-height:60px;border:none;border-radius:16px;background-color:", ";opacity:", ";cursor:", ";padding:0 18px;color:#ffffff;pointer-events:", ";transition:opacity 0.2s ease;"], _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? '#2396fb' : '#2396fb';
+}, _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 0.48 : 1;
+}, _ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled ? 'not-allowed' : 'pointer';
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled ? 'none' : 'auto';
+});
+
+const EditorProgress = _ref5 => {
+  let {
+    requiredCompleted,
+    requiredTotal,
+    optionalCompleted,
+    optionalTotal,
+    percentage,
+    message,
+    color,
+    onClose,
+    onGenerate,
+    generateLabel,
+    generateDisabled,
+    generateIcon,
+    hint
+  } = _ref5;
+  return _react.default.createElement(Wrap, null, _react.default.createElement(ProgressSection, null, _react.default.createElement(_BlockProgress.BlockProgress, {
+    requiredCompleted: requiredCompleted,
+    requiredTotal: requiredTotal,
+    optionalCompleted: optionalCompleted,
+    optionalTotal: optionalTotal,
+    percentage: percentage,
+    message: message,
+    color: color
+  })), _react.default.createElement(ButtonsSection, null, _react.default.createElement(ButtonsRow, null, _react.default.createElement(CloseBtn, {
+    type: "button",
+    onClick: onClose,
+    "aria-label": "Cerrar"
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "#4c4c5b"
+  }, _react.default.createElement(_Icons.IconClose, null))), _react.default.createElement(GenerateBtn, {
+    type: "button",
+    disabled: generateDisabled,
+    onClick: !generateDisabled ? onGenerate : undefined
+  }, generateIcon && _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "#ffffff"
+  }, generateIcon), _react.default.createElement(_Typography.Text, {
+    sizeText: "display16",
+    fontWeight: "bold",
+    color: "white"
+  }, generateLabel))), hint && _react.default.createElement(_Typography.Text, {
+    sizeText: "display13",
+    fontWeight: "medium",
+    color: "black60",
+    textAlign: "center",
+    width: "100%"
+  }, hint)));
+};
+
+exports.EditorProgress = EditorProgress;
+EditorProgress.defaultProps = {
+  optionalCompleted: undefined,
+  optionalTotal: undefined,
+  message: undefined,
+  color: '#2396FB',
+  generateLabel: 'Generar memoria biográfica',
+  generateDisabled: false,
+  generateIcon: undefined,
+  hint: undefined
+};
+var _default = EditorProgress;
+exports.default = _default;

package/dist/organisms/BiographicalEditor/EditorProgress/EditorProgress.stories.js

@@ -0,0 +1,213 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VacioDeshabilitado = exports.PremiumParcial = exports.PremiumCompleto = exports.FreeParcial = exports.FreeCompleto = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _imgs = require("../../../atoms/imgs");
+
+var _Layout = require("../../../atoms/Layout");
+
+var _EditorProgress = require("./EditorProgress");
+
+var _default = {
+  title: 'Organisms/BiographicalEditor/EditorProgress',
+  component: _EditorProgress.EditorProgress,
+  argTypes: {
+    requiredCompleted: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 4,
+        step: 1
+      }
+    },
+    requiredTotal: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 4,
+        step: 1
+      }
+    },
+    optionalCompleted: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 4,
+        step: 1
+      }
+    },
+    optionalTotal: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 4,
+        step: 1
+      }
+    },
+    percentage: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    message: {
+      control: 'text'
+    },
+    color: {
+      control: 'color'
+    },
+    generateLabel: {
+      control: 'text'
+    },
+    generateDisabled: {
+      control: 'boolean'
+    },
+    hint: {
+      control: 'text'
+    },
+    onClose: {
+      action: 'onClose'
+    },
+    onGenerate: {
+      action: 'onGenerate'
+    }
+  },
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+exports.default = _default;
+
+const MobileFrame = _ref => {
+  let {
+    children
+  } = _ref;
+  return _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+    justifyContent: "center"
+  }, _react.default.createElement(_Layout.Col, {
+    width: [1, 1, '375px']
+  }, _react.default.createElement("div", {
+    style: {
+      position: 'relative',
+      minHeight: '300px',
+      display: 'flex',
+      alignItems: 'flex-end'
+    }
+  }, children))));
+};
+
+const VacioDeshabilitado = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorProgress.EditorProgress, (0, _extends2.default)({}, args, {
+  generateIcon: _react.default.createElement(_imgs.AI, {
+    color: "#ffffff"
+  })
+})));
+
+exports.VacioDeshabilitado = VacioDeshabilitado;
+VacioDeshabilitado.args = {
+  requiredCompleted: 0,
+  requiredTotal: 4,
+  percentage: 0,
+  message: undefined,
+  color: '#2396FB',
+  generateLabel: 'Generar memoria biográfica',
+  generateDisabled: true,
+  hint: 'Completa los 4 bloques principales para continuar'
+};
+VacioDeshabilitado.storyName = 'Free — vacío (deshabilitado)';
+VacioDeshabilitado.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-42438'
+  }
+};
+
+const FreeParcial = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorProgress.EditorProgress, (0, _extends2.default)({}, args, {
+  generateIcon: _react.default.createElement(_imgs.AI, {
+    color: "#ffffff"
+  })
+})));
+
+exports.FreeParcial = FreeParcial;
+FreeParcial.args = {
+  requiredCompleted: 2,
+  requiredTotal: 4,
+  percentage: 50,
+  message: '¡Vas por la mitad!',
+  color: '#2396FB',
+  generateLabel: 'Generar memoria biográfica',
+  generateDisabled: true,
+  hint: 'Completa los 4 bloques principales para continuar'
+};
+FreeParcial.storyName = 'Free — a medias (deshabilitado)';
+
+const FreeCompleto = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorProgress.EditorProgress, (0, _extends2.default)({}, args, {
+  generateIcon: _react.default.createElement(_imgs.AI, {
+    color: "#ffffff"
+  })
+})));
+
+exports.FreeCompleto = FreeCompleto;
+FreeCompleto.args = {
+  requiredCompleted: 4,
+  requiredTotal: 4,
+  percentage: 100,
+  message: '¡Listo para generar!',
+  color: '#2396FB',
+  generateLabel: 'Generar memoria biográfica',
+  generateDisabled: false,
+  hint: undefined
+};
+FreeCompleto.storyName = 'Free — completado (habilitado)';
+
+const PremiumParcial = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorProgress.EditorProgress, (0, _extends2.default)({}, args, {
+  generateIcon: _react.default.createElement(_imgs.AI, {
+    color: "#ffffff"
+  })
+})));
+
+exports.PremiumParcial = PremiumParcial;
+PremiumParcial.args = {
+  requiredCompleted: 4,
+  requiredTotal: 4,
+  optionalCompleted: 2,
+  optionalTotal: 4,
+  percentage: 75,
+  message: 'Está casi perfecto',
+  color: '#ACC64E',
+  generateLabel: 'Generar memoria biográfica',
+  generateDisabled: false,
+  hint: undefined
+};
+PremiumParcial.storyName = 'Premium — parcial';
+
+const PremiumCompleto = args => _react.default.createElement(MobileFrame, null, _react.default.createElement(_EditorProgress.EditorProgress, (0, _extends2.default)({}, args, {
+  generateIcon: _react.default.createElement(_imgs.AI, {
+    color: "#ffffff"
+  })
+})));
+
+exports.PremiumCompleto = PremiumCompleto;
+PremiumCompleto.args = {
+  requiredCompleted: 4,
+  requiredTotal: 4,
+  optionalCompleted: 4,
+  optionalTotal: 4,
+  percentage: 100,
+  message: '¡Todo completado!',
+  color: '#ACC64E',
+  generateLabel: 'Generar memoria biográfica',
+  generateDisabled: false,
+  hint: undefined
+};
+PremiumCompleto.storyName = 'Premium — todo completado';

package/dist/organisms/BiographicalEditor/EditorProgress/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditorProgress", {
+  enumerable: true,
+  get: function () {
+    return _EditorProgress.default;
+  }
+});
+
+var _EditorProgress = _interopRequireDefault(require("./EditorProgress"));

package/dist/organisms/Cards/Adviser.js

@@ -123,6 +123,7 @@ CardAdviser.Body = props => {
     gridArea: "name",
     marginY: "3px"
   }, _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display16",
     color: "black",
     fontWeight: "bold"

package/dist/organisms/Cards/Badges.js

@@ -96,6 +96,7 @@ CardBadges.Header = props => {
     sizeIcon: "display24",
     color: contentColor
   }, contentIcon)), _react.default.createElement(_Typography.Text, {
+    translate: "no",
     as: "p",
     color: "black60",
     sizeText: "display13",

package/dist/organisms/Cards/CardUsersResultOfFlowers.js

@@ -144,6 +144,7 @@ CardUsersResultOfFlowers.User = _ref4 => {
       objectFit: 'cover'
     }
   })), _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display13",
     color: "black",
     fontWeight: "normal",

package/dist/organisms/Cards/Ceremony.js

@@ -199,6 +199,7 @@ CardCeremony.GeneralInfo = _ref2 => {
     paddingBottom: 1,
     paddingX: 3
   }, _react.default.createElement(_Typography.Text, {
+    translate: "no",
     color: "black",
     sizeText: "display16",
     fontWeight: "bold",
@@ -283,6 +284,7 @@ CardCeremony.GeneralInfo = _ref2 => {
     height: "24px",
     width: "60px"
   })), _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display13"
   }, venueAddress || _react.default.createElement(_PlaceholderLoad.PlaceholderLoad, {
     height: "24px"

package/dist/organisms/Cards/Content.js

@@ -120,6 +120,7 @@ CardContent.Header = props => {
   })), _react.default.createElement(_Layout.GridItem, {
     gridArea: "title"
   }, _react.default.createElement(_Typography.Text, {
+    translate: "no",
     as: "p",
     color: "black60",
     sizeText: "display13"

package/dist/organisms/Cards/Gone.js

@@ -166,6 +166,7 @@ CardGone.Header = props => {
       marginTop: isAdmin ? '10px' : '0px'
     }
   }, _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display16",
     color: "black",
     fontWeight: "bold",
@@ -219,7 +220,9 @@ CardGone.Body = props => {
     customColor,
     customTextColor,
     eventShareAction,
-    actionButtonShare
+    actionButtonShare,
+    beforeButtons,
+    afterButtons
   } = props;
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Layout.Box, {
     borderTopStyle: "solid",
@@ -234,7 +237,7 @@ CardGone.Body = props => {
     fontWeight: "bold"
   }, rememberByLabel || _react.default.createElement(_PlaceholderLoad.PlaceholderLoad, {
     height: "22px"
-  })), _react.default.createElement(_Typography.TextWithLink, null, rememberBy))), ceremonyAction ? _react.default.createElement(_Layout.Box, {
+  })), _react.default.createElement(_Typography.TextWithLink, null, rememberBy)), beforeButtons), ceremonyAction ? _react.default.createElement(_Layout.Box, {
     paddingX: 3,
     paddingBottom: isAdmin ? 2 : 3
   }, _react.default.createElement(_Button.Button, {
@@ -274,7 +277,7 @@ CardGone.Body = props => {
   }, _react.default.createElement(_IconWhatsapp.default, null)), _react.default.createElement(_Typography.Text, {
     textAlign: "center",
     fontWeight: "bold"
-  }, labelShare))));
+  }, labelShare))), afterButtons);
 };
 
 CardGone.Footer = props => {
@@ -382,6 +385,7 @@ CardGone.HeaderAdmin = props => {
       justifyContent: 'flex-start'
     }
   }, _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display16",
     color: "black",
     fontWeight: "bold",

package/dist/organisms/Cards/GoneBasic.js

@@ -95,7 +95,8 @@ const CardGoneBasic = props => {
     color: "black",
     fontWeight: "bold",
     overflow: "hidden",
-    maxWidth: "200px"
+    maxWidth: "200px",
+    translate: "no"
   }, name || _react.default.createElement(_PlaceholderLoad.PlaceholderLoad, {
     height: "22px"
   }))))));

package/dist/organisms/Cards/GoneCeremony.js

@@ -124,6 +124,7 @@ CardGoneCeremony.Header = props => {
       marginTop: '0px'
     }
   }, _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display16",
     color: "black",
     fontWeight: "bold",
@@ -184,6 +185,7 @@ CardGoneCeremony.Body = props => {
     color: "yellow",
     fontWeight: "bold"
   }, labelEvent), _react.default.createElement(_Typography.Text, {
+    translate: "no",
     color: "black",
     sizeText: "display16",
     fontWeight: "bold",
@@ -275,6 +277,7 @@ CardGoneCeremony.Footer = props => {
     venueAddress
   } = props;
   return _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display14",
     color: "black60",
     paddingBottom: 3,

package/dist/organisms/Cards/PersonalData.js

@@ -132,6 +132,7 @@ CardPersonalData.Header = _ref2 => {
     gridArea: "name",
     display: "flex"
   }, _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display16",
     color: "black",
     fontWeight: "bold",
@@ -203,6 +204,8 @@ CardPersonalData.Body = _ref3 => {
     name: "name",
     sizeInput: "big",
     defaultValue: name,
+    translate: "no",
+    className: "notranslate",
     iconLeft: _react.default.createElement(_IconUser.default, null),
     readOnly: true,
     placeholderMessage: labelName
@@ -302,6 +305,8 @@ CardPersonalData.BodyEditMode = _ref4 => {
     name: "name",
     sizeInput: "big",
     defaultValue: name,
+    translate: "no",
+    className: "notranslate",
     iconLeft: _react.default.createElement(_IconUser.default, null),
     placeholderMessage: labelName
   }))), _react.default.createElement(_Layout.GridItem, {

package/dist/organisms/Cards/Udiana.js

@@ -69,6 +69,7 @@ const CardUdiana = props => {
     gridArea: "name",
     width: "128px"
   }, _react.default.createElement(_Typography.Text, {
+    translate: "no",
     sizeText: "display16",
     color: "black",
     fontWeight: "bold",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lideralia/alife-uikit",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "description": "Librería y documentación de componentes, basada en el Design System de Alife.",
   "homepage": "https://github.com/lideralia/alife-frontend-components#readme",
   "bugs": {