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

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;

package/src/components/cover/index.style.js

@@ -1,48 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-
-const defaultImageUrl = 'https://static.evand.net/assets/images/defaults/event-cover.jpg';
-
-export const Container = styled.div`
-  min-height: ${(props) => props.minHeight}px;
-  & > a {
-    display: block;
-  }
-  
-  & > span {
-    display: block;
-    width: 100%;
-    min-height: inherit;
-  }
-`;
-
-const lazyLoadingAnimation = keyframes`
-  100% {
-    opacity: 1;
-    filter: none;
-  }
-  0% {
-    opacity: 0;
-    filter: blur(20px);
-  }
-`;
-
-export const StyledLazyImage = styled(LazyLoadImage)`
-  margin-bottom: -5px;
-  min-height: inherit;
-  width: 100%;
-  font-family: 'IranSharp';
-  display: block;
-  background-image: url(${defaultImageUrl});
-  background-size: cover;
-  animation: ${lazyLoadingAnimation} 2s 1;
-`;
-
-export const StyledImage = styled.img`
-  min-height: inherit;
-  width: 100%;
-  font-family: 'IranSharp';
-  display: block;
-  background-image: url(${defaultImageUrl});
-  background-size: cover;
-`;

package/src/components/cover/index.test.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Link } from 'react-router-dom';
-import findByTestAtrr from '../utils/test';
-import Cover from './index';
-
-describe('Cover', () => {
-  it('should render correctly(simple-cover)', () => {
-    const component = shallow(<Cover />);
-    const cover = findByTestAtrr(component, 'cover');
-    expect(cover.length).toBe(1);
-  });
-
-  it('should render correctly(external link-cover)', () => {
-    const component = shallow(<Cover linkTo="http://yahoo.com" />);
-    const cover = findByTestAtrr(component, 'cover');
-    expect(cover.length).toBe(1);
-  });
-
-  it('should render correctly(internal link-cover)', () => {
-    const component = shallow(<Cover renderLink={(element) => <Link to="/components/card">{element}</Link>} />);
-    const cover = findByTestAtrr(component, 'cover');
-    expect(cover.length).toBe(1);
-  });
-});

package/src/components/display/index.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DisplayStyle } from './index.style';
-
-const Display = (props) => {
-  const renderDisplay = () => {
-    const { children } = props;
-    if (children === undefined) {
-      return null;
-    }
-
-    return <DisplayStyle {...props}>{children}</DisplayStyle>;
-  };
-
-  return (
-    <>
-      {renderDisplay()}
-    </>
-  );
-};
-
-Display.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.string,
-  ]).isRequired,
-  display: PropTypes.string,
-  width: PropTypes.string,
-  widthMobile: PropTypes.string,
-  justifyContent: PropTypes.string,
-  justifyContentMobile: PropTypes.string,
-  alignItems: PropTypes.string,
-  flexDirection: PropTypes.string,
-  flexDirectionMobile: PropTypes.string,
-  wrap: PropTypes.string,
-  className: PropTypes.string,
-  flex: PropTypes.string,
-  alignSelf: PropTypes.string,
-};
-
-export default Display;

package/src/components/display/index.style.js

@@ -1,80 +0,0 @@
-import styled from 'styled-components';
-import defaultTheme from '../themes';
-
-export const Flex = styled.div`
-  display: flex;
-  ${({ justifyContent }) => (justifyContent
-    ? `justify-content: ${justifyContent}`
-    : ''
-  )}
-  ${({ alignItems }) => (alignItems
-    ? `align-items: ${alignItems}`
-    : ''
-  )}
-`;
-
-export const Block = styled.div`
-  display: block;
-`;
-
-export const DisplayStyle = styled.div`
-  ${({ display }) => (display
-    ? `display: ${display};`
-    : ''
-  )}
-  ${({ width }) => (width
-    ? `width: ${width};`
-    : ''
-  )}
-  ${({ widthMobile }) => (widthMobile
-    ? `@media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
-        width: ${widthMobile};
-      }`
-    : ''
-  )}
-  ${({ justifyContent }) => (justifyContent
-    ? `justify-content: ${justifyContent};`
-    : ''
-  )}
-
-  ${({ justifyContentMobile }) => (justifyContentMobile
-    ? `@media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
-        justify-content: ${justifyContentMobile};
-      }`
-    : ''
-  )}
-
-  ${({ alignItems }) => (alignItems
-    ? `align-items: ${alignItems};`
-    : ''
-  )}
-  ${({ alignItemsMobile }) => (alignItemsMobile
-    ? `@media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
-        align-items: ${alignItemsMobile};
-      }`
-    : ''
-  )}
-  ${({ flexDirection }) => (flexDirection
-    ? `flex-direction: ${flexDirection};`
-    : ''
-  )}
-
-  ${({ flexDirectionMobile }) => (flexDirectionMobile
-    ? `@media only screen and (max-width: ${defaultTheme.breakpoints.sm}px) {
-        flex-direction: ${flexDirectionMobile};
-      }`
-    : ''
-  )}
-  ${({ wrap }) => (wrap
-    ? 'flex-wrap: wrap;'
-    : ''
-  )}
-  ${({ flex }) => (flex
-    ? `flex: ${flex};`
-    : ''
-  )}
-  ${({ alignSelf }) => (alignSelf
-    ? `align-self: ${alignSelf};`
-    : ''
-  )}
-`;

package/src/components/file-item/fileImgIcon.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { StyledImgIcon } from './index.style';
-import FontStyle from './fileImgsFont';
-
-type Props = {
-  iconFileName: string,
-}
-
-const FileImgIcon = (props: Props) => {
-  const { iconFileName } = props;
-
-  return (
-    <>
-      <FontStyle />
-      <StyledImgIcon
-        className={`jupiter-file-font ${iconFileName}`}
-        data-test="file-image"
-      >
-        <span className="path1" />
-        <span className="path2" />
-        <span className="path3" />
-        <span className="path4" />
-        <span className="path5" />
-        <span className="path6" />
-        <span className="path7" />
-        <span className="path8" />
-        <span className="path9" />
-        <span className="path10" />
-        <span className="path11" />
-        <span className="path12" />
-        <span className="path13" />
-      </StyledImgIcon>
-    </>
-  );
-};
-
-export default FileImgIcon;