@stokr/components-library 2.1.4 → 2.1.6

package/dist/components/AdminDashboard/Table/ReactTable.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +16,11 @@ var _Card = require("../../Card/Card.styles");
 var _InputWithButton = _interopRequireDefault(require("../../Input/InputWithButton"));
 var _Button = _interopRequireDefault(require("../../Button/Button.styles"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
 //This components is used only to memoize the values before we sent them to the react-table
 var ReactTableWrapper = function ReactTableWrapper(props) {
@@ -76,6 +82,7 @@ function ReactTable(props) {
     noPagination = props.noPagination,
     withSubTable = props.withSubTable,
     isSubTable = props.isSubTable,
+    customTdStyles = props.customTdStyles,
     calculateSubData = props.calculateSubData;
 
   // Use the state and functions returned from useTable to build UI
@@ -109,8 +116,10 @@ function ReactTable(props) {
   })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
     prepareRow(row);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, row.getRowProps(), row.cells.map(function (cell) {
+      var cellStyles = customTdStyles ? customTdStyles(i, row.original) : {};
       return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), cell.getCellProps({
-        className: cell.column.collapse ? 'collapse' : ''
+        className: cell.column.collapse ? 'collapse' : '',
+        style: _objectSpread({}, cellStyles)
       }), {
         blue: blue
       }), cell.render('Cell'));

package/dist/components/AdminDashboard/Table/ReactTable.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithCustomStyling = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ReactTable = require("./ReactTable");
+var _global = _interopRequireDefault(require("../../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/React table',
+  component: _ReactTable.ReactTable
+}; // Sample columns and data for demonstration
+exports.default = _default;
+var columns = [{
+  Header: 'ID',
+  accessor: 'id' // accessor is the "key" in the data
+}, {
+  Header: 'Name',
+  accessor: 'name'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}];
+var data = [{
+  id: 1,
+  name: 'Alice',
+  status: 'Active'
+}, {
+  id: 2,
+  name: 'Bob',
+  status: 'Inactive'
+}, {
+  id: 3,
+  name: 'Carol',
+  status: 'Active'
+}];
+
+// Custom styling function
+var customTdStyles = function customTdStyles(index, row) {
+  if (index === 0) {
+    return {
+      backgroundColor: 'lightblue',
+      fontWeight: 'bold',
+      paddingBottom: 0
+    };
+  }
+  if (row.status === 'Inactive') {
+    return {
+      backgroundColor: 'lightgray'
+    };
+  }
+  return {}; // default style
+};
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, args));
+};
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(Template, {
+    columns: columns,
+    data: data
+  });
+};
+exports.Default = Default;
+var WithCustomStyling = function WithCustomStyling() {
+  return /*#__PURE__*/_react.default.createElement(Template, {
+    columns: columns,
+    data: data,
+    customTdStyles: customTdStyles
+  });
+};
+exports.WithCustomStyling = WithCustomStyling;

package/dist/components/ChartLegend/ChartLegend.js

@@ -41,7 +41,11 @@ var ChartLegend = function ChartLegend(props) {
       }
     }, /*#__PURE__*/_react.default.createElement(_ChartLegend.ColorLabel, {
       itemColor: item.color
-    }), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.name), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.subname)), /*#__PURE__*/_react.default.createElement(_ChartLegend.ValueCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.value), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.info)), item.details && /*#__PURE__*/_react.default.createElement(_ChartLegend.Arrow, {
+    }), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.name), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.subname)), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.value), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.info)), /*#__PURE__*/_react.default.createElement(_ChartLegend.MarketDataCol, {
+      isPositive: item.isPositive
+    }, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, {
+      isPositive: item.isPositive
+    }, item.marketValue), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.marketInfo)), item.details && /*#__PURE__*/_react.default.createElement(_ChartLegend.Arrow, {
       isOpened: activeItems[itemKey]
     })), item.details && /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
       isOpened: activeItems[itemKey]
