react-jupiter 5.12.0 → 6.0.0-beta.2

package/dist/components/tabs/tabs.js

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _globalStyle = _interopRequireDefault(require("../globalStyle"));
+var _typography = require("../typography");
+var _index = require("./index.style");
+var _theme = _interopRequireDefault(require("./theme"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _getRequireWildcardCache(e) {if ("function" != typeof WeakMap) return null;var r = new WeakMap(),t = new WeakMap();return (_getRequireWildcardCache = function (e) {return e ? t : r;})(e);}function _interopRequireWildcard(e, r) {if (!r && e && e.__esModule) return e;if (null === e || "object" != typeof e && "function" != typeof e) return { default: e };var t = _getRequireWildcardCache(r);if (t && t.has(e)) return t.get(e);var n = { __proto__: null },a = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];}return n.default = e, t && t.set(e, n), n;}
+
+
+
+
+
+
+
+function Tabs(_ref)
+
+
+
+{let { defaultTab = '', onChange = () => {}, children } = _ref;
+  const tabPanels = _react.default.Children.toArray(children);
+  const [activeTabKey, setActiveTabKey] = (0, _react.useState)(defaultTab || tabPanels[0].props.tabKey);
+  const selectedTabPanel = tabPanels.find((item) => item.props.tabKey === activeTabKey);
+
+  (0, _react.useEffect)(() => {
+    onChange(activeTabKey);
+  }, [activeTabKey, onChange]);
+
+  function handleClick(e) {
+    let selectedTabKey;
+    if (e.target.tagName !== 'BUTTON') {
+      selectedTabKey = e.target.parentElement.attributes['data-access'].value;
+    } else {
+      selectedTabKey = e.target.attributes['data-access'].value;
+    }
+
+    if (selectedTabKey !== activeTabKey) {
+      setActiveTabKey(selectedTabKey);
+    }
+  }
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+    _react.default.createElement("div", { "data-test": "tabs-container" }, /*#__PURE__*/
+    _react.default.createElement(_index.TabHeader, null,
+    tabPanels.map((tabPanelData) => {
+      const { props: { label, tabKey } } = tabPanelData;
+
+      return (/*#__PURE__*/
+        _react.default.createElement(_index.StyledButton, {
+          "data-access": tabKey,
+          className: `${activeTabKey === tabKey ? 'active' : ''}`,
+          key: tabKey,
+          "data-test": "tab-label",
+          type: "button",
+          onClick: handleClick }, /*#__PURE__*/
+
+        _react.default.createElement(_typography.Text, { isCutWithEllipsis: true, size: 12 },
+        label || '-'
+        )
+        ));
+
+    })
+    ),
+
+    _react.default.cloneElement(selectedTabPanel)
+    )
+    ));
+
+}var _default = exports.default =
+
+Tabs;

