@steroidsjs/bootstrap 3.0.0-beta.2 → 3.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/bootstrap",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "description": "",
   "main": "index.js",
   "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -9,6 +9,7 @@
     "url": "https://github.com/steroids/react-bootstrap"
   },
   "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\" dist"
   },
   "license": "MIT",
@@ -30,10 +31,12 @@
     "react-dom": "^18.2.0",
     "react-image-crop": "^9.0.2",
     "react-modal": "^3.11.2",
-    "react-transition-group": "^2.9.0"
+    "react-transition-group": "^2.9.0",
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
-    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.1",
+    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6",
+    "@steroidsjs/eslint-config": "^2.1.3",
     "@types/enzyme": "^3.10.8",
     "@types/googlemaps": "^3.43.3",
     "@types/jest": "^26.0.22",
@@ -46,9 +49,10 @@
     "@types/react-syntax-highlighter": "^13.5.0",
     "@types/webpack-env": "^1.16.0",
     "copyfiles": "^2.4.1",
-    "typescript": "^4.3.4"
+    "eslint": "^8.34.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.1"
+    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6"
   }
 }

package/scss/mixins/button.scss

@@ -30,4 +30,4 @@
     border-color: map-get($color, color-light);
     box-shadow: none;
   }
-}
+}

package/scss/mixins/index.scss

@@ -1,2 +1,2 @@
 @import "button";
-@import "card";
+@import "card";

package/scss/variables/common/colors.scss

