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

package/src/components/card/event-card/index.test.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { BrowserRouter as Router, Link } from 'react-router-dom';
-import EventCard from './index';
-import { VERTICAL_CARD, HORIZONTAL_CARD } from './constants';
-import findByTestAtrr from '../../utils/test';
-
-const setupMount = (props = {}) => (
-  mount(<Router><EventCard level={props.level} {...props} /></Router>)
-);
-
-describe('Event Card', () => {
-  it('should render default vertical event card', () => {
-    const VerticalCard = setupMount({
-      type: VERTICAL_CARD,
-      title: 'تایتل یک رویداد نسبتا طولانی در اینجاست که قرار است اضافه بیاید و بزند به بیرون',
-      cover: 'https://static.evand.net/images/events/covers/original/2e6f40ac8e1bc78304ccf3fd77b1b3d5.jpg',
-      date: '2020-01-10T14:00:00+0330',
-      place: 'تهران',
-      price: 'از ۴۴۰۰۰ تومان',
-      organization: {
-        logo: 'https://static.evand.net/images/organizations/logos/original/e90483ade453446ae2fd156e15244d04.jpg',
-        name: 'هلدینگ کلان - مجتمع فنی پلی تکنیک - شرکت تجارت جهانی اندیشه',
-      },
-      onClickBookmark: () => { window.console.log('handle click bookmark'); },
-      renderEventLink: (element) => <Link to="/tosomewherenew">{element}</Link>,
-      renderOrganizationLink: (element) => <Link to="/tosomewherenew">{element}</Link>,
-    });
-    const VerticalCover = findByTestAtrr(VerticalCard.find('img'), 'vertical-cover');
-    const VerticalContent = findByTestAtrr(VerticalCard.find('div'), 'vertical-content');
-    expect(VerticalCover.length).toBe(1);
-    expect(VerticalContent.length).toBe(1);
-    VerticalCard.unmount();
-  });
-
-  it('should render horizontal event card', () => {
-    const HorizontalCard = setupMount({
-      type: HORIZONTAL_CARD,
-      title: 'نام رویداد مورد نظر',
-      price: 'از ۲۰۰۰۰۰ تومان',
-      location: 'تهران',
-      date: '2020-01-10T14:00:00+0330',
-      cover: 'https://static.evand.net/images/events/covers/original/2e6f40ac8e1bc78304ccf3fd77b1b3d5.jpg',
-      renderEventLink: (element) => <Link to="/tosomewherenew">{element}</Link>,
-    });
-    const HorizontalCover = findByTestAtrr(HorizontalCard.find('img'), 'horizontal-cover');
-    const HorizontalContent = findByTestAtrr(HorizontalCard.find('div'), 'horizontal-content');
-    expect(HorizontalCover.length).toBe(1);
-    expect(HorizontalContent.length).toBe(1);
-    HorizontalCard.unmount();
-  });
-
-  it('should act correctly on clicking on bookmark icon', () => {
-    const fn = jest.fn();
-    const VerticalCard = setupMount({
-      type: VERTICAL_CARD,
-      title: 'تایتل یک رویداد نسبتا طولانی در اینجاست که قرار است اضافه بیاید و بزند به بیرون',
-      cover: 'https://static.evand.net/images/events/covers/original/2e6f40ac8e1bc78304ccf3fd77b1b3d5.jpg',
-      date: '2020-01-10T14:00:00+0330',
-      place: 'تهران',
-      price: 'از ۴۴۰۰۰ تومان',
-      onClickBookmark: fn,
-      organization: {
-        logo: 'https://static.evand.net/images/organizations/logos/original/e90483ade453446ae2fd156e15244d04.jpg',
-        name: 'هلدینگ کلان - مجتمع فنی پلی تکنیک - شرکت تجارت جهانی اندیشه',
-      },
-      renderEventLink: (element) => <Link to="/tosomewherenew">{element}</Link>,
-      renderOrganizationLink: (element) => <Link to="/tosomewherenew">{element}</Link>,
-    });
-    const Bookmark = findByTestAtrr(VerticalCard, 'vertical-date-bookmark').find('i[name="bookmark-border"]');
-    expect(Bookmark.length).toBe(1);
-    Bookmark.simulate('click');
-    const NewBookmark = findByTestAtrr(VerticalCard, 'vertical-date-bookmark').find('i[name="bookmark-border"]');
-    expect(NewBookmark.length).toBe(0);
-    const Bookmarked = findByTestAtrr(VerticalCard, 'vertical-date-bookmark').find('i[name="bookmark"]');
-    expect(Bookmarked.length).toBe(1);
-    VerticalCard.unmount();
-  });
-});

