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

package/src/components/form/index.js

@@ -1,22 +0,0 @@
-import TextInput from './text-input';
-import Dropdown from './dropdown';
-import RadioInputGroup from './radio';
-import Textarea from './textarea';
-import CheckboxInputGroup from './checkbox';
-import Captcha from './captcha';
-
-export { default as TextInput } from './text-input';
-export { default as Dropdown } from './dropdown';
-export { default as RadioInputGroup } from './radio';
-export { default as Textarea } from './textarea';
-export { default as CheckboxInputGroup } from './checkbox';
-export { default as Captcha } from './captcha';
-
-export default {
-  TextInput,
-  Dropdown,
-  RadioInputGroup,
-  Textarea,
-  CheckboxInputGroup,
-  Captcha,
-};

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

@@ -1,10 +0,0 @@
-import Radio from './radio';
-import RadioOption from './radio-option';
-
-export { default as Radio } from './radio';
-export { default as RadioOption } from './radio-option';
-
-export default {
-  Radio,
-  RadioOption,
-};

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

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import Radio from './radio';
-import RadioOption from './radio-option';
-
-export default {
-  title: 'Form/Radio',
-  component: Radio,
-  
-  argTypes: {
-    groupName: {
-      control: 'text',
-      defaultValue: 'degree',
-    },
-    label: {
-      control: 'text',
-      defaultValue: 'آخرین مدرک تحصیلی خود را انتخاب کنید',
-    },
-    defaultCheckedValue: {
-      control: 'text',
-      defaultValue: '300',
-    },
-    isDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    type: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      defaultValue: 'horizontal',
-    },
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    handleChange: {
-      action: 'handleChange',
-    },
-  },
-};
-
-const Template = (args) => (
-  <Radio {...args}>
-    <RadioOption value="first" label="First Value" />
-    <RadioOption value="sec" label="Sec Value" />
-    <RadioOption value="third" label="Third Value" />
-  </Radio>
-);
-
-export const Minimal = Template.bind({});
-Minimal.args = {};
-
-export const FullOptions = Template.bind({});
-FullOptions.args = {
-  groupName: 'degree',
-  label: 'آخرین مدرک تحصیلی خود را انتخاب کنید',
-  defaultCheckedValue: '300',
-  handleChange: action('trigger what you want to do in onChange function'),
-  isDisabled: false,
-  type: 'horizontal',
-  errorMessage: 'ارور زیبا',
-};
-
-const FullOptionsTemplate = (args) => (
-  <Radio {...args}>
-    <RadioOption value="100" label="زیر دیپلم" />
-    <RadioOption value="234" label="دیپلم" />
-    <RadioOption value="300" label="کارشناسی" />
-    <RadioOption value="400" label="کارشناسی ارشد" />
-    <RadioOption value="500" label="دکترا" />
-  </Radio>
-);
-
-export const WithDefaultValue = FullOptionsTemplate.bind({});
-WithDefaultValue.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 RadioOptionTemplate = (args) => (
-  <Radio groupName="degree" label="آخرین مدرک تحصیلی خود را انتخاب کنید">
-    <RadioOption {...args} />
-    <RadioOption value="200" label="دیپلم" />
-    <RadioOption value="300" label="کارشناسی" />
-    <RadioOption value="400" label="کارشناسی ارشد" />
-    <RadioOption value="500" label="دکترا" />
-  </Radio>
-);
-
-export const CustomOption = RadioOptionTemplate.bind({});
-CustomOption.args = {
-  label: 'زیر دیپلم',
-  value: '100',
-  isDisabled: false,
-};
-
-export const DisabledOption = RadioOptionTemplate.bind({});
-DisabledOption.args = {
-  ...CustomOption.args,
-  isDisabled: true,
-};

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

