@steroidsjs/bootstrap 3.0.0-beta.12 → 3.0.0-beta.120

package/content/Card/CardView.scss

@@ -1,154 +1,185 @@
+@use "../../scss/variables";
+
+:root {
+    --card-footer-background-color: var(--additional-light-blue);
+    --card-dots-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --card-footer-background-color: var(--gray-dark);
+    --card-dots-color: #ffffff;
+}
+
+$card-footer-background-color: var(--card-footer-background-color);
+$card-dots-color: var(--card-dots-color);
+
+%headTemplate {
+    font-weight: 700;
+    font-size: variables.$font-size-lg;
+    line-height: 24px;
+}
+
+%subheadTemplate {
+    font-weight: 400;
+    font-size: variables.$font-size-xs;
+    line-height: 16px;
+}
+
+%dotTemplate {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    background-color: $card-dots-color;
+    border-radius: variables.$radius-circle;
+}
+
 .CardView {
     $root: &;
 
-    background: $white;
-    box-sizing: border-box;
-    height: fit-content;
-    position: relative;
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
     overflow: hidden;
+    height: fit-content;
 
-    &_orientation {
-        &_vertical {
-            font-size: $card-font-size;
-        }
+    border: 1px solid variables.$element-border-color;
+    border-radius: variables.$radius-large;
+    color: variables.$text-color;
+    background-color: variables.$element-background-color;
 
-        &_vertical-reverse {
-            font-size: $card-font-size;
-            flex-direction: column-reverse;
-        }
+    &__header {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
 
-        &_horizontal {
-            flex-direction: row;
+        padding: 18px;
+        padding-bottom: 20px;
 
-            #{$root}__title{
-                font-size: $card-horizontal-header-font-size;
-            }
+        &_withoutCover {
+            padding-bottom: 3px;
+        }
 
-            #{$root}__content{
-                flex-basis: 50%;
-                font-size: $card-horizontal-font-size;
-            }
+        &-data {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            column-gap: 8px;
+        }
 
-            #{$root}__cover{
-                flex-basis: 50%;
-            }
+        &-avatar {
+            margin-right: 2px;
         }
-    }
 
-    @each $color, $value in $color-themes {
-        &_color_#{$color} {
-            @include card-theme($root, $value)
+        &-text-content {
+            display: flex;
+            flex-flow: column nowrap;
         }
-    }
 
