react-jupiter 5.12.0 → 6.0.0-beta.1

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

@@ -0,0 +1,188 @@
+import React from 'react';
+import Table from './index';
+import Icon from '../icon';
+
+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: (<Icon name="watch-later" size="lg" />),
+  },
+  {
+    key: 'the2ndRow',
+    firstTitle: 'احمد',
+    tirdTitle: 'آبدارجی',
+    the5th: (<a href="http://evand.com">لینک تستی</a>),
+    forthTitle: '۵۵ ساله',
+    status: 'yellow',
+    callToActions: [
+      {
+        text: 'نایینی',
+        props: { renderLink: (element) => <a href="http://google.com">{element}</a> },
+      },
+      {
+        props: { renderLink: (element) => <a href="http://yahoo.com">{element}</a> },
+        text: 'دومی',
+      },
+      {
+        props: { renderLink: (element) => <a href="http://evand.com">{element}</a> },
+        text: 'سومین مورد',
+      },
+      {
+        props: { renderLink: (element) => <a href="http://evand.com">{element}</a> },
+        text: ' بعدی',
+      },
+      {
+        props: { renderLink: (element) => <a href="http://evand.com">{element}</a> },
+        text: 'بعدیش مورد',
+      },
+    ],
+  },
+  {
+    status: 'green',
+    key: 'the3hRow',
+    firstTitle: 'زهرا',
+    tirdTitle: 'مدیر فروش',
+    forthTitle: '۲۰ ساله',
+    callToActions: [
+      {
+        props: {
+          renderLink: (element) => <a href="https://devhints.io/enzyme">{element}</a>,
+          disabled: true,
+        },
+        text: 'زنگنه',
+      },
+    ],
+  },
+];
+
+export default {
+  title: 'Components/Table',
+  component: Table,
+  argTypes: {
+    columns: {
+      control: 'array',
+      description: 'Array of column definitions',
+    },
+    data: {
+      control: 'array',
+      description: 'Array of data rows',
+    },
+  },
+};
+
+const Template = (args) => <Table {...args} />;
+
+export const 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' },
+  ],
+};
+
+export const 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) => (
+    <div>
+      <Icon name="edit" size="small" />
+      <Icon name="delete" size="small" />
+    </div>
+  ),
+};
+
+export const 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/src/components/table/index.style.js

