mautourco-components 0.2.59 → 0.2.60

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 (12) hide show
  1. package/dist/components/molecules/DetailsInfo/DetailsFile.d.ts +1 -1
  2. package/dist/components/molecules/DetailsInfo/DetailsFile.js +2 -2
  3. package/dist/components/molecules/TableServiceItem/RowAccommodation.js +5 -12
  4. package/dist/components/organisms/Table/Table.css +49 -50
  5. package/dist/components/organisms/Table/Table.js +3 -3
  6. package/dist/components/organisms/Table/columns/quotation-columns.js +4 -1
  7. package/package.json +1 -1
  8. package/src/components/molecules/DetailsInfo/DetailsFile.tsx +4 -4
  9. package/src/components/molecules/TableServiceItem/RowAccommodation.tsx +3 -10
  10. package/src/components/organisms/Table/Table.css +49 -48
  11. package/src/components/organisms/Table/Table.tsx +29 -27
  12. package/src/components/organisms/Table/columns/quotation-columns.tsx +5 -1
package/dist/components/molecules/DetailsInfo/DetailsFile.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface DetailsFileProps {
6
6
  /** Label of the file */
7
7
  label?: string;
8
8
  /** Show the title of the file */
9
- withTitle?: boolean;
9
+ title?: string;
10
10
  /** Show the regular info of the file */
11
11
  showRegularInfo?: boolean;
12
12
  }
package/dist/components/molecules/DetailsInfo/DetailsFile.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Text } from '../../atoms/Typography/Typography';
3
3
  export function DetailsFile(props) {
4
- var number = props.number, name = props.name, _a = props.label, label = _a === void 0 ? 'File number:' : _a, _b = props.withTitle, withTitle = _b === void 0 ? false : _b, _c = props.showRegularInfo, showRegularInfo = _c === void 0 ? true : _c;
5
- return (_jsxs("div", { className: "grid gap-y-2", children: [withTitle && (_jsx(Text, { variant: "bold", className: "text-2xl", color: "brand", children: label })), showRegularInfo && (_jsxs(Text, { variant: "regular", color: "default", children: [label, " ", number] })), _jsx(Text, { variant: "medium", color: "accent", children: name })] }));
4
+ var number = props.number, name = props.name, _a = props.label, label = _a === void 0 ? 'File number:' : _a, _b = props.title, title = _b === void 0 ? false : _b, _c = props.showRegularInfo, showRegularInfo = _c === void 0 ? true : _c;
5
+ return (_jsxs("div", { className: "grid gap-y-2", children: [title && (_jsx(Text, { variant: "bold", className: "text-2xl", color: "brand", children: title })), showRegularInfo && (_jsxs(Text, { variant: "regular", color: "default", children: [label, " ", number] })), _jsx(Text, { variant: "medium", color: "accent", children: name })] }));
6
6
  }
package/dist/components/molecules/TableServiceItem/RowAccommodation.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
- import { differenceInDays } from 'date-fns';
3
- import { useMemo } from 'react';
2
+ import useStays from '../../../hooks/useStays';
4
3
  import { DetailsCol as DetailsColComponent } from './DetailsCol';
5
4
  import { ItemCol } from './ItemCol';
