feat(time-picker): create package

.changeset/clean-owls-perform.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/time-picker': minor
+'@twilio-paste/core': minor
+---
+
+Created a time picker component package.

.changeset/gentle-ears-sip.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/input': patch
+'@twilio-paste/core': patch
+---
+
+Added type 'time' to Input types for time picker component.

.changeset/ten-donkeys-begin.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/input-box': patch
+'@twilio-paste/core': patch
+---
+
+Added type 'time' to Input-Box types for time picker component, changed InputTypes to name InputBoxTypes.

.codesandbox/ci.json

@@ -58,6 +58,7 @@
     "/packages/paste-core/primitives/text",
     "/packages/paste-core/components/textarea",
     "/packages/paste-theme",
+    "/packages/paste-core/components/time-picker",
     "/packages/paste-core/components/toast",
     "/packages/paste-core/components/tooltip",
     "/packages/paste-core/primitives/tooltip",

cypress/integration/e2e/link-checker/index.spec.ts

@@ -16,6 +16,7 @@ const IGNORE_LIST = [
   'components/help-text',
   'components/label',
   'primitives/sibling-box',
+  'components/time-picker',
   '/__/', // I don't know where this is being picked up
 ];
 

packages/paste-core/components/date-picker/__tests__/index.spec.tsx

