@steroidsjs/bootstrap 3.0.0-beta.106 → 3.0.0-beta.107

package/content/Kanban/KanbanView.d.ts

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

package/content/Kanban/KanbanView.js

@@ -0,0 +1,29 @@
+"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");
+function KanbanView(props) {
+    var bem = (0, hooks_1.useBem)('KanbanView');
+    var Droppable = props.droppableComponent;
+    return (react_1["default"].createElement(Droppable, { droppableId: "all-columns", direction: "horizontal", type: "column" }, function (provided) {
+        var _a;
+        return (react_1["default"].createElement("div", __assign({ className: bem.block(), id: "task-board", ref: provided.innerRef }, provided.droppableProps, { style: props.style }), (_a = props.columns) === null || _a === void 0 ? void 0 :
+            _a.map(function (column, index) { return props.renderColumn(column, index); }),
+            provided.placeholder));
+    }));
+}
+exports["default"] = KanbanView;

package/content/Kanban/KanbanView.scss

@@ -0,0 +1,11 @@
+.KanbanView {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin-top: 10px;
+  white-space: nowrap;
+  padding: 10px 20px;
+}

package/content/Kanban/views/KanbanColumn/KanbanColumnView.d.ts

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

package/content/Kanban/views/KanbanColumn/KanbanColumnView.js

@@ -0,0 +1,36 @@
+"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");
+function KanbanColumnView(props) {
+    var bem = (0, hooks_1.useBem)('KanbanColumnView');
+    var Draggable = props.draggableComponent;
+    var Droppable = props.droppableComponent;
+    var _a = props.column, id = _a.id, title = _a.title, tasks = _a.tasks;
+    return (react_1["default"].createElement(Draggable, { draggableId: id, index: props.columnIndex }, function (providedDraggable) { return (react_1["default"].createElement("div", __assign({ className: bem.block() }, providedDraggable.draggableProps, { ref: providedDraggable.innerRef }),
+        react_1["default"].createElement("div", __assign({ className: bem.element('header') }, providedDraggable.dragHandleProps),
+            react_1["default"].createElement(typography_1.Title, { className: bem.element('title'), content: title, type: 'h3' },
+                react_1["default"].createElement("span", { className: bem.element('tasks-count') }, tasks.length))),
+        react_1["default"].createElement(Droppable, { droppableId: id, type: "task" }, function (providedDroppable) { return (react_1["default"].createElement("div", __assign({ className: bem.element('content'), ref: providedDroppable.innerRef }, providedDroppable.droppableProps),
+            tasks.map(function (task, taskIndex) { return (props.renderTask(task, taskIndex)); }),
+            providedDroppable.placeholder)); }),
+        react_1["default"].createElement("div", { className: bem.element('button') },
+            react_1["default"].createElement(form_1.Button, { size: "sm", color: 'basic', icon: "add", block: true })))); }));
+}
+exports["default"] = KanbanColumnView;

package/content/Kanban/views/KanbanColumn/KanbanColumnView.scss

@@ -0,0 +1,59 @@
+@use "../../../../scss/variables";
+@use "../../../../scss/mixins";
+
+$sidebar-scroll-thumb-color: var(--sidebar-scroll-thumb-color);
+$sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
+
+.KanbanColumnView {
+  white-space: normal;
+  min-width: 375px;
+  width: 375px;
+  margin-right: 8px;
+  padding: 16px 8px 16px 16px;
+  border: 1px solid variables.$element-border-color;
+  border-radius: 20px;
+  color: variables.$text-color;
+  background-color: variables.$element-background-color;
+
+  &__header {
+    display: flex;
+    font-size: 18px;
+  }
+
+  &__title {
+    margin-bottom: 16px;
+  }
+
+  &__tasks-count {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-left: 8px;
+    color: variables.$element-placeholder-color;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    min-height: 10px;
+    overflow: scroll;
+    overflow-x: hidden;
+
+    @include mixins.scrollWrapper(#{900px}, 8px, $sidebar-scroll-thumb-color, $sidebar-scroll-track-color);
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-bottom: 8px;
+    }
+  }
+
+  &__button {
+    padding-right: 8px;
+
+    .ButtonView {
+      background-color: variables.$light-gray;
+    }
+  }
+}

