react-jupiter 5.12.0 → 6.0.0-beta.2

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

@@ -0,0 +1,132 @@
+// @flow
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider } from 'styled-components';
+import { Controller, UseFormRegister, FieldValues } from 'react-hook-form';
+import GlobalStyle from '../../globalStyle';
+import theme from '../theme';
+import ErrorMsg from '../errorMsg';
+import Label from '../label';
+import {
+  Input,
+  DescriptionContainer,
+  PasswordIcon,
+} from './index.style';
+import { Fieldset } from '../index.style';
+import { fixNumbers } from '../../utils/numbers';
+
+type Props = {
+  type?: 'text' | 'password',
+  label?: string,
+  htmlElementName: string,
+  id?: string,
+  placeholder?: string,
+  disabled?: boolean,
+  description?: string,
+  register: UseFormRegister<FieldValues>;
+  control: FormData;
+  required?: boolean | String,
+  number?: number,
+  rtl?: boolean,
+  onFocus?: (e: FocusEvent) => void,
+  readOnly?: boolean,
+};
+
+type State = {
+  showPassword: boolean,
+};
+
+class TextInput extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showPassword: false,
+    };
+  }
+
+  togglePasswordVisibility = () => {
+    this.setState((prevState) => ({ showPassword: !prevState.showPassword }));
+  };
+
+  handleFocus = (e) => {
+    e.target.setSelectionRange(0, 0);
+  };
+
+  render() {
+    const {
+      type = 'text',
+      label = null,
+      htmlElementName,
+      id = null,
+      placeholder = null,
+      disabled = false,
+      description = null,
+      required = false,
+      number = null,
+      rtl = true,
+      onFocus = () => {},
+      readOnly = false,
+      register,
+      control,
+    } = this.props;
+
+    const { showPassword } = this.state;
+
+    return (
+      <ThemeProvider theme={theme}>
+        <Fieldset>
+          <GlobalStyle />
+          <Label
+            htmlFor={id || `${type}-${htmlElementName.split(' ').join('')}`}
+            label={label}
+            number={number}
+            required={required}
+          />
+          {description && (
+            <DescriptionContainer size={10} color="gray" data-test="text-input-description">
+              {description}
+            </DescriptionContainer>
+          )}
+          <Controller
+            name={htmlElementName}
+            control={control}
+            rules={{ required: required ? 'این فیلد اجباری است' : false }}
+            render={({ field: { value }, fieldState }) => (
+              <div style={{ position: 'relative' }}>
+                {type === 'password' && (
+                  <PasswordIcon
+                    name={showPassword ? 'visibility-off' : 'visibility'}
+                    color="gray"
+                    onClick={this.togglePasswordVisibility}
+                    style={{
+                      cursor: 'pointer', position: 'absolute', top: '50%', left: '10px', transform: 'translateY(-50%)',
+                    }}
+                  />
+                )}
+                <Input
+                  id={id || `${type}-${htmlElementName.split(' ').join('')}`}
+                  name={htmlElementName}
+                  type={showPassword ? 'text' : type}
+                  placeholder={placeholder}
+                  defaultValue={value}
+                  rtl={rtl}
+                  {...register(htmlElementName, {
+                    onFocus: this.handleFocus,
+                    disabled,
+                    onChange: (e) => fixNumbers(e),
+                  })}
+                  onFocus={onFocus}
+                  readOnly={readOnly}
+                />
+                <ErrorMsg errorMessage={fieldState && fieldState.error?.message} />
+              </div>
+            )}
+          />
+        </Fieldset>
+      </ThemeProvider>
+    );
+  }
+}
+
+export default TextInput;

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+
+import TextInput from './index';
+
+export default {
+  title: 'Form-V7/Text Input',
+  component: TextInput,
+  
+  argTypes: {
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'text-name-02',
+    },
+    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',
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+    number: {
+      control: 'number',
+      defaultValue: 23,
+    },
+  },
+};
+
+const Template = (args) => {
+  const { register, control } = useForm();
+  return <TextInput {...args} register={register} control={control} />;
+};
+
+export const FullOptions = Template.bind({});
+FullOptions.args = {
+  htmlElementName: 'text-name-02',
+  required: true,
+  label: 'این لیبل است',
+  number: 23,
+  placeholder: 'متن پیشفرض',
+  disabled: false,
+  description: 'توضیحات اضافه',
+  errorMessage: 'ارور زیبا',
+  type: 'text',
+  rtl: true,
+};
+
+export const LTR = Template.bind({});
+LTR.args = {
+  ...FullOptions.args,
+  rtl: false,
+};
+
+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-v7/text-input/index.style.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { Text } from '../../typography';
+import Icon from '../../icon';
+
+export const Input = styled.input`
+  font-family: 'IranSharp';
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: ${({ theme }) => `${theme.borderRadius}px`};
+  border: solid 1px ${({ theme }) => theme.borderColor.normal};
+  padding: 6px;
+  box-sizing: border-box;
+  width: 100%;
+  direction: ${({ rtl }) => (rtl ? 'rtl' : 'ltr')};
+
+  &[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 DescriptionContainer = styled(Text)`
+  display: block;
+  margin-bottom: 4px;
+`;
+
+export const PasswordIcon = styled(Icon)`
+  position: absolute;
+  left: 0;
+  bottom: 3px;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;

