Merge pull request #54 from Enterwell/feature/component-datetimerange…

…picker-and-timeintpu

feat: Added components DateTimeRangePicker and TimeInput

apps/docs/components/ExampleDateTimeRangePicker.tsx

@@ -0,0 +1,16 @@
+import { DateTimeRangePicker } from '@enterwell/react-ui';
+import { useState } from 'react';
+
+export function ExampleDateTimeRangePicker() {
+    const [start, setStart] = useState<Date>(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
+    const [end, setEnd] = useState<Date>(new Date());
+
+    return (
+        // @highlight-start
+        <DateTimeRangePicker
+            start={start}
+            end={end}
+            onChange={(start, end) => { setStart(start); setEnd(end); }} />
+        // @highlight-end
+    )
+}

apps/docs/components/ExampleTimeInput.tsx

@@ -0,0 +1,14 @@
+import { TimeInput } from '@enterwell/react-ui';
+import { useState } from 'react';
+
+export function ExampleTimeInput() {
+    const [value, setValue] = useState('12:00');
+
+    return (
+        // @highlight-start
+        <TimeInput
+            value={value}
+            onTimeChange={(setValue)} />
+        // @highlight-end
+    )
+}

apps/docs/components/theme.ts

@@ -4,7 +4,7 @@ export const theme = createTheme({
     palette: {
         mode: 'dark',
         primary: {
-            main: '#ffffff',
+            main: '#eeeeee',
         },
         secondary: {
             main: '#b5b5b5',

apps/docs/pages/react-ui/components/date-time-range-picker.mdx

@@ -0,0 +1,33 @@
+---
+title: DateTimeRangePicker
+---
+
+import { DateTimeRangePicker } from '@enterwell/react-ui';
+import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
+import { ExampleDateTimeRangePicker } from '../../../components/ExampleDateTimeRangePicker.tsx';
+import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
+
+# DateTimeRangePicker
+
+## Description
+
+<ComponentDescription name="DateTimeRangePicker" />
+
+### Parameters
+
+<ComponentParameters name="DateTimeRangePicker" />
+
+## Example
+
+<ComponentWithSource component={ ExampleDateTimeRangePicker } centered />
+
+## Inspect
+
+<details>
+    <summary>Source code</summary>
+    <ComponentSource 
+        package="@enterwell/react-ui" 
+        directory="DateTimeRangePicker" 
+        name="DateTimeRangePicker"
+    />
+</details>

apps/docs/pages/react-ui/components/time-input.mdx

@@ -0,0 +1,33 @@
+---
+title: TimeInput
+---
+
+import { TimeInput } from '@enterwell/react-ui';
+import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
+import { ExampleTimeInput } from '../../../components/ExampleTimeInput.tsx';
+import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
+
+# TimeInput
+
+## Description
+
+<ComponentDescription name="TimeInput" />
+
+### Parameters
+
+<ComponentParameters name="TimeInput" />
+
+## Example
+
+<ComponentWithSource component={ ExampleTimeInput } centered />
+
+## Inspect
+
+<details>
+    <summary>Source code</summary>
+    <ComponentSource 
+        package="@enterwell/react-ui" 
+        directory="TimeInput" 
+        name="TimeInput"
+    />
+</details>