@stokr/components-library 2.3.65-beta.7 → 2.3.65-beta.8

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SelectOptionStrings = exports.SelectOptionNodes = exports.SelectEmpty = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.SelectOptionStrings = exports.SelectOptionNodes = exports.SelectEmpty = exports.Searchable = exports.NotSearchable = exports.CreatableCustomLabel = exports.Creatable = exports.AllStates = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _Select = require("./Select");
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
 var _Medium = require("../icons/Medium");
@@ -12,9 +12,12 @@ var _Share = require("../icons/Share");
 var _Number = require("../Number/Number");
 var _global = _interopRequireDefault(require("../../styles/global"));
 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/Select',
   component: _Select.Select,
+  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(Story, null)))],
   argTypes: {
     id: {
       type: 'string',
@@ -55,7 +58,6 @@ var _default = exports.default = {
       }],
       required: true
     },
-    // { required: true },
     search: {
       type: 'boolean',
       defaultValue: false
@@ -79,8 +81,21 @@ var _default = exports.default = {
       type: 'function'
     }
   }
+}; // Controlled wrapper for interactive stories
+const ControlledSelect = props => {
+  const [value, setValue] = (0, _react.useState)(props.value || '');
+  return /*#__PURE__*/_react.default.createElement(_Select.Select, _extends({}, props, {
+    value: value,
+    onChange: _ref => {
+      let {
+        value: newValue
+      } = _ref;
+      setValue(newValue);
+      console.log('Selected:', newValue);
+    }
+  }));
 };
-const Template = args => /*#__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(_Select.Select, args)));
+const Template = args => /*#__PURE__*/_react.default.createElement(ControlledSelect, args);
 const SelectOptionStrings = exports.SelectOptionStrings = Template.bind({});
 SelectOptionStrings.args = {
   label: 'click LABEL here for options',
@@ -134,6 +149,330 @@ SelectOptionNodes.args = {
 const SelectEmpty = exports.SelectEmpty = Template.bind({});
 SelectEmpty.args = {};
 
-//doublecheck:
+// Searchable Select - type to filter options
+const Searchable = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  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'
+  }, {
+    key: 'nl',
+    value: 'nl',
+    label: 'Netherlands'
+  }, {
+    key: 'ch',
+    value: 'ch',
+    label: 'Switzerland'
+  }, {
+    key: 'at',
+    value: 'at',
+    label: 'Austria'
+  }, {
+    key: 'be',
+    value: 'be',
+    label: 'Belgium'
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '16px',
+      fontSize: '14px'
+    }
+  }, "Type to filter options (try typing \"United\" or \"Ger\")"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    id: "country",
+    name: "country",
+    label: "Select Country",
+    options: countryOptions,
+    value: value,
+    search: true,
+    onChange: _ref2 => {
+      let {
+        value: newValue
+      } = _ref2;
+      return setValue(newValue);
+    }
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Selected: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(none)')));
+};
+
+// Not Searchable (default)
+exports.Searchable = Searchable;
+const NotSearchable = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  const options = [{
+    key: 'opt1',
+    value: 'option1',
+    label: 'Option 1'
+  }, {
+    key: 'opt2',
+    value: 'option2',
+    label: 'Option 2'
+  }, {
+    key: 'opt3',
+    value: 'option3',
+    label: 'Option 3'
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '16px',
+      fontSize: '14px'
+    }
+  }, "Click to open, no typing (search=false)"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    id: "basic",
+    name: "basic",
+    label: "Select Option",
+    options: options,
+    value: value,
+    search: false,
+    onChange: _ref3 => {
+      let {
+        value: newValue
+      } = _ref3;
+      return setValue(newValue);
+    }
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Selected: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(none)')));
+};
 
