forstok-ui-lib 5.0.2 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -41,6 +41,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
+    "react-select": "^5.10.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",

package/src/assets/javascripts/function.ts

@@ -0,0 +1,28 @@
+import { TMessageQuestion } from '../../components/message/typed';
+
+export const formatNumber = (n?: string | number, flag?: boolean) => {
+  const _flag = flag === undefined ? true : flag
+  let result:string = ''
+  if (n !== '' && n !== null && n !== undefined) {
+    result = n?.toString().replaceAll(".", "")
+    if (result.length === 2 && result.substring(0, 1) === "0") {
+      result = parseInt(result).toString()
+    }
+    if (_flag) {
+      result = result.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+    }
+  }
+  return result
+}
+
+export const generateMessageQuestion = (type: string, title: string, subtitle: string, callback?: () => void, buttonSubmit?: string, cancelCallback?: () => void) => {
+  let result: TMessageQuestion = {
+    $type: type,
+    title: title,
+    subtitle: subtitle,
+    callback: callback,
+    buttonSubmit: buttonSubmit,
+    cancelCallback: cancelCallback
+  } 
+  return result
+}

package/src/components/image/index.tsx

@@ -0,0 +1,17 @@
+import type { ImgHTMLAttributes, ReactEventHandler } from 'react';
+import ImagePlaceholder from '../../assets/images/image-placeholder.jpg';
+import { ImageContainer } from './styles';
+
+type TImage = ImgHTMLAttributes<HTMLImageElement> & {
+  $mode?: string
+} 
+
+const ImageComponent = ({ $mode, ...props }: TImage) => {
+  const { width, height } = props;
+  const evError: ReactEventHandler<HTMLImageElement> = e => {
+    (e.target as HTMLImageElement).src = ImagePlaceholder;
+  }
+  return <ImageContainer $mode={$mode} width={width} height={height} onError={evError} {...props} />;
+}
+
+export default ImageComponent;

package/src/components/image/styles.ts

@@ -0,0 +1,39 @@
+import styled, { css } from 'styled-components'
+
+const storeStyles = css `
+  width: 32px;
+  height: 32px;
+`
+const productStyles = css`
+  background-color: var(--mt-clr-bg);
+`
+
+const getImageModifiedStyled = ({ $mode, width, height }: { $mode?: string, width?: string|number, height?: string|number }) => {
+  let style = ''
+  if ($mode === 'store') {
+    style += storeStyles
+  } else if ($mode === 'product') {
+    style += productStyles
+  }
+  if (width && height) {
+    style += `
+      width:${width}; 
+      height:${height};
+    `
+  } else if (width) {
+    style += `
+      width:${width}; 
+      height:${width};
+    `
+  } else if (height) {
+    style += `
+      width:${width}; 
+      height:${height};
+    `
+  }
+  return style
+}
+
+export const ImageContainer = styled.img<{ $mode?: string, width?: string|number, height?: string|number }>`
+  ${getImageModifiedStyled}
+`

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { default as MessageComponent } from './message';
 export { default as MessageQuestionComponent } from './message/question'; 
 export { default as PopupComponent } from './popup';
 export { default as ReactPortalComponent } from './portal';
+export { default as ImageComponent } from './image';
 
 export * from './dropdown/typed';
 export * from './message/typed';

package/src/components/input/index.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect, type InputHTMLAttributes, type ChangeEvent, type FocusEvent, type KeyboardEvent, type ClipboardEvent } from 'react';
-import { InputContainer } from './styles';
+import { formatNumber } from '../../assets/javascripts/function';
+import { InputContainer, InputLabel, InputWrapper  } from './styles';
 import type { TEnterEvent, TKeyboadEvent, TState } from '../../typeds/base.typed';
 
 type TInput = InputHTMLAttributes<HTMLInputElement> & {
-  mode?: string
+  $mode?: string
   $isError?: boolean
   $iconLeft?: boolean
   $iconRight?: boolean
@@ -17,17 +18,20 @@ type TInput = InputHTMLAttributes<HTMLInputElement> & {
   evChangeCustom? : (key: string, value: any) => void
   evEnter?: TEnterEvent
   evKeyUp?: TKeyboadEvent
-};
+  $aliasLabel?: string
+} 
 
