react-restyle-components 0.1.58 → 0.1.60

package/src/core-components/atoms/form/form.test.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  CheckBox,
+  Input,
+  Toggle,
+  MultilineInput,
+  Label,
+  InputDate,
+  InputFile,
+  InputRadio,
+  InputWrapper,
+} from './form.component';
+
+describe('Checkbox component', () => {
+  it('render checkbox correctly', () => {
+    const checkbox = render(<CheckBox />);
+    expect(checkbox).toMatchSnapshot();
+  });
+});
+
+describe('Input component', () => {
+  it('render input correctly', () => {
+    const inputComp = render(
+      <Input
+        type="text"
+        value="test"
+        onChange={(val) => jest.fn()}
+        onBlur={(value) => jest.fn()}
+        onKeyDown={(val) => jest.fn()}
+      />
+    );
+    const input = inputComp.getByTestId('INPT');
+    fireEvent.change(input, {target: {value: 'check'}});
+    userEvent.type(input, 'value');
+    fireEvent.blur(input);
+    fireEvent.keyDown(input, {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    });
+    fireEvent.keyPress(input, {key: 'Enter', keyCode: 13});
+
+    expect(input).toMatchSnapshot();
+  });
+});
+describe('Toggle component', () => {
+  it('render toggle correctly', () => {
+    const toggle = render(<Toggle />);
+    expect(toggle).toMatchSnapshot();
+  });
+});
+
+// describe('SelectOption component', () => {
+//   it('render selectOption correctly', () => {
+//     const select = render(
+//       <SelectOption key='test' onChange={value => jest.fn()} value='test' />,
+//     );
+//     const selectOption = select.getByTestId('SELECT');
+//     fireEvent.change(selectOption, {target: {value: 'check'}});
+//     userEvent.type(selectOption, 'value');
+//     expect(select).toMatchSnapshot();
+//   });
+// });
+describe('MultilineInput component', () => {
+  it('render multilineInput correctly', () => {
+    const multi = render(<MultilineInput />);
+    expect(multi).toMatchSnapshot();
+  });
+});
+
+// describe('Clock component', () => {
+//   it('render clock correctly', () => {
+//     const clock = render(
+//       <Clock value='2022-02-20' onChange={value => jest.fn()} />,
+//     );
+//     expect(clock).toMatchSnapshot();
+//   });
+// });
+describe('Label component', () => {
+  it('render label correctly', () => {
+    const label = render(<Label htmlFor="vsdvrf" />);
+    expect(label).toMatchSnapshot();
+  });
+});
+
+describe('InputDate component', () => {
+  it('render inputDate correctly', () => {
+    const inputDate = render(<InputDate />);
+    expect(inputDate).toMatchSnapshot();
+  });
+});
+// describe('InputDateTime component', () => {
+//   it('render inputDateTime correctly', () => {
+//     const inputDateTime = render(<InputDateTime />);
+//     expect(inputDateTime).toMatchSnapshot();
+//   });
+// });
+
+describe('InputFile component', () => {
+  it('render inputFile correctly', () => {
+    const inputFile = render(<InputFile />);
+    expect(inputFile).toMatchSnapshot();
+  });
+});
+describe('InputRadio component', () => {
+  it('render inputRadio correctly', () => {
+    const inputRadio = render(<InputRadio />);
+    expect(inputRadio).toMatchSnapshot();
+  });
+});
+
+describe('InputWrapper component', () => {
+  it('render inputWrapper correctly', () => {
+    const inputWrapper = render(<InputWrapper />);
+    expect(inputWrapper).toMatchSnapshot();
+  });
+});

package/src/core-components/atoms/icons/icons.component.tsx

