@progressiveui/react 1.22.0

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import markdown from "./README.mdx";
+import { DatePickerInput } from "./DatePickerInput";
+import { DateRangePickerInput } from "./DateRangePickerInput";
+import ReactDatePicker from "react-datepicker";
+import DatePicker from "./DatePicker";
+import DateRangePicker from "./DateRangePicker";
+
+const meta: Meta<typeof DateRangePickerInput> = {
+  title: "Components/UI Elements/DatePicker",
+  component: DateRangePickerInput,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DateRangePickerInput>;
+
+export const DatePickerDefault: Story = {
+  render: (args) => <DatePicker datePicker={ReactDatePicker} {...args} />,
+  args: {
+    labelText: "DatePicker",
+    helperText: "This is the helperText",
+  },
+};
+
+export const DatePickerDefaultInput: Story = {
+  render: (args) => <DatePickerInput {...args} datePicker={ReactDatePicker} />,
+};
+
+export const DateRangePickerDefault: Story = {
+  render: (args) => (
+    <DateRangePicker
+      labelText="DateRangePicker"
+      helperText="This is the helperText"
+      {...args}
+      datePicker={ReactDatePicker}
+    />
+  ),
+};
+
+export const DateRangePickerDefaultInput: Story = {
+  render: (args) => (
+    <DateRangePickerInput {...args} datePicker={ReactDatePicker} />
+  ),
+};

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import Input from "../Input/Input";
+import { UseInputProps, useInput } from "../Input/useInput";
+import { InputProps } from "../Input";
+import { DatePickerInput, DatePickerInputProps } from "./DatePickerInput";
+
+/** DatePicker with the Input wrapper */
+
+interface DatePickerProps extends InputProps, DatePickerInputProps {
+  /* React.ComponentPropsWithRef<"input">*/
+}
+
+const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(
+  (props, ref) => {
+    const { datePickerProps, hideLabel, helperText, /*  pattern, */ required } =
+      props;
+
+    const { prefix } = useSettings();
+
+    const inputClassName = classNames(
+      `${prefix}--input`,
+      `${prefix}--date-picker`,
+      {
+        [`${prefix}--date-picker--helpertext`]: helperText,
+        [`${prefix}--date-picker--nolabel`]: hideLabel,
+        [`${prefix}--date-picker--required`]: required,
+      }
+    );
+
+    const useInputProps = props as UseInputProps;
+    const { inputProps, wrapperProps } = useInput({
+      ...useInputProps,
+      inputClassName,
+    });
+
+    return (
+      <Input {...wrapperProps}>
+        <DatePickerInput
+          // pattern={pattern}
+          {...inputProps}
+          ref={ref}
+          datePickerProps={datePickerProps}
+        />
+      </Input>
+    );
+  }
+);
+
+DatePicker.displayName = "DatePicker";
+
+export default DatePicker;

package/src/components/DatePicker/DatePickerInput.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import useSettings from "../../hooks/useSettings";
+import { ArrowRight, CalendarAltRegular } from "@progressiveui/icons-react";
+
+export interface DatePickerInputProps {
+  /**
+   * The starting date value, formatted as a string.
+   */
+  startDate?: string;
+
+  /**
+   * The ending date value, formatted as a string.
+   */
+  endDate?: string;
+
+  /**
+   * The DatePicker component to be used (react-datepicker by default)
+   */
+  datePicker?: React.ComponentType<any>;
+
+  /**
+   * Function to set the starting date. Typically used as an event handler.
+   */
+  setStartDate?: string;
+
+  /**
+   * Function to set the ending date. Typically used as an event handler.
+   */
+  setEndDate?: string;
+
+  /**
+   * Additional props for the start date DatePicker component.
+   * Can be used to pass custom settings or event handlers.
+   */
+  fromProps?: object;
+
+  /**
+   * Additional props for the end date DatePicker component.
+   * Can be used to pass custom settings or event handlers.
+   */
+  toProps?: object;
+  /**
+   * Additional props for the DatePicker component.
+   */
+  datePickerProps?: object;
+}
+
+export const DatePickerInput = React.forwardRef<
+  HTMLInputElement,
+  DatePickerInputProps
+>(
+  (
+    { startDate, endDate, setStartDate, datePicker, datePickerProps = {} },
+    ref
+  ) => {
+    const { prefix } = useSettings();
+    const DatePicker = datePicker;
+    if (!DatePicker) {
+      return <div>Add a datepicker component</div>;
+    }
+    return (
+      <div className={`${prefix}--date-picker`}>
+        <div className={`${prefix}--date-picker__input`}>
+          <DatePicker
+            selected={startDate}
+            className={`${prefix}--input ${prefix}--date__input__start-date`}
+            onChange={setStartDate}
+            selectsStart
+            startDate={startDate}
+            endDate={endDate}
+            wrapperClassName={`${prefix}--date-picker__wrapper`}
+            {...datePickerProps}
+            ref={ref}
+          />
+          <CalendarAltRegular className={`${prefix}--date-picker__icon`} />
+        </div>
+      </div>
+    );
+  }
+);
+
+DatePickerInput.displayName = "DatePickerInput";

package/src/components/DatePicker/DatePickerNew.stories.js.new

@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+
+import { SingleDatePickerInput } from '../DatePicker/SingleDatePickerInput';
+import { DateRangePickerInput } from '../DatePickerNew';
+import Input from '../Input';
+import moment from 'moment';
+import { Controller, useForm } from 'react-hook-form';
+
+import 'react-dates/initialize';
+import { SingleDatePicker, DateRangePicker } from 'react-dates';
+import markdown from './README.mdx';
+
+//import 'react-datepicker/dist/react-datepicker.css';
+
+export default {
+  title: 'Components/UI Elements/DatePickerNew',
+  component: SingleDatePickerInput,
+  markdown: 'hello',
+  parameters: {
+    componentSubtitle: 'Component',
+    status: 'experimental',
+    mdx: markdown,
+  },
+};
+
+export const SingleDatePickerDefault = (args) => (
+  <div style={{ height: '300px' }}>
+    <SingleDatePickerInput {...args} />
+  </div>
+);
+SingleDatePickerDefault.args = {
+  datePicker: SingleDatePicker,
+  labelText: 'Label text (labelText)',
+  placeholder: 'Placeholder text (placeholder)',
+  disabled: false,
+  hideLabel: false,
+  showClearDate: false,
+  invalid: false,
+  invalidText: 'A valid value is required',
+  showDefaultInputIcon: true,
+  inputIconPosition: 'after',
+  helperText: 'Optional helper text.',
+};
+
+const singleSourceCode = `
+import 'react-dates/initialize';
+import { SingleDatePickerInput } from "@progressiveui/react";
+import { SingleDatePicker } from 'react-dates';
+
+<SingleDatePickerInput
+  datePicker={SingleDatePicker}
+  helperText="Optional helper text."
+  inputIconPosition="after"
+  invalidText="A valid value is required"
+  labelText="Label datepicker"
+  onBlur={()=>{}}
+  onChange={()=>{}}
+  onFocus={()=>{}}
+  placeholder="Placeholder text (placeholder)"
+  showDefaultInputIcon
+
+/>
+`;
+
+SingleDatePickerDefault.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: singleSourceCode,
+      },
+    },
+  },
+};
+
+export const SingleDatePickerNew = (args) => {
+  const [date, setDate] = useState(moment());
+  const [focused, setFocused] = useState(false);
+  return (
+    <Input
+      labelText="Input using SingleDatePicker by Airbnb"
+      helperText="HelperText">
+      {(e) => (
+        <SingleDatePicker
+          showDefaultInputIcon={true}
+          inputIconPosition="after"
+          onDateChange={(newDate) => setDate(newDate)}
+          focused={focused}
+          onFocusChange={({ focused }) => setFocused(focused)}
+          date={date}
+          id="your_unique_id"
+        />
+      )}
+    </Input>
+  );
+};
+
+export const DatePickerHookForm = (args) => {
+  const { control, watch } = useForm();
+  const input = watch('test');
+
+  return (
+    <>
+      {JSON.stringify(input)}
+      <Controller
+        control={control}
+        name="test"
+        render={({ field, fieldState, formState }) => (
+          <SingleDatePickerInput
+            {...field}
+            {...fieldState}
+            datePicker={SingleDatePicker}
+            helperText="Optional helper text."
+            inputIconPosition="after"
+            invalidText="A valid value is required"
+            labelText="Label datepicker"
+            placeholder="Placeholder text (placeholder)"
+            showDefaultInputIcon
+          />
+        )}
+      />
+    </>
+  );
+};
+
+export const DateRangePickerDefault = (args) => {
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+  const date = new Date();
+  return (
+    <div style={{ height: '300px' }}>
+      <DateRangePickerInput
+        {...args}
+        setStartDate={setStartDate}
+        startDate={startDate}
+        setEndDate={setEndDate}
+        endDate={endDate}
+        fromProps={{
+          minDate: new Date(),
+          maxDate: new Date(date.setMonth(date.getMonth() + 2)),
+        }}
+      />
+    </div>
+  );
+};
+DateRangePickerDefault.args = {
+  labelText: 'Label text (labelText)',
+  placeholder: 'Placeholder text (placeholder)',
+  disabled: false,
+  hideLabel: false,
+  showClearDate: false,
+  invalid: false,
+  invalidText: 'A valid value is required',
+  helperText: 'Optional helper text.',
+};
+
+const dateRangeSourceCode = `
+dddd
+`;
+
+DateRangePickerDefault.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: dateRangeSourceCode,
+      },
+    },
+  },
+};
+
+export const DatePickerRangeHookForm = (args) => {
+  const { control, watch } = useForm();
+  const datePickerRange = watch('datePickerRange');
+  return (
+    <>
+      {JSON.stringify(datePickerRange)}
+      <Controller
+        control={control}
+        name="datePickerRange"
+        render={({ field, fieldState, formState }) => (
+          <DateRangePickerInput
+            {...fieldState}
+            {...field}
+            datePicker={DateRangePicker}
+            helperText="Optional helper text."
+            inputIconPosition="after"
+            invalidText="A valid value is required"
+            labelText="Label datepicker"
+            placeholder="Placeholder text (placeholder)"
+            showDefaultInputIcon
+          />
+        )}
+      />
+    </>
+  );
+};

