forstok-ui-lib 5.11.11 → 5.11.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.11.11",
+  "version": "5.11.13",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/images/icons/back.svg

@@ -0,0 +1,9 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22.989 16.009" style="enable-background:new 0 0 22.989 16.009; fill: rgb(72,72,72);" xml:space="preserve">
+  <g>
+    <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M21.989,7.004H3.393l5.309-5.309c0.388-0.388,0.388-1.017,0-1.404
+      c-0.388-0.388-1.017-0.388-1.404,0L0.342,7.247C0.321,7.264,0.295,7.271,0.275,7.291C0.047,7.519-0.03,7.829,0.01,8.127
+      c0.005,0.049,0.014,0.091,0.027,0.139C0.073,8.39,0.133,8.505,0.219,8.61c0.026,0.033,0.026,0.077,0.057,0.108
+      c0.019,0.019,0.044,0.025,0.064,0.041l6.958,6.959c0.388,0.388,1.017,0.388,1.404,0c0.388-0.388,0.388-1.017,0-1.404L3.393,9.004
+      h18.595c0.552,0,1-0.448,1-1C22.989,7.452,22.541,7.004,21.989,7.004z"></path>
+  </g>
+</svg>

package/src/components/icon/styles.ts

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import IconPerson from '../../assets/images/icons/person.svg';
 import IconPersonRed from '../../assets/images/icons/person-red.svg';
 import IconCart from '../../assets/images/icons/cart.svg';
+import IconBack from '../../assets/images/icons/back.svg';
 
 const NotificationStyled = css`
   width: 44px;
@@ -267,6 +268,13 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
           content: url(${IconCart}); 
         }`
       break;
+    case 'back': 
+      style += `
+        &:before { 
+          content: url(${IconBack}); 
+        }
+      `
+      break;
     default: 
       break;
   }

package/src/components/input/otp.tsx

@@ -0,0 +1,62 @@
+import { InputOtpContainer } from './styles';
+import { TChangeEvent, TKeyboadEvent, TPasteEvent, TState } from '../../typeds';
+
+const InputOTPComponent = ({ otpLength = 6, value, onChange, ...props }: {otpLength: number, value: string, onChange: TState<string>}) => {
+
+  const handleChange: TChangeEvent = (e) => {
+    const target = e.target as HTMLInputElement;
+    const inputValue = target.value;
+    const inputIndex = target.dataset.index ? parseInt(target.dataset.index) : 0;
+    if (inputValue === '' || /^\d$/.test(inputValue)) {
+      let updatedValue = value.split('');
+      updatedValue[inputIndex] = inputValue;
+      const newOtpValue = updatedValue.join('');
+      onChange(newOtpValue);
+      if (inputValue !== '' && inputIndex < otpLength - 1) {
+        (document.getElementById(`otp-inputbox-${inputIndex + 1}`) as HTMLInputElement)?.focus();
+      };
+    };
+  }
+
+  const handleKeyDown: TKeyboadEvent = (e) => {
+    const target = e.target as HTMLInputElement;
+    const inputIndex = target.dataset.index ? parseInt(target.dataset.index) : 0;
+    if (e.key === 'Backspace' && !value[inputIndex] && inputIndex > 0) {
+      (document.getElementById(`otp-inputbox-${inputIndex - 1}`) as HTMLInputElement)?.focus();
+    }
+  }
+
+  const handlePaste: TPasteEvent<HTMLDivElement> = (e) => {
+    e.preventDefault();
+    const pastedValue = e.clipboardData.getData('Text').replace(/\D/g, '').slice(0, otpLength);
+    onChange(pastedValue);
+  }
+
+  let inputEls = [];
+  for (let i = 0; i < otpLength; i++) {
+    inputEls.push(
+      <InputOtpContainer
+        key={i}
+        data-index={i}
+        id={`otp-inputbox-${i}`}
+        name={`otp-input-${i}`}
+        autoComplete='one-time-code'
+        inputMode='numeric'
+        required
+        value={value[i] || ''}
+        onChange={(e) => handleChange(e)}
+        onKeyDown={(e) => handleKeyDown(e)}
+        onFocus={(e) => {e.target.addEventListener('wheel', function (e) { e.preventDefault() }, { passive: false }); e.target.select()}}
+        {...props}
+      />
+    );
+  };
+
+  return (
+    <div onPaste={handlePaste}>
+      {inputEls}
+    </div>
+  );
+}
+
+export default InputOTPComponent;

package/src/components/input/styles.ts

@@ -89,4 +89,20 @@ export const InputLabel = styled.label`
   top: 50%;
   transform: translateY(-50%);
   color: var(--mt-clr);
+`
+export const InputOtpContainer = styled.input`
+  text-align: center;
+  height: 40px;
+  width: 38px;
+  font-size: 20px;
+  margin-right: 5px;
+  &:last-child {
+    margin-right: 0;
+  }
+  @media only screen and (min-width: 768px) {
+    height: 55px;
+    width: 45px;
+    font-size: 28px;
+    margin-right: 16px;
+  }
 `

package/src/typeds/base.typed.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent, ChangeEvent, DragEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent } from 'react';
+import type { MouseEvent, ChangeEvent, DragEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent, ClipboardEvent } from 'react';
 
 type RemoveUnderscoreFirstLetter<S extends string> =
   S extends `${infer FirstLetter}${infer U}`
@@ -24,6 +24,7 @@ export type TChangeEvent = (e: ChangeEvent) => void;
 export type TDragEvent = (e:DragEvent) => void;
 export type TEnterEvent = (e:KeyboardEvent<HTMLInputElement | HTMLElement> | FocusEvent<HTMLInputElement | HTMLElement | Element> | MouseEvent<HTMLElement>) => void;
 export type TKeyboadEvent = (e: KeyboardEvent<HTMLInputElement>) => void;
+export type TPasteEvent<T> = (e:ClipboardEvent<T>) => void;
 export type TPage = {
     totalCount: number
     totalPageCount: number