package/dist/components/tabs/theme.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _themes = _interopRequireDefault(require("../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const theme = {
+  defaultColor: _themes.default.colors.blue400,
+  secoundColor: _themes.default.colors.blue600,
+  borderRadius: _themes.default.borderRadius.high,
+  transition: `all ${_themes.default.animation.time}s ${_themes.default.animation.method}`
+};var _default = exports.default =
+
+theme;

package/dist/components/themes.js

@@ -0,0 +1,97 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;const defaultTheme = {
+  colors: {
+    darkBlue800: '#091E31',
+    darkBlue600: '#132A3E', // default primary color
+    darkBlue400: '#013A5C',
+    darkBlue200: '#3673AA',
+    blue800: '#027EB8',
+    blue600: '#0095DB', // default secondary color
+    blue400: '#99D5F1',
+    blue200: '#E6F4FB',
+    green800: '#21B151',
+    green600: '#42D473', // default green color
+    green400: '#8BEFAC',
+    green200: '#C1FFD5',
+    red800: '#FF2020',
+    red600: '#FF5D5D', // default red color
+    red400: '#FF9C9C',
+    red200: '#FFE8E8',
+    yellow800: '#FFCC00',
+    yellow600: '#FFD324', // default yellow color
+    yellow400: '#FFE372',
+    yellow200: '#FFF4C9',
+    gray800: '#A7A7A7',
+    gray600: '#D2D2D2', // default gray color
+    gray400: '#EBEBEB',
+    gray200: '#F9F9F9',
+    riverBedDark: '#3B4141',
+    riverBed: '#555f61',
+    white: '#FFFFFF',
+    black: '#000000'
+  },
+  sizes: {
+    large: 'lg',
+    medium: 'md',
+    small: 'sm'
+  },
+  borderRadius: {
+    low: 2,
+    high: 5
+  },
+  border: {
+    lightBlue: '1px solid #E6F4FB'
+  },
+  shadows: {
+    1: {
+      blur: 8,
+      spread: 0,
+      opacity: 0.16
+    },
+    2: {
+      blur: 12,
+      spread: 0,
+      opacity: 0.20
+    },
+    3: {
+      blur: 16,
+      spread: 0,
+      opacity: 0.24
+    },
+    4: {
+      blur: 24,
+      spread: 0,
+      opacity: 0.32
+    },
+    5: {
+      blur: 32,
+      spread: 0,
+      opacity: 0.48
+    }
+  },
+  animation: {
+    time: 0.2,
+    method: 'ease-in'
+  },
+  breakpoints: {
+    xl: 1520,
+    lg: 1200,
+    md: 990,
+    sm: 768,
+    xs: 375
+  },
+  spacing: {
+    0: '0',
+    1: '1px',
+    2: '2px',
+    3: '4px',
+    4: '8px',
+    5: '16px',
+    6: '24px',
+    7: '32px',
+    8: '48px',
+    9: '64px',
+    10: '86px'
+  }
+};var _default = exports.default =
+
+defaultTheme;

package/dist/components/titled-avatar/index.js

@@ -0,0 +1,48 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+var _globalStyle = _interopRequireDefault(require("../globalStyle"));
+var _avatar = _interopRequireDefault(require("../avatar"));
+var _index = require("./index.style");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+
+
+const TitledAvatar = (_ref) =>
+
+
+
+
+
+{let { title, avatar, renderAvatarLink = () => false, avatarSize = 'md', titleSize = 12 } = _ref;
+  const renderTitle = () => /*#__PURE__*/
+  _react.default.createElement(_index.SmallTitle, { size: titleSize }, title);
+
+
+  if (renderAvatarLink) {
+    return renderAvatarLink(/*#__PURE__*/
+      _react.default.createElement(_index.Container, { "data-test": "titled-avatar" }, /*#__PURE__*/
+      _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+      _react.default.createElement(_avatar.default, { src: avatar, size: avatarSize, sizeMobile: avatarSize, round: true }),
+      renderTitle()
+      )
+    );
+  }
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_index.Container, { "data-test": "titled-avatar" }, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+    _react.default.createElement(_avatar.default, { src: avatar, size: avatarSize, sizeMobile: avatarSize, round: true }),
+    renderTitle()
+    ));
+
+};var _default = exports.default =
+
+TitledAvatar;

