refactor(Input): remove id property

packages/Input/Input.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
 } from 'react';
 import classNames from 'classnames';
-import { InputComponent, InputProps } from './Input.types';
+import { InputProps } from './Input.types';
 import { useInputCSS } from './Input.styles';
 import { useControlled } from '../utils/hooks';
 import { InputGroupConfig } from './InputGroup.types';
@@ -106,6 +106,4 @@ const Input = forwardRef<HTMLInputElement, PropsWithChildren<InputProps>>(
 
 Input.displayName = 'RawInput';
 
-const RawInput: InputComponent = Object.assign(Input, { id: 'Input' });
-
-export default RawInput;
+export default Input;

packages/Input/Input.types.ts

@@ -1,11 +1,4 @@
-import {
-  InputHTMLAttributes,
-  ChangeEvent,
-  FocusEvent,
-  ForwardRefExoticComponent,
-  RefAttributes,
-  PropsWithChildren,
-} from 'react';
+import { InputHTMLAttributes, ChangeEvent, FocusEvent } from 'react';
 
 export type InputTypes =
   | 'default'
@@ -40,12 +33,6 @@ type NativeInputProps = Omit<
 
 export type InputProps = BaseInputProps & NativeInputProps;
 
-export type InputComponent = ForwardRefExoticComponent<
-  PropsWithChildren<InputProps> & RefAttributes<HTMLInputElement>
-> & {
-  id: string;
-};
-
 export interface InputSizeStyles {
   fontSize?: string;
   height?: string;

packages/Input/InputAddon.tsx

@@ -16,10 +16,6 @@ type NativeInputAddonProps = Omit<
 
 type InputAddonProps = BaseInputAddonProps & NativeInputAddonProps;
 
-export type InputAddonType = FC<InputAddonProps> & {
-  id: string;
-};
-
 const InputAddon: FC<PropsWithChildren<InputAddonProps>> = ({
   className,
   children,
@@ -77,12 +73,4 @@ const InputRightAddon: FC<InputAddonProps> = ({
   return <InputAddon className={classes} {...resetProps} />;
 };
 
-const RawInputLeftAddon: InputAddonType = Object.assign(InputLeftAddon, {
-  id: 'InputLeftAddon',
-});
-
-const RawInputRightAddon: InputAddonType = Object.assign(InputRightAddon, {
-  id: 'InputRightAddon',
-});
-
-export { RawInputLeftAddon, RawInputRightAddon };
+export { InputLeftAddon, InputRightAddon };

packages/Input/InputElement.tsx

@@ -16,10 +16,6 @@ type NativeInputElementProps = Omit<
 
 type InputElementProps = BaseInputElementProps & NativeInputElementProps;
 
-export type InputElementType = FC<Omit<InputElementProps, 'placement'>> & {
-  id: string;
-};
-
 const InputElement: FC<PropsWithChildren<InputElementProps>> = ({
   placement,
   clickable = false,
@@ -72,13 +68,4 @@ const InputRightElement: FC<Omit<InputElementProps, 'placement'>> = ({
   return <InputElement className={classes} placement="right" {...resetProps} />;
 };
 
-const RawInputLeftElement: InputElementType = Object.assign(InputLeftElement, {
-  id: 'InputLeftElement',
-});
-
-const RawInputRightElement: InputElementType = Object.assign(
-  InputRightElement,
-  { id: 'InputRightElement' }
-);
-
-export { RawInputLeftElement, RawInputRightElement };
+export { InputLeftElement, InputRightElement };

packages/Input/InputGroup.tsx

@@ -1,13 +1,12 @@
 import React, { FC, PropsWithChildren, cloneElement, useMemo } from 'react';
 import classNames from 'classnames';
-import {
-  InputGroupChild,
-  InputGroupConfig,
-  InputGroupProps,
-} from './InputGroup.types';
+import { InputGroupConfig, InputGroupProps } from './InputGroup.types';
 import { InputGroupContext } from './input-group-context';
 import { getValidChildren } from '../utils/common';
 import { useInputStyles } from './Input.styles';
+import Input from './Input';
+import { InputLeftElement, InputRightElement } from './InputElement';
+import { InputLeftAddon, InputRightAddon } from './InputAddon';
 
 const useComputedInputStyles = ({ type, size, disabled }: InputGroupProps) => {
   const { height, horizontalPadding } = useInputStyles({
@@ -25,26 +24,26 @@ const useComputedInputStyles = ({ type, size, disabled }: InputGroupProps) => {
   };
   const styles = [
     {
-      id: 'InputLeftElement',
+      type: InputLeftElement,
       newStyle: {
         paddingLeft: height,
       },
     },
     {
-      id: 'InputRightElement',
+      type: InputRightElement,
       newStyle: {
         paddingRight: height,
       },
     },
     {
-      id: 'InputLeftAddon',
+      type: InputLeftAddon,
       newStyle: {
         borderTopLeftRadius: '0px',
         borderBottomLeftRadius: '0px',
       },
     },
     {
-      id: 'InputRightAddon',
+      type: InputRightAddon,
       newStyle: {
         borderTopRightRadius: '0px',
         borderBottomRightRadius: '0px',
@@ -87,9 +86,7 @@ const InputGroup: FC<PropsWithChildren<InputGroupProps>> = ({
     });
     let computedStyle = style;
     getValidChildren(children).forEach((child) => {
-      const result = styles.find(
-        (item) => item.id === (child.type as InputGroupChild).id
-      );
+      const result = styles.find((item) => item.type === child.type);
       if (result) {
         const { newStyle } = result;
         computedStyle = { ...computedStyle, ...newStyle };
@@ -101,7 +98,7 @@ const InputGroup: FC<PropsWithChildren<InputGroupProps>> = ({
   const computedInputStyle = useComputedInputStyle();
 
   const cloneChildren = getValidChildren(children).map((child) => {
-    return (child.type as InputGroupChild).id !== 'Input'
+    return child.type !== Input
       ? child
       : cloneElement(child, { style: computedInputStyle });
   });

packages/Input/InputGroup.types.ts

@@ -1,7 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { InputComponent, InputSizes, InputTypes } from './Input.types';
-import { InputAddonType } from './InputAddon';
-import { InputElementType } from './InputElement';
+import { InputSizes, InputTypes } from './Input.types';
 
 interface BaseInputGroupProps {
   className?: string;
@@ -18,11 +16,6 @@ type NativeInputGroupProps = Omit<
 
 export type InputGroupProps = BaseInputGroupProps & NativeInputGroupProps;
 
-export type InputGroupChild =
-  | InputAddonType
-  | InputElementType
-  | InputComponent;
-
 export interface InputGroupConfig {
   size?: InputSizes;
   type?: InputTypes;

packages/Input/index.ts

@@ -1,20 +1,20 @@
 import Input from './Input';
 import InputGroup from './InputGroup';
-import { RawInputLeftElement, RawInputRightElement } from './InputElement';
-import { RawInputLeftAddon, RawInputRightAddon } from './InputAddon';
+import { InputLeftElement, InputRightElement } from './InputElement';
+import { InputLeftAddon, InputRightAddon } from './InputAddon';
 
 export type InputComponentType = typeof Input & {
   Group: typeof InputGroup;
-  LeftElement: typeof RawInputLeftElement;
-  RightElement: typeof RawInputRightElement;
-  LeftAddon: typeof RawInputLeftAddon;
-  RightAddon: typeof RawInputRightAddon;
+  LeftElement: typeof InputLeftElement;
+  RightElement: typeof InputRightElement;
+  LeftAddon: typeof InputLeftAddon;
+  RightAddon: typeof InputRightAddon;
 };
 
 (Input as InputComponentType).Group = InputGroup;
-(Input as InputComponentType).LeftElement = RawInputLeftElement;
-(Input as InputComponentType).RightElement = RawInputRightElement;
-(Input as InputComponentType).LeftAddon = RawInputLeftAddon;
-(Input as InputComponentType).RightAddon = RawInputRightAddon;
+(Input as InputComponentType).LeftElement = InputLeftElement;
+(Input as InputComponentType).RightElement = InputRightElement;
+(Input as InputComponentType).LeftAddon = InputLeftAddon;
+(Input as InputComponentType).RightAddon = InputRightAddon;
 
 export default Input as InputComponentType;

packages/Pagination/Pagination.tsx

@@ -0,0 +1,16 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { PaginationProps } from './Pagination.types';
+
+const Pagination: FC<PropsWithChildren<PaginationProps>> = ({
+  page,
+  defaultPage,
+  count,
+  limit,
+  onChange,
+  children,
+  ...restProps
+}) => {
+  return <div></div>;
+};
+
+export default Pagination;

packages/Pagination/Pagination.types.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+
+interface BasePaginationProps {
+  page?: number;
+  defaultPage?: number;
+  count?: number;
+  limit?: number;
+  onChange?: (page: number) => void;
+}
+
+type NativePaginationProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  keyof BasePaginationProps
+>;
+
+export type PaginationProps = BasePaginationProps & NativePaginationProps;

packages/Pagination/index.ts

@@ -0,0 +1 @@
+export { default } from './Pagination';