@edvisor/product-language 0.6.0 → 0.7.0-rc1

package/src/lib/components/date-picker/helpers/date-picker-factory.tsx

@@ -0,0 +1,210 @@
+import { InputHTMLAttributes } from 'react'
+import { DateObject } from 'react-multi-date-picker'
+import styled from 'styled-components'
+
+import { Margin } from '@foundations'
+import { applyProps, FC, getSlot, isNothing, isDefined, Nothing, Slot, getOtherChildren, toArray, PropsWithChildren, first, isNil, isFunction, defaultTo, is, useInputElementState, isString } from '@helpers'
+
+import { InputField as InputFieldBase } from '../../input-field'
+import { IconMinor } from '../../icon'
+import { CustomCalendar } from '../components'
+
+const InputDatePicker = styled.div`
+  position: relative;
+`
+
+const Calendar = styled(CustomCalendar)`
+  position: absolute;
+`
+
+const InputField = styled(InputFieldBase)`
+  margin-bottom: ${Margin.xxs};
+`
+
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD'
+
+export type DateFormatter<T> = (props: { date: T | undefined, defaultFormatter: (date: T, format?: string) => string}) => string
+
+type HTMLProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'min' | 'max'>
+
+export type IDatePickerProps<T> = PropsWithChildren & HTMLProps & { 
+  value?: T
+  defaultValue?: T
+  onChange?: (change: T) => void
+  onClick?: () => void
+
+  isAvailable?: (props: { date: T, isSameDate: (date: T, other: T) => boolean }) => boolean
+
+  isOpen?: boolean
+  defaultOpen?: boolean
+
+  label?: string
+  format?: string | DateFormatter<T>
+  min?: T
+  max?: T
+}
+
+class ControlsSlot extends Slot {}
+
+export type IDatePickerSlots = {
+  Controls: typeof ControlsSlot
+}
+
+export function datePickerFactory<T>({
+  fromDate,
+  toDate,
+  empty,
+}: {
+  fromDate: (date: Date | undefined) => T,
+  toDate: (obj: T) => Date,
+  empty: (obj: T) => boolean,
+}): FC<IDatePickerProps<T>, IDatePickerSlots> {
+
+  const ConcreteDatePicker: FC<IDatePickerProps<T>, IDatePickerSlots> = (props) => {
+    const {
+      value: valueProp,
+      defaultValue,
+      onChange: onChangeProp,
+      onClick,
+      isAvailable = () => true,
+      isOpen,
+      defaultOpen,
+      label,
+      format,
+      children,
+      min,
+      max,
+      ...HTMLInputProps
+    } = props
+
+    const [value, onChange] = useInputElementState<T>({
+      value: valueProp,
+      defaultValue,
+      onChange: onChangeProp,
+    })
+    const [open, setOpen] = useInputElementState<boolean>({
+      value: isOpen,
+      defaultValue: defaultOpen,
+      onChange: onClick,
+    })
+
+    const controls = getSlot(ControlsSlot, children)
+    const calendarChildren = getOtherChildren(children)
+
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const handleChange = (selectedDates: DateObject | DateObject[] | null) => {
+      const date = first(toArray(selectedDates))
+      const change = fromDate(date?.toDate())
+
+      onChange(change)
+      
+      if (isNil(props.isOpen)) {
+        // we don't want to override the user's custom open/close behaviour
+        setOpen(false)
+      }
+    }
+
+    return (
+      <InputDatePicker>
+        {!isNothing(controls) ? (
+          applyProps(controls.props.children, (childProps: { onClick: () => void, role: string }) => ({
+            ...childProps,
+            onClick: isDefined(childProps.onClick) ? childProps.onClick : () => setOpen(!is(open)),
+            role: 'combobox',
+          }))
+        ) : (
+          <InputField
+            role={'combobox'}
+            placeholder={isNil(value) || empty(value) ? formatDate(value, props.format) : ''}
+            {...HTMLInputProps}
+            readOnly={isDefined(value) && !empty(value)}
+            value={isNil(value) || empty(value) ? '' : formatDate(value, props.format)}
+            onChange={() => undefined}
+            onClick={() => setOpen(!is(open))}
+            label={props.label}
+          >
+            <InputField.Icon>
+              <IconMinor.Calendar />
+            </InputField.Icon>
+          </InputField>
+        )}
+        {is(open) ? /** temporary fix while we wait for https://github.com/shahabyazdi/react-multi-date-picker/pull/153 */ (
+          <div role='dialog'>
+            <Calendar
+              readOnly={isDefined(props.value) && isNil(props.onChange)}
+              renderButton={renderArrows}
+              mapDays={({ date, isSameDate }) => {
+                return {
+                  ...date,
+                  disabled: !isAvailable({
+                    date: fromDate(date.toDate()),
+                    isSameDate: (a, b) =>
+                      isSameDate(
+                        toDateObject(a),
+                        toDateObject(b)
+                      ),
+                  }),
+                }
+              }}
+              value={
+                (isNil(value) || empty(value)) ? undefined : toDateObject(value)
+              }
+              minDate={isDefined(min) ? toDate(min) : undefined}
+              maxDate={isDefined(max) ? toDate(max) : undefined}
+              children={calendarChildren}
+              onChange={handleChange}
+              numberOfMonths={1}
+            />
+          </div>
+        ) : (
+          <Nothing />
+        )}
+      </InputDatePicker>
+    )
+  }
+
+  ConcreteDatePicker.Controls = ControlsSlot
+  ConcreteDatePicker.displayName = 'DatePicker'
+
+  return ConcreteDatePicker
+
+  function toDateObject(date: T): DateObject {
+    return new DateObject(toDate(date))
+  }
+
+  function defaultFormatter (date: T, format?: string): string {
+    if (isNil(date)) {
+      return ''
+    }
+
+    return toDateObject(date).format(defaultTo(format, DEFAULT_DATE_FORMAT))
+  }
+
+  function formatDate(date: T | undefined, format?: string | DateFormatter<T>): string {
+    if (isFunction(format)) {
+      return format({ date, defaultFormatter })
+    }
+
+    if (isNil(date) || empty(date)) {
+      // same behavior as html input type='date', it shows the format
+      // even though if you open the picker it goes to TODAY
+      return isString(format) ? format : DEFAULT_DATE_FORMAT
+    }
+
+    return toDateObject(date).format(
+      defaultTo(format, DEFAULT_DATE_FORMAT)
+    )
+  }
+}
+
+function renderArrows (direction: string, handleClick: () => void) {
+  return (
+    <button onClick={handleClick}>
+      {direction === 'right' ? (
+        <IconMinor.ArrowRight />
+      ) : (
+        <IconMinor.ArrowLeft />
+      )}
+    </button>
+  )
+}

