@steroidsjs/bootstrap 3.0.0-beta.98 → 3.0.0

package/content/CalendarSystem/CalendarSystemView.scss

@@ -0,0 +1,50 @@
+@use 'style/variables';
+
+:root {
+    --calendar-system-content-background-color: #f1f5f7;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-content-background-color: #101216;
+}
+
+$calendar-system-content-background-color: var(--calendar-system-content-background-color);
+
+.CalendarSystemView {
+    $root: &;
+    max-height: 1080px;
+
+    display: flex;
+    &__aside {
+        display: flex;
+        flex-flow: column nowrap;
+        flex-shrink: 0;
+        gap: 32px;
+        max-width: 310px;
+        padding: 12px;
+
+        background-color: variables.$element-background-color;
+
+        .CalendarView {
+            padding: 0;
+            border: none;
+
+            .DayPicker-WeekdaysRow {
+                gap: 8px;
+            }
+
+            .DayPicker-Week {
+                gap: 8px;
+            }
+        }
+    }
+
+    &__content {
+        background-color: $calendar-system-content-background-color;
+        width: 100%;
+        padding: 12px;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 11px;
+    }
+}

package/content/CalendarSystem/ContentHeader/ContentHeader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './ContentHeader.scss';
+interface IContentHeaderProps {
+    dateToDisplay: string;
+    onChangeCalendarType: (newType: string) => void;
+    handleControlClick: (event: React.MouseEvent<HTMLElement>) => void;
+}
+declare function ContentHeader(props: IContentHeaderProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ContentHeader>;
+export default _default;

package/content/CalendarSystem/ContentHeader/ContentHeader.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var content_1 = require("@steroidsjs/core/ui/content");
+var DateControlType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/DateControlType"));
+var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
+require("./ContentHeader.scss");
+function ContentHeader(props) {
+    var bem = (0, useBem_1["default"])('ContentHeader');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement(Text_1["default"], { content: props.dateToDisplay, className: bem.element('month') }),
+        react_1["default"].createElement("ul", { className: bem.element('controls'), onClick: props.handleControlClick }, Object.entries(DateControlType_1["default"].getIcons()).map(function (_a, controlIndex) {
+            var controlLabel = _a[0], controlIcon = _a[1];
+            return (react_1["default"].createElement("li", { key: controlIndex, className: bem.element('controls-item'), "data-control": controlLabel },
+                react_1["default"].createElement(content_1.Icon, { className: bem.element('controls-item-icon'), name: controlIcon })));
+        })),
+        react_1["default"].createElement(nav_1.ButtonGroup, { className: bem.element('measures'), items: CalendarType_1["default"], onClick: props.onChangeCalendarType, defaultActiveButton: CalendarType_1["default"].MONTH })));
+}
+exports["default"] = react_1["default"].memo(ContentHeader);

package/content/CalendarSystem/ContentHeader/ContentHeader.scss

@@ -0,0 +1,57 @@
+@use "style/variables";
+
+:root {
+    --calendar-system-caption-arrow-background-color: #fff;
+    --calendar-system-caption-arrow-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-caption-arrow-background-color: var(--gray);
+    --calendar-system-caption-arrow-color: #ffffff;
+}
+
+$calendar-system-caption-arrow-color: var(--calendar-system-caption-arrow-color);
+$calendar-system-caption-arrow-background-color: var(--calendar-system-caption-arrow-background-color);
+
+.ContentHeader {
+    display: flex;
+    align-items: center;
+
+    &__month {
+        display: inline-block;
+        font-size: variables.$font-size-24;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-32;
+        margin-right: 93px;
+        margin-bottom: 0;
+        width: 190px;
+    }
+
+    &__controls {
+        display: inline-flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        margin-right: auto;
+        gap: 8px;
+
+        &-item {
+            cursor: pointer;
+
+            svg {
+                path {
+                    stroke: $calendar-system-caption-arrow-color;
+                }
+                rect {
+                    fill: $calendar-system-caption-arrow-background-color;
+                }
+            }
+
+            &-icon { 
+                pointer-events: none;
+            }
+        }
+    }
+
+    &__measures {
+    }
+}

