react-jupiter 5.12.0 → 6.0.0-beta.2

package/dist/components/table/index.stories.js

@@ -0,0 +1,188 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithSorting = exports.WithActions = exports.Minimal = void 0;var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));
+var _icon = _interopRequireDefault(require("../icon"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const columns = [
+{
+  key: 'firstTitle',
+  label: 'عنوان اول',
+  dataType: 'text'
+}];
+
+const data = [
+{
+  key: 'firstRow',
+  firstTitle: 'سارا'
+}];
+
+
+const columns02 = [
+{
+  key: 'firstTitle',
+  label: 'عنوان اول',
+  dataType: 'text'
+},
+{
+  key: 'tirdTitle',
+  label: 'عنوان سوم اینجا قرار می گیرد',
+  dataType: 'node'
+},
+{
+  key: 'forthTitle',
+  label: 'عنوان چهارم',
+  dataType: 'text'
+}];
+
+
+const columns03 = [
+{
+  key: 'firstTitle',
+  label: 'نام',
+  dataType: 'text'
+},
+{
+  key: 'secoundTitle',
+  label: 'نام خانوادگی',
+  dataType: 'action'
+},
+{
+  key: 'tirdTitle',
+  label: 'سمت',
+  dataType: 'node'
+},
+{
+  key: 'forthTitle',
+  label: 'سن',
+  dataType: 'text'
+},
+{
+  key: 'the5th',
+  label: 'نوع نود',
+  dataType: 'node'
+}];
+
+
+const data03 = [
+{
+  key: 'firstRow',
+  firstTitle: 'سارا',
+  tirdTitle: 'مدیر بازرگانی',
+  wrongTitle: '۳۰ ساله',
+  the5th: /*#__PURE__*/_react.default.createElement(_icon.default, { name: "watch-later", size: "lg" })
+},
+{
+  key: 'the2ndRow',
+  firstTitle: 'احمد',
+  tirdTitle: 'آبدارجی',
+  the5th: /*#__PURE__*/_react.default.createElement("a", { href: "http://evand.com" }, "\u0644\u06CC\u0646\u06A9 \u062A\u0633\u062A\u06CC"),
+  forthTitle: '۵۵ ساله',
+  status: 'yellow',
+  callToActions: [
+  {
+    text: 'نایینی',
+    props: { renderLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "http://google.com" }, element) }
+  },
+  {
+    props: { renderLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "http://yahoo.com" }, element) },
+    text: 'دومی'
+  },
+  {
+    props: { renderLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "http://evand.com" }, element) },
+    text: 'سومین مورد'
+  },
+  {
+    props: { renderLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "http://evand.com" }, element) },
+    text: ' بعدی'
+  },
+  {
+    props: { renderLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "http://evand.com" }, element) },
+    text: 'بعدیش مورد'
+  }]
+
+},
+{
+  status: 'green',
+  key: 'the3hRow',
+  firstTitle: 'زهرا',
+  tirdTitle: 'مدیر فروش',
+  forthTitle: '۲۰ ساله',
+  callToActions: [
+  {
+    props: {
+      renderLink: (element) => /*#__PURE__*/_react.default.createElement("a", { href: "https://devhints.io/enzyme" }, element),
+      disabled: true
+    },
+    text: 'زنگنه'
+  }]
+
+}];var _default = exports.default =
+
+
+{
+  title: 'Components/Table',
+  component: _index.default,
+  argTypes: {
+    columns: {
+      control: 'array',
+      description: 'Array of column definitions'
+    },
+    data: {
+      control: 'array',
+      description: 'Array of data rows'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {
+  columns: [
+  { id: 'name', label: 'Name' },
+  { id: 'age', label: 'Age' },
+  { id: 'city', label: 'City' }],
+
+  data: [
+  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
+  { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' }]
+
+};
+
+const WithActions = exports.WithActions = Template.bind({});
+WithActions.args = {
+  columns: [
+  { id: 'name', label: 'Name' },
+  { id: 'age', label: 'Age' },
+  { id: 'city', label: 'City' },
+  { id: 'actions', label: 'Actions' }],
+
+  data: [
+  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
+  { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' }],
+
+  renderActions: (row) => /*#__PURE__*/
+  _react.default.createElement("div", null, /*#__PURE__*/
+  _react.default.createElement(_icon.default, { name: "edit", size: "small" }), /*#__PURE__*/
+  _react.default.createElement(_icon.default, { name: "delete", size: "small" })
+  )
+
+};
+
+const WithSorting = exports.WithSorting = Template.bind({});
+WithSorting.args = {
+  columns: [
+  { id: 'name', label: 'Name', sortable: true },
+  { id: 'age', label: 'Age', sortable: true },
+  { id: 'city', label: 'City', sortable: true }],
+
+  data: [
+  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
+  { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' }],
+
+  onSort: (columnId, direction) => {
+    console.log(`Sorting ${columnId} in ${direction} direction`);
+  }
+};

package/dist/components/table/index.style.js

@@ -0,0 +1,107 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.Tr = exports.TableContainer = exports.ShowMoreButton = exports.ActionsContainer = exports.ActionCellContainer = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = require("../utils/theme");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const TableContainer = exports.TableContainer = _styledComponents.default.div`
+  overflow-x: auto;
+
+  table {
+    width: 100%;
+  
+    tr {
+      border-top: 1px solid;
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      padding: 16px;
+    }
+    
+    tbody tr:nth-child(2n-1) {
+      background: #f9f9f9;
+      td {
+        background: #f9f9f9;
+      }
+    }
+    tbody tr:nth-child(2n) {
+      background: white;
+      td {
+        background: white;
+      }
+    }
+  
+    th, td {
+      width: 177px;
+      text-align: right;
+      display: inline-flex;
+      margin-left: 16px;
+    }
+  ${(_ref) => {let { isResponsiveView, actionColumnNumber } = _ref;
+  if (actionColumnNumber && isResponsiveView) {
+    return `
+        td:last-child, th:last-child {
+          margin-left: 117px;
+        }
+        td:nth-child(${actionColumnNumber}) {
+          position: absolute;
+          left: 10px;
+          margin: -4px;
+          padding-right: 16px;
+          width: 130px;
+        }
+        th:nth-child(${actionColumnNumber}) {
+          background: white;
+          position: absolute;
+          left: 10px;
+          margin: 0 -11px;
+          padding-right: 16px;
+          width: 130px;
+        }
+      `;
+  }
+  return '';
+}}
+  }
+`;
+
+const ShowMoreButton = exports.ShowMoreButton = _styledComponents.default.button`
+  background: transparent;
+  border: none;
+  color: ${(_ref2) => {let { theme } = _ref2;return theme.showMoreColor;}};
+  font-size: 33px;
+  line-height: 10px;
+  padding: 0;
+  display: inline-flex;
+  align-items: flex-start;
+  transform: rotate(90deg);
+  height: 36px;
+  width: 36px;
+  cursor: pointer;
+  padding-right: 5px;
+`;
+
+const ActionCellContainer = exports.ActionCellContainer = _styledComponents.default.div`
+  display: flex;
+`;
+
+const ActionsContainer = exports.ActionsContainer = _styledComponents.default.div`
+  box-shadow:
+    ${(_ref3) => {let { theme } = _ref3;return `0 0 ${theme.shadow.blur}px ${theme.shadow.spread}px rgba(0, 0, 0, ${theme.shadow.opacity});`;}}
+  background: white;
+  position: absolute;
+  z-index: 1;
+`;
+
+const Tr = exports.Tr = _styledComponents.default.tr`
+  ${(_ref4) => {let { status } = _ref4;
+  if (status) {
+    return `
+        border-right: 4px solid ${(0, _theme.getColorFromName)(undefined, status)};
+        transition: border 0.25s;
+
+        &:hover {
+          border-right-width: 8px;
+        }
+      `;
+  }
+  return '';
+}};
+`;

package/dist/components/table/index.test.js

@@ -0,0 +1,119 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+require("jest-styled-components");
+var _test = _interopRequireDefault(require("../utils/test"));
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const defaultColumns = [
+{
+  key: 'firstTitle',
+  label: 'عنوان اول',
+  dataType: 'text'
+}];
+
+const defaultData = [
+{
+  key: 'firstRow',
+  firstTitle: 'سارا'
+}];
+
+
+const setupMount = function () {let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultColumns;let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultData;return (
+    (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { columns: columns, data: data })));};
+
+
+describe('Table Tests', () => {
+  it('render table and display minimal data properly', () => {
+    const component = setupMount();
+    const Table = (0, _test.default)(component, 'jupiter-table');
+
+    expect(Table.length).not.toBe(0);
+    expect(Table.find('thead tr').childAt(0).text()).toBe('عنوان اول');
+    expect(Table.find('tbody tr').childAt(0).text()).toBe('سارا');
+  });
+
+  it('render table header', () => {
+    const columns = [
+    {
+      key: 'firstTitle',
+      label: 'عنوان اول',
+      dataType: 'text'
+    },
+    {
+      key: 'secoundTitle',
+      label: 'عنوان دوم',
+      dataType: 'text'
+    },
+    {
+      key: 'tirdTitle',
+      label: 'عنوان سوم اینجا قرار می گیرد',
+      dataType: 'node'
+    },
+    {
+      key: 'forthTitle',
+      label: 'عنوان چهارم',
+      dataType: 'text'
+    }];
+
+    const component = setupMount(columns);
+    const Table = (0, _test.default)(component, 'jupiter-table');
+
+    expect(Table.find('thead tr').childAt(0).text()).toBe('عنوان اول');
+    expect(Table.find('thead tr').childAt(1).text()).toBe('عنوان دوم');
+    expect(Table.find('thead tr').childAt(2).text()).toBe('عنوان سوم اینجا قرار می گیرد');
+    expect(Table.find('thead tr').childAt(3).text()).toBe('عنوان چهارم');
+  });
+
+  it('render table body proparely', () => {
+    const columns = [
+    {
+      key: 'firstTitle',
+      label: 'نام',
+      dataType: 'text'
+    },
+    {
+      key: 'secoundTitle',
+      label: 'نام خانوادگی',
+      dataType: 'text'
+    },
+    {
+      key: 'tirdTitle',
+      label: 'سمت',
+      dataType: 'node'
+    },
+    {
+      key: 'forthTitle',
+      label: 'سن',
+      dataType: 'text'
+    }];
+
+    const data = [
+    {
+      key: 'firstRow',
+      firstTitle: 'سارا',
+      tirdTitle: 'مدیر بازرگانی',
+      wrongTitle: '۳۰ ساله',
+      secoundTitle: 'احمدی'
+    },
+    {
+      key: 'the2ndRow',
+      firstTitle: 'احمد',
+      secoundTitle: 'نایینی',
+      tirdTitle: 'آبدارجی',
+      forthTitle: '۵۵ ساله'
+    },
+    {
+      key: 'the3hRow',
+      firstTitle: 'زهرا',
+      secoundTitle: 'زنگنه',
+      tirdTitle: 'مدیر فروش',
+      forthTitle: '۲۰ ساله'
+    }];
+
+    const component = setupMount(columns, data);
+    const Table = (0, _test.default)(component, 'jupiter-table');
+
+    expect(Table.find('tbody').childAt(0).text()).toBe('سارااحمدیمدیر بازرگانی-');
+    expect(Table.find('tbody').childAt(1).text()).toBe('احمدنایینیآبدارجی۵۵ ساله');
+  });
+});

package/dist/components/table/tableHeaderRow.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _typography = require("../typography");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+
+
+function TableHeaderRow(_ref) {let { columns } = _ref;
+  return (/*#__PURE__*/
+    _react.default.createElement("tr", null,
+    columns.map((headerItem) => /*#__PURE__*/
+    _react.default.createElement("th", { key: headerItem.key }, /*#__PURE__*/
+    _react.default.createElement(_typography.Text, { size: 16, bold: true },
+    headerItem.label
+    )
+    )
+    )
+    ));
+
+}var _default = exports.default =
+
+TableHeaderRow;

package/dist/components/table/tableRow.js

@@ -0,0 +1,60 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _actionCell = _interopRequireDefault(require("./actionCell"));
+var _typography = require("../typography");
+var _spacing = require("../spacing");
+var _index = require("./index.style");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function TableRow(_ref) {let { rowItem, columns } = _ref;
+  return (/*#__PURE__*/
+    _react.default.createElement(_index.Tr, { status: rowItem.status || null },
+    columns.map((columnItem) => {
+      if (columnItem.dataType === 'action') {
+        if (rowItem.callToActions && rowItem.callToActions.length > 0) {
+          return (/*#__PURE__*/
+            _react.default.createElement(_actionCell.default, {
+              key: `${rowItem.key}-${columnItem.key}`,
+              callToActions: rowItem.callToActions }
+            ));
+
+        }
+        return (/*#__PURE__*/
+          _react.default.createElement("td", { key: `${rowItem.key}-${columnItem.key}` }, /*#__PURE__*/
+          _react.default.createElement(_spacing.Padding, { top: 3 }, /*#__PURE__*/
+          _react.default.createElement(_typography.Text, { size: 14 }, "-"
+
+          )
+          )
+          ));
+
+      }
+      return (/*#__PURE__*/
+        _react.default.createElement("td", { key: `${rowItem.key}-${columnItem.key}` }, /*#__PURE__*/
+        _react.default.createElement(_typography.Text, { size: 14 },
+        rowItem[columnItem.key] || '-'
+        )
+        ));
+
+    })
+    ));
+
+}var _default = exports.default =
+
+TableRow;

package/dist/components/table/theme.js

@@ -0,0 +1,8 @@
+"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 = {
+  showMoreColor: _themes.default.colors.blue600,
+  shadow: _themes.default.shadows[1]
+};var _default = exports.default =
+
+theme;

package/dist/components/tabs/index.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () {return _tabPanel.default;} });Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () {return _tabs.default;} });exports.default = void 0;var _tabs = _interopRequireDefault(require("./tabs"));
+var _tabPanel = _interopRequireDefault(require("./tabPanel"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+
+
+
+{
+  Tabs: _tabs.default,
+  TabPanel: _tabPanel.default
+};

package/dist/components/tabs/index.stories.js

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.ThirdTabDefault = exports.SecondTabDefault = exports.FourthTabDefault = exports.Default = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+var _index = require("./index");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+{
+  title: 'Tabs',
+  component: _index.Tabs,
+
+  argTypes: {
+    defaultTab: {
+      control: 'select',
+      options: ['firstTab', 'secTab', 'thirsdTab', 'the4thTab'],
+      defaultValue: 'firstTab'
+    },
+    onChange: {
+      action: 'onChange'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/
+_react.default.createElement(_index.Tabs, args, /*#__PURE__*/
+_react.default.createElement(_index.TabPanel, { label: "\u062A\u0628 \u0627\u0648\u0644", tabKey: "firstTab" }, "this is 1th panel data"
+
+), /*#__PURE__*/
+_react.default.createElement(_index.TabPanel, { label: "\u062A\u0628 \u062F\u0648\u0645 \u0627\u06CC\u0646\u062C\u0627", tabKey: "secTab" }, "this is 2nd panel data"
+
+), /*#__PURE__*/
+_react.default.createElement(_index.TabPanel, { label: "\u062A\u0628 \u0633\u0648\u0645 \u0637\u0648\u0644\u0627\u0646\u06CC \u0627\u0633\u062A", tabKey: "thirsdTab" }, "this is 3th panel data"
+
+), /*#__PURE__*/
+_react.default.createElement(_index.TabPanel, { label: "\u062A\u0628 \u0628\u0639\u062F\u06CC \u062E\u06CC\u0644\u06CC \u062E\u06CC\u0644\u06CC \u062E\u06CC\u0644\u06CC \u062E\u06CC\u0644\u06CC \u0637\u0648\u0644\u0627\u0646\u06CC \u0627\u0633\u062A", tabKey: "the4thTab" }, "this is \u06F4th panel data"
+
+)
+);
+
+
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  defaultTab: 'firstTab',
+  onChange: (0, _addonActions.action)('optional onChange function, triggers what you want to do in onChange tab (it has new tabKey as input argument)')
+};
+
+const SecondTabDefault = exports.SecondTabDefault = Template.bind({});
+SecondTabDefault.args = {
+  ...Default.args,
+  defaultTab: 'secTab'
+};
+
+const ThirdTabDefault = exports.ThirdTabDefault = Template.bind({});
+ThirdTabDefault.args = {
+  ...Default.args,
+  defaultTab: 'thirsdTab'
+};
+
+const FourthTabDefault = exports.FourthTabDefault = Template.bind({});
+FourthTabDefault.args = {
+  ...Default.args,
+  defaultTab: 'the4thTab'
+};

package/dist/components/tabs/index.style.js

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.TabHeader = exports.StyledButton = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const TabHeader = exports.TabHeader = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const StyledButton = exports.StyledButton = _styledComponents.default.button`
+  min-width: 140px;
+  max-width: 210px;
+  height: 35px;
+
+  margin: 4px 0 4px 8px;
+  padding: 0 8px;
+  box-sizing: border-box;
+
+  background: transparent;
+  border: 1px solid ${(_ref) => {let { theme } = _ref;return theme.defaultColor;}};
+  border-radius: ${(_ref2) => {let { theme } = _ref2;return theme.borderRadius;}}px;
+  cursor: pointer;
+  transition:  ${(_ref3) => {let { theme } = _ref3;return theme.transition;}};
+
+  span {
+    color: ${(_ref4) => {let { theme } = _ref4;return theme.defaultColor;}};
+    transition:  ${(_ref5) => {let { theme } = _ref5;return theme.transition;}};
+  }
+
+  &:hover, &.active {
+    border-color: ${(_ref6) => {let { theme } = _ref6;return theme.secoundColor;}};
+
+    span {
+      color: ${(_ref7) => {let { theme } = _ref7;return theme.secoundColor;}};
+    }
+  }
+`;

package/dist/components/tabs/index.test.js

@@ -0,0 +1,30 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _index = require("./index");
+var _test = _interopRequireDefault(require("../utils/test"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+describe('Tabs', () => {
+  it('render tabs container and tabs propare panel and tabs labels', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/
+      _react.default.createElement(_index.Tabs, null, /*#__PURE__*/
+      _react.default.createElement(_index.TabPanel, { label: "\u062A\u0628 \u0627\u0648\u0644", key: "firstTab" }, "this is 1th panel data"
+
+      ), /*#__PURE__*/
+      _react.default.createElement(_index.TabPanel, { label: "\u062A\u0628 \u062F\u0648\u0645 \u0627\u06CC\u0646\u062C\u0627", key: "secTab" }, "this is 2nd panel data"
+
+      ), /*#__PURE__*/
+      _react.default.createElement(_index.TabPanel, { label: "\u062A\u0628 \u0633\u0648\u0645 \u0637\u0648\u0644\u0627\u0646\u06CC \u0627\u0633\u062A", key: "thirsdTab" }, "this is 3th panel data"
+
+      )
+      )
+    );
+    const tabsContainer = (0, _test.default)(component, 'tabs-container');
+    const tabPanel = (0, _test.default)(component, 'tabs-panel');
+    const tabLabel = (0, _test.default)(component, 'tab-label').find("[type='button']");
+
+    expect(tabsContainer.length).toBe(1);
+    expect(tabPanel.length).toBe(1);
+    expect(tabPanel.text()).toBe('this is 1th panel data');
+    expect(tabLabel.at(0).text()).toBe('تب اول');
+  });
+});

package/dist/components/tabs/tabPanel.js

@@ -0,0 +1,17 @@
+"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 };}
+
+
+
+
+
+
+
+function TabPanel(_ref) {let { children, label, tabKey } = _ref;
+  return (/*#__PURE__*/
+    _react.default.createElement("div", { className: `${label}-${tabKey}`, "data-test": "tabs-panel" },
+    children
+    ));
+
+}var _default = exports.default =
+
+TabPanel;