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

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;

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

@@ -1,101 +0,0 @@
-import React, { useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-import GlobalStyle from '../globalStyle';
-import getIconFileName from './utils';
-import { Text } from '../typography';
-import theme from './theme';
-import FileImgIcon from './fileImgIcon';
-import {
-  Wrapper, InfoWrapper, VerticalDivider,
-} from './index.style';
-
-type Props = {
-  type?: 'zip' | 'doc' | 'rar' | 'pdf' | 'jpg' | 'png' | 'mp3' | 'mp4' | 'pptx' | 'xlsx',
-  title?: string,
-  description?: string,
-  price: string,
-  fileSize?: string,
-  onClick?: () => void,
-}
-
-const FileItem = ({
-  type = 'zip',
-  title = 'فایل دانلودی',
-  description = '',
-  price,
-  fileSize = '',
-  onClick = () => null,
-}: Props) => {
-  const [isActive, setActivateValue] = useState(false);
-
-  function startHover() {
-    setActivateValue(true);
-  }
-
-  function endHover() {
-    setActivateValue(false);
-  }
-
-  return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      <Wrapper
-        data-test="file-item"
-        isActive={isActive}
-        onMouseEnter={startHover}
-        onMouseLeave={endHover}
-        onClick={onClick}
-      >
-        <FileImgIcon
-          iconFileName={getIconFileName(type, !isActive)}
-        />
-
-        <InfoWrapper>
-          <Text
-            size={14}
-            bold
-            data-test="file-item-title"
-          >
-            { title }
-          </Text>
-
-          {description ? (
-            <Text
-              size={10}
-              data-test="file-item-desc"
-              bold
-            >
-              { description }
-            </Text>
-          ) : (
-            <br />
-          )}
-
-          <div>
-            {fileSize && (
-              <>
-                <Text
-                  size={10}
-                  data-test="file-item-size"
-                >
-                  { fileSize }
-                </Text>
-                <VerticalDivider />
-              </>
-            )}
-
-            <Text
-              size={10}
-              data-test="file-item-price"
-            >
-              {price}
-            </Text>
-          </div>
-
-        </InfoWrapper>
-      </Wrapper>
-    </ThemeProvider>
-  );
-};
-
-export default FileItem;

package/src/components/file-item/index.stories.js

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import FileItem from './index';
-
-export default {
-  title: 'FileItem',
-  component: FileItem,
-  
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['zip', 'doc', 'rar', 'pdf', 'jpg', 'png', 'mp3', 'mp4', 'pptx', 'xlsx'],
-      defaultValue: 'zip',
-    },
-    title: {
-      control: 'text',
-      defaultValue: 'فایل جلسه اول ما',
-    },
-    description: {
-      control: 'text',
-      defaultValue: 'متن توضیحات',
-    },
-    price: {
-      control: 'text',
-      defaultValue: '۶۰۰۰ تومن',
-    },
-    fileSize: {
-      control: 'text',
-      defaultValue: '۵ مگابایت',
-    },
-    onClick: {
-      action: 'onClick',
-    },
-  },
-};
-
-const Template = (args) => <FileItem {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  type: 'zip',
-  title: 'فایل جلسه اول ما',
-  description: 'متن توضیحات',
-  price: '۶۰۰۰ تومن',
-  fileSize: '۵ مگابایت',
-  onClick: action('trigger what you want to do in onClick function'),
-};
-
-export const PDFFile = Template.bind({});
-PDFFile.args = {
-  ...Default.args,
-  type: 'pdf',
-  title: 'فایل PDF',
-};
-
-export const ImageFile = Template.bind({});
-ImageFile.args = {
-  ...Default.args,
-  type: 'jpg',
-  title: 'تصویر',
-  fileSize: '۲ مگابایت',
-};
-
-export const DocumentFile = Template.bind({});
-DocumentFile.args = {
-  ...Default.args,
-  type: 'doc',
-  title: 'سند',
-  description: 'فایل ورد',
-};

