react-jupiter 6.0.0-beta.2 → 6.0.0-beta.4

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

@@ -1,10 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,65 +0,0 @@
-// @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

@@ -1,52 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

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