react-jupiter 5.12.0 → 6.0.0-beta.1

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import Textarea from './index';
+
+export default {
+  title: 'Form/Textarea',
+  component: Textarea,
+  
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'توضیجات',
+    },
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'html-element-name',
+    },
+    defaultValue: {
+      control: 'text',
+      defaultValue: 'توضیحات قبلی',
+    },
+    placeholder: {
+      control: 'text',
+      defaultValue: 'این پلیس هولدر است',
+    },
+    minHeight: {
+      control: 'text',
+      defaultValue: '120',
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    resize: {
+      control: 'select',
+      options: ['none', 'vertical', 'horizontal'],
+      defaultValue: 'vertical',
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'ارور زیبا',
+    },
+    handleChange: {
+      action: 'handleChange',
+    },
+  },
+};
+
+const Template = (args) => <Textarea {...args} />;
+
+export const Minimal = Template.bind({});
+Minimal.args = {};
+
+export const FullOptions = Template.bind({});
+FullOptions.args = {
+  label: 'توضیجات',
+  htmlElementName: 'html-element-name',
+  defaultValue: 'توضیحات قبلی',
+  placeholder: 'این پلیس هولدر است',
+  minHeight: '120',
+  isDisabled: false,
+  resize: 'vertical',
+  handleChange: action('trigger what you want to do in onChange function'),
+  errorMessage: 'ارور زیبا',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  isDisabled: true,
+};
+
+export const NoResize = Template.bind({});
+NoResize.args = {
+  ...FullOptions.args,
+  resize: 'none',
+};
+
+export const HorizontalResize = Template.bind({});
+HorizontalResize.args = {
+  ...FullOptions.args,
+  resize: 'horizontal',
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا توضیحات را وارد کنید',
+};

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const StyledTextarea = styled.textarea`
+  font-family: 'IranSharp';
+  font-size: 14px;
+
+  resize: ${({ resize }) => resize};
+  min-height: ${({ minHeight }) => `${minHeight}px`};
+  width: 100%;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  
+  border-radius: ${({ theme }) => `${theme.borderRadius}px`};
+  border: 1px solid ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.normal)};
+  background: ${({ disabled, theme }) => (disabled ? theme.disabled.background : 'white')};
+
+  &:hover {
+    border-color: ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.hover)};
+  }
+  &:focus {
+    border-color: ${({ theme }) => theme.borderColor.focus};
+  }
+`;
+
+export default StyledTextarea;

package/src/components/form/theme.js

@@ -0,0 +1,16 @@
+import defaultTheme from '../themes';
+
+const theme = {
+  borderRadius: defaultTheme.borderRadius.low,
+  borderColor: {
+    normal: defaultTheme.colors.gray800,
+    hover: defaultTheme.colors.blue400,
+    focus: defaultTheme.colors.blue600,
+  },
+  disabled: {
+    background: defaultTheme.colors.gray200,
+    color: defaultTheme.colors.gray400,
+  },
+};
+
+export default theme;