-    &_border {
-        &_default {
-            border: 1px solid $border-default;
+        &-head {
+            @extend %headTemplate;
         }
 
-        @each $color, $value in $color-themes {
-            &_#{$color} {
-                @include card-border-theme($root, $value)
-            }
+        &-subhead {
+            @extend %subheadTemplate;
         }
 
-        &_light {
-            #{$root}__content {
-                color: $dark;
+        &-menu {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
+            .MenuView__icon {
+                width: 24px;
+                height: 24px;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                rect {
+                    fill: $card-dots-color;
+                }
+
+                svg {
+                    transform: translateX(5px);
+                }
             }
         }
     }
 
-    &_shape {
-        &_square {
-            border-radius: unset;
-        }
+    &__cover {
+        width: 100%;
+        height: 227px;
+        overflow: hidden;
+        border-radius: variables.$radius-large;
 
-        &_circle {
-            border-radius: $card-border-radius;
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
     }
 
-    &__content-inner {
-        display: grid;
-        grid-row-gap: 16px;
+    &__content {
+        padding: 16px;
     }
 
-    &__children {
-        font-size: $card-children-font-size;
-        line-height: $card-children-line-height;
-        box-sizing: border-box;
-        width: 100%;
-        word-break: break-all;
+    &__content-inner {
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 16px;
     }
 
-    &__header {
-        background: $card-header-background;
-        padding: 20px;
-        border-bottom: 1px solid $border-default;
-        font-weight: bold;
-        font-size: $card-header-font-size;
-        line-height: $card-header-line-height;
-        word-break: break-all;
+    &__title {
+        @extend %headTemplate;
+        margin-bottom: 8px;
     }
 
-    &__footer {
-        background: $card-header-background;
-        padding: 20px;
-        border-top: 1px solid $border-default;
-        font-weight: bold;
-        font-size: $card-header-font-size;
-        line-height: $card-header-line-height;
-        word-break: break-all;
+    &__description {
+        font-size: variables.$font-size-base;
+        line-height: 22px;
     }
 
-    &__cover {
-        overflow: hidden;
+    &__buttons {
+        display: flex;
+        flex-flow: row wrap;
+        $columnGap: 8px;
+        row-gap: 8px;
+        column-gap: $columnGap;
+
+        button:only-of-type {
+            width: 100%;
+        }
+
+        button:not(:only-of-type) {
+            width: calc(50% - $columnGap / 2);
+        }
     }
 
-    &__title{
+    &__links {
         display: flex;
-        align-items: center;
-        font-weight: bold;
-        font-size: $card-title-font-size;
-        line-height: $card-title-line-height;
-        border-bottom: 8px;
-        margin-bottom: 8px;
-    }
+        flex-flow: row wrap;
+        column-gap: 16px;
 
-    &__content{
-        padding: 20px;
+        a {
+            line-height: 18px;
+        }
     }
 
-    button {
+    &__footer {
         display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        padding: 10px 20px;
-        position: static;
-        width: 140px;
-        height: 28px;
-        border: none;
-        color: $white;
-        background: $primary;
-        border-radius: $card-button-border-radius;
-    }
+        flex-flow: column wrap;
 
-    img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
+        padding: 16px;
+        background-color: $card-footer-background-color;
 
-    a {
-        color: $primary;
-        font-size: $card-link-font-size;
-    }
-    p{
-        margin: 0;
+        &-head {
+            @extend %headTemplate;
+        }
+
+        &-subhead {
+            @extend %subheadTemplate;
+        }
     }
 }

package/content/Chart/ChartView.d.ts

@@ -0,0 +1,2 @@
+import { IChartViewProps } from '@steroidsjs/core/ui/content/Chart/Chart';
+export default function ChartView(props: IChartViewProps): JSX.Element;

package/content/Chart/ChartView.js

@@ -0,0 +1,57 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var form_1 = require("@steroidsjs/core/ui/form");
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var DEFAULT_AXIS_PARAMS = {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 0,
+    legend: '',
+    legendPosition: 'middle'
+};
+var DEFAULT_LINE_CHART_CONFIG = {
+    yScale: {
+        type: 'linear',
+        min: 'auto',
+        max: 'auto',
+        stacked: true,
+        reverse: false
+    },
+    xScale: { type: 'point' },
+    axisBottom: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: 36 }),
+    axisLeft: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: -40 }),
+    pointSize: 8,
+    useMesh: true
+};
+function ChartView(props) {
+    var bem = (0, hooks_1.useBem)('ChartView');
+    var ChartComponent = props.chartComponent;
+    var defaultChartConfig = (props.useDefaultLineChartConfig && DEFAULT_LINE_CHART_CONFIG) || {};
+    var customChartHeightVariable = { '--chart-custom-height': "".concat(props.chartHeight, "px") };
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: __assign(__assign(__assign({}, props.style), { height: "".concat(props.wrapperHeight, "px") }), customChartHeightVariable) },
+        props.title && (react_1["default"].createElement(typography_1.Title, { type: "h3", content: props.title, className: bem.element('title') })),
+        react_1["default"].createElement("div", { className: bem.element('controls') },
+            props.checkboxes && (react_1["default"].createElement(form_1.CheckboxListField, __assign({}, props.checkboxes))),
+            props.buttonGroup && (react_1["default"].createElement(nav_1.ButtonGroup, __assign({}, props.buttonGroup)))),
+        react_1["default"].createElement(ChartComponent, __assign({ style: {
+                height: "".concat(props.chartHeight, "px !important")
+            }, data: props.data }, defaultChartConfig, props.config))));
+}
+exports["default"] = ChartView;

package/content/Chart/ChartView.scss

@@ -0,0 +1,39 @@
+@use "../../scss/variables";
+
+:root {
+    --chart-grid-color:rgb(221, 221, 221);
+}
+
+html[data-theme="dark"] {
+    --chart-grid-color: rgba(255, 255, 255, 0.10);
+}
+
+$chart-grid-color: var(--chart-grid-color);
+
+.ChartView {
+    height: auto;
+    &__title {
+        font-size: variables.$font-size-lg;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-lg;
+    }
+
+    &__controls {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+    }
+
+    &__controls + div {
+        height: var(--chart-custom-height) !important;
+    }
+
+    text {
+        font-family: variables.$font-family-nunito !important;
+        fill: variables.$text-color !important;
+    }
+
+    line {
+        stroke: $chart-grid-color !important;
+    }
+}

package/content/Chat/ChatView.d.ts

@@ -0,0 +1,2 @@
+import { IChatViewProps } from '@steroidsjs/core/ui/content/Chat/Chat';
+export default function ChatView(props: IChatViewProps): JSX.Element;

package/content/Chat/ChatView.js

@@ -0,0 +1,62 @@
+"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"));
+var ChatInput_1 = __importDefault(require("./views/ChatInput"));
+var BubblesDateGroup_1 = __importDefault(require("./views/BubblesDateGroup"));
+function ChatView(props) {
+    var bem = (0, useBem_1["default"])('ChatView');
+    var wrapperRef = (0, react_1.useRef)(null);
+    var contentRef = (0, react_1.useRef)(null);
+    var prevContentHeightRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var wrapperHeight = wrapperRef.current.clientHeight;
+        var contentHeight = contentRef.current.clientHeight;
+        var wrapperScrollTop = wrapperRef.current.scrollTop;
+        if (!prevContentHeightRef.current || wrapperScrollTop === prevContentHeightRef.current - wrapperHeight) {
+            wrapperRef.current.scrollTo({
+                top: contentHeight - wrapperHeight,
+                left: 0,
+                behavior: prevContentHeightRef.current ? 'smooth' : 'auto'
+            });
+        }
+        prevContentHeightRef.current = contentHeight;
+    }, [props.groupedMessagesByDates]);
+    var renderChatScreen = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('screen') },
+        react_1["default"].createElement("div", { className: bem.element('wrapper'), ref: wrapperRef },
+            react_1["default"].createElement("div", { className: bem.element('content'), ref: contentRef }, Object.entries(props.groupedMessagesByDates)
+                .map(function (_a) {
+                var date = _a[0], groupedMessages = _a[1];
+                return (react_1["default"].createElement(BubblesDateGroup_1["default"], { key: date, date: date, groupedMessages: groupedMessages, currentUser: props.currentUser }));
+            }))))); }, [bem, props.groupedMessagesByDates, props.currentUser]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        renderChatScreen(),
+        react_1["default"].createElement(ChatInput_1["default"], { chatId: props.chatId, onSendMessage: props.onSendMessage })));
+}
+exports["default"] = ChatView;