-const InputComponent = ({ mode, $isError, $iconLeft, $iconRight, reset, setReset, isForceUpdate, setForceUpdate, evChange, evBlur, isField, evChangeCustom, evEnter, evKeyUp, ...props }: TInput) => {
+const InputComponent = ({ $mode, $aliasLabel, $isError, $iconLeft,  $iconRight, reset, setReset, isForceUpdate, setForceUpdate, evChange, evBlur, isField, evChangeCustom, evEnter, evKeyUp, ...props }: TInput) => {
   const { type, name, defaultValue, defaultChecked } = props;
-  const _value = defaultValue?.toString() ?? '';
+
+  const _value = ($mode === 'currency' ? formatNumber(defaultValue?.toString() ?? '') : (defaultValue?.toString()) ?? '');
+
   const [inputValue, evInputValue] = useState<string>(_value);
   const [inputChecked, evInputChecked] = useState<boolean>(defaultChecked||false);
 
   useEffect(() => {
     if (isForceUpdate) {
-      const _value = defaultValue?.toString() ?? '';
+      const _value = ($mode === 'currency' ? formatNumber(defaultValue?.toString() ?? '') : (defaultValue?.toString()) ?? '');
       evInputValue(_value);
       evInputChecked(defaultChecked||false);
       setForceUpdate && setForceUpdate(false);
@@ -37,62 +41,72 @@ const InputComponent = ({ mode, $isError, $iconLeft, $iconRight, reset, setReset
       evInputChecked(false);
       setReset && setReset(false);
     }
-  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultValue, defaultChecked, evInputChecked, mode]);
+  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultValue, defaultChecked, evInputChecked, $mode])
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const _value = e.target.value;
     evInputValue(_value);
-  };
+  }
 
   const _evKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+    if ($mode === 'currency') {
+      e.currentTarget.value = formatNumber(e.currentTarget.value);
+    }
     if (e.key === 'Enter') {
       e.preventDefault();
-      (isField && evEnter) && evEnter(e);
+      (isField && evEnter) && evEnter(e)
     }
-  };
+  }
 
   const _evKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (type === 'number') {
-      if(!(!(isNaN(Number(e.key)) || typeof e.key  === 'undefined' || e.key === ''))) {
+    const _target = e.target as HTMLInputElement;
+    if (type === 'number' || $mode === 'currency') {
+      if(!(!(isNaN(Number(e.key)) || typeof e.key  === 'undefined' || e.key === ''))) e.preventDefault();
+    }
+    if ($mode === 'currency') {
+      if ((_target.value.length === 1 && e.key === '0' && _target.value === "0") || e.key === ' ') {
         e.preventDefault();
+      } else {
+        return true;
       }
+    } else {
+      return true;
     }
-    return true;
-  };
+  }
   
   const _evBlur = (e: FocusEvent<HTMLInputElement>) => {
     evBlur && evBlur(e);
     (isField && evEnter) && evEnter(e);
     if (isField && name) {
-      const value = type === 'number' ? parseInt(e.target.value) : e.target.value.trim();
+      const value = (type === 'number') ? parseInt(e.target.value) : ($mode === 'currency' ? e.target.value ? parseInt(formatNumber(e.target.value, false)) : null : e.target.value.trim())
       evChangeCustom && evChangeCustom(name, value);
     }
-  };
+  }
 
   let parseProps = {...props};
   delete parseProps.defaultValue;
   delete parseProps.defaultChecked;
 
   const inputEl = <InputContainer 
-                    mode={mode}
+                    $mode={$mode}
                     $isError={$isError}
                     $iconLeft={$iconLeft} 
                     $iconRight={$iconRight}
                     checked={inputChecked} 
                     value={inputValue}
                     onChange={(e: ChangeEvent<HTMLInputElement>) => { 
-                      handleChange(e);
-                      evChange && evChange(e);
+                      handleChange(e)
+                      evChange && evChange(e)
                     }} 
                     onBlur={(e: FocusEvent<HTMLInputElement>) => { 
-                      handleChange(e);
-                      _evBlur(e);
+                      handleChange(e)
+                      _evBlur(e)
                     }} 
                     onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => { 
-                      evKeyUp && evKeyUp(e);
-                      _evKeyUp(e);
+                      evKeyUp && evKeyUp(e)
+                      _evKeyUp(e)
                     }}
