react-jupiter 5.12.0 → 6.0.0-beta.1

package/dist/components/form-v7/captcha/index.js

@@ -0,0 +1,101 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _styledComponents = require("styled-components");
+var _theme = _interopRequireDefault(require("../theme"));
+var _errorMsg = _interopRequireDefault(require("../errorMsg"));
+var _icon = _interopRequireDefault(require("../../icon"));
+var _button = _interopRequireDefault(require("../../button"));
+var _label = _interopRequireDefault(require("../label"));
+var _index = require("../text-input/index.style");
+var _display = _interopRequireDefault(require("../../display"));
+var _index2 = require("../index.style");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+
+
+
+function Captcha(_ref)
+
+
+
+
+
+
+
+
+{let { classNames = '', loading = false, number = null, htmlElementName, label, imageUrl, control, fetchData } = _ref;
+  const persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
+  const arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
+
+  const fixNumbers = (str) => {
+    let result = str;
+    if (typeof str === 'string') {
+      for (let i = 0; i < 10; i++) {
+        result = result.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
+      }
+    }
+    return result;
+  };
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+    _react.default.createElement(_index2.Fieldset, null, /*#__PURE__*/
+    _react.default.createElement("div", { className: classNames }, /*#__PURE__*/
+    _react.default.createElement(_reactHookForm.Controller, {
+      name: htmlElementName,
+      control: control,
+      rules: {
+        required: 'این فیلد اجباری است',
+        pattern: {
+          value: /^[۰۱۲۳۴۵۶۷۸۹0-9]{4}$/,
+          message: 'لطفا فقط عدد وارد کنید.'
+        }
+      },
+      defaultValue: "",
+      render: (_ref2) => {let { field: { onChange, value }, fieldState } = _ref2;return (/*#__PURE__*/
+          _react.default.createElement(_display.default, { display: "block" }, /*#__PURE__*/
+          _react.default.createElement(_label.default, { htmlFor: htmlElementName, label: label, number: number, required: true }), /*#__PURE__*/
+          _react.default.createElement(_display.default, { display: "flex" }, /*#__PURE__*/
+          _react.default.createElement(_display.default, { display: "flex", width: "100%" }, /*#__PURE__*/
+          _react.default.createElement(_index.Input, {
+            id: `${'text'}-${htmlElementName.split(' ').join('')}`,
+            name: htmlElementName,
+            type: "text",
+            rtl: false,
+            value: value,
+            onChange: (e) => {
+              onChange(fixNumbers(e.target.value));
+            },
+            className: "captcha-input" }
+          ), /*#__PURE__*/
+          _react.default.createElement("img", {
+            width: "auto",
+            height: "40px",
+            src: imageUrl,
+            alt: "captcha-img",
+            loading: "lazy",
+            "data-test": "captcha-img" }
+          )
+          ), /*#__PURE__*/
+          _react.default.createElement(_button.default, { type: "button", size: "sm", styleType: "tertiary", onClick: fetchData, disabled: loading }, /*#__PURE__*/
+          _react.default.createElement(_icon.default, { name: loading ? 'loading' : 'refresh' })
+          )
+          ), /*#__PURE__*/
+          _react.default.createElement(_errorMsg.default, { errorMessage: fieldState && fieldState.error?.message })
+          ));} }
+
+    )
+    )
+    )
+    ));
+
+}var _default = exports.default =
+
+Captcha;

package/dist/components/form-v7/captcha/index.stories.js