@@ -0,0 +1,65 @@
+import React, {Suspense} from 'react';
+import _ from 'lodash';
+import {Tooltip} from '../..';
+import loadable from '@loadable/component';
+import {IconBaseProps} from 'react-icons/lib';
+
+interface IconProps {
+  nameIcon: string;
+  propsIcon?: IconBaseProps;
+  tooltip?: string;
+  isDisable?: boolean;
+  onClick?: () => void;
+}
+
+let lib = 'md';
+export const Icon = ({
+  nameIcon,
+  propsIcon,
+  tooltip = '',
+  isDisable = false,
+  onClick,
+}: IconProps): JSX.Element => {
+  try {
+    const iconProps = {
+      ...propsIcon,
+      color: isDisable ? '#808080' : propsIcon?.color || '#ffffff',
+    };
+    const lib = nameIcon
+      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+      .split(' ')[0]
+      .toLocaleLowerCase();
+
+    let ElementIcon: any;
+    if (lib == 'md')
+      ElementIcon = loadable(() => import('react-icons/md'), {
+        resolveComponent: (el) =>
+          el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
+      });
+    else
+      ElementIcon = loadable(() => import('react-icons/fa'), {
+        resolveComponent: (el) =>
+          el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
+      });
+
+    return (
+      <div
+        onClick={() => {
+          if (!isDisable) onClick && onClick();
+        }}
+      >
+        {!_.isEmpty(tooltip) ? (
+          <Tooltip tooltipText={tooltip}>
+            <ElementIcon {...iconProps} />
+          </Tooltip>
+        ) : (
+          <Suspense fallback={<div>Loading...</div>}>
+            <ElementIcon {...iconProps} />
+          </Suspense>
+        )}
+      </div>
+    );
+  } catch (error) {
+    return <></>;
+  }
+};

package/src/core-components/atoms/icons/icons.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Icon} from './icons.component';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Design System/Atoms/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { Icon } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const Primary: Story = {
+  args: {
+    nameIcon: 'FaHistory',
+    propsIcon: {
+      color: '#000000',
+      size: 24,
+    },
+  },
+};

package/src/core-components/atoms/icons/icons.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {render} from '@core-utils';
+import {Icon} from './icons.component';
+it('render Icon correctly', () => {
+  const icon = render(
+    <Icon
+      nameIcon="FaHistory"
+      propsIcon={{
+        color: '#000000',
+        size: 24,
+      }}
+    />
+  );
+  expect(icon).toMatchSnapshot();
+});

