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

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

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

@@ -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/theme.js

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

package/src/components/form-v7/captcha/index.js

@@ -1,101 +0,0 @@
-import React from 'react';
-import { Controller } from 'react-hook-form';
-import { ThemeProvider } from 'styled-components';
-import theme from '../theme';
-import ErrorMsg from '../errorMsg';
-import Icon from '../../icon';
-import Button from '../../button';
-import Label from '../label';
-import { Input } from '../text-input/index.style';
-import Display from '../../display';
-import { Fieldset } from '../index.style';
-
-type Props = {
-  htmlElementName: String,
-  label: String,
-  imageUrl: string,
-  control: FormData;
-  classNames?: String,
-  fetchData: () => {},
-  loading?: boolean,
-  number?: number,
-};
-
-function Captcha({
-  classNames = '',
-  loading = false,
-  number = null,
-  htmlElementName,
-  label,
-  imageUrl,
-  control,
-  fetchData,
-}: Props) {
-  const persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
-  const arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
-
-  const fixNumbers = (str) => {
-    let result = str;
-    if (typeof str === 'string') {
-      for (let i = 0; i < 10; i++) {
-        result = result.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
-      }
-    }
-    return result;
-  };
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Fieldset>
-        <div className={classNames}>
-          <Controller
-            name={htmlElementName}
-            control={control}
-            rules={{
-              required: 'این فیلد اجباری است',
-              pattern: {
-                value: /^[۰۱۲۳۴۵۶۷۸۹0-9]{4}$/,
-                message: 'لطفا فقط عدد وارد کنید.',
-              },
-            }}
-            defaultValue=""
-            render={({ field: { onChange, value }, fieldState }) => (
-              <Display display="block">
-                <Label htmlFor={htmlElementName} label={label} number={number} required />
-                <Display display="flex">
-                  <Display display="flex" width="100%">
-                    <Input
-                      id={`${'text'}-${htmlElementName.split(' ').join('')}`}
-                      name={htmlElementName}
-                      type="text"
-                      rtl={false}
-                      value={value}
-                      onChange={(e) => {
-                        onChange(fixNumbers(e.target.value));
-                      }}
-                      className="captcha-input"
-                    />
-                    <img
-                      width="auto"
-                      height="40px"
-                      src={imageUrl}
-                      alt="captcha-img"
-                      loading="lazy"
-                      data-test="captcha-img"
-                    />
-                  </Display>
-                  <Button type="button" size="sm" styleType="tertiary" onClick={fetchData} disabled={loading}>
-                    <Icon name={loading ? 'loading' : 'refresh'} />
-                  </Button>
-                </Display>
-                <ErrorMsg errorMessage={fieldState && fieldState.error?.message} />
-              </Display>
-            )}
-          />
-        </div>
-      </Fieldset>
-    </ThemeProvider>
-  );
-}
-
-export default Captcha;

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