package/src/components/card/index.js

@@ -1,16 +0,0 @@
-import CardTemplate from './card-template';
-import EventCard from './event-card';
-import OrganizerCard from './organization-card';
-import OrgnizerCard from './orgnizer-card';
-
-export { default as CardTemplate } from './card-template';
-export { default as EventCard } from './event-card';
-export { default as OrganizerCard } from './organization-card';
-export { default as OrgnizerCard } from './orgnizer-card';
-
-export default {
-  CardTemplate,
-  EventCard,
-  OrganizerCard,
-  OrgnizerCard,
-};

package/src/components/card/organization-card/index.js

@@ -1,59 +0,0 @@
-// @flow
-
-import React, { type Node } from 'react';
-import TitledAvatar from '../../titled-avatar';
-import NumericSummeryReport from '../../numeric-summery-report';
-import Button from '../../button';
-import Container from './index.style';
-
-type Props = {
-  title: string,
-  logo: string,
-  followed?: boolean,
-  report: {
-    heldEventsNumber: number,
-    activeEventsNumber: number,
-    followingNumber: number,
-  },
-  onClickFollow: () => void,
-  renderLink: * => Node,
-}
-
-const OrganizationCard = (props: Props) => {
-  const {
-    title, logo, followed = false, report, onClickFollow, renderLink,
-  } = props;
-
-  const reportData = [
-    { id: 1, title: 'برگزار شده', count: report.heldEventsNumber },
-    { id: 2, title: 'فعال', count: report.activeEventsNumber },
-    { id: 3, title: 'دنبال‌کننده‌ها', count: report.followingNumber },
-  ];
-
-  return (
-    <Container
-      direction="vertical"
-      hoverToLevel={3}
-      maxWidth={370}
-      data-test="organization-card"
-    >
-      <TitledAvatar
-        title={title}
-        avatar={logo}
-        renderAvatarLink={renderLink}
-      />
-      <NumericSummeryReport data={reportData} />
-      <Button
-        styleType={followed ? 'secondary' : 'primary'}
-        onClick={onClickFollow}
-        mainColor="blue"
-        size="sm"
-        wide
-      >
-        {followed ? 'دنبال نکنید' : 'دنبال کنید'}
-      </Button>
-    </Container>
-  );
-};
-
-export default OrganizationCard;

package/src/components/card/organization-card/index.stories.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import OrganizationCard from './index';
-
-export default {
-  title: 'Components/OrganizationCard',
-  component: OrganizationCard,
-  argTypes: {
-    name: {
-      control: 'text',
-      description: 'The organization name',
-    },
-    logo: {
-      control: 'text',
-      description: 'The organization logo URL',
-    },
-    cover: {
-      control: 'text',
-      description: 'The organization cover image URL',
-    },
-    renderLink: {
-      control: 'function',
-      description: 'Function to render a link wrapper',
-    },
-    report: {
-      control: 'object',
-      description: 'The organization statistics',
-    },
-    onClickFollow: {
-      action: 'clicked',
-      description: 'Callback when follow button is clicked',
-    },
-  },
-};
-
-const Template = (args) => <OrganizationCard {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  name: 'Organization Name',
-  logo: 'https://via.placeholder.com/80',
-  cover: 'https://via.placeholder.com/300x100',
-  renderLink: (el) => <a href="/org-profile">{el}</a>,
-  report: {
-    heldEventsNumber: 2,
-    activeEventsNumber: 17,
-    followingNumber: 148,
-  },
-  onClickFollow: () => { window.console.log('click on follow'); },
-};

package/src/components/card/organization-card/index.style.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-import CardTemplate from '../card-template';
-
-const Container = styled(CardTemplate)`
-  padding: 16px; 
-  height: 200px;
-  justify-content: space-between;
-`;
-
-export default Container;

