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

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

@@ -0,0 +1,366 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutIcon = exports.WithInitialValue = exports.WithCustomIcon = exports.Variants = exports.Outlined = exports.LongText = exports.Disabled = exports.DifferentWidths = exports.Default = exports.CustomStyling = exports.CustomPlaceholder = exports.AllStates = exports.AccessibilityExample = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SearchInput = _interopRequireDefault(require("./SearchInput"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+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); }
+var _default = exports.default = {
+  title: 'Components Library/Inputs/SearchInput',
+  component: _SearchInput.default,
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'The search input value (controlled)'
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback fired when the value changes'
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+      defaultValue: 'Search'
+    },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: ['filled', 'outlined'],
+      description: 'Visual variant of the input',
+      defaultValue: 'filled'
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Show/hide the search icon',
+      defaultValue: true
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the input',
+      defaultValue: false
+    },
+    icon: {
+      control: false,
+      description: 'Custom icon component (React node)'
+    },
+    onFocus: {
+      action: 'focused',
+      description: 'Callback fired when input receives focus'
+    },
+    onBlur: {
+      action: 'blurred',
+      description: 'Callback fired when input loses focus'
+    }
+  }
+}; // Controlled component wrapper for stories
+const ControlledSearchInput = args => {
+  const [value, setValue] = (0, _react.useState)(args.value || '');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, _extends({}, args, {
+    value: value,
+    onChange: (newValue, e) => {
+      var _args$onChange;
+      setValue(newValue);
+      (_args$onChange = args.onChange) === null || _args$onChange === void 0 || _args$onChange.call(args, newValue, e);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Default example
+const Default = exports.Default = ControlledSearchInput.bind({});
+Default.args = {
+  placeholder: 'Search'
+};
+
+// Without icon
+const WithoutIcon = exports.WithoutIcon = ControlledSearchInput.bind({});
+WithoutIcon.args = {
+  placeholder: 'Search',
+  showIcon: false
+};
+
+// With custom placeholder
+const CustomPlaceholder = exports.CustomPlaceholder = ControlledSearchInput.bind({});
+CustomPlaceholder.args = {
+  placeholder: 'Search users, projects, or tags...'
+};
+
+// Disabled state
+const Disabled = exports.Disabled = ControlledSearchInput.bind({});
+Disabled.args = {
+  placeholder: 'Search',
+  value: 'Sample search text',
+  disabled: true
+};
+
+// With initial value
+const WithInitialValue = exports.WithInitialValue = ControlledSearchInput.bind({});
+WithInitialValue.args = {
+  placeholder: 'Search',
+  value: 'Initial search term'
+};
+
+// Custom icon example
+const WithCustomIcon = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  const CustomIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "9",
+    cy: "9",
+    r: "6",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15 15L12 12",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }));
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search with custom icon",
+    icon: /*#__PURE__*/_react.default.createElement(CustomIcon, null)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Different widths
+exports.WithCustomIcon = WithCustomIcon;
+const DifferentWidths = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  const [value3, setValue3] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Full width"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search (full width)"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px',
+      maxWidth: '400px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Max width 400px"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search (400px max)"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px',
+      maxWidth: '200px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Max width 200px"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value3,
+    onChange: setValue3,
+    placeholder: "Search (200px max)"
+  })));
+};
+
+// Long text example
+exports.DifferentWidths = DifferentWidths;
+const LongText = exports.LongText = ControlledSearchInput.bind({});
+LongText.args = {
+  placeholder: 'Search',
+  value: 'This is a very long search query that might overflow the input field'
+};
+
+// All states
+const AllStates = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  const [value3, setValue3] = (0, _react.useState)('Sample text');
+  const [value4, setValue4] = (0, _react.useState)('Disabled with text');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Empty (default)"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Without icon"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search",
+    showIcon: false
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "With value"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value3,
+    onChange: setValue3,
+    placeholder: "Search"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value4,
+    onChange: setValue4,
+    placeholder: "Search",
+    disabled: true
+  })));
+};
+
+// Accessibility example
+exports.AllStates = AllStates;
+const AccessibilityExample = exports.AccessibilityExample = ControlledSearchInput.bind({});
+AccessibilityExample.args = {
+  placeholder: 'Search',
+  'aria-label': 'Search for products',
+  'aria-describedby': 'search-help-text'
+};
+AccessibilityExample.decorators = [Story => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null), /*#__PURE__*/_react.default.createElement("div", {
+  id: "search-help-text",
+  style: {
+    marginTop: '8px',
+    fontSize: '12px',
+    color: _colors.default.grey2
+  }
+}, "Use this search to find products by name, category, or description."))];
+
+// Outlined variant
+const Outlined = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search",
+    variant: "outlined"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Both variants side by side
+exports.Outlined = Outlined;
+const Variants = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Filled (default)"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search",
+    variant: "filled"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Outlined"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search",
+    variant: "outlined"
+  })));
+};
+
+// Custom styling
+exports.Variants = Variants;
+const CustomStyling = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search with custom styling",
+    containerStyle: {
+      maxWidth: '500px',
+      margin: '0 auto'
+    },
+    inputStyle: {
+      fontSize: '16px'
+    },
+    iconStyle: {
+      color: _colors.default.blue
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+exports.CustomStyling = CustomStyling;

package/dist/components/Input/SearchInput.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchInputWrapper = exports.SearchInputField = exports.SearchInputContainer = exports.SearchIconWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SearchInputContainer = exports.SearchInputContainer = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchInputContainer",
+  componentId: "sc-dcxztv-0"
+})(["width:100%;display:flex;"]);
+const SearchInputWrapper = exports.SearchInputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchInputWrapper",
+  componentId: "sc-dcxztv-1"
+})(["position:relative;display:flex;align-items:center;width:100%;border-radius:8px;padding:0 16px;min-height:40px;transition:all 0.2s ease;background-color:", ";border:", ";", " &:focus-within{background-color:", ";border-color:", ";box-shadow:", ";}&:hover{border-color:", ";}"], props => props.variant === 'outlined' ? 'transparent' : _colors.default.grey3, props => props.variant === 'outlined' ? "1px solid ".concat(_colors.default.lightGrey) : '1px solid transparent', props => props.disabled && "\n    opacity: 0.6;\n    cursor: not-allowed;\n  ", props => props.variant === 'outlined' ? 'transparent' : _colors.default.white, props => props.variant === 'outlined' ? _colors.default.grey2 : 'transparent', props => props.variant === 'outlined' ? 'none' : "0 0 0 2px ".concat(_colors.default.lightGrey), props => props.variant === 'outlined' ? _colors.default.grey2 : 'transparent');
+const SearchIconWrapper = exports.SearchIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchIconWrapper",
+  componentId: "sc-dcxztv-2"
+})(["display:flex;align-items:center;justify-content:center;margin-right:12px;color:", ";flex-shrink:0;width:16px;height:16px;svg{width:100%;height:100%;}", ":focus-within &{color:", ";}"], _colors.default.grey2, SearchInputWrapper, _colors.default.black);
+const SearchInputField = exports.SearchInputField = _styledComponents.default.input.withConfig({
+  displayName: "SearchInputstyles__SearchInputField",
+  componentId: "sc-dcxztv-3"
+})(["flex:1;border:none;outline:none;background:transparent;font-size:14px;font-weight:400;line-height:18px;color:", ";width:100%;min-width:0;letter-spacing:0.6px;&::placeholder{color:", ";opacity:1;}&:disabled{cursor:not-allowed;opacity:0.6;}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}"], _colors.default.black, _colors.default.grey2);

