react-jupiter 5.12.0 → 6.0.0-beta.2

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+
+import { action } from '@storybook/addon-actions';
+import Select from './select';
+import SelectOption from './option';
+
+export default {
+  title: 'Form-v7/Dropdown',
+  component: Select,
+  
+  argTypes: {
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'استان',
+    },
+    placeholder: {
+      control: 'text',
+      defaultValue: '__استان مورد نظر خود را انتخاب کنید__',
+    },
+    defaultValue: {
+      control: 'text',
+      defaultValue: '30',
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    label: {
+      control: 'text',
+      defaultValue: 'محل برگزاری رویداد',
+    },
+    number: {
+      control: 'number',
+      defaultValue: 3,
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'ارور زیبا',
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+  },
+};
+
+const Template = (args) => {
+  const { register, control } = useForm();
+  return (
+    <Select {...args} register={register} control={control}>
+      <SelectOption value="20" label="کرج" />
+      <SelectOption value="30" label="تهران" />
+      <SelectOption value="40" label="فم" />
+    </Select>
+  );
+};
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  htmlElementName: 'select',
+  placeholder: 'یک گزینه را انتخاب کنید',
+  defaultValue: 'question 2',
+  label: 'select box',
+  number: 1,
+  required: false,
+};
+
+export const WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  htmlElementName: 'استان',
+  placeholder: '__استان مورد نظر خود را انتخاب کنید__',
+  handleChange: action('trigger what you want to do in onChange function'),
+};
+
+export const FullOptions = Template.bind({});
+FullOptions.args = {
+  htmlElementName: 'استان',
+  defaultValue: '30',
+  handleChange: action('trigger what you want to do in onChange function'),
+  isDisabled: false,
+  label: 'محل برگزاری رویداد',
+  number: 3,
+  errorMessage: 'ارور زیبا',
+  required: true,
+};
+
+export const WithPlaceholderAndOptions = Template.bind({});
+WithPlaceholderAndOptions.args = {
+  ...FullOptions.args,
+  placeholder: '__استان مورد نظر خود را انتخاب کنید__',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  isDisabled: true,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا یک گزینه را انتخاب کنید',
+};
+
+const SelectOptionTemplate = (args) => {
+  const { register, control } = useForm();
+  return (
+    <Select
+      htmlElementName="استان"
+      defaultValue="30"
+      handleChange={action('trigger what you want to do in onChange function')}
+      isDisabled={false}
+      register={register}
+      required
+      control={control}
+    >
+      <SelectOption {...args} />
+      <SelectOption value="30" label="تهران" />
+      <SelectOption value="40" label="فم" />
+    </Select>
+  );
+};
+
+export const CustomOption = SelectOptionTemplate.bind({});
+CustomOption.args = {
+  value: '20',
+  label: 'کرج',
+  isDisabled: false,
+};