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

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

@@ -1,276 +0,0 @@
-import React from 'react';
-
-import { useForm } from 'react-hook-form';
-import { action } from '@storybook/addon-actions';
-import { Select, SelectOption } from '../dropdown';
-import FileInput from '../file-input';
-import RadioOption from '../radio/radio-option';
-import Radio from '../radio/radio';
-import TextInput from '../text-input';
-import Textarea from '../textarea';
-import Checkbox from '../checkbox/checkbox';
-import CheckboxOption from '../checkbox/checkbox-option';
-import Captcha from '../captcha';
-
-export default {
-  title: 'Form-V7/Sample Form',
-  component: 'form',
-  
-  argTypes: {
-    fileInputLabel: {
-      control: 'text',
-      defaultValue: 'این لیبل است',
-    },
-    fileInputPlaceholder: {
-      control: 'text',
-      defaultValue: 'متن پیشفرض',
-    },
-    fileInputDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    fileInputErrorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    radioLabel: {
-      control: 'text',
-      defaultValue: 'زیر دیپلم',
-    },
-    radioValue: {
-      control: 'text',
-      defaultValue: '100',
-    },
-    radioDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    textInputLabel: {
-      control: 'text',
-      defaultValue: 'این لیبل است',
-    },
-    textInputPlaceholder: {
-      control: 'text',
-      defaultValue: 'متن پیشفرض',
-    },
-    textInputDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    textInputErrorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    textInputType: {
-      control: 'select',
-      options: ['text', 'password'],
-      defaultValue: 'text',
-    },
-    textareaLabel: {
-      control: 'text',
-      defaultValue: 'توضیجات',
-    },
-    textareaHtmlElementName: {
-      control: 'text',
-      defaultValue: 'textarea-box',
-    },
-    textareaPlaceholder: {
-      control: 'text',
-      defaultValue: 'این پلیس هولدر است',
-    },
-    textareaMinHeight: {
-      control: 'text',
-      defaultValue: '120',
-    },
-    checkboxLabel: {
-      control: 'text',
-      defaultValue: 'ورزشی',
-    },
-    checkboxValue: {
-      control: 'text',
-      defaultValue: '100',
-    },
-    checkboxDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    checkboxChecked: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-  },
-};
-
-const Template = (args) => {
-  const {
-    register,
-    handleSubmit,
-    control,
-    setValue,
-    setError,
-  } = useForm();
-
-  const onSubmit = (data) => {
-    setError({
-      message: 'کپچا معتبر نیست .',
-      errors: { captcha: ['کپچا معتبر نیست .'] },
-      status_code: 422,
-    });
-  };
-
-  const options = [
-    'question 1',
-    'question 2',
-    'question 3',
-  ];
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Select
-        htmlElementName="select"
-        placeholder="یک گزینه را انتخاب کنید"
-        register={register}
-        control={control}
-        defaultValue={0}
-        label="select box"
-        number={1}
-        required={false}
-      >
-        {!!options && options.map((option, key) => (
-          <SelectOption key={key} value={option} label={option} />
-        ))}
-      </Select>
-
-      <FileInput
-        htmlElementName="file-input"
-        register={register}
-        control={control}
-        label={args.fileInputLabel}
-        description="حجم فایل ارسالی باید کمتر از ۴ مگابایت باشد"
-        number={2}
-        placeholder={args.fileInputPlaceholder}
-        disabled={args.fileInputDisabled}
-        errorMessage={args.fileInputErrorMessage}
-        required={false}
-      />
-
-      <Radio
-        groupName="radio"
-        label="radio input"
-        number={3}
-        register={register}
-        control={control}
-        required={false}
-      >
-        <RadioOption
-          label={args.radioLabel}
-          value={args.radioValue}
-          isDisabled={args.radioDisabled}
-        />
-        <RadioOption value="200" label="دیپلم" />
-        <RadioOption value="300" label="کارشناسی" />
-        <RadioOption value="400" label="کارشناسی ارشد" />
-        <RadioOption value="500" label="دکترا" />
-      </Radio>
-
-      <TextInput
-        htmlElementName="text-input"
-        required={false}
-        label={args.textInputLabel}
-        number={23}
-        register={register}
-        control={control}
-        placeholder={args.textInputPlaceholder}
-        disabled={args.textInputDisabled}
-        errorMessage={args.textInputErrorMessage}
-        type={args.textInputType}
-        rtl
-      />
-
-      <TextInput
-        htmlElementName="text-input"
-        type="password"
-        required={false}
-        label={args.textInputLabel}
-        number={23}
-        register={register}
-        control={control}
-        placeholder={args.textInputPlaceholder}
-        disabled={args.textInputDisabled}
-        errorMessage={args.textInputErrorMessage}
-        rtl
-      />
-
-      <Textarea
-        register={register}
-        control={control}
-        label={args.textareaLabel}
-        htmlElementName={args.textareaHtmlElementName}
-        placeholder={args.textareaPlaceholder}
-        minHeight={args.textareaMinHeight}
-        isDisabled={false}
-        required={false}
-        resize="both"
-        handleChange={action('trigger what you want to do in onChange function')}
-        defaultValue="این یک باکس متنی می‌باشد"
-      />
-
-      <Checkbox
-        groupName="checkbox"
-        required={false}
-        label="در کدام موضوع ها توانایی دارید"
-        register={register}
-        control={control}
-      >
-        <CheckboxOption
-          label={args.checkboxLabel}
-          value={args.checkboxValue}
-          isDisabled={args.checkboxDisabled}
-          isChecked={args.checkboxChecked}
-          register={register}
-        />
-        <CheckboxOption value="200" label="علمی" />
-        <CheckboxOption value="300" label="مذهبی" />
-        <CheckboxOption value="400" label="فرهنگی" />
-        <CheckboxOption value="500" label="هنری" />
-      </Checkbox>
-
-      <Captcha
-        register={register}
-        control={control}
-        label="کد تصویری"
-        htmlElementName="captcha"
-        imageUrl="https://static.evand.net/captcha/0bb5a9832be7b86a2a0a646ae2fd1649.jpg"
-        handleChange={action('trigger what you want to do in onChange function')}
-        fetchData={() => console.log('fetching')}
-        setValue={setValue}
-      />
-
-      <button type="submit">submit</button>
-    </form>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  fileInputLabel: 'این لیبل است',
-  fileInputPlaceholder: 'متن پیشفرض',
-  fileInputDisabled: false,
-  fileInputErrorMessage: 'ارور زیبا',
-  radioLabel: 'زیر دیپلم',
-  radioValue: '100',
-  radioDisabled: false,
-  textInputLabel: 'این لیبل است',
-  textInputPlaceholder: 'متن پیشفرض',
-  textInputDisabled: false,
-  textInputErrorMessage: 'ارور زیبا',
-  textInputType: 'text',
-  textareaLabel: 'توضیجات',
-  textareaHtmlElementName: 'textarea-box',
-  textareaPlaceholder: 'این پلیس هولدر است',
-  textareaMinHeight: '120',
-  checkboxLabel: 'ورزشی',
-  checkboxValue: '100',
-  checkboxDisabled: false,
-  checkboxChecked: false,
-};

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

