@unbxd-ui/unbxd-react-components 0.3.1 → 0.3.2-beta.10

package/components/Form/stories/Dropdown.stories.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithPreselectedValue = exports.WithLabel = exports.WithCreateCTA = exports.Disabled = exports.Default = exports.CustomOptionRenderer = void 0;
+exports["default"] = exports.WithoutCreateCTA = exports.WithUIDItemComponent = exports.WithPreselectedValue = exports.WithPIDItemComponent = exports.WithLabel = exports.WithCreateCTA = exports.Disabled = exports.Default = exports.CustomOptionRenderer = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _dataLoader = _interopRequireDefault(require("../../../core/dataLoader"));
+var _PIDItemComponent = _interopRequireDefault(require("../../PIDItemComponent/PIDItemComponent"));
+var _UIDItemComponent = _interopRequireDefault(require("../../UIDItemComponent/UIDItemComponent"));
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -338,4 +340,242 @@ var WithCreateCTA = exports.WithCreateCTA = {
       SelectionSummary: SelectionSummary
     }, WithCreateCTA.args)));
   }
+};
+var WithUIDItemComponent = exports.WithUIDItemComponent = {
+  render: function render() {
+    var _React$useState7 = _react["default"].useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      selectedValue = _React$useState8[0],
+      setSelectedValue = _React$useState8[1];
+    var userOptions = [{
+      id: 'user1',
+      user_id: 'A12B34C56D',
+      rank: 1,
+      user_behavior: {
+        user_types: 'returning',
+        session_count: 15,
+        total_events: 247
+      },
+      engagement_metrics: {
+        clicks: 42,
+        orders: 3,
+        revenue: '245.99'
+      },
+      device_info: {
+        platforms: ['Desktop'],
+        devices: ['Chrome']
+      },
+      location_info: {
+        countries: ['United States'],
+        regions: ['California'],
+        cities: ['San Francisco']
+      }
+    }, {
+      id: 'user2',
+      user_id: 'Z98Y76X54W',
+      rank: 2,
+      user_behavior: {
+        user_types: 'new',
+        session_count: 2,
+        total_events: 18
+      },
+      engagement_metrics: {
+        clicks: 8,
+        orders: 0,
+        revenue: '0.0'
+      },
+      device_info: {
+        platforms: ['Mobile'],
+        devices: ['Safari']
+      },
+      location_info: {
+        countries: ['United Kingdom'],
+        cities: ['London']
+      }
+    }, {
+      id: 'user3',
+      user_id: 'M45N67O89P',
+      rank: 3,
+      user_behavior: {
+        user_types: 'power',
+        session_count: 50,
+        total_events: 1250
+      },
+      engagement_metrics: {
+        clicks: 320,
+        orders: 15,
+        revenue: '1899.75'
+      },
+      device_info: {
+        platforms: ['Desktop', 'Mobile'],
+        devices: ['Chrome', 'Firefox']
+      },
+      location_info: {
+        countries: ['Canada'],
+        regions: ['Ontario'],
+        cities: ['Toronto']
+      }
+    }];
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '500px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      label: "Select User",
+      idAttribute: "id",
+      nameAttribute: "user_id",
+      options: userOptions,
+      value: selectedValue,
+      onChange: function onChange(value) {
+        console.log('Selected User:', value);
+        setSelectedValue(value);
+      },
+      DropdownItem: _UIDItemComponent["default"],
+      placeholder: "Choose a user...",
+      className: "demo-dropdown",
+      showSearch: true,
+      searchPlaceholder: "Search users..."
+    }));
+  }
+};
+var WithPIDItemComponent = exports.WithPIDItemComponent = {
+  render: function render() {
+    var _React$useState9 = _react["default"].useState(null),
+      _React$useState0 = _slicedToArray(_React$useState9, 2),
+      selectedValue = _React$useState0[0],
+      setSelectedValue = _React$useState0[1];
+    var productOptions = [{
+      id: 'prod1',
+      uniqueId: 'PROD-12345',
+      imageUrl: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300',
+      title: 'Premium Wireless Headphones with Noise Cancellation'
+    }, {
+      id: 'prod2',
+      uniqueId: 'PROD-67890',
+      imageUrl: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300',
+      title: 'Smartwatch with Fitness Tracking'
+    }, {
+      id: 'prod3',
+      uniqueId: 'PROD-11111',
+      imageUrl: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=300',
+      title: 'Professional Camera Kit'
+    }, {
+      id: 'prod4',
+      uniqueId: 'PROD-22222',
+      imageUrl: 'https://images.unsplash.com/photo-1560343090-f0409e92791a?w=300',
+      title: 'Gaming Laptop'
+    }, {
+      id: 'prod5',
+      uniqueId: 'PROD-33333',
+      imageUrl: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=300',
+      title: 'Wireless Bluetooth Speaker with Bass Boost'
+    }];
+    var keysMap = {
+      uniqueIdMap: 'uniqueId',
+      imageUrlMap: 'imageUrl',
+      titleMap: 'title'
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      label: "Select Product",
+      idAttribute: "uniqueId",
+      nameAttribute: "uniqueId",
+      options: productOptions,
+      value: selectedValue,
+      onChange: function onChange(value) {
+        console.log('Selected Product:', value);
+        setSelectedValue(value);
+      },
+      DropdownItem: _PIDItemComponent["default"],
+      placeholder: "Choose a product...",
+      className: "demo-dropdown",
+      showSearch: true,
+      searchPlaceholder: "Search products..."
+    }));
+  }
+};
+var WithoutCreateCTA = exports.WithoutCreateCTA = {
+  args: {
+    showCreateCTA: false,
+    label: 'Categories',
+    idAttribute: 'id',
+    nameAttribute: 'label',
+    showSearch: true,
+    searchPlaceholder: 'Search categories...',
+    multiSelect: true,
+    noSelectionLabel: 'Select categories'
+  },
+  render: function render() {
+    var _React$useState1 = _react["default"].useState([{
+        id: '1',
+        label: 'Electronics'
+      }, {
+        id: '2',
+        label: 'Clothing'
+      }, {
+        id: '3',
+        label: 'Books'
+      }, {
+        id: '4',
+        label: 'Food'
+      }, {
+        id: '5',
+        label: 'Furniture'
+      }, {
+        id: '6',
+        label: 'Electronics'
+      }, {
+        id: '7',
+        label: 'Clothing'
+      }, {
+        id: '8',
+        label: 'Books'
+      }, {
+        id: '9',
+        label: 'Food'
+      }, {
+        id: '10',
+        label: 'Furniture'
+      }]),
+      _React$useState10 = _slicedToArray(_React$useState1, 2),
+      options = _React$useState10[0],
+      setOptions = _React$useState10[1];
+    var _React$useState11 = _react["default"].useState([]),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      selectedValues = _React$useState12[0],
+      setSelectedValues = _React$useState12[1];
+    var handleChange = function handleChange(value, itemData) {
+      var id = itemData.id;
+      if (value) {
+        setSelectedValues([].concat(_toConsumableArray(selectedValues), [itemData]));
+      } else {
+        setSelectedValues(selectedValues.filter(function (val) {
+          return val.id !== id;
+        }));
+      }
+    };
+    var handleDelete = function handleDelete(value) {
+      setSelectedValues(selectedValues.filter(function (val) {
+        return val.id !== value;
+      }));
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({
+      multiSelect: true,
+      options: options,
+      value: selectedValues,
+      nameAttribute: "label",
+      onChange: handleChange,
+      showCreateCTA: true,
+      showAllTags: false,
+      isDeletable: true,
+      onDelete: handleDelete
+    }, WithCreateCTA.args)));
+  }
 };

