react-jupiter 6.0.0-beta.1 → 6.0.0-beta.10

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

@@ -1,166 +0,0 @@
-import React from 'react';
-import EventCard from './index';
-// import '../storybook.css';
-import { VerticalCover } from './index.style';
-
-const defaultArgs = {
-  title: "تایتل یک رویداد نسبتا طولانی در اینجاست که باید و باید و قرار است اضافه بیاید و بزند به بیرون",
-  cover: "https://static.evand.net/assets/images/defaults/event-cover.jpg",
-  date: "2020-01-10T14:00:00+0330",
-  place: "تهران",
-  price: "از ۴۴۰۰۰ تومان",
-  clickBookmark: () => true,
-  queryString: "icn=trendEvents&ici=fp5",
-  renderEventLink: (element) => <a href="/tosomewhere">{element}</a>,
-};
-
-const organizationArgs = {
-  organization: {
-    name: 'هلدینگ کلان - مجتمع فنی پلی تکنیک - شرکت تجارت جهانی اندیشه',
-    logo: 'https://static.evand.net/images/organizations/logos/original/e90483ade453446ae2fd156e15244d04.jpg',
-  },
-  renderOrganizationLink: (element) => <a href="/toorganization">{element}</a>,
-};
-
-export default {
-  title: 'Components/Card/EventCard',
-  component: EventCard,
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['horizontal-mobile', 'horizontal', 'vertical'],
-      description: 'The type of the event card',
-    },
-    title: {
-      control: 'text',
-      description: 'The title of the event',
-    },
-    cover: {
-      control: 'text',
-      description: 'The cover image URL',
-    },
-    date: {
-      control: 'text',
-      description: 'The event date',
-    },
-    place: {
-      control: 'text',
-      description: 'The event location',
-    },
-    price: {
-      control: 'text',
-      description: 'The event price',
-    },
-    ads: {
-      control: 'boolean',
-      description: 'Whether the card is an advertisement',
-    },
-    finished: {
-      control: 'boolean',
-      description: 'Whether the event is finished',
-    },
-    partnership: {
-      control: 'object',
-      description: 'Partnership information',
-    },
-    organization: {
-      control: 'object',
-      description: 'Organization information',
-    },
-    clickBookmark: {
-      control: 'function',
-      description: 'Function to handle bookmark click',
-    },
-    renderEventLink: {
-      control: 'function',
-      description: 'Function to render event link',
-    },
-    renderOrganizationLink: {
-      control: 'function',
-      description: 'Function to render organization link',
-    },
-    coverImage: {
-      control: 'element',
-      description: 'Custom cover image element',
-    },
-  },
-};
-
-const Template = (args) => <EventCard {...args} />;
-
-export const HorizontalMobile = Template.bind({});
-HorizontalMobile.args = {
-  ...defaultArgs,
-  type: 'horizontal-mobile',
-};
-
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-  ...defaultArgs,
-  type: 'horizontal',
-};
-
-export const HorizontalWithAds = Template.bind({});
-HorizontalWithAds.args = {
-  ...defaultArgs,
-  type: 'horizontal',
-  ads: true,
-};
-
-export const HorizontalWithFinished = Template.bind({});
-HorizontalWithFinished.args = {
-  ...defaultArgs,
-  type: 'horizontal',
-  finished: true,
-};
-
-export const Vertical = Template.bind({});
-Vertical.args = {
-  ...defaultArgs,
-  ...organizationArgs,
-  type: 'vertical',
-  title: 'تایتل یک رویداد اینجاست کهن',
-  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
-};
-
-export const VerticalWithCustomCover = Template.bind({});
-VerticalWithCustomCover.args = {
-  ...defaultArgs,
-  ...organizationArgs,
-  type: 'vertical',
-  title: 'تایتل یک رویداد اینجاست کهن',
-  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
-  coverImage: <VerticalCover src="https://static.evand.net/assets/images/defaults/event-cover.jpg" />,
-};
-
-export const VerticalWithFinished = Template.bind({});
-VerticalWithFinished.args = {
-  ...defaultArgs,
-  ...organizationArgs,
-  type: 'vertical',
-  title: 'تایتل یک رویداد اینجاست کهن',
-  finished: true,
-  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
-};
-
-export const VerticalWithAds = Template.bind({});
-VerticalWithAds.args = {
-  ...defaultArgs,
-  ...organizationArgs,
-  type: 'vertical',
-  title: 'تایتل یک رویداد اینجاست کهن',
-  ads: true,
-  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
-};
-
-export const VerticalWithPartnership = Template.bind({});
-VerticalWithPartnership.args = {
-  ...defaultArgs,
-  ...organizationArgs,
-  type: 'vertical',
-  title: 'تایتل یک رویداد اینجاست کهن',
-  partnership: {
-    status: 'colleague',
-  },
-  renderEventLink: (element) => <a href="/tosomewherenew">{element}</a>,
-};

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

@@ -1,129 +0,0 @@
-import styled from 'styled-components';
-import CardTemplate from '../card-template';
-import { Heading } from '../../typography';
-import ProductProperties from '../../product-properties';
-import Icon from '../../icon';
-import defaultTheme from '../../themes';
-
-/* Common event card styles */
-
-export const Link = styled.a`
-  text-decoration: none;
-`;
-
-export const DateBookmarkContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-export const DateLabelContainer = styled.div`
-  display: inline-block;
-  & > * {
-    vertical-align:middle;
-  }
-`;
-
-export const BookmarkIcon = styled(Icon)`
-  margin-left: 0;
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
-/* Vertical event card styles */
-export const VerticalCardContainer = styled(CardTemplate)`
-  background: white;
-  a {
-    text-decoration: none;
-  }
-  @media only screen and (min-width: ${defaultTheme.breakpoints.sm}px) {
-    min-height: 358px;
-  }
-`;
-
-export const VerticalCover = styled.img`
-  width: 100%;
-  min-width: 270px;
-  height: auto;
-  min-height: 150px;
-`;
-
-export const VerticalContentContainer = styled.div`
-  background-image: url(${(props) => props.background});
-  background-size: cover;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 12px 16px 16px;
-  min-height: 180px;
-  max-height: 200px;
-  direction: rtl;
-  text-align: right;
-`;
-
-export const VerticalTitle = styled(Heading)`
-  margin: 0;
-  overflow: hidden;
-  height: 60px;
-`;
-
-export const VerticalPlacePrice = styled(ProductProperties)`
-  margin: 4px 0;
-`;
-
-/* Horizontal event card styles */
-
-export const HorizontalCardContainer = styled(VerticalCardContainer)`
-  height: 116px;
-`;
-
-export const HorizontalCover = styled.img`
-  width: 206px;
-  min-width: 206px;
-  height: auto;
-`;
-
-export const HorizontalMobileCover = styled.img`
-  width: 146px;
-  min-width: 146px;
-  height: 100%;
-`;
-
-export const HorizontalContentContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  justify-content: space-between;
-  flex: 1;
-  min-width: 250px;
-`;
-
-export const HorizontalMobileContentContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  justify-content: space-between;
-  flex: 1;
-  min-width: 0px;
-`;
-
-export const HorizontalTitle = styled(Heading)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export const HorizontalPlacePrice = styled(ProductProperties)``;
-
-export const PartnershipBox = styled.div`
-  background: #FFC72724;
-  border-radius: 5px;
-  margin-left: 5px;
-  color: #FFD324;
-  display: inline-flex;
-  align-items: center;
-  min-width: 60px;
-  height: 25px;
-  justify-content: center;
-`;

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;