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

package/nav/Nav/NavIconView.scss

@@ -1,9 +1,36 @@
+@use "../../scss/variables";
+
 .NavIconView {
-  > a {
-    margin-right: 5px;
+    &__list {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        column-gap: 24px;
+
+        &-item {
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: center;
+            color: variables.$text-color;
+            column-gap: 8px;
+
+            .ButtonView__text {
+                color: variables.$text-color;
+            }
+
+            &_disabled .ButtonView_disabled .ButtonView__link:hover .ButtonView__text {
+               color: variables.$element-placeholder-color-disabled;
+            }
+
+            &_disabled .ButtonView_disabled .ButtonView__link .ButtonView__text { 
+                color: variables.$element-placeholder-color-disabled;
+            }
 
-    &:last-child {
-      margin-right: 0;
+            &-nested { 
+                display: flex;
+                flex-flow: column nowrap;
+                margin-left: 54px;
+            }
+        }
     }
-  }
-}
+}

package/nav/Nav/NavLinkView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavLinkView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavLinkView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavLinkView.js

@@ -37,13 +37,20 @@ 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 = __importStar(require("react"));
 var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavLinkView(props) {
     var bem = (0, hooks_1.useBem)('NavLinkView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem.element('nav mb-3') }, props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); }, className: bem.element('nav-item') }, item))); })),
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName), onClick: function () { return props.onClick(item, index); } },
+            React.createElement(Button_1["default"], __assign({ link: true }, item)))); })),
         React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavLinkView;

package/nav/Nav/NavLinkView.scss

@@ -1,7 +1,16 @@
 .NavLinkView {
-  &__nav-item {
-    &:not(:last-child) {
-      margin-right: 10px;
+    &__list {
+        display: flex;
+        flex-flow: row nowrap;
+        column-gap: 24px;
+
+        &-item {
+            &_disabled {
+                cursor: not-allowed;
+                .ButtonView {
+                    pointer-events: none;
+                }
+            }
+        }
     }
-  }
-}
+}

package/nav/Nav/NavListView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavListView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavListView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavListView.js

@@ -42,16 +42,20 @@ var Link_1 = __importDefault(require("@steroidsjs/core/ui/nav/Link"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavListView(props) {
     var bem = (0, hooks_1.useBem)('NavListView');
-    var renderItems = function (items) {
+    var renderItems = function (items, parentItemProps) {
+        if (parentItemProps === void 0) { parentItemProps = null; }
         if (!items || items.length === 0) {
             return null;
         }
-        return items.map(function (item, index) { return (React.createElement("li", { key: index, className: bem('nav-item', bem.element('item'), props.navClassName) },
-            React.createElement(Link_1["default"], __assign({ onClick: function () { return props.onClick(item, index); }, layout: false }, item, { key: item.id || index, className: bem(item.isActive && 'active', bem.element('item-link'), item.className) })),
-            item.items && item.items.length > 0 && (React.createElement("ul", { className: bem('nav flex-column', bem.element('sub-list')) }, renderItems(item.items))))); });
+        return items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Link_1["default"], __assign({ onClick: function () { return props.onClick(item, index); } }, item, { disabled: (parentItemProps === null || parentItemProps === void 0 ? void 0 : parentItemProps.disabled) || item.disabled })),
+            item.items && item.items.length > 0 && (React.createElement("ul", { className: bem.element('sub-list') }, renderItems(item.items, item))))); });
     };
-    return (React.createElement("ul", { className: bem('nav flex-column', bem.block(), props.className) },
-        renderItems(props.items),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block(), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, renderItems(props.items)),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavListView;

package/nav/Nav/NavListView.scss

@@ -1,12 +1,13 @@
 .NavListView {
-  &__item {
+    
+    &__list{ 
+        display: flex;
+        flex-flow: column nowrap;
+    }
 
-  }
-  &__item-link {
-    padding: 5px 10px;
-    display: inline-block;
-  }
-  &__sub-list {
-    margin-left: 15px;
-  }
-}
+    &__sub-list { 
+        display: flex;
+        flex-flow: column;
+        padding: 5px;
+    }    
+}

package/nav/Nav/NavTabsView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavTabsView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavTabsView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavTabsView.js

@@ -42,9 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavTabsView(props) {
     var bem = (0, hooks_1.useBem)('NavTabsView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem('nav nav-tabs', !props.children && 'mb-3') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: 'nav-item' },
-            React.createElement(Button_1["default"], __assign({ link: true, onClick: function () { return props.onClick(item, index); }, layout: false }, item, { className: bem('nav-link', item.isActive && 'active', item.className) })))); })),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ size: props.size, link: !item.isActive, onClick: function () { return props.onClick(item, index); } }, item)))); })),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavTabsView;