@@ -0,0 +1,153 @@
+:root {
+    --primary: #651fff;
+    --primary-dark: #5218d0;
+    --primary-light: #dbcbff;
+    --secondary: #a3aee6;
+    --secondary-dark: #6b76ad;
+    --secondary-light: #d9dfff;
+    --success: #2bc945;
+    --success-dark: #2abd42;
+    --success-light: #b9ffc3;
+    --danger: #fb4e4e;
+    --danger-dark: #ec4c4c;
+    --danger-light: #ffbfbf;
+    --info: #a7efff;
+    --info-dark: #8fd8e9;
+    --info-light: #d3f7ff;
+    --warning: #ffe457;
+    --warning-dark: #ebd251;
+    --warning-light: #fff6c6;
+    --graphite: #323232;
+    --gray-dark: #e1e1e1;
+    --gray: #ededed;
+    --light-gray: #f8f8f8;
+    --dark: #6f6b76;
+    --light: #9088a1;
+
+    html[data-theme="dark"] {
+        --primary: #8b57ff;
+        --primary-dark: #6648a7;
+        --primary-light: #ba9bff;
+        --secondary: #9ea8db;
+        --secondary-dark: #616a95;
+        --secondary-light: #bcc3e9;
+        --success: #3cf25a;
+        --success-dark: #34cc4d;
+        --success-light: #74ff8b;
+        --danger: #fc6666;
+        --danger-dark: #dc5858;
+        --danger-light: #ffa1a1;
+        --info: #9ae1f1;
+        --info-dark: #77c4d6;
+        --info-light: #ccf6ff;
+        --warning: #ffe457;
+        --warning-dark: #ebd251;
+        --warning-light: #fff6c8;
+        --graphite: #414141;
+        --gray-dark: #4e4f57;
+        --gray: #5b5c6b;
+        --light-gray: #928b9d;
+        --dark: #6b6477;
+        --light: #b7afc7;
+    }
+}
+
+/*
+ *  SCSS variables implementation
+ */
+$primary: var(--primary) !default;
+$primary-dark: var(--primary-dark) !default;
+$primary-light: var(--primary-light) !default;
+$secondary: var(--secondary) !default;
+$secondary-dark: var(--secondary-dark) !default;
+$secondary-light: var(--secondary-light) !default;
+$success: var(--success) !default;
+$success-dark: var(--success-dark) !default;
+$success-light: var(--success-light) !default;
+$danger: var(--danger) !default;
+$danger-dark: var(--danger-dark) !default;
+$danger-light: var(--danger-light) !default;
+$info: var(--info) !default;
+$info-dark: var(--info-dark) !default;
+$info-light: var(--info-light) !default;
+$warning: var(--warning) !default;
+$warning-dark: var(--warning-dark) !default;
+$warning-light: var(--warning-light) !default;
+$graphite: var(--graphite) !default;
+$gray-dark: var(--gray-dark) !default;
+$gray: var(--gray) !default;
+$light-gray: var(--light-gray) !default;
+$dark: var(--dark) !default;
+$light: var(--light) !default;
+
+/*
+ * Common colors   
+ */
+
+$black: rgba(#000, 1) !default;
+$black-60: rgba(#000, 0.6) !default;
+$black-30: rgba(#000, 0.3) !default;
+$black-10: rgba(#000, 0.1) !default;
+$black-4: rgba(#000, 0.04) !default;
+$white: #fff !default;
+
+$text-color: #312c3a !default;
+$link-color: #2ba3fb !default;
+
+$gradient-purple: linear-gradient(180deg, #7433FF, #FFA3FD);
+$gradient-red: linear-gradient(180deg, #EB0155, #FFFA80);
+
+$color-themes: () !default;
+$color-themes: map-merge(
+    (
+        "primary": (
+            "color": $primary,
+            "color-dark": $primary-dark,
+            "color-light": $primary-light,
+            "text-color": $white,
+        ),
+        "secondary": (
+            "color": $secondary,
+            "color-dark": $secondary-dark,
+            "color-light": $secondary-light,
+            "text-color": $white,
+        ),
+        "success": (
+            "color": $success,
+            "color-dark": $success-dark,
+            "color-light": $success-light,
+            "text-color": $white,
+        ),
+        "danger": (
+            "color": $danger,
+            "color-dark": $danger-dark,
+            "color-light": $danger-light,
+            "text-color": $white,
+        ),
+        "warning": (
+            "color": $warning,
+            "color-dark": $warning-dark,
+            "color-light": $warning-light,
+            "text-color": $dark,
+        ),
+        "info": (
+            "color": $info,
+            "color-dark": $info-dark,
+            "color-light": $info-light,
+            "text-color": $white,
+        ),
+        "light": (
+            "color": $light,
+            "color-dark": $dark,
+            "color-light": $light,
+            "text-color": $dark,
+        ),
+        "dark": (
+            "color": $dark,
+            "color-dark": $dark,
+            "color-light": $light,
+            "text-color": $white,
+        ),
+    ),
+    $color-themes
+);

package/scss/variables/common/old-variables.scss

@@ -0,0 +1,24 @@
+$grey-light: #D9D9D9;
+$grey-lighter: #F8F8F8;
+$grey: #F8F9FA;
+$grey-dark: #2D2D2D;
+$grey-darker: #78848E;
+$grey-disabled: #F1F1F1;
+
+$additional: #0596FF;
+
+$border-default: #CCCCCC;
+$border-hover: #B0B0B0;
+$border-action: #39BBD8;
+$border-typing: #A7EFFF;
+$back-disabled: #EBEBEB;
+$back-success: #F1FFEC;
+$border-success: #64D03E;
+$back-error: #FCE7E7;
+$border-error: #FF4557;
+$back-info: #ECFCFF;
+$back-warning: #FFFCEA;
+
+$shadow-default: 0px 0px 30px rgba(0, 0, 0, 0.1);
+
+$heading: #152536 !default;

package/scss/variables/common/radiuses.scss

@@ -0,0 +1,5 @@
+$radius-circle: 50%;
+$radius-xlarge: 160px;
+$radius-large: 12px;
+$radius-medium: 10px;
+$radius-small: 8px;

package/scss/variables/common/spacing.scss

@@ -0,0 +1,12 @@
+$spacing-240: 240px;
+$spacing-160: 160px;
+$spacing-124: 124px;
+$spacing-80: 80px;
+$spacing-64: 64px;
+$spacing-40: 40px;
+$spacing-32: 32px;
+$spacing-24: 24px;
+$spacing-16: 16px;
+$spacing-8: 8px;
+$spacing-4: 4px;
+$spacing-2: 2px;

package/scss/variables/common/typography.scss

@@ -0,0 +1,39 @@
+/*
+*  Common font variables
+*/
+
+$font-family-nunito: "Nunito", sans-serif;
+
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 24px;
+$font-size-2xl: 32px;
+
+$line-height-xs: 17px;
+$line-height-sm: 20px;
+$line-height-base: 22px;
+$line-height-lg: 25px;
+$line-height-xl: 34px;
+$line-height-2xl: 45px;
+
+$font-weight-sm: 400;
+$font-weight-md: 500;
+$font-weight-lg: 700;
+
+
+/* 
+*   Button font variables
+*/
+
+$btn-font-weight-sm: 400;
+$btn-font-weight-lg: 800;
+
+$btn-font-xs: 12px;
+$btn-font-sm: 14px;
+$btn-font-base: 16px;
+
+$btn-line-height: 24px;
+
+$btn-letter-spacing: 0.1em;

package/scss/variables/components/calendar.scss

@@ -12,4 +12,4 @@ $calendar-day-border-radius: 10px !default;
 $calendar-shadow-shape: 0 0 0 3px !default;
 $calendar-selected-shadow: $calendar-shadow-shape $calendar-primary-light-color !default;
 $calendar-today-shadow: $calendar-shadow-shape $calendar-primary-light-color !default;
-$calendar-hover-shadow: $calendar-shadow-shape $calendar-secondary-color !default;
+$calendar-hover-shadow: $calendar-shadow-shape $calendar-secondary-color !default;

package/scss/variables/components/card.scss

@@ -17,4 +17,4 @@ $card-link-font-size: 16px !default;
 $card-border-radius: 3px !default;
 $card-button-border-radius: 4px !default;
 
-$card-header-background: $grey-lighter !default;
+$card-header-background: $grey-lighter !default;

package/scss/variables/components/icon.scss

@@ -1,3 +1,3 @@
 $icon-size: 16px !default;
 $icon-size-sm: 12px !default;
-$icon-size-lg: 32px !default;
+$icon-size-lg: 32px !default;

package/scss/variables/components/input.scss

@@ -1,3 +1,58 @@
+//Small
+$input-label-margin-bottom-sm: 4px;
+
+$input-padding-x-sm: 12px;
+$input-padding-y-sm: 5px;
+
+$input-margin-bottom-sm: 20px;
+$input-outline-width-sm: 4px;
+$input-border-width-sm: 1px;
+
+$input-icon-margin-right-sm: 12px;
+$input-icon-close-margin-left-sm: 12px;
+$input-icon-size-sm: 24px;
+
+$input-message-margin-top-sm: 4px;
+$input-message-icon-size-sm: 16px;
+$input-message-icon-margin-right-sm: 4px;
+
+//Medium 
+$input-label-margin-bottom-md: $input-label-margin-bottom-sm;
+
+$input-padding-x-md: $input-padding-x-sm;
+$input-padding-y-md: 11px;
+
+$input-margin-bottom-md: $input-margin-bottom-sm;
+$input-outline-width-md: $input-outline-width-sm;
+$input-border-width-md: $input-border-width-sm;
+
+$input-icon-margin-right-md: $input-icon-margin-right-sm;
+$input-icon-close-margin-left-md: $input-icon-close-margin-left-sm;
+$input-icon-size-md: $input-icon-size-sm;
+
+$input-message-margin-top-md: $input-message-margin-top-sm;
+$input-message-icon-size-md: $input-message-icon-size-sm;
+$input-message-icon-margin-right-md: $input-message-icon-margin-right-sm;
+
+//Large
+$input-label-margin-bottom-lg: $input-label-margin-bottom-sm;
+
+$input-padding-x-lg: $input-padding-x-sm;
+$input-padding-y-lg: 16px;
+
+$input-margin-bottom-lg: $input-margin-bottom-sm;
+$input-outline-width-lg: $input-outline-width-sm;
+$input-border-width-lg: $input-border-width-sm;
+
+$input-icon-margin-right-lg: $input-icon-margin-right-sm;
+$input-icon-close-margin-left-lg: $input-icon-close-margin-left-sm;
+$input-icon-size-lg: $input-icon-size-sm;
+
+$input-message-margin-top-lg: $input-message-margin-top-sm;
+$input-message-icon-size-lg: $input-message-icon-size-sm;
+$input-message-icon-margin-right-lg: $input-message-icon-margin-right-sm;
+
+
 $input-height-sm: 28px !default;
 $input-height-md: 36px !default;
 $input-height-lg: 46px !default;
@@ -8,4 +63,4 @@ $input-border-radius: 4px !default;
 $input-padding-y: 0 !default;
 $input-padding-x: 8px !default;
 $input-addon-padding: 0.6rem !default;
-$input-text-padding: 0.4rem !default;
+$input-text-padding: 0.4rem !default;

package/scss/variables/components/ratefield.scss

@@ -1,2 +1,2 @@
 $icon-size: 20px !default;
-$icon-color: $primary !default;
+$icon-color: $primary !default;

package/scss/variables/index.scss

@@ -1,6 +1,9 @@
-@import 'colors';
-@import 'components/alert';
-@import 'components/avatar';
+@import 'common/colors';
+@import 'common/typography';
+@import 'common/spacing';
+@import 'common/radiuses';
+@import 'common/old-variables';
+
 @import 'components/button';
 @import 'components/calendar';
 @import 'components/card';

package/icon/Icon/index.d.ts

@@ -1 +0,0 @@
-export { default } from './IconView';

package/icon/Icon/index.js

@@ -1,16 +0,0 @@
-"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];
-}));
-exports.__esModule = true;
-exports["default"] = void 0;
-var IconView_1 = require("./IconView");
-__createBinding(exports, IconView_1, "default");

package/scss/variables/colors.scss

@@ -1,74 +0,0 @@
-$primary: #651FFF !default;
-$primary-dark: darken($primary, 25) !default;
-$primary-light: lighten($primary, 50) !default;
-
-$secondary: #97A7C8 !default;
-$secondary-dark: darken($secondary, 25) !default;
-$secondary-light: lighten($secondary, 50) !default;
-
-$success: #64D03E !default;
-$success-dark: darken($success, 25) !default;
-$success-light: lighten($success, 50) !default;
-
-$danger: #FF4557 !default;
-$danger-dark: darken($danger, 25) !default;
-$danger-light: lighten($danger, 50) !default;
-
-$warning: #fad826 !default;
-$warning-dark: darken($warning, 25) !default;
-$warning-light: lighten($warning, 50) !default;
-
-$info: #39bbd8 !default;
-$info-dark: darken($info, 25) !default;
-$info-light: lighten($info, 50) !default;
-
-$light: #f8f9fa !default;
-$light-dark: darken($light, 25) !default;
-$light-light: lighten($light, 50) !default;
-
-$dark: #343a40 !default;
-$dark-dark: darken($dark, 25) !default;
-$dark-light: lighten($dark, 50) !default;
-
-$heading: #152536 !default;
-$body: #68717A !default;
-$white: #FFFFFF !default;
-
-$color-themes: () !default;
-$color-themes: map-merge(
-                (
-                        "primary": ("color": $primary, "color-dark": $primary-dark, "color-light": $primary-light, "text-color": $white),
-                        "secondary": ("color": $secondary, "color-dark": $secondary-dark, "color-light": $secondary-light, "text-color": $white),
-                        "success": ("color": $success, "color-dark": $success-dark, "color-light": $success-light, "text-color": $white),
-                        "danger": ("color": $danger, "color-dark": $danger-dark, "color-light": $danger-light, "text-color": $white),
-                        "warning": ("color": $warning, "color-dark": $warning-dark, "color-light": $warning-light, "text-color": $dark),
-                        "info": ("color": $info, "color-dark": $info-dark, "color-light": $info-light, "text-color": $white),
-                        "light": ("color": $light, "color-dark": $light-dark, "color-light": $light-light, "text-color": $dark),
-                        "dark": ("color": $dark, "color-dark": $dark-dark, "color-light": $dark-light, "text-color": $white)
-                ),
-                $color-themes
-);
-
-$grey-light: #D9D9D9;
-$grey-lighter: #F8F8F8;
-$grey: #F8F9FA;
-$grey-dark: #2D2D2D;
-$grey-darker: #78848E;
-$grey-disabled: #F1F1F1;
-
-$additional: #0596FF;
-
-$border-default: #CCCCCC;
-$border-hover: #B0B0B0;
-$border-action: #39BBD8;
-$border-typing: #A7EFFF;
-$back-disabled: #EBEBEB;
-$back-success: #F1FFEC;
-$border-success: #64D03E;
-$back-error: #FCE7E7;
-$border-error: #FF4557;
-$back-info: #ECFCFF;
-$back-warning: #FFFCEA;
-
-$shadow-default: 0px 0px 30px rgba(0, 0, 0, 0.1);
-

package/scss/variables/components/alert.scss

@@ -1,9 +0,0 @@
-$alert-padding-y: 12px !default;
-$alert-padding-x: 16px !default;
-
-$alert-border-radius: 4px !default;
-$alert-description-font-size: 18px !default;
-$alert-message-font-size: 16px !default;
-
-$alert-icon-size: 24px !default;
-$alert-close-icon-size: 15px !default;

package/scss/variables/components/avatar.scss

@@ -1,17 +0,0 @@
-$avatar-x-large-size: 64px !default;
-$avatar-x-large-font-size: 20px !default;
-
-$avatar-large-size: 46px !default;
-$avatar-large-font-size: 16px !default;
-
-$avatar-middle-size: 36px !default;
-$avatar-middle-font-size: 14px !default;
-
-$avatar-small-size: 28px !default;
-$avatar-small-font-size: 14px !default;
-
-$avatar-status-color: $success !default;
-$avatar-status-border: 2px solid $white !default;
-
-$avatar-background-color: $primary !default;
-$avatar-text-color: $white !default;