package/content/CalendarSystem/ContentHeader/index.d.ts

@@ -0,0 +1,2 @@
+import ContentHeader from './ContentHeader';
+export default ContentHeader;

package/content/CalendarSystem/ContentHeader/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ContentHeader_1 = __importDefault(require("./ContentHeader"));
+exports["default"] = ContentHeader_1["default"];

package/content/CalendarSystem/MonthGrid/MonthGrid.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import './MonthGrid.scss';
+interface IMonthGridProps {
+    monthGridWeekDays: string[];
+    monthGridCalendarDays: IDay[];
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: (eventInitialDay?: IDay) => void;
+}
+declare function MonthGrid(props: IMonthGridProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof MonthGrid>;
+export default _default;

package/content/CalendarSystem/MonthGrid/MonthGrid.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+require("./MonthGrid.scss");
+var MonthDay_1 = __importDefault(require("./views/MonthDay"));
+function MonthGrid(props) {
+    var bem = (0, useBem_1["default"])('MonthGrid');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('week-days') }, props.monthGridWeekDays.map(function (day, dayIndex) { return (react_1["default"].createElement("span", { key: dayIndex, className: bem.element('week-days-day') }, day)); })),
+        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthGridCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, openEditModal: props.openEditModal, getEventsFromDate: props.getEventsFromDate, openCreateModal: props.openCreateModal, day: day })); }))));
+}
+exports["default"] = (0, react_1.memo)(MonthGrid);

package/content/CalendarSystem/MonthGrid/MonthGrid.scss

@@ -0,0 +1,41 @@
+@use "style/variables";
+
+:root {
+    --month-day-color-text: #000000;
+}
+
+html[data-theme="dark"] {
+    --month-day-color-text: #ffffff;
+}
+
+$month-day-color-text: var(--month-day-color-text);
+
+.MonthGrid {
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+
+    &__grid {
+        flex-shrink: 0;
+        flex-grow: 1;
+        display: grid;
+        height: 90%;
+        gap: 5px;
+        grid-template-columns: repeat(7, 1fr);
+        grid-template-rows: repeat(6, auto);
+    }
+
+    &__week-days {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        text-align: right;
+
+        &-day {
+            color: $month-day-color-text;
+            font-size: variables.$font-size-14;
+            font-weight: variables.$font-weight-md;
+            line-height: variables.$line-height-18;
+            padding: 8px 10px;
+        }
+    }
+}

package/content/CalendarSystem/MonthGrid/index.d.ts

@@ -0,0 +1,2 @@
+import MonthGrid from './MonthGrid';
+export default MonthGrid;

package/content/CalendarSystem/MonthGrid/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var MonthGrid_1 = __importDefault(require("./MonthGrid"));
+exports["default"] = MonthGrid_1["default"];

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.d.ts

@@ -0,0 +1,11 @@
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './MonthDay.scss';
+interface IMonthDayProps {
+    day: IDay;
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: (eventInitialDay?: IDay) => void;
+}
+export default function MonthDay(props: IMonthDayProps): JSX.Element;
+export {};

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.js