@@ -55,7 +59,11 @@ ChartLegend.propTypes = {
     name: _propTypes.default.string,
     color: _propTypes.default.string,
     subname: _propTypes.default.string,
-    info: _propTypes.default.string
+    info: _propTypes.default.string,
+    details: _propTypes.default.any,
+    isPositive: _propTypes.default.bool,
+    marketValue: _propTypes.default.string,
+    marketInfo: _propTypes.default.string
   })).isRequired
 };
 var _default = ChartLegend;

package/dist/components/ChartLegend/ChartLegend.stories.js

@@ -83,6 +83,9 @@ ChartLegendFull.args = {
     subname: 'Sub Name',
     info: 'information',
     price: 10000,
+    isPositive: false,
+    marketValue: '20 %',
+    marketInfo: '(30d change)',
     details: Table(1560, 'USD', 10000, 'some link', 'some label')
   }]
 };

package/dist/components/ChartLegend/ChartLegend.styles.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValueCol = exports.SmallText = exports.NameCol = exports.LargeText = exports.Items = exports.Item = exports.Head = exports.ColorLabel = exports.Body = exports.Arrow = void 0;
+exports.ValueCol = exports.SmallText = exports.NameCol = exports.MarketDataCol = exports.LargeText = exports.Items = exports.Item = exports.Head = exports.ColorLabel = exports.Body = exports.Arrow = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Items = _styledComponents.default.div.withConfig({
   displayName: "ChartLegendstyles__Items",
@@ -36,7 +37,7 @@ exports.ColorLabel = ColorLabel;
 var NameCol = _styledComponents.default.div.withConfig({
   displayName: "ChartLegendstyles__NameCol",
   componentId: "sc-gh1vwu-5"
-})(["width:50%;display:inline-block;vertical-align:top;"]);
+})(["width:40%;display:inline-block;vertical-align:top;"]);
 exports.NameCol = NameCol;
 var ValueCol = _styledComponents.default.div.withConfig({
   displayName: "ChartLegendstyles__ValueCol",
@@ -46,18 +47,31 @@ exports.ValueCol = ValueCol;
 var LargeText = _styledComponents.default.div.withConfig({
   displayName: "ChartLegendstyles__LargeText",
   componentId: "sc-gh1vwu-7"
-})(["font-weight:300;font-size:22px;line-height:28px;"]);
+})(["font-weight:300;font-size:22px;line-height:28px;", " ", ""], function (props) {
+  return props.isPositive && "\n    color: ".concat(_theme.default.cProgressDone, ";\n  ");
+}, function (props) {
+  return props.isPositive === false && "\n    color: ".concat(_theme.default.cWarning, ";\n  ");
+});
 exports.LargeText = LargeText;
 var SmallText = _styledComponents.default.div.withConfig({
   displayName: "ChartLegendstyles__SmallText",
   componentId: "sc-gh1vwu-8"
 })(["font-size:11px;line-height:12px;margin-top:4px;font-style:italic;"]);
 exports.SmallText = SmallText;
+var MarketDataCol = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__MarketDataCol",
+  componentId: "sc-gh1vwu-9"
+})(["width:20%;display:inline-block;vertical-align:top;position:relative;", "{position:relative;left:-20px;}&::before{display:block;position:absolute;content:'';top:30%;left:-20px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;", " ", "}"], SmallText, function (props) {
+  return props.isPositive && "\n      border-bottom: 7px solid\n        ".concat(_theme.default.cProgressDone, ";\n    ");
+}, function (props) {
+  return props.isPositive === false && "\n      border-top: 7px solid\n        ".concat(_theme.default.cWarning, ";\n    ");
+});
+exports.MarketDataCol = MarketDataCol;
 var Arrow = _styledComponents.default.i.attrs({
   className: 'ion ion-ios-arrow-down'
 }).withConfig({
   displayName: "ChartLegendstyles__Arrow",
-  componentId: "sc-gh1vwu-9"
+  componentId: "sc-gh1vwu-10"
 })(["&&&{position:absolute;top:14px;right:24px;transition:0.3s transform;transform:rotate(0);text-align:center;font-size:16px;line-height:16px;height:16px;margin-top:-8px;", "}"], function (props) {
   return props.isOpened && "\n      transform: rotate(180deg);\n    ";
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",