6
5
  var clientType = {
@@ -13,21 +12,15 @@ export function RowAccommodation() {
13
12
  return _jsx(_Fragment, {});
14
13
  }
15
14
  function DetailsCol(props) {
16
- var _a;
17
- var data = props.data, _b = props.index, index = _b === void 0 ? 0 : _b;
18
- var stay = useMemo(function () {
19
- var _a;
20
- if ((_a = data.Dates) === null || _a === void 0 ? void 0 : _a.length) {
21
- return differenceInDays(data.Dates[1], data.Dates[0]);
22
- }
23
- return 0;
24
- }, [data]);
15
+ var _a, _b;
16
+ var data = props.data, _c = props.index, index = _c === void 0 ? 0 : _c;
17
+ var stay = useStays(data.Dates).stay;
25
18
  return (_jsx(DetailsColComponent, { data: [
26
19
  { icon: 'calendar2', value: "Room ".concat(index + 1, " : ").concat(data.RoomName) },
27
20
  { icon: 'night', value: "".concat(stay, " Nights") },
28
21
  {
29
22
  icon: 'user',
30
- value: "Client type : ".concat(clientType[(_a = data.ClientCategory) === null || _a === void 0 ? void 0 : _a.toLowerCase()]),
23
+ value: "Client type : ".concat((_b = clientType[(_a = data.ClientCategory) === null || _a === void 0 ? void 0 : _a.toLowerCase()]) !== null && _b !== void 0 ? _b : data.ClientCategory),
31
24
  },
32
25
  { icon: 'utensils', value: "Meal plan : ".concat(data.MealPlan) },
33
26
  ] }));
package/dist/components/organisms/Table/Table.css CHANGED
@@ -83,56 +83,6 @@
83
83
  border-bottom: none;
84
84
  }
85
85
  }
86
- &.table__children--visible {
87
- position: relative;
88
- }
89
- &.table__children--visible {
90
- border: 1px solid transparent;
91
- border-left: none;
92
- &::after {
93
- content: '';
94
- position: absolute;
95
- inset: -1px -1px 1px -1px;
96
- pointer-events: none;
97
- max-width: 100%;
98
- background-image:
99
- repeating-linear-gradient(
100
- to right,
101
- var(--color-border-medium) 0,
102
- var(--color-border-medium) 16px,
103
- transparent 16px,
104
- transparent 32px
105
- ),
106
- repeating-linear-gradient(
107
- to right,
108
- var(--color-border-medium) 0,
109
- var(--color-border-medium) 16px,
110
- transparent 16px,
111
- transparent 32px
112
- ),
113
- repeating-linear-gradient(
114
- to bottom,
115
- var(--color-border-medium) 0,
116
- var(--color-border-medium) 16px,
117
- transparent 16px,
118
- transparent 32px
119
- ),
120
- repeating-linear-gradient(
121
- to bottom,
122
- var(--color-border-medium) 0,
123
- var(--color-border-medium) 16px,
124
- transparent 16px,
125
- transparent 32px
126
- );
127
- background-size:
128
- 100% 1px,
129
- 100% 1px,
130
- 1px 100%,
131
- 1px 100%;
132
- background-position: top, bottom, left, right;
133
- background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
134
- }
135
- }
136
86
  }
137
87
  .table__nested-wrapper {
138
88
  overflow: hidden;
@@ -294,4 +244,53 @@
294
244
  & + tr {
295
245
  border-top: none;
296
246
  }
247
+ }
248
+
249
+ .table__children-wrapper {
250
+ position: relative;
251
+ border: 1px solid transparent;
252
+ border-left: none;
253
+ &::after {
254
+ content: '';
255
+ position: absolute;
256
+ inset: -1px -1px 1px -1px;
257
+ pointer-events: none;
258
+ max-width: 100%;
259
+ background-image:
260
+ repeating-linear-gradient(
261
+ to right,
262
+ var(--color-border-medium) 0,
263
+ var(--color-border-medium) 16px,
264
+ transparent 16px,
265
+ transparent 32px
266
+ ),
267
+ repeating-linear-gradient(
268
+ to right,
269
+ var(--color-border-medium) 0,
270
+ var(--color-border-medium) 16px,
271
+ transparent 16px,
272
+ transparent 32px
273
+ ),
274
+ repeating-linear-gradient(
275
+ to bottom,
276
+ var(--color-border-medium) 0,
277
+ var(--color-border-medium) 16px,
278
+ transparent 16px,
279
+ transparent 32px
280
+ ),
281
+ repeating-linear-gradient(
282
+ to bottom,
283
+ var(--color-border-medium) 0,
284
+ var(--color-border-medium) 16px,
285
+ transparent 16px,
286
+ transparent 32px
287
+ );
288
+ background-size:
289
+ 100% 1px,
290
+ 100% 1px,
291
+ 1px 100%,
292
+ 1px 100%;
293
+ background-position: top, bottom, left, right;
294
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
295
+ }
297
296
  }
