@edvisor/product-language 0.10.2 → 0.10.3

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

@@ -1,210 +0,0 @@
-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 type='button' onClick={handleClick}>
-      {direction === 'right' ? (
-        <IconMinor.ArrowRight />
-      ) : (
-        <IconMinor.ArrowLeft />
-      )}
-    </button>
-  )
-}

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

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

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

@@ -1,259 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

@@ -1,37 +0,0 @@
-// 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

@@ -1,34 +0,0 @@
-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}`)
-    })
-  })
-})