Merge pull request #42 from MacPaw/fix/typescript-errors-for-input-co…

…mponent

fix: typescript errors for input component

.github/workflows/main.yml

@@ -1,21 +1,72 @@
 name: CI
+
 on:
   push:
     branches: [master]
   pull_request:
     branches: [master]
 
 jobs:
-  build:
+  install:
+    name: Install
     runs-on: ubuntu-latest
+    continue-on-error: false
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - name: Checkout    
+        uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v1
         with:
           node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
-      - run: |
-          npm i
-          npm run lint
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm i
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Pack artifact
+        run: tar czf /tmp/artifact.tar.gz .
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: ui-kit-artifact
+          path: /tmp/artifact.tar.gz
+          retention-days: 1
+
+  eslint:
+    name: Eslint
+    runs-on: ubuntu-latest
+    needs: [install]
+    continue-on-error: false
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: ui-kit-artifact
+
+      - name: Unpack artifact
+        run: tar xf artifact.tar.gz
+
+      - name: Run eslint
+        run: npm run lint
+
+  typescript:
+    name: Typescript
+    runs-on: ubuntu-latest
+    needs: [install]
+    continue-on-error: false
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: ui-kit-artifact
+
+      - name: Unpack artifact
+        run: tar xf artifact.tar.gz
+
+      - name: Run typescript compile
+        run: yarn tsc --noEmit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "3.7.8",
+  "version": "3.7.9",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",

pages/input.mdx

@@ -152,7 +152,7 @@ export const InputWithInitialFormat = () => {
                 name="number"
                 placeholder="0.00"
                 format={(value) => Number(value).toFixed(2)}
-                onChange={(e) => setValue(e.target.value)}
+                onChange={setValue}
             />
         </FormRow>
     </div>
@@ -173,7 +173,7 @@ const [value, setValue] = React.useState(10);
             name="number"
             placeholder="0.00"
             format={(value) => Number(value).toFixed(2)}
-            onChange={(e) => setValue(e.target.value)}
+            onChange={setValue}
         />
     </FormRow>
 </div>
@@ -185,8 +185,6 @@ There are two events that can used for formatting:
 - `blur`
 - `input`
 
-Pay attention, if you want to use formatting depends on events `blur` or `input`, you must pass the **setValue** prop.
-
 #### Blur event 
 
 export const InputWithBlurFormat = () => {
@@ -202,8 +200,7 @@ export const InputWithBlurFormat = () => {
                 placeholder="0.00"
                 formatOnEvent="blur"
                 format={(value) => Number(value).toFixed(2)}
-                onChange={(e) => setValue(e.target.value)}
-                setValue={setValue}
+                onChange={setValue}
             />
         </FormRow>
     </div>
@@ -225,8 +222,7 @@ const [value, setValue] = React.useState(10);
             placeholder="0.00"
             formatOnEvent="blur"
             format={(value) => Number(value).toFixed(2)}
-            onChange={(e) => setValue(e.target.value)}
-            setValue={setValue}
+            onChange={setValue}
         />
     </FormRow>
 </div>
@@ -247,8 +243,7 @@ export const InputWithChangeFormat = () => {
                 placeholder="LARGE TEXT"
                 formatOnEvent="input"
                 format={(value) => String(value).toUpperCase()}
-                onChange={(e) => setValue(e.target.value)}
-                setValue={setValue}
+                onChange={setValue}
             />
         </FormRow>
     </div>
@@ -270,8 +265,7 @@ const [value, setValue] = React.useState(10);
             placeholder="LARGE TEXT"
             formatOnEvent="input"
             format={(value) => String(value).toUpperCase()}
-            onChange={(e) => setValue(e.target.value)}
-            setValue={setValue}
+            onChange={setValue}
         />
     </FormRow>
 </div>

src/Input/Input.tsx

@@ -9,9 +9,11 @@ import React, {
 } from 'react';
 import cx from 'clsx';
 import Hint from '../Hint/Hint';
-import { Error } from '../types';
+import { Error, InputValueType } from '../types';
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+type InputElementType = HTMLInputElement | HTMLTextAreaElement;
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   scale?: 'medium' | 'small' | 'big';
   error?: Error;
   action?: ReactNode;
@@ -20,11 +22,10 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   rows?: number;
   currency?: string;
   formatOnEvent?: 'blur' | 'input';
-  format?: (value: string | number | readonly string[]) => string | number | readonly string[];
-  setValue?: (value: string | number | readonly string[]) => void;
+  format?: (value: InputValueType) => InputValueType;
+  onChange?: (value:InputValueType, event?: React.ChangeEvent<InputElementType>) => void;
 }
 
-type InputElementType = HTMLInputElement | HTMLTextAreaElement;
 
 const Input = forwardRef<InputElementType, InputProps>((props, ref) => {
   const {
@@ -37,16 +38,15 @@ const Input = forwardRef<InputElementType, InputProps>((props, ref) => {
     label,
     currency,
     className,
-    value,
+    value = '',
     onChange,
     formatOnEvent = '',
     format,
-    setValue,
     ...other
   } = props;
 
   const isDirtyRef = useRef(false);
-  const inputRef = useRef<InputElementType>(null);
+  const inputRef = useRef<InputElementType>();
 
   const classNames = cx('input', {
     '-error': Boolean(error),
@@ -83,26 +83,27 @@ const Input = forwardRef<InputElementType, InputProps>((props, ref) => {
     inputRef.current = element;
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (!isDirtyRef.current) isDirtyRef.current = true;
 
-    onChange(e);
+    const inputValue = (event.target as InputElementType).value;
+    onChange?.(inputValue, event);
   };
 
   useEffect(() => {
-    if (!formatOnEvent) return () => {};
-
     const { current: input } = inputRef;
 
+    if (!formatOnEvent || !input) return () => {};
+
     const handleFormatOnEvent = (event: InputEvent | FocusEvent) => {
       const inputValue = (event.target as InputElementType).value;
-      setValue?.(format?.(inputValue) ?? inputValue);
+      onChange?.(format?.(inputValue) ?? inputValue);
     };
 
-    input.addEventListener(formatOnEvent, handleFormatOnEvent);
+    input.addEventListener(formatOnEvent, handleFormatOnEvent as EventListener);
 
     return () => {
-      input.removeEventListener(formatOnEvent, handleFormatOnEvent);
+      input.removeEventListener(formatOnEvent, handleFormatOnEvent as EventListener);
     };
   }, []);
 

src/Password/Password.tsx

@@ -1,15 +1,16 @@
 import React, { FC, InputHTMLAttributes, ReactNode, useState } from 'react';
 import Input from '../Input/Input';
 import Button from '../Button/Button';
-import { Error } from '../types';
+import { Error, InputValueType } from '../types';
 
-export interface PasswordProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface PasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   scale?: 'medium' | 'small';
   label?: string | ReactNode;
   error?: Error;
   withToggle?: boolean;
   i18nToggle?: (isPasswordVisible: boolean) => string;
   onToggle?: () => void;
+  onChange?:(value: InputValueType, event?: React.ChangeEvent) => void;
 }
 
 function i18nToggleDefault(isPasswordVisible: boolean) {

src/types.ts

@@ -1,3 +1,5 @@
 import { ReactNode } from 'react';
 
 export type Error = boolean | string | ReactNode;
+
+export type InputValueType = string | number | readonly string[];

tsconfig.json

@@ -8,7 +8,7 @@
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,