@@ -1,25 +0,0 @@
-import TextInput from './text-input';
-import FileInput from './file-input';
-import Dropdown from './dropdown';
-import RadioInputGroup from './radio';
-import Textarea from './textarea';
-import CheckboxInputGroup from './checkbox';
-import Captcha from './captcha';
-
-export { default as TextInput } from './text-input';
-export { default as FileInput } from './file-input';
-export { default as Dropdown } from './dropdown';
-export { default as RadioInputGroup } from './radio';
-export { default as Textarea } from './textarea';
-export { default as CheckboxInputGroup } from './checkbox';
-export { default as Captcha } from './captcha';
-
-export default {
-  TextInput,
-  Dropdown,
-  RadioInputGroup,
-  Textarea,
-  CheckboxInputGroup,
-  Captcha,
-  FileInput
-};

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

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const Fieldset = styled.fieldset`
-  position: relative;
-  border: none;
-  padding: 0;
-  margin-bottom: 20px;
-  * {
-    box-sizing: content-box;
-  }
-`;

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Text } from '../../typography';
-import { toPersianNumber } from '../../utils/numbers';
-import StyledLabel from './index.style';
-
-type IProps = {
-    htmlFor?: String,
-    label?: string,
-    number?: number,
-    required?: Boolean,
-}
-
-function Label({
-  label = null, number = null, required = false, htmlFor = null,
-}: IProps) {
-  return (
-    <>
-      {label && (
-      <StyledLabel htmlFor={htmlFor}>
-        <Text bold size={14}>
-          {!!number && `${toPersianNumber(number)}- `}
-          {label}
-          {!!required && <span className="required">*</span>}
-        </Text>
-      </StyledLabel>
-      )}
-    </>
-  );
-}
-
-export default Label;

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

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-const Label = styled.label`
-    position: relative;
-    display: block;
-    margin-bottom: 5px;
-    & span.required {
-        color: ${({ theme }) => theme.colors.red};
-        margin-right: 5px;
-    }
-`;
-export default Label;

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

@@ -1,10 +0,0 @@
-import Radio from './radio';
-import RadioOption from './radio-option';
-
-export { default as Radio } from './radio';
-export { default as RadioOption } from './radio-option';
-
-export default {
-  Radio,
-  RadioOption,
-};

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

