react-interface - npm Package Compare versions

Comparing version 0.8.16 to 0.8.17

es/components/index.js

@@ -9,2 +9,4 @@ import Button from "./Button";
 import Checkbox from "./Checkbox";
+import Popover from "./Popover";
+import Select from "./Select";
 import { Menu, MenuItem, MenuHeader, MenuDivider } from "./Menu";
@@ -14,2 +16,2 @@ import { Table, TBody, THead, Header, Row, Cell } from "./FlexTable";
 
-export { Button, Title, Paragraph, Pre, Expand, Menu, MenuItem, MenuHeader, MenuDivider, Table, TBody, THead, Header, Row, Cell, Box, Flex, Icon, Checkbox };
+export { Button, Title, Paragraph, Pre, Expand, Menu, MenuItem, MenuHeader, MenuDivider, Table, TBody, THead, Header, Row, Cell, Box, Flex, Icon, Checkbox, Popover, Select };

es/components/Menu/Menu.js

@@ -1,2 +0,2 @@
-var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  box-shadow: ', ';\n  border: 1px solid ', ';\n  border-radius: 4px;\n  ', ';\n  ', ';\n'], ['\n  background: ', ';\n  box-shadow: ', ';\n  border: 1px solid ', ';\n  border-radius: 4px;\n  ', ';\n  ', ';\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  box-shadow: ', ';\n  border: 1px solid ', ';\n  ', ';\n  ', ';\n'], ['\n  background: ', ';\n  box-shadow: ', ';\n  border: 1px solid ', ';\n  ', ';\n  ', ';\n']);
 
@@ -18,5 +18,6 @@ function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
   borderRadius: 4,
-  p: 1
+  p: 1,
+  m: 0
 };
 
 export default Menu;

es/Theme.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  font-family: ', ';\n  background: ', ';\n  color: ', ';\n  box-sizing: border-box;\n  a { text-decoration: none  }\n'], ['\n  font-family: ', ';\n  background: ', ';\n  color: ', ';\n  box-sizing: border-box;\n  a { text-decoration: none  }\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  font-family: ', ';\n  background: ', ';\n  color: ', ';\n  box-sizing: border-box;\n  a { text-decoration: none  }\n  ul {\n    margin: 0;\n    padding: 0;\n  }\n'], ['\n  font-family: ', ';\n  background: ', ';\n  color: ', ';\n  box-sizing: border-box;\n  a { text-decoration: none  }\n  ul {\n    margin: 0;\n    padding: 0;\n  }\n']);
 
@@ -5,0 +5,0 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

es/themes/base/colors.js

@@ -1,7 +0,2 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import palx from 'palx';
-import { getPaletteShades, colorListToMap } from '../utils/colors';
-
-var palette = {
+export default {
   primary: '#07c',
@@ -12,7 +7,4 @@ warning: '#FEBF2F',
   danger: '#DA3849',
-  info: '#25A2B6'
-};
-
-var colors = _extends({}, getPaletteShades(palette), colorListToMap(palx(palette.primary)));
-
-export default colors;
+  info: '#25A2B6',
+  background: '#FFF'
+};

es/themes/base/index.js

@@ -0,1 +1,3 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 /**
@@ -7,18 +9,39 @@ *
 
-import colors from "./colors";
+import palx from 'palx';
+import { getPaletteShades, colorListToMap } from '../utils/colors';
+import defaultColors from "./colors";
 import fonts from "./fonts";
 import sizes from "./sizes";
 
-var theme = {
-  sizes: sizes,
-  fonts: fonts,
-  colors: colors
+export var createTheme = function createTheme(themeColors) {
+  var mergedColors = _extends({}, defaultColors, themeColors);
+  var colors = _extends({}, getPaletteShades(mergedColors), colorListToMap(palx(mergedColors.primary)));
 
-  /* Checkbox */
-  // "checkbox.border.color": colors.primary2,
-  // "checkbox.background": colors.primary1,
-  // "checkbox.icon.color": colors.primary,
-  // "checkbox.label.color": colors.primary,
+  return {
+    sizes: sizes,
+    fonts: fonts,
+    colors: colors,
+
+    /* Checkbox */
+    "checkbox.border.color": colors.primary2,
+    "checkbox.background": colors.primary1,
+    "checkbox.icon.color": colors.primary,
+    "checkbox.label.color": colors.primary,
+
+    /* Select */
+    'select.background': colors.background,
+    'select.placeholder.color': colors.background6,
+    'select.border.color': colors.background6,
+    'select.icon.color': colors.background6,
+
+    /* Menus */
+    'menu.background': colors.background,
+    'menu.border.color': colors.background6,
+    'menu.item.hover.background': colors.primary1,
+    'menu.item.hover.color': colors.primary,
+    'menu.item.active.background': colors.primary,
+    'menu.item.active.color': colors.primary9
+  };
 };
 