package/dist/components/Input/Select.js

@@ -7,9 +7,10 @@ exports.default = exports.Select = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _creatable = _interopRequireDefault(require("react-select/creatable"));
 var _Input = require("./Input.styles");
 var _Select = require("./Select.styles");
-const _excluded = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight"];
+const _excluded = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight", "creatable", "formatCreateLabel"];
 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); }
@@ -59,7 +60,9 @@ const Select = props => {
       touched,
       value,
       disabled,
-      menuHeight
+      menuHeight,
+      creatable,
+      formatCreateLabel
     } = props,
     otherProps = _objectWithoutProperties(props, _excluded);
   const [labelUp, setLabelUp] = (0, _react.useState)(!!value);
@@ -72,7 +75,7 @@ const Select = props => {
       name,
       value
     });
-    if (search) {
+    if (search || creatable) {
       setHasFocus(true);
     }
   };
@@ -94,12 +97,46 @@ const Select = props => {
       setHasFocus(true);
     }, 1);
   };
+
+  // Choose component based on creatable prop
+  const SelectComponent = creatable ? _creatable.default : _reactSelect.default;
+
+  // Common styles for both components
+  const selectStyles = {
+    control: () => _Select.SelectControl,
+    menu: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+      marginTop: 0,
+      zIndex: 1000,
+      SelectMenu: _Select.SelectMenu
+    }),
+    option: (baseStyle, state) => _objectSpread({
+      fontWeight: state.isSelected || state.isFocused ? 'bold' : 'normal',
+      cursor: 'pointer'
+    }, _Select.SelectOption),
+    selectContainer: () => _Select.SelectContainer,
+    valueContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+      padding: 0
+    })
+  };
+
+  // Common components for both
+  const selectComponents = {
+    DropdownIndicator,
+    IndicatorSeparator: null,
+    MenuList: SelectMenuListWithScroll
+  };
+
+  // Get current value - for creatable, also check if value exists even if not in options
+  const currentValue = creatable ? (options === null || options === void 0 ? void 0 : options.find(option => option.value === value)) || (value ? {
+    value,
+    label: value
+  } : null) : options === null || options === void 0 ? void 0 : options.find(option => option.value === value);
   return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
     isUp: labelUp,
     active: hasFocus,
     error: error && touched,
     htmlFor: id
