react-jupiter 5.11.34 → 6.0.0-beta.1

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

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

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

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

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

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

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

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

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

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

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

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

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