@@ -0,0 +1,73 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable @typescript-eslint/no-shadow */
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
+var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
+var slice_1 = __importDefault(require("lodash-es/slice"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var useExpandClickAway_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/hooks/useExpandClickAway"));
+var cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
+var getFormattedExpandLabel_1 = require("../../../../../utils/getFormattedExpandLabel");
+require("./MonthDay.scss");
+var SIXTH_ELEMENT_INDEX = 6;
+function MonthDay(props) {
+    var bem = (0, useBem_1["default"])('MonthDay');
+    var day = props.day, getEventsFromDate = props.getEventsFromDate;
+    var _a = (0, useExpandClickAway_1["default"])(), isExpanded = _a.isExpanded, setIsExpanded = _a.setIsExpanded, monthDayRef = _a.triggerRef;
+    var _b = react_1["default"].useMemo(function () {
+        var callingDate = new Date(props.day.date);
+        var events = getEventsFromDate(callingDate, CalendarType_1["default"].MONTH);
+        var dayHasMoreThanSixEvents = events.length > 6;
+        return {
+            events: events,
+            hasSixEvents: dayHasMoreThanSixEvents
+        };
+    }, [getEventsFromDate, props.day.date]), events = _b.events, hasSixEvents = _b.hasSixEvents;
+    var formattedExpandLabel = react_1["default"].useMemo(function () { return (0, getFormattedExpandLabel_1.getFormattedExpandRestLabel)((0, slice_1["default"])(__spreadArray([], events, true), SIXTH_ELEMENT_INDEX)); }, [events]);
+    var renderEvent = react_1["default"].useCallback(function (event, eventIndex) { return (react_1["default"].createElement(Tooltip_1["default"], { key: event.id, position: 'rightBottom', content: event.title, className: bem.element('tooltip') },
+        react_1["default"].createElement("span", { className: bem.element('event'), "data-eventid": event.id },
+            react_1["default"].createElement("span", { className: bem.element('event-dot'), style: { backgroundColor: event.color } }),
+            event.title))); }, [bem]);
+    var handleEventClick = react_1["default"].useCallback(function (event) {
+        var eventFromHour = event.target;
+        var eventId = (0, get_1["default"])(eventFromHour, 'dataset.eventid');
+        if (!eventId) {
+            return;
+        }
+        var requiredEvent = events.filter(function (hourEvent) { return hourEvent.id === Number(eventId); })[0];
+        props.openEditModal(requiredEvent);
+    }, [events, props]);
+    var handleOnContextMenuCreateClick = react_1["default"].useCallback(function (e) {
+        e.preventDefault();
+        var day = (0, cloneDeep_1["default"])(props.day);
+        day.date.setHours(0, 0, 0, 0);
+        props.openCreateModal(day);
+    }, [props]);
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            outOfRange: day.outOfRange,
+            isToday: day.isToday
+        })), ref: monthDayRef, onClick: handleEventClick, onContextMenu: handleOnContextMenuCreateClick },
+        react_1["default"].createElement("div", { className: bem.element('wrapper') },
+            react_1["default"].createElement("span", { className: bem.element('number') }, day.dayNumber.toString()),
+            react_1["default"].createElement("div", { className: bem.element('content', {
+                    isExpanded: isExpanded
+                }) },
+                events.map(renderEvent),
+                hasSixEvents && !isExpanded && (react_1["default"].createElement(form_1.Button, { link: true, className: bem.element('expand-button'), onClick: function () { return setIsExpanded(true); } }, formattedExpandLabel))))));
+}
+exports["default"] = MonthDay;

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.scss

