From 7be66ec311d945be3be8410550465821d69934c8 Mon Sep 17 00:00:00 2001 From: Devon Rusconi Date: Thu, 7 Oct 2021 15:39:27 -0700 Subject: [PATCH 1/3] feat(datepicker): created date picker component --- packages/DatePicker/package.json | 34 ++++++++++++ packages/DatePicker/src/DatePicker.scss | 12 ++++ .../DatePicker/src/DatePicker.stories.tsx | 35 ++++++++++++ packages/DatePicker/src/DatePicker.tsx | 55 +++++++++++++++++++ .../src/__tests__/DatePicker.test.tsx | 30 ++++++++++ packages/DatePicker/src/index.tsx | 1 + packages/DatePicker/tsconfig.json | 3 + 7 files changed, 170 insertions(+) create mode 100644 packages/DatePicker/package.json create mode 100644 packages/DatePicker/src/DatePicker.scss create mode 100644 packages/DatePicker/src/DatePicker.stories.tsx create mode 100644 packages/DatePicker/src/DatePicker.tsx create mode 100644 packages/DatePicker/src/__tests__/DatePicker.test.tsx create mode 100644 packages/DatePicker/src/index.tsx create mode 100644 packages/DatePicker/tsconfig.json diff --git a/packages/DatePicker/package.json b/packages/DatePicker/package.json new file mode 100644 index 00000000..8b8e86db --- /dev/null +++ b/packages/DatePicker/package.json @@ -0,0 +1,34 @@ +{ + "name": "@mbkit/datepicker", + "version": "1.4.3", + "source": "src/index.tsx", + "main": "dist/cjs/DatePicker.js", + "module": "dist/esm/DatePicker.js", + "types": "dist/cjs/index.d.ts", + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "scripts": { + "build": "../../node_modules/.bin/rollup -c ../../shared/build-tools/rollup.config.js ", + "dev": "../../shared/build-tools/dev-package.js" + }, + "license": "MIT", + "devDependencies": { + "@types/classnames": "^2.2.9", + "@types/react": "^16.9.2", + "react": "^16.9.0" + }, + "peerDependencies": { + "react": "^16.9.0" + }, + "dependencies": { + "@mbkit/calendar": "^1.4.3", + "@mbkit/input": "^1.4.3", + "@mbkit/theme": "^2.2.9", + "classnames": "^2.2.6", + "react-calendar": "^2.19.2" + } +} diff --git a/packages/DatePicker/src/DatePicker.scss b/packages/DatePicker/src/DatePicker.scss new file mode 100644 index 00000000..a24a3e9d --- /dev/null +++ b/packages/DatePicker/src/DatePicker.scss @@ -0,0 +1,12 @@ +@import '~@mbkit/theme/dist/theme.scss'; + +.datePicker { + input{ + width: 360px; + margin-bottom: 4px; + } + + .placeHolder{ + color: $neutral-dark; + } +} \ No newline at end of file diff --git a/packages/DatePicker/src/DatePicker.stories.tsx b/packages/DatePicker/src/DatePicker.stories.tsx new file mode 100644 index 00000000..a122525d --- /dev/null +++ b/packages/DatePicker/src/DatePicker.stories.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Story, Meta } from '@storybook/react/types-6-0'; + +import { DatePicker } from './index'; +import { DatePickerProps } from './DatePicker'; + +export default { + title: 'Components/DatePicker', + component: DatePicker, +} as Meta; + +const Template: Story = args => ; + +const defaultArgs: DatePickerProps = { + label: 'Date Picker', + inputProps: { placeholder: 'Select date...' }, +}; + +export const DatePickerUS = Template.bind({}); +DatePickerUS.args = { + ...defaultArgs, + calendarType: 'US', +}; + +export const DatePickerAribic = Template.bind({}); +DatePickerAribic.args = { + ...defaultArgs, + calendarType: 'Arabic', +}; + +export const DatePickerHebrew = Template.bind({}); +DatePickerHebrew.args = { + ...defaultArgs, + calendarType: 'Hebrew', +}; diff --git a/packages/DatePicker/src/DatePicker.tsx b/packages/DatePicker/src/DatePicker.tsx new file mode 100644 index 00000000..20e3aa38 --- /dev/null +++ b/packages/DatePicker/src/DatePicker.tsx @@ -0,0 +1,55 @@ +import React, { AllHTMLAttributes, FC, forwardRef, RefAttributes, RefObject, useState } from 'react'; +import { Input, InputProps } from '@mbkit/input'; +import { Calendar } from '@mbkit/calendar'; +import { CalendarProps } from 'react-calendar'; + +import styles from './DatePicker.scss'; +import classnames from 'classnames'; + +export type DatePickerProps = AllHTMLAttributes & + RefAttributes & { + /** When the datepicker is set to be displayed, the screen reader will read this to the assistive technology */ + label: string; + // this is props for input component + inputProps?: InputProps; + }; + +export const DatePicker: FC = forwardRef((props: DatePickerProps, ref: RefObject) => { + const { className = '', inputProps, ...rest } = props; + const [show, setShow] = useState(false); + const [date, setDate] = useState(''); + const showPlaceholder = date === ''; + + const classNames = classnames({ + [styles.placeHolder]: showPlaceholder, + [className]: className, + }); + console.log(inputProps?.placeholder); + function toggleCalendar(date: any) { + setDate(date); + setShow(false); + } + return ( +
{ + if (event.key === 'Escape') { + event.stopPropagation(); + setShow(false); + } + }} + > + setShow(!show)} + onChange={() => {}} + className={classNames} + /> + {show && toggleCalendar(date)} />} +
+ ); +}); +DatePicker.displayName = 'DatePicker'; diff --git a/packages/DatePicker/src/__tests__/DatePicker.test.tsx b/packages/DatePicker/src/__tests__/DatePicker.test.tsx new file mode 100644 index 00000000..2004c4d0 --- /dev/null +++ b/packages/DatePicker/src/__tests__/DatePicker.test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { DatePicker } from '../DatePicker'; + +describe('DatePicker', () => { + it('should render', () => { + const { getByTestId } = render(); + const datepicker = getByTestId('datepicker'); + expect(datepicker).toBeTruthy(); + expect(datepicker.nodeName).toBe('DIV'); + }); + it('should pass all props through', () => { + const { getByTestId } = render( + + + , + ); + const label = getByTestId('datepicker'); + const input = getByTestId('datepicker'); + expect(input).toBeTruthy(); + expect(label.getAttribute('data-random')).toBe('existing'); + expect(label.style.margin).toBe('8px'); + }); +}); diff --git a/packages/DatePicker/src/index.tsx b/packages/DatePicker/src/index.tsx new file mode 100644 index 00000000..a4eb7f5c --- /dev/null +++ b/packages/DatePicker/src/index.tsx @@ -0,0 +1 @@ +export { DatePicker } from './DatePicker'; diff --git a/packages/DatePicker/tsconfig.json b/packages/DatePicker/tsconfig.json new file mode 100644 index 00000000..63b5082a --- /dev/null +++ b/packages/DatePicker/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} From 213c75cfb9d16fa64a12337144f8b7a0209dd788 Mon Sep 17 00:00:00 2001 From: Devon Rusconi Date: Tue, 12 Oct 2021 12:34:58 -0700 Subject: [PATCH 2/3] feat(datepicker): add options and locale props --- packages/DatePicker/src/DatePicker.scss | 4 -- .../DatePicker/src/DatePicker.stories.tsx | 1 + packages/DatePicker/src/DatePicker.tsx | 41 ++++++++++++------- 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/DatePicker/src/DatePicker.scss b/packages/DatePicker/src/DatePicker.scss index a24a3e9d..af085b59 100644 --- a/packages/DatePicker/src/DatePicker.scss +++ b/packages/DatePicker/src/DatePicker.scss @@ -5,8 +5,4 @@ width: 360px; margin-bottom: 4px; } - - .placeHolder{ - color: $neutral-dark; - } } \ No newline at end of file diff --git a/packages/DatePicker/src/DatePicker.stories.tsx b/packages/DatePicker/src/DatePicker.stories.tsx index a122525d..3c4ad640 100644 --- a/packages/DatePicker/src/DatePicker.stories.tsx +++ b/packages/DatePicker/src/DatePicker.stories.tsx @@ -13,6 +13,7 @@ const Template: Story = args => ; const defaultArgs: DatePickerProps = { label: 'Date Picker', + dateFormatOptions: { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' }, inputProps: { placeholder: 'Select date...' }, }; diff --git a/packages/DatePicker/src/DatePicker.tsx b/packages/DatePicker/src/DatePicker.tsx index 20e3aa38..2ef44f89 100644 --- a/packages/DatePicker/src/DatePicker.tsx +++ b/packages/DatePicker/src/DatePicker.tsx @@ -1,7 +1,6 @@ -import React, { AllHTMLAttributes, FC, forwardRef, RefAttributes, RefObject, useState } from 'react'; +import React, { AllHTMLAttributes, ChangeEvent, FC, forwardRef, RefAttributes, RefObject, useState } from 'react'; import { Input, InputProps } from '@mbkit/input'; import { Calendar } from '@mbkit/calendar'; -import { CalendarProps } from 'react-calendar'; import styles from './DatePicker.scss'; import classnames from 'classnames'; @@ -10,22 +9,36 @@ export type DatePickerProps = AllHTMLAttributes & RefAttributes & { /** When the datepicker is set to be displayed, the screen reader will read this to the assistive technology */ label: string; + /** Value that is displayed in text input */ + value: Date; + /** Locale that will determine date format */ + locale?: string; + /** DateTimeFormat options. Ex: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' } */ + dateFormatOptions?: object; + /** Fires when user interacts with value in input field */ + onChange: (event: ChangeEvent) => void; + /** Adds red border and sets aria-invalid attribute */ + invalid?: boolean; // this is props for input component inputProps?: InputProps; }; export const DatePicker: FC = forwardRef((props: DatePickerProps, ref: RefObject) => { - const { className = '', inputProps, ...rest } = props; + const { + className = '', + label, + locale = 'en-US', + dateFormatOptions = {}, + value = '', + onChange, + invalid, + inputProps, + ...rest + } = props; const [show, setShow] = useState(false); - const [date, setDate] = useState(''); - const showPlaceholder = date === ''; + const [date, setDate] = useState(value); - const classNames = classnames({ - [styles.placeHolder]: showPlaceholder, - [className]: className, - }); - console.log(inputProps?.placeholder); - function toggleCalendar(date: any) { + function toggleCalendar(date) { setDate(date); setShow(false); } @@ -42,11 +55,11 @@ export const DatePicker: FC = forwardRef((props: DatePickerProp > setShow(!show)} - onChange={() => {}} - className={classNames} + onChange={onChange} + className={className} /> {show && toggleCalendar(date)} />} From 16e9601be25ac4c157fa0f76c369bdbaee5d5272 Mon Sep 17 00:00:00 2001 From: Devon Rusconi Date: Tue, 12 Oct 2021 14:09:23 -0700 Subject: [PATCH 3/3] fix: fix typo --- packages/DatePicker/src/DatePicker.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/DatePicker/src/DatePicker.stories.tsx b/packages/DatePicker/src/DatePicker.stories.tsx index 3c4ad640..02bca15d 100644 --- a/packages/DatePicker/src/DatePicker.stories.tsx +++ b/packages/DatePicker/src/DatePicker.stories.tsx @@ -23,8 +23,8 @@ DatePickerUS.args = { calendarType: 'US', }; -export const DatePickerAribic = Template.bind({}); -DatePickerAribic.args = { +export const DatePickerArabic = Template.bind({}); +DatePickerArabic.args = { ...defaultArgs, calendarType: 'Arabic', };