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

package/src/components/form-v7/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: 13px;
-    top: 9px;
-    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: 33px;
-    position: absolute;
-    margin-top: 2px;
-    top: 0;
-    bottom: 1px;
-    left: 5px;
-    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: normal;
-  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: ${({ width }) => width};
-  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-v7/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-v7/dropdown/option.js

@@ -1,18 +0,0 @@
-import React from 'react';
-
-type Props = {
-  label: string,
-  value: string,
-  isDisabled?: boolean,
-}
-const SelectOption = ({ label, value, isDisabled = false }: Props) => (
-  <option
-    disabled={isDisabled}
-    value={value}
-    data-test="select-option"
-  >
-    {label}
-  </option>
-);
-
-export default SelectOption;

package/src/components/form-v7/dropdown/select.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from 'styled-components';
-import { Controller, UseFormRegister, FieldValues } from 'react-hook-form';
-import theme from '../theme';
-import ErrorMsg from '../errorMsg';
-import { StyledSelect, SelectButton } from './index.style';
-import Label from '../label';
-import { Fieldset } from '../index.style';
-
-type Props = {
-  htmlElementName?: string,
-  defaultValue?: string | number,
-  label?: string,
-  placeholder?: string,
-  isDisabled?: boolean,
-  children: * => Node,
-  register: UseFormRegister<FieldValues>;
-  required?: Boolean,
-  number?: number;
-  control: FormData;
-  width?: string;
-  handleChange?: (value) => void,
-}
-const Select = ({
-  htmlElementName = 'select-element',
-  defaultValue = '',
-  placeholder = '',
-  label = '',
-  width = '100%',
-  handleChange = undefined,
-  isDisabled = false,
-  required = false,
-  number = null,
-  control,
-  children,
-}: Props) => {
-  const renderSelect = () => (
-    <ThemeProvider theme={theme}>
-      <SelectButton disabled={isDisabled}>
-        <Controller
-          name={htmlElementName}
-          control={control}
-          rules={{ required: required ? 'این فیلد اجباری است' : false }}
-          render={({ field, fieldState }) => (
-            <>
-              <StyledSelect
-                {...field}
-                defaultValue={defaultValue}
-                onChange={(e) => {
-                  if (handleChange) {
-                    handleChange(e.target.value);
-                  }
-                  // Update RHF's state
-                  field.onChange(e);
-                }}
-                width={width}
-              >
-                {placeholder && (
-                <option value="">{placeholder}</option>
-                )}
-                {children}
-              </StyledSelect>
-              <ErrorMsg errorMessage={fieldState && fieldState.error?.message} />
-            </>
-          )}
-        />
-      </SelectButton>
-    </ThemeProvider>
-  );
-
-  if (label) {
-    return (
-      <ThemeProvider theme={theme}>
-        <Fieldset>
-          <Label htmlFor={htmlElementName} label={label} number={number} required={required} />
-          {renderSelect()}
-        </Fieldset>
-      </ThemeProvider>
-    );
-  }
-  return renderSelect();
-};
-
-export default Select;

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

@@ -1,73 +0,0 @@
-// @flow
-
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import { Controller } from 'react-hook-form';
-import GlobalStyle from '../../globalStyle';
-import theme from '../theme';
-import ErrorMsg from '../errorMsg';
-import Label from '../label';
-import {
-  Input,
-  DescriptionContainer,
-} from './index.style';
-import { Fieldset } from '../index.style';
-
-type Props = {
-  type?: string,
-  label?: string,
-  htmlElementName: string,
-  id?: string,
-  disabled?: boolean,
-  description?: string,
-  register: UseFormRegister<FieldValues>;
-  required?: boolean | String,
-  number?: number;
-  control: FormData;
-}
-
-const FileInput = ({
-  type = 'text',
-  label = null,
-  id = null,
-  disabled = false,
-  description = null,
-  required = false,
-  number = null,
-  htmlElementName,
-  register,
-  control,
-}: Props) => (
-  <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="file-input-description">
-        {description}
-      </DescriptionContainer>
-      )}
-
-      <Controller
-        name={htmlElementName}
-        control={control}
-        rules={{ required: required ? 'این فیلد اجباری است' : false }} // Add required rule
-        render={({ fieldState }) => (
-          <>
-            <Input
-              id={id || `${type}-${htmlElementName.split(' ').join('')}`}
-              name={htmlElementName}
-              type="file"
-              {...register(htmlElementName, {
-                disabled,
-                required: required ? 'این فیلد الزامی است' : false,
-              })}
-            />
-            <ErrorMsg errorMessage={fieldState && fieldState.error?.message} />
-          </>
-        )}
-      />
-    </Fieldset>
-  </ThemeProvider>
-);
-export default FileInput;

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

@@ -1,73 +0,0 @@
-import React from 'react';
-import { useForm } from 'react-hook-form';
-
-import FileInput from './index';
-
-export default {
-  title: 'Form-V7/File Input',
-  component: FileInput,
-  
-  argTypes: {
-    htmlElementName: {
-      control: 'text',
-      defaultValue: 'file-input',
-    },
-    label: {
-      control: 'text',
-      defaultValue: 'این لیبل است',
-    },
-    description: {
-      control: 'text',
-      defaultValue: 'حجم فایل ارسالی باید کمتر از ۴ مگابایت باشد',
-    },
-    number: {
-      control: 'number',
-      defaultValue: 5,
-    },
-    placeholder: {
-      control: 'text',
-      defaultValue: 'متن پیشفرض',
-    },
-    disabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    required: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-  },
-};
-
-const Template = (args) => {
-  const { register, control } = useForm();
-  return <FileInput {...args} register={register} control={control} />;
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  htmlElementName: 'file-input',
-  label: 'این لیبل است',
-  description: 'حجم فایل ارسالی باید کمتر از ۴ مگابایت باشد',
-  number: 5,
-  placeholder: 'متن پیشفرض',
-  disabled: false,
-  errorMessage: 'ارور زیبا',
-  required: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  ...Default.args,
-  errorMessage: 'لطفا یک فایل را انتخاب کنید',
-};

package/src/components/form-v7/file-input/index.style.js

@@ -1,62 +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: 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%;
-
-  &::file-selector-button {
-    color: ${ ({ theme }) => `${theme.colors.blue}`};
-    padding: 0.5em;
-    border: ${ ({ theme }) => `thin solid ${theme.colors.blue}`};
-    border-radius: 3px;
-    width: 100px;
-    height: 80;
-  }
-
-  &[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;
-  }
-`;

package/src/components/form-v7/file-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');
-  });
-});