package/src/components/form-v7/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-v7/textarea/index.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { UseFormRegister, FieldValues, Controller } from 'react-hook-form';
+import { ThemeProvider } from 'styled-components';
+import GlobalStyle from '../../globalStyle';
+import theme from '../theme';
+import ErrorMsg from '../errorMsg';
+import Label from '../label';
+import StyledTextarea from './index.style';
+import { Fieldset } from '../index.style';
+
+type Props = {
+  htmlElementName?: string,
+  label?: string,
+  isDisabled?: Boolean,
+  defaultValue?: string,
+  placeholder?: string,
+  resize?: 'horizontal' | 'vertical' | 'none' | 'both',
+  minHeight?: number,
+  handleChange?: () => void,
+  register: UseFormRegister<FieldValues>;
+  required?: boolean | String,
+  number?: number,
+  control: FormData;
+};
+
+const Textarea = ({
+  htmlElementName = 'textarea-element',
+  label = '',
+  isDisabled = false,
+  defaultValue = '',
+  placeholder = '',
+  resize = 'none',
+  minHeight = 120,
+  handleChange = () => { },
+  required = false,
+  number = null,
+  register,
+  control,
+}: Props) => (
+  <ThemeProvider theme={theme}>
+    <Fieldset>
+      <GlobalStyle />
+      <Label htmlFor={htmlElementName} label={label} number={number} required={required} />
+
+      <Controller
+        name={htmlElementName}
+        control={control}
+        rules={{ required: required ? 'این فیلد اجباری است' : false }}
+        render={({ fieldState }) => (
+          <>
+            <StyledTextarea
+              name={htmlElementName}
+              placeholder={placeholder}
+              resize={resize}
+              defaultValue={defaultValue}
+              minHeight={minHeight}
+              {...register(htmlElementName, {
+                onChange: handleChange,
+                disabled: isDisabled,
+              })}
+            />
+            <ErrorMsg errorMessage={fieldState && fieldState.error?.message} />
+          </>
+        )}
+      />
+    </Fieldset>
+  </ThemeProvider>
+);
+
+export default Textarea;

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

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { useForm } from 'react-hook-form';
+import Textarea from './index';
+
+export default {
+  title: 'Form-V7/Textarea',
+  component: Textarea,
+  
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'توضیجات',
+    },
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'html-element-name',
+    },
+    placeholder: {
+      control: 'text',
+      defaultValue: 'این پلیس هولدر است',
+    },
+    minHeight: {
+      control: 'text',
+      defaultValue: '120',
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+    resize: {
+      control: 'select',
+      options: ['both', 'horizontal', 'vertical', 'none'],
+      defaultValue: 'both',
+    },
+    defaultValue: {
+      control: 'text',
+      defaultValue: 'این یک باکس متنی می‌باشد',
+    },
+  },
+};
+
+const Template = (args) => {
+  const { register, control } = useForm();
+  return <Textarea {...args} register={register} control={control} />;
+};
+
+export const Minimal = Template.bind({});
+Minimal.args = {};
+
+export const FullOptions = Template.bind({});
+FullOptions.args = {
+  label: 'توضیجات',
+  htmlElementName: 'html-element-name',
+  placeholder: 'این پلیس هولدر است',
+  minHeight: '120',
+  isDisabled: false,
+  required: true,
+  resize: 'both',
+  handleChange: action('trigger what you want to do in onChange function'),
+  defaultValue: 'این یک باکس متنی می‌باشد',
+};
+
+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-v7/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-v7/theme.js

