@stokr/components-library 2.3.65-beta.1 → 2.3.65-beta.10

package/dist/components/Input/MultiSelect.stories.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutCheckboxes = exports.WithPreselectedValues = exports.WithManyOptions = exports.MultipleFilters = exports.Disabled = exports.Default = exports.CustomWidth = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MultiSelect = require("./MultiSelect");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+const StoryContainer = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelectstories__StoryContainer",
+  componentId: "sc-1vk8pre-0"
+})(["max-width:400px;padding:40px 20px;"]);
+const FiltersRow = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelectstories__FiltersRow",
+  componentId: "sc-1vk8pre-1"
+})(["display:flex;gap:12px;flex-wrap:wrap;"]);
+var _default = exports.default = {
+  title: 'Components Library/Inputs/MultiSelect',
+  component: _MultiSelect.MultiSelect,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(StoryContainer, null, /*#__PURE__*/_react.default.createElement(Story, null))))]
+};
+const statusOptions = [{
+  key: 'initiated',
+  value: 'initiated',
+  label: 'Initiated'
+}, {
+  key: 'declined',
+  value: 'declined',
+  label: 'Declined'
+}, {
+  key: 'confirmed',
+  value: 'confirmed',
+  label: 'Confirmed'
+}, {
+  key: 'transferred',
+  value: 'transferred',
+  label: 'Transferred'
+}];
+const typeOptions = [{
+  key: 'dividend',
+  value: 'dividend',
+  label: 'Dividend'
+}, {
+  key: 'interest',
+  value: 'interest',
+  label: 'Interest'
+}, {
+  key: 'redemption',
+  value: 'redemption',
+  label: 'Redemption'
+}];
+const countryOptions = [{
+  key: 'us',
+  value: 'us',
+  label: 'United States'
+}, {
+  key: 'uk',
+  value: 'uk',
+  label: 'United Kingdom'
+}, {
+  key: 'de',
+  value: 'de',
+  label: 'Germany'
+}, {
+  key: 'fr',
+  value: 'fr',
+  label: 'France'
+}, {
+  key: 'es',
+  value: 'es',
+  label: 'Spain'
+}, {
+  key: 'it',
+  value: 'it',
+  label: 'Italy'
+}];
+
+// Controlled wrapper for interactive stories
+const ControlledMultiSelect = props => {
+  const [value, setValue] = (0, _react.useState)(props.value || []);
+  const handleChange = _ref => {
+    let {
+      value: newValue
+    } = _ref;
+    setValue(newValue);
+    console.log('Selected values:', newValue);
+  };
+  return /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, _extends({}, props, {
+    value: value,
+    onChange: handleChange
+  }));
+};
+
+// Default - Status filter like in the design
+const Default = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "status",
+  name: "status",
+  placeholder: "Status",
+  options: statusOptions
+});
+
+// With preselected values showing count badge
+exports.Default = Default;
+const WithPreselectedValues = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "status",
+  name: "status",
+  placeholder: "Status",
+  options: statusOptions,
+  value: ['initiated', 'confirmed']
+});
+
+// Multiple filters side by side (like in the screenshot)
+exports.WithPreselectedValues = WithPreselectedValues;
+const MultipleFilters = () => {
+  const [statusValue, setStatusValue] = (0, _react.useState)(['initiated']);
+  const [typeValue, setTypeValue] = (0, _react.useState)([]);
+  return /*#__PURE__*/_react.default.createElement(FiltersRow, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '140px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, {
+    id: "status",
+    name: "status",
+    placeholder: "Status",
+    options: statusOptions,
+    value: statusValue,
+    onChange: _ref2 => {
+      let {
+        value
+      } = _ref2;
+      return setStatusValue(value);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '120px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, {
+    id: "type",
+    name: "type",
+    placeholder: "Type",
+    options: typeOptions,
+    value: typeValue,
+    onChange: _ref3 => {
+      let {
+        value
+      } = _ref3;
+      return setTypeValue(value);
+    }
+  })));
+};
+
+// Without checkboxes (classic multi-select style)
+exports.MultipleFilters = MultipleFilters;
+const WithoutCheckboxes = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "countries",
+  name: "countries",
+  placeholder: "Countries",
+  options: countryOptions,
+  showCheckboxes: false,
+  showCountBadge: false
+});
+
+// With many options
+exports.WithoutCheckboxes = WithoutCheckboxes;
+const WithManyOptions = () => {
+  const manyOptions = Array.from({
+    length: 20
+  }, (_, i) => ({
+    key: "option-".concat(i),
+    value: "option-".concat(i),
+    label: "Option ".concat(i + 1)
+  }));
+  return /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "many",
+    name: "many",
+    placeholder: "Select",
+    options: manyOptions,
+    menuHeight: 250
+  });
+};
+
+// Disabled state
+exports.WithManyOptions = WithManyOptions;
+const Disabled = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "status",
+  name: "status",
+  placeholder: "Status",
+  options: statusOptions,
+  value: ['initiated'],
+  disabled: true
+});
+
+// Custom width - narrow select with wider menu
+exports.Disabled = Disabled;
+const CustomWidth = () => {
+  const longOptions = [{
+    key: 'opt1',
+    value: 'opt1',
+    label: 'Very Long Option Name Here'
+  }, {
+    key: 'opt2',
+    value: 'opt2',
+    label: 'Another Long Option'
+  }, {
+    key: 'opt3',
+    value: 'opt3',
+    label: 'Short'
+  }, {
+    key: 'opt4',
+    value: 'opt4',
+    label: 'Medium Length Option'
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Narrow select (80px), menu expands (150-250px)"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "narrow",
+    name: "narrow",
+    placeholder: "Filter",
+    options: longOptions,
+    width: 80,
+    minMenuWidth: 150,
+    maxMenuWidth: 250
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Fixed width (200px)"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "fixed",
+    name: "fixed",
+    placeholder: "Status",
+    options: statusOptions,
+    width: "200px"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Wide menu (up to 400px) for long text"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "wide",
+    name: "wide",
+    placeholder: "Select",
+    options: longOptions,
+    width: 120,
+    minMenuWidth: 200,
+    maxMenuWidth: 400
+  })));
+};
+exports.CustomWidth = CustomWidth;

