DateTime add error render ability

packages/eagle/src/antd.ts

@@ -1,5 +1,5 @@
 import {
-  DatePicker,
+  DatePicker as AntdDatePicker,
   List,
   Menu,
   Modal,
@@ -19,12 +19,14 @@ export {
   Button as AntdButton,
   Checkbox as AntdCheckbox,
   Collapse as AntdCollapse,
+  DatePicker as AntdDatePicker,
   Divider as AntdDivider,
   Drawer as AntdDrawer,
   Empty as AntdEmpty,
   Input as AntdInput,
   message as AntdMessage,
   Select as AntdSelect,
+  Skeleton as AntdSkeleton,
   Steps as AntdSteps,
   Switch as AntdSwitch,
   Table as AntdTable,
@@ -33,22 +35,20 @@ export {
   TreeSelect as AntdTreeSelect,
   AutoComplete,
   Col,
-  DatePicker,
   Dropdown,
   Layout,
   List,
   Menu,
   Popover,
   Row,
-  Skeleton as AntdSkeleton,
   Tabs,
   Timeline,
   Tree,
   Typography,
   Upload,
 } from "antd";
 
-export const DatePickerRangePicker = DatePicker.RangePicker;
+export const DatePickerRangePicker = AntdDatePicker.RangePicker;
 export const ListItem = List.Item;
 export const MenuItemGroup =
   Menu.ItemGroup as React.ComponentType<MenuItemGroupProps>;

packages/eagle/src/core/DatePicker/index.tsx

@@ -0,0 +1,28 @@
+import { InputStyle } from "@src/core/Styled";
+import { Typo } from "@src/core/Typo";
+import { DatePicker as AntdDatePicker } from "antd";
+import { DatePickerProps } from "antd/lib/date-picker";
+import cs from "classnames";
+import React from "react";
+const DatePicker: React.FC<DatePickerProps & { error?: boolean }> = ({
+  className,
+  error,
+  size = "middle",
+  ...props
+}) => {
+  const typo = {
+    large: Typo.Label.l2_regular,
+    middle: Typo.Label.l3_regular,
+    small: Typo.Label.l4_regular,
+  }[size];
+  return (
+    <AntdDatePicker
+      {...props}
+      size={size}
+      data-test={props.name}
+      className={cs(className, InputStyle, typo, error ? "error" : "")}
+    />
+  );
+};
+
+export default DatePicker;