@lideralia/alife-uikit 1.3.13 → 1.3.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/atoms/Input/styles.js +1 -0
  2. package/dist/atoms/Typography/Typography.js +4 -1
  3. package/dist/atoms/Uploader/Uploader.js +18 -8
  4. package/dist/atoms/imgs/AI.js +39 -0
  5. package/dist/atoms/imgs/BiographicalEditor.js +240 -0
  6. package/dist/atoms/imgs/Briefcase.js +39 -0
  7. package/dist/atoms/imgs/Camera.js +41 -0
  8. package/dist/atoms/imgs/Cover.js +170 -0
  9. package/dist/atoms/imgs/Diamond.js +41 -0
  10. package/dist/atoms/imgs/Happy.js +38 -0
  11. package/dist/atoms/imgs/Heart.js +38 -0
  12. package/dist/atoms/imgs/Music.js +38 -0
  13. package/dist/atoms/imgs/Plant.js +38 -0
  14. package/dist/atoms/imgs/Sunrise.js +39 -0
  15. package/dist/atoms/imgs/index.js +88 -0
  16. package/dist/index.js +63 -0
  17. package/dist/molecules/BiographicalEditor/QuestionCard/QuestionCard.js +86 -0
  18. package/dist/molecules/BiographicalEditor/QuestionCard/QuestionCard.stories.js +120 -0
  19. package/dist/molecules/BiographicalEditor/QuestionCard/index.js +13 -0
  20. package/dist/molecules/BlockCard/BlockCard.js +140 -0
  21. package/dist/molecules/BlockCard/BlockCard.stories.js +130 -0
  22. package/dist/molecules/BlockCard/index.js +13 -0
  23. package/dist/organisms/BiographicalEditor/BlockProgress/BlockProgress.js +89 -0
  24. package/dist/organisms/BiographicalEditor/BlockProgress/BlockProgress.stories.js +159 -0
  25. package/dist/organisms/BiographicalEditor/BlockProgress/index.js +15 -0
  26. package/dist/organisms/BiographicalEditor/EditorBanner/EditorBanner.js +97 -0
  27. package/dist/organisms/BiographicalEditor/EditorBanner/EditorBanner.stories.js +46 -0
  28. package/dist/organisms/BiographicalEditor/EditorBanner/index.js +13 -0
  29. package/dist/organisms/BiographicalEditor/EditorBlockFooter/EditorBlockFooter.js +147 -0
  30. package/dist/organisms/BiographicalEditor/EditorBlockFooter/EditorBlockFooter.stories.js +166 -0
  31. package/dist/organisms/BiographicalEditor/EditorBlockFooter/index.js +15 -0
  32. package/dist/organisms/BiographicalEditor/EditorGeneratingCard/EditorGeneratingCard.js +146 -0
  33. package/dist/organisms/BiographicalEditor/EditorGeneratingCard/EditorGeneratingCard.stories.js +113 -0
  34. package/dist/organisms/BiographicalEditor/EditorGeneratingCard/index.js +15 -0
  35. package/dist/organisms/BiographicalEditor/EditorProgress/EditorProgress.js +136 -0
  36. package/dist/organisms/BiographicalEditor/EditorProgress/EditorProgress.stories.js +213 -0
  37. package/dist/organisms/BiographicalEditor/EditorProgress/index.js +15 -0
  38. package/dist/organisms/Cards/Adviser.js +1 -0
  39. package/dist/organisms/Cards/Badges.js +1 -0
  40. package/dist/organisms/Cards/CardUsersResultOfFlowers.js +1 -0
  41. package/dist/organisms/Cards/Ceremony.js +2 -0
  42. package/dist/organisms/Cards/Content.js +1 -0
  43. package/dist/organisms/Cards/Gone.js +7 -3
  44. package/dist/organisms/Cards/GoneBasic.js +2 -1
  45. package/dist/organisms/Cards/GoneCeremony.js +3 -0
  46. package/dist/organisms/Cards/PersonalData.js +5 -0
  47. package/dist/organisms/Cards/Udiana.js +1 -0
  48. package/package.json +1 -1