-  }, label), /*#__PURE__*/_react.default.createElement(_reactSelect.default, _extends({}, otherProps, {
+  }, label), /*#__PURE__*/_react.default.createElement(SelectComponent, _extends({}, otherProps, {
     id: id,
     name: name,
     options: options,
@@ -107,32 +144,14 @@ const Select = props => {
     onChange: onChange,
     onBlur: onBlur,
     onFocus: onFocus,
-    value: options === null || options === void 0 ? void 0 : options.find(option => option.value === value),
+    value: currentValue,
     placeholder: "",
-    isSearchable: search,
+    isSearchable: creatable || search,
     maxMenuHeight: menuHeight,
-    styles: {
-      control: () => _Select.SelectControl,
-      menu: (baseStyle, state) => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        marginTop: 0,
-        zIndex: 1000,
-        SelectMenu: _Select.SelectMenu
-      }),
-      option: (baseStyle, state) => _objectSpread({
-        fontWeight: state.isSelected || state.isFocused ? 'bold' : 'normal',
-        cursor: 'pointer'
-      }, _Select.SelectOption),
-      selectContainer: () => _Select.SelectContainer,
-      valueContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        padding: 0
-        //marginLeft: '-2px',
-      })
-    },
-    components: {
-      DropdownIndicator,
-      IndicatorSeparator: null,
-      MenuList: SelectMenuListWithScroll
-    }
+    styles: selectStyles,
+    components: selectComponents
+  }, creatable && {
+    formatCreateLabel: formatCreateLabel || (inputValue => "Create \"".concat(inputValue, "\""))
   })));
 };
 exports.Select = Select;
@@ -149,6 +168,8 @@ Select.propTypes = {
     label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
   })).isRequired,
   search: _propTypes.default.bool,
+  creatable: _propTypes.default.bool,
+  formatCreateLabel: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onBlur: _propTypes.default.func,
   onFocus: _propTypes.default.func
@@ -157,6 +178,8 @@ Select.defaultProps = {
   label: '',
   value: '',
   search: false,
+  creatable: false,
+  formatCreateLabel: null,
   error: false,
   touched: false,
   onChange: () => {},