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

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

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from 'styled-components';
-import GlobalStyle from '../../globalStyle';
-import generalTheme from '../../themes';
-import TemplateContainer from './index.style';
-
-const CardTemplate = ({
-  level = 1,
-  hoverToLevel = 1,
-  maxWidth = null,
-  renderLink = undefined,
-  direction = 'vertical',
-  background = '',
-  children,
-  ...rest
-}) => {
-  const renderContent = () => {
-    if (renderLink) {
-      return renderLink(
-        <TemplateContainer
-          maxWidth={maxWidth}
-          level={level}
-          hoverToLevel={hoverToLevel}
-          direction={direction}
-          data-test="card-template"
-          background={background}
-          {...rest}
-        >
-          {children}
-        </TemplateContainer>,
-      );
-    }
-    return (
-      <TemplateContainer
-        maxWidth={maxWidth}
-        level={level}
-        hoverToLevel={hoverToLevel}
-        direction={direction}
-        data-test="card-template"
-        background={background}
-        {...rest}
-      >
-        {children}
-      </TemplateContainer>
-    );
-  };
-
-  return (
-    <ThemeProvider theme={generalTheme}>
-      <GlobalStyle />
-      {renderContent()}
-    </ThemeProvider>
-  );
-};
-
-CardTemplate.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]).isRequired,
-  level: PropTypes.oneOf([1, 2, 3, 4, 5]),
-  hoverToLevel: PropTypes.number,
-  maxWidth: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-  ]),
-  renderLink: PropTypes.func,
-  direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  background: PropTypes.string,
-};
-
-export default CardTemplate;

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

