react-jupiter 5.12.0 → 6.0.0-beta.10

package/form-v7/checkbox/checkbox.js

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_styledComponents=require("styled-components"),_reactHookForm=require("react-hook-form"),_globalStyle=_interopRequireDefault(require("../../globalStyle")),_errorMsg=_interopRequireDefault(require("../errorMsg")),_index=require("./index.style"),_index2=require("../index.style"),_theme=_interopRequireDefault(require("../theme")),_label=_interopRequireDefault(require("../label"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_reactHookForm=require("react-hook-form"),_globalStyle=_interopRequireDefault(require("../../globalStyle")),_errorMsg=_interopRequireDefault(require("../errorMsg")),_index=require("./index.style"),_index2=require("../index.style"),_theme=_interopRequireDefault(require("../theme")),_label=_interopRequireDefault(require("../label")),_typography=require("../../typography");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
+
+
 
 
 
@@ -34,7 +36,7 @@ const Checkbox=(a)=>
 {let{groupName:f="radio-element",label:g="",handleChange:h=()=>{},isDisabled:i=!1,type:j="horizontal",required:k=!1,register:b,number:c,control:d,children:e}=a;
 const l=_react.default.Children.toArray(e);
 
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_styledComponents.ThemeProvider,{theme:_theme.default},/*#__PURE__*/
 _react.default.createElement(_index2.Fieldset,{onChange:h},/*#__PURE__*/
 _react.default.createElement(_globalStyle.default,null),/*#__PURE__*/
@@ -43,20 +45,20 @@ _react.default.createElement(_reactHookForm.Controller,{
 name:f,
 control:d,
 rules:{required:!!k&&"\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u0627\u062C\u0628\u0627\u0631\u06CC \u0627\u0633\u062A"},
-render:(a)=>{var c;let{fieldState:d}=a;return/*#__PURE__*/(
+render:(a)=>{let{fieldState:c}=a;return(/*#__PURE__*/
 _react.default.createElement(_react.default.Fragment,null,/*#__PURE__*/
 _react.default.createElement(_index.CheckboxWrapper,{type:j},
 l.map(
 (a)=>
-i?/*#__PURE__*/
-_react.default.cloneElement(a,{groupName:f,isDisabled:i,register:b}):/*#__PURE__*/
+i?(/*#__PURE__*/
+_react.default.cloneElement(a,{groupName:f,isDisabled:i,register:b})):(/*#__PURE__*/
 
-_react.default.cloneElement(a,{groupName:f,register:b})
+_react.default.cloneElement(a,{groupName:f,register:b}))
 
 
 )
 ),/*#__PURE__*/
-_react.default.createElement(_errorMsg.default,{errorMessage:d&&(null===(c=d.error)||void 0===c?void 0:c.message)})
+_react.default.createElement(_errorMsg.default,{errorMessage:c&&c.error?.message})
 ))}}
 
 )

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

@@ -1,80 +1,113 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_reactHookForm=require("react-hook-form"),_react2=require("@storybook/react"),_addonInfo=require("@storybook/addon-info"),_addonActions=require("@storybook/addon-actions"),_addonKnobs=require("@storybook/addon-knobs"),_checkbox=_interopRequireDefault(require("./checkbox")),_checkboxOption=_interopRequireDefault(require("./checkbox-option"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-(0,_react2.storiesOf)("Form-V7/Checkbox",module).
-add("Minimal Form/Checkbox",()=>{
-const{
-register:a
-}=(0,_reactHookForm.useForm)();
-return/*#__PURE__*/(
-_react.default.createElement(_checkbox.default,{register:a},/*#__PURE__*/
-_react.default.createElement(_checkboxOption.default,{value:"first",label:"First Value",handleOnchange:(a)=>console.log(a)}),/*#__PURE__*/
-_react.default.createElement(_checkboxOption.default,{value:"sec",label:"Sec Value",handleOnchange:(a)=>console.log(a)}),/*#__PURE__*/
-_react.default.createElement(_checkboxOption.default,{value:"third",label:"Third Value",handleOnchange:(a)=>console.log(a.target.checked)})
-))
-
-}).
-add("Full option Checkbox",()=>{
-const{
-register:a
-}=(0,_reactHookForm.useForm)();
-return/*#__PURE__*/(
-_react.default.createElement(_checkbox.default,{
-groupName:(0,_addonKnobs.text)("optional groupName(but highly recommended to set manually)","degree"),
-label:(0,_addonKnobs.text)("optional 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"),
-number:4,
-handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function"),
-isDisabled:(0,_addonKnobs.boolean)("optional disabled all",!1),
-type:(0,_addonKnobs.select)("optional type",["horizontal","vertical"]),
-errorMessage:(0,_addonKnobs.text)("optional error msg","\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627"),
-required:!0,
-register:a},/*#__PURE__*/
-
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.WithError=exports.VerticalLayout=exports.Minimal=exports.FullOptions=exports.Disabled=exports.CustomOption=void 0;var _react=_interopRequireDefault(require("react")),_reactHookForm=require("react-hook-form"),_addonActions=require("@storybook/addon-actions"),_checkbox=_interopRequireDefault(require("./checkbox")),_checkboxOption=_interopRequireDefault(require("./checkbox-option"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_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:"\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"
+},
+number:{
+control:"number",
+defaultValue:4
+},
+isDisabled:{
+control:"boolean",
+defaultValue:!1
+},
+type:{
+control:"select",
+options:["horizontal","vertical"],
+defaultValue:"horizontal"
+},
+errorMessage:{
+control:"text",
+defaultValue:"\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627"
+},
+required:{
+control:"boolean",
+defaultValue:!0
+}
+}
+};const
+
+Template=(a)=>{
+const{register:b,control:c}=(0,_reactHookForm.useForm)();
+return(/*#__PURE__*/
+_react.default.createElement(_checkbox.default,_extends({},a,{register:b,control:c}),/*#__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",isChecked:!0}),/*#__PURE__*/
-_react.default.createElement(_checkboxOption.default,{value:"500",label:"\u0647\u0646\u0631\u06CC",isChecked:!0})
+_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"})
 ))
 
-}).
-add("Full option CheckboxOption",()=>{
-const{
-register:a,
-control:b
-}=(0,_reactHookForm.useForm)();
-return/*#__PURE__*/(
-_react.default.createElement(_checkbox.default,{
+},
+
+Minimal=exports.Minimal=Template.bind({});
+Minimal.args={
+groupName:"degree",
+required:!0
+};
+
+const FullOptions=exports.FullOptions=Template.bind({});
+FullOptions.args={
 groupName:"degree",
-required:!0,
 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:a,
-control:b},/*#__PURE__*/
-
-_react.default.createElement(_checkboxOption.default,{
-label:(0,_addonKnobs.text)("label","\u0648\u0631\u0632\u0634\u06CC"),
-value:(0,_addonKnobs.text)("value","100"),
-isDisabled:(0,_addonKnobs.boolean)("optional disabled item",!1),
-isChecked:(0,_addonKnobs.boolean)("optional checked item",!1),
-register:a}
-),/*#__PURE__*/
+number:4,
+handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function"),
+isDisabled:!1,
+type:"horizontal",
+errorMessage:"\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627",
+required:!0
+};
+
+const VerticalLayout=exports.VerticalLayout=Template.bind({});
+VerticalLayout.args={
+...FullOptions.args,
+type:"vertical"
+};
+
+const Disabled=exports.Disabled=Template.bind({});
+Disabled.args={
+...FullOptions.args,
+isDisabled:!0
+};
+
+const WithError=exports.WithError=Template.bind({});
+WithError.args={
+...FullOptions.args,
+errorMessage:"\u0644\u0637\u0641\u0627 \u062D\u062F\u0627\u0642\u0644 \u06CC\u06A9 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"
+};const
+
+CheckboxOptionTemplate=(a)=>{
+const{register:b}=(0,_reactHookForm.useForm)();
+return(/*#__PURE__*/
+_react.default.createElement(_checkbox.default,{groupName:"degree",required:!0,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:b},/*#__PURE__*/
+_react.default.createElement(_checkboxOption.default,_extends({},a,{register:b})),/*#__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"})
 ))
 
-}).
-addDecorator(_addonInfo.withInfo).
-addDecorator(_addonKnobs.withKnobs);
+},
+
+CustomOption=exports.CustomOption=CheckboxOptionTemplate.bind({});
+CustomOption.args={
+label:"\u0648\u0631\u0632\u0634\u06CC",
+value:"100",
+isDisabled:!1,
+isChecked:!1
+};

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

@@ -1,40 +1,62 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Input=exports.Fieldset=exports.CheckboxWrapper=void 0;var _templateObject,_templateObject2,_templateObject3,_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}const
-
-Fieldset=exports.Fieldset=_styledComponents.default.fieldset(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  border: none;\n  padding: 0;\n  margin: 0;\n"]))),
-
-
-
-
-
-CheckboxWrapper=exports.CheckboxWrapper=_styledComponents.default.div(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  ","\n"])),
-
-
-(a)=>{let{type:b}=a;return"vertical"===b?"flex-direction: column;":""}),
-
-
-Input=exports.Input=_styledComponents.default.input(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  width: 16px;\n  height: 16px;\n\n  border: 1px solid ",";\n  background: ",";\n  cursor: ",";\n  transition: 0.2s all linear;\n  margin-right: 5px;\n\n  position: relative;\n  top: 10px;\n  \n  &:hover {\n    border-color: ",";\n  }\n\n  &:checked {\n    border-color: ",";\n    \n    &:after {\n      border-color: ",";\n    }\n  }\n\n  &:after {\n    content: '';\n    display: block;\n\n    height: 8px;\n    width: 5px;\n    position: absolute;\n    right: 5px;\n    top: 2px;\n\n    transition: 0.2s all linear;\n\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n    border-bottom: 2px solid transparent;\n    border-right: 2px solid transparent;\n  }\n"])),
-
-
-
-
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.normal},
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.background:"white"},
-(a)=>{let{disabled:b}=a;return b?"not-allowed":"pointer"},
-
-
-
-
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.hover},
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.focus},
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.focus});
+"use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.Input=exports.Fieldset=exports.CheckboxWrapper=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
+
+Fieldset=exports.Fieldset=_styledComponents.default.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+`,
+
+CheckboxWrapper=exports.CheckboxWrapper=_styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  ${(a)=>{let{type:b}=a;return"vertical"===b?"flex-direction: column;":""}}
+`,
+
+Input=exports.Input=_styledComponents.default.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  width: 16px;
+  height: 16px;
+
+  border: 1px solid ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.normal}};
+  background: ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.background:"white"}};
+  cursor: ${(a)=>{let{disabled:b}=a;return b?"not-allowed":"pointer"}};
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 10px;
+  
+  &:hover {
+    border-color: ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.hover}};
+  }
+
+  &:checked {
+    border-color: ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.focus}};
+    
+    &:after {
+      border-color: ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.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/form-v7/dropdown/index.stories.js

@@ -1,121 +1,130 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_reactHookForm=require("react-hook-form"),_react2=require("@storybook/react"),_addonInfo=require("@storybook/addon-info"),_addonActions=require("@storybook/addon-actions"),_addonKnobs=require("@storybook/addon-knobs"),_select=_interopRequireDefault(require("./select")),_option=_interopRequireDefault(require("./option"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.WithPlaceholderAndOptions=exports.WithPlaceholder=exports.WithError=exports.Minimal=exports.FullOptions=exports.Disabled=exports.CustomOption=void 0;var _react=_interopRequireDefault(require("react")),_reactHookForm=require("react-hook-form"),_addonActions=require("@storybook/addon-actions"),_select=_interopRequireDefault(require("./select")),_option=_interopRequireDefault(require("./option"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(null,arguments)}var _default=exports.default=
 
 
 
 
 
 
-
-
-
-
-
-
-(0,_react2.storiesOf)("Form-v7/Dropdown",module).
-add("Minimal Select",()=>{const
 {
-register:a,
-handleSubmit:b,
-control:c,
-setError:d
-}=(0,_reactHookForm.useForm)(),
-
-
-
-
-
-
-
-
-
-e=[
-"question 1",
-"question 2",
-"question 3"];
+title:"Form-v7/Dropdown",
+component:_select.default,
+
+argTypes:{
+htmlElementName:{
+control:"text",
+defaultValue:"\u0627\u0633\u062A\u0627\u0646"
+},
+placeholder:{
+control:"text",
+defaultValue:"__\u0627\u0633\u062A\u0627\u0646 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F__"
+},
+defaultValue:{
+control:"text",
+defaultValue:"30"
+},
+isDisabled:{
+control:"boolean",
+defaultValue:!1
+},
+label:{
+control:"text",
+defaultValue:"\u0645\u062D\u0644 \u0628\u0631\u06AF\u0632\u0627\u0631\u06CC \u0631\u0648\u06CC\u062F\u0627\u062F"
+},
+number:{
+control:"number",
+defaultValue:3
+},
+errorMessage:{
+control:"text",
+defaultValue:"\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627"
+},
+required:{
+control:"boolean",
+defaultValue:!0
+}
+}
+};const
+
+Template=(a)=>{
+const{register:b,control:c}=(0,_reactHookForm.useForm)();
+return(/*#__PURE__*/
+_react.default.createElement(_select.default,_extends({},a,{register:b,control:c}),/*#__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"})
+))
 
+},
 
-return/*#__PURE__*/(
-_react.default.createElement("form",{onSubmit:b((a)=>{console.log(a),d({message:"\u06A9\u067E\u0686\u0627 \u0645\u0639\u062A\u0628\u0631 \u0646\u06CC\u0633\u062A .",errors:{captcha:["\u06A9\u067E\u0686\u0627 \u0645\u0639\u062A\u0628\u0631 \u0646\u06CC\u0633\u062A ."]},status_code:422})})},/*#__PURE__*/
-_react.default.createElement(_select.default,{
+Minimal=exports.Minimal=Template.bind({});
+Minimal.args={
 htmlElementName:"select",
 placeholder:"\u06CC\u06A9 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F",
-register:a,
-control:c,
 defaultValue:"question 2",
 label:"select box",
 number:1,
-required:!1},
+required:!1
+};
 
-!!e&&e.map((a,b)=>/*#__PURE__*/
-_react.default.createElement(_option.default,{key:b,value:a,label:a})
-)
-)
-))
-
-}).
-add("Select with placeholder",()=>{
-const{
-register:a
-}=(0,_reactHookForm.useForm)();
-return/*#__PURE__*/(
-_react.default.createElement(_select.default,{
-htmlElementName:(0,_addonKnobs.text)("optional htmlElementName","\u0627\u0633\u062A\u0627\u0646"),
-placeholder:(0,_addonKnobs.text)("optional placeholder","__\u0627\u0633\u062A\u0627\u0646 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F__"),
-handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function"),
-register:a},/*#__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 WithPlaceholder=exports.WithPlaceholder=Template.bind({});
+WithPlaceholder.args={
+htmlElementName:"\u0627\u0633\u062A\u0627\u0646",
+placeholder:"__\u0627\u0633\u062A\u0627\u0646 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F__",
+handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function")
+};
 
-}).
-add("Full option Select(no placeholder)",()=>{
-const{
-register:a
-}=(0,_reactHookForm.useForm)();
-return/*#__PURE__*/(
-_react.default.createElement(_select.default,{
-htmlElementName:(0,_addonKnobs.text)("optional htmlElementName","\u0627\u0633\u062A\u0627\u0646"),
-defaultValue:(0,_addonKnobs.text)("optional defaultValue(if its not et or set wrong get the first option)","30"),
+const FullOptions=exports.FullOptions=Template.bind({});
+FullOptions.args={
+htmlElementName:"\u0627\u0633\u062A\u0627\u0646",
+defaultValue:"30",
 handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function"),
-isDisabled:(0,_addonKnobs.boolean)("disabled(default : false)",!1),
-label:(0,_addonKnobs.text)("optional label","\u0645\u062D\u0644 \u0628\u0631\u06AF\u0632\u0627\u0631\u06CC \u0631\u0648\u06CC\u062F\u0627\u062F"),
+isDisabled:!1,
+label:"\u0645\u062D\u0644 \u0628\u0631\u06AF\u0632\u0627\u0631\u06CC \u0631\u0648\u06CC\u062F\u0627\u062F",
 number:3,
-errorMessage:(0,_addonKnobs.text)("optional error msg","\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627"),
-register:a,
-required:!0},/*#__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",isDisabled:!0})
-))
-
-}).
-add("Full option SelectOption",()=>{
-const{
-register:a,
-control:b
-}=(0,_reactHookForm.useForm)();
-return/*#__PURE__*/(
+errorMessage:"\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627",
+required:!0
+};
+
+const WithPlaceholderAndOptions=exports.WithPlaceholderAndOptions=Template.bind({});
+WithPlaceholderAndOptions.args={
+...FullOptions.args,
+placeholder:"__\u0627\u0633\u062A\u0627\u0646 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F__"
+};
+
+const Disabled=exports.Disabled=Template.bind({});
+Disabled.args={
+...FullOptions.args,
+isDisabled:!0
+};
+
+const WithError=exports.WithError=Template.bind({});
+WithError.args={
+...FullOptions.args,
+errorMessage:"\u0644\u0637\u0641\u0627 \u06CC\u06A9 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"
+};const
+
+SelectOptionTemplate=(a)=>{
+const{register:b,control:c}=(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:!1,
-register:a,
+register:b,
 required:!0,
-control:b},/*#__PURE__*/
+control:c},/*#__PURE__*/
 
-_react.default.createElement(_option.default,{
-value:(0,_addonKnobs.text)("value","20"),
-label:(0,_addonKnobs.text)("label","\u06A9\u0631\u062C"),
-isDisabled:(0,_addonKnobs.boolean)("disabled(default : false)",!1)}
-),/*#__PURE__*/
+_react.default.createElement(_option.default,a),/*#__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"})
 ))
 
-}).
-addDecorator(_addonInfo.withInfo).
-addDecorator(_addonKnobs.withKnobs);
+},
+
+CustomOption=exports.CustomOption=SelectOptionTemplate.bind({});
+CustomOption.args={
+value:"20",
+label:"\u06A9\u0631\u062C",
+isDisabled:!1
+};