package/src/components/DatePicker/DateRangePicker.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import Input from "../Input/Input";
+import { UseInputProps, useInput } from "../Input/useInput";
+import { InputProps } from "../Input";
+import {
+  DateRangePickerInput,
+  DateRangePickerInputProps,
+} from "./DateRangePickerInput";
+
+/** DatePicker with the Input wrapper */
+
+interface DateRangePickerProps
+  extends InputProps,
+    DateRangePickerInputProps,
+    React.ComponentPropsWithRef<"input"> {}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = React.forwardRef(
+  (props, ref) => {
+    const {
+      fromProps,
+      toProps,
+      hideLabel,
+      helperText,
+      /* pattern, */ required,
+    } = props;
+
+    const { prefix } = useSettings();
+
+    const inputClassName = classNames(
+      `${prefix}--input`,
+      `${prefix}--date-range-picker`,
+      {
+        [`${prefix}--date-range-picker--helpertext`]: helperText,
+        [`${prefix}--date-range-picker--nolabel`]: hideLabel,
+        [`${prefix}--date-range-picker--required`]: required,
+      }
+    );
+
+    const useInputProps = props as UseInputProps;
+    const { inputProps, wrapperProps } = useInput({
+      ...useInputProps,
+      inputClassName,
+    });
+
+    return (
+      <Input {...wrapperProps}>
+        <DateRangePickerInput
+          // pattern={pattern}
+          {...inputProps}
+          ref={ref}
+          fromProps={fromProps}
+          toProps={toProps}
+        />
+      </Input>
+    );
+  }
+);
+
+DateRangePicker.displayName = "DateRangePicker";
+
+export default DateRangePicker;