package/src/lib/components/date-picker/index.ts

@@ -0,0 +1 @@
+export * from './date-picker'

package/src/lib/components/date-picker/storybook/components.tsx

@@ -0,0 +1,259 @@
+import { Button, InputField, Label } from '@components'
+import { Padding } from '@foundations'
+import { isDefined } from '@helpers'
+import { OverflowPlayground as Playground } from '@stories'
+import styled from 'styled-components'
+import { DatePicker } from '../date-picker'
+import { datePickerFactory } from '../helpers/date-picker-factory'
+
+export const DatePickerExample = () => (
+  <Playground
+    code={`
+<DatePicker label='Start Date' />
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerFormatExample = () => (
+  <Playground
+    code={`
+const [value, setValue] = useState(new Date().toISOString());
+
+<>
+  <div>You Chose: {value}</div>
+  <DatePicker format={undefined}                     value={value} onChange={setValue} />
+  <DatePicker format='MMMM D, YYYY'                  value={value} onChange={setValue} />
+  <DatePicker format={({ date }) => 'Today is: ' + date} value={value} onChange={setValue} />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerAvailableDatesExample = () => (
+  <Playground
+    code={`
+const today = new Date().toISOString()
+const tomorrow = new Date(today)
+tomorrow.setDate(tomorrow.getDate() + 1)
+
+const isUnavailable = ({ date }) => new Date(date).getDay() === 6 || new Date(date).getDay() === 0;
+const isTomorrow = ({ date, isSameDate }) => isSameDate(date, tomorrow);
+
+<>
+  <div>No weekends, and we can do same day but not next day.</div>
+  <DatePicker min={today} isAvailable={(props) => !isUnavailable(props) && !isTomorrow(props)} />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerControlledExample = () => (
+  <Playground
+    code={`
+const [value, setValue] = useState(new Date().toISOString());
+
+<>
+  <div>You chose: {value}</div>
+  <DatePicker value={value} onChange={setValue} label='Start Date' />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerControlledOpenExample = () => (
+  <Playground
+    code={`
+const [open, setOpen] = useState(false);
+
+<>
+  <Button onClick={() => setOpen(!open)}>{open ? 'Close' : 'Open'} Sesame!</Button>
+  <DatePicker isOpen={open} onClick={() => setOpen(!open)} label='Start Date' />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Button,
+        DatePicker,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerCustomHandleExample = () => (
+  <Playground
+    code={`
+<DatePicker>
+  <DatePicker.Controls>
+    <Label>Click Me</Label>
+  </DatePicker.Controls>
+</DatePicker>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        Label,
+      },
+    }}
+  />
+)
+
+const Controls = styled.div`
+  padding: ${Padding.l}
+`
+
+export const DatePickerWithExtraStuffInTheCalendar = () => (
+  <Playground
+    code={`
+const [open, setOpen] = useState(false)
+const [value, setValue] = useState(new Date().toISOString())
+const [draft, setDraft] = useState(value);
+const publish = (date) => {
+  setValue(date)
+  setDraft(date)
+}
+
+const NULL_DATE = ''
+const format = ({ date, defaultFormatter }) => date === NULL_DATE 
+  ? 'Next Available' 
+  : defaultFormatter(date, 'MMMM D, YYYY');
+
+<>
+  <DatePicker 
+    format={format} 
+    value={draft} 
+    onChange={setDraft} 
+    label='Start Date'
+    isOpen={open}
+    onClick={setOpen}
+  >
+    <Controls>
+      <Button onClick={() => publish(NULL_DATE)}>Next Available</Button>
+      <Button onClick={() => { setDraft(value); setOpen(false) }}>Cancel</Button>
+      <Button onClick={() => { publish(draft); setOpen(false) }}>Confirm</Button>
+    </Controls>
+  </DatePicker>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        Controls,
+        Button,
+        InputField,
+      },
+    }}
+  />
+)
+
+const EpochDatePicker = datePickerFactory<number>({
+  toDate: (n) => new Date(n),
+  fromDate: (date) => isDefined(date) ? date.valueOf() : 0,
+  empty: (date) => date.valueOf() === 0,
+})
+
+export const DatePickerFactoryExample = () => (
+  <Playground
+    code={`
+const [open, setOpen] = useState(false)
+const [value, setValue] = useState(new Date().valueOf())
+const [draft, setDraft] = useState(value)
+const publish = (date) => {
+  setValue(date)
+  setDraft(date)
+}
+
+const format = ({ date, defaultFormatter }) => date.valueOf() === 0
+  ? 'Next Available' 
+  : defaultFormatter(date, 'MMMM D, YYYY');
+
+<>
+  You Chose: {value}
+  <EpochDatePicker 
+    format={format} 
+    value={draft} 
+    onChange={setDraft} 
+    label='Start Date'
+    isOpen={open}
+    onClick={setOpen}
+  >
+    <Controls>
+      <Button onClick={() => publish(0)}>Next Available</Button>
+      <Button onClick={() => { setDraft(value); setOpen(false) }}>Cancel</Button>
+      <Button onClick={() => { publish(draft); setOpen(false) }}>Confirm</Button>
+    </Controls>
+  </EpochDatePicker>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        EpochDatePicker,
+        Controls,
+        Button,
+        InputField,
+      },
+    }}
+  />
+)
+
+export const DatePickerFormExample = () => (
+  <Playground
+    code={`
+const [min, setMin] = useState(new Date().toISOString())
+const [max, setMax] = useState(new Date().toISOString());
+
+<form onSubmit={(e) => e.preventDefault()}>
+  <DatePicker max={max} label='min' value={min} onChange={setMin} />
+  <DatePicker min={min} label='max' value={max} onChange={setMax} />
+  <DatePicker 
+    label='Start Date'
+    required 
+    min={min}
+    max={max}
+  />
+  <Button primary type='submit'>Submit</Button>
+</form>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        DatePicker,
+        Button,
+        InputField,
+        Label,
+      },
+    }}
+  />
+)

package/src/lib/components/date-picker/storybook/date-picker.stories.mdx

@@ -0,0 +1,133 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { AlertBanner } from 'components/alert-banner'
+import { 
+  DatePickerExample, 
+  DatePickerFormatExample,
+  DatePickerCustomHandleExample,
+  DatePickerRangeExample,
+  DatePickerControlledExample,
+  DatePickerControlledOpenExample,
+  DatePickerWithExtraStuffInTheCalendar,
+  DatePickerFactoryExample,
+  DatePickerAvailableDatesExample,
+  DatePickerFormExample,
+} from './components'
+import { DatePicker } from '../date-picker'
+
+<Meta title="Components/Date Picker"/>
+
+# Date Picker
+
+Date Pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Edvisor. For more details refer to <a href='https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7365&t=Cz5qnAbrJNBJj8b1-0'>figma</a>. 
+
+## How to Use It
+
+```tsx
+import { DatePicker } from '@edvisor/product-language'
+
+<DatePicker />
+```
+
+### Uncontrolled
+
+Drop it into your project uncontrolled.
+
+<DatePickerExample />
+
+### Controlled
+
+Add state to control the date picker. By default the DatePicker takes a string as value. 
+
+<DatePickerControlledExample />
+
+### Familiar HTML Input Interface
+
+Wrap it in a form and mark it required. Pass in a min/max to restrict input to that range.
+
+<DatePickerFormExample />
+
+### Specify Available Dates
+
+In addition to the min/max prop, you can pass in an `isAvailable` callback to apply specific restrictions.
+
+<DatePickerAvailableDatesExample />
+
+## Props
+
+extends `InputHTMLAttributes<HTMLInputElement>` except where described below.
+
+| Prop            | Type                        | Description                                       |
+| --------------- | --------------------------- | ------------------------------------------------- |
+| `value?`        | `string`                    | The date                                          |
+| `defaultValue?` | `string`                    | Provide a value for the uncontrolled component    |
+| `onChange?`     | `(change: string) => void`  | Receive the value when it changes                 |
+| `min?`          | `string`                    | The earliest date the user can choose             |
+| `max?`          | `string`                    | The latest date the user can choose               |
+| `isAvailable?`  | `(date: string) => boolean` | A predicate that determines if a date is disabled |
+
+## Customization
+
+The default is sufficient for most cases, but you can also customize the DatePicker.
+
+### Custom Open/Close
+
+By controlling the open state you can open or close the input from outside.
+
+<DatePickerControlledOpenExample />
+
+### Custom Format
+
+Pass in a format string or a custom formatting function. This only affects the visual format of the data.
+
+<DatePickerFormatExample />
+
+### Custom Input/Handle
+
+The input/handle can be replaced using the Controls slot.
+
+<DatePickerCustomHandleExample />
+
+### Custom Calendar Controls
+
+Children are rendered inside the calendar>
+
+<DatePickerWithExtraStuffInTheCalendar />
+
+### Props
+
+| Prop       | Type                     | Description                                      |
+| ---------- | ------------------------ | ------------------------------------------------ |
+| `isOpen?`  | `boolean`                | Determines if the Calendar is visible            |
+| `onClick?` | `() => void`             | Called when the input/handle is clicked          |
+| `format?`  | `string | DateFormatter` | Called to render the date visually in the handle |
+
+### Slots
+
+| Slot       | Description                                  |
+| ---------- | -------------------------------------------- |
+| `Controls` | Completely replaces the default input/handle |
+| `children` | Adds UI elements inside the Calendar         |
+
+## DatePicker Factory
+
+In all the previous examples, the date picker used string as input and output. You can create a DatePicker for any data type using datePickerFactory. For example, you could use number:
+
+```ts
+const EpochDatePicker = datePickerFactory<number>({
+  toDate: (n) => new Date(n),
+  fromDate: (date) => isDefined(date) ? date.valueOf() : 0,
+  empty: (date) => date.valueOf() === 0,
+})
+```
+
+This makes it relatively easy to use the DatePicker with date libraries like Luxon.
+
+<DatePickerFactoryExample />
+
+## Props
+
+| Prop       | Type                      | Description                                                                        |
+| ---------- | ------------------------- | ---------------------------------------------------------------------------------- |
+| `toDate`   | `(el: T) => Date`         | Maps your type to date                                                             |
+| `fromDate` | `(date: Date) => T`       | Maps date to your type                                                             |
+| `empty`    | `(date: Date) => boolean` | Returns true if you give it the empty element of your type (such as '' for string) |

package/src/lib/components/divider/divider-type-flags.tsx

@@ -0,0 +1,37 @@
+// this file was generated, but it is safe to modify
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+import { Borders } from '@foundations'
+
+const enum DividerType {
+  default = 1,
+  subdued = 2,
+}
+
+type DividerTypes<T> = MappedEnum<typeof DividerType, T>
+
+function toDividerType(n: number): DividerType {
+  switch (n) {
+    case DividerType.default:
+      return DividerType.default
+    case DividerType.subdued:
+      return DividerType.subdued
+    default:
+      return DividerType.default
+  }
+}
+
+const DividerTypeColor = {
+  [DividerType.default]: Borders.Default.Default,
+  [DividerType.subdued]: Borders.Default.Subdued,
+}
+
+export type DivideTypeProps = Partial<RequireOnlyOne<DividerTypes<boolean>>> &
+  PropsWithChildren
+
+export function getColor(props: DivideTypeProps): string {
+  return DividerTypeColor[
+    toDividerType(
+      bitwiseOr([props.default, props.subdued])
+    )
+  ]
+}

package/src/lib/components/divider/divider.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react'
+import { Divider } from './index'
+import { Borders } from '@foundations'
+
+describe('Divider Tests', () => {
+  describe('Divider Tests', () => {
+    it('should render the Divider with default color', async () => {
+      render(
+        <Divider/>
+      )
+
+      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
+      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Default}`)
+    })
+
+    it('should render the Divider with default color using parameter', async () => {
+      render(
+        <Divider default/>
+      )
+
+      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
+      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Default}`)
+    })
+
+    it('should render the Divider with subdued color', async () => {
+      render(
+        <Divider subdued/>
+      )
+
+      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
+      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Subdued}`)
+    })
+  })
+})