@@ -1,61 +0,0 @@
-import styled from 'styled-components';
-
-export const Fieldset = styled.fieldset`
-  border: none;
-  padding: 0;
-  margin: 0;
-   * {
-    box-sizing: content-box;
-  }
-`;
-
-export const RadioWrapper = 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;
-
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  margin-right: 5px;
-  position: relative;
-  top: 4px;
-  
-  border: 1px solid ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.normal)};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  transition: background 0.2s linear;
-
-  &:hover {
-    border: 1px solid ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.hover)};
-  }
-
-  &:checked {
-    border: 5px solid ${({ disabled, theme }) => (disabled ? theme.disabled.background : 'white')};
-    width: 8px;
-    height: 8px;
-    background: ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.focus)};
-
-    &:after {
-      background: ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.focus)};
-    }
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    background: ${({ disabled }) => (disabled ? 'white' : 'transparent')};
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    border-radius: 100%;
-    z-index: -1;
-    top: -6px;
-    right: -6px;
-  }
-`;

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

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

package/src/components/form/radio/radio.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import GlobalStyle from '../../globalStyle';
-import { Text } from '../../typography';
-import ErrorMsg from '../errorMsg';
-import { Fieldset, RadioWrapper } from './index.style';
-
-type Props = {
-  children: * => Node,
-  groupName?: string,
-  label?: string,
-  handleChange?: () => void,
-  defaultCheckedValue?: string,
-  isDisabled?: boolean,
-  type?: 'horizontal' | 'vertical',
-  errorMessage?: string,
-};
-
-const Radio = ({
-  groupName = 'radio-element',
-  label = '',
-  handleChange = () => { },
-  defaultCheckedValue = '',
-  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>
-      )}
-      <RadioWrapper type={type}>
-        {radioElements.map(
-          (radioElement) => (
-            isDisabled ? (
-              React.cloneElement(radioElement, { groupName, defaultCheckedValue, isDisabled })
-            ) : (
-              React.cloneElement(radioElement, { groupName, defaultCheckedValue })
-            )
-          ),
-        )}
-      </RadioWrapper>
-      <ErrorMsg errorMessage={errorMessage} />
-    </Fieldset>
-  );
-};
-
-export default Radio;

package/src/components/form/text-input/index.js

@@ -1,92 +0,0 @@
-// @flow
-
-import React, { useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-import GlobalStyle from '../../globalStyle';
-import theme from '../theme';
-import ErrorMsg from '../errorMsg';
-import {
-  Input,
-  LabelContainer,
-  DescriptionContainer,
-  PasswordIcon,
-  Label,
-} from './index.style';
-
-type Props = {
-  type?: 'text' | 'password',
-  label?: string,
-  htmlElementName: string,
-  id?: string,
-  placeholder?: string,
-  disabled?: boolean,
-  description?: string,
-  errorMessage?: string,
-  inputRef?: any,
-}
-
-const TextInput = ({
-  type = 'text',
-  label = null,
-  id = null,
-  placeholder = null,
-  disabled = false,
-  description = null,
-  errorMessage = '',
-  inputRef = null,
-  htmlElementName,
-}: Props) => {
-  const [value, setValue] = useState('');
-  const [displayedPassword, setDisplayedPassword] = useState(false);
-
-  function handleChange(e) {
-    setValue(e.target.value);
-  }
-
-  function handleDisplayPassword() {
-    setDisplayedPassword(!displayedPassword);
-  }
-
-  function handleFocus(e) {
-    e.target.setSelectionRange(0, 0);
-  }
-
-  return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      <Label htmlFor={id || `${type}-${htmlElementName.split(' ').join('')}`} data-test="text-input">
-        {label && (
-          <LabelContainer bold size={14}>
-            {label}
-          </LabelContainer>
-        )}
-        {description && (
-          <DescriptionContainer bold size={10} color="gray" data-test="text-input-description">
-            {description}
-          </DescriptionContainer>
-        )}
-        <Input
-          id={id || `${type}-${htmlElementName.split(' ').join('')}`}
-          name={htmlElementName}
-          type={displayedPassword || type === 'text' ? 'text' : 'password'}
-          placeholder={placeholder}
-          value={value}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          disabled={disabled}
-          ref={inputRef}
-        />
-        {type === 'password' && (
-          <PasswordIcon
-            name={displayedPassword ? 'visibility-off' : 'visibility'}
-            color={displayedPassword ? 'blue' : 'gray'}
-            onClick={handleDisplayPassword}
-          />
-        )}
-      </Label>
-      <ErrorMsg errorMessage={errorMessage} />
-    </ThemeProvider>
-  );
-};
-
-export default TextInput;

package/src/components/form/text-input/index.stories.js

@@ -1,77 +0,0 @@
-import React from 'react';
-
-import TextInput from './index';
-
-export default {
-  title: 'Form/Inputs',
-  component: TextInput,
-  
-  argTypes: {
-    htmlElementName: {
-      control: 'text',
-      defaultValue: 'text-name-01',
-    },
-    label: {
-      control: 'text',
-      defaultValue: 'این لیبل است',
-    },
-    placeholder: {
-      control: 'text',
-      defaultValue: 'متن پیشفرض',
-    },
-    disabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    description: {
-      control: 'text',
-      defaultValue: 'توضیحات اضافه',
-    },
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    type: {
-      control: 'select',
-      options: ['text', 'password'],
-      defaultValue: 'text',
-    },
-  },
-};
-
-const Template = (args) => <TextInput {...args} />;
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  htmlElementName: 'text-name-01',
-  label: 'این لیبل است',
-};
-
-export const FullOptions = Template.bind({});
-FullOptions.args = {
-  htmlElementName: 'text-name-02',
-  label: 'این لیبل است',
-  placeholder: 'متن پیشفرض',
-  disabled: false,
-  description: 'توضیحات اضافه',
-  errorMessage: 'ارور زیبا',
-  type: 'text',
-};
-
-export const Password = Template.bind({});
-Password.args = {
-  ...FullOptions.args,
-  type: 'password',
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...FullOptions.args,
-  disabled: true,
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  ...FullOptions.args,
-  errorMessage: 'این فیلد الزامی است',
-};

package/src/components/form/text-input/index.style.js

@@ -1,57 +0,0 @@
-import styled from 'styled-components';
-import { Text } from '../../typography';
-import Icon from '../../icon';
-
-export const Input = styled.input`
-  font-family: 'IranSharp';
-  font-weight: bold;
-  font-size: 12px;
-  border-radius: ${({ theme }) => `${theme.borderRadius}px`};
-  border: solid 1px ${({ theme }) => theme.borderColor.normal};
-  padding: 4px;
-  box-sizing: border-box;
-  width: 100%;
-
-  &[disabled=""]{
-    background-color: ${({ theme }) => theme.disabled.background};
-    color: ${({ theme }) => theme.disabled.color};
-    border-color: transparent;
-
-
-    &:hover {
-      border-color: transparent;
-    }
-  }
-
-  &:hover {
-    border-color: ${({ theme }) => theme.borderColor.hover};
-  }
-
-  &:focus {
-    border-color: ${({ theme }) => theme.borderColor.focus};
-  }
-`;
-
-export const LabelContainer = styled(Text)`
-  display: block;
-  margin-bottom: 8px;
-`;
-
-export const DescriptionContainer = styled(Text)`
-  display: block;
-  margin-bottom: 4px;
-`;
-
-export const PasswordIcon = styled(Icon)`
-  position: absolute;
-  left: 0;
-  bottom: 6px;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
-export const Label = styled.label`
-  position: relative;
-`;