package/src/components/file-item/index.style.js

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledImgIcon = styled.span`
-  font-size: 67px;
-`;
-
-export const Wrapper = styled.div`
-  cursor: pointer;
-  border: 1px solid ${({ theme, isActive }) => (isActive ? theme.colors.riverBedDark : 'transparent')};
-  border-radius: ${({ theme }) => `${theme.borderRadius}px`};
-  padding: ${({ theme }) => theme.spacing[5]} ${({ theme }) => theme.spacing[6]};
-  box-sizing: border-box;
-  display: flex;
-`;
-
-export const InfoWrapper = styled.div`
-  width: calc(100% - 52px);
-  padding-right: ${({ theme }) => theme.spacing[4]};
-
-  & > span {
-    display: block;
-  }
-`;
-
-export const VerticalDivider = styled.span`
-  display: inline-block;
-  width: 1px;
-  height: 8px;
-  margin: 0 ${({ theme }) => theme.spacing[4]};
-  background: ${({ theme }) => theme.colors.riverBed};
-`;

package/src/components/file-item/index.test.js

@@ -1,106 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import findByTestAtrr from '../utils/test';
-import FileItem from './index';
-
-const setupShallow = (props = { price: '۵۰۰۰ تومن' }) => (
-  shallow(<FileItem data={props.data} {...props} />)
-);
-
-const setupMount = (props = { price: '۵۰۰۰ تومن' }) => (
-  mount(<FileItem data={props.data} {...props} />)
-);
-
-describe('file-item test', () => {
-  it('file item existance', () => {
-    const component = setupShallow();
-    const TheFileItem = findByTestAtrr(component, 'file-item');
-
-    expect(TheFileItem.length).toBe(1);
-  });
-
-  it('file item should have related image', () => {
-    const component = setupMount({ type: 'doc' });
-    const TheDocFileImage = component.find(".icon-doc-light[data-test='file-image']");
-    const TheZipFileImage = component.find(".icon-zip-light[data-test='file-image']");
-
-    expect(TheDocFileImage.length).not.toBe(0);
-    expect(TheZipFileImage.length).toBe(0);
-  });
-
-  it('file item should have title with spesefic size and bold', () => {
-    const component = setupShallow();
-    const Title = findByTestAtrr(component, 'file-item-title');
-
-    expect(Title.length).toBe(1);
-    expect(Title.props().size).toBe(14);
-    expect(Title.props().bold).toBe(true);
-  });
-
-  it('file item should have title as the same of what we passed', () => {
-    const component = setupShallow({ title: 'فایل های کاربردی' });
-    const Title = findByTestAtrr(component, 'file-item-title');
-
-    expect(Title.props().children).toBe('فایل های کاربردی');
-  });
-
-  it('file item could have description with spesefic size and bold', () => {
-    const component = setupShallow({ description: 'این توضیحات فرضی' });
-    const Desc = findByTestAtrr(component, 'file-item-desc');
-
-    expect(Desc.length).toBe(1);
-    expect(Desc.props().size).toBe(10);
-    expect(Desc.props().bold).toBe(true);
-  });
-
-  it('file item should disply only if it has the description prop and initial with that value', () => {
-    const componentWithoutDesc = setupShallow();
-    const componentWithDesc = setupShallow({ description: 'این توضیحات فرضی' });
-    const DescInComp01 = findByTestAtrr(componentWithoutDesc, 'file-item-desc');
-    const DescInComp02 = findByTestAtrr(componentWithDesc, 'file-item-desc');
-
-    expect(DescInComp01.length).toBe(0);
-    expect(DescInComp02.length).toBe(1);
-    expect(DescInComp02.props().children).toBe('این توضیحات فرضی');
-  });
-
-  it('file item must have price with spesefic size and initial with that value', () => {
-    const component = setupShallow({ price: '۶۰۰۰ تومن' });
-    const Price = findByTestAtrr(component, 'file-item-price');
-
-    expect(Price.length).toBe(1);
-    expect(Price.props().children).toBe('۶۰۰۰ تومن');
-    expect(Price.props().size).toBe(10);
-  });
-
-  it('file item could have fileSize with spesefic size and bold', () => {
-    const component = setupShallow({ fileSize: '۷ مگابایت' });
-    const FileSize = findByTestAtrr(component, 'file-item-size');
-
-    expect(FileSize.length).toBe(1);
-    expect(FileSize.props().size).toBe(10);
-  });
-
-  it('file item should disply fileSize only if it has the prop and initial with that value', () => {
-    const componentWithoutFileSize = setupShallow();
-    const componentWithFileSize = setupShallow({ fileSize: '۷ مگابایت' });
-    const FileSizeInComp01 = findByTestAtrr(componentWithoutFileSize, 'file-item-size');
-    const FileSizeInComp02 = findByTestAtrr(componentWithFileSize, 'file-item-size');
-
-    expect(FileSizeInComp01.length).toBe(0);
-    expect(FileSizeInComp02.length).toBe(1);
-    expect(FileSizeInComp02.props().children).toBe('۷ مگابایت');
-  });
-
-  it('file item must response to onClick function', () => {
-    let flag = false;
-    function clickSample() {
-      flag = true;
-    }
-    const component = setupMount({ onClick: clickSample });
-
-    expect(flag).toBe(false);
-    component.simulate('click');
-    expect(flag).toBe(true);
-  });
-});

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