package/content/Chat/ChatView.scss

@@ -0,0 +1,59 @@
+@use "../../scss/variables";
+@use "../../scss/mixins";
+
+:root {
+  --chat-background-color: #fff;
+}
+
+html[data-theme="dark"] {
+  --chat-background-color: #101216;
+}
+
+$chat-background-color: var(--chat-background-color);
+$sidebar-scroll-thumb-color: var(--sidebar-scroll-thumb-color);
+$sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
+
+.ChatView {
+  display: flex;
+  flex-direction: column;
+
+  padding: 0 16px;
+  background-color: $chat-background-color;
+
+  &__screen {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+  &__wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin-right: -8px;
+    overflow-y: scroll;
+
+    @include mixins.scrollWrapper(#{700px}, 8px, $sidebar-scroll-thumb-color, $sidebar-scroll-track-color);
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-bottom: 16px;
+      margin-top: 16px;
+    }
+
+    &:first-child {
+      margin-top: 15px;
+    }
+  }
+
+  &__content {
+    position: relative;
+    transition: all 6s;
+  }
+}

package/content/Chat/index.d.ts

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

package/content/Chat/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 ChatView_1 = __importDefault(require("./ChatView"));
+exports["default"] = ChatView_1["default"];

package/content/Chat/views/BubbleMessage/BubbleMessageView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IChatUser } from '@steroidsjs/core/ui/content/Chat/Chat';
+import './BubbleMessageView.scss';
+interface IBubbleMessageProps {
+    user: IChatUser;
+    text: string;
+    timestamp: string;
+    timeAgo: string;
+    isCurrentUser: boolean;
+    isFirstMessage?: boolean;
+    isLastMessage?: boolean;
+    isTodayMessage?: boolean;
+}
+declare function BubbleMessageView(props: IBubbleMessageProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BubbleMessageView>;
+export default _default;

package/content/Chat/views/BubbleMessage/BubbleMessageView.js

@@ -0,0 +1,57 @@
+"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 react_use_1 = require("react-use");
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Avatar_1 = require("@steroidsjs/core/ui/content/Avatar");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var Title_1 = __importDefault(require("@steroidsjs/core/ui/typography/Title"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var timeTemplatesAndUnits_1 = require("@steroidsjs/core/ui/content/Chat/constants/timeTemplatesAndUnits");
+var utils_1 = require("@steroidsjs/core/ui/content/Chat/utils");
+require("./BubbleMessageView.scss");
+function BubbleMessageView(props) {
+    var _a, _b;
+    var bem = (0, useBem_1["default"])('BubbleMessageView');
+    var _c = (0, react_1.useState)(props.timeAgo), timeAgo = _c[0], setTimeAgo = _c[1];
+    (0, react_use_1.useInterval)(function () { return setTimeAgo((0, utils_1.calculateMessageTimeAgo)(props.timestamp)); }, props.isTodayMessage ? timeTemplatesAndUnits_1.SECONDS_IN_MINUTE_VALUE : null);
+    return (react_1["default"].createElement("div", { className: bem.block({
+            'another-user': !props.isCurrentUser,
+            'last-message': !!props.isLastMessage
+        }) },
+        react_1["default"].createElement("div", { className: bem.element('user-message') },
+            !props.isCurrentUser && props.isFirstMessage && (react_1["default"].createElement(Title_1["default"], { className: bem.element('username'), type: 'h4', tag: 'h4', content: "".concat(props.user.firstName, " ").concat(props.user.lastName) })),
+            react_1["default"].createElement(typography_1.Text, { className: bem.element('text'), type: "body", content: props.text }),
+            react_1["default"].createElement("div", { className: bem.element('indicators') },
+                react_1["default"].createElement(typography_1.Text, { className: bem.element('time'), type: "body3", content: timeAgo }),
+                props.isCurrentUser && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('check'), name: "done-all" })))),
+        props.user && (react_1["default"].createElement("div", { className: bem.element('avatar') },
+            react_1["default"].createElement(Avatar_1.Avatar, { src: (_a = props.user.avatar) === null || _a === void 0 ? void 0 : _a.src, title: "".concat(props.user.firstName, " ").concat(props.user.lastName), status: (_b = props.user.avatar) === null || _b === void 0 ? void 0 : _b.status, size: 'sm' })))));
+}
+exports["default"] = (0, react_1.memo)(BubbleMessageView);