react-jupiter 5.12.0 → 6.0.0-beta.2

package/src/components/product-menu/index.js

@@ -0,0 +1,10 @@
+import Menu from './menu';
+import MenuItem from './menu-item';
+
+export { default as Menu } from './menu';
+export { default as MenuItem } from './menu-item';
+
+export default {
+  Menu,
+  MenuItem,
+};

package/src/components/product-menu/index.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Menu from './menu';
+import MenuItem from './menu-item';
+
+export default {
+  title: 'Components/ProductMenu',
+  component: Menu,
+  argTypes: {
+  },
+};
+
+const Template = (args) => (
+  <Menu {...args}>
+    <MenuItem label="Dashboard" handleClick={action('dashboard-clicked')} />
+    <MenuItem label="Profile" handleClick={action('profile-clicked')} />
+    <MenuItem label="Settings" handleClick={action('settings-clicked')} />
+  </Menu>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const WithCustomColorItem = (args) => (
+  <Menu {...args}>
+    <MenuItem label="Dashboard" handleClick={action('dashboard-clicked')} color="blue" />
+    <MenuItem label="Profile" handleClick={action('profile-clicked')} />
+    <MenuItem label="Settings" handleClick={action('settings-clicked')} />
+  </Menu>
+);
+WithCustomColorItem.args = {
+};

package/src/components/product-menu/index.style.js

@@ -0,0 +1,38 @@
+import style from 'styled-components';
+
+export const MenuWrapper = style.ol`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: ${({ justifyContent }) => (justifyContent ? justifyContent : 'space-between')};
+
+  li {
+    cursor: pointer;
+  }
+`;
+
+export const MenuListItem = style.li`
+  flex-shrink: 1;
+  min-width: ${({ theme }) => theme.itemMinWidth};
+  box-sizing: border-box;
+  ${({ isShowMoreItem }) => (isShowMoreItem ? 'position: relative;' : '')}
+`;
+
+
+export const ExtraMenuWrapper = style.ol`
+  opacity: ${({ showMore }) => (showMore ? '1' : '0')};
+  transition: opacity ${({ theme }) => `${theme.animation.time}s ${theme.animation.method}`};
+  position: absolute;
+  background: ${({ theme }) => theme.bgColor};
+  box-shadow:
+    ${({ theme }) => `0 0 ${theme.shadow.blur}px ${theme.shadow.spread}px rgba(0, 0, 0, ${theme.shadow.opacity});`}
+
+  li {
+    border-bottom: 1px solid ${({ theme }) => theme.borderColor};
+    min-width: ${({ theme }) => theme.itemMinWidth};
+  }
+`;
+
+export const Nav = style.nav`
+  border-bottom: 1px solid ${({ theme }) => theme.borderColor};
+`;

package/src/components/product-menu/index.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import findByTestAtrr from '../utils/test';
+import Menu from './menu';
+import MenuItem from './menu-item';
+
+describe('ProductMenu', () => {
+  it('render nav Menu', () => {
+    const component = shallow(<Menu />);
+    const wrapper = findByTestAtrr(component, 'product-menu');
+    expect(wrapper.length).toBe(1);
+  });
+  it('render ol', () => {
+    const component = shallow(<Menu />);
+    const wrapper = findByTestAtrr(component, 'product-menu').find('ol');
+    expect(wrapper.length).toBe(1);
+  });
+  it('render menu Item', () => {
+    const component = shallow(
+      <Menu>
+        <MenuItem label="hi" />
+      </Menu>,
+    );
+    const wrapper = findByTestAtrr(component, 'product-menu-item');
+    expect(wrapper.length).toBe(1);
+  });
+});

package/src/components/product-menu/menu-item.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text } from '../typography';
+
+type Props = {
+  label: string,
+  handleClick?: () => void,
+  color?: string
+}
+function MenuItem({ label, handleClick = () => {}, color = 'default' } : Props) {
+  return (
+    <Text
+      size={14}
+      bold
+      onClick={handleClick}
+      data-test="product-menu-item"
+      color={color}
+    >
+      {label}
+    </Text>
+  );
+}
+
+export default MenuItem;