@@ -0,0 +1,60 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithError = exports.Default = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+var _reactHookForm = require("react-hook-form");
+var _index = _interopRequireDefault(require("./index"));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);}var _default = exports.default =
+
+{
+  title: 'Form-v7/Captcha',
+  component: _index.default,
+
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'کد تصویری'
+    },
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'captcha'
+    },
+    imageUrl: {
+      control: 'text',
+      defaultValue: 'https://static.evand.net/captcha/0bb5a9832be7b86a2a0a646ae2fd1649.jpg'
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'لطفا کد تصویری را وارد کنید'
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: true
+    }
+  }
+};
+
+const Template = (args) => {
+  const { register, control } = (0, _reactHookForm.useForm)();
+  return (/*#__PURE__*/
+    _react.default.createElement(_index.default, _extends({},
+    args, {
+      register: register,
+      control: control,
+      handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function'),
+      fetchData: () => console.log('fetching') })
+    ));
+
+};
+
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  label: 'کد تصویری',
+  htmlElementName: 'captcha',
+  imageUrl: 'https://static.evand.net/captcha/0bb5a9832be7b86a2a0a646ae2fd1649.jpg',
+  required: true
+};
+
+const WithError = exports.WithError = Template.bind({});
+WithError.args = {
+  ...Default.args,
+  errorMessage: 'کد تصویری نامعتبر است'
+};