-                    {...(type ==='number' && { onKeyPress: _evKeyPress } )}
+                    {...((type ==='number' || $mode === 'currency') && { onKeyPress: _evKeyPress } )}
                     {...(type ==='number' && { onPaste: (e: ClipboardEvent<HTMLInputElement>) => {
                       const pasteVal = (e.clipboardData || (window as any).clipboardData).getData('text')
                       const _value = pasteVal.replace(/[^0-9]/g, '')
@@ -101,9 +115,16 @@ const InputComponent = ({ mode, $isError, $iconLeft, $iconRight, reset, setReset
                     } })} 
                     {...(type ==='number' && { onFocus: (e: FocusEvent<HTMLInputElement>) => e.target.addEventListener("wheel", function (e) { e.preventDefault() }, { passive: false })} )} 
                     {...(type ==='number' && { min: "0" })}
+                    {...($aliasLabel && { $aliasLabel: $aliasLabel }) }
                     {...parseProps} />
 
-  return inputEl;
+  return (
+    $mode === 'currency' ? (
+      <InputWrapper>
+        {inputEl}
+        <InputLabel>{ $aliasLabel || '' }Rp</InputLabel>
+      </InputWrapper> ) : inputEl
+  )
 }
 
 export default InputComponent

package/src/components/input/ref.tsx

@@ -0,0 +1,59 @@
+import { type KeyboardEvent, type FocusEvent, type InputHTMLAttributes, type ClipboardEvent, forwardRef, useEffect } from 'react';
+import { formatNumber } from '../../assets/javascripts/function';
+import { InputContainer, InputLabel, InputWrapper } from './styles';
+
+const InputWithRefComponent = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement> & { $mode?: string, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean }>(({ $mode, $isError, $iconLeft, $iconRight, ...props }, ref) => {
+  const { type } = props;
+
+  const _evKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+    if ($mode === 'currency') {
+      e.currentTarget.value = formatNumber(e.currentTarget.value);
+    }
+  }
+
+  const _evKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+    const _target = e.target as HTMLInputElement;
+    if (type === 'number' || $mode === 'currency') {
+      if(!(!(isNaN(Number(e.key)) || typeof e.key  === 'undefined' || e.key === ''))) e.preventDefault();
+    }
+    if ($mode === 'currency') {
+      if ((_target.value.length === 1 && e.key === '0' && _target.value === "0") || e.key === ' ') {
+        e.preventDefault();
+      } else {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  }
+
+  const inputEl = <InputContainer 
+                    ref={ref}
+                    $mode={$mode}
+                    $isError={$isError}
+                    $iconLeft={$iconLeft} 
+                    $iconRight={$iconRight}
+                    onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => { 
+                      _evKeyUp(e)
+                    }}
+                    {...((type ==='number' || $mode === 'currency') && { onKeyPress: _evKeyPress } )}
+                    {...(type ==='number' && { onPaste: (e: ClipboardEvent<HTMLInputElement>) => {
+                      const pasteVal = (e.clipboardData || (window as any).clipboardData).getData('text')
+                      const _value = pasteVal.replace(/[^0-9]/g, '')
+                      e.preventDefault()
+                      document.execCommand('insertText', false, _value)
+                    } })} 
+                    {...(type ==='number' && { onFocus: (e: FocusEvent<HTMLInputElement>) => e.target.addEventListener("wheel", function (e) { e.preventDefault() }, { passive: false })} )} 
+                    {...type ==='number' && { min: "0" }} 
+                    {...props} />
+
+  return (
+    $mode === 'currency' ? (
+      <InputWrapper>
+        {inputEl}
+        <InputLabel>Rp</InputLabel>
+      </InputWrapper> ) : inputEl
+  )
+})
+
+export default InputWithRefComponent

package/src/components/input/styles.ts

@@ -7,7 +7,8 @@ const SubmitStyles = css`
   color: var(--sec-clr);
   background-color: var(--act-clr-bg);
 `
-const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError, mode, type }:{ width?: string | number, height?: string | number, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean, mode?: string, type?: string }) => {
+
+const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError, $mode, type, $aliasLabel }:{ width?: string | number, height?: string | number, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean, $mode?: string, type?: string, $aliasLabel?:string }) => {
   let style = ""
   if ($iconLeft) {
     style += ` 
@@ -30,7 +31,7 @@ const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError
       max-height: ${height}px
     `
   }
-  if (mode === 'search') {
+  if ($mode === 'search') {
     style += ` 
       background-color: transparent;
       &, &:not([type="submit"]):focus, &:active, &:active:focus {
@@ -45,11 +46,16 @@ const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError
       `
     }      
   }
-  if (mode === 'transaction') {
+  if ($mode === 'transaction') {
     style += `
       padding-left: 45px;
     ` 
   }
+  if ($mode === 'currency') {
+    style += `
+      padding-left: ${$aliasLabel ? '38px' : '30px'} !important;
+    ` 
+  }
   if (width) {
     style += ` 
       width: ${width}px 
@@ -61,10 +67,26 @@ const getInputModifiedStyled = ({ width, height, $iconLeft, $iconRight, $isError
   return style;
 }
 
-export const InputContainer = styled.input<{ width?: string | number, height?: string | number, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean, mode?: string, type?: string }>`
+export const InputContainer = styled.input<{ width?: string | number, height?: string | number, $iconLeft?: boolean, $iconRight?: boolean, $isError?: boolean, $mode?: string, type?: string }>`
   &._refQuantitiyInput {
     width: 55px;
     text-align: center;
   }
   ${getInputModifiedStyled}
+`
+export const InputWrapper = styled.div`
+  position: relative;
+  & ._refLoadingInput {
+    position: absolute;
+    top: 50%;
+    margin-top: -5px;
+    right: 10px; 
+  }
+`
+export const InputLabel = styled.label`
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--mt-clr);
 `