@@ -1,117 +0,0 @@
-import React from 'react';
-
-import { action } from '@storybook/addon-actions';
-import { useForm } from 'react-hook-form';
-import Radio from './radio';
-import RadioOption from './radio-option';
-
-export default {
-  title: 'Form-V7/Radio',
-  component: Radio,
-  
-  argTypes: {
-    groupName: {
-      control: 'text',
-      defaultValue: 'degree',
-    },
-    label: {
-      control: 'text',
-      defaultValue: 'آخرین مدرک تحصیلی خود را انتخاب کنید',
-    },
-    defaultCheckedValue: {
-      control: 'text',
-      defaultValue: '300',
-    },
-    isDisabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    type: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      defaultValue: 'horizontal',
-    },
-    errorMessage: {
-      control: 'text',
-      defaultValue: 'ارور زیبا',
-    },
-    required: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-    number: {
-      control: 'number',
-      defaultValue: 1,
-    },
-  },
-};
-
-const Template = (args) => {
-  const { register, control } = useForm();
-  return (
-    <Radio {...args} register={register} control={control}>
-      <RadioOption value="100" label="زیر دیپلم" />
-      <RadioOption value="234" label="دیپلم" />
-      <RadioOption value="300" label="کارشناسی" />
-      <RadioOption value="400" label="کارشناسی ارشد" />
-      <RadioOption value="500" label="دکترا" />
-    </Radio>
-  );
-};
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  groupName: 'radio0',
-  label: 'انتخاب رادیو',
-  required: true,
-};
-
-export const FullOptions = Template.bind({});
-FullOptions.args = {
-  groupName: 'degree',
-  label: 'آخرین مدرک تحصیلی خود را انتخاب کنید',
-  defaultCheckedValue: '300',
-  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 RadioOptionTemplate = (args) => {
-  const { register } = useForm();
-  return (
-    <Radio groupName="degree" label="آخرین مدرک تحصیلی خود را انتخاب کنید" number={1} register={register}>
-      <RadioOption {...args} />
-      <RadioOption value="200" label="دیپلم" />
-      <RadioOption value="300" label="کارشناسی" />
-      <RadioOption value="400" label="کارشناسی ارشد" />
-      <RadioOption value="500" label="دکترا" />
-    </Radio>
-  );
-};
-
-export const CustomOption = RadioOptionTemplate.bind({});
-CustomOption.args = {
-  label: 'زیر دیپلم',
-  value: '100',
-  isDisabled: false,
-};

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

@@ -1,61 +0,0 @@
-import styled from 'styled-components';
-
-export const Fieldset = styled.fieldset`
-  border: none;
-  padding: 0;
-  margin-bottom: 15px;
-  * {
-    box-sizing: content-box;
-  }
-`;
-
-export const RadioWrapper = 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;
-
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  margin-right: 5px;
-  position: relative;
-  top: 4px;
-  
-  border: 1px solid ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.normal)};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  transition: background 0.2s linear;
-
-  &:hover {
-    border: 1px solid ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.hover)};
-  }
-
-  &:checked {
-    border: 1px solid ${({ theme }) => (theme.borderColor.normal)};
-    width: 16px;
-    height: 16px;
-    background: ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.focus)};
-
-    &:after {
-      background: ${({ disabled, theme }) => (disabled ? theme.disabled.color : theme.borderColor.focus)};
-    }
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    background: ${({ disabled }) => (disabled ? 'white' : 'transparent')};
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    border-radius: 100%;
-    z-index: -1;
-    top: -6px;
-    right: -6px;
-  }
-`;

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

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

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

@@ -1,75 +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 { RadioWrapper } from './index.style';
-import { Fieldset } from '../index.style';
-import Label from '../label';
-import theme from '../theme';
-import { Text } from '../../typography';
-
-type Props = {
-  children: * => Node,
-  groupName?: string,
-  label?: string,
-  handleChange?: () => void,
-  defaultCheckedValue?: string,
-  isDisabled?: boolean,
-  type?: 'horizontal' | 'vertical',
-  required?: boolean,
-  register: UseFormRegister<FieldValues>;
-  number?: number,
-  control: FormData;
-};
-
-const Radio = ({
-  groupName = 'radio-element',
-  label = '',
-  handleChange = () => { },
-  defaultCheckedValue = '',
-  isDisabled = false,
-  type = 'horizontal',
-  required = false,
-  number = null,
-  control,
-  register,
-  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 }) => (
-            <>
-              <RadioWrapper type={type}>
-                {radioElements.map(
-                  (radioElement) => (
-                    isDisabled ? (
-                      React.cloneElement(radioElement, {
-                        groupName, defaultCheckedValue, isDisabled, register,
-                      })
-                    ) : (
-                      React.cloneElement(radioElement, { groupName, defaultCheckedValue, register })
-                    )
-                  ),
-                )}
-              </RadioWrapper>
-              <ErrorMsg errorMessage={fieldState && fieldState.error?.message} />
-            </>
-          )}
-        />
-      </Fieldset>
-    </ThemeProvider>
-  );
-};
-
-export default Radio;