package/content/Kanban/views/KanbanColumn/index.d.ts

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

package/content/Kanban/views/KanbanColumn/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 KanbanColumnView_1 = __importDefault(require("./KanbanColumnView"));
+exports["default"] = KanbanColumnView_1["default"];

package/content/Kanban/views/KanbanTask/KanbanTaskView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IKanbanTaskViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+declare function KanbanTaskView(props: IKanbanTaskViewProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof KanbanTaskView>;
+export default _default;

package/content/Kanban/views/KanbanTask/KanbanTaskView.js

@@ -0,0 +1,63 @@
+"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 __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 hooks_1 = require("@steroidsjs/core/hooks");
+var Avatar_1 = __importDefault(require("@steroidsjs/core/ui/content/Avatar/Avatar"));
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var TaskTags_1 = __importDefault(require("../TaskTags"));
+function KanbanTaskView(props) {
+    var bem = (0, hooks_1.useBem)('KanbanTaskView');
+    var _a = props.task, id = _a.id, title = _a.title, description = _a.description, tags = _a.tags, assigner = _a.assigner, status = _a.status;
+    var Draggable = props.draggableComponent;
+    return (react_1["default"].createElement(Draggable, { draggableId: id, index: props.index }, function (provided) { return (react_1["default"].createElement("div", __assign({ className: bem.block() }, provided.draggableProps, provided.dragHandleProps, { ref: provided.innerRef }),
+        react_1["default"].createElement("div", { className: bem.element('wrapper') },
+            react_1["default"].createElement("div", { className: bem.element('content') },
+                react_1["default"].createElement("div", { className: bem.element('header') },
+                    react_1["default"].createElement("h4", { className: bem.element('title'), "aria-hidden": "true" },
+                        react_1["default"].createElement("span", { className: bem.element('task-id') }, __("#".concat(id, " "))),
+                        title)),
+                description && (react_1["default"].createElement(typography_1.Text, { type: 'body2', content: description, className: bem.element('description') }))),
+            react_1["default"].createElement("div", { className: bem.element('footer') },
+                tags && (react_1["default"].createElement(TaskTags_1["default"], { tags: tags })),
+                assigner && (react_1["default"].createElement("div", { className: bem.element('assigner') },
+                    react_1["default"].createElement(Avatar_1["default"], __assign({}, assigner.avatar, { size: 'sm' })))))),
+        status && (react_1["default"].createElement("span", { className: bem.element('status', !!status && "".concat(status.type)) })))); }));
+}
+exports["default"] = (0, react_1.memo)(KanbanTaskView);

package/content/Kanban/views/KanbanTask/KanbanTaskView.scss

@@ -0,0 +1,100 @@
+@use "../../../../scss/variables";
+
+.KanbanTaskView {
+  $root: &;
+
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  flex: 1 0 auto;
+  overflow: hidden;
+  height: fit-content;
+  width: 100%;
+  margin-bottom: 8px;
+  border-radius: variables.$radius-small;
+
+  &__wrapper {
+    border: 1px solid variables.$element-border-color;
+    border-radius: variables.$radius-small;
+    color: variables.$text-color;
+    background-color: variables.$element-background-color;
+
+    position: relative;
+    display: flex;
+    flex-flow: column;
+    padding: 16px;
+  }
+
+  $card-statuses: (
+          "high": variables.$danger,
+          "middle": variables.$warning,
+  );
+
+  @each $status, $color in $card-statuses {
+    &__status_#{$status} {
+      background-color: $color;
+    }
+  }
+
+  &__status {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    row-gap: 8px;
+    font-size: 14px;
+  }
+
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &__title {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  &__description {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &__task-id {
+    color: variables.$element-placeholder-color;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    margin-top: 16px;
+  }
+
+  &__assigner {
+    display: flex;
+    justify-content: flex-end;
+    flex-grow: 1;
+    min-width: 32px;
+    min-height: 32px;
+  }
+
+  .TextView {
+    margin: 0;
+  }
+}

package/content/Kanban/views/KanbanTask/index.d.ts

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

package/content/Kanban/views/KanbanTask/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 KanbanTaskView_1 = __importDefault(require("./KanbanTaskView"));
+exports["default"] = KanbanTaskView_1["default"];

package/content/Kanban/views/TaskTags/TaskTags.d.ts

@@ -0,0 +1,7 @@
+import { ITaskTag } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+import './TaskTags.scss';
+interface ITaskTagsProps {
+    tags: ITaskTag[];
+}
+export default function TaskTags(props: ITaskTagsProps): JSX.Element;
+export {};

package/content/Kanban/views/TaskTags/TaskTags.js

@@ -0,0 +1,14 @@
+"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 content_1 = require("@steroidsjs/core/ui/content");
+var hooks_1 = require("@steroidsjs/core/hooks");
+require("./TaskTags.scss");
+function TaskTags(props) {
+    var bem = (0, hooks_1.useBem)('TaskTags');
+    return (react_1["default"].createElement("div", { className: bem.element('wrapper') }, props.tags.map(function (tag) { return (react_1["default"].createElement(content_1.Badge, { key: tag.id, size: "md", roundingStyle: "squarer", message: tag.message, type: tag.type })); })));
+}
+exports["default"] = TaskTags;

package/content/Kanban/views/TaskTags/TaskTags.scss

@@ -0,0 +1,9 @@
+.TaskTags {
+  &__wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    flex-grow: 0;
+    gap: 4px;
+  }
+}

package/content/Kanban/views/TaskTags/index.d.ts

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

package/content/Kanban/views/TaskTags/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 TaskTags_1 = __importDefault(require("./TaskTags"));
+exports["default"] = TaskTags_1["default"];

package/index.d.ts

@@ -41,6 +41,15 @@ declare const _default: {
     'content.SliderView': {
         lazy: () => any;
     };
+    'content.KanbanView': {
+        lazy: () => any;
+    };
+    'content.KanbanColumnView': {
+        lazy: () => any;
+    };
+    'content.KanbanTaskView': {
+        lazy: () => any;
+    };
     'content.CalendarSystemView': {
         lazy: () => any;
     };

package/index.js

@@ -44,6 +44,15 @@ exports["default"] = {
     'content.SliderView': {
         lazy: function () { return require('./content/Slider/SliderView')["default"]; }
     },
+    'content.KanbanView': {
+        lazy: function () { return require('./content/Kanban/KanbanView')["default"]; }
+    },
+    'content.KanbanColumnView': {
+        lazy: function () { return require('./content/Kanban/views/KanbanColumn/KanbanColumnView')["default"]; }
+    },
+    'content.KanbanTaskView': {
+        lazy: function () { return require('./content/Kanban/views/KanbanTask/KanbanTaskView')["default"]; }
+    },
     'content.CalendarSystemView': {
         lazy: function () { return require('./content/CalendarSystem/CalendarSystemView')["default"]; }
     },

package/index.scss

@@ -24,6 +24,9 @@
 @include meta.load-css('content/Icon/IconView');
 @include meta.load-css('content/Slider/SliderView');
 @include meta.load-css('content/CopyToClipboard/CopyToClipboardView');
+@include meta.load-css('content/Kanban/KanbanView');
+@include meta.load-css('content/Kanban/views/KanbanColumn/KanbanColumnView');
+@include meta.load-css('content/Kanban/views/KanbanTask/KanbanTaskView');
 @include meta.load-css('crud/Crud/CrudView');
 @include meta.load-css('form/AutoCompleteField/AutoCompleteFieldView');
 @include meta.load-css('form/Button/ButtonView');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.106",
+    "version": "3.0.0-beta.107",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.90",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.91",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/variables/common/typography.scss

@@ -83,6 +83,12 @@ $text-types: map.merge(
             "line-height": $line-height-base,
             "color": colors.$text-color,
         ),
+        "body2": (
+            "font-size": $font-size-sm,
+            "font-weight": $font-weight-sm,
+            "line-height": $line-height-sm,
+            "color": colors.$text-color,
+        ),
         "span": (
             "font-size": $font-size-base,
             "font-weight": $font-weight-sm,