@@ -0,0 +1,120 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.WithMaxLength = exports.PremiumThreeQuestions = exports.FreeFilled = exports.FreeEmpty = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _react = _interopRequireWildcard(require("react"));
13
+
14
+ var _QuestionCard = require("./QuestionCard");
15
+
16
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
+
18
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
+
20
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
21
+
22
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
23
+
24
+ var _default = {
25
+ title: 'Molecules/BiographicalEditor/QuestionCard',
26
+ component: _QuestionCard.QuestionCard,
27
+ parameters: {
28
+ layout: 'padded'
29
+ }
30
+ };
31
+ exports.default = _default;
32
+
33
+ const Controlled = _ref => {
34
+ let {
35
+ questions,
36
+ initialAnswers = {},
37
+ maxLength
38
+ } = _ref;
39
+ const [answers, setAnswers] = (0, _react.useState)(initialAnswers);
40
+
41
+ const handleChange = (key, value) => setAnswers(prev => _objectSpread(_objectSpread({}, prev), {}, {
42
+ [key]: value
43
+ }));
44
+
45
+ return _react.default.createElement("div", {
46
+ style: {
47
+ maxWidth: 480,
48
+ margin: '0 auto'
49
+ }
50
+ }, _react.default.createElement(_QuestionCard.QuestionCard, {
51
+ questions: questions,
52
+ answers: answers,
53
+ onChange: handleChange,
54
+ maxLength: maxLength
55
+ }));
56
+ };
57
+
58
+ Controlled.defaultProps = {
59
+ questions: [],
60
+ initialAnswers: {},
61
+ maxLength: undefined
62
+ };
63
+
64
+ const FreeEmpty = () => _react.default.createElement(Controlled, {
65
+ questions: [{
66
+ questionKey: 'free',
67
+ question: '¿Cómo describirías a esta persona en pocas palabras?',
68
+ hint: 'Cómo era, qué la definía',
69
+ placeholder: 'Por ejemplo:\n"Era una persona alegre y cercana, siempre dispuesta a ayudar. Le encantaba reunir a la familia y hacía que todos se sintieran bienvenidos..."'
70
+ }]
71
+ });
72
+
73
+ exports.FreeEmpty = FreeEmpty;
74
+
75
+ const FreeFilled = () => _react.default.createElement(Controlled, {
76
+ questions: [{
77
+ questionKey: 'free',
78
+ question: '¿Cómo describirías a esta persona en pocas palabras?',
79
+ hint: 'Cómo era, qué la definía',
80
+ placeholder: 'Por ejemplo: "Era una persona alegre y cercana..."'
81
+ }],
82
+ initialAnswers: {
83
+ free: 'Jaime era un hombre tranquilo, de pocas palabras pero muy observador. Transmitía seguridad sólo con estar presente.'
84
+ }
85
+ });
86
+
87
+ exports.FreeFilled = FreeFilled;
88
+
89
+ const PremiumThreeQuestions = () => _react.default.createElement(Controlled, {
90
+ questions: [{
91
+ questionKey: 'premium_0',
92
+ question: '¿Cómo describirías a esta persona en pocas palabras?',
93
+ hint: 'Cómo era, qué la definía',
94
+ placeholder: 'Por ejemplo: "Era una persona alegre y cercana..."'
95
+ }, {
96
+ questionKey: 'premium_1',
97
+ question: '¿Qué recuerdas con más cariño de ella?',
98
+ hint: 'Momentos, detalles, anécdotas',
99
+ placeholder: 'Por ejemplo: "Recuerdo especialmente su risa..."'
100
+ }, {
101
+ questionKey: 'premium_2',
102
+ question: '¿Cómo era en el día a día?',
103
+ hint: 'Costumbres, rutinas, pasiones',
104
+ placeholder: 'Por ejemplo: "Cada mañana preparaba café para todos..."'
105
+ }]
106
+ });
107
+
108
+ exports.PremiumThreeQuestions = PremiumThreeQuestions;
109
+
110
+ const WithMaxLength = () => _react.default.createElement(Controlled, {
111
+ questions: [{
112
+ questionKey: 'free',
113
+ question: '¿Cómo describirías a esta persona en pocas palabras?',
114
+ hint: 'Cómo era, qué la definía',
115
+ placeholder: 'Máximo 500 caracteres'
116
+ }],
117
+ maxLength: 500
118
+ });
119
+
120
+ exports.WithMaxLength = WithMaxLength;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "QuestionCard", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _QuestionCard.QuestionCard;
10
+ }
11
+ });
12
+
13
+ var _QuestionCard = require("./QuestionCard");
@@ -0,0 +1,140 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.BlockCard = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _Layout = require("../../atoms/Layout");
15
+
16
+ var _Typography = require("../../atoms/Typography");
17
+
18
+ const STATUS_STYLE_MAP = {
19
+ pending: {
20
+ bg: '#E5E5E8',
21
+ text: '#7F7F8A',
22
+ overlay: 0
23
+ },
24
+ in_progress: {
25
+ bg: '#8C88E7',
26
+ text: '#5A56DC',
27
+ overlay: 0.84
28
+ },
29
+ completed: {
30
+ bg: '#ACC64E',
31
+ text: '#8A9C49',
32
+ overlay: 0.84
33
+ },
34
+ overdue: {
35
+ bg: '#E83060',
36
+ text: '#D43646',
37
+ overlay: 0.90
38
+ }
39
+ };
40
+ const Card = (0, _styledComponents.default)(_Layout.Flex).withConfig({
41
+ displayName: "BlockCard__Card",
42
+ componentId: "sc-9xwg01-0"
43
+ })(["align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:18px;background:#fff;box-shadow:0px 8px 18px 0px rgba(60,54,58,0.1);cursor:", ";"], _ref => {
44
+ let {
45
+ onClick
46
+ } = _ref;
47
+ return onClick ? 'pointer' : 'default';
48
+ });
49
+ const IconWrap = (0, _styledComponents.default)(_Layout.Flex).withConfig({
50
+ displayName: "BlockCard__IconWrap",
51
+ componentId: "sc-9xwg01-1"
52
+ })(["width:42px;height:42px;border-radius:14px;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden;padding:9px;"]);
53
+
54
+ const IconOverlay = _styledComponents.default.div.withConfig({
55
+ displayName: "BlockCard__IconOverlay",
56
+ componentId: "sc-9xwg01-2"
57
+ })(["position:absolute;inset:0;background:white;opacity:0.84;pointer-events:none;"]);
58
+
59
+ const IconContent = _styledComponents.default.div.withConfig({
60
+ displayName: "BlockCard__IconContent",
61
+ componentId: "sc-9xwg01-3"
62
+ })(["position:relative;z-index:1;display:flex;align-items:center;justify-content:center;"]);
63
+
64
+ const Meta = (0, _styledComponents.default)(_Layout.Flex).withConfig({
65
+ displayName: "BlockCard__Meta",
66
+ componentId: "sc-9xwg01-4"
67
+ })(["flex-direction:column;min-width:0;flex:1;"]);
68
+
69
+ const PillRoot = _styledComponents.default.div.withConfig({
70
+ displayName: "BlockCard__PillRoot",
71
+ componentId: "sc-9xwg01-5"
72
+ })(["position:relative;height:30px;padding:3px 12px;border-radius:8px;font-family:inherit;font-weight:600;font-size:11px;line-height:18px;overflow:hidden;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;"]);
73
+
74
+ const PillOverlay = _styledComponents.default.div.withConfig({
75
+ displayName: "BlockCard__PillOverlay",
76
+ componentId: "sc-9xwg01-6"
77
+ })(["position:absolute;inset:0;background:white;pointer-events:none;"]);
78
+
79
+ const PillLabel = _styledComponents.default.span.withConfig({
80
+ displayName: "BlockCard__PillLabel",
81
+ componentId: "sc-9xwg01-7"
82
+ })(["position:relative;z-index:1;"]);
83
+
84
+ const BlockCard = _ref2 => {
85
+ let {
86
+ blockKey,
87
+ name,
88
+ icon,
89
+ iconColor,
90
+ status,
91
+ statusLabel,
92
+ onClick,
93
+ style
94
+ } = _ref2;
95
+ const bgColor = iconColor || '#2396FB';
96
+ const pillStyle = status ? STATUS_STYLE_MAP[status] : null;
97
+ return _react.default.createElement(Card, {
98
+ onClick: onClick,
99
+ role: onClick ? 'button' : undefined,
100
+ tabIndex: onClick ? 0 : undefined,
101
+ onKeyDown: e => e.key === 'Enter' && onClick && onClick(),
102
+ "data-block-key": blockKey,
103
+ style: style
104
+ }, _react.default.createElement(IconWrap, {
105
+ style: {
106
+ background: bgColor
107
+ }
108
+ }, _react.default.createElement(IconOverlay, null), _react.default.createElement(IconContent, null, icon)), _react.default.createElement(Meta, null, _react.default.createElement(_Typography.Text, {
109
+ sizeText: "display14",
110
+ color: "black96",
111
+ fontWeight: "bold",
112
+ style: {
113
+ overflow: 'hidden',
114
+ textOverflow: 'ellipsis',
115
+ whiteSpace: 'nowrap',
116
+ fontSize: 13
117
+ }
118
+ }, name)), pillStyle && statusLabel && _react.default.createElement(PillRoot, {
119
+ style: {
120
+ background: pillStyle.bg,
121
+ color: pillStyle.text
122
+ }
123
+ }, pillStyle.overlay > 0 && _react.default.createElement(PillOverlay, {
124
+ style: {
125
+ opacity: pillStyle.overlay
126
+ }
127
+ }), _react.default.createElement(PillLabel, null, statusLabel)));
128
+ };
129
+
130
+ exports.BlockCard = BlockCard;
131
+ BlockCard.defaultProps = {
132
+ icon: null,
133
+ iconColor: '#2396FB',
134
+ status: undefined,
135
+ statusLabel: undefined,
136
+ onClick: undefined,
137
+ style: undefined
138
+ };
139
+ var _default = BlockCard;
140
+ exports.default = _default;
@@ -0,0 +1,130 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.Default = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _imgs = require("../../atoms/imgs");
15
+
16
+ var _Layout = require("../../atoms/Layout");
17
+
18
+ var _BlockCard = require("./BlockCard");
19
+
20
+ const STATUS_LABELS = {
21
+ pending: 'Pendiente',
22
+ in_progress: 'En progreso',
23
+ completed: 'Completado',
24
+ overdue: 'Pendiente'
25
+ };
26
+ var _default = {
27
+ title: 'Molecules/BlockCard',
28
+ component: _BlockCard.BlockCard,
29
+ argTypes: {
30
+ name: {
31
+ control: 'text'
32
+ },
33
+ blockKey: {
34
+ control: 'text'
35
+ },
36
+ iconColor: {
37
+ control: {
38
+ type: 'select',
39
+ options: ['green', 'purple', 'pink', 'orange', 'yellow', 'blue']
40
+ }
41
+ },
42
+ status: {
43
+ control: {
44
+ type: 'select',
45
+ options: [undefined, 'pending', 'in_progress', 'completed', 'overdue']
46
+ }
47
+ },
48
+ statusLabel: {
49
+ control: 'text'
50
+ },
51
+ onClick: {
52
+ action: 'clicked'
53
+ }
54
+ }
55
+ };
56
+ exports.default = _default;
57
+ const MOCK_BLOCKS = [{
58
+ blockKey: 'contexto_raices',
59
+ name: 'Contexto y raíces',
60
+ iconColor: '#ACC64E',
61
+ icon: _react.default.createElement(_imgs.Plant, null),
62
+ status: 'completed'
63
+ }, {
64
+ blockKey: 'recuerdos_anecdotas',
65
+ name: 'Recuerdos y anécdotas',
66
+ iconColor: '#8C88E7',
67
+ icon: _react.default.createElement(_imgs.Camera, null),
68
+ status: 'in_progress'
69
+ }, {
70
+ blockKey: 'familia_relaciones',
71
+ name: 'Familia y relaciones',
72
+ iconColor: '#E83060',
73
+ icon: _react.default.createElement(_imgs.Heart, null),
74
+ status: 'overdue'
75
+ }, {
76
+ blockKey: 'despedida',
77
+ name: 'Despedida',
78
+ iconColor: '#F87818',
79
+ icon: _react.default.createElement(_imgs.Sunrise, null),
80
+ status: 'pending'
81
+ }, {
82
+ blockKey: 'forma_ser',
83
+ name: 'Forma de ser',
84
+ iconColor: '#F698D7',
85
+ icon: _react.default.createElement(_imgs.Happy, null),
86
+ status: 'pending'
87
+ }, {
88
+ blockKey: 'vida_adulta_trabajo',
89
+ name: 'Vida adulta y trabajo',
90
+ iconColor: '#5A56DC',
91
+ icon: _react.default.createElement(_imgs.Briefcase, null),
92
+ status: 'pending'
93
+ }, {
94
+ blockKey: 'valores_legado',
95
+ name: 'Valores y legado',
96
+ iconColor: '#5FB3FC',
97
+ icon: _react.default.createElement(_imgs.Diamond, null),
98
+ status: 'pending'
99
+ }, {
100
+ blockKey: 'aficiones_forma_ser',
101
+ name: 'Aficiones y forma de ser',
102
+ iconColor: '#FEAE36',
103
+ icon: _react.default.createElement(_imgs.Music, null),
104
+ status: undefined
105
+ }];
106
+
107
+ const Template = args => _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
108
+ justifyContent: "center"
109
+ }, _react.default.createElement(_Layout.Col, {
110
+ width: [1, 1, 2 / 3]
111
+ }, _react.default.createElement(_Layout.Flex, {
112
+ flexDirection: "column",
113
+ gap: "8px"
114
+ }, MOCK_BLOCKS.map(block => _react.default.createElement(_BlockCard.BlockCard, (0, _extends2.default)({
115
+ key: block.blockKey
116
+ }, block, {
117
+ statusLabel: block.status ? STATUS_LABELS[block.status] : undefined,
118
+ onClick: args.onClick
119
+ })))))));
120
+
121
+ const Default = Template.bind({});
122
+ exports.Default = Default;
123
+ Default.args = {};
124
+ Default.storyName = 'BlockCard — índice de bloques';
125
+ Default.parameters = {
126
+ design: {
127
+ type: 'figma',
128
+ url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-93279'
129
+ }
130
+ };
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "BlockCard", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _BlockCard.BlockCard;
10
+ }
11
+ });
12
+
13
+ var _BlockCard = require("./BlockCard");
@@ -0,0 +1,89 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.BlockProgress = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _Layout = require("../../../atoms/Layout");
15
+
16
+ var _Typography = require("../../../atoms/Typography");
17
+
18
+ const Wrap = _styledComponents.default.div.withConfig({
19
+ displayName: "BlockProgress__Wrap",
20
+ componentId: "sc-114x50b-0"
21
+ })(["width:100%;display:flex;flex-direction:column;gap:6px;"]);
22
+
23
+ const Track = _styledComponents.default.div.withConfig({
24
+ displayName: "BlockProgress__Track",
25
+ componentId: "sc-114x50b-1"
26
+ })(["width:100%;height:4px;border-radius:999px;background:#e5e5e8;overflow:hidden;"]);
27
+
28
+ const Fill = _styledComponents.default.div.withConfig({
29
+ displayName: "BlockProgress__Fill",
30
+ componentId: "sc-114x50b-2"
31
+ })(["height:100%;border-radius:999px;transition:width 0.4s ease;"]);
32
+
33
+ const LabelRow = (0, _styledComponents.default)(_Layout.Flex).withConfig({
34
+ displayName: "BlockProgress__LabelRow",
35
+ componentId: "sc-114x50b-3"
36
+ })(["align-items:center;justify-content:space-between;gap:6px;"]);
37
+ const CountersRow = (0, _styledComponents.default)(_Layout.Flex).withConfig({
38
+ displayName: "BlockProgress__CountersRow",
39
+ componentId: "sc-114x50b-4"
40
+ })(["align-items:center;gap:6px;"]);
41
+
42
+ const BlockProgress = _ref => {
43
+ let {
44
+ requiredCompleted,
45
+ requiredTotal,
46
+ optionalCompleted,
47
+ optionalTotal,
48
+ percentage,
49
+ message,
50
+ color
51
+ } = _ref;
52
+ const showOptional = optionalTotal != null && optionalTotal > 0;
53
+ const clampedPct = Math.min(100, Math.max(0, percentage));
54
+ return _react.default.createElement(Wrap, null, _react.default.createElement(Track, null, _react.default.createElement(Fill, {
55
+ style: {
56
+ width: "".concat(clampedPct, "%"),
57
+ background: color
58
+ }
59
+ })), _react.default.createElement(LabelRow, null, _react.default.createElement(CountersRow, null, _react.default.createElement(_Typography.Text, {
60
+ sizeText: "display12",
61
+ color: "black60",
62
+ fontWeight: "medium"
63
+ }, requiredCompleted, " / ", requiredTotal), showOptional && _react.default.createElement(_Typography.Text, {
64
+ sizeText: "display12",
65
+ color: "black60",
66
+ fontWeight: "medium"
67
+ }, optionalCompleted, " / ", optionalTotal), _react.default.createElement(_Typography.Text, {
68
+ sizeText: "display12",
69
+ color: "black84",
70
+ fontWeight: "bold"
71
+ }, clampedPct, "%")), message && _react.default.createElement(_Typography.Text, {
72
+ sizeText: "display12",
73
+ fontWeight: "bold",
74
+ style: {
75
+ color,
76
+ flexShrink: 0
77
+ }
78
+ }, message)));
79
+ };
80
+
81
+ exports.BlockProgress = BlockProgress;
82
+ BlockProgress.defaultProps = {
83
+ optionalCompleted: undefined,
84
+ optionalTotal: undefined,
85
+ message: undefined,
86
+ color: '#ACC64E'
87
+ };
88
+ var _default = BlockProgress;
89
+ exports.default = _default;
@@ -0,0 +1,159 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.PremiumPartial = exports.PremiumComplete = exports.FreePlanPartial = exports.FreePlanEmpty = exports.FreePlanComplete = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _Layout = require("../../../atoms/Layout");
13
+
14
+ var _BlockProgress = require("./BlockProgress");
15
+
16
+ var _default = {
17
+ title: 'Organisms/BiographicalEditor/BlockProgress',
18
+ component: _BlockProgress.BlockProgress,
19
+ argTypes: {
20
+ requiredCompleted: {
21
+ control: {
22
+ type: 'number',
23
+ min: 0,
24
+ max: 4,
25
+ step: 1
26
+ }
27
+ },
28
+ requiredTotal: {
29
+ control: {
30
+ type: 'number',
31
+ min: 1,
32
+ max: 4,
33
+ step: 1
34
+ }
35
+ },
36
+ optionalCompleted: {
37
+ control: {
38
+ type: 'number',
39
+ min: 0,
40
+ max: 4,
41
+ step: 1
42
+ }
43
+ },
44
+ optionalTotal: {
45
+ control: {
46
+ type: 'number',
47
+ min: 0,
48
+ max: 4,
49
+ step: 1
50
+ }
51
+ },
52
+ percentage: {
53
+ control: {
54
+ type: 'range',
55
+ min: 0,
56
+ max: 100,
57
+ step: 1
58
+ }
59
+ },
60
+ message: {
61
+ control: 'text'
62
+ },
63
+ color: {
64
+ control: 'color'
65
+ }
66
+ }
67
+ };
68
+ exports.default = _default;
69
+
70
+ const Wrapper = _ref => {
71
+ let {
72
+ children
73
+ } = _ref;
74
+ return _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
75
+ justifyContent: "center"
76
+ }, _react.default.createElement(_Layout.Col, {
77
+ width: [1, 1, 2 / 3]
78
+ }, _react.default.createElement(_Layout.Flex, {
79
+ flexDirection: "column",
80
+ gap: "24px",
81
+ padding: "24px 0"
82
+ }, children))));
83
+ };
84
+
85
+ const FreePlanEmpty = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
86
+
87
+ exports.FreePlanEmpty = FreePlanEmpty;
88
+ FreePlanEmpty.args = {
89
+ requiredCompleted: 0,
90
+ requiredTotal: 4,
91
+ percentage: 0,
92
+ message: 'Completa los 4 bloques para continuar',
93
+ color: '#2396FB'
94
+ };
95
+ FreePlanEmpty.storyName = 'Free — sin completar';
96
+
97
+ const FreePlanPartial = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
98
+
99
+ exports.FreePlanPartial = FreePlanPartial;
100
+ FreePlanPartial.args = {
101
+ requiredCompleted: 2,
102
+ requiredTotal: 4,
103
+ percentage: 50,
104
+ message: '¡Vas por la mitad!',
105
+ color: '#2396FB'
106
+ };
107
+ FreePlanPartial.storyName = 'Free — a medias';
108
+
109
+ const FreePlanComplete = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
110
+
111
+ exports.FreePlanComplete = FreePlanComplete;
112
+ FreePlanComplete.args = {
113
+ requiredCompleted: 4,
114
+ requiredTotal: 4,
115
+ percentage: 100,
116
+ message: '¡Listo para generar!',
117
+ color: '#2396FB'
118
+ };
119
+ FreePlanComplete.storyName = 'Free — completado';
120
+
121
+ const PremiumPartial = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
122
+
123
+ exports.PremiumPartial = PremiumPartial;
124
+ PremiumPartial.args = {
125
+ requiredCompleted: 4,
126
+ requiredTotal: 4,
127
+ optionalCompleted: 2,
128
+ optionalTotal: 4,
129
+ percentage: 75,
130
+ message: 'Está casi perfecto',
131
+ color: '#ACC64E'
132
+ };
133
+ PremiumPartial.storyName = 'Premium — parcial (Figma)';
134
+ PremiumPartial.parameters = {
135
+ design: {
136
+ type: 'figma',
137
+ url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-42499'
138
+ }
139
+ };
140
+
141
+ const PremiumComplete = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
142
+
143
+ exports.PremiumComplete = PremiumComplete;
144
+ PremiumComplete.args = {
145
+ requiredCompleted: 4,
146
+ requiredTotal: 4,
147
+ optionalCompleted: 4,
148
+ optionalTotal: 4,
149
+ percentage: 100,
150
+ message: '¡Todo completado!',
151
+ color: '#ACC64E'
152
+ };
153
+ PremiumComplete.storyName = 'Premium — todo completado';
154
+ PremiumComplete.parameters = {
155
+ design: {
156
+ type: 'figma',
157
+ url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-42519'
158
+ }
159
+ };
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ Object.defineProperty(exports, "BlockProgress", {
9
+ enumerable: true,
10
+ get: function () {
11
+ return _BlockProgress.default;
12
+ }
13
+ });
14
+
15
+ var _BlockProgress = _interopRequireDefault(require("./BlockProgress"));