package/dist/components/organisms/Table/Table.js CHANGED
@@ -88,9 +88,9 @@ export function Table(props) {
88
88
  }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row, { parentIndex: rowIndex }); }, children: row.isHighlighted ? (_jsx("td", { colSpan: columns.length, className: "table__cell-highlighted", children: _jsx("div", { className: "table__row-div-highlighted", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }) }) }) }) })) : (_jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex })) }));
89
89
  return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className: "table__row-grouped", children: _jsx("td", { colSpan: columns.length, children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow, parentIndex: rowIndex }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", children: _jsx("td", { colSpan: columns.length, className: cn({
90
90
  'table__children--visible': hasVisibleChildren,
91
- }), children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
92
- 'table__row-nested': row.children && row.children.length > 0,
93
- }), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, parentIndex: rowIndex, children: row.children || [], onClickRow: onClickRow }) }) }, "nested-".concat(rowIndex))) })] }) }) }) })) }, "rw-".concat(rowIndex)));
91
+ }), children: _jsx("div", { className: "table__children-wrapper", children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
92
+ 'table__row-nested': row.children && row.children.length > 0,
93
+ }), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, parentIndex: rowIndex, children: row.children || [], onClickRow: onClickRow }) }) }, "nested-".concat(rowIndex))) })] }) }) }) }) })) }, "rw-".concat(rowIndex)));
94
94
  }), data.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "table__cell-empty", children: _jsx(Text, { size: "md", variant: "bold", className: "text-center", children: "No data found" }) }) }))] })] }) }), hasTotal && (_jsx("div", { className: 'table__total-container', children: _jsx("table", { className: "table", children: _jsx("tbody", { className: cn('table__total', {
95
95
  'table__total--dashed': isTotalBorderDash,
96
96
  }), children: _jsxs("tr", { children: [_jsx("td", { colSpan: columns.length - 1 }), _jsx("td", { style: {
package/dist/components/organisms/Table/columns/quotation-columns.js CHANGED
@@ -88,7 +88,10 @@ export var quotationColumns = function (_a) {
88
88
  var isExpanded = (_a = raw.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
89
89
  var buttonLabel = isExpanded ? 'See less' : 'See more';
90
90
  var isOnRequest = raw.status.toLowerCase() === 'on request';
91
- return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand === null || onExpand === void 0 ? void 0 : onExpand(raw, index, childIndex); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: "table__button", children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx("div", { children: _jsx(ActionDropdown, { data: actionDropdownData((_b = onAction === null || onAction === void 0 ? void 0 : onAction({ isChild: childIndex !== undefined, quote: raw })) !== null && _b !== void 0 ? _b : (function () { })) }) })] })) }));
91
+ var isPast = new Date(raw.created_date) < new Date();
92
+ return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand === null || onExpand === void 0 ? void 0 : onExpand(raw, index, childIndex); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: cn('table__button', {
93
+ 'opacity-50 pointer-events-none': isPast,
94
+ }), children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx("div", { children: _jsx(ActionDropdown, { data: actionDropdownData((_b = onAction === null || onAction === void 0 ? void 0 : onAction({ isChild: childIndex !== undefined, quote: raw })) !== null && _b !== void 0 ? _b : (function () { })) }) })] })) }));
92
95
  },
93
96
  },
94
97
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.59",
3
+ "version": "0.2.60",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Mautourco pour le redesign",
6
6
  "main": "dist/index.js",
package/src/components/molecules/DetailsInfo/DetailsFile.tsx CHANGED
@@ -8,7 +8,7 @@ export interface DetailsFileProps {
8
8
  /** Label of the file */
9
9
  label?: string;
10
10
  /** Show the title of the file */
11
- withTitle?: boolean;
11
+ title?: string;
12
12
  /** Show the regular info of the file */
13
13
  showRegularInfo?: boolean;
14
14
  }
@@ -18,14 +18,14 @@ export function DetailsFile(props: DetailsFileProps) {
18
18
  number,
19
19
  name,
20
20
  label = 'File number:',
21
- withTitle = false,
21
+ title = false,
22
22
  showRegularInfo = true,
23
23
  } = props;
