react-jupiter 5.12.0 → 6.0.0-beta.2

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

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

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

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

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

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

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

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

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

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

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