@unbxd-ui/unbxd-react-components 0.3.2-beta.4 → 0.3.2-beta.6

package/components/MetricCard/MetricCard.css

@@ -0,0 +1 @@
+.RCB-metric-card-wrapper{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;margin-bottom:32px}@media (min-width: 768px){.RCB-metric-card-wrapper{grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}}@media (min-width: 1024px){.RCB-metric-card-wrapper{grid-template-columns:repeat(6, minmax(0, 1fr));gap:20px}}.RCB-metric-card-wrapper .RCB-metric-card-item{border-radius:12px;padding:16px;position:relative;overflow:hidden;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;background:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #e1e7ef;animation:slide-up 0.5s ease-out}.RCB-metric-card-wrapper .RCB-metric-card-item:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data{position:relative;z-index:10}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title .RCB-metric-title-icon{background-color:#06b6d4;padding:0.5rem;border-radius:0.75rem;border:1px solid #e1e7ef;height:34px}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title .RCB-metric-title-text{font-size:0.875rem;line-height:1.25rem;color:#65758b}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value{display:flex;align-items:center;gap:0.5rem}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-value-text{font-size:1.125rem;line-height:1.75rem;font-weight:700;color:#0f1729;letter-spacing:-0.025em}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text{display:flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;border-radius:9999px;font-size:0.75rem;line-height:1rem;font-weight:500}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text.positive{background-color:#dcfce7;color:#15803d}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text.negative{background-color:#fee2e2;color:#b91c1c}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-bottom-right-circle{position:absolute;right:-1rem;bottom:-1rem;width:5rem;height:5rem;border-radius:50%;opacity:0.1;background-color:var(--decorative-color, #06b6d4)}@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

package/components/MetricCard/MetricCard.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MetricCard;
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("../../core/icon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function MetricCard(props) {
+  var _props$metricConfigs = props.metricConfigs,
+    metricConfigs = _props$metricConfigs === void 0 ? [] : _props$metricConfigs;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-metric-card-wrapper"
+  }, metricConfigs.map(function () {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? '' : _ref$id,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? '' : _ref$icon,
+      _ref$iconBgColor = _ref.iconBgColor,
+      iconBgColor = _ref$iconBgColor === void 0 ? '#ccc' : _ref$iconBgColor,
+      _ref$hasDiff = _ref.hasDiff,
+      hasDiff = _ref$hasDiff === void 0 ? false : _ref$hasDiff,
+      _ref$comparePercentag = _ref.comparePercentage,
+      comparePercentage = _ref$comparePercentag === void 0 ? 0 : _ref$comparePercentag;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-card-item",
+      key: id
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-data"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-icon",
+      style: {
+        backgroundColor: iconBgColor
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      icon: icon,
+      size: "16px",
+      color: "white"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-text"
+    }, " ", name, " ")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-value"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-value-text"
+    }, value), hasDiff ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-compare-text ".concat(comparePercentage < 0 ? 'negative' : 'positive')
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      icon: comparePercentage < 0 ? 'arrow-down' : 'arrow-up',
+      size: "12px"
+    }), Math.abs(comparePercentage) + '%') : null)), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-bottom-right-circle",
+      style: {
+        backgroundColor: iconBgColor
+      }
+    }));
+  }));
+}

package/components/MetricCard/MetricCard.scss

