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

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

@@ -1,217 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.InputLabeled = exports.InputFilled = exports.InputFillInverted = exports.InputEmpty = exports.AllStates = void 0;
-var _viewport = require("storybook/viewport");
-var _react = _interopRequireWildcard(require("react"));
-var _Input = require("./Input");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-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/Input',
-  component: _Input.Input,
-  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: {
-    type: {
-      type: 'string'
-    },
-    id: {
-      type: 'string',
-      required: true
-    },
-    name: {
-      type: 'string',
-      required: true
-    },
-    label: {
-      type: 'string',
-      defaultValue: ''
-    },
-    placeholder: {
-      type: 'string',
-      defaultValue: ''
-    },
-    value: {
-      type: 'string',
-      defaultValue: ''
-    },
-    error: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    touched: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    readOnly: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    inverted: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    dashboard: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    checkLabel: {
-      type: 'function'
-    },
-    onChange: {
-      action: 'change',
-      type: 'function'
-    },
-    onBlur: {
-      action: 'blur',
-      type: 'function'
-    },
-    onFocus: {
-      action: 'hasFocus',
-      type: 'function'
-    }
-  },
-  parameters: {
-    viewport: {
-      viewports: _viewport.INITIAL_VIEWPORTS,
-      defaultViewport: 'resetviewport'
-    }
-  }
-}; // Controlled wrapper for interactive stories
-const ControlledInput = props => {
-  const [value, setValue] = (0, _react.useState)(props.value || '');
-  return /*#__PURE__*/_react.default.createElement(_Input.Input, _extends({}, props, {
-    value: value,
-    onChange: e => {
-      var _props$onChange;
-      setValue(e.target.value);
-      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e);
-    }
-  }));
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(ControlledInput, args);
-
-//trying to integrate state:
-// const Template = args => {
-//   const [value, setValue] = useState(args.value ?? '')
-//   return (
-//         <Input
-//             {...args}
-//             onChange={(...params) => {
-//               args.onChange(...params)
-//               setValue(...params)
-//             }}
-//             value={value}
-//           />
-// }
-
-const InputLabeled = exports.InputLabeled = Template.bind({});
-InputLabeled.args = {
-  label: 'input description (label)'
-};
-InputLabeled.parameters = {
-  backgrounds: {
-    default: 'resetviewport'
-  }
-};
-const InputFilled = exports.InputFilled = Template.bind({});
-InputFilled.args = {
-  label: 'input description (label)',
-  value: 'your text (value)'
-};
-InputFilled.parameters = {
-  backgrounds: {
-    default: 'resetviewport'
-  }
-};
-const InputFillInverted = exports.InputFillInverted = Template.bind({});
-InputFillInverted.args = {
-  type: 'text',
-  label: 'input description (label) inverted',
-  value: 'your text (value) inverted',
-  inverted: true
-};
-InputFillInverted.parameters = {
-  backgrounds: {
-    default: 'grey'
-  }
-};
-const InputEmpty = exports.InputEmpty = Template.bind({});
-InputEmpty.args = {};
-InputEmpty.parameters = {
-  backgrounds: {
-    default: 'resetviewport'
-  }
-};
-
-// All states example
-const AllStates = () => {
-  const [value1, setValue1] = (0, _react.useState)('');
-  const [value2, setValue2] = (0, _react.useState)('Filled value');
-  const [value3, setValue3] = (0, _react.useState)('');
-  const [value4, setValue4] = (0, _react.useState)('Error text');
-  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 - Click to see blue label on focus"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    id: "empty",
-    name: "empty",
-    label: "Empty Input",
-    value: value1,
-    onChange: e => setValue1(e.target.value)
-  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '8px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "With value"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    id: "filled",
-    name: "filled",
-    label: "Filled Input",
-    value: value2,
-    onChange: e => setValue2(e.target.value)
-  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
-    style: {
-      marginBottom: '8px',
-      fontSize: '12px',
-      color: '#666'
-    }
-  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    id: "disabled",
-    name: "disabled",
-    label: "Disabled Input",
-    value: "Cannot edit",
-    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(_Input.Input, {
-    id: "error",
-    name: "error",
-    label: "Error Input",
-    value: value4,
-    onChange: e => setValue4(e.target.value),
-    error: true,
-    touched: true
-  })));
-};
-exports.AllStates = AllStates;

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