package/src/components/form/text-input/index.test.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import findByTestAtrr from '../../utils/test';
-import TextInput from './index';
-
-describe('text input tests', () => {
-  it('render simple text input', () => {
-    const component = shallow(<TextInput label="this is label" htmlElementName="eng name" />);
-    const textInput = findByTestAtrr(component, 'text-input');
-
-    expect(textInput.length).toBe(1);
-  });
-
-  it('render text input with placeholder', () => {
-    const component = mount(<TextInput label="this is label" htmlElementName="eng name" placeholder="hi guys" />);
-    const textInput = findByTestAtrr(component, 'text-input');
-
-    expect(textInput.find('input').prop('placeholder')).toBe('hi guys');
-  });
-
-  it('test text input id without id props', () => {
-    const component = mount(<TextInput label="this is label" htmlElementName="eng name" placeholder="hi guys" />);
-    const textInput = findByTestAtrr(component, 'text-input');
-
-    expect(textInput.find('input').prop('id')).toBe('text-engname');
-  });
-
-  it('render text input - full props', () => {
-    const component = mount(<TextInput label="this is label" htmlElementName="eng name" placeholder="hi guys" type="text" id="hiiii-id" />);
-    const textInput = findByTestAtrr(component, 'text-input');
-
-    expect(textInput.find('input').prop('id')).toBe('hiiii-id');
-    expect(textInput.find('input').prop('type')).toBe('text');
-    expect(textInput.find('input').prop('placeholder')).toBe('hi guys');
-    expect(textInput.find('input').prop('name')).toBe('eng name');
-    expect(textInput.length).not.toBe(0);
-  });
-
-  it('render disabled input', () => {
-    const component = mount(<TextInput label="this is label" htmlElementName="eng name" disabled />);
-    const textInput = findByTestAtrr(component, 'text-input');
-
-    expect(textInput.find('input').prop('disabled')).toBe(true);
-  });
-
-  it('render with or without text-input-description', () => {
-    const componentWithDesc = shallow(<TextInput label="this is label" htmlElementName="with desc" description="hiiiiii" />);
-    const componentWithoutDesc = shallow(<TextInput label="this is label" htmlElementName="without desc" />);
-    const textInputDescription01 = findByTestAtrr(componentWithDesc, 'text-input-description');
-    const textInputDescription02 = findByTestAtrr(componentWithoutDesc, 'text-input-description');
-
-    expect(textInputDescription01.length).toBe(1);
-    expect(textInputDescription02.length).toBe(0);
-  });
-
-  it('render with or err msg', () => {
-    const component = shallow(<TextInput label="this is label" htmlElementName="with desc" description="hiiiiii" errorMessage="this is a good err" />);
-    const textInputErrorMessage = findByTestAtrr(component, 'error-message');
-
-    expect(textInputErrorMessage.length).toBe(1);
-    expect(textInputErrorMessage.children().text()).toBe('this is a good err');
-  });
-});

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

