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

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

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RangeInputDefault = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _RangeInput = require("./RangeInput");
-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/Range Input',
-  component: _RangeInput.RangeInput,
-  argTypes: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    name: {
-      type: 'string',
-      required: true
-    },
-    disabled: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    max: {
-      type: 'number',
-      defaultValue: 100
-    },
-    min: {
-      type: 'number',
-      defaultValue: 0
-    },
-    step: {
-      type: 'number',
-      defaultValue: 1
-    },
-    onChange: {
-      action: 'change',
-      type: 'function'
-    },
-    value: {
-      type: 'number',
-      required: true
-    }
-  }
-};
-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(_RangeInput.RangeInput, args)));
-const RangeInputDefault = exports.RangeInputDefault = Template.bind({});
-RangeInputDefault.args = {
-  value: 80
-};
-
-//doublecheck:
-
-// any other functions to take into args?

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

@@ -1,366 +0,0 @@
-"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;