@@ -1,80 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PasswordStrength = exports.PasswordFilled = exports.InputPasswordEmpty = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _InputPassword = require("./InputPassword");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Inputs/Input Password',
-  component: _InputPassword.InputPassword,
-  argTypes: {
-    type: {
-      type: 'string'
-    },
-    id: {
-      type: 'string',
-      required: true
-    },
-    name: {
-      type: 'string',
-      required: true
-    },
-    label: {
-      type: 'string',
-      defaultValue: ''
-    },
-    value: {
-      type: 'string',
-      defaultValue: ''
-    },
-    error: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    touched: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    onChange: {
-      action: 'change',
-      type: 'function'
-    },
-    onBlur: {
-      action: 'blur',
-      type: 'function'
-    },
-    onFocus: {
-      action: 'hasFocus',
-      type: 'function'
-    },
-    info: {
-      type: 'string',
-      defaultValue: ''
-    },
-    showStrength: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-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(_InputPassword.InputPassword, args)));
-const PasswordFilled = exports.PasswordFilled = Template.bind({});
-PasswordFilled.args = {
-  label: 'input description (label) - PASSWORD',
-  value: 'your password (value)'
-};
-const PasswordStrength = exports.PasswordStrength = Template.bind({});
-PasswordStrength.args = {
-  label: 'input description (label) - PASSWORD',
-  value: 'your password (value)',
-  showStrength: true
-};
-const InputPasswordEmpty = exports.InputPasswordEmpty = Template.bind({});
-InputPasswordEmpty.args = {
-  label: 'input description (label) - PASSWORD'
-};

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

@@ -1,75 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.InputButton = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _InputWithButton = require("./InputWithButton");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _Button = require("../Button/Button.styles");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Inputs/Input With Button',
-  component: _InputWithButton.InputWithButton,
-  argTypes: {
-    type: {
-      type: 'string',
-      defaultValue: 'number'
-    },
-    id: {
-      type: 'string',
-      required: true
-    },
-    name: {
-      type: 'string',
-      required: true
-    },
-    label: {
-      type: 'string',
-      defaultValue: ''
-    },
-    value: {
-      type: 'string',
-      defaultValue: ''
-    },
-    error: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    touched: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    onChange: {
-      action: 'change',
-      type: 'function'
-    },
-    onBlur: {
-      action: 'blur',
-      type: 'function'
-    },
-    onFocus: {
-      action: 'hasFocus',
-      type: 'function'
-    }
-  }
-};
-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(_InputWithButton.InputWithButton, args, /*#__PURE__*/_react.default.createElement(_Button.Button, null, "apply"))));
-const InputButton = exports.InputButton = Template.bind({});
-InputButton.args = {
-  placeholder: 'Page size',
-  onChange: () => {
-    console.log('changed');
-  }
-  //label: 'test',
-  //value: 'test',
-};
-
-// export const PasswordStrength = Template.bind({})
-// PasswordStrength.args = {
-//   label: 'input description (label) - PASSWORD',
-//   value: 'your password (value)',
-//   showStrength: true,
-// }

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

@@ -1,264 +0,0 @@
-"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/OtpInput.stories.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.OtpInputPlain = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _OtpInput = require("./OtpInput");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Inputs/OtpInput',
-  component: _OtpInput.OtpInput,
-  argTypes: {
-    inputType: {
-      type: 'string'
-    },
-    placeholder: {
-      type: 'string',
-      defaultValue: ''
-    },
-    value: {
-      type: 'string',
-      defaultValue: ''
-    },
-    numInputs: {
-      type: 'number',
-      defaultValue: 4
-    },
-    shouldAutoFocus: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    onChange: {
-      action: 'change',
-      type: 'function'
-    },
-    onPaste: {
-      type: 'function'
-    }
-    // renderSeparator: { type: 'component' },
-  }
-  //   parameters: {
-  //     viewport: {
-  //       viewports: INITIAL_VIEWPORTS,
-  //       defaultViewport: 'resetviewport',
-  //     },
-  //   },
-};
-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(_OtpInput.OtpInput, args)));
-const OtpInputPlain = exports.OtpInputPlain = Template.bind({});
-OtpInputPlain.args = {
-  onChange: e => console.log(e),
-  value: '',
-  placeholder: '1234'
-};