mautourco-components 0.2.59 → 0.2.61

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 +52 -50
  5. package/dist/components/organisms/Table/Table.js +3 -3
  6. package/dist/components/organisms/Table/columns/quotation-columns.js +7 -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 +52 -48
  11. package/src/components/organisms/Table/Table.tsx +29 -27
  12. package/src/components/organisms/Table/columns/quotation-columns.tsx +9 -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
@@ -22,6 +22,9 @@
22
22
  border-spacing: 0;
23
23
  &.table-layout-fixed {
24
24
  table-layout: fixed;
25
+ .table {
26
+ table-layout: fixed;
27
+ }
25
28
  }
26
29
  th,
27
30
  td {
@@ -83,56 +86,6 @@
83
86
  border-bottom: none;
84
87
  }
85
88
  }
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
89
  }
137
90
  .table__nested-wrapper {
138
91
  overflow: hidden;
@@ -294,4 +247,53 @@
294
247
  & + tr {
295
248
  border-top: none;
296
249
  }
250
+ }
251
+
252
+ .table__children-wrapper {
253
+ position: relative;
254
+ border: 1px solid transparent;
255
+ border-left: none;
256
+ &::after {
257
+ content: '';
258
+ position: absolute;
259
+ inset: -1px;
260
+ pointer-events: none;
261
+ max-width: 100%;
262
+ background-image:
263
+ repeating-linear-gradient(
264
+ to right,
265
+ var(--color-border-medium) 0,
266
+ var(--color-border-medium) 16px,
267
+ transparent 16px,
268
+ transparent 32px
269
+ ),
270
+ repeating-linear-gradient(
271
+ to right,
272
+ var(--color-border-medium) 0,
273
+ var(--color-border-medium) 16px,
274
+ transparent 16px,
275
+ transparent 32px
276
+ ),
277
+ repeating-linear-gradient(
278
+ to bottom,
279
+ var(--color-border-medium) 0,
280
+ var(--color-border-medium) 16px,
281
+ transparent 16px,
282
+ transparent 32px
283
+ ),
284
+ repeating-linear-gradient(
285
+ to bottom,
286
+ var(--color-border-medium) 0,
287
+ var(--color-border-medium) 16px,
288
+ transparent 16px,
289
+ transparent 32px
290
+ );
291
+ background-size:
292
+ 100% 1px,
293
+ 100% 1px,
294
+ 1px 100%,
295
+ 1px 100%;
296
+ background-position: top, bottom, left, right;
297
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
298
+ }
297
299
  }
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,13 @@ 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 = false;
92
+ if (raw.date[0]) {
93
+ isPast = new Date(raw.date[0]) < new Date();
94
+ }
95
+ 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', {
96
+ 'opacity-50 pointer-events-none': isPast,
97
+ }), 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
98
  },
93
99
  },
94
100
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.59",
3
+ "version": "0.2.61",
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
@@ -18,6 +18,9 @@
18
18
  border-spacing: 0;
19
19
  &.table-layout-fixed {
20
20
  table-layout: fixed;
21
+ .table {
22
+ table-layout: fixed;
23
+ }
21
24
  }
22
25
  th,
23
26
  td {
@@ -67,54 +70,6 @@
67
70
  border-bottom: none;
68
71
  }
69
72
  }
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
73
  }
119
74
  .table__nested-wrapper {
120
75
  overflow: hidden;
@@ -271,3 +226,52 @@
271
226
  border-top: none;
272
227
  }
273
228
  }
229
+
230
+ .table__children-wrapper {
231
+ @apply relative;
232
+ border: 1px solid transparent;
233
+ border-left: none;
234
+ &::after {
235
+ content: '';
236
+ position: absolute;
237
+ inset: -1px;
238
+ pointer-events: none;
239
+ max-width: 100%;
240
+ background-image:
241
+ repeating-linear-gradient(
242
+ to right,
243
+ var(--color-border-medium) 0,
244
+ var(--color-border-medium) 16px,
245
+ transparent 16px,
246
+ transparent 32px
247
+ ),
248
+ repeating-linear-gradient(
249
+ to right,
250
+ var(--color-border-medium) 0,
251
+ var(--color-border-medium) 16px,
252
+ transparent 16px,
253
+ transparent 32px
254
+ ),
255
+ repeating-linear-gradient(
256
+ to bottom,
257
+ var(--color-border-medium) 0,
258
+ var(--color-border-medium) 16px,
259
+ transparent 16px,
260
+ transparent 32px
261
+ ),
262
+ repeating-linear-gradient(
263
+ to bottom,
264
+ var(--color-border-medium) 0,
265
+ var(--color-border-medium) 16px,
266
+ transparent 16px,
267
+ transparent 32px
268
+ );
269
+ background-size:
270
+ 100% 1px,
271
+ 100% 1px,
272
+ 1px 100%,
273
+ 1px 100%;
274
+ background-position: top, bottom, left, right;
275
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
276
+ }
277
+ }
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,12 @@ 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
+ let isPast = false;
156
+
157
+ if (raw.date[0]) {
158
+ isPast = new Date(raw.date[0]) < new Date();
159
+ }
160
+
155
161
  return (
156
162
  <div>
157
163
  {hasChildren ? (
@@ -168,7 +174,9 @@ export const quotationColumns: (params: {
168
174
  <Button
169
175
  variant={isOnRequest ? 'outline-secondary' : 'secondary'}
170
176
  size="sm"
171
- className="table__button">
177
+ className={cn('table__button', {
178
+ 'opacity-50 pointer-events-none': isPast,
179
+ })}>
172
180
  {isOnRequest ? 'Request to book' : 'Book now'}
173
181
  </Button>
174
182
  <div>