package/nav/Nav/NavTabsView.scss

@@ -1,2 +1,51 @@
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
 .NavTabsView {
-}
+    $root: &;
+
+    color: variables.$text-color;
+
+    &__list {
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        border-bottom: 1px solid variables.$element-border-color;
+
+        &-item {
+            .ButtonView__text {
+                color: variables.$element-placeholder-color;
+            }
+
+            &_active {
+                .ButtonView__text {
+                    color: variables.$white;
+                }
+
+                .ButtonView {
+                    &_size {
+                        &_sm {
+                            border-radius: variables.$radius-small variables.$radius-small 0 0;
+                        }
+                        &_md {
+                            border-radius: variables.$radius-large variables.$radius-large 0 0;
+                        }
+                        &_lg {
+                            border-radius: variables.$radius-large variables.$radius-large 0 0;
+                        }
+                    }
+                }
+            }
+
+            &_disabled {
+                cursor: not-allowed;
+                .ButtonView {
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    @include mixins.navs-sizes($root);
+}

package/nav/Tree/TreeView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITreeViewProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
-export default function TreeView(props: ITreeViewProps & IBemHocOutput): JSX.Element;
+export default function TreeView(props: ITreeViewProps): JSX.Element;

package/nav/Tree/TreeView.scss

@@ -1,62 +1,71 @@
-.TreeView {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+@use "../../scss/variables";
 
-  &__item {
+.TreeView {
+    list-style: none;
+    margin: 0;
     padding: 0;
-    cursor: pointer;
 
-    > .ButtonView {
-      margin: 2px 0;
-    }
-  }
-
-  &__item-label {
-    position: relative;
-    padding: 5px 10px;
-    display: flex;
-    flex-direction: row;
-    color: $list-group-action-color;
-    background-color: $list-group-bg;
-
-    &:hover {
-      color: $list-group-action-hover-color;
-      background-color: $list-group-hover-bg;
+    &__item {
+        padding: 0;
+        cursor: pointer;
+
+        > .ButtonView {
+            margin: 2px 0;
+        }
     }
 
-    &, &:hover {
-      text-decoration: none !important;
+    &__item-label {
+        position: relative;
+        padding: 5px 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        background-color: variables.$background-color;
+
+        .ButtonView__link {
+            .ButtonView__text {
+                color: variables.$text-color;
+            }
+        }
+
+        // &:hover {
+        //   color: $list-group-action-hover-color;
+        //   background-color: $list-group-hover-bg;
+        // }
+
+        &,
+        &:hover {
+            text-decoration: none !important;
+        }
+    }
+    &__item_selected &__item-label {
+        background-color: variables.$secondary;
+        &,
+        &::before {
+            color: variables.$text-color;
+        }
+    }
+    &__item-label::before {
+        display: inline-block;
+        content: "";
+        transform: rotate(0);
+        width: 21px;
+        height: 20px;
+        font-size: 12px;
+        font-weight: bold;
+        margin-left: 10px;
+        color: variables.$text-color;
+        position: relative;
+        top: 1px;
+        left: 3px;
     }
-  }
-  &__item_selected &__item-label {
-    background-color: $list-group-active-bg;
-    &, &::before {
-      color: $list-group-active-color;
+    &__item_has-items &__item-label::before {
+        content: ">";
+    }
+
+    &__item_opened &__item-label::before {
+        top: 7px;
+        left: -4px;
+        transform: rotate(90deg);
     }
-  }
-  &__item-label::before {
-    display: inline-block;
-    content: '';
-    transform: rotate(0);
-    width: 21px;
-    height: 20px;
-    font-size: 12px;
-    font-weight: bold;
-    font-family: $font-family-monospace;
-    margin-left: 10px;
-    color: $list-group-action-color;
-    position: relative;
-    top: 3px;
-    left: 3px;
-  }
-  &__item_has-items &__item-label::before {
-    content: '>';
-  }
-
-  &__item_opened &__item-label::before {
-    top: 9px;
-    left: -4px;
-    transform: rotate(90deg);
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.12",
+    "version": "3.0.0-beta.121",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -10,7 +10,7 @@
     },
     "scripts": {
         "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src --quiet",
-        "build": "tsc && cp ./{package.json,LICENSE,README.md} dist && copyfiles -u 1 \"src/**/*.scss\" \"src/icons/*.svg\" dist"
+        "build": "tsc && cp ./{package.json,LICENSE,README.md} dist && copyfiles -u 1 \"src/**/*.scss\" \"src/icons/svgs/*.svg\" dist"
     },
     "license": "MIT",
     "homepage": "https://github.com/steroids/react-bootstrap",
@@ -19,24 +19,26 @@
     },
     "dependencies": {
         "@ckeditor/ckeditor5-react": "^3.0.2",
+        "@splidejs/react-splide": "^0.7.12",
         "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
-        "bootstrap": "^4.5.2",
         "date-fns": "^2.29.3",
         "lodash": "^4.17.20",
         "lodash-es": "^4.17.20",
+        "normalize.css": "^8.0.1",
         "rc-slider": "^9.7.4",
         "react": "^18.2.0",
         "react-collapse": "^5.0.1",
         "react-day-picker": "^7.4.10",
         "react-dom": "^18.2.0",
+        "react-google-recaptcha": "^3.1.0",
         "react-image-crop": "^9.0.2",
         "react-modal": "^3.11.2",
         "react-transition-group": "^2.9.0",
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6",
-        "@steroidsjs/eslint-config": "^2.1.3",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.103",
+        "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
         "@types/jest": "^26.0.22",
@@ -53,6 +55,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.52"
     }
 }

package/scss/animations/index.scss

@@ -0,0 +1 @@
+@forward "loading";

package/scss/animations/loading.scss

@@ -0,0 +1,13 @@
+@keyframes loading {
+  from {
+    transform: none;
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin loadingAnimation {
+  animation: loading 1.5s linear infinite;
+}

package/scss/bootstrap-classes/flex.scss

@@ -0,0 +1,42 @@
+@use "../variables";
+
+.flex {
+  display: flex;
+}
+
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.col {
+  @each $colValue in variables.$colValues {
+    &-#{$colValue} {
+      flex-basis: calc((100% / variables.$colMaxValue) * $colValue);
+    }
+  }
+}
+
+.justify-content {
+  @each $justifyValue in variables.$justifyValues {
+    &-#{$justifyValue} {
+      justify-content: $justifyValue;
+    }
+  }
+}
+
+.align-items {
+  @each $alignValue in variables.$alignValues {
+    &-#{$alignValue} {
+      align-items: $alignValue;
+    }
+  }
+}
+
+.flex-direction {
+  @each $directionValue in variables.$directionValues {
+    &-#{$directionValue} {
+        flex-direction: $directionValue;
+    }
+  }
+}

package/scss/bootstrap-classes/index.scss

@@ -0,0 +1,4 @@
+@forward './spacing.scss';
+@forward './flex.scss';
+@forward './layout.scss';
+@forward './typography.scss';

package/scss/bootstrap-classes/layout.scss

@@ -0,0 +1,72 @@
+@use "../variables/common/colors.scss";
+
+$positions: absolute, sticky, relative, fixed, static;
+$borders: right, left, top, bottom;
+
+.border {
+  border: 1px solid colors.$element-border-color;
+
+  @each $border in $borders {
+    &-#{$border} {
+      border-#{$border}: 1px solid colors.$element-border-color;
+    }
+  }
+}
+
+// positions
+.position {
+  @each $position in $positions {
+    &-#{$position} {
+      position: $position;
+    }
+  }
+}
+
+.top-0 {
+  top: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.left-0 {
+  left: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+// width and height in percents
+.w-25 {
+  width: 25%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.w-75 {
+  width: 75%;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-25 {
+  height: 25%;
+}
+
+.h-50 {
+  height: 50%;
+}
+
+.h-75 {
+  height: 75%;
+}
+
+.h-100 {
+  height: 100%;
+}

package/scss/bootstrap-classes/spacing.scss

@@ -0,0 +1,97 @@
+// margin
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 1rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 1rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-3 {
+  margin-left: 1rem;
+}
+
+// padding
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-3 {
+  padding-bottom: 1rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-3 {
+  padding-top: 1rem;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pr-3 {
+  padding-right: 1rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pl-3 {
+  padding-left: 1rem;
+}

package/scss/bootstrap-classes/typography.scss

@@ -0,0 +1,25 @@
+$text-aligns: center, left, right, end, justify, start;
+
+.text {
+  @each $text-align in $text-aligns {
+    &-#{$text-align} {
+      text-align: $text-align;
+    }
+  }
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}