-//why is value not showing? (it does move the label up) (label down on blur, even if field is filled)
+// All States
+exports.NotSearchable = NotSearchable;
+const AllStates = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('de');
+  const [value3, setValue3] = (0, _react.useState)('');
+  const options = [{
+    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'
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '32px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Empty with search"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    id: "empty",
+    name: "empty",
+    label: "Country",
+    options: options,
+    value: value1,
+    search: true,
+    onChange: _ref4 => {
+      let {
+        value
+      } = _ref4;
+      return setValue1(value);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Pre-selected value"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    id: "preselected",
+    name: "preselected",
+    label: "Country",
+    options: options,
+    value: value2,
+    search: true,
+    onChange: _ref5 => {
+      let {
+        value
+      } = _ref5;
+      return setValue2(value);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    id: "disabled",
+    name: "disabled",
+    label: "Country",
+    options: options,
+    value: "uk",
+    disabled: true,
+    onChange: () => {}
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Error state"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    id: "error",
+    name: "error",
+    label: "Country",
+    options: options,
+    value: value3,
+    error: true,
+    touched: true,
+    onChange: _ref6 => {
+      let {
+        value
+      } = _ref6;
+      return setValue3(value);
+    }
+  })));
+};
+
+// Creatable - type to add custom options
+exports.AllStates = AllStates;
+const Creatable = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  const [options, setOptions] = (0, _react.useState)([{
+    key: 'react',
+    value: 'react',
+    label: 'React'
+  }, {
+    key: 'vue',
+    value: 'vue',
+    label: 'Vue'
+  }, {
+    key: 'angular',
+    value: 'angular',
+    label: 'Angular'
+  }, {
+    key: 'svelte',
+    value: 'svelte',
+    label: 'Svelte'
+  }]);
+  const handleChange = _ref7 => {
+    let {
+      value: newValue
+    } = _ref7;
+    setValue(newValue);
+    // Add new option to the list if it doesn't exist
+    if (!options.find(opt => opt.value === newValue)) {
+      setOptions([...options, {
+        key: newValue,
+        value: newValue,
+        label: newValue
+      }]);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '16px',
+      fontSize: '14px'
+    }
+  }, "Type to search or create a new option (try typing \"Next.js\")"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    id: "framework",
+    name: "framework",
+    label: "Framework",
+    options: options,
+    value: value,
+    creatable: true,
+    onChange: handleChange
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Selected: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(none)')), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginTop: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Options: ", options.map(o => o.label).join(', ')));
+};
+
+// Creatable with custom label
+exports.Creatable = Creatable;
+const CreatableCustomLabel = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  const tagOptions = [{
+    key: 'bug',
+    value: 'bug',
+    label: 'Bug'
+  }, {
+    key: 'feature',
+    value: 'feature',
+    label: 'Feature'
+  }, {
+    key: 'docs',
+    value: 'docs',
+    label: 'Documentation'
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '16px',
+      fontSize: '14px'
+    }
+  }, "Custom \"create\" label format"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    id: "tag",
+    name: "tag",
+    label: "Add Tag",
+    options: tagOptions,
+    value: value,
+    creatable: true,
+    formatCreateLabel: inputValue => "+ Add new tag: ".concat(inputValue),
+    onChange: _ref8 => {
+      let {
+        value: newValue
+      } = _ref8;
+      return setValue(newValue);
+    }
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Selected: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(none)')));
+};
+exports.CreatableCustomLabel = CreatableCustomLabel;

package/dist/components/ProfileBox/ProfileBox.js