@@ -1,60 +0,0 @@
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import { useForm } from 'react-hook-form';
-import Captcha from './index';
-
-export default {
-  title: 'Form-v7/Captcha',
-  component: Captcha,
-  
-  argTypes: {
-    label: {
-      control: 'text',
-      defaultValue: 'کد تصویری',
-    },
-    htmlElementName: {
-      control: 'text',
-      defaultValue: 'captcha',
-    },
-    imageUrl: {
-      control: 'text',
-      defaultValue: 'https://static.evand.net/captcha/0bb5a9832be7b86a2a0a646ae2fd1649.jpg',
-    },
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'لطفا کد تصویری را وارد کنید',
-    },
-    required: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-  },
-};
-
-const Template = (args) => {
-  const { register, control } = useForm();
-  return (
-    <Captcha
-      {...args}
-      register={register}
-      control={control}
-      handleChange={action('trigger what you want to do in onChange function')}
-      fetchData={() => console.log('fetching')}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'کد تصویری',
-  htmlElementName: 'captcha',
-  imageUrl: 'https://static.evand.net/captcha/0bb5a9832be7b86a2a0a646ae2fd1649.jpg',
-  required: true,
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  ...Default.args,
-  errorMessage: 'کد تصویری نامعتبر است',
-};

package/src/components/form-v7/captcha/index.style.js

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-import defaultTheme from '../theme';
-
-export const Container = styled.div`
-  flex-shrink: 0;
-  margin: 6px 6px 0 0;
-
-  & .hide {
-    display: none;
-  }
-`;
-
-export const Loading = styled.div`
-  height: 32px;
-  width: 120px;
-  background: ${defaultTheme.disabled.color};
-  animation-name: sparkle;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-
-    @keyframes sparkle {
-      0% {opacity: 0;}
-      50% {opacity: 1;}
-      70% {opacity: 1;}
-      100% {opacity: 0;}
-    }
-  }
-`;
-
-export const CaptchaBoxContainer = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-`;
-
-export const InputConiatiner = styled.div`
-  flex-grow: 1;
-`;

package/src/components/form-v7/captcha/index.test.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import findByTestAtrr from '../../utils/test';
-import Captcha from './index';
-
-describe('captcha', () => {
-  it('render captcha box', () => {
-    const component = shallow(<Captcha src="wrong-src" handleRetryCaptcha={() => {}} />);
-    const chaptchaBox = findByTestAtrr(component, 'captcha-box');
-
-    expect(chaptchaBox.length).toBe(1);
-  });
-  it('render captcha input', () => {
-    const component = shallow(<Captcha src="wrong-src" handleRetryCaptcha={() => {}} />);
-    const chaptchaInput = findByTestAtrr(component, 'captcha-input');
-
-    expect(chaptchaInput.length).toBe(1);
-  });
-  it('render captcha img', () => {
-    const component = shallow(<Captcha src="wrong-src" handleRetryCaptcha={() => {}} />);
-    const chaptchaImg = findByTestAtrr(component, 'captcha-img');
-
-    expect(chaptchaImg.length).toBe(1);
-  });
-  it('render retry button', () => {
-    const component = shallow(<Captcha src="wrong-src" handleRetryCaptcha={() => {}} />);
-    const chaptchaRetry = findByTestAtrr(component, 'captcha-retry');
-
-    expect(chaptchaRetry.length).toBe(1);
-  });
-});

package/src/components/form-v7/checkbox/checkbox-option.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { UseFormRegister, FieldValues } from 'react-hook-form';
-import { ThemeProvider } from 'styled-components';
-import theme from '../theme';
-import { Text } from '../../typography';
-import { Input, InputContainer, Label } from './index.style';
-
-type Props = {
-  label: string,
-  value: string,
-  groupName: string,
-  isDisabled?: boolean,
-  isChecked?: boolean,
-  register: UseFormRegister<FieldValues>;
-};
-const CheckboxOption = ({
-  label, value, isDisabled = false, isChecked = false, groupName, register, handleOnchange,
-}: Props) => {
-  const itemId = `${groupName}-${value}`;
-
-  return (
-    <ThemeProvider theme={theme}>
-      <label htmlFor={itemId}>
-        <Input
-          type="checkbox"
-          id={itemId}
-          name={groupName}
-          value={value}
-          defaultChecked={isChecked}
-          {...register(groupName, {
-            disabled: isDisabled,
-            onChange: (handleOnchange),
-          })}
-        />
-        <Text size={14}>
-          {label}
-        </Text>
-      </label>
-    </ThemeProvider>
-  );
-};
-
-export default CheckboxOption;

package/src/components/form-v7/checkbox/checkbox.js

@@ -1,70 +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 GlobalStyle from '../../globalStyle';
-import ErrorMsg from '../errorMsg';
-import { CheckboxWrapper } from './index.style';
-import { Fieldset } from '../index.style';
-import theme from '../theme';
-import Label from '../label';
-import { Text } from '../../typography';
-
-type Props = {
-  children: * => Node,
-  groupName?: string,
-  handleChange?: () => void,
-  isDisabled?: boolean,
-  label?: string,
-  type?: 'horizontal' | 'vertical',
-  required?: boolean,
-  register: UseFormRegister<FieldValues>;
-  control: FormData;
-};
-
-const Checkbox = ({
-  groupName = 'radio-element',
-  label = '',
-  handleChange = () => { },
-  isDisabled = false,
-  type = 'horizontal',
-  required = false,
-  register,
-  number,
-  control,
-  children,
-}: Props) => {
-  const radioElements = React.Children.toArray(children);
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Fieldset onChange={handleChange}>
-        <GlobalStyle />
-        <Label label={label} number={number} required={required} />
-        <Controller
-          name={groupName}
-          control={control}
-          rules={{ required: required ? 'این فیلد اجباری است' : false }}
-          render={({ fieldState }) => (
-            <>
-              <CheckboxWrapper type={type}>
-                {radioElements.map(
-                  (radioElement) => (
-                    isDisabled ? (
-                      React.cloneElement(radioElement, { groupName, isDisabled, register })
-                    ) : (
-                      React.cloneElement(radioElement, { groupName, register })
-                    )
-                  ),
-                )}
-              </CheckboxWrapper>
-              <ErrorMsg errorMessage={fieldState && fieldState.error?.message} />
-            </>
-          )}
-        />
-      </Fieldset>
-    </ThemeProvider>
-  );
-};
-
-export default Checkbox;

package/src/components/form-v7/checkbox/index.js

@@ -1,10 +0,0 @@
-import Checkbox from './checkbox';
-import CheckboxOption from './checkbox-option';
-
-export { default as Checkbox } from './checkbox';
-export { default as CheckboxOption } from './checkbox-option';
-
-export default {
-  Checkbox,
-  CheckboxOption,
-};

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

@@ -1,113 +0,0 @@
-import React from 'react';
-import { useForm } from 'react-hook-form';
-
-import { action } from '@storybook/addon-actions';
-import Checkbox from './checkbox';
-import CheckboxOption from './checkbox-option';
-
-export default {
-  title: 'Form-V7/Checkbox',
-  component: Checkbox,
-  
-  argTypes: {
-    groupName: {
-      control: 'text',
-      defaultValue: 'degree',
-    },
-    label: {
-      control: 'text',
-      defaultValue: 'در کدام موضوع ها توانایی دارید',
-    },
-    number: {
-      control: 'number',
-      defaultValue: 4,
-    },
-    isDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    type: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      defaultValue: 'horizontal',
-    },
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    required: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-  },
-};
-
-const Template = (args) => {
-  const { register, control } = useForm();
-  return (
-    <Checkbox {...args} register={register} control={control}>
-      <CheckboxOption value="100" label="ورزشی" />
-      <CheckboxOption value="234" label="علمی" />
-      <CheckboxOption value="300" label="مذهبی" />
-      <CheckboxOption value="400" label="فرهنگی" />
-      <CheckboxOption value="500" label="هنری" />
-    </Checkbox>
-  );
-};
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  groupName: 'degree',
-  required: true,
-};
-
-export const FullOptions = Template.bind({});
-FullOptions.args = {
-  groupName: 'degree',
-  label: 'در کدام موضوع ها توانایی دارید',
-  number: 4,
-  handleChange: action('trigger what you want to do in onChange function'),
-  isDisabled: false,
-  type: 'horizontal',
-  errorMessage: 'ارور زیبا',
-  required: true,
-};
-
-export const VerticalLayout = Template.bind({});
-VerticalLayout.args = {
-  ...FullOptions.args,
-  type: 'vertical',
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...FullOptions.args,
-  isDisabled: true,
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  ...FullOptions.args,
-  errorMessage: 'لطفا حداقل یک گزینه را انتخاب کنید',
-};
-
-const CheckboxOptionTemplate = (args) => {
-  const { register } = useForm();
-  return (
-    <Checkbox groupName="degree" required label="در کدام موضوع ها توانایی دارید" register={register}>
-      <CheckboxOption {...args} register={register} />
-      <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,
-};

package/src/components/form-v7/checkbox/index.style.js

@@ -1,62 +0,0 @@
-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-v7/dropdown/index.js

@@ -1,10 +0,0 @@
-import Select from './select';
-import SelectOption from './option';
-
-export { default as Select } from './select';
-export { default as SelectOption } from './option';
-
-export default {
-  Select,
-  SelectOption,
-};