-export default theme;
+export default createTheme(defaultColors);

es/themes/dark/colors.js

@@ -1,7 +0,2 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import palx from 'palx';
-import { getPaletteShades, colorListToMap } from '../utils/colors';
-
-var palette = {
+export default {
   primary: '#07c',
@@ -12,7 +7,4 @@ warning: '#FEBF2F',
   danger: '#DA3849',
-  info: '#25A2B6'
-};
-
-var colors = _extends({}, getPaletteShades(palette), colorListToMap(palx(palette.primary)));
-
-export default colors;
+  info: '#25A2B6',
+  background: '#000'
+};

es/themes/dark/index.js

@@ -0,12 +1,12 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 /**
  *
- * React UI Light Theme
+ * React UI Dark Theme
  *
  */
 
-import base from '../base';
+import { createTheme } from '../base';
 import colors from './colors';
 
-var theme = { colors: colors };
-
-export default theme;
+export default _extends({}, createTheme(colors));

es/themes/light/colors.js

@@ -1,7 +0,4 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-import palx from 'palx';
-import { getPaletteShades, colorListToMap } from '../utils/colors';
 
-var palette = {
+export default {
   primary: '#07c',
@@ -12,7 +9,5 @@ warning: '#FEBF2F',
   danger: '#DA3849',
-  info: '#25A2B6'
-};
+  info: '#25A2B6',
+  background: '#FFF'
 
-var colors = _extends({}, getPaletteShades(palette), colorListToMap(palx(palette.primary)));
-
-export default colors;
+};

es/themes/light/index.js

@@ -0,12 +1,12 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 /**
  *
- * React UI Light Theme
+ * React UI Dark Theme
  *
  */
 
-import base from '../base';
+import { createTheme } from '../base';
 import colors from './colors';
 
-var theme = { colors: colors };
-
-export default theme;
+export default _extends({}, createTheme(colors));

lib/components/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.Checkbox = exports.Icon = exports.Flex = exports.Box = exports.Cell = exports.Row = exports.Header = exports.THead = exports.TBody = exports.Table = exports.MenuDivider = exports.MenuHeader = exports.MenuItem = exports.Menu = exports.Expand = exports.Pre = exports.Paragraph = exports.Title = exports.Button = undefined;
+exports.Select = exports.Popover = exports.Checkbox = exports.Icon = exports.Flex = exports.Box = exports.Cell = exports.Row = exports.Header = exports.THead = exports.TBody = exports.Table = exports.MenuDivider = exports.MenuHeader = exports.MenuItem = exports.Menu = exports.Expand = exports.Pre = exports.Paragraph = exports.Title = exports.Button = undefined;
 
@@ -38,2 +38,10 @@ var _Button = require("./Button");
 
+var _Popover = require("./Popover");
+
+var _Popover2 = _interopRequireDefault(_Popover);
+
+var _Select = require("./Select");
+
+var _Select2 = _interopRequireDefault(_Select);
+
 var _Menu = require("./Menu");
@@ -65,2 +73,4 @@
 exports.Icon = _Icon2.default;
-exports.Checkbox = _Checkbox2.default;
+exports.Checkbox = _Checkbox2.default;
+exports.Popover = _Popover2.default;
+exports.Select = _Select2.default;

lib/components/Menu/Menu.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  box-shadow: ', ';\n  border: 1px solid ', ';\n  border-radius: 4px;\n  ', ';\n  ', ';\n'], ['\n  background: ', ';\n  box-shadow: ', ';\n  border: 1px solid ', ';\n  border-radius: 4px;\n  ', ';\n  ', ';\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  background: ', ';\n  box-shadow: ', ';\n  border: 1px solid ', ';\n  ', ';\n  ', ';\n'], ['\n  background: ', ';\n  box-shadow: ', ';\n  border: 1px solid ', ';\n  ', ';\n  ', ';\n']);
 
