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

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;

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