@@ -1,12 +0,0 @@
-import defaultTheme from '../themes';
-
-const theme = {
-  colors: {
-    riverBedDark: defaultTheme.colors.riverBedDark,
-    riverBed: defaultTheme.colors.riverBed,
-  },
-  borderRadius: defaultTheme.borderRadius.high,
-  spacing: defaultTheme.spacing,
-};
-
-export default theme;

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

@@ -1,3 +0,0 @@
-export default function getIconFileName(type, isLightIcon) {
-  return `icon-${type}${isLightIcon ? '-light' : ''}`;
-}

package/src/components/form/captcha/index.js

@@ -1,86 +0,0 @@
-// @flow
-
-import React, { useState } from 'react';
-import TextInput from '../text-input';
-import Button from '../../button';
-import {
-  CaptchaBoxContainer,
-  Loading,
-  InputConiatiner,
-  Container,
-} from './index.style';
-
-type Props = {
-  src: string,
-  errorMessage?: string,
-  inputRef?: any,
-  handleCaptchaError?: () => void;
-  handleRetryCaptcha?: () => void;
-};
-
-function Captcha({
-  src,
-  errorMessage = '',
-  inputRef = null,
-  handleCaptchaError = () => {},
-  handleRetryCaptcha = null,
-}: Props) {
-  const [imageLoadingStatus, setImageLoadingStatus] = useState('loading');
-
-  function hanelImgLoading() {
-    setImageLoadingStatus('loaded');
-  }
-  function handleImgError() {
-    setImageLoadingStatus('failedToLoad');
-    handleCaptchaError();
-  }
-
-  return (
-    <CaptchaBoxContainer data-test="captcha-box">
-      <InputConiatiner>
-        <TextInput
-          data-test="captcha-input"
-          htmlElementName="captcha-input"
-          label="کد تصویری"
-          errorMessage={errorMessage}
-          type="text"
-          inputRef={inputRef}
-        />
-      </InputConiatiner>
-      <Container>
-        {imageLoadingStatus !== 'loaded' && (
-          <Loading />
-        )}
-        <img
-          className={`${imageLoadingStatus === 'loaded' ? '' : 'hide'}`}
-          width="120px"
-          height="32px"
-          src={src}
-          alt="captcha-img"
-          loading="lazy"
-          onLoad={hanelImgLoading}
-          onError={handleImgError}
-          data-test="captcha-img"
-        />
-      </Container>
-      {handleRetryCaptcha && (
-        <Container>
-          <Button
-            data-test="captcha-retry"
-            htmlType="button"
-            icon="refresh"
-            isLoading={imageLoadingStatus === 'loading'}
-            onClick={handleRetryCaptcha}
-            mainColor="blue"
-            size="sm"
-            styleType={imageLoadingStatus === 'failedToLoad' ? 'primary' : 'tertiary'}
-          >
-            کد تصویری جدید
-          </Button>
-        </Container>
-      )}
-    </CaptchaBoxContainer>
-  );
-}
-
-export default Captcha;

package/src/components/form/captcha/index.stories.js

@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import Captcha from './index';
-
-export default {
-  title: 'Form/Captcha',
-  component: Captcha,
-  
-  argTypes: {
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    src: {
-      control: 'text',
-      defaultValue: 'https://static.evand.net/captcha/12c178c8006cb0cea5253a83db6a96db.jpg',
-    },
-    handleCaptchaError: {
-      action: 'handleCaptchaError',
-    },
-    handleRetryCaptcha: {
-      action: 'handleRetryCaptcha',
-    },
-  },
-};
-
-const Template = (args) => <Captcha {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  errorMessage: 'ارور زیبا',
-  src: 'https://static.evand.net/captcha/12c178c8006cb0cea5253a83db6a96db.jpg',
-  handleCaptchaError: action('trigger what you want to do when captcha src has an err'),
-  handleRetryCaptcha: action('trigger what you want to do when click on retry button'),
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  ...Default.args,
-  errorMessage: 'لطفا کد امنیتی را وارد کنید',
-};