feat: adds time picker

CHANGELOG.md

@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added examples for time picker on `DatePickerInput`
+
 ### Fixed
 
 ## [9.4.0] 2023-04-11

src/components/DatePickerInput/DatePickerInput.stories.tsx

@@ -1,5 +1,6 @@
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { Meta, Story } from '@storybook/react/types-6-0';
+import { now, getLocalTimeZone } from '@internationalized/date';
 import React from 'react';
 import classnames from 'classnames';
 import { DatePickerInput, DatePickerProps } from '.';
@@ -81,3 +82,64 @@ export const WithError = Template.bind({});
 WithError.args = {
   error: 'Input is required'
 };
+
+export const Time = Template.bind({});
+Time.args = {
+  granularity: 'minute'
+};
+
+export const Time24Hours = Template.bind({});
+Time24Hours.args = {
+  granularity: 'minute',
+  hourCycle: 24
+};
+
+/**
+ * A story that displays a DatePickerInput example
+ *
+ * @param props the story props
+ * @param props.color the color property set on controls
+ * @param props.className The input className
+ */
+const LocalTimezoneTemplate: Story<DatePickerProps & { color?: string }> = ({ color, className, ...props }) => {
+  return (
+    <DatePickerInput
+      {...props}
+      className={classnames(
+        {
+          [puiColorClassnameMap[color || 'transparent']]: color !== 'pui-primary'
+        },
+        className
+      )}
+      granularity="minute"
+      placeholderValue={now(getLocalTimeZone())}
+    />
+  );
+};
+
+export const LocalTimezone = LocalTimezoneTemplate.bind({});
+
+/**
+ * A story that displays a DatePickerInput example
+ *
+ * @param props the story props
+ * @param props.color the color property set on controls
+ * @param props.className The input className
+ */
+const OtherTimezoneTemplate: Story<DatePickerProps & { color?: string }> = ({ color, className, ...props }) => {
+  return (
+    <DatePickerInput
+      {...props}
+      className={classnames(
+        {
+          [puiColorClassnameMap[color || 'transparent']]: color !== 'pui-primary'
+        },
+        className
+      )}
+      granularity="minute"
+      placeholderValue={now('Europe/Paris')}
+    />
+  );
+};
+
+export const OtherTimezone = OtherTimezoneTemplate.bind({});