Timepicker component

package.json

@@ -52,8 +52,11 @@
   "module": "lib.esm.js",
   "types": "index.d.ts",
   "dependencies": {
+    "@date-io/moment": "^1.3.13",
     "@material-ui/core": "^4.10.2",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
+    "moment": "^2.29.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.2.0"

src/core/TimePicker/TimePicker.stories.tsx

@@ -0,0 +1,40 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { ThemedBackground } from '../../utils/storybook';
+import { TimePicker } from './TimePicker';
+
+storiesOf('TimePicker', module)
+  // Litmus Portal
+  .add('Litmus Portal', () => (
+    <ThemedBackground platform="litmus-portal">
+      <TimePicker onChange={() => console.log('Time Changed')} />
+    </ThemedBackground>
+  ))
+
+  // Kubera Chaos
+  .add('Kubera Chaos', () => (
+    <ThemedBackground platform="kubera-chaos">
+      <TimePicker onChange={() => console.log('Time Changed')} />
+    </ThemedBackground>
+  ))
+
+  // Kubera Propel
+  .add('Kubera Propel', () => (
+    <ThemedBackground platform="kubera-propel">
+      <TimePicker onChange={() => console.log('Time Changed')} />
+    </ThemedBackground>
+  ))
+
+  // Kubera Portal
+  .add('Kubera Portal', () => (
+    <ThemedBackground platform="kubera-portal">
+      <TimePicker onChange={() => console.log('Time Changed')} />
+    </ThemedBackground>
+  ))
+
+  // Kubera Core
+  .add('Kubera Core', () => (
+    <ThemedBackground platform="kubera-core">
+      <TimePicker onChange={() => console.log('Time Changed')} />
+    </ThemedBackground>
+  ));

src/core/TimePicker/TimePicker.tsx

@@ -0,0 +1,35 @@
+import 'date-fns';
+import React, { useState } from 'react';
+import MomentUtils from '@date-io/moment';
+import {
+  MuiPickersUtilsProvider,
+  KeyboardTimePicker,
+} from '@material-ui/pickers';
+import { BaseTimePickerProps } from './base';
+
+interface TimePickerProps extends BaseTimePickerProps {
+  value?: string;
+}
+
+const TimePicker: React.FC<TimePickerProps> = ({ value }) => {
+  const date = value ? value : '2020 12:30 PM';
+  const [selectedDate, handleDateChange] = useState<number>(Date.parse(date));
+  return (
+    <MuiPickersUtilsProvider utils={MomentUtils}>
+      <KeyboardTimePicker
+        margin="normal"
+        id="time-picker"
+        autoOk
+        okLabel="Save"
+        label="Time picker"
+        value={selectedDate}
+        data-testid="timepicker"
+        onChange={(newDate: any) => handleDateChange(newDate)}
+        KeyboardButtonProps={{
+          'aria-label': 'change time',
+        }}
+      />
+    </MuiPickersUtilsProvider>
+  );
+};
+export { TimePicker };

src/core/TimePicker/__tests__/TimerPicker.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { KuberaThemeProvider } from '../../../theme';
+import { TimePicker } from '../TimePicker';
+
+describe('Timepicker component', () => {
+  it('Renders', () => {
+    const { getByTestId } = render(
+      <KuberaThemeProvider platform="kubera-chaos">
+        <TimePicker onChange={() => console.log('Time Changed')} />
+      </KuberaThemeProvider>
+    );
+
+    expect(getByTestId('timepicker')).toBeTruthy();
+  });
+});

src/core/TimePicker/base.ts

@@ -0,0 +1,3 @@
+import { KeyboardTimePickerProps } from '@material-ui/pickers';
+
+export type BaseTimePickerProps = Omit<KeyboardTimePickerProps, 'value'>;

src/core/TimePicker/index.ts

@@ -0,0 +1 @@
+export * from './TimePicker';

src/core/index.ts

@@ -1,4 +1,5 @@
 export * from './Button';
+export * from './TimePicker';
 export * from './ProgressBar';
 export * from './Text';
 export * from './Pills';