package/src/components/card/organization-card/index.test.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import findByTestAtrr from '../../utils/test';
-import OrganizationCard from './index';
-
-const setupShallow = (props = {}) => (
-  shallow(<OrganizationCard data={props.data} {...props} />)
-);
-
-describe('should render correctly', () => {
-  it('should render correctly', () => {
-    const component = setupShallow({
-      title: 'انجمن علمی کامپیوتر دانشگاه صنعتی خواجه',
-      logo: 'https://static.evand.net/images/organizations/logos/original/d431e339d86b187f356055f1d6f39ddb.jpg?x-oss-process=image/resize,h_250',
-      report: {
-        heldEventsNumber: 2,
-        activeEventsNumber: 17,
-        followingNumber: 148,
-      },
-      onClickFollow: () => { window.console.log('handle click follow'); },
-    });
-    const OrganizationCard = findByTestAtrr(component, 'organization-card');
-    expect(OrganizationCard.length).toBe(1);
-  });
-});

package/src/components/card/orgnizer-card/buttons.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import Button from '../../button';
-import {
-  LTRContainer,
-} from './index.style';
-
-type Props = {
-  isFollowed: boolean,
-  onClickFollowMe: () => boolean,
-  onClickConnectUs: () => void,
-}
-
-const Buttons = (props: Props) => {
-  const {
-    onClickFollowMe,
-    onClickConnectUs,
-    isFollowed,
-  } = props;
-
-  return (
-    <LTRContainer>
-      <Button
-        className="follow-button"
-        styleType="primary"
-        mainColor="blue"
-        htmlType="button"
-        size="sm"
-        width="100px"
-        onClick={onClickFollowMe}
-        style={{ marginLeft: '12px' }}
-      >
-        {isFollowed ? 'دنبال میکنید' : 'دنبال کنید'}
-      </Button>
-      <Button
-        styleType="secondary"
-        htmlType="button"
-        mainColor="blue"
-        width="100px"
-        size="sm"
-        onClick={onClickConnectUs}
-      >
-        تماس
-      </Button>
-    </LTRContainer>
-  );
-};
-
-export default Buttons;

package/src/components/card/orgnizer-card/index.js