@@ -0,0 +1,126 @@
+@use "style/variables";
+@use "../../../../../scss/mixins";
+
+:root {
+    --month-day-background-color: #ffffff;
+    --month-day-out-of-range-color: #f9fcff;
+    --month-day-color-text: #000000;
+    --month-day-out-of-range-color-text: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="dark"] {
+    --month-day-background-color: #333646;
+    --month-day-out-of-range-color: #161b20;
+    --month-day-color-text: #ffffff;
+    --month-day-out-of-range-color-text: rgba(255, 255, 255, 0.3);
+}
+
+$month-day-background-color: var(--month-day-background-color);
+$month-day-out-of-range-color: var(--month-day-out-of-range-color);
+$month-day-color-text: var(--month-day-color-text);
+$month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
+
+.MonthDay {
+    $dayRoot: &;
+    padding: 4px 8px 0px 8px;
+    min-height: 80px;
+    border-radius: variables.$radius-large;
+    background-color: $month-day-background-color;
+
+    &__wrapper {
+        display: block;
+        text-align: right;
+    }
+
+    &__number {
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        font-size: variables.$font-size-14;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-18;
+        color: $month-day-color-text;
+        width: 24px;
+        height: 24px;
+    }
+
+    &_outOfRange {
+        background-color: $month-day-out-of-range-color;
+
+        #{$dayRoot}__number {
+            color: $month-day-out-of-range-color-text;
+        }
+    }
+
+    &_isToday {
+        #{$dayRoot}__number {
+            &::before {
+                position: absolute;
+                content: "";
+                border: 1px solid variables.$primary;
+                display: block;
+                width: 100%;
+                height: 100%;
+                border-radius: variables.$radius-small;
+            }
+            color: variables.$primary;
+        }
+    }
+
+    &__content {
+        overflow: hidden;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 1px;
+
+        &_isExpanded {
+            #{$dayRoot}__event {
+                display: block;
+            }
+        }
+    }
+
+    &__event {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        font-size: variables.$font-size-xs;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-xs;
+        color: variables.$text-color;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        cursor: pointer;
+        text-align: left;
+
+        &:nth-child(n + 7) {
+            display: none;
+        }
+
+        &-dot {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            margin-right: 8px;
+            border-radius: 100px;
+            pointer-events: none;
+        }
+    }
+
+    &__content_isExpanded {
+        #{$dayRoot}__event {
+            display: block;
+        }
+    }
+
+    &__tooltip {
+        @include mixins.calendar-tooltip();
+    }
+
+    &__expand-button {
+        @include mixins.expand-button();
+    }
+}

package/content/CalendarSystem/MonthGrid/views/MonthDay/index.d.ts

@@ -0,0 +1,2 @@
+import MonthDay from './MonthDay';
+export default MonthDay;

package/content/CalendarSystem/MonthGrid/views/MonthDay/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var MonthDay_1 = __importDefault(require("./MonthDay"));
+exports["default"] = MonthDay_1["default"];

package/content/CalendarSystem/WeekGrid/WeekGrid.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import './WeekGrid.scss';
+interface IWeekGridProps {
+    weekGridTwentyFourHoursArray: string[];
+    weekGridCurrentWeekDays: IDay[];
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: (eventInitialDay?: IDay) => void;
+}
+declare function WeekGrid(props: IWeekGridProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof WeekGrid>;
+export default _default;

package/content/CalendarSystem/WeekGrid/WeekGrid.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var WeekHour_1 = __importDefault(require("./views/WeekHour"));
+require("./WeekGrid.scss");
+function WeekGrid(props) {
+    var bem = (0, useBem_1["default"])('WeekGrid');
+    var weekGridCurrentWeekDays = props.weekGridCurrentWeekDays, getEventsFromDate = props.getEventsFromDate;
+    var renderWeekHours = react_1["default"].useCallback(function (hour) { return weekGridCurrentWeekDays.map(function (dayOfWeek, dayOfWeekIndex) { return (react_1["default"].createElement(WeekHour_1["default"], { hour: hour, getEventsFromDate: getEventsFromDate, key: dayOfWeekIndex, dayOfWeek: dayOfWeek, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })); }); }, [weekGridCurrentWeekDays, getEventsFromDate, props.openCreateModal, props.openEditModal]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            react_1["default"].createElement("div", { className: bem.element('hours-time') }, props.weekGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('hours-time-item') }, hour)); })),
+            react_1["default"].createElement("div", { className: bem.element('table') },
+                react_1["default"].createElement("div", { className: bem.element('table-heading') }, weekGridCurrentWeekDays.map(function (weekDay, weekDayIndex) { return (react_1["default"].createElement(Text_1["default"], { key: weekDayIndex, className: bem.element('day', {
+                        isToday: weekDay.isToday
+                    }) },
+                    react_1["default"].createElement("span", { className: bem.element('day-wrapper') }, weekDay.formattedDisplay))); })),
+                react_1["default"].createElement("div", { className: bem.element('table-grid') }, props.weekGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('table-grid-row') }, renderWeekHours(hour))); }))))));
+}
+exports["default"] = react_1["default"].memo(WeekGrid);