react-jupiter 5.12.0 → 6.0.0-beta.1

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

@@ -0,0 +1,121 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithPreSelectedOptions = exports.WithError = exports.VerticalLayout = exports.Minimal = exports.FullOptions = exports.DisabledOption = exports.Disabled = exports.CustomOption = exports.CheckedOption = void 0;var _react = _interopRequireDefault(require("react"));
+
+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 };}var _default = exports.default =
+
+{
+  title: 'Form/Checkbox',
+  component: _checkbox.default,
+
+  argTypes: {
+    groupName: {
+      control: 'text',
+      defaultValue: 'degree'
+    },
+    label: {
+      control: 'text',
+      defaultValue: 'در کدام موضوع ها توانایی دارید'
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    type: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      defaultValue: 'horizontal'
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'ارور زیبا'
+    },
+    handleChange: {
+      action: 'handleChange'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/
+_react.default.createElement(_checkbox.default, args, /*#__PURE__*/
+_react.default.createElement(_checkboxOption.default, { value: "first", label: "First Value" }), /*#__PURE__*/
+_react.default.createElement(_checkboxOption.default, { value: "sec", label: "Sec Value" }), /*#__PURE__*/
+_react.default.createElement(_checkboxOption.default, { value: "third", label: "Third Value" })
+);
+
+
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {};
+
+const FullOptions = exports.FullOptions = Template.bind({});
+FullOptions.args = {
+  groupName: 'degree',
+  label: 'در کدام موضوع ها توانایی دارید',
+  handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function'),
+  isDisabled: false,
+  type: 'horizontal',
+  errorMessage: 'ارور زیبا'
+};
+
+const FullOptionsTemplate = (args) => /*#__PURE__*/
+_react.default.createElement(_checkbox.default, args, /*#__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: true }), /*#__PURE__*/
+_react.default.createElement(_checkboxOption.default, { value: "500", label: "\u0647\u0646\u0631\u06CC", isChecked: true })
+);
+
+
+const WithPreSelectedOptions = exports.WithPreSelectedOptions = FullOptionsTemplate.bind({});
+WithPreSelectedOptions.args = {
+  ...FullOptions.args
+};
+
+const VerticalLayout = exports.VerticalLayout = FullOptionsTemplate.bind({});
+VerticalLayout.args = {
+  ...FullOptions.args,
+  type: 'vertical'
+};
+
+const Disabled = exports.Disabled = FullOptionsTemplate.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  isDisabled: true
+};
+
+const WithError = exports.WithError = FullOptionsTemplate.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا حداقل یک گزینه را انتخاب کنید'
+};
+
+const CheckboxOptionTemplate = (args) => /*#__PURE__*/
+_react.default.createElement(_checkbox.default, { groupName: "degree", 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" }, /*#__PURE__*/
+_react.default.createElement(_checkboxOption.default, args), /*#__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
+};
+
+const DisabledOption = exports.DisabledOption = CheckboxOptionTemplate.bind({});
+DisabledOption.args = {
+  ...CustomOption.args,
+  isDisabled: true
+};
+
+const CheckedOption = exports.CheckedOption = CheckboxOptionTemplate.bind({});
+CheckedOption.args = {
+  ...CustomOption.args,
+  isChecked: true
+};

package/dist/components/form/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/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/dropdown/index.stories.js

@@ -0,0 +1,119 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithPlaceholderAndOptions = exports.WithPlaceholder = exports.WithError = exports.Minimal = exports.FullOptions = exports.DisabledOption = exports.Disabled = exports.CustomOption = void 0;var _react = _interopRequireDefault(require("react"));
+
+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 };}var _default = exports.default =
+
+{
+  title: 'Form/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: 'محل برگزاری رویداد'
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'ارور زیبا'
+    },
+    handleChange: {
+      action: 'handleChange'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/
+_react.default.createElement(_select.default, args, /*#__PURE__*/
+_react.default.createElement(_option.default, { value: "first", label: "First Value" }), /*#__PURE__*/
+_react.default.createElement(_option.default, { value: "sec", label: "2nd Value" })
+);
+
+
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {};
+
+const WithPlaceholder = exports.WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  htmlElementName: 'استان',
+  placeholder: '__استان مورد نظر خود را انتخاب کنید__',
+  handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function')
+};
+
+const WithOptionsTemplate = (args) => /*#__PURE__*/
+_react.default.createElement(_select.default, args, /*#__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: true })
+);
+
+
+const FullOptions = exports.FullOptions = WithOptionsTemplate.bind({});
+FullOptions.args = {
+  htmlElementName: 'استان',
+  defaultValue: '30',
+  handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function'),
+  isDisabled: false,
+  label: 'محل برگزاری رویداد',
+  errorMessage: 'ارور زیبا'
+};
+
+const WithPlaceholderAndOptions = exports.WithPlaceholderAndOptions = WithOptionsTemplate.bind({});
+WithPlaceholderAndOptions.args = {
+  ...FullOptions.args,
+  placeholder: '__استان مورد نظر خود را انتخاب کنید__'
+};
+
+const Disabled = exports.Disabled = WithOptionsTemplate.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  isDisabled: true
+};
+
+const WithError = exports.WithError = WithOptionsTemplate.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا یک گزینه را انتخاب کنید'
+};
+
+const SelectOptionTemplate = (args) => /*#__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 }, /*#__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
+};
+
+const DisabledOption = exports.DisabledOption = SelectOptionTemplate.bind({});
+DisabledOption.args = {
+  ...CustomOption.args,
+  isDisabled: true
+};

package/dist/components/form/dropdown/index.style.js

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.StyledSelect = exports.SelectButton = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const SelectButton = exports.SelectButton = _styledComponents.default.div`
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    left: 15px;
+    top: 11px;
+    border: solid ${(_ref) => {let { disabled, theme } = _ref;return disabled ? theme.disabled.color : theme.borderColor.normal;}};
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  &:before {
+    content: "";
+    display: block;
+    width: 37px;
+    position: absolute;
+    margin-top: 2px;
+    top: 0;
+    bottom: 1px;
+    left: 1px;
+    border-right: 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';}};
+    pointer-events: none;
+  }
+`;
+
+const StyledSelect = exports.StyledSelect = _styledComponents.default.select`
+  font-family: 'IranSharp';
+  font-weight: bold;
+  font-size: 12px;
+  border-radius: ${(_ref4) => {let { theme } = _ref4;return `${theme.borderRadius}px`;}};
+  border: solid 1px ${(_ref5) => {let { disabled, theme } = _ref5;return disabled ? 'transparent' : theme.borderColor.normal;}};
+  padding: 4px;
+  box-sizing: border-box;
+  width: 100%;
+  background: ${(_ref6) => {let { disabled, theme } = _ref6;return disabled ? theme.disabled.background : 'white';}};
+  ${(_ref7) => {let { disabled, theme } = _ref7;return disabled ? `color: ${theme.disabled.color};` : '';}}
+  ${(_ref8) => {let { disabled, theme } = _ref8;return disabled ? `color: ${theme.disabled.color};` : '';}}
+  cursor: ${(_ref9) => {let { disabled } = _ref9;return disabled ? 'not-allowed' : 'pointer';}};
+
+  &:hover {
+    border-color: ${(_ref10) => {let { disabled, theme } = _ref10;return disabled ? 'transparent' : theme.borderColor.hover;}};
+  }
+
+  &:focus {
+    border-color: ${(_ref11) => {let { theme } = _ref11;return theme.borderColor.focus;}};
+  }
+`;

package/dist/components/form/dropdown/index.test.js

@@ -0,0 +1,20 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _test = _interopRequireDefault(require("../../utils/test"));
+var _select = _interopRequireDefault(require("./select"));
+var _option = _interopRequireDefault(require("./option"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+describe('dropdown (select-option) tests', () => {
+  it('render simple select tag', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_select.default, null));
+    const select = (0, _test.default)(component, 'select');
+
+    expect(select.length).toBe(1);
+  });
+  it('render simple option tag', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_option.default, { label: "hi", value: "hi_val" }));
+    const option = (0, _test.default)(component, 'select-option');
+
+    expect(option.length).toBe(1);
+  });
+});

package/dist/components/form/dropdown/option.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+const SelectOption = (props) => {
+  const { label, value, isDisabled = false } = props;
+
+  return (/*#__PURE__*/
+    _react.default.createElement("option", {
+      disabled: isDisabled,
+      value: value,
+      "data-test": "select-option" },
+
+    label
+    ));
+
+};var _default = exports.default =
+
+SelectOption;