@@ -1,110 +0,0 @@
-import React from 'react';
-import CardTemplate from './index';
-
-export default {
-  title: 'Components/Card/CardTemplate',
-  component: CardTemplate,
-  argTypes: {
-    level: {
-      control: 'number',
-      description: 'The level of the card (1-5)',
-    },
-    hoverToLevel: {
-      control: 'number',
-      description: 'The level to hover to',
-    },
-    direction: {
-      control: 'select',
-      options: ['vertical', 'horizontal'],
-      description: 'The direction of the card content',
-    },
-    background: {
-      control: 'text',
-      description: 'The background image URL',
-    },
-    renderLink: {
-      control: 'function',
-      description: 'Function to render a link wrapper',
-    },
-    style: {
-      control: 'object',
-      description: 'Additional styles to apply',
-    },
-    children: {
-      control: 'text',
-      description: 'The content of the card',
-    },
-  },
-};
-
-const Template = (args) => (
-  <CardTemplate {...args}>
-    <div style={{ height: '100px' }}>Hello card template.</div>
-  </CardTemplate>
-);
-
-export const Default = Template.bind({});
-
-export const Level2 = Template.bind({});
-Level2.args = {
-  level: 2,
-  style: { marginTop: '50px' },
-};
-
-export const Level3 = Template.bind({});
-Level3.args = {
-  level: 3,
-  style: { marginTop: '50px' },
-};
-
-export const Level4 = Template.bind({});
-Level4.args = {
-  level: 4,
-  style: { marginTop: '50px' },
-};
-
-export const Level5 = Template.bind({});
-Level5.args = {
-  level: 5,
-  style: { marginTop: '50px' },
-};
-
-export const HoverLevel1To4 = Template.bind({});
-HoverLevel1To4.args = {
-  level: 1,
-  hoverToLevel: 4,
-  style: { marginTop: '50px' },
-};
-
-export const WithLink = Template.bind({});
-WithLink.args = {
-  renderLink: (el) => <a href="http://google.com">{el}</a>,
-  children: <div style={{ height: '100px' }}>with link to google</div>,
-};
-
-export const VerticalDirection = Template.bind({});
-VerticalDirection.args = {
-  direction: 'vertical',
-  children: (
-    <>
-      <div style={{ height: '100px', backgroundColor: 'lightgray' }}>Hello card template.</div>
-      <div style={{ height: '100px', backgroundColor: 'oldlace' }}>Hello card template.</div>
-    </>
-  ),
-};
-
-export const HorizontalDirection = Template.bind({});
-HorizontalDirection.args = {
-  direction: 'horizontal',
-  children: (
-    <>
-      <div style={{ height: '100px', backgroundColor: 'lightgray' }}>Hello card template.</div>
-      <div style={{ height: '100px', backgroundColor: 'oldlace' }}>Hello card template.</div>
-    </>
-  ),
-};
-
-export const WithBackground = Template.bind({});
-WithBackground.args = {
-  background: 'http://static.simpledesktops.com/uploads/desktops/2019/11/08/Jupiter.png',
-};

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

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const TemplateContainer = styled.section`
-  display: flex;
-  flex-direction: ${({ direction }) => (direction === 'vertical' ? 'column' : 'row')};
-  border-radius: ${({ theme }) => (`${theme.borderRadius.low}px`)};
-  overflow: hidden;
-  ${({ maxWidth }) => (maxWidth ? `max-width: ${maxWidth}px` : '')};
-  box-shadow: ${({ theme, level }) => (
-    `0 0 ${theme.shadows[level].blur}px ${theme.shadows[level].spread}px rgba(0, 0, 0, ${theme.shadows[level].opacity})`
-  )};
-  text-decoration: none;
-  transition: ${({ theme }) => (`all ${theme.animation.time}s ${theme.animation.method}`)};
-  ${({ background }) => (background ? `background: url(${background}) bottom left / 142px no-repeat` : '')};
-
-  &:hover {
-    ${({ theme, level, hoverToLevel }) => (
-    hoverToLevel > level
-      ? `box-shadow: 0 0 ${theme.shadows[hoverToLevel].blur}px ${theme.shadows[hoverToLevel].spread}px rgba(0, 0, 0, ${theme.shadows[hoverToLevel].opacity})`
-      : ''
-  )};
-  }
-`;
-
-export default TemplateContainer;

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import 'jest-styled-components';
-
-import CardTemplate from './index';
-import { Text } from '../../typography';
-import findByTestAtrr from '../../utils/test';
-import theme from '../../themes';
-
-const setupShallow = (props = {}) => (
-  shallow(
-    <CardTemplate
-      level={props.level}
-      hoverToLevel={props.hoverToLevel}
-      maxWidth={props.maxWidth}
-      linkTo={props.linkTo}
-      {...props}
-    >
-      {props.children}
-    </CardTemplate>,
-  )
-);
-
-const setupMount = (props = {}) => (
-  mount(
-    <CardTemplate
-      level={props.level}
-      hoverToLevel={props.hoverToLevel}
-      maxWidth={props.maxWidth}
-      linkTo={props.linkTo}
-      {...props}
-    >
-      {props.children}
-    </CardTemplate>,
-  )
-);
-
-describe('Card Template', () => {
-  it('should render correctly', () => {
-    const component = setupShallow({
-      level: 2,
-      hoverToLevel: 3,
-      children: <Text>یک متن تستی</Text>,
-    });
-    const CardTemplate = findByTestAtrr(component, 'card-template');
-    expect(CardTemplate.length).toBe(1);
-  });
-
-  it('should render correctly with link wrapper', () => {
-    const component = setupShallow({
-      level: 2,
-      hoverToLevel: 3,
-      linkTo: '/link-address',
-      children: <Text>یک متن تستی</Text>,
-    });
-    const CardTemplate = findByTestAtrr(component, 'card-template-link-wrapper');
-    expect(CardTemplate.length).toBe(1);
-  });
-
-  it('should has correct style', () => {
-    const props = {
-      level: 1,
-      hoverToLevel: 3,
-      children: 'یک متن تستی',
-      maxWidth: 300,
-    };
-    const CardTemplate = setupMount(props);
-    expect(CardTemplate).toHaveStyleRule(
-      'box-shadow',
-      `0 0 ${theme.shadows[1].blur}px ${theme.shadows[1].spread}px rgba(0,0,0,${theme.shadows[1].opacity})`,
-    );
-    expect(CardTemplate).toHaveStyleRule(
-      'box-shadow',
-      `0 0 ${theme.shadows[3].blur}px ${theme.shadows[3].spread}px rgba(0,0,0,${theme.shadows[3].opacity})`,
-      {
-        modifier: ':hover',
-      },
-    );
-    expect(CardTemplate).toHaveStyleRule(
-      'border-radius',
-      `${theme.borderRadius.low}px`,
-    );
-    expect(CardTemplate).toHaveStyleRule('max-width', `${props.maxWidth}px`);
-  });
-});

package/src/components/card/event-card/constants.js

@@ -1,3 +0,0 @@
-export const VERTICAL_CARD = 'vertical';
-export const HORIZONTAL_CARD = 'horizontal';
-export const HORIZONTAL_MOBILE_CARD = 'horizontal-mobile';

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImageLabel from './index.style';
-
-const adsLabelUrl = 'https://static.evand.net/assets/images/other/ads-label.svg';
-// const adsLabelUrl = require('../../../../docs/assets/ads-label.svg');
-
-const finishedLabelUrl = 'https://static.evand.net/assets/images/other/finished-text-label.svg';
-
-const EventCardLabel = ({ type }) => {
-  switch (type) {
-    case 'ads':
-      return <ImageLabel src={adsLabelUrl} data-test="ads-label" />;
-    case 'finished':
-    default:
-      return <ImageLabel src={finishedLabelUrl} data-test="finished-label" />;
-  }
-};
-
-EventCardLabel.propTypes = {
-  type: PropTypes.oneOf(['ads', 'finished']).isRequired,
-};
-
-export default EventCardLabel;

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

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const ImageLabel = styled.img`
-  display: inline-block;
-  margin-left: 12px;
-  // margin-bottom: 5px;
-  width: 33px;
-`;
-
-export default ImageLabel;

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import EventCardLabel from './index';
-import findByTestAtrr from '../../../utils/test';
-
-const setupShallow = ({ type }) => (
-  shallow(<EventCardLabel type={type} />)
-);
-
-describe('EventCardLabel component', () => {
-  it('Should render ads label', () => {
-    const component = setupShallow({ type: 'ads' });
-    const AdsLabel = findByTestAtrr(component, 'ads-label');
-    expect(AdsLabel.length).toBe(1);
-  });
-
-  it('Should render finished label', () => {
-    const component = setupShallow({ type: 'finished' });
-    const AdsLabel = findByTestAtrr(component, 'finished-label');
-    expect(AdsLabel.length).toBe(1);
-  });
-});

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

