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

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

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

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

@@ -1,49 +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: 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

@@ -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-v7/textarea/index.js

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

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

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

@@ -1,20 +0,0 @@
-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/grid/index.js

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