react-jupiter 5.12.0 → 6.0.0-beta.2

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

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

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

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

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

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

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

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

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

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

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

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