@@ -0,0 +1,20 @@
+import defaultTheme from '../themes';
+
+const theme = {
+  borderRadius: defaultTheme.borderRadius.high,
+  borderColor: {
+    normal: defaultTheme.colors.gray600,
+    hover: defaultTheme.colors.blue400,
+    focus: defaultTheme.colors.blue600,
+  },
+  disabled: {
+    background: defaultTheme.colors.gray200,
+    color: defaultTheme.colors.gray800,
+  },
+  colors: {
+    red: defaultTheme.colors.red600,
+    blue: defaultTheme.colors.blue600,
+  },
+};
+
+export default theme;

package/src/components/globalStyle.js

@@ -0,0 +1,28 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  h1, h2, h3, h4, h5, h6, p, ol, ul {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+  }
+
+  ol, ul {
+    list-style: none;
+  }
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+    outline: none;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .ReactModal__Body--open {
+    overflow: hidden;
+  }
+`;
+
+export default GlobalStyle;

package/src/components/grid/index.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const getResponsiveValue = (value, theme) => {
+  if (typeof value === 'object') {
+    const breakpoints = theme.breakpoints || {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024,
+    };
+
+    return Object.entries(value)
+      .map(([breakpoint, val]) => {
+        const minWidth = breakpoints[breakpoint];
+        return minWidth
+          ? `@media (min-width: ${minWidth}px) { width: ${val * 100}%; }`
+          : '';
+      })
+      .join('\n');
+  }
+  return `width: ${value * 100}%;`;
+};
+
+const getResponsiveVisibility = (visible, theme) => {
+  if (typeof visible === 'object') {
+    const breakpoints = theme.breakpoints || {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024,
+    };
+
+    return Object.entries(visible)
+      .map(([breakpoint, val]) => {
+        const minWidth = breakpoints[breakpoint];
+        return minWidth
+          ? `@media (min-width: ${minWidth}px) { display: ${val ? 'block' : 'none'}; }`
+          : '';
+      })
+      .join('\n');
+  }
+  return `display: ${visible ? 'block' : 'none'};`;
+};
+
+const getResponsiveAlignment = (align, theme) => {
+  if (typeof align === 'object') {
+    const breakpoints = theme.breakpoints || {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024,
+    };
+
+    return Object.entries(align)
+      .map(([breakpoint, val]) => {
+        const minWidth = breakpoints[breakpoint];
+        return minWidth ? `@media (min-width: ${minWidth}px) { justify-content: ${val}; }` : '';
+      })
+      .join('\n');
+  }
+  return `justify-content: ${align};`;
+};
+
+const GridContainer = styled.div`
+  display: flex;
+  flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};
+  flex-direction: ${({ reverse }) => (reverse ? 'row-reverse' : 'row')};
+  ${({ horizontalAlign, theme }) => getResponsiveAlignment(horizontalAlign || 'left', theme)}
+  ${({ verticalAlign }) => `align-items: ${verticalAlign || 'stretch'};`}
+`;
+
+const GridUnit = styled.div`
+  ${({ size, theme }) => getResponsiveValue(size, theme)}
+  ${({ visible, theme }) => getResponsiveVisibility(visible, theme)}
+`;
+
+const Grid = ({ children, ...props }) => (
+  <GridContainer {...props}>
+    {children}
+  </GridContainer>
+);
+
+Grid.Unit = GridUnit;
+
+export default Grid;