From 4a31721a5621b1c29d318b88af6ea65c7b1a7bc9 Mon Sep 17 00:00:00 2001
From: AssisrMatheus <assisr.matheus@gmail.com>
Date: Tue, 11 Apr 2023 13:53:26 -0400
Subject: [PATCH] feat: adds time picker

---
 CHANGELOG.md                                  |  2 +
 .../DatePickerInput.stories.tsx               | 62 +++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0991b96..d01443a 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/components/DatePickerInput/DatePickerInput.stories.tsx b/src/components/DatePickerInput/DatePickerInput.stories.tsx
index dade0f0..97b57d8 100644
--- a/src/components/DatePickerInput/DatePickerInput.stories.tsx
+++ b/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({});