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

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,
-};

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

@@ -1,121 +0,0 @@
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import Checkbox from './checkbox';
-import CheckboxOption from './checkbox-option';
-
-export default {
-  title: 'Form/Checkbox',
-  component: Checkbox,
-  
-  argTypes: {
-    groupName: {
-      control: 'text',
-      defaultValue: 'degree',
-    },
-    label: {
-      control: 'text',
-      defaultValue: 'در کدام موضوع ها توانایی دارید',
-    },
-    isDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    type: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      defaultValue: 'horizontal',
-    },
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    handleChange: {
-      action: 'handleChange',
-    },
-  },
-};
-
-const Template = (args) => (
-  <Checkbox {...args}>
-    <CheckboxOption value="first" label="First Value" />
-    <CheckboxOption value="sec" label="Sec Value" />
-    <CheckboxOption value="third" label="Third Value" />
-  </Checkbox>
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {};
-
-export const FullOptions = Template.bind({});
-FullOptions.args = {
-  groupName: 'degree',
-  label: 'در کدام موضوع ها توانایی دارید',
-  handleChange: action('trigger what you want to do in onChange function'),
-  isDisabled: false,
-  type: 'horizontal',
-  errorMessage: 'ارور زیبا',
-};
-
-const FullOptionsTemplate = (args) => (
-  <Checkbox {...args}>
-    <CheckboxOption value="100" label="ورزشی" />
-    <CheckboxOption value="234" label="علمی" />
-    <CheckboxOption value="300" label="مذهبی" />
-    <CheckboxOption value="400" label="فرهنگی" isChecked />
-    <CheckboxOption value="500" label="هنری" isChecked />
-  </Checkbox>
-);
-
-export const WithPreSelectedOptions = FullOptionsTemplate.bind({});
-WithPreSelectedOptions.args = {
-  ...FullOptions.args,
-};
-
-export const VerticalLayout = FullOptionsTemplate.bind({});
-VerticalLayout.args = {
-  ...FullOptions.args,
-  type: 'vertical',
-};
-
-export const Disabled = FullOptionsTemplate.bind({});
-Disabled.args = {
-  ...FullOptions.args,
-  isDisabled: true,
-};
-
-export const WithError = FullOptionsTemplate.bind({});
-WithError.args = {
-  ...FullOptions.args,
-  errorMessage: 'لطفا حداقل یک گزینه را انتخاب کنید',
-};
-
-const CheckboxOptionTemplate = (args) => (
-  <Checkbox groupName="degree" label="در کدام موضوع ها توانایی دارید">
-    <CheckboxOption {...args} />
-    <CheckboxOption value="200" label="علمی" />
-    <CheckboxOption value="300" label="مذهبی" />
-    <CheckboxOption value="400" label="فرهنگی" />
-    <CheckboxOption value="500" label="هنری" />
-  </Checkbox>
-);
-
-export const CustomOption = CheckboxOptionTemplate.bind({});
-CustomOption.args = {
-  label: 'ورزشی',
-  value: '100',
-  isDisabled: false,
-  isChecked: false,
-};
-
-export const DisabledOption = CheckboxOptionTemplate.bind({});
-DisabledOption.args = {
-  ...CustomOption.args,
-  isDisabled: true,
-};
-
-export const CheckedOption = CheckboxOptionTemplate.bind({});
-CheckedOption.args = {
-  ...CustomOption.args,
-  isChecked: true,
-};

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

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-
-export const Fieldset = styled.fieldset`
-  border: none;
-  padding: 0;
-  margin: 0;
-`;
-
-export const CheckboxWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  ${({ type }) => (type === 'vertical' ? 'flex-direction: column;' : '')}
-`;
-
-export const Input = styled.input`
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  width: 16px;
-  height: 16px;
-
-  border: 1px solid ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.normal)};
-  background: ${({ disabled, theme }) => (disabled ? theme.disabled.background : 'white')};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  transition: 0.2s all linear;
-  margin-right: 5px;
-
-  position: relative;
-  top: 10px;
-  
-  &:hover {
-    border-color: ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.hover)};
-  }
-
-  &:checked {
-    border-color: ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.focus)};
-    
-    &:after {
-      border-color: ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.focus)};
-    }
-  }
-
-  &:after {
-    content: '';
-    display: block;
-
-    height: 8px;
-    width: 5px;
-    position: absolute;
-    right: 5px;
-    top: 2px;
-
-    transition: 0.2s all linear;
-
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    border-bottom: 2px solid transparent;
-    border-right: 2px solid transparent;
-  }
-`;

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

@@ -1,10 +0,0 @@
-import Select from './select';
-import SelectOption from './option';
-
-export { default as Select } from './select';
-export { default as SelectOption } from './option';
-
-export default {
-  Select,
-  SelectOption,
-};

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

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import Select from './select';
-import SelectOption from './option';
-
-export default {
-  title: 'Form/Dropdown',
-  component: Select,
-  
-  argTypes: {
-    htmlElementName: {
-      control: 'text',
-      defaultValue: 'استان',
-    },
-    placeholder: {
-      control: 'text',
-      defaultValue: '__استان مورد نظر خود را انتخاب کنید__',
-    },
-    defaultValue: {
-      control: 'text',
-      defaultValue: '30',
-    },
-    isDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    label: {
-      control: 'text',
-      defaultValue: 'محل برگزاری رویداد',
-    },
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    handleChange: {
-      action: 'handleChange',
-    },
-  },
-};
-
-const Template = (args) => (
-  <Select {...args}>
-    <SelectOption value="first" label="First Value" />
-    <SelectOption value="sec" label="2nd Value" />
-  </Select>
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {};
-
-export const WithPlaceholder = Template.bind({});
-WithPlaceholder.args = {
-  htmlElementName: 'استان',
-  placeholder: '__استان مورد نظر خود را انتخاب کنید__',
-  handleChange: action('trigger what you want to do in onChange function'),
-};
-
-const WithOptionsTemplate = (args) => (
-  <Select {...args}>
-    <SelectOption value="20" label="کرج" />
-    <SelectOption value="30" label="تهران" />
-    <SelectOption value="40" label="فم" isDisabled />
-  </Select>
-);
-
-export const FullOptions = WithOptionsTemplate.bind({});
-FullOptions.args = {
-  htmlElementName: 'استان',
-  defaultValue: '30',
-  handleChange: action('trigger what you want to do in onChange function'),
-  isDisabled: false,
-  label: 'محل برگزاری رویداد',
-  errorMessage: 'ارور زیبا',
-};
-
-export const WithPlaceholderAndOptions = WithOptionsTemplate.bind({});
-WithPlaceholderAndOptions.args = {
-  ...FullOptions.args,
-  placeholder: '__استان مورد نظر خود را انتخاب کنید__',
-};
-
-export const Disabled = WithOptionsTemplate.bind({});
-Disabled.args = {
-  ...FullOptions.args,
-  isDisabled: true,
-};
-
-export const WithError = WithOptionsTemplate.bind({});
-WithError.args = {
-  ...FullOptions.args,
-  errorMessage: 'لطفا یک گزینه را انتخاب کنید',
-};
-
-const SelectOptionTemplate = (args) => (
-  <Select
-    htmlElementName="استان"
-    defaultValue="30"
-    handleChange={action('trigger what you want to do in onChange function')}
-    isDisabled={false}
-  >
-    <SelectOption {...args} />
-    <SelectOption value="30" label="تهران" />
-    <SelectOption value="40" label="فم" />
-  </Select>
-);
-
-export const CustomOption = SelectOptionTemplate.bind({});
-CustomOption.args = {
-  value: '20',
-  label: 'کرج',
-  isDisabled: false,
-};
-
-export const DisabledOption = SelectOptionTemplate.bind({});
-DisabledOption.args = {
-  ...CustomOption.args,
-  isDisabled: true,
-};

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

@@ -1,57 +0,0 @@
-import styled from 'styled-components';
-
-export const SelectButton = styled.div`
-  position: relative;
-
-  &:after {
-    content: "";
-    display: block;
-    width: 7px;
-    height: 7px;
-    position: absolute;
-    left: 15px;
-    top: 11px;
-    border: solid ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.normal)};
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    -webkit-transform: rotate(45deg);
-    pointer-events: none;
-  }
-
-  &:before {
-    content: "";
-    display: block;
-    width: 37px;
-    position: absolute;
-    margin-top: 2px;
-    top: 0;
-    bottom: 1px;
-    left: 1px;
-    border-right: 1px solid ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.normal)};
-    background: ${({ disabled, theme }) => (disabled ? theme.disabled.background : 'white')};
-    pointer-events: none;
-  }
-`;
-
-export const StyledSelect = styled.select`
-  font-family: 'IranSharp';
-  font-weight: bold;
-  font-size: 12px;
-  border-radius: ${({ theme }) => `${theme.borderRadius}px`};
-  border: solid 1px ${({ disabled, theme }) => (disabled ? 'transparent' : theme.borderColor.normal)};
-  padding: 4px;
-  box-sizing: border-box;
-  width: 100%;
-  background: ${({ disabled, theme }) => (disabled ? theme.disabled.background : 'white')};
-  ${({ disabled, theme }) => (disabled ? `color: ${theme.disabled.color};` : '')}
-  ${({ disabled, theme }) => (disabled ? `color: ${theme.disabled.color};` : '')}
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-
-  &:hover {
-    border-color: ${({ disabled, theme }) => (disabled ? 'transparent' : theme.borderColor.hover)};
-  }
-
-  &:focus {
-    border-color: ${({ theme }) => theme.borderColor.focus};
-  }
-`;

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import findByTestAtrr from '../../utils/test';
-import Select from './select';
-import SelectOption from './option';
-
-describe('dropdown (select-option) tests', () => {
-  it('render simple select tag', () => {
-    const component = shallow(<Select />);
-    const select = findByTestAtrr(component, 'select');
-
-    expect(select.length).toBe(1);
-  });
-  it('render simple option tag', () => {
-    const component = shallow(<SelectOption label="hi" value="hi_val" />);
-    const option = findByTestAtrr(component, 'select-option');
-
-    expect(option.length).toBe(1);
-  });
-});

package/src/components/form/dropdown/option.js

@@ -1,22 +0,0 @@
-import React from 'react';
-
-type Props = {
-  label: string,
-  value: string,
-  isDisabled?: boolean,
-}
-const SelectOption = (props: Props) => {
-  const { label, value, isDisabled = false } = props;
-
-  return (
-    <option
-      disabled={isDisabled}
-      value={value}
-      data-test="select-option"
-    >
-      {label}
-    </option>
-  );
-};
-
-export default SelectOption;

package/src/components/form/dropdown/select.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import theme from '../theme';
-import { Text } from '../../typography';
-import ErrorMsg from '../errorMsg';
-import { StyledSelect, SelectButton } from './index.style';
-
-type Props = {
-  htmlElementName?: string,
-  defaultValue?: string,
-  label?: string,
-  handleChange?: () => void,
-  placeholder?: string,
-  isDisabled?: boolean,
-  children: * => Node,
-  errorMessage?: string,
-  inputRef?: any,
-}
-const Select = ({
-  htmlElementName = 'select-element',
-  defaultValue = '',
-  placeholder = '',
-  label = '',
-  isDisabled = false,
-  handleChange = () => { },
-  errorMessage = '',
-  inputRef = null,
-  children,
-}: Props) => {
-  function onChange(e) {
-    handleChange(e.target.value);
-  }
-
-  const renderSelect = () => (
-    <ThemeProvider theme={theme}>
-      <SelectButton disabled={isDisabled}>
-        <StyledSelect
-          disabled={isDisabled}
-          onChange={onChange}
-          name={htmlElementName}
-          defaultValue={placeholder ? '' : defaultValue}
-          data-test="select"
-          ref={inputRef}
-        >
-          {placeholder && (
-            <option value="" disabled>{placeholder}</option>
-          )}
-          {children}
-        </StyledSelect>
-      </SelectButton>
-      <ErrorMsg errorMessage={errorMessage} />
-    </ThemeProvider>
-  );
-
-  if (label) {
-    return (
-      <label htmlFor={htmlElementName}>
-        <Text size={14} bold isDisplayBlock>
-          {label}
-        </Text>
-        {renderSelect()}
-      </label>
-    );
-  }
-  return renderSelect();
-};
-
-export default Select;

package/src/components/form/errorMsg.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import Icon from '../icon';
-import { Text } from '../typography';
-import { Margin } from '../spacing';
-
-const ErrorMsg = ({ errorMessage = '' }: { errorMessage?: string }) => {
-  if (errorMessage) {
-    return (
-      <Margin top={4}>
-        <Icon name="error" color="red" size="sm" stickyRight />
-        <Text bold size={10} color="red" data-test="error-message">
-          {errorMessage}
-        </Text>
-      </Margin>
-    );
-  }
-
-  return null;
-};
-
-export default ErrorMsg;