@@ -0,0 +1,118 @@
+.RCB-metric-card-wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 32px;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 20px;
+  }
+
+  .RCB-metric-card-item {
+    border-radius: 12px;
+    padding: 16px;
+    position: relative;
+    overflow: hidden;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    background: hsl(0, 0%, 100%);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid hsl(214, 32%, 91%);
+    animation: slide-up 0.5s ease-out;
+
+    &:hover {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    .RCB-metric-data {
+      position: relative;
+      z-index: 10;
+
+      .RCB-metric-title {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+
+        .RCB-metric-title-icon {
+          background-color: rgb(6, 182, 212);
+          padding: 0.5rem;
+          border-radius: 0.75rem;
+          border: 1px solid #e1e7ef;
+          height: 34px;
+        }
+
+        .RCB-metric-title-text {
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          color: hsl(215, 16%, 47%);
+        }
+      }
+
+      .RCB-metric-value {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        .RCB-metric-value-text {
+          font-size: 1.125rem;
+          line-height: 1.75rem;
+          font-weight: 700;
+          color: #0f1729;
+          letter-spacing: -0.025em;
+        }
+
+        .RCB-metric-compare-text {
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+          padding: 0.125rem 0.5rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          line-height: 1rem;
+          font-weight: 500;
+
+          &.positive {
+            background-color: #dcfce7;
+            color: #15803d;
+          }
+
+          &.negative {
+            background-color: #fee2e2;
+            color: #b91c1c;
+          }
+        }
+      }
+    }
+
+    .RCB-bottom-right-circle {
+      position: absolute;
+      right: -1rem;
+      bottom: -1rem;
+      width: 5rem;
+      height: 5rem;
+      border-radius: 50%;
+      opacity: 0.1;
+      background-color: var(--decorative-color, rgb(6, 182, 212));
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

package/components/MetricCard/MetriicCard.stories.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithDifferencePercentage = exports.Default = void 0;
+var _MetricCard = _interopRequireDefault(require("./MetricCard"));
+require("./MetricCard.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'Components/MetricCard',
+  component: _MetricCard["default"],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'MetricCard displays key metrics in a grid layout.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    metricConfigs: {
+      description: 'Array of metric configuration objects with id, name, value, icon and iconBgColor properties',
+      control: 'object'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Sample metric data
+var sampleMetrics = [{
+  id: 1,
+  name: 'Impressions',
+  value: '20,588,028',
+  icon: 'preview',
+  iconBgColor: 'rgb(6, 182, 212)'
+}, {
+  id: 2,
+  name: 'Clicks',
+  value: '2,060,018',
+  icon: 'click-rate',
+  iconBgColor: 'rgb(59, 130, 246)'
+}, {
+  id: 3,
+  name: 'Add to Carts',
+  value: '609,718',
+  icon: 'cart-rate',
+  iconBgColor: 'rgb(245, 158, 11)'
+}, {
+  id: 4,
+  name: 'Orders',
+  value: '258,799',
+  icon: 'package',
+  iconBgColor: 'rgb(34, 197, 94)'
+}, {
+  id: 5,
+  name: 'Conversion Rate',
+  value: '1.26%',
+  icon: 'trending-up',
+  iconBgColor: 'rgb(207, 4, 173)'
+}, {
+  id: 6,
+  name: 'Revenue',
+  value: '$15,644,741',
+  icon: 'revenue',
+  iconBgColor: 'rgb(16, 185, 129)'
+}];
+
+// Sample metric data with difference percentages
+var metricsWithDiff = [{
+  id: 1,
+  name: 'Impressions',
+  value: '20,588,028',
+  icon: 'preview',
+  iconBgColor: 'rgb(6, 182, 212)',
+  hasDiff: true,
+  comparePercentage: 15.4
+}, {
+  id: 2,
+  name: 'Clicks',
+  value: '2,060,018',
+  icon: 'click-rate',
+  iconBgColor: 'rgb(59, 130, 246)',
+  hasDiff: true,
+  comparePercentage: -8.2
+}, {
+  id: 3,
+  name: 'Add to Carts',
+  value: '609,718',
+  icon: 'cart-rate',
+  iconBgColor: 'rgb(245, 158, 11)',
+  hasDiff: true,
+  comparePercentage: 22.7
+}, {
+  id: 4,
+  name: 'Orders',
+  value: '258,799',
+  icon: 'package',
+  iconBgColor: 'rgb(34, 197, 94)',
+  hasDiff: true,
+  comparePercentage: -5.3
+}, {
+  id: 5,
+  name: 'Conversion Rate',
+  value: '1.26%',
+  icon: 'trending-up',
+  iconBgColor: 'rgb(207, 4, 173)',
+  hasDiff: true,
+  comparePercentage: 3.8
+}, {
+  id: 6,
+  name: 'Revenue',
+  value: '$15,644,741',
+  icon: 'revenue',
+  iconBgColor: 'rgb(16, 185, 129)',
+  hasDiff: true,
+  comparePercentage: -12.1
+}];
+
+// Default Story
+var Default = exports.Default = {
+  args: {
+    metricConfigs: sampleMetrics
+  }
+};
+
+// Story with difference percentages
+var WithDifferencePercentage = exports.WithDifferencePercentage = {
+  args: {
+    metricConfigs: metricsWithDiff
+  }
+};

package/components/MetricCard/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _MetricCard = _interopRequireDefault(require("./MetricCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _MetricCard["default"];