@@ -0,0 +1,107 @@
+import styled from 'styled-components';
+import { getColorFromName } from '../utils/theme';
+
+export const TableContainer = styled.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;
+    }
+  ${({ isResponsiveView, actionColumnNumber }) => {
+    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 '';
+  }}
+  }
+`;
+
+export const ShowMoreButton = styled.button`
+  background: transparent;
+  border: none;
+  color: ${({ theme }) => 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;
+`;
+
+export const ActionCellContainer = styled.div`
+  display: flex;
+`;
+
+export const ActionsContainer = styled.div`
+  box-shadow:
+    ${({ theme }) => `0 0 ${theme.shadow.blur}px ${theme.shadow.spread}px rgba(0, 0, 0, ${theme.shadow.opacity});`}
+  background: white;
+  position: absolute;
+  z-index: 1;
+`;
+
+export const Tr = styled.tr`
+  ${({ status }) => {
+    if (status) {
+      return `
+        border-right: 4px solid ${getColorFromName(undefined, status)};
+        transition: border 0.25s;
+
+        &:hover {
+          border-right-width: 8px;
+        }
+      `;
+    }
+    return '';
+  }};
+`;

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import 'jest-styled-components';
+import findByTestAtrr from '../utils/test';
+import Table from './index';
+
+const defaultColumns = [
+  {
+    key: 'firstTitle',
+    label: 'عنوان اول',
+    dataType: 'text',
+  },
+];
+const defaultData = [
+  {
+    key: 'firstRow',
+    firstTitle: 'سارا',
+  },
+];
+
+const setupMount = (columns = defaultColumns, data = defaultData) => (
+  mount(<Table columns={columns} data={data} />)
+);
+
+describe('Table Tests', () => {
+  it('render table and display minimal data properly', () => {
+    const component = setupMount();
+    const Table = findByTestAtrr(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 = findByTestAtrr(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 = findByTestAtrr(component, 'jupiter-table');
+
+    expect(Table.find('tbody').childAt(0).text()).toBe('سارااحمدیمدیر بازرگانی-');
+    expect(Table.find('tbody').childAt(1).text()).toBe('احمدنایینیآبدارجی۵۵ ساله');
+  });
+});

package/src/components/table/tableHeaderRow.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text } from '../typography';
+
+type Props = {
+  columns: [
+    {
+      key: string,
+      label: string,
+      dataType: 'text' | 'action' | 'node',
+    }
+  ],
+};
+
+function TableHeaderRow({ columns }: Props) {
+  return (
+    <tr>
+      {columns.map((headerItem) => (
+        <th key={headerItem.key}>
+          <Text size={16} bold>
+            {headerItem.label}
+          </Text>
+        </th>
+      ))}
+    </tr>
+  );
+}
+
+export default TableHeaderRow;

package/src/components/table/tableRow.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import ActionCell from './actionCell';
+import { Text } from '../typography';
+import { Padding } from '../spacing';
+import { Tr } from './index.style';
+
+type Props = {
+  columns: [
+    {
+      key: string,
+      label: string,
+      dataType: 'text' | 'action' | 'node',
+    }
+  ],
+  rowItem: {
+    key: string,
+    status?: 'red' | 'green' | 'yellow',
+    callToActions?: [{
+      props?: {},
+      text: string,
+    }]
+  },
+};
+
+function TableRow({ rowItem, columns }: Props) {
+  return (
+    <Tr status={rowItem.status || null}>
+      {columns.map((columnItem) => {
+        if (columnItem.dataType === 'action') {
+          if (rowItem.callToActions && rowItem.callToActions.length > 0) {
+            return (
+              <ActionCell
+                key={`${rowItem.key}-${columnItem.key}`}
+                callToActions={rowItem.callToActions}
+              />
+            );
+          }
+          return (
+            <td key={`${rowItem.key}-${columnItem.key}`}>
+              <Padding top={3}>
+                <Text size={14}>
+                  -
+                </Text>
+              </Padding>
+            </td>
+          );
+        }
+        return (
+          <td key={`${rowItem.key}-${columnItem.key}`}>
+            <Text size={14}>
+              {rowItem[columnItem.key] || '-'}
+            </Text>
+          </td>
+        );
+      })}
+    </Tr>
+  );
+}
+
+export default TableRow;

package/src/components/table/theme.js

@@ -0,0 +1,8 @@
+import defaultTheme from '../themes';
+
+const theme = {
+  showMoreColor: defaultTheme.colors.blue600,
+  shadow: defaultTheme.shadows[1],
+};
+
+export default theme;

package/src/components/tabs/index.js

@@ -0,0 +1,10 @@
+import Tabs from './tabs';
+import TabPanel from './tabPanel';
+
+export { default as Tabs } from './tabs';
+export { default as TabPanel } from './tabPanel';
+
+export default {
+  Tabs,
+  TabPanel,
+};

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

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { Tabs, TabPanel } from './index';
+
+export default {
+  title: 'Tabs',
+  component: Tabs,
+  
+  argTypes: {
+    defaultTab: {
+      control: 'select',
+      options: ['firstTab', 'secTab', 'thirsdTab', 'the4thTab'],
+      defaultValue: 'firstTab',
+    },
+    onChange: {
+      action: 'onChange',
+    },
+  },
+};
+
+const Template = (args) => (
+  <Tabs {...args}>
+    <TabPanel label="تب اول" tabKey="firstTab">
+      this is 1th panel data
+    </TabPanel>
+    <TabPanel label="تب دوم اینجا" tabKey="secTab">
+      this is 2nd panel data
+    </TabPanel>
+    <TabPanel label="تب سوم طولانی است" tabKey="thirsdTab">
+      this is 3th panel data
+    </TabPanel>
+    <TabPanel label="تب بعدی خیلی خیلی خیلی خیلی طولانی است" tabKey="the4thTab">
+      this is ۴th panel data
+    </TabPanel>
+  </Tabs>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  defaultTab: 'firstTab',
+  onChange: action('optional onChange function, triggers what you want to do in onChange tab (it has new tabKey as input argument)'),
+};
+
+export const SecondTabDefault = Template.bind({});
+SecondTabDefault.args = {
+  ...Default.args,
+  defaultTab: 'secTab',
+};
+
+export const ThirdTabDefault = Template.bind({});
+ThirdTabDefault.args = {
+  ...Default.args,
+  defaultTab: 'thirsdTab',
+};
+
+export const FourthTabDefault = Template.bind({});
+FourthTabDefault.args = {
+  ...Default.args,
+  defaultTab: 'the4thTab',
+};

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

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const TabHeader = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+export const StyledButton = styled.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 ${({ theme }) => (theme.defaultColor)};
+  border-radius: ${({ theme }) => (theme.borderRadius)}px;
+  cursor: pointer;
+  transition:  ${({ theme }) => (theme.transition)};
+
+  span {
+    color: ${({ theme }) => (theme.defaultColor)};
+    transition:  ${({ theme }) => (theme.transition)};
+  }
+
+  &:hover, &.active {
+    border-color: ${({ theme }) => (theme.secoundColor)};
+
+    span {
+      color: ${({ theme }) => (theme.secoundColor)};
+    }
+  }
+`;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Tabs, TabPanel } from './index';
+import findByTestAtrr from '../utils/test';
+
+describe('Tabs', () => {
+  it('render tabs container and tabs propare panel and tabs labels', () => {
+    const component = mount(
+      <Tabs>
+        <TabPanel label="تب اول" key="firstTab">
+          this is 1th panel data
+        </TabPanel>
+        <TabPanel label="تب دوم اینجا" key="secTab">
+          this is 2nd panel data
+        </TabPanel>
+        <TabPanel label="تب سوم طولانی است" key="thirsdTab">
+          this is 3th panel data
+        </TabPanel>
+      </Tabs>,
+    );
+    const tabsContainer = findByTestAtrr(component, 'tabs-container');
+    const tabPanel = findByTestAtrr(component, 'tabs-panel');
+    const tabLabel = findByTestAtrr(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/src/components/tabs/tabPanel.js

@@ -0,0 +1,17 @@
+import React, { type Node } from 'react';
+
+type Props = {
+  children: * => Node,
+  label: string,
+  tabKey: string,
+};
+
+function TabPanel({ children, label, tabKey }: Props) {
+  return (
+    <div className={`${label}-${tabKey}`} data-test="tabs-panel">
+      {children}
+    </div>
+  );
+}
+
+export default TabPanel;