@@ -1,227 +0,0 @@
-import React from 'react';
-import PropTypes, { oneOfType } from 'prop-types';
-import GlobalStyle from '../../globalStyle';
-import { VERTICAL_CARD, HORIZONTAL_CARD, HORIZONTAL_MOBILE_CARD } from './constants';
-import ShowDate from '../../show-date';
-import { Text } from '../../typography';
-import TitledAvatar from '../../titled-avatar';
-import EventCardLabel from './event-card-label';
-import {
-  VerticalCardContainer,
-  VerticalCover,
-  VerticalContentContainer,
-  DateLabelContainer,
-  DateBookmarkContainer,
-  BookmarkIcon,
-  VerticalPlacePrice,
-  VerticalTitle,
-  HorizontalCardContainer,
-  HorizontalCover,
-  HorizontalMobileCover,
-  HorizontalContentContainer,
-  HorizontalTitle,
-  HorizontalPlacePrice,
-  PartnershipBox,
-} from './index.style';
-import Icon from '../../icon';
-
-const finishedClockLabelUrl = 'https://static.evand.net/assets/images/other/finished-clock-label.svg';
-const defaultCoverUrl = 'https://static.evand.net/assets/images/defaults/event-cover.jpg';
-const EventCard = ({
-  title,
-  price,
-  place,
-  renderEventLink,
-  clickBookmark,
-  bookmarked = false,
-  cover = '',
-  type = VERTICAL_CARD,
-  ads = false,
-  finished = false,
-  organization = undefined,
-  renderOrganizationLink = () => false,
-  date = '',
-  showDate = '',
-  partnership = {
-    status: '',
-  },
-  coverImage = null,
-  ...rest
-}) => {
-  // date param used on main evand and because it wrong to use moment-jalali in react jupiter
-  // we ommmit it in evand-next and use showDate param instead but its still used in evand
-  // TODO: remove date params if no longer needed (in evand project)
-  // TODO: remove ShowDate component and remove used places
-  // TODO: remove moment-jalali from this package after removing ShowDate
-
-  // in new form of event-card we dont show organazation info as a titled-avatar
-  // TODO: if the new form was accepted and remove old one from evand clean these parts
-  const productPropertiesList = [
-    { iconName: 'place', text: place },
-    { iconName: 'ticket', text: price },
-  ];
-  if (organization && organization.logo === 'unset') {
-    productPropertiesList.push({ iconName: 'supervisor-account', text: organization.name });
-  }
-
-  const renderVerticalCard = () => (
-    <VerticalCardContainer
-      direction={type}
-      hoverToLevel={3}
-      maxWidth={270}
-      {...rest}
-    >
-      {renderEventLink(coverImage || <VerticalCover data-test="vertical-cover" src={cover || defaultCoverUrl} loading="lazy" onError={(e) => { e.target.onerror = null; e.target.src = defaultCoverUrl; }} />) }
-      <VerticalContentContainer
-        data-test="vertical-content"
-        background={finished ? finishedClockLabelUrl : null}
-      >
-        <div>
-          <DateBookmarkContainer data-test="vertical-date-bookmark">
-            <DateLabelContainer>
-              {finished && <EventCardLabel type="finished" />}
-              {!finished && ads && <EventCardLabel type="ads" />}
-              {!!partnership?.status && (
-              <PartnershipBox>
-                <Icon name={partnership?.status} color="yellow" stickyLeft marginRight={3} />
-                {' '}
-                {partnership?.status === 'colleague' ? 'همکار' : 'همیار'}
-              </PartnershipBox>
-              )}
-              {date && <ShowDate date={date} color="gray" fontSize="12" />}
-              {showDate && (
-                <Text size="12" color="gray" data-test="show-date">{showDate}</Text>
-              )}
-            </DateLabelContainer>
-            <BookmarkIcon
-              name={bookmarked ? 'bookmark' : 'bookmark-border'}
-              size="lg"
-              color="gray"
-              onClick={clickBookmark}
-            />
-          </DateBookmarkContainer>
-          { renderEventLink(<VerticalTitle level={2} size="sm">{title}</VerticalTitle>)}
-          <VerticalPlacePrice list={productPropertiesList} />
-        </div>
-        {(organization && organization.logo !== 'unset') && (
-          <TitledAvatar title={organization.name} titleSize={12} avatar={organization.logo} avatarSize="xs" renderAvatarLink={renderOrganizationLink} />
-        )}
-      </VerticalContentContainer>
-    </VerticalCardContainer>
-  );
-
-  const renderHorizontalCard = () => (
-    <HorizontalCardContainer
-      direction={type}
-      hoverToLevel={3}
-      maxWidth={560}
-      {...rest}
-    >
-      {renderEventLink(<HorizontalCover data-test="horizontal-cover" src={cover || defaultCoverUrl} loading="lazy" />) }
-      <HorizontalContentContainer data-test="horizontal-content">
-        <DateBookmarkContainer>
-          <DateLabelContainer>
-            {finished && <EventCardLabel type="finished" />}
-            {!finished && ads && <EventCardLabel type="ads" />}
-            {date && <ShowDate date={date} color="gray" fontSize="12" />}
-            {showDate && (
-              <Text size="12" color="gray" data-test="show-date">{showDate}</Text>
-            )}
-          </DateLabelContainer>
-          <BookmarkIcon
-            name={bookmarked ? 'bookmark' : 'bookmark-border'}
-            size="lg"
-            color="gray"
-            onClick={clickBookmark}
-            data-test={bookmarked ? 'bookmark' : 'bookmark-border'}
-          />
-        </DateBookmarkContainer>
-        { renderEventLink(<HorizontalTitle level={2} size="sm">{title}</HorizontalTitle>) }
-        <HorizontalPlacePrice list={productPropertiesList} isHorizontal />
-      </HorizontalContentContainer>
-    </HorizontalCardContainer>
-  );
-
-  const renderHorizontalMobileCard = () => (
-    <HorizontalCardContainer
-      direction={type}
-      hoverToLevel={3}
-      maxWidth={560}
-      {...rest}
-    >
-      {renderEventLink(<HorizontalMobileCover data-test="horizontal-mobile-cover" src={cover || defaultCoverUrl} loading="lazy" />) }
-      <HorizontalContentContainer data-test="horizontal-content">
-        <DateBookmarkContainer>
-          <DateLabelContainer>
-            {finished && <EventCardLabel type="finished" />}
-            {!finished && ads && <EventCardLabel type="ads" />}
-            {date && <ShowDate date={date} color="gray" fontSize="10" />}
-            {showDate && (
-              <Text size="10" color="gray" data-test="show-date">{showDate}</Text>
-            )}
-          </DateLabelContainer>
-          <BookmarkIcon
-            name={bookmarked ? 'bookmark' : 'bookmark-border'}
-            size="sm"
-            color="gray"
-            onClick={clickBookmark}
-            data-test={bookmarked ? 'bookmark' : 'bookmark-border'}
-          />
-        </DateBookmarkContainer>
-        { renderEventLink(<HorizontalTitle level={4} size="sm">{title}</HorizontalTitle>) }
-        <HorizontalPlacePrice list={productPropertiesList} isHorizontal />
-      </HorizontalContentContainer>
-    </HorizontalCardContainer>
-  );
-
-  const renderCard = () => {
-    switch (type) {
-      case HORIZONTAL_CARD:
-        return renderHorizontalCard();
-      case HORIZONTAL_MOBILE_CARD:
-        return renderHorizontalMobileCard();
-      case VERTICAL_CARD:
-      default:
-        return renderVerticalCard();
-    }
-  };
-
-  return (
-    <>
-      <GlobalStyle />
-      {renderCard()}
-    </>
-  );
-};
-
-EventCard.propTypes = {
-  title: PropTypes.string.isRequired,
-  bookmarked: PropTypes.bool,
-  type: PropTypes.string,
-  price: PropTypes.string.isRequired,
-  place: PropTypes.string.isRequired,
-  date: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-  ]),
-  showDate: PropTypes.string,
-  cover: PropTypes.string,
-  ads: PropTypes.bool,
-  finished: PropTypes.bool,
-  organization: oneOfType([
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      logo: PropTypes.string,
-    }),
-    PropTypes.undefined,
-  ]),
-  renderEventLink: PropTypes.func.isRequired,
-  renderOrganizationLink: PropTypes.func,
-  clickBookmark: PropTypes.func.isRequired,
-  partnership: PropTypes.shape({
-    status: PropTypes.string,
-  }),
-  coverImage: PropTypes.node || null,
-};
-
-export default EventCard;