package/dist/components/form/dropdown/select.js

@@ -0,0 +1,68 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _theme = _interopRequireDefault(require("../theme"));
+var _typography = require("../../typography");
+var _errorMsg = _interopRequireDefault(require("../errorMsg"));
+var _index = require("./index.style");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+
+
+
+const Select = (_ref) =>
+
+
+
+
+
+
+
+
+
+{let { htmlElementName = 'select-element', defaultValue = '', placeholder = '', label = '', isDisabled = false, handleChange = () => {}, errorMessage = '', inputRef = null, children } = _ref;
+  function onChange(e) {
+    handleChange(e.target.value);
+  }
+
+  const renderSelect = () => /*#__PURE__*/
+  _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+  _react.default.createElement(_index.SelectButton, { disabled: isDisabled }, /*#__PURE__*/
+  _react.default.createElement(_index.StyledSelect, {
+    disabled: isDisabled,
+    onChange: onChange,
+    name: htmlElementName,
+    defaultValue: placeholder ? '' : defaultValue,
+    "data-test": "select",
+    ref: inputRef },
+
+  placeholder && /*#__PURE__*/
+  _react.default.createElement("option", { value: "", disabled: true }, placeholder),
+
+  children
+  )
+  ), /*#__PURE__*/
+  _react.default.createElement(_errorMsg.default, { errorMessage: errorMessage })
+  );
+
+
+  if (label) {
+    return (/*#__PURE__*/
+      _react.default.createElement("label", { htmlFor: htmlElementName }, /*#__PURE__*/
+      _react.default.createElement(_typography.Text, { size: 14, bold: true, isDisplayBlock: true },
+      label
+      ),
+      renderSelect()
+      ));
+
+  }
+  return renderSelect();
+};var _default = exports.default =
+
+Select;