package/dist/components/titled-avatar/index.stories.js

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.Small = exports.Medium = exports.Linked = void 0;var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+{
+  title: 'Components/TitledAvatar',
+  component: _index.default,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Title text to display'
+    },
+    avatar: {
+      control: 'text',
+      description: 'URL of the avatar image'
+    },
+    avatarSize: {
+      control: 'text',
+      description: 'Size of the avatar in pixels'
+    },
+    titleSize: {
+      control: 'number',
+      description: 'Font size of the title in pixels'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const Small = exports.Small = Template.bind({});
+Small.args = {
+  title: 'John Doe',
+  avatar: 'https://placehold.co/100',
+  avatarSize: "sm",
+  titleSize: 10
+};
+
+const Medium = exports.Medium = Template.bind({});
+Medium.args = {
+  title: 'Jane Smith',
+  avatar: 'https://placehold.co/100',
+  avatarSize: "md",
+  titleSize: 20
+};
+
+const Linked = exports.Linked = Template.bind({});
+Linked.args = {
+  title: 'Bob Johnson',
+  avatar: 'https://placehold.co/100',
+  avatarSize: 80,
+  titleSize: 18,
+  renderAvatarLink: /*#__PURE__*/_react.default.createElement("a", { href: "/profile" }, "Profile")
+};

package/dist/components/titled-avatar/index.style.js

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.TitleContainer = exports.Title = exports.SmallTitle = exports.Container = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = require("../typography");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const Container = exports.Container = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+`;
+
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
+  height: 45px;
+  overflow: hidden;
+`;
+
+const Title = exports.Title = (0, _styledComponents.default)(_typography.Heading)`
+  margin: 8px 8px 8px 0;
+  max-height: 45px;
+  overflow: hidden;
+`;
+
+const SmallTitle = exports.SmallTitle = (0, _styledComponents.default)(_typography.Text)`
+  margin-right: 8px;
+  white-space: break-spaces;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

package/dist/components/titled-avatar/index.test.js

@@ -0,0 +1,25 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _index = _interopRequireDefault(require("./index"));
+var _test = _interopRequireDefault(require("../utils/test"));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 setupShallow = function () {let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};return (
+    (0, _enzyme.shallow)(/*#__PURE__*/
+      _react.default.createElement(_index.default, _extends({
+        title: props.title,
+        avatar: props.avatar },
+      props)
+      )
+    ));};
+
+
+describe('TitledAvatar', () => {
+  it('should render correctly', () => {
+    const component = setupShallow({
+      title: 'تیم برگزاری جاده ابریشم',
+      avatar: 'https://static.evand.net/images/organizations/logos/original/246c931fa36fd3ae8d05f59c64cd74d0.jpg'
+    });
+    const TitledAvatar = (0, _test.default)(component, 'titled-avatar');
+    expect(TitledAvatar.length).toBe(1);
+  });
+});

package/dist/components/typography/heading/index.js

@@ -0,0 +1,59 @@
+"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 _globalStyle = _interopRequireDefault(require("../../globalStyle"));
+var _theme = _interopRequireDefault(require("../theme"));
+var _index = require("./index.styles");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 { sizes } = _theme.default;
+
+const Heading = (_ref) =>
+
+
+
+
+
+{let { size = sizes.medium, level = 1, color = 'default', children, ...rest } = _ref;
+  const renderLevel = () => {
+    if (children === undefined) {
+      return null;
+    }
+    switch (level) {
+      case 6:
+        return /*#__PURE__*/_react.default.createElement(_index.H6, _extends({ size: size, "data-test": "h6-tag", color: color }, rest), children);
+      case 5:
+        return /*#__PURE__*/_react.default.createElement(_index.H5, _extends({ size: size, "data-test": "h5-tag", color: color }, rest), children);
+      case 4:
+        return /*#__PURE__*/_react.default.createElement(_index.H4, _extends({ size: size, "data-test": "h4-tag", color: color }, rest), children);
+      case 3:
+        return /*#__PURE__*/_react.default.createElement(_index.H3, _extends({ size: size, "data-test": "h3-tag", color: color }, rest), children);
+      case 2:
+        return /*#__PURE__*/_react.default.createElement(_index.H2, _extends({ size: size, "data-test": "h2-tag", color: color }, rest), children);
+      case 1:
+      default:
+        return /*#__PURE__*/_react.default.createElement(_index.H1, _extends({ size: size, "data-test": "h1-tag", color: color }, rest), children);
+    }
+  };
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null),
+    renderLevel()
+    ));
+
+};
+
+Heading.propTypes = {
+  children: _propTypes.default.oneOfType([
+  _propTypes.default.arrayOf(_propTypes.default.node),
+  _propTypes.default.node,
+  _propTypes.default.string]
+  ).isRequired,
+  size: _propTypes.default.oneOf([sizes.large, sizes.medium, sizes.small]),
+  level: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6]),
+  color: _propTypes.default.oneOf(['red', 'green', 'blue', 'yellow', 'white', 'darkBlue', 'default'])
+};var _default = exports.default =
+
+Heading;

package/dist/components/typography/heading/index.stories.js

@@ -0,0 +1,94 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.CustomSize = exports.CustomColor = void 0;var _react = _interopRequireDefault(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+{
+  title: 'Components/Typography/Heading',
+  component: _index.default,
+  argTypes: {
+    level: {
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6],
+      description: 'Heading level (h1-h6)'
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the heading'
+    },
+    color: {
+      control: 'color',
+      description: 'Color of the heading text'
+    },
+    children: {
+      control: 'text',
+      description: 'Heading content'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const H1 = exports.H1 = Template.bind({});
+H1.args = {
+  level: 1,
+  size: 'large',
+  color: '#000000',
+  children: 'Heading 1'
+};
+
+const H2 = exports.H2 = Template.bind({});
+H2.args = {
+  level: 2,
+  size: 'medium',
+  color: '#000000',
+  children: 'Heading 2'
+};
+
+const H3 = exports.H3 = Template.bind({});
+H3.args = {
+  level: 3,
+  size: 'medium',
+  color: '#000000',
+  children: 'Heading 3'
+};
+
+const H4 = exports.H4 = Template.bind({});
+H4.args = {
+  level: 4,
+  size: 'small',
+  color: '#000000',
+  children: 'Heading 4'
+};
+
+const H5 = exports.H5 = Template.bind({});
+H5.args = {
+  level: 5,
+  size: 'small',
+  color: '#000000',
+  children: 'Heading 5'
+};
+
+const H6 = exports.H6 = Template.bind({});
+H6.args = {
+  level: 6,
+  size: 'small',
+  color: '#000000',
+  children: 'Heading 6'
+};
+
+const CustomColor = exports.CustomColor = Template.bind({});
+CustomColor.args = {
+  level: 1,
+  size: 'large',
+  color: '#2196F3',
+  children: 'Blue Heading'
+};
+
+const CustomSize = exports.CustomSize = Template.bind({});
+CustomSize.args = {
+  level: 1,
+  size: 'small',
+  color: '#000000',
+  children: 'Small Heading'
+};

package/dist/components/typography/heading/index.styles.js

@@ -0,0 +1,69 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _theme = require("../../utils/theme");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const H1 = exports.H1 = _styledComponents.default.h1`
+  font-family: 'IranSharp';
+  margin: ${(_ref) => {let { theme, size } = _ref;return (0, _utils.getMarginOfHeading)(theme, size, 1);}}
+  font-size: ${(_ref2) => {let { theme, size } = _ref2;return `${(0, _utils.getSizeOfHeading)(theme, size, 1)}px;`;}}
+  line-height: ${(_ref3) => {let { theme, size } = _ref3;return `
+    ${(0, _utils.getSizeOfHeading)(theme, size, 1) * theme.lineHeightRatio}px;
+  `;}}
+  color: ${(_ref4) => {let { theme, color } = _ref4;return (0, _theme.getColorFromName)(theme, color);}};
+  font-weight: bold;
+`;
+
+const H2 = exports.H2 = _styledComponents.default.h2`
+  font-family: 'IranSharp';
+  margin: ${(_ref5) => {let { theme, size } = _ref5;return (0, _utils.getMarginOfHeading)(theme, size, 2);}};
+  font-size: ${(_ref6) => {let { theme, size } = _ref6;return `${(0, _utils.getSizeOfHeading)(theme, size, 2)}`;}}px;
+  line-height: ${(_ref7) => {let { theme, size } = _ref7;return `
+    ${(0, _utils.getSizeOfHeading)(theme, size, 2) * theme.lineHeightRatio}px;
+  `;}}
+  color: ${(_ref8) => {let { theme, color } = _ref8;return (0, _theme.getColorFromName)(theme, color);}};
+  font-weight: bold;
+`;
+
+const H3 = exports.H3 = _styledComponents.default.h3`
+  font-family: 'IranSharp';
+  margin: ${(_ref9) => {let { theme, size } = _ref9;return (0, _utils.getMarginOfHeading)(theme, size, 3);}}
+  font-size: ${(_ref0) => {let { theme, size } = _ref0;return `${(0, _utils.getSizeOfHeading)(theme, size, 3)}px;`;}}
+  line-height: ${(_ref1) => {let { theme, size } = _ref1;return `
+    ${(0, _utils.getSizeOfHeading)(theme, size, 3) * theme.lineHeightRatio}px;
+  `;}}
+  color: ${(_ref10) => {let { theme, color } = _ref10;return (0, _theme.getColorFromName)(theme, color);}};
+  font-weight: bold;
+`;
+
+const H4 = exports.H4 = _styledComponents.default.h4`
+  font-family: 'IranSharp';
+  margin: ${(_ref11) => {let { theme, size } = _ref11;return (0, _utils.getMarginOfHeading)(theme, size, 4);}}
+  font-size: ${(_ref12) => {let { theme, size } = _ref12;return `${(0, _utils.getSizeOfHeading)(theme, size, 4)}px;`;}}
+  line-height: ${(_ref13) => {let { theme, size } = _ref13;return `
+    ${(0, _utils.getSizeOfHeading)(theme, size, 4) * theme.lineHeightRatio}px;
+  `;}}
+  color: ${(_ref14) => {let { theme, color } = _ref14;return (0, _theme.getColorFromName)(theme, color);}};
+  font-weight: bold;
+`;
+
+const H5 = exports.H5 = _styledComponents.default.h5`
+  font-family: 'IranSharp';
+  margin: ${(_ref15) => {let { theme, size } = _ref15;return (0, _utils.getMarginOfHeading)(theme, size, 5);}}
+  font-size: ${(_ref16) => {let { theme, size } = _ref16;return `${(0, _utils.getSizeOfHeading)(theme, size, 5)}px;`;}}
+  line-height: ${(_ref17) => {let { theme, size } = _ref17;return `
+    ${(0, _utils.getSizeOfHeading)(theme, size, 5) * theme.lineHeightRatio}px;
+  `;}}
+  color: ${(_ref18) => {let { theme, color } = _ref18;return (0, _theme.getColorFromName)(theme, color);}};
+  font-weight: bold;
+`;
+
+const H6 = exports.H6 = _styledComponents.default.h6`
+  font-family: 'IranSharp';
+  margin: ${(_ref19) => {let { theme, size } = _ref19;return (0, _utils.getMarginOfHeading)(theme, size, 6);}}
+  font-size: ${(_ref20) => {let { theme, size } = _ref20;return `${(0, _utils.getSizeOfHeading)(theme, size, 6)}px;`;}}
+  line-height: ${(_ref21) => {let { theme, size } = _ref21;return `
+    ${(0, _utils.getSizeOfHeading)(theme, size, 6) * theme.lineHeightRatio}px;
+  `;}}
+  color: ${(_ref22) => {let { theme, color } = _ref22;return (0, _theme.getColorFromName)(theme, color);}};
+  font-weight: bold;
+`;