package/src/components/product-menu/menu.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { Text } from '../typography';
+import { Padding } from '../spacing';
+import {
+  MenuWrapper,
+  MenuListItem,
+  ExtraMenuWrapper,
+  Nav,
+} from './index.style';
+import theme from './theme';
+
+type Props = {
+  showMore: boolean;
+  windowWith: number;
+  handleToggleShowMore: () => void;
+  children: * => Node;
+}
+function Menu(props : Props) {
+  const {
+    showMore, windowWith, handleToggleShowMore, children,
+  } = props;
+  const menuItems = React.Children.toArray(children);
+
+  function renderMenu() {
+    if (menuItems.length > 5 && windowWith > theme.breakpoints.sm) {
+      return (
+        <>
+          {
+            menuItems.filter((item, index) => index < 4).map(
+              (menuItem) => (
+                <MenuListItem key={menuItem.key}>
+                  <Padding left={2} right={2}>
+                    {React.cloneElement(menuItem)}
+                  </Padding>
+                </MenuListItem>
+              ),
+            )
+          }
+          <MenuListItem isShowMoreItem>
+            <Text size={16} bold onClick={handleToggleShowMore}>
+              بیشتر
+            </Text>
+            <ExtraMenuWrapper showMore={showMore}>
+              {
+                menuItems.filter((item, index) => index >= 4).map(
+                  (menuItem) => (
+                    <li key={menuItem.key}>
+                      <Padding top={4} bottom={4} left={3} right={3}>
+                        {React.cloneElement(menuItem)}
+                      </Padding>
+                    </li>
+                  ),
+                )
+              }
+            </ExtraMenuWrapper>
+          </MenuListItem>
+        </>
+      );
+    }
+    return (
+      <>
+        {
+          menuItems.map(
+            (menuItem) => (
+              <MenuListItem key={menuItem.key}>
+                {React.cloneElement(menuItem)}
+              </MenuListItem>
+            ),
+          )
+        }
+      </>
+    );
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Nav data-test="product-menu">
+        <Padding top={5} bottom={5}>
+          <MenuWrapper {...props}>
+            {renderMenu()}
+          </MenuWrapper>
+        </Padding>
+      </Nav>
+    </ThemeProvider>
+  );
+}
+export default Menu;

package/src/components/product-menu/theme.js

@@ -0,0 +1,16 @@
+import defaultTheme from '../themes';
+
+const theme = {
+  borderColor: defaultTheme.colors.gray600,
+  bgColor: defaultTheme.colors.white,
+  itemMinWidth: '120px',
+  animation: defaultTheme.animation,
+  shadow: defaultTheme.shadows[1],
+  breakpoints: defaultTheme.breakpoints,
+  text: {
+    color: '#333',
+    fontWeight: 'normal',
+  },
+};
+
+export default theme;

package/src/components/product-owner/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import TitledAvatar from '../titled-avatar';
+import { ButtonContainer, StyledButton } from './index.style';
+import Responsive from '../responsive';
+import generalTheme from '../themes';
+
+type Props = {
+  name: string,
+  avatar: string,
+  isFollowed?: boolean,
+  renderTitledAvatarLink?: * => Node,
+  renderDescriptionLink?: * => Node,
+  // onClickFollowMe : it should handle actions that should be
+  // happened after click follow-me button and return new value
+  // for isFollow and if the function return nothing the default
+  // value is set to be 'false'
+  onClickFollowMe?: () => boolean,
+  onClickConnectUs?: () => void,
+}
+
+const ProductOwner = ({
+  name,
+  avatar,
+  isLoading,
+  isFollowed = false,
+  renderTitledAvatarLink = null,
+  renderDescriptionLink = null,
+  onClickFollowMe = () => false,
+  onClickConnectUs = () => {},
+}: Props) => (
+  <div data-test="product-owner">
+    <Responsive option={{ lessThan: generalTheme.breakpoints.sm }}>
+      <TitledAvatar
+        title={name}
+        avatar={avatar}
+        avatarSize={generalTheme.sizes.small}
+        titleSize={10}
+        renderAvatarLink={renderTitledAvatarLink}
+      />
+    </Responsive>
+    <Responsive option={{ greaterThan: generalTheme.breakpoints.sm }}>
+      <TitledAvatar
+        title={name}
+        avatar={avatar}
+        avatarSize={generalTheme.sizes.small}
+        titleSize={12}
+        renderAvatarLink={renderTitledAvatarLink}
+      />
+    </Responsive>
+    <Responsive option={{ greaterThan: generalTheme.breakpoints.md }}>
+      <ButtonContainer>
+        <StyledButton
+          className="follow-button"
+          styleType={isFollowed ? 'secondary' : 'primary'}
+          htmlType="button"
+          mainColor="blue"
+          size={generalTheme.sizes.small}
+          isLoading={isLoading}
+          onClick={onClickFollowMe}
+        >
+          {isFollowed ? 'دنبال میکنید' : 'دنبال کنید' }
+        </StyledButton>
+        <StyledButton
+          styleType="secondary"
+          htmlType="button"
+          mainColor="blue"
+          size="sm"
+          onClick={onClickConnectUs}
+        >
+          تماس
+        </StyledButton>
+        <StyledButton
+          styleType="tertiary"
+          htmlType="button"
+          size="sm"
+          renderLink={renderDescriptionLink}
+        >
+          توضیحات
+        </StyledButton>
+      </ButtonContainer>
+    </Responsive>
+  </div>
+);
+
+export default ProductOwner;

