@tecsinapse/cortex-react 1.2.2-beta.0 → 1.2.2-beta.2
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.
- package/dist/cjs/components/BaseSnackbar.js +13 -0
- package/dist/cjs/components/Calendar.js +22 -0
- package/dist/cjs/components/CalendarCell.js +51 -0
- package/dist/cjs/components/CalendarGrid.js +23 -0
- package/dist/cjs/components/CalendarGridBodyRows.js +12 -0
- package/dist/cjs/components/CalendarGridHeaderRow.js +12 -0
- package/dist/cjs/components/CalendarHeader.js +40 -0
- package/dist/cjs/components/DefaultSnack.js +27 -0
- package/dist/cjs/components/GroupButton.js +2 -1
- package/dist/cjs/components/ProgressBar.js +2 -1
- package/dist/cjs/components/RangeCalendar.js +44 -0
- package/dist/cjs/components/SearchInput.js +19 -12
- package/dist/cjs/components/Select.js +4 -4
- package/dist/cjs/components/Skeleton.js +1 -0
- package/dist/cjs/components/Table.js +8 -14
- package/dist/cjs/hooks/useCalendar.js +27 -0
- package/dist/cjs/hooks/useCalendarCell.js +35 -0
- package/dist/cjs/hooks/useCalendarGrid.js +14 -0
- package/dist/cjs/index.js +35 -20
- package/dist/cjs/service/SnackbarSonner.js +54 -0
- package/dist/cjs/styles/calendar-cell.js +40 -0
- package/dist/esm/components/BaseSnackbar.js +11 -0
- package/dist/esm/components/Calendar.js +20 -0
- package/dist/esm/components/CalendarCell.js +49 -0
- package/dist/esm/components/CalendarGrid.js +21 -0
- package/dist/esm/components/CalendarGridBodyRows.js +10 -0
- package/dist/esm/components/CalendarGridHeaderRow.js +10 -0
- package/dist/esm/components/CalendarHeader.js +38 -0
- package/dist/esm/components/DefaultSnack.js +25 -0
- package/dist/esm/components/GroupButton.js +2 -1
- package/dist/esm/components/ProgressBar.js +2 -1
- package/dist/esm/components/RangeCalendar.js +42 -0
- package/dist/esm/components/SearchInput.js +19 -12
- package/dist/esm/components/Select.js +4 -4
- package/dist/esm/components/Skeleton.js +1 -0
- package/dist/esm/components/Table.js +9 -14
- package/dist/esm/hooks/useCalendar.js +25 -0
- package/dist/esm/hooks/useCalendarCell.js +33 -0
- package/dist/esm/hooks/useCalendarGrid.js +12 -0
- package/dist/esm/index.js +17 -9
- package/dist/esm/service/SnackbarSonner.js +52 -0
- package/dist/esm/styles/calendar-cell.js +38 -0
- package/dist/types/components/BaseSnackbar.d.ts +9 -0
- package/dist/types/components/Calendar.d.ts +6 -0
- package/dist/types/components/CalendarCell.d.ts +8 -0
- package/dist/types/components/CalendarGrid.d.ts +6 -0
- package/dist/types/components/CalendarGridBodyRows.d.ts +6 -0
- package/dist/types/components/CalendarGridHeaderRow.d.ts +5 -0
- package/dist/types/components/CalendarHeader.d.ts +6 -0
- package/dist/types/components/DefaultSnack.d.ts +6 -0
- package/dist/types/components/RangeCalendar.d.ts +10 -0
- package/dist/types/components/Table.d.ts +0 -1
- package/dist/types/components/index.d.ts +12 -9
- package/dist/types/hooks/index.d.ts +3 -0
- package/dist/types/hooks/useCalendar.d.ts +10 -0
- package/dist/types/hooks/useCalendarCell.d.ts +18 -0
- package/dist/types/hooks/useCalendarGrid.d.ts +10 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/provider/SnackbarProvider.d.ts +10 -0
- package/dist/types/service/ISnackbar.d.ts +7 -0
- package/dist/types/service/SnackbarSonner.d.ts +7 -0
- package/dist/types/service/index.d.ts +2 -0
- package/dist/types/styles/calendar-cell.d.ts +199 -0
- package/dist/types/styles/index.d.ts +2 -1
- package/dist/types/tests/Calendar.test.d.ts +1 -0
- package/dist/types/tests/CalendarCell.test.d.ts +1 -0
- package/dist/types/tests/CalendarGridBodyRows.test.d.ts +1 -0
- package/dist/types/tests/CalendarGridHeaderRow.test.d.ts +1 -0
- package/dist/types/tests/CalendarHeader.test.d.ts +1 -0
- package/dist/types/tests/DefaultSnack.test.d.ts +1 -0
- package/dist/types/tests/SearchInput.test.d.ts +1 -0
- package/dist/types/tests/Select.test.d.ts +1 -0
- package/dist/types/tests/Skeleton.test.d.ts +1 -0
- package/dist/types/tests/Snackbar.test.d.ts +1 -0
- package/dist/types/tests/Table.test.d.ts +1 -0
- package/dist/types/tests/useCalendarCell.test.d.ts +1 -0
- package/dist/types/tests/useDebouncedState.test.d.ts +1 -0
- package/package.json +7 -4
- package/dist/cjs/components/Snackbar.js +0 -18
- package/dist/esm/components/Snackbar.js +0 -16
- package/dist/types/components/Snackbar.d.ts +0 -9
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tailwindVariants = require('tailwind-variants');
|
|
4
|
+
|
|
5
|
+
const calendarCell = tailwindVariants.tv({
|
|
6
|
+
slots: {
|
|
7
|
+
cell: "text-center rounded-mili text-black",
|
|
8
|
+
button: "flex aspect-square items-center justify-center"
|
|
9
|
+
},
|
|
10
|
+
variants: {
|
|
11
|
+
isSelected: {
|
|
12
|
+
true: {
|
|
13
|
+
cell: "bg-primary-medium text-white"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
isSelectionStart: {
|
|
17
|
+
true: {
|
|
18
|
+
cell: "bg-primary-medium rounded-r-none text-white"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
isSelectionEnd: {
|
|
22
|
+
true: {
|
|
23
|
+
cell: "bg-primary-medium rounded-l-none text-white"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
inRange: {
|
|
27
|
+
true: {
|
|
28
|
+
cell: "bg-primary-light rounded-none text-black"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
isOutsideVisibleRange: {
|
|
32
|
+
true: {
|
|
33
|
+
cell: "text-secondary-light cursor-default",
|
|
34
|
+
button: "cursor-default"
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
exports.calendarCell = calendarCell;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { snackbar } from '@tecsinapse/cortex-core';
|
|
3
|
+
|
|
4
|
+
const BaseSnackbar = forwardRef(
|
|
5
|
+
(props, ref) => {
|
|
6
|
+
const { children, show, variants } = props;
|
|
7
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement("div", { className: snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null));
|
|
8
|
+
}
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
export { BaseSnackbar };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useCalendar } from '../hooks/useCalendar.js';
|
|
3
|
+
import '@internationalized/date';
|
|
4
|
+
import 'react-aria';
|
|
5
|
+
import { CalendarGrid } from './CalendarGrid.js';
|
|
6
|
+
import { CalendarHeader } from './CalendarHeader.js';
|
|
7
|
+
|
|
8
|
+
const Calendar = ({ value, onChange }) => {
|
|
9
|
+
const { calendarProps, title, state } = useCalendar({ value, onChange });
|
|
10
|
+
return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", "data-testid": "calendar-div" }, /* @__PURE__ */ React.createElement(
|
|
11
|
+
CalendarHeader,
|
|
12
|
+
{
|
|
13
|
+
onClickPrevButton: () => state.focusPreviousPage(),
|
|
14
|
+
onClickNextButton: () => state.focusNextPage(),
|
|
15
|
+
title
|
|
16
|
+
}
|
|
17
|
+
), /* @__PURE__ */ React.createElement(CalendarGrid, { state }));
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export { Calendar };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import '@internationalized/date';
|
|
3
|
+
import 'react-aria';
|
|
4
|
+
import 'react-stately';
|
|
5
|
+
import { useCalendarCell } from '../hooks/useCalendarCell.js';
|
|
6
|
+
import { calendarCell } from '../styles/calendar-cell.js';
|
|
7
|
+
import '../styles/groupButton.js';
|
|
8
|
+
import '../styles/progressBar.js';
|
|
9
|
+
import { Td } from './Table.js';
|
|
10
|
+
|
|
11
|
+
const { cell, button } = calendarCell();
|
|
12
|
+
const CalendarCell = ({ state, date }) => {
|
|
13
|
+
const {
|
|
14
|
+
ref,
|
|
15
|
+
cellProps,
|
|
16
|
+
buttonProps,
|
|
17
|
+
isSelected,
|
|
18
|
+
isOutsideVisibleRange,
|
|
19
|
+
formattedDate,
|
|
20
|
+
isSelectionStart,
|
|
21
|
+
isSelectionEnd,
|
|
22
|
+
inRange
|
|
23
|
+
} = useCalendarCell({ state, date });
|
|
24
|
+
return /* @__PURE__ */ React.createElement(
|
|
25
|
+
Td,
|
|
26
|
+
{
|
|
27
|
+
...cellProps,
|
|
28
|
+
"data-testid": "calendar-cell-td",
|
|
29
|
+
className: cell({
|
|
30
|
+
isOutsideVisibleRange,
|
|
31
|
+
isSelected,
|
|
32
|
+
isSelectionStart,
|
|
33
|
+
isSelectionEnd,
|
|
34
|
+
inRange
|
|
35
|
+
})
|
|
36
|
+
},
|
|
37
|
+
/* @__PURE__ */ React.createElement(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
...buttonProps,
|
|
41
|
+
ref,
|
|
42
|
+
className: button({ isOutsideVisibleRange })
|
|
43
|
+
},
|
|
44
|
+
formattedDate
|
|
45
|
+
)
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { CalendarCell };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import '@internationalized/date';
|
|
3
|
+
import 'react-aria';
|
|
4
|
+
import 'react-stately';
|
|
5
|
+
import { useCalendarGrid } from '../hooks/useCalendarGrid.js';
|
|
6
|
+
import { CalendarGridBodyRows } from './CalendarGridBodyRows.js';
|
|
7
|
+
import { CalendarGridHeaderRow } from './CalendarGridHeaderRow.js';
|
|
8
|
+
|
|
9
|
+
const CalendarGrid = ({ state }) => {
|
|
10
|
+
const { gridProps, headerProps, weekDays } = useCalendarGrid({ state });
|
|
11
|
+
return /* @__PURE__ */ React.createElement(
|
|
12
|
+
"div",
|
|
13
|
+
{
|
|
14
|
+
className: "bg-white rounded-micro px-deca py-mili",
|
|
15
|
+
"data-testid": "calendar-grid"
|
|
16
|
+
},
|
|
17
|
+
/* @__PURE__ */ React.createElement("table", { ...gridProps, className: "border-separate border-spacing-y-nano" }, /* @__PURE__ */ React.createElement("thead", { ...headerProps }, /* @__PURE__ */ React.createElement(CalendarGridHeaderRow, { weekDays })), /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement(CalendarGridBodyRows, { state })))
|
|
18
|
+
);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { CalendarGrid };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CalendarCell } from './CalendarCell.js';
|
|
3
|
+
|
|
4
|
+
const CalendarGridBodyRows = ({ state }) => {
|
|
5
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, [...new Array(6).keys()].map((weekIndex) => /* @__PURE__ */ React.createElement("tr", { key: weekIndex, className: "shadow-0 px-deca" }, state.getDatesInWeek(weekIndex).map((date, i) => {
|
|
6
|
+
return date ? /* @__PURE__ */ React.createElement(CalendarCell, { key: i, state, date }) : /* @__PURE__ */ React.createElement("td", { key: i });
|
|
7
|
+
}))));
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { CalendarGridBodyRows };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { THeadCell } from './Table.js';
|
|
3
|
+
|
|
4
|
+
const CalendarGridHeaderRow = ({
|
|
5
|
+
weekDays
|
|
6
|
+
}) => {
|
|
7
|
+
return /* @__PURE__ */ React.createElement("tr", { "data-testid": "calendar-grid-header-row" }, weekDays.map((day, index) => /* @__PURE__ */ React.createElement(THeadCell, { key: index }, day)));
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { CalendarGridHeaderRow };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
|
|
3
|
+
import { Button } from './Button.js';
|
|
4
|
+
|
|
5
|
+
const CalendarHeader = ({
|
|
6
|
+
onClickPrevButton,
|
|
7
|
+
onClickNextButton,
|
|
8
|
+
title
|
|
9
|
+
}) => {
|
|
10
|
+
return /* @__PURE__ */ React.createElement(
|
|
11
|
+
"div",
|
|
12
|
+
{
|
|
13
|
+
className: "flex flex-row justify-between items-center gap-x-deca bg-miscellaneous-body p-mili",
|
|
14
|
+
"data-testid": "calendar-header"
|
|
15
|
+
},
|
|
16
|
+
/* @__PURE__ */ React.createElement(
|
|
17
|
+
Button,
|
|
18
|
+
{
|
|
19
|
+
onClick: onClickPrevButton,
|
|
20
|
+
variants: { variant: "text", intent: "secondary", size: "small" },
|
|
21
|
+
"data-testid": "calendar-header-prev-button"
|
|
22
|
+
},
|
|
23
|
+
/* @__PURE__ */ React.createElement(FaChevronLeft, null)
|
|
24
|
+
),
|
|
25
|
+
/* @__PURE__ */ React.createElement("span", { className: "font-bold capitalize" }, title),
|
|
26
|
+
/* @__PURE__ */ React.createElement(
|
|
27
|
+
Button,
|
|
28
|
+
{
|
|
29
|
+
onClick: onClickNextButton,
|
|
30
|
+
variants: { variant: "text", intent: "secondary", size: "small" },
|
|
31
|
+
"data-testid": "calendar-header-next-button"
|
|
32
|
+
},
|
|
33
|
+
/* @__PURE__ */ React.createElement(FaChevronRight, null)
|
|
34
|
+
)
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export { CalendarHeader };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseSnackbar } from './BaseSnackbar.js';
|
|
3
|
+
import { IoMdInformationCircleOutline, IoMdClose } from 'react-icons/io';
|
|
4
|
+
|
|
5
|
+
const DefaultSnack = ({
|
|
6
|
+
text,
|
|
7
|
+
onDismiss,
|
|
8
|
+
variants
|
|
9
|
+
}) => /* @__PURE__ */ React.createElement(BaseSnackbar, { show: true, variants: { intent: variants?.intent } }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center flex-row gap-x-mili" }, /* @__PURE__ */ React.createElement(
|
|
10
|
+
IoMdInformationCircleOutline,
|
|
11
|
+
{
|
|
12
|
+
className: "w-[20px] h-[20px] shrink-0",
|
|
13
|
+
"data-testid": "icon-info"
|
|
14
|
+
}
|
|
15
|
+
), /* @__PURE__ */ React.createElement("p", null, text), /* @__PURE__ */ React.createElement(
|
|
16
|
+
IoMdClose,
|
|
17
|
+
{
|
|
18
|
+
"data-testid": "icon-close",
|
|
19
|
+
onClick: onDismiss,
|
|
20
|
+
size: 24,
|
|
21
|
+
className: "cursor-pointer w-[20px] h-[20px] shrink-0"
|
|
22
|
+
}
|
|
23
|
+
)));
|
|
24
|
+
|
|
25
|
+
export { DefaultSnack };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import '../styles/
|
|
3
|
+
import '../styles/calendar-cell.js';
|
|
4
4
|
import { groupButton } from '../styles/groupButton.js';
|
|
5
|
+
import '../styles/progressBar.js';
|
|
5
6
|
|
|
6
7
|
const { button, container, active, inactive, firstButton, lastButton } = groupButton();
|
|
7
8
|
const GroupButton = (props) => {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
2
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import '../styles/calendar-cell.js';
|
|
4
4
|
import '../styles/groupButton.js';
|
|
5
|
+
import { progressBarFilled } from '../styles/progressBar.js';
|
|
5
6
|
|
|
6
7
|
const ProgressBar = ({
|
|
7
8
|
segments: _segments = 1,
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { useLocale, useRangeCalendar } from 'react-aria';
|
|
4
|
+
import { useRangeCalendarState } from 'react-stately';
|
|
5
|
+
import { CalendarGrid } from './CalendarGrid.js';
|
|
6
|
+
import { CalendarHeader } from './CalendarHeader.js';
|
|
7
|
+
|
|
8
|
+
const RangeCalendar = ({ value, onChange }) => {
|
|
9
|
+
const { locale } = useLocale();
|
|
10
|
+
const state = useRangeCalendarState({
|
|
11
|
+
locale,
|
|
12
|
+
createCalendar,
|
|
13
|
+
defaultValue: {
|
|
14
|
+
start: new CalendarDate(
|
|
15
|
+
value.start.getFullYear(),
|
|
16
|
+
value.start.getMonth(),
|
|
17
|
+
value.start.getDate()
|
|
18
|
+
),
|
|
19
|
+
end: new CalendarDate(
|
|
20
|
+
value.end.getFullYear(),
|
|
21
|
+
value.end.getMonth(),
|
|
22
|
+
value.end.getDate()
|
|
23
|
+
)
|
|
24
|
+
},
|
|
25
|
+
onChange: (value2) => onChange({
|
|
26
|
+
start: value2.start.toDate(getLocalTimeZone()),
|
|
27
|
+
end: value2.end.toDate(getLocalTimeZone())
|
|
28
|
+
})
|
|
29
|
+
});
|
|
30
|
+
const ref = React.useRef(null);
|
|
31
|
+
const { calendarProps, title } = useRangeCalendar({}, state, ref);
|
|
32
|
+
return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", ref }, /* @__PURE__ */ React.createElement(
|
|
33
|
+
CalendarHeader,
|
|
34
|
+
{
|
|
35
|
+
onClickPrevButton: () => state.focusPreviousPage(),
|
|
36
|
+
onClickNextButton: () => state.focusNextPage(),
|
|
37
|
+
title
|
|
38
|
+
}
|
|
39
|
+
), /* @__PURE__ */ React.createElement(CalendarGrid, { state }));
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export { RangeCalendar };
|
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import 'clsx';
|
|
2
3
|
import './Badge.js';
|
|
3
|
-
import
|
|
4
|
+
import './BaseSnackbar.js';
|
|
5
|
+
import 'react-icons/md';
|
|
4
6
|
import './Card.js';
|
|
7
|
+
import { Button } from './Button.js';
|
|
8
|
+
import '@internationalized/date';
|
|
9
|
+
import 'react-aria';
|
|
10
|
+
import 'react-stately';
|
|
11
|
+
import { useDebouncedState } from '../hooks/useDebouncedState.js';
|
|
12
|
+
import './CalendarCell.js';
|
|
13
|
+
import '@tecsinapse/cortex-core';
|
|
14
|
+
import 'react-icons/fa';
|
|
15
|
+
import 'react-icons/io';
|
|
16
|
+
import './GroupButton.js';
|
|
5
17
|
import './Hint.js';
|
|
6
18
|
import { Input } from './Input.js';
|
|
7
19
|
import './Modal.js';
|
|
20
|
+
import '../styles/calendar-cell.js';
|
|
21
|
+
import '../styles/groupButton.js';
|
|
22
|
+
import '../styles/progressBar.js';
|
|
8
23
|
import './Select.js';
|
|
9
|
-
import './Snackbar.js';
|
|
10
24
|
import './Tag.js';
|
|
11
|
-
import './Toggle.js';
|
|
12
25
|
import './TextArea.js';
|
|
13
|
-
import '
|
|
14
|
-
import 'react-icons/md';
|
|
15
|
-
import 'clsx';
|
|
16
|
-
import '../styles/progressBar.js';
|
|
17
|
-
import '../styles/groupButton.js';
|
|
18
|
-
import './GroupButton.js';
|
|
26
|
+
import './Toggle.js';
|
|
19
27
|
import { AiOutlineLoading } from 'react-icons/ai';
|
|
20
28
|
import { IoSearchOutline } from 'react-icons/io5';
|
|
21
|
-
import { useDebouncedState } from '../hooks/useDebouncedState.js';
|
|
22
29
|
|
|
23
30
|
const inputFace = "bg-white w-full";
|
|
24
31
|
const inputLeft = "flex items-center";
|
|
@@ -46,7 +53,7 @@ const SearchInput = ({
|
|
|
46
53
|
onClick(searchInput);
|
|
47
54
|
}
|
|
48
55
|
};
|
|
49
|
-
return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline,
|
|
56
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
|
|
50
57
|
Input.Box,
|
|
51
58
|
{
|
|
52
59
|
placeholder,
|
|
@@ -66,7 +73,7 @@ const SearchInput = ({
|
|
|
66
73
|
onClick: () => onClick(searchInput),
|
|
67
74
|
disabled: !searchInput || isSubmitting
|
|
68
75
|
},
|
|
69
|
-
isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading,
|
|
76
|
+
isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-button" })
|
|
70
77
|
));
|
|
71
78
|
};
|
|
72
79
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { selectVariants, option } from '@tecsinapse/cortex-core';
|
|
2
2
|
import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
|
|
3
|
-
import { Hint } from './Hint.js';
|
|
4
|
-
import { IoChevronDownOutline } from 'react-icons/io5';
|
|
5
3
|
import { IoIosCloseCircleOutline } from 'react-icons/io';
|
|
4
|
+
import { IoChevronDownOutline } from 'react-icons/io5';
|
|
5
|
+
import { Hint } from './Hint.js';
|
|
6
6
|
import SearchInput from './SearchInput.js';
|
|
7
7
|
|
|
8
8
|
const { button, dropdown, groupedTitle, containerGrouped, hintBody } = selectVariants();
|
|
@@ -64,7 +64,7 @@ const Select = (props) => {
|
|
|
64
64
|
onClick: () => setOpen((prevState) => !prevState),
|
|
65
65
|
disabled
|
|
66
66
|
},
|
|
67
|
-
/* @__PURE__ */ React.createElement("span",
|
|
67
|
+
/* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
|
|
68
68
|
/* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
|
|
69
69
|
), /* @__PURE__ */ React.createElement(
|
|
70
70
|
"ul",
|
|
@@ -89,7 +89,7 @@ const Select = (props) => {
|
|
|
89
89
|
intent: variant
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
|
-
/* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline,
|
|
92
|
+
/* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
|
|
93
93
|
));
|
|
94
94
|
};
|
|
95
95
|
|
|
@@ -5,43 +5,38 @@ const THead = ({
|
|
|
5
5
|
children,
|
|
6
6
|
className,
|
|
7
7
|
...rest
|
|
8
|
-
}) => /* @__PURE__ */ React.createElement("thead", { className: tHead({ className }), ...rest }, children);
|
|
8
|
+
}) => /* @__PURE__ */ React.createElement("thead", { className: tHead({ className }), "data-testid": "thead", ...rest }, children);
|
|
9
9
|
const TRow = ({
|
|
10
10
|
children,
|
|
11
11
|
className,
|
|
12
12
|
...rest
|
|
13
|
-
}) => /* @__PURE__ */ React.createElement("tr", { className: tRow({ className }), ...rest }, children);
|
|
13
|
+
}) => /* @__PURE__ */ React.createElement("tr", { className: tRow({ className }), "data-testid": "trow", ...rest }, children);
|
|
14
14
|
const THeadCell = ({
|
|
15
15
|
children,
|
|
16
16
|
className,
|
|
17
17
|
...rest
|
|
18
|
-
}) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), ...rest }, children);
|
|
18
|
+
}) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), "data-testid": "thead-cell", ...rest }, children);
|
|
19
19
|
const TRowHeader = ({
|
|
20
20
|
children
|
|
21
|
-
}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
|
|
21
|
+
}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow(), "data-testid": "trow-header" }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
|
|
22
22
|
const TCell = ({
|
|
23
23
|
children,
|
|
24
24
|
className,
|
|
25
25
|
...rest
|
|
26
|
-
}) => /* @__PURE__ */ React.createElement("td", { className: tCell({ className }), ...rest }, children);
|
|
26
|
+
}) => /* @__PURE__ */ React.createElement("td", { className: tCell({ className }), "data-testid": "tcell", ...rest }, children);
|
|
27
27
|
const TFoot = ({
|
|
28
28
|
children,
|
|
29
29
|
className,
|
|
30
30
|
...rest
|
|
31
|
-
}) => /* @__PURE__ */ React.createElement("tfoot", { className: tFoot({ className }), ...rest }, children);
|
|
31
|
+
}) => /* @__PURE__ */ React.createElement("tfoot", { className: tFoot({ className }), "data-testid": "tfoot", ...rest }, children);
|
|
32
32
|
const Table = ({
|
|
33
33
|
children,
|
|
34
34
|
className,
|
|
35
35
|
...rest
|
|
36
|
-
}) => /* @__PURE__ */ React.createElement("table", { className: tRoot({ className }), ...rest }, children);
|
|
37
|
-
const Hr = ({
|
|
38
|
-
children,
|
|
39
|
-
className,
|
|
40
|
-
...rest
|
|
41
|
-
}) => /* @__PURE__ */ React.createElement("hr", { className: hr({ className }), ...rest }, children);
|
|
36
|
+
}) => /* @__PURE__ */ React.createElement("table", { className: tRoot({ className }), "data-testid": "table", ...rest }, children);
|
|
42
37
|
const Td = ({
|
|
43
38
|
children,
|
|
44
39
|
...rest
|
|
45
|
-
}) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
|
|
40
|
+
}) => /* @__PURE__ */ React.createElement("td", { ...rest, "data-testid": "td" }, children);
|
|
46
41
|
|
|
47
|
-
export {
|
|
42
|
+
export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
|
|
2
|
+
import { useLocale, useCalendar as useCalendar$1 } from 'react-aria';
|
|
3
|
+
import { useCalendarState } from 'react-stately';
|
|
4
|
+
|
|
5
|
+
const useCalendar = ({ value, onChange }) => {
|
|
6
|
+
const { locale } = useLocale();
|
|
7
|
+
const state = useCalendarState({
|
|
8
|
+
locale,
|
|
9
|
+
createCalendar,
|
|
10
|
+
defaultValue: new CalendarDate(
|
|
11
|
+
value.getFullYear(),
|
|
12
|
+
value.getMonth(),
|
|
13
|
+
value.getDate()
|
|
14
|
+
),
|
|
15
|
+
onChange: (value2) => onChange(value2.toDate(getLocalTimeZone()))
|
|
16
|
+
});
|
|
17
|
+
const { calendarProps, title } = useCalendar$1({}, state);
|
|
18
|
+
return {
|
|
19
|
+
calendarProps,
|
|
20
|
+
title,
|
|
21
|
+
state
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { useCalendar };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { isSameDay } from '@internationalized/date';
|
|
2
|
+
import { useRef } from 'react';
|
|
3
|
+
import { useCalendarCell as useCalendarCell$1 } from 'react-aria';
|
|
4
|
+
|
|
5
|
+
const useCalendarCell = ({ state, date }) => {
|
|
6
|
+
const ref = useRef(null);
|
|
7
|
+
const {
|
|
8
|
+
cellProps,
|
|
9
|
+
buttonProps,
|
|
10
|
+
isSelected,
|
|
11
|
+
isOutsideVisibleRange,
|
|
12
|
+
formattedDate
|
|
13
|
+
} = useCalendarCell$1({ date }, state, ref);
|
|
14
|
+
const rangeStateHighlitedRange = state?.highlightedRange;
|
|
15
|
+
const isSameDayStart = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.start) : void 0;
|
|
16
|
+
const isSameDayEnd = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.end) : void 0;
|
|
17
|
+
const isSelectionStart = isSameDayStart && !isSameDayEnd;
|
|
18
|
+
const isSelectionEnd = isSameDayEnd && !isSameDayStart;
|
|
19
|
+
const inRange = date > rangeStateHighlitedRange?.start && date < rangeStateHighlitedRange?.end;
|
|
20
|
+
return {
|
|
21
|
+
ref,
|
|
22
|
+
cellProps,
|
|
23
|
+
buttonProps,
|
|
24
|
+
isSelected,
|
|
25
|
+
isOutsideVisibleRange,
|
|
26
|
+
formattedDate,
|
|
27
|
+
isSelectionStart,
|
|
28
|
+
isSelectionEnd,
|
|
29
|
+
inRange
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export { useCalendarCell };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useCalendarGrid as useCalendarGrid$1 } from 'react-aria';
|
|
2
|
+
|
|
3
|
+
const useCalendarGrid = ({ state }) => {
|
|
4
|
+
const { gridProps, headerProps, weekDays } = useCalendarGrid$1({}, state);
|
|
5
|
+
return {
|
|
6
|
+
gridProps,
|
|
7
|
+
headerProps,
|
|
8
|
+
weekDays
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { useCalendarGrid };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,18 +1,26 @@
|
|
|
1
|
+
export { Avatar } from './components/Avatar.js';
|
|
1
2
|
export { Badge, BadgeAnchor } from './components/Badge.js';
|
|
3
|
+
export { BaseSnackbar } from './components/BaseSnackbar.js';
|
|
4
|
+
export { Breadcrumbs } from './components/Breadcrumbs.js';
|
|
2
5
|
export { Button } from './components/Button.js';
|
|
6
|
+
export { Calendar } from './components/Calendar.js';
|
|
3
7
|
export { Card } from './components/Card.js';
|
|
8
|
+
export { DefaultSnack } from './components/DefaultSnack.js';
|
|
9
|
+
export { Drawer } from './components/Drawer.js';
|
|
10
|
+
export { GroupButton } from './components/GroupButton.js';
|
|
4
11
|
export { Hint } from './components/Hint.js';
|
|
5
12
|
export { Box, Face, Input, Left, Right, Root } from './components/Input.js';
|
|
6
13
|
export { Modal } from './components/Modal.js';
|
|
14
|
+
export { ProgressBar } from './components/ProgressBar.js';
|
|
15
|
+
export { RangeCalendar } from './components/RangeCalendar.js';
|
|
7
16
|
export { Select } from './components/Select.js';
|
|
8
|
-
export {
|
|
17
|
+
export { Skeleton } from './components/Skeleton.js';
|
|
18
|
+
export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
|
|
9
19
|
export { Tag } from './components/Tag.js';
|
|
10
|
-
export { Toggle } from './components/Toggle.js';
|
|
11
20
|
export { TextArea } from './components/TextArea.js';
|
|
12
|
-
export {
|
|
13
|
-
export {
|
|
14
|
-
export {
|
|
15
|
-
export {
|
|
16
|
-
export {
|
|
17
|
-
export {
|
|
18
|
-
export { GroupButton } from './components/GroupButton.js';
|
|
21
|
+
export { Toggle } from './components/Toggle.js';
|
|
22
|
+
export { SnackbarSonner } from './service/SnackbarSonner.js';
|
|
23
|
+
export { useCalendar } from './hooks/useCalendar.js';
|
|
24
|
+
export { useCalendarCell } from './hooks/useCalendarCell.js';
|
|
25
|
+
export { useCalendarGrid } from './hooks/useCalendarGrid.js';
|
|
26
|
+
export { useDebouncedState } from './hooks/useDebouncedState.js';
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { toast } from 'sonner';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import 'clsx';
|
|
4
|
+
import '../components/Badge.js';
|
|
5
|
+
import '../components/BaseSnackbar.js';
|
|
6
|
+
import 'react-icons/md';
|
|
7
|
+
import '../components/Card.js';
|
|
8
|
+
import '../components/Button.js';
|
|
9
|
+
import '@internationalized/date';
|
|
10
|
+
import 'react-aria';
|
|
11
|
+
import 'react-stately';
|
|
12
|
+
import '../components/CalendarCell.js';
|
|
13
|
+
import '@tecsinapse/cortex-core';
|
|
14
|
+
import 'react-icons/fa';
|
|
15
|
+
import { DefaultSnack } from '../components/DefaultSnack.js';
|
|
16
|
+
import '../components/GroupButton.js';
|
|
17
|
+
import '../components/Hint.js';
|
|
18
|
+
import '../components/Input.js';
|
|
19
|
+
import '../components/Modal.js';
|
|
20
|
+
import '../styles/calendar-cell.js';
|
|
21
|
+
import '../styles/groupButton.js';
|
|
22
|
+
import '../styles/progressBar.js';
|
|
23
|
+
import '../components/Select.js';
|
|
24
|
+
import '../components/Tag.js';
|
|
25
|
+
import '../components/TextArea.js';
|
|
26
|
+
import '../components/Toggle.js';
|
|
27
|
+
|
|
28
|
+
class SnackbarSonner {
|
|
29
|
+
custom(Component, options) {
|
|
30
|
+
return toast.custom(() => Component, {
|
|
31
|
+
...options,
|
|
32
|
+
duration: options?.duration ?? 5e3
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
show(type, message, options) {
|
|
36
|
+
return toast.custom(
|
|
37
|
+
(t) => {
|
|
38
|
+
return /* @__PURE__ */ React.createElement(
|
|
39
|
+
DefaultSnack,
|
|
40
|
+
{
|
|
41
|
+
text: message,
|
|
42
|
+
variants: { intent: type },
|
|
43
|
+
onDismiss: () => toast.dismiss(t)
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
},
|
|
47
|
+
{ ...options, duration: options?.duration ?? 5e3 }
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export { SnackbarSonner };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { tv } from 'tailwind-variants';
|
|
2
|
+
|
|
3
|
+
const calendarCell = tv({
|
|
4
|
+
slots: {
|
|
5
|
+
cell: "text-center rounded-mili text-black",
|
|
6
|
+
button: "flex aspect-square items-center justify-center"
|
|
7
|
+
},
|
|
8
|
+
variants: {
|
|
9
|
+
isSelected: {
|
|
10
|
+
true: {
|
|
11
|
+
cell: "bg-primary-medium text-white"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
isSelectionStart: {
|
|
15
|
+
true: {
|
|
16
|
+
cell: "bg-primary-medium rounded-r-none text-white"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
isSelectionEnd: {
|
|
20
|
+
true: {
|
|
21
|
+
cell: "bg-primary-medium rounded-l-none text-white"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
inRange: {
|
|
25
|
+
true: {
|
|
26
|
+
cell: "bg-primary-light rounded-none text-black"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
isOutsideVisibleRange: {
|
|
30
|
+
true: {
|
|
31
|
+
cell: "text-secondary-light cursor-default",
|
|
32
|
+
button: "cursor-default"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
export { calendarCell };
|