react-jupiter 5.11.34 → 6.0.0-beta.1

package/dist/components/form-v7/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: 13px;
+    top: 9px;
+    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: 33px;
+    position: absolute;
+    margin-top: 2px;
+    top: 0;
+    bottom: 1px;
+    left: 5px;
+    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: normal;
+  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: ${(_ref6) => {let { width } = _ref6;return width;}};
+  background: ${(_ref7) => {let { disabled, theme } = _ref7;return disabled ? theme.disabled.background : 'white';}};
+  ${(_ref8) => {let { disabled, theme } = _ref8;return disabled ? `color: ${theme.disabled.color};` : '';}}
+  ${(_ref9) => {let { disabled, theme } = _ref9;return disabled ? `color: ${theme.disabled.color};` : '';}}
+  cursor: ${(_ref10) => {let { disabled } = _ref10;return disabled ? 'not-allowed' : 'pointer';}};
+
+  &:hover {
+    border-color: ${(_ref11) => {let { disabled, theme } = _ref11;return disabled ? 'transparent' : theme.borderColor.hover;}};
+  }
+
+  &:focus {
+    border-color: ${(_ref12) => {let { theme } = _ref12;return theme.borderColor.focus;}};
+  }
+`;

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

@@ -0,0 +1,18 @@
+"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 = (_ref) => {let { label, value, isDisabled = false } = _ref;return (/*#__PURE__*/
+    _react.default.createElement("option", {
+      disabled: isDisabled,
+      value: value,
+      "data-test": "select-option" },
+
+    label
+    ));};var _default = exports.default =
+
+
+SelectOption;

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

@@ -0,0 +1,85 @@
+"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 _theme = _interopRequireDefault(require("../theme"));
+var _errorMsg = _interopRequireDefault(require("../errorMsg"));
+var _index = require("./index.style");
+var _label = _interopRequireDefault(require("../label"));
+var _index2 = 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 Select = (_ref) =>
+
+
+
+
+
+
+
+
+
+
+
+{let { htmlElementName = 'select-element', defaultValue = '', placeholder = '', label = '', width = '100%', handleChange = undefined, isDisabled = false, required = false, number = null, control, children } = _ref;
+  const renderSelect = () => /*#__PURE__*/
+  _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+  _react.default.createElement(_index.SelectButton, { disabled: isDisabled }, /*#__PURE__*/
+  _react.default.createElement(_reactHookForm.Controller, {
+    name: htmlElementName,
+    control: control,
+    rules: { required: required ? 'این فیلد اجباری است' : false },
+    render: (_ref2) => {let { field, fieldState } = _ref2;return (/*#__PURE__*/
+        _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+        _react.default.createElement(_index.StyledSelect, _extends({},
+        field, {
+          defaultValue: defaultValue,
+          onChange: (e) => {
+            if (handleChange) {
+              handleChange(e.target.value);
+            }
+            // Update RHF's state
+            field.onChange(e);
+          },
+          width: width }),
+
+        placeholder && /*#__PURE__*/
+        _react.default.createElement("option", { value: "" }, placeholder),
+
+        children
+        ), /*#__PURE__*/
+        _react.default.createElement(_errorMsg.default, { errorMessage: fieldState && fieldState.error?.message })
+        ));} }
+
+  )
+  )
+  );
+
+
+  if (label) {
+    return (/*#__PURE__*/
+      _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+      _react.default.createElement(_index2.Fieldset, null, /*#__PURE__*/
+      _react.default.createElement(_label.default, { htmlFor: htmlElementName, label: label, number: number, required: required }),
+      renderSelect()
+      )
+      ));
+
+  }
+  return renderSelect();
+};var _default = exports.default =
+
+Select;

package/dist/components/form-v7/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-v7/file-input/index.js

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _reactHookForm = require("react-hook-form");
+var _globalStyle = _interopRequireDefault(require("../../globalStyle"));
+var _theme = _interopRequireDefault(require("../theme"));
+var _errorMsg = _interopRequireDefault(require("../errorMsg"));
+var _label = _interopRequireDefault(require("../label"));
+var _index = require("./index.style");
+
+
+
+var _index2 = 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 FileInput = (_ref) => {let {
+    type = 'text',
+    label = null,
+    id = null,
+    disabled = false,
+    description = null,
+    required = false,
+    number = null,
+    htmlElementName,
+    register,
+    control
+  } = _ref;return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+    _react.default.createElement(_index2.Fieldset, null, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+    _react.default.createElement(_label.default, { htmlFor: id || `${type}-${htmlElementName.split(' ').join('')}`, label: label, number: number, required: required }),
+    description && /*#__PURE__*/
+    _react.default.createElement(_index.DescriptionContainer, { size: 10, color: "gray", "data-test": "file-input-description" },
+    description
+    ), /*#__PURE__*/
+
+
+    _react.default.createElement(_reactHookForm.Controller, {
+      name: htmlElementName,
+      control: control,
+      rules: { required: required ? 'این فیلد اجباری است' : false } // Add required rule
+      , render: (_ref2) => {let { fieldState } = _ref2;return (/*#__PURE__*/
+          _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+          _react.default.createElement(_index.Input, _extends({
+            id: id || `${type}-${htmlElementName.split(' ').join('')}`,
+            name: htmlElementName,
+            type: "file" },
+          register(htmlElementName, {
+            disabled,
+            required: required ? 'این فیلد الزامی است' : false
+          }))
+          ), /*#__PURE__*/
+          _react.default.createElement(_errorMsg.default, { errorMessage: fieldState && fieldState.error?.message })
+          ));} }
+
+    )
+    )
+    ));};var _default = exports.default =
+
+FileInput;

package/dist/components/form-v7/file-input/index.stories.js

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithError = exports.Disabled = exports.Default = void 0;var _react = _interopRequireDefault(require("react"));
+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/File Input',
+  component: _index.default,
+
+  argTypes: {
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'file-input'
+    },
+    label: {
+      control: 'text',
+      defaultValue: 'این لیبل است'
+    },
+    description: {
+      control: 'text',
+      defaultValue: 'حجم فایل ارسالی باید کمتر از ۴ مگابایت باشد'
+    },
+    number: {
+      control: 'number',
+      defaultValue: 5
+    },
+    placeholder: {
+      control: 'text',
+      defaultValue: 'متن پیشفرض'
+    },
+    disabled: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    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 }));
+};
+
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  htmlElementName: 'file-input',
+  label: 'این لیبل است',
+  description: 'حجم فایل ارسالی باید کمتر از ۴ مگابایت باشد',
+  number: 5,
+  placeholder: 'متن پیشفرض',
+  disabled: false,
+  errorMessage: 'ارور زیبا',
+  required: true
+};
+
+const Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true
+};
+
+const WithError = exports.WithError = Template.bind({});
+WithError.args = {
+  ...Default.args,
+  errorMessage: 'لطفا یک فایل را انتخاب کنید'
+};

package/dist/components/form-v7/file-input/index.style.js

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.PasswordIcon = exports.LabelContainer = exports.Input = exports.DescriptionContainer = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = require("../../typography");
+var _icon = _interopRequireDefault(require("../../icon"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const Input = exports.Input = _styledComponents.default.input`
+  font-family: 'IranSharp';
+  font-weight: bold;
+  font-size: 12px;
+  border-radius: ${(_ref) => {let { theme } = _ref;return `${theme.borderRadius}px`;}};
+  border: solid 1px ${(_ref2) => {let { theme } = _ref2;return theme.borderColor.normal;}};
+  padding: 4px;
+  box-sizing: border-box;
+  width: 100%;
+
+  &::file-selector-button {
+    color: ${(_ref3) => {let { theme } = _ref3;return `${theme.colors.blue}`;}};
+    padding: 0.5em;
+    border: ${(_ref4) => {let { theme } = _ref4;return `thin solid ${theme.colors.blue}`;}};
+    border-radius: 3px;
+    width: 100px;
+    height: 80;
+  }
+
+  &[disabled=""]{
+    background-color: ${(_ref5) => {let { theme } = _ref5;return theme.disabled.background;}};
+    color: ${(_ref6) => {let { theme } = _ref6;return theme.disabled.color;}};
+    border-color: transparent;
+
+
+    &:hover {
+      border-color: transparent;
+    }
+  }
+
+  &:hover {
+    border-color: ${(_ref7) => {let { theme } = _ref7;return theme.borderColor.hover;}};
+  }
+
+  &:focus {
+    border-color: ${(_ref8) => {let { theme } = _ref8;return theme.borderColor.focus;}};
+  }
+`;
+
+const LabelContainer = exports.LabelContainer = (0, _styledComponents.default)(_typography.Text)`
+  display: block;
+  margin-bottom: 8px;
+`;
+
+const DescriptionContainer = exports.DescriptionContainer = (0, _styledComponents.default)(_typography.Text)`
+  display: block;
+  margin-bottom: 4px;
+`;
+
+const PasswordIcon = exports.PasswordIcon = (0, _styledComponents.default)(_icon.default)`
+  position: absolute;
+  left: 0;
+  bottom: 6px;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;

