HOV-3x | DateTimePicker Component

docs/docs/components/dateAndTime.mdx

@@ -0,0 +1,63 @@
+# Date And Time 
+
+## Quick start
+
+Here's a quick start guide to get started with the date and time component
+
+## Importing Component
+
+```jsx
+import { DateTimePicker } from "@hover-design/react";
+```
+
+## Code Snippets and Examples
+
+### DateTimePicker Default
+
+import { DateTimePicker } from "@hover-design/react";
+
+```jsx
+<DateTimePicker type="datetime-local"/>
+```
+
+<DateTimePicker type="datetime-local" value="2019-10-04T13:30"/>
+
+### Date
+
+```jsx
+<DateTimePicker type="date"/>
+```
+
+<DateTimePicker type="date" value="2019-10-04"/>
+
+### Time
+
+```jsx
+<DateTimePicker type="time"/>
+```
+
+<DateTimePicker type="time" value="13:30"/>
+
+### Month
+
+```jsx
+<DateTimePicker type="month"/>
+```
+
+<DateTimePicker type="month" value="2019-10"/>
+
+### Week
+
+```jsx
+<DateTimePicker type="week"/>
+```
+
+<DateTimePicker type="week" value="2019-W40"/>
+
+
+## Props Referece
+
+| Attributes     |                                                                                     Values                                                                                     | Optional ? |
+| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------: |
+| type           |                                                       `datetime-local` &#124; `date` &#124; `time` &#124; `month` &#124; `week`                                                |        No  |
+| value          |                                                                            `string`                                                                                            |        Yes |

docs/docs/components/input.mdx

@@ -2,7 +2,7 @@
 
 ### Quick start
 
-Here's a quick start guide to get started with the button component
+Here's a quick start guide to get started with the input component
 
 ### Importing Component
 

lib/src/components/DateAndTime/DateTimePicker.tsx

@@ -0,0 +1,26 @@
+import React, { ForwardRefRenderFunction } from 'react';
+import {DateTimePickerProps} from './date-time-picker.types';
+import { Input } from '../Input';
+
+const DateTimePickerComponent: ForwardRefRenderFunction<HTMLInputElement, DateTimePickerProps> = ({
+    type = "datetime-local",
+    style,
+    ...props
+}, ref) => {
+    const dandtStyle = {
+        width: '290px',
+        borderRadius: '4px',
+        padding: '8px'
+    }
+    /**
+     * If user passes style object it will merge with current style
+     */
+     Object.assign(dandtStyle, style);
+
+    return (
+        <Input type={type} {...props} ref={ref} style={dandtStyle}/>
+    )
+}
+
+const DateTimePickerWithRef = React.forwardRef(DateTimePickerComponent);
+export { DateTimePickerWithRef as DateTimePicker };

lib/src/components/DateAndTime/date-time-picker.types.ts

@@ -0,0 +1,8 @@
+import React from "react"
+
+export interface DateTimePickerProps extends React.DetailedHTMLProps<
+React.InputHTMLAttributes<HTMLInputElement>,
+HTMLInputElement
+> {
+    type: "date" | "datetime-local" | "month" | "week" | "time";
+}

lib/src/components/DateAndTime/index.ts

@@ -0,0 +1 @@
+export * from "./DateTimePicker";

lib/src/index.ts

@@ -1,28 +1,32 @@
+/**
+ * Make sure below list is in Alphabetical or Dictionary Order (When adding new component 🙏🏼):
+ */
+export * from "./components/Accordion";
+export * from "./components/Alert";
+export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Checkbox";
+export * from "./components/DateAndTime";
+export * from "./components/Dialog";
+export * from "./components/Divider";
 export * from "./components/Flex";
 export * from "./components/Grid";
+export * from "./components/Icon";
+export * from "./components/Input";
+export * from "./components/Label";
 export * from "./components/List";
 export * from "./components/ListItem";
+export * from "./components/Loader";
+export * from "./components/Modal";
+export * from "./components/NativeSelect";
+export * from "./components/Popover";
+export * from "./components/Radio";
 export * from "./components/reset";
+export * from "./components/Select";
 export * from "./components/Switch";
-export * from "./components/Accordion";
-export * from "./components/Input";
-export * from "./components/Label";
-export * from "./components/Divider";
-export * from "./components/Icon";
-export * from "./components/TextArea";
 export * from "./components/Tab";
-export * from "./components/Avatar";
-export * from "./components/Modal";
 export * from "./components/Table";
-export * from "./components/Radio";
-export * from "./components/Dialog";
-export * from "./components/Select";
-export * from "./components/NativeSelect";
-export * from "./components/Popover";
-export * from "./components/Tooltip";
-export * from "./components/Alert";
-export * from "./components/Loader";
+export * from "./components/TextArea";
+export * from "./components/Tooltip";