forstok-ui-lib 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Forstok UI Components Library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/input/input.styles.ts

@@ -0,0 +1,70 @@
+import styled, { css } from 'styled-components'
+
+const SubmitStyles = css`
+  border: 0;
+  cursor: pointer;
+  font-weight: 400;
+  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 }) => {
+  let style = ""
+  if ($iconLeft) {
+    style += ` 
+      padding-left: 35px; 
+    `
+  }
+  if ($iconRight) {
+    style += ` 
+      padding-right: 35px; 
+    `
+  }
+  if ($isError) {
+    style += ` 
+      border:1px solid var(--err-clr-ln) !important; 
+    `
+  }
+  if (height) {
+    style += ` 
+      height: ${height}px
+      max-height: ${height}px
+    `
+  }
+  if (mode === 'search') {
+    style += ` 
+      background-color: transparent;
+      &, &:not([type="submit"]):focus, &:active, &:active:focus {
+        border: 1px solid transparent !important;
+        outline: none  !important;
+        box-shadow: none  !important;
+      }
+    `
+    if ($iconLeft) {
+      style += ` 
+        padding-left: 39px; 
+      `
+    }      
+  }
+  if (mode === 'transaction') {
+    style += `
+      padding-left: 45px;
+    ` 
+  }
+  if (width) {
+    style += ` 
+      width: ${width}px 
+    `
+  }
+  if (type === 'submit') {
+    style += SubmitStyles 
+  }
+  return style;
+}
+
+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}
+`

package/src/components/input/input.tsx

@@ -0,0 +1,109 @@
+import { useState, useEffect, type InputHTMLAttributes, type ChangeEvent, type FocusEvent, type KeyboardEvent, type ClipboardEvent } from 'react';
+import { InputContainer } from './input.styles';
+import type { TEnterEvent, TKeyboadEvent, TState } from '../../typeds/base.typed';
+
+type TInput = InputHTMLAttributes<HTMLInputElement> & {
+  mode?: string
+  $isError?: boolean
+  $iconLeft?: boolean
+  $iconRight?: boolean
+  reset?: boolean 
+  setReset?: TState<boolean>
+  isForceUpdate?: boolean 
+  setForceUpdate?: TState<boolean>
+  evChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  evBlur?: (e: FocusEvent<HTMLInputElement>) => void
+  isField?: boolean
+  evChangeCustom? : (key: string, value: any) => void
+  evEnter?: TEnterEvent
+  evKeyUp?: TKeyboadEvent
+};
+
+const InputComponent = ({ mode, $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 [inputValue, evInputValue] = useState<string>(_value);
+  const [inputChecked, evInputChecked] = useState<boolean>(defaultChecked||false);
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      const _value = defaultValue?.toString() ?? '';
+      evInputValue(_value);
+      evInputChecked(defaultChecked||false);
+      setForceUpdate && setForceUpdate(false);
+    }
+    if (reset) {
+      evInputValue('');
+      evInputChecked(false);
+      setReset && setReset(false);
+    }
+  }, [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 (e.key === 'Enter') {
+      e.preventDefault();
+      (isField && evEnter) && evEnter(e);
+    }
+  };
+
+  const _evKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (type === 'number') {
+      if(!(!(isNaN(Number(e.key)) || typeof e.key  === 'undefined' || e.key === ''))) {
+        e.preventDefault();
+      }
+    }
+    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();
+      evChangeCustom && evChangeCustom(name, value);
+    }
+  };
+
+  let parseProps = {...props};
+  delete parseProps.defaultValue;
+  delete parseProps.defaultChecked;
+
+  const inputEl = <InputContainer 
+                    mode={mode}
+                    $isError={$isError}
+                    $iconLeft={$iconLeft} 
+                    $iconRight={$iconRight}
+                    checked={inputChecked} 
+                    value={inputValue}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => { 
+                      handleChange(e);
+                      evChange && evChange(e);
+                    }} 
+                    onBlur={(e: FocusEvent<HTMLInputElement>) => { 
+                      handleChange(e);
+                      _evBlur(e);
+                    }} 
+                    onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => { 
+                      evKeyUp && evKeyUp(e);
+                      _evKeyUp(e);
+                    }}
+                    {...(type ==='number' && { 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" })}
+                    {...parseProps} />
+
+  return inputEl;
+}
+
+export default InputComponent

package/src/typeds/base.typed.ts

@@ -0,0 +1,50 @@
+import type { MouseEvent, ChangeEvent, DragEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent } from 'react';
+
+type RemoveUnderscoreFirstLetter<S extends string> =
+  S extends `${infer FirstLetter}${infer U}`
+    ? `${FirstLetter extends "_" ? U : `${FirstLetter}${U}`}`
+    : S;
+type CamelToSnakeCase<S extends string> =
+  S extends `${infer T}${infer U}`
+    ? `${T extends Capitalize<T> ? "_" : ""}${RemoveUnderscoreFirstLetter<
+        Lowercase<T>
+      >}${CamelToSnakeCase<U>}`
+    : S;
+    
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type KeysToSnakeCase<T extends object> = {
+  [K in keyof T as CamelToSnakeCase<K & string>]: T[K];
+};
+export type TIdNum = { id: number };
+export type TIdStr = { id: string };
+export type TObject = { [key: string]: any };
+export type TMouseEvent = (e: MouseEvent) => void;
+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 TPage = {
+    totalCount: number
+    totalPageCount: number
+    pageInfo: {
+      endCursor?: string | null
+      hasNextPage: boolean
+      hasPreviousPage: boolean
+      startCursor?: string  | null
+    }
+    pageCursors?: {
+      page: number
+      startCursor: string
+      endCursor: string 
+    }[] | null
+};
+export type TFile = {
+  name: string
+  file: File
+};
+export type TFileImage = TFile & { 
+  src: string 
+  url?: string
+};
+export type TState<T> = Dispatch<SetStateAction<T>>;