package/dist/components/form-v7/file-input/index.test.js

@@ -0,0 +1,63 @@
+"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('text input tests', () => {
+  it('render simple text input', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name" }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.length).toBe(1);
+  });
+
+  it('render text input with placeholder', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name", placeholder: "hi guys" }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.find('input').prop('placeholder')).toBe('hi guys');
+  });
+
+  it('test text input id without id props', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name", placeholder: "hi guys" }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.find('input').prop('id')).toBe('text-engname');
+  });
+
+  it('render text input - full props', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name", placeholder: "hi guys", type: "text", id: "hiiii-id" }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.find('input').prop('id')).toBe('hiiii-id');
+    expect(textInput.find('input').prop('type')).toBe('text');
+    expect(textInput.find('input').prop('placeholder')).toBe('hi guys');
+    expect(textInput.find('input').prop('name')).toBe('eng name');
+    expect(textInput.length).not.toBe(0);
+  });
+
+  it('render disabled input', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name", disabled: true }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.find('input').prop('disabled')).toBe(true);
+  });
+
+  it('render with or without text-input-description', () => {
+    const componentWithDesc = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "with desc", description: "hiiiiii" }));
+    const componentWithoutDesc = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "without desc" }));
+    const textInputDescription01 = (0, _test.default)(componentWithDesc, 'text-input-description');
+    const textInputDescription02 = (0, _test.default)(componentWithoutDesc, 'text-input-description');
+
+    expect(textInputDescription01.length).toBe(1);
+    expect(textInputDescription02.length).toBe(0);
+  });
+
+  it('render with or err msg', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "with desc", description: "hiiiiii", errorMessage: "this is a good err" }));
+    const textInputErrorMessage = (0, _test.default)(component, 'error-message');
+
+    expect(textInputErrorMessage.length).toBe(1);
+    expect(textInputErrorMessage.children().text()).toBe('this is a good err');
+  });
+});