package/src/core-components/atoms/input/input-otp.component.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable no-console */
+import React, {useEffect, useRef} from 'react';
+import './input-otp.styles.css';
+interface PinInputGridProps {
+  title?: string;
+  hasError?: boolean;
+  className?: string;
+  disable?: boolean;
+  blur?: any;
+  name?: string;
+  pin: Array<number | undefined>;
+
+  onPinChanged: (pinEntry: number | undefined, index: number) => void;
+}
+
+export const InputOtp: React.FC<PinInputGridProps> = ({
+  className,
+  pin,
+  onPinChanged,
+}) => {
+  const pinLength = 6;
+  const Pin_Min_Value = 0;
+  const Pin_Max_Value = 9;
+  const BACKSPACE_Key = 'Backspace';
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    const ref = inputRefs.current[0];
+    if (ref) {
+      ref.focus();
+    }
+  }, []);
+
+  const changePinFocus = (pinIndex: number) => {
+    const ref = inputRefs.current[pinIndex];
+    if (ref) {
+      ref.focus();
+    }
+  };
+
+  const onChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const value = event.target.value;
+    const pinNumber = Number(value.trim());
+
+    if (isNaN(pinNumber) || value.length === 0) {
+      return;
+    }
+
+    if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
+      onPinChanged(pinNumber, index);
+      if (index < pinLength - 1) {
+        changePinFocus(index + 1);
+      }
+    }
+  };
+
+  const onKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    console.log({event, index});
+
+    const keyboardKeyCode = event.nativeEvent.code;
+    if (keyboardKeyCode != BACKSPACE_Key) return;
+
+    if (pin[index] === undefined) {
+      changePinFocus(index - 1);
+    } else {
+      onPinChanged(undefined, index);
+    }
+  };
+
+  return (
+    <div className={`${className} relative`}>
+      <div className="flex space-x-1 bg-background-secondary rounded-lg outline-offset-8">
+        {Array.from({length: pinLength}, (_, index) => (
+          <input
+            data-testid="onPinChanged"
+            className="pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none  font-nunitoSansRegular"
+            onKeyDown={(event) => onKeyDown(event, index)}
+            key={index}
+            onMouseUp={() => {
+              if (pin.join('').length <= 0) {
+                changePinFocus(0);
+              }
+            }}
+            onClick={() => {
+              if (pin.join('').length <= 0) {
+                onPinChanged(undefined, 0);
+              }
+            }}
+            ref={(el) => {
+              if (el) {
+                inputRefs.current[index] = el;
+              }
+            }}
+            onChange={(event) => onChange(event, index)}
+            value={pin[index] || ''}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/core-components/atoms/input/input-otp.styles.css

@@ -0,0 +1,35 @@
+.-z-1 {
+  z-index: -1;
+}
+
+.origin-0 {
+  transform-origin: 0%;
+}
+
+input:focus ~ label,
+input:not(:placeholder-shown) ~ label,
+textarea:focus ~ label,
+textarea:not(:placeholder-shown) ~ label,
+select:focus ~ label,
+select:not([value=""]):valid ~ label {
+  /* @apply transform; scale-75; -translate-y-6; */
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  --tw-scale-x: 0.75;
+  --tw-scale-y: 0.75;
+  --tw-translate-y: -1.5rem;
+}
+
+input:focus ~ label,
+select:focus ~ label {
+  /* @apply text-black; left-0; */
+  --tw-text-opacity: 1;
+  color: "#696969";
+  left: 0px;
+}

package/src/core-components/atoms/input/input-pin.component.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable */
+import React, {useRef, useState} from 'react';
+import './input.styles.css';
+
+interface PinInputGridProps {
+  title: string;
+  hasError?: any;
+  errorMsg?: string;
+  defaultMsg?: string;
+  className?: string;
+  disable?: boolean;
+  name?: string;
+  defaultPin: Array<number | undefined>;
+  onPinChanged: (item: any, index: number) => void;
+}
+
+export const InputPin: React.FC<PinInputGridProps> = ({
+  title,
+  className,
+  defaultPin,
+  errorMsg,
+  defaultMsg,
+  hasError,
+  onPinChanged,
+}) => {
+  const pin = useRef<any>([]);
+  const [reload, setReload] = useState<boolean>(false);
+  const pinLength = 12;
+  const Pin_Min_Value = 0;
+  const Pin_Max_Value = 9;
+  const BACKSPACE_Key = 'Backspace';
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  const removeValuesFromArray = (valuesArray: string[], value: string) => {
+    const valueIndex = valuesArray.findIndex((entry) => entry === value);
+    if (valueIndex === -1) {
+      return;
+    }
+    valuesArray.splice(valueIndex, 1);
+  };
+
+  const changePinFocus = (pinIndex: number) => {
+    const ref = inputRefs.current[pinIndex];
+    if (ref) {
+      ref.focus();
+    }
+  };
+
+  const onChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const previousValue = event.target.defaultValue;
+    const valueArray = event.target.value.split('');
+    const output = removeValuesFromArray(valueArray, previousValue);
+    const value = valueArray.pop();
+
+    if (!value) {
+      return;
+    }
+    const pinNumber = Number(value);
+
+    if (isNaN(pinNumber) || value.length === 0) {
+      return;
+    }
+    pin.current[pin.current?.length] = value;
+    setReload(!reload);
+    if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
+      onPinChanged(pin.current, index);
+      if (index < pinLength - 1) {
+        changePinFocus(index + 1);
+      }
+    }
+  };
+  const onKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const keyboardKeyCode = event.nativeEvent.code;
+    if (keyboardKeyCode != BACKSPACE_Key) return;
+    if (pin.current[index] !== undefined && keyboardKeyCode === BACKSPACE_Key) {
+      changePinFocus(index - 1);
+    }
+    if (pin.current[index] === undefined) {
+      changePinFocus(index - 1);
+    } else {
+      onPinChanged(undefined, index);
+    }
+  };
+
+  return (
+    <div className={`${className} relative`}>
+      <label className="duration-300  -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md">
+        {title}
+      </label>
+      <div className="flex  space-x-1">
+        {Array.from({length: pinLength}, (_, index) => (
+          <div className="flex space-x-1 max-w-full items-stretch" key={index}>
+            <input
+              data-testid="inputElementPin"
+              type="tel"
+              className="pb-2 block  w-4  px-0 mt-0 bg-transparent text-center border-0 border-b z-20 appearance-none rounded-none focus:outline-none  focus:ring-0 focus:border-gray-secondary border-gray-secondary font-nunitoSansRegular "
+              onKeyUp={(event) => onKeyDown(event, index)}
+              key={index}
+              onMouseUp={() => {
+                if (pin.current.join('').length <= 0) {
+                  changePinFocus(0);
+                }
+              }}
+              onClick={() => {
+                if (pin.current.join('').length <= 0) {
+                  onPinChanged(undefined, 0);
+                }
+              }}
+              ref={(el) => {
+                if (el) {
+                  inputRefs.current[index] = el;
+                }
+              }}
+              onChange={(event) => onChange(event, index)}
+              value={pin.current[index]?.toString() || ''}
+            />
+            <div className="invisible">
+              {(index + 1) % 4 === 0 ? 'ss' : null}
+            </div>
+          </div>
+        ))}
+      </div>
+      {hasError && hasError?.type !== 'required' && (
+        <span
+          className="text-sm text-red text-4xs font-nunitoSansRegular"
+          id="error"
+        >
+          {`${errorMsg || ''}`}
+        </span>
+      )}
+      {(!hasError || hasError?.type === 'required') && (
+        <span className="text-sm text-4xs font-nunitoSansRegular" id="error">
+          {`${defaultMsg || ''}`}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/core-components/atoms/input/input-pin.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {InputPin} from './input-pin.component';
+
+const meta: Meta<typeof InputPin> = {
+  title: 'Design System/Atoms/InputPin',
+  component: InputPin,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { InputPin } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof InputPin>;
+
+export const Primary: Story = {
+  args: {
+    title: 'Enter your Aadhaar Number',
+    hasError: true,
+    defaultPin: [],
+    onPinChanged: (item) => {
+      console.log({item});
+    },
+  },
+};

package/src/core-components/atoms/input/input-pin.test.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {InputPin} from './input-pin.component';
+
+it('render InputOtp correctly without error', () => {
+  const pinInput = render(
+    <InputPin
+      title="Enter your Aadhaar Number"
+      hasError={false}
+      errorMsg="Uh oh! You’ve entered an invalid aadhaar number"
+      onPinChanged={() => jest.fn()}
+      defaultPin={[]}
+    />
+  );
+  expect(pinInput).toMatchSnapshot();
+});
+
+it('render InputOtp correctly with error', () => {
+  const pinInput = render(
+    <InputPin
+      title="Enter your Aadhaar Number"
+      hasError={true}
+      errorMsg="Uh oh! You’ve entered an invalid aadhaar number"
+      onPinChanged={() => jest.fn()}
+      defaultPin={[]}
+    />
+  );
+  expect(pinInput).toMatchSnapshot();
+});

package/src/core-components/atoms/input/input.component.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable no-console */
+import React, {useState} from 'react';
+import './input.styles.css';
+
+interface InputProps {
+  title: string;
+  defaultValue: string;
+  hasError?: any;
+  errorMsg?: string;
+  defaultMsg?: string;
+  className?: string;
+  disable?: boolean;
+  inputStyle?: string;
+  autoComplete?: 'off' | 'on';
+  maxlength?: number;
+  onChange: (value: any) => void;
+  onBlur?: (value: any) => void;
+}
+
+export const Input = ({
+  title,
+  defaultValue,
+  className,
+  disable,
+  hasError,
+  errorMsg,
+  defaultMsg,
+  inputStyle,
+  autoComplete,
+  maxlength = 40,
+  onChange,
+  onBlur,
+}: InputProps) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const onKeyUpValue = (event) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <div className={`${className} relative`}>
+      <input
+        data-testid="inputElement"
+        type="text"
+        name="name"
+        value={value}
+        placeholder=" "
+        disabled={disable}
+        className={`pt-3 pb-2 bg-transparent block w-full px-0 mt-0  rounded-none  border-0 border-b appearance-none focus:outline-none focus:ring-0 focus:border-gray-secondary border-gray-secondary font-nunitoSansRegular ${inputStyle}`}
+        onChange={(e) => {
+          setValue(e.target.value);
+          onChange && onChange(e.target.value);
+        }}
+        onKeyUp={onKeyUpValue}
+        onBlur={(e) => onBlur && onBlur(e.target.value)}
+        autoComplete={autoComplete}
+        maxLength={maxlength}
+      />
+      <label className="absolute duration-300 top-3 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md">
+        {title}
+      </label>
+      {hasError && hasError?.type !== 'required' && (
+        <span className="text-sm text-red text-4xs" id="error">
+          {`${errorMsg || ''}`}
+        </span>
+      )}
+      {(!hasError || hasError?.type === 'required') && (
+        <span className="text-sm text-4xs" id="error">
+          {`${defaultMsg || ''}`}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/core-components/atoms/input/input.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Input} from './input.component';
+
+const meta: Meta<typeof Input> = {
+  title: 'Design System/Atoms/Input',
+  component: Input,
+  tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Primary: Story = {
+  args: {
+    className: 'mt-4',
+    title: 'Enter your Pan Number',
+    hasError: true,
+    defaultValue: '',
+    onChange: (item) => {
+      console.log({item});
+    },
+    onBlur: (item) => {
+      console.log({item});
+    },
+  },
+};