package/dist/components/form-v7/captcha/index.style.js

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.Loading = exports.InputConiatiner = exports.Container = exports.CaptchaBoxContainer = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = _interopRequireDefault(require("../theme"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const Container = exports.Container = _styledComponents.default.div`
+  flex-shrink: 0;
+  margin: 6px 6px 0 0;
+
+  & .hide {
+    display: none;
+  }
+`;
+
+const Loading = exports.Loading = _styledComponents.default.div`
+  height: 32px;
+  width: 120px;
+  background: ${_theme.default.disabled.color};
+  animation-name: sparkle;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+
+    @keyframes sparkle {
+      0% {opacity: 0;}
+      50% {opacity: 1;}
+      70% {opacity: 1;}
+      100% {opacity: 0;}
+    }
+  }
+`;
+
+const CaptchaBoxContainer = exports.CaptchaBoxContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+`;
+
+const InputConiatiner = exports.InputConiatiner = _styledComponents.default.div`
+  flex-grow: 1;
+`;

package/dist/components/form-v7/captcha/index.test.js

@@ -0,0 +1,31 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _test = _interopRequireDefault(require("../../utils/test"));
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+describe('captcha', () => {
+  it('render captcha box', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { src: "wrong-src", handleRetryCaptcha: () => {} }));
+    const chaptchaBox = (0, _test.default)(component, 'captcha-box');
+
+    expect(chaptchaBox.length).toBe(1);
+  });
+  it('render captcha input', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { src: "wrong-src", handleRetryCaptcha: () => {} }));
+    const chaptchaInput = (0, _test.default)(component, 'captcha-input');
+
+    expect(chaptchaInput.length).toBe(1);
+  });
+  it('render captcha img', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { src: "wrong-src", handleRetryCaptcha: () => {} }));
+    const chaptchaImg = (0, _test.default)(component, 'captcha-img');
+
+    expect(chaptchaImg.length).toBe(1);
+  });
+  it('render retry button', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { src: "wrong-src", handleRetryCaptcha: () => {} }));
+    const chaptchaRetry = (0, _test.default)(component, 'captcha-retry');
+
+    expect(chaptchaRetry.length).toBe(1);
+  });
+});

package/dist/components/form-v7/checkbox/checkbox-option.js

@@ -0,0 +1,44 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactHookForm = require("react-hook-form");
+var _styledComponents = require("styled-components");
+var _theme = _interopRequireDefault(require("../theme"));
+var _typography = require("../../typography");
+var _index = require("./index.style");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);}
+
+
+
+
+
+
+
+
+
+const CheckboxOption = (_ref) =>
+
+{let { label, value, isDisabled = false, isChecked = false, groupName, register, handleOnchange } = _ref;
+  const itemId = `${groupName}-${value}`;
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+    _react.default.createElement("label", { htmlFor: itemId }, /*#__PURE__*/
+    _react.default.createElement(_index.Input, _extends({
+      type: "checkbox",
+      id: itemId,
+      name: groupName,
+      value: value,
+      defaultChecked: isChecked },
+    register(groupName, {
+      disabled: isDisabled,
+      onChange: handleOnchange
+    }))
+    ), /*#__PURE__*/
+    _react.default.createElement(_typography.Text, { size: 14 },
+    label
+    )
+    )
+    ));
+
+};var _default = exports.default =
+
+CheckboxOption;

package/dist/components/form-v7/checkbox/checkbox.js

@@ -0,0 +1,70 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = require("styled-components");
+var _reactHookForm = require("react-hook-form");
+var _globalStyle = _interopRequireDefault(require("../../globalStyle"));
+var _errorMsg = _interopRequireDefault(require("../errorMsg"));
+var _index = require("./index.style");
+var _index2 = require("../index.style");
+var _theme = _interopRequireDefault(require("../theme"));
+var _label = _interopRequireDefault(require("../label"));
+var _typography = require("../../typography");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+
+
+
+
+const Checkbox = (_ref) =>
+
+
+
+
+
+
+
+
+
+
+{let { groupName = 'radio-element', label = '', handleChange = () => {}, isDisabled = false, type = 'horizontal', required = false, register, number, control, children } = _ref;
+  const radioElements = _react.default.Children.toArray(children);
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+    _react.default.createElement(_index2.Fieldset, { onChange: handleChange }, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+    _react.default.createElement(_label.default, { label: label, number: number, required: required }), /*#__PURE__*/
+    _react.default.createElement(_reactHookForm.Controller, {
+      name: groupName,
+      control: control,
+      rules: { required: required ? 'این فیلد اجباری است' : false },
+      render: (_ref2) => {let { fieldState } = _ref2;return (/*#__PURE__*/
+          _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+          _react.default.createElement(_index.CheckboxWrapper, { type: type },
+          radioElements.map(
+            (radioElement) =>
+            isDisabled ?
+            _react.default.cloneElement(radioElement, { groupName, isDisabled, register }) :
+
+            _react.default.cloneElement(radioElement, { groupName, register })
+
+
+          )
+          ), /*#__PURE__*/
+          _react.default.createElement(_errorMsg.default, { errorMessage: fieldState && fieldState.error?.message })
+          ));} }
+
+    )
+    )
+    ));
+
+};var _default = exports.default =
+
+Checkbox;

package/dist/components/form-v7/checkbox/index.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () {return _checkbox.default;} });Object.defineProperty(exports, "CheckboxOption", { enumerable: true, get: function () {return _checkboxOption.default;} });exports.default = void 0;var _checkbox = _interopRequireDefault(require("./checkbox"));
+var _checkboxOption = _interopRequireDefault(require("./checkbox-option"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+
+
+
+{
+  Checkbox: _checkbox.default,
+  CheckboxOption: _checkboxOption.default
+};

package/dist/components/form-v7/checkbox/index.stories.js

@@ -0,0 +1,113 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithError = exports.VerticalLayout = exports.Minimal = exports.FullOptions = exports.Disabled = exports.CustomOption = void 0;var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+
+var _addonActions = require("@storybook/addon-actions");
+var _checkbox = _interopRequireDefault(require("./checkbox"));
+var _checkboxOption = _interopRequireDefault(require("./checkbox-option"));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);}var _default = exports.default =
+
+{
+  title: 'Form-V7/Checkbox',
+  component: _checkbox.default,
+
+  argTypes: {
+    groupName: {
+      control: 'text',
+      defaultValue: 'degree'
+    },
+    label: {
+      control: 'text',
+      defaultValue: 'در کدام موضوع ها توانایی دارید'
+    },
+    number: {
+      control: 'number',
+      defaultValue: 4
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    type: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      defaultValue: 'horizontal'
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'ارور زیبا'
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: true
+    }
+  }
+};
+
+const Template = (args) => {
+  const { register, control } = (0, _reactHookForm.useForm)();
+  return (/*#__PURE__*/
+    _react.default.createElement(_checkbox.default, _extends({}, args, { register: register, control: control }), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "100", label: "\u0648\u0631\u0632\u0634\u06CC" }), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "234", label: "\u0639\u0644\u0645\u06CC" }), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "300", label: "\u0645\u0630\u0647\u0628\u06CC" }), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "400", label: "\u0641\u0631\u0647\u0646\u06AF\u06CC" }), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "500", label: "\u0647\u0646\u0631\u06CC" })
+    ));
+
+};
+
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {
+  groupName: 'degree',
+  required: true
+};
+
+const FullOptions = exports.FullOptions = Template.bind({});
+FullOptions.args = {
+  groupName: 'degree',
+  label: 'در کدام موضوع ها توانایی دارید',
+  number: 4,
+  handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function'),
+  isDisabled: false,
+  type: 'horizontal',
+  errorMessage: 'ارور زیبا',
+  required: true
+};
+
+const VerticalLayout = exports.VerticalLayout = Template.bind({});
+VerticalLayout.args = {
+  ...FullOptions.args,
+  type: 'vertical'
+};
+
+const Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  isDisabled: true
+};
+
+const WithError = exports.WithError = Template.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا حداقل یک گزینه را انتخاب کنید'
+};
+
+const CheckboxOptionTemplate = (args) => {
+  const { register } = (0, _reactHookForm.useForm)();
+  return (/*#__PURE__*/
+    _react.default.createElement(_checkbox.default, { groupName: "degree", required: true, label: "\u062F\u0631 \u06A9\u062F\u0627\u0645 \u0645\u0648\u0636\u0648\u0639 \u0647\u0627 \u062A\u0648\u0627\u0646\u0627\u06CC\u06CC \u062F\u0627\u0631\u06CC\u062F", register: register }, /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, _extends({}, args, { register: register })), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "200", label: "\u0639\u0644\u0645\u06CC" }), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "300", label: "\u0645\u0630\u0647\u0628\u06CC" }), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "400", label: "\u0641\u0631\u0647\u0646\u06AF\u06CC" }), /*#__PURE__*/
+    _react.default.createElement(_checkboxOption.default, { value: "500", label: "\u0647\u0646\u0631\u06CC" })
+    ));
+
+};
+
+const CustomOption = exports.CustomOption = CheckboxOptionTemplate.bind({});
+CustomOption.args = {
+  label: 'ورزشی',
+  value: '100',
+  isDisabled: false,
+  isChecked: false
+};

package/dist/components/form-v7/checkbox/index.style.js

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.Input = exports.Fieldset = exports.CheckboxWrapper = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const Fieldset = exports.Fieldset = _styledComponents.default.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+`;
+
+const CheckboxWrapper = exports.CheckboxWrapper = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  ${(_ref) => {let { type } = _ref;return type === 'vertical' ? 'flex-direction: column;' : '';}}
+`;
+
+const Input = exports.Input = _styledComponents.default.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  width: 16px;
+  height: 16px;
+
+  border: 1px solid ${(_ref2) => {let { disabled, theme } = _ref2;return disabled ? theme.disabled.color : theme.borderColor.normal;}};
+  background: ${(_ref3) => {let { disabled, theme } = _ref3;return disabled ? theme.disabled.background : 'white';}};
+  cursor: ${(_ref4) => {let { disabled } = _ref4;return disabled ? 'not-allowed' : 'pointer';}};
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 10px;
+  
+  &:hover {
+    border-color: ${(_ref5) => {let { disabled, theme } = _ref5;return disabled ? theme.disabled.color : theme.borderColor.hover;}};
+  }
+
+  &:checked {
+    border-color: ${(_ref6) => {let { disabled, theme } = _ref6;return disabled ? theme.disabled.color : theme.borderColor.focus;}};
+    
+    &:after {
+      border-color: ${(_ref7) => {let { disabled, theme } = _ref7;return disabled ? theme.disabled.color : theme.borderColor.focus;}};
+    }
+  }
+
+  &:after {
+    content: '';
+    display: block;
+
+    height: 8px;
+    width: 5px;
+    position: absolute;
+    right: 5px;
+    top: 2px;
+
+    transition: 0.2s all linear;
+
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border-bottom: 2px solid transparent;
+    border-right: 2px solid transparent;
+  }
+`;

package/dist/components/form-v7/dropdown/index.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "Select", { enumerable: true, get: function () {return _select.default;} });Object.defineProperty(exports, "SelectOption", { enumerable: true, get: function () {return _option.default;} });exports.default = void 0;var _select = _interopRequireDefault(require("./select"));
+var _option = _interopRequireDefault(require("./option"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+
+
+
+{
+  Select: _select.default,
+  SelectOption: _option.default
+};

package/dist/components/form-v7/dropdown/index.stories.js

@@ -0,0 +1,130 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithPlaceholderAndOptions = exports.WithPlaceholder = exports.WithError = exports.Minimal = exports.FullOptions = exports.Disabled = exports.CustomOption = void 0;var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+
+var _addonActions = require("@storybook/addon-actions");
+var _select = _interopRequireDefault(require("./select"));
+var _option = _interopRequireDefault(require("./option"));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);}var _default = exports.default =
+
+{
+  title: 'Form-v7/Dropdown',
+  component: _select.default,
+
+  argTypes: {
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'استان'
+    },
+    placeholder: {
+      control: 'text',
+      defaultValue: '__استان مورد نظر خود را انتخاب کنید__'
+    },
+    defaultValue: {
+      control: 'text',
+      defaultValue: '30'
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    label: {
+      control: 'text',
+      defaultValue: 'محل برگزاری رویداد'
+    },
+    number: {
+      control: 'number',
+      defaultValue: 3
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'ارور زیبا'
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: true
+    }
+  }
+};
+
+const Template = (args) => {
+  const { register, control } = (0, _reactHookForm.useForm)();
+  return (/*#__PURE__*/
+    _react.default.createElement(_select.default, _extends({}, args, { register: register, control: control }), /*#__PURE__*/
+    _react.default.createElement(_option.default, { value: "20", label: "\u06A9\u0631\u062C" }), /*#__PURE__*/
+    _react.default.createElement(_option.default, { value: "30", label: "\u062A\u0647\u0631\u0627\u0646" }), /*#__PURE__*/
+    _react.default.createElement(_option.default, { value: "40", label: "\u0641\u0645" })
+    ));
+
+};
+
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {
+  htmlElementName: 'select',
+  placeholder: 'یک گزینه را انتخاب کنید',
+  defaultValue: 'question 2',
+  label: 'select box',
+  number: 1,
+  required: false
+};
+
+const WithPlaceholder = exports.WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  htmlElementName: 'استان',
+  placeholder: '__استان مورد نظر خود را انتخاب کنید__',
+  handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function')
+};
+
+const FullOptions = exports.FullOptions = Template.bind({});
+FullOptions.args = {
+  htmlElementName: 'استان',
+  defaultValue: '30',
+  handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function'),
+  isDisabled: false,
+  label: 'محل برگزاری رویداد',
+  number: 3,
+  errorMessage: 'ارور زیبا',
+  required: true
+};
+
+const WithPlaceholderAndOptions = exports.WithPlaceholderAndOptions = Template.bind({});
+WithPlaceholderAndOptions.args = {
+  ...FullOptions.args,
+  placeholder: '__استان مورد نظر خود را انتخاب کنید__'
+};
+
+const Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  isDisabled: true
+};
+
+const WithError = exports.WithError = Template.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا یک گزینه را انتخاب کنید'
+};
+
+const SelectOptionTemplate = (args) => {
+  const { register, control } = (0, _reactHookForm.useForm)();
+  return (/*#__PURE__*/
+    _react.default.createElement(_select.default, {
+      htmlElementName: "\u0627\u0633\u062A\u0627\u0646",
+      defaultValue: "30",
+      handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function'),
+      isDisabled: false,
+      register: register,
+      required: true,
+      control: control }, /*#__PURE__*/
+
+    _react.default.createElement(_option.default, args), /*#__PURE__*/
+    _react.default.createElement(_option.default, { value: "30", label: "\u062A\u0647\u0631\u0627\u0646" }), /*#__PURE__*/
+    _react.default.createElement(_option.default, { value: "40", label: "\u0641\u0645" })
+    ));
+
+};
+
+const CustomOption = exports.CustomOption = SelectOptionTemplate.bind({});
+CustomOption.args = {
+  value: '20',
+  label: 'کرج',
+  isDisabled: false
+};