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

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: 'لطفا کد امنیتی را وارد کنید',
-};

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

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-import defaultTheme from '../theme';
-
-export const Container = styled.div`
-  flex-shrink: 0;
-  margin: 6px 6px 0 0;
-
-  & .hide {
-    display: none;
-  }
-`;
-
-export const Loading = styled.div`
-  height: 32px;
-  width: 120px;
-  background: ${defaultTheme.disabled.color};
-  animation-name: sparkle;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-
-    @keyframes sparkle {
-      0% {opacity: 0;}
-      50% {opacity: 1;}
-      70% {opacity: 1;}
-      100% {opacity: 0;}
-    }
-  }
-`;
-
-export const CaptchaBoxContainer = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-`;
-
-export const InputConiatiner = styled.div`
-  flex-grow: 1;
-`;

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import findByTestAtrr from '../../utils/test';
-import Captcha from './index';
-
-describe('captcha', () => {
-  it('render captcha box', () => {
-    const component = shallow(<Captcha src="wrong-src" handleRetryCaptcha={() => {}} />);
-    const chaptchaBox = findByTestAtrr(component, 'captcha-box');
-
-    expect(chaptchaBox.length).toBe(1);
-  });
-  it('render captcha input', () => {
-    const component = shallow(<Captcha src="wrong-src" handleRetryCaptcha={() => {}} />);
-    const chaptchaInput = findByTestAtrr(component, 'captcha-input');
-
-    expect(chaptchaInput.length).toBe(1);
-  });
-  it('render captcha img', () => {
-    const component = shallow(<Captcha src="wrong-src" handleRetryCaptcha={() => {}} />);
-    const chaptchaImg = findByTestAtrr(component, 'captcha-img');
-
-    expect(chaptchaImg.length).toBe(1);
-  });
-  it('render retry button', () => {
-    const component = shallow(<Captcha src="wrong-src" handleRetryCaptcha={() => {}} />);
-    const chaptchaRetry = findByTestAtrr(component, 'captcha-retry');
-
-    expect(chaptchaRetry.length).toBe(1);
-  });
-});

package/src/components/form/checkbox/checkbox-option.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import theme from '../theme';
-import { Text } from '../../typography';
-import { Input } from './index.style';
-
-type Props = {
-  label: string,
-  value: string,
-  groupName: string,
-  isDisabled?: boolean,
-  isChecked?: boolean,
-  inputRef?: any,
-};
-const CheckboxOption = (props: Props) => {
-  const {
-    label, value, isDisabled = false, isChecked = false, inputRef = null, groupName,
-  } = props;
-  const itemId = `${groupName}-${value}-${label.split(' ').join('')}`;
-
-  return (
-    <ThemeProvider theme={theme}>
-      <label htmlFor={itemId}>
-        <Input
-          type="checkbox"
-          id={itemId}
-          name={groupName}
-          value={value}
-          defaultChecked={isChecked}
-          disabled={isDisabled}
-          ref={inputRef}
-        />
-        <Text size={14}>
-          {label}
-        </Text>
-      </label>
-    </ThemeProvider>
-  );
-};
-
-export default CheckboxOption;

package/src/components/form/checkbox/checkbox.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import GlobalStyle from '../../globalStyle';
-import { Text } from '../../typography';
-import ErrorMsg from '../errorMsg';
-import { Fieldset, CheckboxWrapper } from './index.style';
-
-type Props = {
-  children: * => Node,
-  groupName?: string,
-  label?: string,
-  handleChange?: () => void,
-  isDisabled?: boolean,
-  type?: 'horizontal' | 'vertical',
-  errorMessage?: string,
-};
-
-const Checkbox = (props: Props) => {
-  const {
-    groupName = 'radio-element',
-    label = '',
-    handleChange = () => { },
-    isDisabled = false,
-    type = 'horizontal',
-    errorMessage = '',
-    children,
-  } = props;
-  const radioElements = React.Children.toArray(children);
-
-  return (
-    <Fieldset onChange={handleChange}>
-      <GlobalStyle />
-      {label && (
-        <legend>
-          <Text bold size={14}>
-            {label}
-          </Text>
-        </legend>
-      )}
-      <CheckboxWrapper type={type}>
-        {radioElements.map(
-          (radioElement) => (
-            isDisabled ? (
-              React.cloneElement(radioElement, { groupName, isDisabled })
-            ) : (
-              React.cloneElement(radioElement, { groupName })
-            )
-          ),
-        )}
-      </CheckboxWrapper>
-      <ErrorMsg errorMessage={errorMessage} />
-    </Fieldset>
-  );
-};
-export default Checkbox;

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

@@ -1,10 +0,0 @@
-import Checkbox from './checkbox';
-import CheckboxOption from './checkbox-option';
-
-export { default as Checkbox } from './checkbox';
-export { default as CheckboxOption } from './checkbox-option';
-
-export default {
-  Checkbox,
-  CheckboxOption,
-};