@@ -1,59 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import GlobalStyle from '../../globalStyle';
-import { Text } from '../../typography';
-import theme from '../theme';
-import ErrorMsg from '../errorMsg';
-import StyledTextarea from './index.style';
-
-type Props = {
-  htmlElementName?: string,
-  label?: string,
-  isDisabled?: Boolean,
-  defaultValue?: string,
-  placeholder?: string,
-  resize?: 'horizontal' | 'vertical' | 'none',
-  minHeight?: number,
-  handleChange?: () => void,
-  errorMessage?: string,
-  inputRef?: any,
-};
-
-const Textarea = ({
-  htmlElementName = 'textarea-element',
-  label = '',
-  isDisabled = false,
-  defaultValue = '',
-  placeholder = '',
-  resize = 'none',
-  minHeight = 120,
-  handleChange = () => { },
-  errorMessage = '',
-  inputRef = null,
-}: Props) => (
-  <ThemeProvider theme={theme}>
-    <GlobalStyle />
-    {label && (
-    <label htmlFor={htmlElementName}>
-      <Text bold size={14}>
-        {label}
-      </Text>
-    </label>
-    )}
-
-    <StyledTextarea
-      name={htmlElementName}
-      disabled={isDisabled}
-      placeholder={placeholder}
-      resize={resize}
-      minHeight={minHeight}
-      onChange={handleChange}
-      ref={inputRef}
-    >
-      {defaultValue}
-    </StyledTextarea>
-    <ErrorMsg errorMessage={errorMessage} />
-  </ThemeProvider>
-);
-
-export default Textarea;