Merge pull request #102 from perimetre/feat/add-time-picker

Adds time selector and toggle button

CHANGELOG.md

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"
@@ -88,7 +88,7 @@
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
     "draftjs-utils": "^0.10.2",
-    "framer-motion": "^3.3.0",
+    "framer-motion": "^10.11.6",
     "hammerjs": "^2.0.8",
     "html-react-parser": "^1.2.4",
     "html-to-draftjs": "^1.5.0",

src/components/BaseCard/BaseCard.stories.tsx

@@ -4,7 +4,7 @@ import { Story, Meta } from '@storybook/react/types-6-0';
 import { BaseCard, BaseCardProps } from '.';
 
 export default {
-  title: 'Components/BaseCard',
+  title: 'Components/qadense/BaseCard',
   component: BaseCard,
   argTypes: {
     className: {

src/components/Button/Button.stories.tsx

@@ -8,7 +8,7 @@ import { BellIcon, MenuIcon } from '../Icons';
 import { puiColorClassnameMap, borderStyleClassnameMap } from '../../storybookMappers';
 
 export default {
-  title: 'Components/Button',
+  title: 'Components/Buttons/Default',
   component: Button,
   argTypes: {
     border: {

src/components/ButtonStack/ButtonStack.stories.tsx

@@ -9,7 +9,7 @@ import { puiColorClassnameMap } from '../../storybookMappers';
 import { BellIcon } from '../Icons';
 
 export default {
-  title: 'Components/ButtonStack',
+  title: 'Components/Buttons/Stack',
   component: ButtonStack,
   argTypes: {
     color: {

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({});

src/components/EventCard/EventCard.stories.tsx

@@ -5,7 +5,7 @@ import { EventCard, EventCardProps } from '.';
 import { gradientFromClassNameMap, gradientToClassNameMap, gradientViaClassNameMap } from '../../storybookMappers';
 
 export default {
-  title: 'Components/EventCard',
+  title: 'Components/qadense/EventCard',
   component: EventCard,
   argTypes: {
     className: {

src/components/ExpertCard/ExpertCard.stories.tsx

@@ -5,7 +5,7 @@ import { ExpertCard, ExpertCardProps } from '.';
 import { gradientFromClassNameMap, gradientToClassNameMap, gradientViaClassNameMap } from '../../storybookMappers';
 
 export default {
-  title: 'Components/ExpertCard',
+  title: 'Components/qadense/ExpertCard',
   component: ExpertCard,
   argTypes: {
     className: {

src/components/ExpertImage/ExpertImage.stories.tsx

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { gradientFromClassNameMap, gradientToClassNameMap, gradientViaClassNameMap } from '../../storybookMappers';
 
 export default {
-  title: 'Components/ExpertImage',
+  title: 'Components/qadense/ExpertImage',
   argTypes: {
     gradientInitialColor: {
       defaultValue: 'from-pui-primary',

src/components/ImageLoader/ImageLoader.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { ImageLoader, ImageLoaderProps } from '.';
 
 export default {
-  title: 'Components/ImageLoader',
+  title: 'Components/Loaders/ImageLoader',
   component: ImageLoader,
   argTypes: {
     src: { defaultValue: 'https://cataas.com/cat' },