@@ -1,179 +0,0 @@
-import React from 'react';
-import { Text, Paragraph } from '../../typography';
-import Buttons from './buttons';
-import {
-  Container,
-  TextCenter,
-  PartnershipBox,
-} from './index.style';
-import Display from '../../display';
-import Icon from '../../icon';
-import Avatar from '../../avatar';
-
-type Props = {
-  name: string,
-  logo: string,
-  description?: string,
-  followersCount?: string,
-  allEventsCount?: string,
-  recommendedCount?: string,
-  activeEventsCount?: string,
-  isFollowed?: boolean,
-  onClickFollowMe?: () => boolean,
-  onClickConnectUs?: () => void,
-  renderOrganizerLink: * => Node,
-  partnership: string
-}
-
-const OrgnizerCard = (props: Props) => {
-  const {
-    name,
-    logo,
-    renderOrganizerLink,
-    partnership,
-    isFollowed = false,
-    onClickFollowMe = () => false,
-    onClickConnectUs = () => { },
-    allEventsCount = null,
-    activeEventsCount = null,
-    recommendedCount = null,
-    description = null,
-    followersCount = '',
-  } = props;
-
-  return (
-    <Container className="organizer-card">
-      <Display display="flex" flexDirection="row" flexDirectionMobile="column" alignItems="start" justifyContent="space-between">
-        <Display display="flex" flexDirection="row" flexDirectionMobile="column" justifyContent="start" width="100%" flex="4 1">
-          <Display display="flex" flex="1 1" className="avatar">
-            {renderOrganizerLink(<Avatar
-              alt={name}
-              src={logo}
-              size="md"
-              sizeMobile="lg"
-              round
-              width={64}
-              height={64}
-            />)}
-          </Display>
-          <div className="mr">
-            <Display display="flex" alignItems="baseline">
-              {renderOrganizerLink(
-                <Text size={14} textAlign="right" bold>
-                  برگزار‌کننده:
-                  {' '}
-                  {name}
-                </Text>,
-              )}
-            </Display>
-            {!!partnership
-            && (
-              <PartnershipBox>
-                <Icon
-                  name={partnership}
-                  color="yellow"
-                  stickyRight
-                />
-                <span>
-                  {partnership === 'partner' ? 'همیار' : 'همکار'}
-                  {' '}
-                  ایوند
-                </span>
-              </PartnershipBox>
-            )}
-            {description && (
-              <Display display="flex">
-                <Paragraph size={12} color="riverBed">
-                  {description.slice(0, 350).concat('...')}
-                </Paragraph>
-              </Display>
-            )}
-            {!!recommendedCount && (
-              <Text size="14" bold color="riverBed" className="recommend">
-                {` ${recommendedCount} `}
-                این برگزارکننده را توصیه کرده‌اند.
-              </Text>
-            )}
-          </div>
-        </Display>
-        <Display display="flex" alignItems="start" flexDirection="column" justifyContent="space-between" width="100%" flex="2 1" alignSelf="stretch">
-          <Display className="statistics" display="flex" alignItems="start" flexDirection="row" justifyContent="space-evenly" width="100%">
-            {followersCount && (
-              <Display display="block">
-                <TextCenter>
-                  <Text size={16} bold>
-                    {followersCount}
-                  </Text>
-                  <br />
-                  <Text size={12} bold>
-                    دنبال کننده
-                  </Text>
-                </TextCenter>
-              </Display>
-            )}
-            {allEventsCount && (
-              <Display display="block">
-                <TextCenter>
-                  <Text size={16} bold>
-                    {allEventsCount}
-                  </Text>
-                  <br />
-                  <Text size={12} bold>
-                    کل رویدادها
-                  </Text>
-                </TextCenter>
-              </Display>
-            )}
-            {activeEventsCount && (
-              <Display display="block">
-                <TextCenter>
-                  <Text size={16} bold>
-                    {activeEventsCount}
-                  </Text>
-                  <br />
-                  <Text size={12} bold>
-                    رویداد فعال
-                  </Text>
-                </TextCenter>
-              </Display>
-            )}
-          </Display>
-          <Display display="flex" flexDirection="row" flexDirectionMobile="column" alignItems="center" justifyContent="space-between" width="100%">
-            <Buttons
-              onClickFollowMe={onClickFollowMe}
-              onClickConnectUs={onClickConnectUs}
-              isFollowed={isFollowed}
-            />
-          </Display>
-        </Display>
-      </Display>
-      <style>
-        {`
-          .recommend {
-            display: block;
-            margin: 10px 0;
-          }
-          @media (max-width: 768px) {
-            .avatar {
-              margin: 5px auto 10px;
-            }
-            .statistics {
-              margin: 25px auto;
-            }
-          }
-          @media (min-width: 768px) {
-            .mr {
-              display: flex;
-              flex-direction: column;
-              flex: 5 1;
-              min-height: 123px;
-              justify-content: space-between;
-            }
-          }
-        `}
-      </style>
-    </Container>
-  );
-};
-
-export default OrgnizerCard;

package/src/components/card/orgnizer-card/index.stories.js

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import OrgnizerCard from './index';
-
-export default {
-  title: 'OrganizerCard',
-  component: OrgnizerCard,
-  
-  argTypes: {
-    name: {
-      control: 'text',
-      defaultValue: 'وزارت آموزش و پرورش',
-    },
-    followersCount: {
-      control: 'text',
-      defaultValue: '۱۳۲۴۷',
-    },
-    logo: {
-      control: 'text',
-      defaultValue: 'https://i.pravatar.cc/300?img=13',
-    },
-    activeEventsCount: {
-      control: 'text',
-      defaultValue: '۱۲۳',
-    },
-    allEventsCount: {
-      control: 'text',
-      defaultValue: '۲۴۵۶۷',
-    },
-    recommendedCount: {
-      control: 'text',
-      defaultValue: '۳۳ نفر',
-    },
-    isFollowed: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    partnership: {
-      control: 'select',
-      options: ['colleague', 'partner', 'sponsor'],
-      defaultValue: 'colleague',
-    },
-  },
-};
-
-const Template = (args) => (
-  <OrgnizerCard
-    {...args}
-    renderOrganizerLink={(el) => (<a href="https://i.pravatar.cc/300?img=1">{el}</a>)}
-  />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  name: 'وزارت آموزش و پرورش',
-  followersCount: '۱۳۲۴۷',
-  logo: 'https://i.pravatar.cc/300?img=13',
-  activeEventsCount: '۱۲۳',
-  allEventsCount: '۲۴۵۶۷',
-  recommendedCount: '۳۳ نفر',
-  isFollowed: false,
-  partnership: 'colleague',
-};
-
-export const Partner = Template.bind({});
-Partner.args = {
-  ...Default.args,
-  partnership: 'partner',
-};
-
-export const Sponsor = Template.bind({});
-Sponsor.args = {
-  ...Default.args,
-  partnership: 'sponsor',
-};
-
-export const Followed = Template.bind({});
-Followed.args = {
-  ...Default.args,
-  isFollowed: true,
-};