package/src/components/DatePicker/DateRangePickerInput.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import useSettings from "../../hooks/useSettings";
+import { ArrowRight, CalendarAltRegular } from "@progressiveui/icons-react";
+
+export interface DateRangePickerInputProps {
+  /**
+   * The starting date value, formatted as a string.
+   */
+  startDate?: string;
+
+  /**
+   * The ending date value, formatted as a string.
+   */
+  endDate?: string;
+
+  /**
+   * The DatePicker component to be used (react-datepicker by default)
+   */
+  datePicker?: React.ComponentType<any>;
+
+  /**
+   * Function to set the starting date. Typically used as an event handler.
+   */
+  setStartDate?: string;
+
+  /**
+   * Function to set the ending date. Typically used as an event handler.
+   */
+  setEndDate?: string;
+
+  /**
+   * Additional props for the start date DatePicker component.
+   * Can be used to pass custom settings or event handlers.
+   */
+  fromProps?: object;
+
+  /**
+   * Additional props for the end date DatePicker component.
+   * Can be used to pass custom settings or event handlers.
+   */
+  toProps?: object;
+}
+
+export const DateRangePickerInput = React.forwardRef<
+  HTMLInputElement,
+  DateRangePickerInputProps
+>(
+  (
+    {
+      startDate,
+      endDate,
+      setStartDate,
+      setEndDate,
+      datePicker,
+      fromProps = {},
+      toProps = {},
+    },
+    ref
+  ) => {
+    const { prefix } = useSettings();
+    const DatePicker = datePicker;
+    if (!DatePicker) {
+      return <div>Add a datepicker component</div>;
+    }
+    return (
+      <div className={`${prefix}--date-ranger-picker`}>
+        <div className={`${prefix}--date-ranger-picker__input`}>
+          <DatePicker
+            selected={startDate}
+            className={`${prefix}--input ${prefix}--date-ranger__input__start-date`}
+            onChange={setStartDate}
+            selectsStart
+            startDate={startDate}
+            endDate={endDate}
+            wrapperClassName={`${prefix}--date-picker__wrapper`}
+            {...fromProps}
+            ref={ref}
+          />
+          <CalendarAltRegular
+            className={`${prefix}--date-ranger-picker__icon`}
+          />
+        </div>
+        <ArrowRight className={`${prefix}--date-ranger-picker__arrow`} />
+        <div className={`${prefix}--date-ranger-picker__input`}>
+          <DatePicker
+            selected={endDate}
+            className={`${prefix}--input ${prefix}--date-ranger__input__start-date`}
+            onChange={setEndDate}
+            selectsEnd
+            startDate={startDate}
+            endDate={endDate}
+            minDate={startDate}
+            wrapperClassName={`${prefix}--date-picker__wrapper`}
+            {...toProps}
+            // TODO: Add ref to the end date picker
+          />
+          <CalendarAltRegular
+            className={`${prefix}--date-ranger-picker__icon`}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+DateRangePickerInput.displayName = "DateRangePickerInput";

package/src/components/DatePicker/README.mdx

@@ -0,0 +1,50 @@
+The Datepicker allows the user to select a date or date range from a calendar.
+
+We recommend [react-datepicker](https://www.npmjs.com/package/react-datepicker) for DatePickers and DateRangePickers.
+
+### Usage
+
+Initialize with loading classes to load the styling from WFP UI
+
+```js
+import 'react-dates/initialize';
+import { SingleDatePicker, DateRangePicker } from 'react-dates';
+import { SingleDatePickerInput} from '@progressiveui/react';
+
+<SingleDatePickerInput
+  datePicker={SingleDatePicker}
+/>
+
+<DateRangePickerInput
+  datePicker={DateRangePicker}
+/>
+```
+
+### Usage with redux-form or final-forms
+
+```js
+import ReduxFormWrapper from "@progressiveui/react";
+import { SingleDatePickerInput } from "@progressiveui/react";
+import { SingleDatePicker, DateRangePicker } from "react-dates";
+
+<Field
+  component={ReduxFormWrapper}
+  inputComponent={SingleDatePickerInput}
+  datePicker={SingleDatePicker}
+  format={(value) => (value ? moment(value) : undefined)}
+  normalize={(data) => data && data.value && data.value.format()}
+/>;
+```
+
+```js
+<Field
+  component={ReduxFormWrapper}
+  inputComponent={DateRangePickerInput}
+  datePicker={DateRangePicker}
+  format={(value) =>
+    value
+      ? { startDate: moment(value.startDate), endDate: moment(value.endDate) }
+      : undefined
+  }
+/>
+```

package/src/components/DatePicker/index.ts

@@ -0,0 +1,4 @@
+export { default as DatePicker } from "./DatePicker";
+export { default as DateRangePicker } from "./DateRangePicker";
+export { DatePickerInput } from "./DatePickerInput";
+export { DateRangePickerInput } from "./DateRangePickerInput";

package/src/components/Empty/Empty-test.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import Empty from '../Empty';
+import { shallow } from 'enzyme';
+
+describe('Empty', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <Empty title="title" kind="large" />
+    );
+
+    const emptyWrapper = () => wrapper.find('div.wfp--empty');
+
+    describe('emptyWrapper', () => {
+      it('renders as expected', () => {
+        expect(emptyWrapper().length).toBe(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(emptyWrapper().hasClass('wfp--empty')).toEqual(true);
+      });
+    });
+
+    const emptyIcon = () => wrapper.find('div.wfp--empty__icon');
+
+    describe('emptyIcon', () => {
+      it('renders as expected', () => {
+        expect(emptyIcon().length).toBe(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(emptyIcon().hasClass('wfp--empty__icon')).toEqual(true);
+      });
+    });
+
+    const emptyText = () => wrapper.find('div.wfp--empty__text');
+
+    describe('emptyText', () => {
+      it('renders as expected', () => {
+        expect(emptyText().length).toBe(1);
+      });
+      it('renders children as expected', () => {
+        expect(emptyText().props().children).toEqual(
+          [<h2>title</h2>, <p/>]
+        )
+      });
+
+      it('renders title as expected', () => {
+        expect(emptyText().find("h2").length).toBe(1);
+      });
+
+      it('renders additional content as expected', () => {
+        expect(emptyText().find("p").length).toBe(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(emptyText().hasClass('wfp--empty__text')).toEqual(true);
+      });
+    });
+
+    const emptyButton = () => wrapper.find('div.wfp--empty__button');
+
+    describe('emptyButton', () => {
+      it('has the expected classes', () => {
+        expect(emptyButton().hasClass('wfp--empty__button')).toEqual(true);
+      });
+    })
+    
+  });
+});