package/dist/components/Input/SearchInput.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SearchInput = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SearchInput = require("./SearchInput.styles");
+var _searchIcon = require("../../static/images/search-icon.svg");
+const _excluded = ["value", "onChange", "placeholder", "icon", "showIcon", "disabled", "variant", "onFocus", "onBlur", "className", "containerStyle", "inputStyle", "iconStyle", "id", "name", "aria-label", "aria-describedby"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const SearchInput = _ref => {
+  let {
+      value = '',
+      onChange,
+      placeholder = 'Search',
+      icon,
+      showIcon = true,
+      disabled = false,
+      variant = 'filled',
+      // 'filled' or 'outlined'
+      onFocus,
+      onBlur,
+      className,
+      containerStyle,
+      inputStyle,
+      iconStyle,
+      id,
+      name,
+      'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedBy
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const handleChange = e => {
+    if (onChange) {
+      onChange(e.target.value, e);
+    }
+  };
+  const handleFocus = e => {
+    if (onFocus) {
+      onFocus(e);
+    }
+  };
+  const handleBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const inputId = id || "search-input-".concat(Math.random().toString(36).substr(2, 9));
+  const inputName = name || inputId;
+  return /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputContainer, {
+    className: className,
+    style: containerStyle
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputWrapper, {
+    disabled: disabled,
+    variant: variant
+  }, showIcon && /*#__PURE__*/_react.default.createElement(_SearchInput.SearchIconWrapper, {
+    style: iconStyle
+  }, icon || /*#__PURE__*/_react.default.createElement(_searchIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputField, _extends({
+    id: inputId,
+    name: inputName,
+    type: "search",
+    value: value,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    placeholder: placeholder,
+    disabled: disabled,
+    "aria-label": ariaLabel || placeholder,
+    "aria-describedby": ariaDescribedBy,
+    style: inputStyle
+  }, props))));
+};
+exports.SearchInput = SearchInput;
+var _default = exports.default = SearchInput;