package/src/components/product-owner/index.style.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import Button from '../button';
+
+export const ButtonContainer = styled.div`
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+export const StyledButton = styled(Button)`
+  margin-left: 8px;
+
+  &.follow-button {
+    min-width: 88px;
+  }
+`;

package/src/components/product-owner/index.test.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import findByTestAtrr from '../utils/test';
+import ProductOwner from './index';
+import { StyledButton } from './index.style';
+
+describe('ProductOwner Tests', () => {
+  it('render ProductOwner', () => {
+    const component = shallow(<ProductOwner />);
+    const productOwner = findByTestAtrr(component, 'product-owner');
+
+    expect(productOwner.length).toBe(1);
+  });
+
+  it('check connectUs button order and its functionality', () => {
+    let isConnectUsFunctionCalled = false;
+    function connectUsFunc() { isConnectUsFunctionCalled = !isConnectUsFunctionCalled; }
+
+    const component = shallow(
+      <ProductOwner
+        name="انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی
+        انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی"
+        onClickConnectUs={connectUsFunc}
+      />,
+    );
+    const productOwner = findByTestAtrr(component, 'product-owner');
+    const followmeButton = productOwner.find(StyledButton).at(0);
+    const connectUsButton = productOwner.find(StyledButton).at(1);
+    const descriptionButton = productOwner.find(StyledButton).at(2);
+
+    expect(followmeButton.text()).toContain('دنبال');
+    expect(connectUsButton.text()).toContain('تماس');
+    expect(descriptionButton.text()).toContain('توضیحات');
+    expect(isConnectUsFunctionCalled).toBe(false);
+
+    expect(isConnectUsFunctionCalled).toBe(false);
+
+    connectUsButton.simulate('click');
+
+    expect(isConnectUsFunctionCalled).toBe(true);
+  });
+
+  it('check follow button place and its functionality', () => {
+    let isFollowMeFunctionCalled = false;
+    function followMeFunc() {
+      isFollowMeFunctionCalled = !isFollowMeFunctionCalled;
+      return isFollowMeFunctionCalled;
+    }
+
+    const component = mount(
+      <ProductOwner
+        name="انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی
+        انجمن علمی کامپیوتر دانشگاه صنعتی خواجه نصیرالدین طوسی"
+        onClickFollowMe={followMeFunc}
+      />,
+    );
+    const productOwner = findByTestAtrr(component, 'product-owner');
+    const followmeButton = productOwner.find(StyledButton).at(0);
+
+    expect(followmeButton.text()).toContain('دنبال');
+    expect(isFollowMeFunctionCalled).toBe(false);
+    expect(followmeButton.props().styleType).toBe('primary');
+
+    followmeButton.simulate('click');
+
+    expect(isFollowMeFunctionCalled).toBe(true);
+
+    // TODO: try to solve the problem of use '.state()' on hooks
+    // I cant use just 'followmeButton.props().styleType' az expect
+    // argument because the followmeButton's props doesnt update after click
+    // plus I cant check component.state() with enzyme because
+    // it doesnt support hooks('.state()' only work with class)
+    // expect(component.find(StyledButton).at(0).props().styleType).toBe('secondary');
+  });
+});

package/src/components/product-properties/index.js

@@ -0,0 +1,65 @@
+// @flow
+
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import GlobalStyle from '../globalStyle';
+import { ListContainer, ListItem } from './index.style';
+import ProductProperty from './product-property';
+import generalTheme from '../themes';
+
+type ItemProps = {
+  iconName: string,
+  text: string,
+  color: 'grey' | 'darkBlue' | 'black' | 'default',
+  iconColor: 'grey' | 'darkBlue' | 'black' | 'default',
+  link: string | undefined
+}
+
+type Props = {
+  list: [ItemProps],
+  isHorizontal?: boolean,
+  color?: 'gray' | 'darkBlue' | 'black' | 'default',
+  iconColor?: 'gray' | 'darkBlue' | 'black' | 'default',
+}
+
+const ProductProperties = (props: Props) => {
+  const {
+    list,
+    isHorizontal = false,
+    color = 'black',
+    iconColor = 'gray',
+    link,
+    ...rest
+  } = props;
+  const propsLength = list.length > 1 && isHorizontal ? list.length : 1;
+
+  if (list.length === 1) {
+    return (
+      <>
+        <GlobalStyle />
+        <ProductProperty iconName={list[0].iconName} text={list[0].text} {...rest} />
+      </>
+    );
+  }
+
+  return (
+    <ThemeProvider theme={generalTheme}>
+      <GlobalStyle />
+      <ListContainer isHorizontal={isHorizontal} {...rest}>
+        {list.map(({ iconName, text, link }, index) => (
+          <ListItem key={`${iconName}-${index.toString()}`} isHorizontal={isHorizontal} propsLength={propsLength}>
+            <ProductProperty
+              iconName={iconName}
+              text={text}
+              color={color}
+              iconColor={iconColor}
+              link={link}
+            />
+          </ListItem>
+        ))}
+      </ListContainer>
+    </ThemeProvider>
+  );
+};
+
+export default ProductProperties;

package/src/components/product-properties/index.stories.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import ProductProperties from './index';
+
+export default {
+  title: 'Components/ProductProperties',
+  component: ProductProperties,
+  argTypes: {
+    list: {
+      control: 'object',
+      description: 'Array of property items ({ iconName, text, link })',
+    },
+    isHorizontal: {
+      control: 'boolean',
+      description: 'Display properties horizontally',
+    },
+    color: {
+      control: 'select',
+      options: ['gray', 'darkBlue', 'black', 'default'],
+      description: 'Text color',
+    },
+    iconColor: {
+      control: 'select',
+      options: ['gray', 'darkBlue', 'black', 'default'],
+      description: 'Icon color',
+    },
+  },
+};
+
+const Template = (args) => <ProductProperties {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  list: [
+    { iconName: 'category', text: 'Electronics', link: undefined },
+    { iconName: 'brand', text: 'Apple', link: undefined },
+    { iconName: 'model', text: 'iPhone 13', link: undefined },
+  ],
+  isHorizontal: false,
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  ...Default.args,
+  isHorizontal: true,
+};
+
+export const CustomColors = Template.bind({});
+CustomColors.args = {
+  ...Default.args,
+  color: 'blue', // Example custom color
+  iconColor: 'red', // Example custom icon color
+};

package/src/components/product-properties/index.style.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const ListContainer = styled.ul`
+  display: flex;
+  flex-direction: ${({ isHorizontal }) => (isHorizontal ? 'row' : 'column')};
+  flex-wrap: wrap;
+`;
+
+export const ListItem = styled.li`
+    margin: 2px 0;
+    min-width: calc(100% / ${({ propsLength }) => propsLength});
+    &:first-child { margin-top: 0; }
+    &:last-child { margin-bottom: 0; }
+`;

package/src/components/product-properties/index.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ProductProperties from './index';
+import Icon from '../icon';
+import { Text } from '../typography';
+
+describe('ProductProperties Tests', () => {
+  it('should render icon and text with special property', () => {
+    const list = [{ iconName: 'watch-later', text: 'watch text' }];
+    const component = mount(<ProductProperties list={list} />);
+    const IconComponent = component.find(Icon);
+    const TextComponent = component.find(Text);
+
+    expect(IconComponent.length).toBe(1);
+    expect(TextComponent.length).toBe(1);
+  });
+
+  it('should render multiple ProductProperty', () => {
+    const list = [
+      { iconName: 'watch-later', text: 'watch text' },
+      { iconName: 'alarm-off', text: 'another text' },
+      { iconName: 'aspect-ratio', text: 'and another text' },
+    ];
+    const component = mount(<ProductProperties list={list} />);
+    const IconComponent = component.find(Icon);
+    const TextComponent = component.find(Text);
+
+    expect(IconComponent.length).toBe(3);
+    expect(TextComponent.length).toBe(3);
+  });
+});

package/src/components/product-properties/product-property/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import Icon from '../../icon';
+import { Text } from '../../typography';
+import Container from './index.style';
+
+export type ItemProps = {
+  iconName: string,
+  text: string,
+  color: 'grey' | 'darkBlue' | 'black' | 'default',
+  iconColor: 'grey' | 'darkBlue' | 'black' | 'default',
+  link: string | undefined
+}
+
+const ProductProperty = (props: ItemProps) => {
+  const {
+    iconName,
+    text,
+    color,
+    iconColor,
+    link,
+    ...rest
+  } = props;
+
+  const renderWithLink = () => (
+    <a href={link}>
+      <Icon name={iconName} size="sm" color={iconColor} stickyRight />
+      <Text color={color} size="12">
+        {text}
+      </Text>
+    </a>
+  );
+
+  const renderWithoutLink = () => (
+    <>
+      <Icon name={iconName} size="sm" color={iconColor} stickyRight />
+      <Text color={color} size="12">
+        {text}
+      </Text>
+    </>
+  );
+
+  return (
+    <Container {...rest}>
+      {link ? renderWithLink() : renderWithoutLink()}
+    </Container>
+  );
+};
+
+export default ProductProperty;

package/src/components/product-properties/product-property/index.style.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  width: auto;
+`;
+
+export default Container;