package/dist/components/form/errorMsg.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _typography = require("../typography");
+var _spacing = require("../spacing");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const ErrorMsg = (_ref) => {let { errorMessage = '' } = _ref;
+  if (errorMessage) {
+    return (/*#__PURE__*/
+      _react.default.createElement(_spacing.Margin, { top: 4 }, /*#__PURE__*/
+      _react.default.createElement(_icon.default, { name: "error", color: "red", size: "sm", stickyRight: true }), /*#__PURE__*/
+      _react.default.createElement(_typography.Text, { bold: true, size: 10, color: "red", "data-test": "error-message" },
+      errorMessage
+      )
+      ));
+
+  }
+
+  return null;
+};var _default = exports.default =
+
+ErrorMsg;

package/dist/components/form/index.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "Captcha", { enumerable: true, get: function () {return _captcha.default;} });Object.defineProperty(exports, "CheckboxInputGroup", { enumerable: true, get: function () {return _checkbox.default;} });Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () {return _dropdown.default;} });Object.defineProperty(exports, "RadioInputGroup", { enumerable: true, get: function () {return _radio.default;} });Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () {return _textInput.default;} });Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () {return _textarea.default;} });exports.default = void 0;var _textInput = _interopRequireDefault(require("./text-input"));
+var _dropdown = _interopRequireDefault(require("./dropdown"));
+var _radio = _interopRequireDefault(require("./radio"));
+var _textarea = _interopRequireDefault(require("./textarea"));
+var _checkbox = _interopRequireDefault(require("./checkbox"));
+var _captcha = _interopRequireDefault(require("./captcha"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+
+
+
+
+
+
+
+{
+  TextInput: _textInput.default,
+  Dropdown: _dropdown.default,
+  RadioInputGroup: _radio.default,
+  Textarea: _textarea.default,
+  CheckboxInputGroup: _checkbox.default,
+  Captcha: _captcha.default
+};

package/dist/components/form/radio/index.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "Radio", { enumerable: true, get: function () {return _radio.default;} });Object.defineProperty(exports, "RadioOption", { enumerable: true, get: function () {return _radioOption.default;} });exports.default = void 0;var _radio = _interopRequireDefault(require("./radio"));
+var _radioOption = _interopRequireDefault(require("./radio-option"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+
+
+
+{
+  Radio: _radio.default,
+  RadioOption: _radioOption.default
+};

package/dist/components/form/radio/index.stories.js

@@ -0,0 +1,119 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithError = exports.WithDefaultValue = exports.VerticalLayout = exports.Minimal = exports.FullOptions = exports.DisabledOption = exports.Disabled = exports.CustomOption = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+var _radio = _interopRequireDefault(require("./radio"));
+var _radioOption = _interopRequireDefault(require("./radio-option"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+{
+  title: 'Form/Radio',
+  component: _radio.default,
+
+  argTypes: {
+    groupName: {
+      control: 'text',
+      defaultValue: 'degree'
+    },
+    label: {
+      control: 'text',
+      defaultValue: 'آخرین مدرک تحصیلی خود را انتخاب کنید'
+    },
+    defaultCheckedValue: {
+      control: 'text',
+      defaultValue: '300'
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    type: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      defaultValue: 'horizontal'
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'ارور زیبا'
+    },
+    handleChange: {
+      action: 'handleChange'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/
+_react.default.createElement(_radio.default, args, /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "first", label: "First Value" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "sec", label: "Sec Value" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "third", label: "Third Value" })
+);
+
+
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {};
+
+const FullOptions = exports.FullOptions = Template.bind({});
+FullOptions.args = {
+  groupName: 'degree',
+  label: 'آخرین مدرک تحصیلی خود را انتخاب کنید',
+  defaultCheckedValue: '300',
+  handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function'),
+  isDisabled: false,
+  type: 'horizontal',
+  errorMessage: 'ارور زیبا'
+};
+
+const FullOptionsTemplate = (args) => /*#__PURE__*/
+_react.default.createElement(_radio.default, args, /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "100", label: "\u0632\u06CC\u0631 \u062F\u06CC\u067E\u0644\u0645" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "234", label: "\u062F\u06CC\u067E\u0644\u0645" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "300", label: "\u06A9\u0627\u0631\u0634\u0646\u0627\u0633\u06CC" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "400", label: "\u06A9\u0627\u0631\u0634\u0646\u0627\u0633\u06CC \u0627\u0631\u0634\u062F" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "500", label: "\u062F\u06A9\u062A\u0631\u0627" })
+);
+
+
+const WithDefaultValue = exports.WithDefaultValue = FullOptionsTemplate.bind({});
+WithDefaultValue.args = {
+  ...FullOptions.args
+};
+
+const VerticalLayout = exports.VerticalLayout = FullOptionsTemplate.bind({});
+VerticalLayout.args = {
+  ...FullOptions.args,
+  type: 'vertical'
+};
+
+const Disabled = exports.Disabled = FullOptionsTemplate.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  isDisabled: true
+};
+
+const WithError = exports.WithError = FullOptionsTemplate.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا یک گزینه را انتخاب کنید'
+};
+
+const RadioOptionTemplate = (args) => /*#__PURE__*/
+_react.default.createElement(_radio.default, { groupName: "degree", label: "\u0622\u062E\u0631\u06CC\u0646 \u0645\u062F\u0631\u06A9 \u062A\u062D\u0635\u06CC\u0644\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F" }, /*#__PURE__*/
+_react.default.createElement(_radioOption.default, args), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "200", label: "\u062F\u06CC\u067E\u0644\u0645" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "300", label: "\u06A9\u0627\u0631\u0634\u0646\u0627\u0633\u06CC" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "400", label: "\u06A9\u0627\u0631\u0634\u0646\u0627\u0633\u06CC \u0627\u0631\u0634\u062F" }), /*#__PURE__*/
+_react.default.createElement(_radioOption.default, { value: "500", label: "\u062F\u06A9\u062A\u0631\u0627" })
+);
+
+
+const CustomOption = exports.CustomOption = RadioOptionTemplate.bind({});
+CustomOption.args = {
+  label: 'زیر دیپلم',
+  value: '100',
+  isDisabled: false
+};
+
+const DisabledOption = exports.DisabledOption = RadioOptionTemplate.bind({});
+DisabledOption.args = {
+  ...CustomOption.args,
+  isDisabled: true
+};