@@ -24,6 +24,8 @@ describe('formatReturnDate()', () => {
     expect(formatReturnDate(TEST_DATE, 'EEEEEE MMMMM dd yy')).toEqual('Su F 14 21');
     expect(formatReturnDate(TEST_DATE, 'E..EEE M Do yo')).toEqual('Sun..Sun 2 45th 2021st');
     expect(formatReturnDate(TEST_DATE, 'Mo d Yo')).toEqual('2nd 14 2021st');
+  });
+  it('should format dates with edge cases and catch errors', () => {
     // test for first day of the year to avoid 1-day-off error
     expect(formatReturnDate('2020-01-01', 'MM/dd/yyyy')).toEqual('01/01/2020');
     // test for edge cases (passing in time+date value) to throw an error

packages/paste-core/components/date-picker/src/utils.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import {format} from 'date-fns';
 
 // https://stackoverflow.com/questions/22061723/regex-date-validation-for-yyyy-mm-dd/22061800

packages/paste-core/components/form/src/shared/types.ts

@@ -1,6 +1,6 @@
 import * as PropTypes from 'prop-types';
 
-export type FormInputTypes = 'text' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'date';
+export type FormInputTypes = 'text' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'date' | 'time';
 export type FieldVariants = 'default' | 'inverse';
 
 export interface FieldWrapperProps {
@@ -16,7 +16,7 @@ export const FieldWrapperPropTypes = {
   hasError: PropTypes.bool,
   readOnly: PropTypes.bool,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date']) as any,
+  type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date', 'time']) as any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   variant: PropTypes.oneOf(['default', 'inverse']) as any,
 };

packages/paste-core/components/input-box/src/InputBox.tsx

@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types';
 import {FieldWrapper} from './FauxInput';
 import {Prefix} from './Prefix';
 import {Suffix} from './Suffix';
-import {InputTypes, Variants} from './types';
+import type {InputBoxTypes, Variants} from './types';
 
 export interface InputBoxProps {
   children: NonNullable<React.ReactNode>;
@@ -12,7 +12,7 @@ export interface InputBoxProps {
   insertAfter?: React.ReactNode;
   insertBefore?: React.ReactNode;
   readOnly?: boolean;
-  type?: InputTypes;
+  type?: InputBoxTypes;
   variant?: Variants;
 }
 
@@ -53,7 +53,7 @@ if (process.env.NODE_ENV === 'development') {
     insertBefore: PropTypes.node,
     readOnly: PropTypes.bool,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date']) as any,
+    type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date', 'time']) as any,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     variant: PropTypes.oneOf(['default', 'inverse']) as any,
   };

packages/paste-core/components/input-box/src/index.tsx

@@ -2,3 +2,4 @@ export * from './InputBox';
 export * from './Suffix';
 export * from './Prefix';
 export * from './InputChevronWrapper';
+export type {InputBoxTypes} from './types';

packages/paste-core/components/input-box/src/types.ts

@@ -1,14 +1,14 @@
 import * as PropTypes from 'prop-types';
 
-export type InputTypes = 'text' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'date';
+export type InputBoxTypes = 'text' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'date' | 'time';
 export type Variants = 'default' | 'inverse';
 
 export interface FauxInputProps {
   children: NonNullable<React.ReactNode>;
   disabled?: boolean;
   hasError?: boolean;
   readOnly?: boolean;
-  type?: InputTypes;
+  type?: InputBoxTypes;
   variant?: Variants;
 }
 
@@ -18,7 +18,7 @@ export const FauxInputPropTypes = {
   hasError: PropTypes.bool,
   readOnly: PropTypes.bool,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date']) as any,
+  type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date', 'time']) as any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   variant: PropTypes.oneOf(['default', 'inverse']) as any,
 };

packages/paste-core/components/input/src/Input.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import {styled, css} from '@twilio-paste/styling-library';
 import {InputBox} from '@twilio-paste/input-box';
+import type {InputBoxTypes} from '@twilio-paste/input-box';
 import {safelySpreadFormControlProps} from './utils';
 
-export type InputTypes = 'text' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'date';
 export type InputVariants = 'default' | 'inverse';
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -21,14 +21,14 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   required?: boolean;
   size?: never;
   style?: never;
-  type: InputTypes;
+  type: InputBoxTypes;
   value?: string;
   variant?: InputVariants;
   width?: never;
 }
 
 interface TypeProps {
-  type: InputTypes;
+  type: InputBoxTypes;
   inputmode?: string | undefined;
   pattern?: string | undefined;
 }
@@ -55,7 +55,7 @@ export const InputElement = styled.input<InputProps>((props) =>
     paddingTop: 'space30',
     resize: 'none',
     width: '100%',
-    cursor: props.type === 'date' && !props.readOnly && !props.disabled ? 'text' : 'auto',
+    cursor: (props.type === 'date' || props.type === 'time') && !props.readOnly && !props.disabled ? 'text' : 'auto',
 
     '&::placeholder': {
       color: props.variant === 'inverse' ? 'colorTextInverseWeak' : 'colorTextWeak',
@@ -159,9 +159,11 @@ if (process.env.NODE_ENV === 'development') {
     placeholder: PropTypes.string,
     readOnly: PropTypes.bool,
     required: PropTypes.bool,
-    type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date']).isRequired as any,
+    type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date', 'time'])
+      .isRequired as any,
     value: PropTypes.string,
   };
 }
 
 export {Input};
+export type {InputBoxTypes as InputTypes};

packages/paste-core/components/time-picker/__tests__/index.spec.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import {matchers} from 'jest-emotion';
+// @ts-ignore typescript doesn't like js imports
+import axe from '../../../../../.jest/axe-helper';
+import {formatReturnTime} from '../src/utils';
+import {
+  DefaultTimePicker,
+  DisabledTimePicker,
+  ErrorTimePicker,
+  InverseTimePicker,
+  ReadonlyTimePicker,
+} from '../stories/index.stories';
+
+expect.extend(matchers);
+
+describe('formatReturnTime()', () => {
+  const TEST_TIME = '13:30:04';
+
+  it('should format times', () => {
+    expect(formatReturnTime(TEST_TIME, 'HH:mm')).toEqual('13:30');
+    expect(formatReturnTime(TEST_TIME, 'hh:mm')).toEqual('01:30');
+    expect(formatReturnTime(TEST_TIME, 'HH:mm:ss')).toEqual('13:30:04');
+    expect(formatReturnTime(TEST_TIME, 'hh:mm:ss')).toEqual('01:30:04');
+    expect(formatReturnTime(TEST_TIME, 'HH:mm:ss.SSS')).toEqual('13:30:04.000');
+    expect(formatReturnTime(TEST_TIME, 'HH:mm:ss.SSS')).toEqual('13:30:04.000');
+    expect(formatReturnTime(TEST_TIME, 'hh:mm:ss.SSS aa')).toEqual('01:30:04.000 p.m.');
+  });
+  it('should format times with edge cases and catch errors', () => {
+    // testing midnight
+    expect(formatReturnTime('00:00', 'hh:mm A')).toEqual('12:00 AM');
+    // test for edge cases (passing in time+date value) to throw an error
+    expect(() => {
+      formatReturnTime('2022-03-01T03:35Z', 'hh:mm:ss');
+    }).toThrow(
+      '[Paste Time Picker]: Please make sure timeValue string matches HH:mm OR HH:mm:ss OR HH:mm:ss.SSS format'
+    );
+  });
+});
+
+describe('TimePicker', () => {
+  describe('TimePicker inner props', () => {
+    const initialProps = {
+      id: 'timepicker',
+      name: 'dp',
+      disabled: true,
+      readOnly: true,
+      hasError: true,
+      required: true,
+      defaultValue: '03:53',
+      step: '2',
+      'data-testid': 'timepickerid',
+    };
+    render(<DefaultTimePicker {...initialProps} />);
+    const InnerTimePicker = screen.getByTestId('timepickerid');
+
+    it('should set disabled correctly', () => {
+      expect(InnerTimePicker.getAttribute('disabled')).toEqual('');
+      expect(InnerTimePicker).toHaveStyleRule('-webkit-text-fill-color', 'colorTextWeaker', {target: ':disabled'});
+    });
+
+    it('should set readOnly correctly', () => {
+      expect(InnerTimePicker.getAttribute('aria-readonly')).toEqual('true');
+      expect(InnerTimePicker.getAttribute('readOnly')).toEqual('');
+    });
+
+    it('should set hasErorr correctly', () => {
+      expect(InnerTimePicker.getAttribute('aria-invalid')).toEqual('true');
+    });
+
+    it('should set id correctly', () => {
+      expect(InnerTimePicker.getAttribute('id')).toEqual(initialProps.id);
+    });
+
+    it('should set name correctly', () => {
+      expect(InnerTimePicker.getAttribute('name')).toEqual(initialProps.name);
+    });
+
+    it('should set defaultValue correctly', () => {
+      expect(InnerTimePicker.getAttribute('value')).toEqual(initialProps.defaultValue);
+    });
+
+    it('should render with margin: space0', () => {
+      expect(InnerTimePicker).toHaveStyleRule('margin', 'space0');
+    });
+
+    it('should set required correctly', () => {
+      expect(InnerTimePicker.getAttribute('required')).toEqual('');
+    });
+
+    it('should ignore the step prop', () => {
+      expect(InnerTimePicker.getAttribute('step')).toBeNull();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('Should have no accessibility violations', async () => {
+      const {container} = render(<DefaultTimePicker />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('Disabled should have no accessibility violations', async () => {
+      const {container} = render(<DisabledTimePicker />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('Error case should have no accessibility violations', async () => {
+      const {container} = render(<ErrorTimePicker />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('Inverse case should have no accessibility violations', async () => {
+      const {container} = render(<InverseTimePicker />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('Read only case should have no accessibility violations', async () => {
+      const {container} = render(<ReadonlyTimePicker />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+  });
+});

packages/paste-core/components/time-picker/build.js

@@ -0,0 +1,3 @@
+const {build} = require('../../../../tools/build/esbuild');
+
+build(require('./package.json'));

packages/paste-core/components/time-picker/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@twilio-paste/time-picker",
+  "version": "0.0.0",
+  "category": "user input",
+  "status": "production",
+  "description": "An input field for users to enter a time.",
+  "author": "Twilio Inc.",
+  "license": "MIT",
+  "main:dev": "src/index.tsx",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn clean && NODE_ENV=production node build.js && tsc",
+    "build:js": "NODE_ENV=development node build.js",
+    "build:props": "typedoc --tsconfig ./tsconfig.json --json ./dist/prop-types.json",
+    "clean": "rm -rf ./dist",
+    "tsc": "tsc"
+  },
+  "peerDependencies": {
+    "@twilio-paste/box": "^4.0.2",
+    "@twilio-paste/design-tokens": "^6.6.0",
+    "@twilio-paste/input": "^3.0.6",
+    "@twilio-paste/input-box": "^4.0.2",
+    "@twilio-paste/style-props": "^3.0.1",
+    "@twilio-paste/styling-library": "^0.3.1",
+    "@twilio-paste/theme": "^5.0.1",
+    "@twilio-paste/types": "^3.1.1",
+    "@twilio-paste/uid-library": "^0.2.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "@twilio-paste/box": "^4.0.2",
+    "@twilio-paste/design-tokens": "^6.6.0",
+    "@twilio-paste/input": "^3.0.7",
+    "@twilio-paste/input-box": "^4.0.6",
+    "@twilio-paste/style-props": "^3.0.1",
+    "@twilio-paste/styling-library": "^0.3.1",
+    "@twilio-paste/theme": "^5.0.1",
+    "@twilio-paste/types": "^3.1.1",
+    "@twilio-paste/uid-library": "^0.2.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}

packages/paste-core/components/time-picker/src/TimePicker.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import type {InputProps} from '@twilio-paste/input';
+import {Input} from '@twilio-paste/input';
+
+export type TimePickerProps = Omit<InputProps, 'type' | 'insertBefore' | 'insertAfter' | 'step'>;
+
+// @ts-expect-error because ts doesn't like destructuring the step prop after omitting it from the type
+const TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(({step: _step, ...props}, ref) => {
+  return <Input {...props} type="time" ref={ref} />;
+});
+
+TimePicker.displayName = 'TimePicker';
+
+TimePicker.propTypes = {
+  disabled: PropTypes.bool,
+  hasError: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  required: PropTypes.bool,
+  value: PropTypes.string,
+};
+
+export {TimePicker};

packages/paste-core/components/time-picker/src/index.tsx

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