@uxf/ui 1.0.0-beta.74 → 1.0.0-beta.75
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/css/date-picker-input.css +12 -0
- package/css/date-picker.css +71 -14
- package/css/toggle.css +8 -0
- package/date-picker-input/date-picker-decade.js +4 -4
- package/date-picker-input/date-picker-input.js +1 -1
- package/date-picker-input/date-picker-input.stories.js +1 -1
- package/date-picker-input/date-picker-year.js +5 -6
- package/date-picker-input/date-picker.js +1 -1
- package/package.json +1 -1
- package/tabs/tabs.d.ts +1 -0
- package/tabs/tabs.js +5 -6
- package/toggle/theme.d.ts +4 -0
- package/toggle/theme.js +2 -0
- package/toggle/toggle.d.ts +3 -0
- package/toggle/toggle.js +3 -2
- package/toggle/toggle.stories.js +6 -3
- package/utils/tailwind-config.js +3 -0
|
@@ -33,6 +33,18 @@
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
&__popover {
|
|
37
|
+
@apply absolute left-0 z-dropdown mt-3 max-w-md rounded-lg border p-2 shadow-xl;
|
|
38
|
+
|
|
39
|
+
:root .light & {
|
|
40
|
+
@apply bg-white border-gray-500;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:root .dark & {
|
|
44
|
+
@apply bg-gray-900 border-2 border-gray-700;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
36
48
|
&--has-right-addon {
|
|
37
49
|
.uxf-date-picker-input__wrapper {
|
|
38
50
|
@apply rounded-r-none;
|
package/css/date-picker.css
CHANGED
|
@@ -1,33 +1,90 @@
|
|
|
1
1
|
.uxf-date-picker {
|
|
2
|
-
&__month-select
|
|
3
|
-
|
|
2
|
+
&__month-select,
|
|
3
|
+
&__year-select,
|
|
4
|
+
&__decade-select {
|
|
5
|
+
@apply flex items-center justify-between px-4 w-[320px] sm:w-[360px];
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
&__month-calendar,
|
|
9
|
+
&__year-calendar,
|
|
10
|
+
&__decade-calendar {
|
|
11
|
+
@apply grid place-items-center w-full px-4 pt-4 text-center;
|
|
4
12
|
}
|
|
5
13
|
|
|
6
14
|
&__month-calendar {
|
|
7
|
-
@apply grid
|
|
15
|
+
@apply grid-cols-7 gap-0.5;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&__year-calendar {
|
|
19
|
+
@apply grid-cols-3 sm:grid-cols-4 gap-2;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&__decade-calendar {
|
|
23
|
+
@apply grid-cols-3 gap-2;
|
|
8
24
|
}
|
|
9
25
|
|
|
10
26
|
&__weekday-label {
|
|
11
27
|
@apply uppercase pb-2;
|
|
12
28
|
}
|
|
13
29
|
|
|
30
|
+
&__decade-label {
|
|
31
|
+
@apply font-semibold;
|
|
32
|
+
}
|
|
33
|
+
|
|
14
34
|
&__cell {
|
|
15
|
-
@apply transition
|
|
35
|
+
@apply p-1 transition relative rounded-full outline-none before:absolute before:pointer-events-none
|
|
36
|
+
before:rounded-full before:-inset-1 focus-visible:before:border-2;
|
|
16
37
|
|
|
17
38
|
&__day {
|
|
18
|
-
@apply w-9 h-9
|
|
39
|
+
@apply w-9 h-9;
|
|
40
|
+
}
|
|
19
41
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
42
|
+
&__month {
|
|
43
|
+
@apply w-full;
|
|
44
|
+
}
|
|
23
45
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
46
|
+
&__year {
|
|
47
|
+
@apply w-full;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:root .light & {
|
|
52
|
+
@apply text-gray-900;
|
|
53
|
+
|
|
54
|
+
.uxf-date-picker__cell {
|
|
55
|
+
@apply hover:bg-gray-200 focus-visible:before:border-primary-500;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.uxf-date-picker__cell__day--today {
|
|
59
|
+
@apply bg-primary-200 hover:bg-primary-300;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.uxf-date-picker__cell__day--selected {
|
|
63
|
+
@apply bg-primary-500 text-white hover:bg-primary-500;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.uxf-date-picker__cell__day--not-current-month {
|
|
67
|
+
@apply text-gray-400;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:root .dark & {
|
|
72
|
+
@apply bg-gray-900 text-white;
|
|
73
|
+
|
|
74
|
+
.uxf-date-picker__cell {
|
|
75
|
+
@apply hover:bg-gray-700 focus-visible:before:border-primary-500;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.uxf-date-picker__cell__day--today {
|
|
79
|
+
@apply bg-primary-400/50 hover:bg-primary-400/60;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.uxf-date-picker__cell__day--selected {
|
|
83
|
+
@apply bg-primary-500 text-white hover:bg-primary-500;
|
|
84
|
+
}
|
|
27
85
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
86
|
+
.uxf-date-picker__cell__day--not-current-month {
|
|
87
|
+
@apply text-gray-600;
|
|
31
88
|
}
|
|
32
89
|
}
|
|
33
90
|
}
|
package/css/toggle.css
CHANGED
|
@@ -56,13 +56,13 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
|
|
|
56
56
|
onYearSelect(date);
|
|
57
57
|
}
|
|
58
58
|
}, [canGoToYear, onYearSelect]);
|
|
59
|
-
return (react_1.default.createElement(
|
|
60
|
-
react_1.default.createElement("div", { className: "
|
|
59
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
60
|
+
react_1.default.createElement("div", { className: "uxf-date-picker__decade-select" },
|
|
61
61
|
react_1.default.createElement(button_1.Button, { iconButton: true, onClick: handleGoToPrevDecadeClick, title: "Zp\u011Bt", variant: "text" },
|
|
62
62
|
react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
|
|
63
|
-
react_1.default.createElement("p", { className: "
|
|
63
|
+
react_1.default.createElement("p", { className: "uxf-date-picker__decade-label" }, decadeLabel),
|
|
64
64
|
react_1.default.createElement(button_1.Button, { iconButton: true, onClick: handleGoToNextDecadeClick, title: "Vp\u0159ed", variant: "text" },
|
|
65
65
|
react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
|
|
66
|
-
react_1.default.createElement("div", { className: "
|
|
66
|
+
react_1.default.createElement("div", { className: "uxf-date-picker__decade-calendar" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(year.date).year() === currentYear && "uxf-date-picker__cell__year--current"), key: year.yearLabel + index, onClick: handleSelectYear(year.date) }, year.yearLabel))))));
|
|
67
67
|
});
|
|
68
68
|
exports.DatePickerDecade.displayName = "DatePickerDecade";
|
|
@@ -56,5 +56,5 @@ exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props
|
|
|
56
56
|
react_1.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-date-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "none", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte datum...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value ? (0, localized_dayjs_1.localizedDayjs)(props.value).format("l") : "" }),
|
|
57
57
|
react_1.default.createElement("span", { className: "uxf-date-picker-input__right-element" }, props.rightElement)),
|
|
58
58
|
!props.isDisabled && !props.isReadOnly && (react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
|
|
59
|
-
react_1.default.createElement(react_2.Popover.Panel, { className: "
|
|
59
|
+
react_1.default.createElement(react_2.Popover.Panel, { className: "uxf-date-picker-input__popover", static: true }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value }))))))));
|
|
60
60
|
});
|
|
@@ -40,6 +40,6 @@ function Default() {
|
|
|
40
40
|
react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", name: "date-invalid", label: "Datum invalid", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 24 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null), isInvalid: true })));
|
|
41
41
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
42
42
|
react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
|
|
43
|
-
react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8" }, testDatePickers)));
|
|
43
|
+
react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
|
|
44
44
|
}
|
|
45
45
|
exports.Default = Default;
|
|
@@ -29,7 +29,6 @@ const use_year_1 = require("@uxf/datepicker/hooks/use-year");
|
|
|
29
29
|
const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
|
|
30
30
|
const button_1 = require("../button");
|
|
31
31
|
const icon_1 = require("../icon");
|
|
32
|
-
const text_link_1 = require("../text-link");
|
|
33
32
|
const cx_1 = require("@uxf/core/utils/cx");
|
|
34
33
|
const classes_1 = require("@uxf/core/constants/classes");
|
|
35
34
|
const localized_dayjs_1 = require("../utils/localized-dayjs");
|
|
@@ -60,14 +59,14 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
|
|
|
60
59
|
props.onMonthSelect(date);
|
|
61
60
|
}
|
|
62
61
|
}, [canGoToMonth, props]);
|
|
63
|
-
return (react_1.default.createElement(
|
|
64
|
-
react_1.default.createElement("div", { className: "
|
|
62
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
63
|
+
react_1.default.createElement("div", { className: "uxf-date-picker__year-select" },
|
|
65
64
|
react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevYear, iconButton: true, onClick: canGoToPrevYear ? handleGoToPrevYear : undefined, title: "P\u0159edchoz\u00ED rok", variant: "text" },
|
|
66
65
|
react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
|
|
67
|
-
react_1.default.createElement(
|
|
66
|
+
react_1.default.createElement(button_1.Button, { variant: "text", onClick: handleYearClick }, yearLabel),
|
|
68
67
|
react_1.default.createElement(button_1.Button, { disabled: !canGoToNextYear, iconButton: true, onClick: canGoToNextYear ? handleGoToNextYear : undefined, title: "Dal\u0161\u00ED rok", variant: "text" },
|
|
69
68
|
react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
|
|
70
|
-
react_1.default.createElement("div", { className: "
|
|
71
|
-
"uxf-
|
|
69
|
+
react_1.default.createElement("div", { className: "uxf-date-picker__year-calendar" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(month.date).month() === currentMonth &&
|
|
70
|
+
"uxf-date-picker__cell__month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date) }, month.monthLabel))))));
|
|
72
71
|
});
|
|
73
72
|
exports.DatePickerYear.displayName = "DatePickerYear";
|
|
@@ -46,7 +46,7 @@ const DatePicker = (props) => {
|
|
|
46
46
|
year: react_1.default.createElement(date_picker_year_1.DatePickerYear, { onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect }),
|
|
47
47
|
decade: react_1.default.createElement(date_picker_decade_1.DatePickerDecade, { onYearSelect: (date) => onDecadeYearSelect(date) }),
|
|
48
48
|
}), [onMonthSelect, onYearSelect, onDecadeYearSelect, setViewMode, activeMonths]);
|
|
49
|
-
return (react_1.default.createElement("div",
|
|
49
|
+
return (react_1.default.createElement("div", { className: "uxf-date-picker" },
|
|
50
50
|
props.children,
|
|
51
51
|
datePickerComponents[viewMode]));
|
|
52
52
|
};
|
package/package.json
CHANGED
package/tabs/tabs.d.ts
CHANGED
package/tabs/tabs.js
CHANGED
|
@@ -55,12 +55,11 @@ const TabsRoot = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
|
|
|
55
55
|
const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.title);
|
|
56
56
|
const tabs = tabPanels.map((c) => c.props.title);
|
|
57
57
|
return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref },
|
|
58
|
-
react_2.default.createElement(react_1.Tab.List, null,
|
|
59
|
-
react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}, key: `${tab}--${index}` }, tab)))))),
|
|
58
|
+
react_2.default.createElement(react_1.Tab.List, { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.tabListClassName) },
|
|
59
|
+
react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { className: ({ selected }) => {
|
|
60
|
+
var _a;
|
|
61
|
+
return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
|
|
62
|
+
}, key: `${tab}--${index}` }, tab))))),
|
|
64
63
|
react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
|
|
65
64
|
});
|
|
66
65
|
exports.Tabs = Object.assign(TabsRoot, { Panel });
|
package/toggle/theme.js
ADDED
package/toggle/toggle.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import React, { CSSProperties } from "react";
|
|
2
2
|
import { FormControlProps } from "../types";
|
|
3
|
+
import { ToggleVariants } from "./theme";
|
|
4
|
+
export declare type ToggleVariant = keyof ToggleVariants;
|
|
3
5
|
export interface ToggleProps extends FormControlProps<boolean> {
|
|
4
6
|
className?: string;
|
|
5
7
|
hiddenLabel?: boolean;
|
|
6
8
|
label: string;
|
|
7
9
|
style?: Partial<CSSProperties>;
|
|
10
|
+
variant?: ToggleVariant;
|
|
8
11
|
}
|
|
9
12
|
export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
|
package/toggle/toggle.js
CHANGED
|
@@ -10,9 +10,10 @@ const forwardRef_1 = require("@uxf/core/utils/forwardRef");
|
|
|
10
10
|
const react_1 = __importDefault(require("react"));
|
|
11
11
|
const react_2 = require("@headlessui/react");
|
|
12
12
|
exports.Toggle = (0, forwardRef_1.forwardRef)("Toggle", (props, ref) => {
|
|
13
|
+
var _a, _b;
|
|
13
14
|
return (react_1.default.createElement(react_2.Switch.Group, null,
|
|
14
|
-
react_1.default.createElement("div", { className: `uxf-toggle__wrapper
|
|
15
|
-
react_1.default.createElement(react_2.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, "uxf-toggle", props.
|
|
15
|
+
react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
|
|
16
|
+
react_1.default.createElement(react_2.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, "uxf-toggle", `uxf-toggle--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), disabled: props.isDisabled, onChange: props.onChange, style: props.style, ref: ref },
|
|
16
17
|
react_1.default.createElement("span", { className: "uxf-toggle__inner" })),
|
|
17
18
|
react_1.default.createElement(react_2.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
|
|
18
19
|
});
|
package/toggle/toggle.stories.js
CHANGED
|
@@ -41,9 +41,12 @@ function Default() {
|
|
|
41
41
|
}, value: checked, isDisabled: true }),
|
|
42
42
|
react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
|
|
43
43
|
setChecked((prev) => !prev);
|
|
44
|
-
}, value: checked, hiddenLabel: true })
|
|
44
|
+
}, value: checked, hiddenLabel: true }),
|
|
45
|
+
react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: () => {
|
|
46
|
+
setChecked((prev) => !prev);
|
|
47
|
+
}, value: checked, variant: "reversed" })));
|
|
45
48
|
return (react_1.default.createElement("div", { className: "flex" },
|
|
46
|
-
react_1.default.createElement("div", { className: "light
|
|
47
|
-
react_1.default.createElement("div", { className: "dark
|
|
49
|
+
react_1.default.createElement("div", { className: "light w-1/2 gap-4 p-20" }, storyToggles),
|
|
50
|
+
react_1.default.createElement("div", { className: "dark w-1/2 gap-4 bg-gray-900 p-20 text-white" }, storyToggles)));
|
|
48
51
|
}
|
|
49
52
|
exports.Default = Default;
|