Timepicker component

package.json

@@ -51,7 +51,12 @@
   "module": "lib.esm.js",
   "types": "index.d.ts",
   "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
+    "@date-io/moment": "^1.3.13",
     "@material-ui/core": "^4.10.2",
+    "@material-ui/pickers": "^3.2.10",
+    "date-fns": "^2.16.1",
+    "moment": "^2.29.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },

src/core/Timepicker/BaseTimePicker.stories.tsx

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

src/core/Timepicker/BaseTimePicker.tsx

@@ -0,0 +1,26 @@
+import 'date-fns';
+import React, { useState } from 'react';
+import MomentUtils from '@date-io/moment';
+import { MuiPickersUtilsProvider, TimePicker } from '@material-ui/pickers';
+import { BaseTimePickerProps } from './base';
+
+interface TimePickerProps extends BaseTimePickerProps {
+  value?: Date;
+}
+
+const BaseTimePicker: React.FC<TimePickerProps> = ({ value }) => {
+  const date = value != undefined ? value : new Date();
+  const [selectedDate, handleDateChange] = useState<Date | null>(date);
+  return (
+    <MuiPickersUtilsProvider utils={MomentUtils}>
+      <TimePicker
+        autoOk
+        okLabel="Save"
+        value={selectedDate}
+        data-testid="timepicker"
+        onChange={(newDate: any) => handleDateChange(newDate)}
+      />
+    </MuiPickersUtilsProvider>
+  );
+};
+export { BaseTimePicker };

src/core/Timepicker/__tests__/BaseTimerPicker.test.tsx

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

src/core/Timepicker/base.ts

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

src/core/Timepicker/index.ts

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

src/core/Timepicker/style.ts

@@ -0,0 +1,5 @@
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({}));
+
+export { useStyles };

src/core/index.ts

@@ -1 +1,2 @@
 export * from './Button';
+export * from './Timepicker';