package/components/Form/stories/SearchableDropdown.stories.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.UIDSearchableDropdown = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _SearchableDropdown = _interopRequireDefault(require("../SearchableDropdown"));
 var _dataLoader = _interopRequireDefault(require("../../../core/dataLoader"));
+var _UIDItemComponent = _interopRequireDefault(require("../../UIDItemComponent/UIDItemComponent"));
+var _SearchableDropdown = _interopRequireDefault(require("../SearchableDropdown"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -177,10 +178,179 @@ var Default = exports.Default = {
       }),
       DropdownItem: ValueDropdownItem,
       responseFormatter: valuesResponseFormatter,
-      value: selectedValue
+      value: selectedValue,
+      showClear: true
       // getUrlParams={getFieldValuesUrlParams}
       ,
 
+      onChange: function onChange(value) {
+        return setSelectedValue(value);
+      }
+    })));
+  }
+};
+var UIDSearchableDropdown = exports.UIDSearchableDropdown = {
+  args: {
+    paginationType: 'SERVER',
+    requestId: 'getFieldValue',
+    perPageKey: '_limit',
+    pageNoKey: '_page',
+    halign: 'right',
+    searchAttribute: 'id',
+    noSelectionLabel: 'Select user',
+    className: 'searchable-dd',
+    name: 'fieldValueDD',
+    label: 'Select User',
+    showLabel: true,
+    nameAttribute: 'id',
+    idAttribute: 'id',
+    pageSize: 10,
+    maxHeight: 400,
+    ddItemHeight: 120,
+    searchPlaceholder: "Search users "
+  },
+  argTypes: {
+    paginationType: {
+      control: 'select',
+      options: ['SERVER', 'CLIENT'],
+      description: 'Type of pagination'
+    },
+    requestId: {
+      control: 'text',
+      description: 'Identifier for the API request configuration'
+    },
+    perPageKey: {
+      control: 'text',
+      description: 'Query parameter for items per page'
+    },
+    pageNoKey: {
+      control: 'text',
+      description: 'Query parameter for page number'
+    },
+    halign: {
+      control: 'select',
+      options: ['left', 'right'],
+      description: 'Horizontal alignment of the dropdown'
+    },
+    searchAttribute: {
+      control: 'text',
+      description: 'Field to search against'
+    },
+    requestParams: {
+      control: 'object',
+      description: 'Additional request parameters'
+    },
+    noSelectionLabel: {
+      control: 'text',
+      description: 'Label shown when no value is selected'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute for the dropdown'
+    },
+    label: {
+      control: 'text',
+      description: 'Label text'
+    },
+    showLabel: {
+      control: 'boolean',
+      description: 'Whether to show the label'
+    },
+    nameAttribute: {
+      control: 'text',
+      description: 'Field to use as item label'
+    },
+    pageSize: {
+      control: 'number',
+      description: 'Number of items per page'
+    },
+    maxHeight: {
+      control: 'number',
+      description: 'Maximum height of dropdown list'
+    },
+    ddItemHeight: {
+      control: 'number',
+      description: 'Height of each dropdown item'
+    }
+  },
+  render: function render(args) {
+    var _React$useState3 = _react["default"].useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectedValue = _React$useState4[0],
+      setSelectedValue = _React$useState4[1];
+    var ddRef = _react["default"].useRef(null);
+
+    // Mock response formatter
+    var valuesResponseFormatter = function valuesResponseFormatter(response) {
+      var userTypes = ['new', 'returning', 'power', 'inactive'];
+      var platforms = [['Desktop'], ['Mobile'], ['Desktop', 'Mobile'], ['Tablet']];
+      var devices = [['Chrome'], ['Safari'], ['Firefox', 'Chrome'], ['Edge']];
+      var regions = ['California', 'New York', 'Texas', 'Florida', 'Ontario', 'British Columbia'];
+      var countries = ['United States', 'Canada', 'United Kingdom', 'Australia'];
+      var cities = ['San Francisco', 'New York', 'Austin', 'Miami', 'Toronto', 'London'];
+      return {
+        entries: response.map(function (user, index) {
+          return {
+            id: user.id,
+            name: user.name,
+            user_id: user.username || "USER-".concat(String(user.id).padStart(5, '0')),
+            rank: index + 1,
+            user_behavior: {
+              user_types: userTypes[index % userTypes.length],
+              session_count: Math.floor(Math.random() * 100) + 1,
+              total_events: Math.floor(Math.random() * 1000) + 50
+            },
+            engagement_metrics: {
+              clicks: Math.floor(Math.random() * 500) + 10,
+              orders: Math.floor(Math.random() * 20),
+              revenue: (Math.random() * 2000).toFixed(2)
+            },
+            device_info: {
+              platforms: platforms[index % platforms.length],
+              devices: devices[index % devices.length]
+            },
+            location_info: {
+              regions: [regions[index % regions.length]],
+              countries: [countries[index % countries.length]],
+              cities: [cities[index % cities.length]]
+            }
+          };
+        }),
+        total: response.length ? 10 : 0
+      };
+    };
+
+    // Mock loader component
+    var PageLoader = function PageLoader(_ref2) {
+      var className = _ref2.className;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: className,
+        style: {
+          padding: '10px',
+          textAlign: 'center'
+        }
+      }, "Loading...");
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '600px',
+        height: '400px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_SearchableDropdown["default"], _extends({}, args, {
+      ref: ddRef,
+      LoaderComponent: /*#__PURE__*/_react["default"].createElement(PageLoader, {
+        className: "search-loader"
+      }),
+      DropdownItem: _UIDItemComponent["default"],
+      responseFormatter: valuesResponseFormatter,
+      value: selectedValue,
+      showClear: true,
+      ddItemHeight: 120,
+      paginationType: "SERVER",
       onChange: function onChange(value) {
         return setSelectedValue(value);
       }