@@ -28,3 +28,4 @@ var _styledComponents = require('styled-components');
   borderRadius: 4,
-  p: 1
+  p: 1,
+  m: 0
 };
@@ -31,0 +32,0 @@

lib/Theme.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  font-family: ', ';\n  background: ', ';\n  color: ', ';\n  box-sizing: border-box;\n  a { text-decoration: none  }\n'], ['\n  font-family: ', ';\n  background: ', ';\n  color: ', ';\n  box-sizing: border-box;\n  a { text-decoration: none  }\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  font-family: ', ';\n  background: ', ';\n  color: ', ';\n  box-sizing: border-box;\n  a { text-decoration: none  }\n  ul {\n    margin: 0;\n    padding: 0;\n  }\n'], ['\n  font-family: ', ';\n  background: ', ';\n  color: ', ';\n  box-sizing: border-box;\n  a { text-decoration: none  }\n  ul {\n    margin: 0;\n    padding: 0;\n  }\n']);
 
@@ -10,0 +10,0 @@ var _react = require('react');

lib/themes/base/colors.js

 'use strict';
 
 exports.__esModule = true;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _palx = require('palx');
-
-var _palx2 = _interopRequireDefault(_palx);
-
-var _colors = require('../utils/colors');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var palette = {
+exports.default = {
   primary: '#07c',
@@ -21,8 +10,5 @@ warning: '#FEBF2F',
   danger: '#DA3849',
-  info: '#25A2B6'
+  info: '#25A2B6',
+  background: '#FFF'
 };
-
-var colors = _extends({}, (0, _colors.getPaletteShades)(palette), (0, _colors.colorListToMap)((0, _palx2.default)(palette.primary)));
-
-exports.default = colors;
 module.exports = exports['default'];

lib/themes/base/index.js

@@ -1,14 +0,27 @@
-"use strict";
+'use strict';
 
 exports.__esModule = true;
+exports.createTheme = undefined;
 
-var _colors = require("./colors");
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**
+                                                                                                                                                                                                                                                                   *
+                                                                                                                                                                                                                                                                   * React UI Base Theme
+                                                                                                                                                                                                                                                                   *
+                                                                                                                                                                                                                                                                   */
 
-var _colors2 = _interopRequireDefault(_colors);
+var _palx = require('palx');
 
-var _fonts = require("./fonts");
+var _palx2 = _interopRequireDefault(_palx);
 
+var _colors = require('../utils/colors');
+
+var _colors2 = require('./colors');
+
+var _colors3 = _interopRequireDefault(_colors2);
+
+var _fonts = require('./fonts');
+
 var _fonts2 = _interopRequireDefault(_fonts);
 
-var _sizes = require("./sizes");
+var _sizes = require('./sizes');
 
@@ -19,19 +32,33 @@ var _sizes2 = _interopRequireDefault(_sizes);
 
-var theme = {
-  sizes: _sizes2.default,
-  fonts: _fonts2.default,
-  colors: _colors2.default
+var createTheme = exports.createTheme = function createTheme(themeColors) {
+  var mergedColors = _extends({}, _colors3.default, themeColors);
+  var colors = _extends({}, (0, _colors.getPaletteShades)(mergedColors), (0, _colors.colorListToMap)((0, _palx2.default)(mergedColors.primary)));
 
-  /* Checkbox */
-  // "checkbox.border.color": colors.primary2,
-  // "checkbox.background": colors.primary1,
-  // "checkbox.icon.color": colors.primary,
-  // "checkbox.label.color": colors.primary,
-}; /**
-    *
-    * React UI Base Theme
-    *
-    */
+  return {
+    sizes: _sizes2.default,
+    fonts: _fonts2.default,
+    colors: colors,
 
-exports.default = theme;
-module.exports = exports["default"];
+    /* Checkbox */
+    "checkbox.border.color": colors.primary2,
+    "checkbox.background": colors.primary1,
+    "checkbox.icon.color": colors.primary,
+    "checkbox.label.color": colors.primary,
+
+    /* Select */
+    'select.background': colors.background,
+    'select.placeholder.color': colors.background6,
+    'select.border.color': colors.background6,
+    'select.icon.color': colors.background6,
+
+    /* Menus */
+    'menu.background': colors.background,
+    'menu.border.color': colors.background6,
+    'menu.item.hover.background': colors.primary1,
+    'menu.item.hover.color': colors.primary,
+    'menu.item.active.background': colors.primary,
+    'menu.item.active.color': colors.primary9
+  };
+};
+
+exports.default = createTheme(_colors3.default);

lib/themes/dark/colors.js

 'use strict';
 
 exports.__esModule = true;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _palx = require('palx');
-
-var _palx2 = _interopRequireDefault(_palx);
-
-var _colors = require('../utils/colors');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var palette = {
+exports.default = {
   primary: '#07c',
@@ -21,8 +10,5 @@ warning: '#FEBF2F',
   danger: '#DA3849',
-  info: '#25A2B6'
+  info: '#25A2B6',
+  background: '#000'
 };
-
-var colors = _extends({}, (0, _colors.getPaletteShades)(palette), (0, _colors.colorListToMap)((0, _palx2.default)(palette.primary)));
-
-exports.default = colors;
 module.exports = exports['default'];

lib/themes/dark/index.js

@@ -5,6 +5,10 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**
+                                                                                                                                                                                                                                                                   *
+                                                                                                                                                                                                                                                                   * React UI Dark Theme
+                                                                                                                                                                                                                                                                   *
+                                                                                                                                                                                                                                                                   */
+
 var _base = require('../base');
 
-var _base2 = _interopRequireDefault(_base);
-
 var _colors = require('./colors');
@@ -16,11 +20,3 @@
 
-/**
- *
- * React UI Light Theme
- *
- */
-
-var theme = { colors: _colors2.default };
-
-exports.default = theme;
+exports.default = _extends({}, (0, _base.createTheme)(_colors2.default));
 module.exports = exports['default'];

lib/themes/light/colors.js

 'use strict';
 
 exports.__esModule = true;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _palx = require('palx');
-
-var _palx2 = _interopRequireDefault(_palx);
-
-var _colors = require('../utils/colors');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var palette = {
+exports.default = {
   primary: '#07c',
@@ -21,8 +10,6 @@ warning: '#FEBF2F',
   danger: '#DA3849',
-  info: '#25A2B6'
+  info: '#25A2B6',
+  background: '#FFF'
+
 };
-
-var colors = _extends({}, (0, _colors.getPaletteShades)(palette), (0, _colors.colorListToMap)((0, _palx2.default)(palette.primary)));
-
-exports.default = colors;
 module.exports = exports['default'];

lib/themes/light/index.js

@@ -5,6 +5,10 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**
+                                                                                                                                                                                                                                                                   *
+                                                                                                                                                                                                                                                                   * React UI Dark Theme
+                                                                                                                                                                                                                                                                   *
+                                                                                                                                                                                                                                                                   */
+
 var _base = require('../base');
 
-var _base2 = _interopRequireDefault(_base);
-
 var _colors = require('./colors');
@@ -16,11 +20,3 @@
 
-/**
- *
- * React UI Light Theme
- *
- */
-
-var theme = { colors: _colors2.default };
-
-exports.default = theme;
+exports.default = _extends({}, (0, _base.createTheme)(_colors2.default));
 module.exports = exports['default'];

package.json

 {
   "name": "react-interface",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "description": "react-interface React component",
@@ -27,2 +27,3 @@ "main": "lib/index.js",
     "react-feather": "^1.0.7",
+    "react-onclickoutside": "^6.7.1",
     "styled-components": "^3.0.1",
@@ -29,0 +30,0 @@ "styled-system": "^1.1.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122632

increased by40.34%

Number of package files

82

increased by10.81%

Lines of code

2394

increased by32.56%

Worsened metrics

Dependency count

10

increased by11.11%

Number of low supply chain risk alerts

21

increased by10.53%

Dependency changes

• + Addedreact-onclickoutside@^6.7.1

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedreact-onclickoutside@6.13.1(transitive)

• + Addedscheduler@0.23.2(transitive)