24
24
  return (
25
25
  <div className="grid gap-y-2">
26
- {withTitle && (
26
+ {title && (
27
27
  <Text variant="bold" className="text-2xl" color="brand">
28
- {label}
28
+ {title}
29
29
  </Text>
30
30
  )}
31
31
  {showRegularInfo && (
package/src/components/molecules/TableServiceItem/RowAccommodation.tsx CHANGED
@@ -1,5 +1,4 @@
1
- import { differenceInDays } from 'date-fns';
2
- import { useMemo } from 'react';
1
+ import useStays from '@/src/hooks/useStays';
3
2
  import { DetailsCol as DetailsColComponent } from './DetailsCol';
4
3
  import { ItemCol, ItemColProps } from './ItemCol';
5
4
 
@@ -27,13 +26,7 @@ export function RowAccommodation() {
27
26
  function DetailsCol(props: RowAccommodationProps) {
28
27
  const { data, index = 0 } = props;
29
28
 
30
- const stay = useMemo(() => {
31
- if (data.Dates?.length) {
32
- return differenceInDays(data.Dates[1], data.Dates[0]);
33
- }
34
-
35
- return 0;
36
- }, [data]);
29
+ const { stay } = useStays(data.Dates);
37
30
  return (
38
31
  <DetailsColComponent
39
32
  data={[
@@ -41,7 +34,7 @@ function DetailsCol(props: RowAccommodationProps) {
41
34
  { icon: 'night', value: `${stay} Nights` },
42
35
  {
43
36
  icon: 'user',
44
- value: `Client type : ${clientType[data.ClientCategory?.toLowerCase() as string]}`,
37
+ value: `Client type : ${clientType[data.ClientCategory?.toLowerCase() as string] ?? data.ClientCategory}`,
45
38
  },
46
39
  { icon: 'utensils', value: `Meal plan : ${data.MealPlan}` },
47
40
  ]}
package/src/components/organisms/Table/Table.css CHANGED
@@ -67,54 +67,6 @@
67
67
  border-bottom: none;
68
68
  }
69
69
  }
70
- &.table__children--visible {
71
- @apply relative;
72
- border: 1px solid transparent;
73
- border-left: none;
74
- &::after {
75
- content: '';
76
- position: absolute;
77
- inset: -1px -1px 1px -1px;
78
- pointer-events: none;
79
- max-width: 100%;
80
- background-image:
81
- repeating-linear-gradient(
82
- to right,
83
- var(--color-border-medium) 0,
84
- var(--color-border-medium) 16px,
85
- transparent 16px,
86
- transparent 32px
87
- ),
88
- repeating-linear-gradient(
89
- to right,
90
- var(--color-border-medium) 0,
91
- var(--color-border-medium) 16px,
92
- transparent 16px,
93
- transparent 32px
94
- ),
95
- repeating-linear-gradient(
96
- to bottom,
97
- var(--color-border-medium) 0,
98
- var(--color-border-medium) 16px,
99
- transparent 16px,
100
- transparent 32px
101
- ),
102
- repeating-linear-gradient(
103
- to bottom,
104
- var(--color-border-medium) 0,
105
- var(--color-border-medium) 16px,
106
- transparent 16px,
107
- transparent 32px
108
- );
109
- background-size:
110
- 100% 1px,
111
- 100% 1px,
112
- 1px 100%,
113
- 1px 100%;
114
- background-position: top, bottom, left, right;
115
- background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
116
- }
117
- }
118
70
  }
119
71
  .table__nested-wrapper {
120
72
  overflow: hidden;
@@ -271,3 +223,52 @@
271
223
  border-top: none;
272
224
  }
273
225
  }
226
+
227
+ .table__children-wrapper {
228
+ @apply relative;
229
+ border: 1px solid transparent;
230
+ border-left: none;
231
+ &::after {
232
+ content: '';
233
+ position: absolute;
234
+ inset: -1px -1px 1px -1px;
235
+ pointer-events: none;
236
+ max-width: 100%;
237
+ background-image:
238
+ repeating-linear-gradient(
239
+ to right,
240
+ var(--color-border-medium) 0,
241
+ var(--color-border-medium) 16px,
242
+ transparent 16px,
243
+ transparent 32px
244
+ ),
245
+ repeating-linear-gradient(
246
+ to right,
247
+ var(--color-border-medium) 0,
248
+ var(--color-border-medium) 16px,
249
+ transparent 16px,
250
+ transparent 32px
251
+ ),
252
+ repeating-linear-gradient(
253
+ to bottom,
254
+ var(--color-border-medium) 0,
255
+ var(--color-border-medium) 16px,
256
+ transparent 16px,
257
+ transparent 32px
258
+ ),
259
+ repeating-linear-gradient(
260
+ to bottom,
261
+ var(--color-border-medium) 0,
262
+ var(--color-border-medium) 16px,
263
+ transparent 16px,
264
+ transparent 32px
265
+ );
266
+ background-size:
267
+ 100% 1px,
268
+ 100% 1px,
269
+ 1px 100%,
270
+ 1px 100%;
271
+ background-position: top, bottom, left, right;
272
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
273
+ }
274
+ }
package/src/components/organisms/Table/Table.tsx CHANGED
@@ -263,33 +263,35 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
263
263
  className={cn({
264
264
  'table__children--visible': hasVisibleChildren,
265
265
  })}>
266
- <table className="table">
267
- <tbody>
268
- {defaultTable}
269
- <AnimatePresence initial={false}>
270
- {hasVisibleChildren && (
271
- <tr
272
- key={`nested-${rowIndex}`}
273
- className={cn('table__no-hover', {
274
- 'table__row-nested':
275
- row.children && row.children.length > 0,
276
- })}>
277
- <td
278
- colSpan={columns.length}
279
- className="table__cell-nested">
280
- <NestedContent<T>
281
- rowIndex={rowIndex}
282
- columns={columns}
283
- parentIndex={rowIndex}
284
- children={row.children || []}
285
- onClickRow={onClickRow}
286
- />
287
- </td>
288
- </tr>
289
- )}
290
- </AnimatePresence>
291
- </tbody>
292
- </table>
266
+ <div className="table__children-wrapper">
267
+ <table className="table">
268
+ <tbody>
269
+ {defaultTable}
270
+ <AnimatePresence initial={false}>
271
+ {hasVisibleChildren && (
272
+ <tr
273
+ key={`nested-${rowIndex}`}
274
+ className={cn('table__no-hover', {
275
+ 'table__row-nested':
276
+ row.children && row.children.length > 0,
277
+ })}>
278
+ <td
279
+ colSpan={columns.length}
280
+ className="table__cell-nested">
281
+ <NestedContent<T>
282
+ rowIndex={rowIndex}
283
+ columns={columns}
284
+ parentIndex={rowIndex}
285
+ children={row.children || []}
286
+ onClickRow={onClickRow}
287
+ />
288
+ </td>
289
+ </tr>
290
+ )}
291
+ </AnimatePresence>
292
+ </tbody>
293
+ </table>
294
+ </div>
293
295
  </td>
294
296
  </tr>
295
297
  )}
package/src/components/organisms/Table/columns/quotation-columns.tsx CHANGED
@@ -152,6 +152,8 @@ export const quotationColumns: (params: {
152
152
  const buttonLabel = isExpanded ? 'See less' : 'See more';
153
153
  const isOnRequest = raw.status.toLowerCase() === 'on request';
154
154
 
155
+ const isPast = new Date(raw.created_date) < new Date();
156
+
155
157
  return (
156
158
  <div>
157
159
  {hasChildren ? (
@@ -168,7 +170,9 @@ export const quotationColumns: (params: {
168
170
  <Button
169
171
  variant={isOnRequest ? 'outline-secondary' : 'secondary'}
170
172
  size="sm"
171
- className="table__button">
173
+ className={cn('table__button', {
174
+ 'opacity-50 pointer-events-none': isPast,
175
+ })}>
172
176
  {isOnRequest ? 'Request to book' : 'Book now'}
173
177
  </Button>
174
178
  <div>