package/src/components/card/orgnizer-card/index.style.js

@@ -1,58 +0,0 @@
-import styled from 'styled-components';
-import CardTemplate from '../card-template';
-import Button from '../../button';
-import defaultTheme from '../../themes';
-
-export const Container = styled(CardTemplate)`
-  padding: 16px;
-`;
-
-export const LTRContainer = styled.div`
-  display: flex;
-`;
-
-export const StyledButton = styled(Button)`
-  margin: 4px 8px;
-  direction: rtl;
-  min-width: 120px;
-
-  &.follow-button {
-  }
-`;
-
-export const BorderedBox = styled.div`
-  border: ${({ theme }) => theme.border.lightBlue};
-  padding: 8px 16px;
-  margin: 8px 8px 0 8px;
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const TextCenter = styled.div`
-  text-align: center;
-`;
-
-export const ResponsiveFlex = styled.div`
-  display: flex;
-  @media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
-    flex-flow: column nowrap;
-  }
-  @media only screen and (min-width: ${defaultTheme.breakpoints.sm}px) {
-    flex-flow: row nowrap;
-  }
-  align-items: center;
-  justify-content: space-between;
-`;
-
-export const PartnershipBox = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(255, 199, 39, 0.1);
-  border-radius: 5px;
-  color: #FFD324;
-  margin-top: 10px;
-  align-items: center;
-  width: 110px;
-  height: 25px;
-`;

package/src/components/cover/index.js

@@ -1,74 +0,0 @@
-// @flow
-
-import React from 'react';
-import { Container, StyledLazyImage, StyledImage } from './index.style';
-
-const defaultImageUrl = 'https://static.evand.net/assets/images/defaults/event-cover.jpg';
-
-type Props = {
-  src?: string,
-  alt?: string,
-  minHeight?: number,
-  linkTo?: string,
-  linkTarget?: '_self' | '_blank',
-  renderLink?: * => Node,
-  isLazy?: boolean,
-}
-
-const Cover = (props: Props) => {
-  const {
-    alt = 'کاور',
-    src = defaultImageUrl,
-    minHeight = 151,
-    renderLink = undefined,
-    linkTo = undefined,
-    linkTarget = '_blank',
-    isLazy = false,
-    ...rest
-  } = props;
-
-  const renderCover = () => (
-    isLazy
-      ? (
-        <StyledLazyImage
-          effect="blur"
-          srcSet={`${src}`}
-          src={src}
-          alt={alt}
-          data-test="cover"
-          {...rest}
-        />
-      )
-      : (
-        <StyledImage
-          srcSet={`${src}`}
-          src={src}
-          alt={alt}
-          data-test="cover"
-          {...rest}
-        />
-      )
-  );
-
-  if (renderLink) {
-    return (
-      // <Container minHeight={minHeight}>
-      renderLink(renderCover())
-      // </Container>
-    );
-  }
-  if (linkTo) {
-    return (
-      <a href={linkTo} target={linkTarget}>
-        {renderCover()}
-      </a>
-    );
-  }
-  return (
-    <Container minHeight={minHeight}>
-      {renderCover()}
-    </Container>
-  );
-};
-
-export default Cover;