@@ -29,7 +29,8 @@ const ProfileBox = _ref => {
   return /*#__PURE__*/_react.default.createElement(_ProfileBox.Container, null, /*#__PURE__*/_react.default.createElement(_ProfileBox.ImageWrapper, null, /*#__PURE__*/_react.default.createElement(_Background.default, {
     src: pictureSrc
   })), /*#__PURE__*/_react.default.createElement(_ProfileBox.EditButton, {
-    onClick: handleEdit
+    onClick: handleEdit,
+    "data-cy": "edit-button-profile-box"
   }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_ProfileBox.Name, {
     style: _objectSpread(_objectSpread({}, lineBreaker), nameStyle)
   }, name, withEditButton && /*#__PURE__*/_react.default.createElement(_ProfileBox.EditIcon, null)))));

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Snackbar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Snackbar = require("./Snackbar.styles");
+var _crossIcon = require("../../static/images/cross-icon.svg");
+var _warningFilled = require("../../static/images/warning-filled.svg");
+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); } // Import existing SVG icons
+// Info icon - circled "i" (not available in library, matching design)
+const InfoIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10",
+  stroke: "currentColor",
+  strokeWidth: "2"
+}), /*#__PURE__*/_react.default.createElement("line", {
+  x1: "12",
+  y1: "16",
+  x2: "12",
+  y2: "12",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round"
+}), /*#__PURE__*/_react.default.createElement("circle", {
+  cx: "12",
+  cy: "8",
+  r: "1",
+  fill: "currentColor"
+}));
+
+// Error icon - circled "!" (not available in library, matching design)
+const ErrorIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10",
+  stroke: "currentColor",
+  strokeWidth: "2"
+}), /*#__PURE__*/_react.default.createElement("line", {
+  x1: "12",
+  y1: "8",
+  x2: "12",
+  y2: "12",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round"
+}), /*#__PURE__*/_react.default.createElement("circle", {
+  cx: "12",
+  cy: "16",
+  r: "1",
+  fill: "currentColor"
+}));
+
+// Success icon wrapper - adds circle around check icon
+const SuccessIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10",
+  stroke: "currentColor",
+  strokeWidth: "2"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "M8 12L10.5 14.5L16 9",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+const defaultIcons = {
+  info: /*#__PURE__*/_react.default.createElement(InfoIcon, null),
+  error: /*#__PURE__*/_react.default.createElement(ErrorIcon, null),
+  success: /*#__PURE__*/_react.default.createElement(SuccessIcon, null),
+  warning: /*#__PURE__*/_react.default.createElement(_warningFilled.ReactComponent, null)
+};
+
+/**
+ * Individual Snackbar item component
+ */
+const SnackbarItem = _ref => {
+  let {
+    id,
+    message,
+    variant = 'info',
+    icon,
+    onClick,
+    onClose,
+    duration = 5000
+  } = _ref;
+  const [isExiting, setIsExiting] = (0, _react.useState)(false);
+  const handleClose = (0, _react.useCallback)(() => {
+    setIsExiting(true);
+    setTimeout(() => {
+      onClose(id);
+    }, 300); // Match animation duration
+  }, [id, onClose]);
+  (0, _react.useEffect)(() => {
+    if (duration === 'permanent' || duration === 0) return;
+    const timer = setTimeout(() => {
+      handleClose();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, handleClose]);
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const displayIcon = icon !== undefined ? icon : defaultIcons[variant];
+  return /*#__PURE__*/_react.default.createElement(_Snackbar.SnackbarWrapper, {
+    $variant: variant,
+    $isExiting: isExiting,
+    $hasClick: !!onClick,
+    onClick: onClick ? handleClick : undefined
+  }, displayIcon && /*#__PURE__*/_react.default.createElement(_Snackbar.IconWrapper, {
+    $variant: variant
+  }, displayIcon), /*#__PURE__*/_react.default.createElement(_Snackbar.Message, null, message), /*#__PURE__*/_react.default.createElement(_Snackbar.CloseButton, {
+    onClick: e => {
+      e.stopPropagation();
+      handleClose();
+    },
+    "aria-label": "Close"
+  }, /*#__PURE__*/_react.default.createElement(_crossIcon.ReactComponent, null)));
+};
+SnackbarItem.propTypes = {
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  message: _propTypes.default.node.isRequired,
+  variant: _propTypes.default.oneOf(['info', 'error', 'success', 'warning']),
+  icon: _propTypes.default.node,
+  onClick: _propTypes.default.func,
+  onClose: _propTypes.default.func.isRequired,
+  duration: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['permanent'])])
+};
+
+/**
+ * Snackbar container component
+ * Can render to a specific container or to document.body
+ */
+const Snackbar = _ref2 => {
+  let {
+    snackbars = [],
+    onClose,
+    position = 'top-right',
+    container = null
+  } = _ref2;
+  if (snackbars.length === 0) return null;
+  const content = /*#__PURE__*/_react.default.createElement(_Snackbar.SnackbarContainer, {
+    $position: position,
+    $isContained: !!container
+  }, snackbars.map(snackbar => /*#__PURE__*/_react.default.createElement(SnackbarItem, _extends({
+    key: snackbar.id
+  }, snackbar, {
+    onClose: onClose
+  }))));
+
+  // If container is provided, render inside it (for contained snackbars)
+  // Otherwise, render to document.body via portal
+  if (container) {
+    return /*#__PURE__*/(0, _reactDom.createPortal)(content, container);
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)(content, document.body);
+};
+exports.Snackbar = Snackbar;
+Snackbar.propTypes = {
+  snackbars: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    message: _propTypes.default.node.isRequired,
+    variant: _propTypes.default.oneOf(['info', 'error', 'success', 'warning']),
+    icon: _propTypes.default.node,
+    onClick: _propTypes.default.func,
+    duration: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['permanent'])])
+  })),
+  onClose: _propTypes.default.func.isRequired,
+  position: _propTypes.default.oneOf(['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center']),
+  container: _propTypes.default.instanceOf(Element)
+};
+var _default = exports.default = Snackbar;