react-jupiter 5.12.0 → 6.0.0-beta.2

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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,86 @@
+// @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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,10 @@
+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,
+};