@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/styles/hoverable.tsx

@@ -1,30 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import interleave from 'utils/toolset/interleave'
-import type { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
-
-/**
- * Add basic CSS style wrapping block for `:hover` state; it includes check for non-disabled (`:enabled` or not `.is-disabled`) elements.
- * It returns an array to allow handling of nested interpolation
- * @param {ReadonlyArray<string> | Array<string>} strings - String parts for the interpolation.
- * @param {any[]} args - Interpolated items.
- * @returns {any[]}
- */
-function hoverableStyle(
-  strings?: ReadonlyArray<string> | Array<string>,
-  ...args: any[]
-): InterpolatedStyle {
-  const safeStrings = (strings || []).concat() // ReadonlyArray -> Array
-
-  return [
-    `
-    &:not(.is-disabled):not(:disabled) {
-      &:hover {`,
-    ...(interleave(safeStrings, args) as InterpolatedStyle),
-    `
-      }
-    }
-  `,
-  ]
-}
-
-export default hoverableStyle

package/src/styles/transition.tsx

@@ -1,25 +0,0 @@
-interface TransitionStyleOptions {
-  property?: string
-  timingFunction?: string
-  duration?: string
-}
-
-/**
- * Add basic CSS style for default transition parameters
- * @returns {string}
- */
-function transitionStyle(options?: TransitionStyleOptions): string {
-  // TODO: add parameter to type of transition
-
-  return `
-    transition-property: ${
-      options?.property ||
-      'background, border-color, box-shadow, color, fill, left, stroke, transform, opacity'
-    };
-    transition-timing-function: ${options?.timingFunction || 'cubic-bezier(0.4, 0, 0.2, 1)'};
-    transition-duration: ${options?.duration || '450ms'};
-    transition-delay: 0ms;
-  `
-}
-
-export default transitionStyle

package/src/styles/typography.test.ts

@@ -1,93 +0,0 @@
-import typography, { typographyProperties, TypographyVariants } from './typography'
-import font from './font'
-import { getInterpolatedStyles } from '../testing/getInterpolatedStyles'
-
-jest.mock('./font')
-
-describe('typography', () => {
-  describe('variant', () => {
-    it.each(Object.keys(typographyProperties))(
-      'correctly handles for variant %s',
-      (propertiesKey) => {
-        const variant = propertiesKey as TypographyVariants
-        getInterpolatedStyles(typography(variant))
-
-        expect(font).toHaveBeenCalledWith({
-          family: typographyProperties[variant].fontFamily,
-          size: typographyProperties[variant].fontSize,
-          height: typographyProperties[variant].lineHeight,
-          weight: typographyProperties[variant].fontWeight,
-          transform: typographyProperties[variant].textTransform,
-          color: typographyProperties[variant].color,
-        })
-      }
-    )
-
-    it('correctly handles truthy invalid token defaulting to body', () => {
-      // @ts-expect-error "heading-99" not assignable to TypograhyVariants
-      getInterpolatedStyles(typography('heading-99'))
-
-      expect(font).toHaveBeenCalledWith({
-        family: typographyProperties['body'].fontFamily,
-        size: typographyProperties['body'].fontSize,
-        height: typographyProperties['body'].lineHeight,
-        weight: typographyProperties['body'].fontWeight,
-        transform: typographyProperties['body'].textTransform,
-        color: typographyProperties['body'].color,
-      })
-    })
-
-    it('correctly handles falsy invalid token defaulting to body', () => {
-      // @ts-expect-error null not assignable to TypograhyVariants
-      getInterpolatedStyles(typography(null))
-
-      expect(font).toHaveBeenCalledWith({
-        family: typographyProperties['body'].fontFamily,
-        size: typographyProperties['body'].fontSize,
-        height: typographyProperties['body'].lineHeight,
-        weight: typographyProperties['body'].fontWeight,
-        transform: typographyProperties['body'].textTransform,
-        color: typographyProperties['body'].color,
-      })
-    })
-
-    it('correctly handles function variant', () => {
-      const variantFn = jest.fn(() => 'caption')
-      getInterpolatedStyles(typography(variantFn))
-
-      expect(variantFn).toHaveBeenCalledWith({ theme: expect.anything() })
-
-      expect(font).toHaveBeenCalledWith({
-        family: typographyProperties['caption'].fontFamily,
-        size: typographyProperties['caption'].fontSize,
-        height: typographyProperties['caption'].lineHeight,
-        weight: typographyProperties['caption'].fontWeight,
-        transform: typographyProperties['caption'].textTransform,
-        color: typographyProperties['caption'].color,
-      })
-    })
-  })
-
-  describe('options', () => {
-    it('supports color', () => {
-      getInterpolatedStyles(typography('body', { color: 'color-primary' }))
-
-      expect(font).toHaveBeenCalledWith(expect.objectContaining({ color: 'color-primary' }))
-    })
-
-    it('ignores received color if it is a typography property', () => {
-      getInterpolatedStyles(typography('link', { color: 'color-primary' }))
-
-      expect(font).toHaveBeenCalledWith(expect.objectContaining({ color: 'color-accent' }))
-    })
-
-    it('supports italic', () => {
-      const styles = getInterpolatedStyles(typography('body', { italic: true }))
-
-      const el = document.createElement('div')
-      el.setAttribute('style', styles)
-
-      expect(el).toHaveStyle('font-style: italic;')
-    })
-  })
-})

package/src/styles/typography.ts

@@ -1,190 +0,0 @@
-import { css, ThemedStyledProps } from 'styled-components'
-import type { FlattenInterpolation } from 'styled-components'
-import { isFunction } from '@loadsmart/utils-function'
-
-import conditional from 'tools/conditional'
-import type { CustomTheme, ThemeToken } from 'theming'
-import fontStyle from './font'
-
-export type TypographyOptions = {
-  italic?: boolean
-  color?: ThemeToken
-}
-
-type PropertiesToken = {
-  fontSize: ThemeToken
-  lineHeight: ThemeToken
-  fontWeight: ThemeToken
-  fontFamily?: ThemeToken
-  textTransform?: 'none' | 'uppercase'
-  color?: ThemeToken
-}
-
-export type TypographyVariants =
-  | 'heading-lg'
-  | 'heading-md'
-  | 'heading-md-bold'
-  | 'heading-sm'
-  | 'heading-sm-bold'
-  | 'body'
-  | 'body-bold'
-  | 'caption'
-  | 'caption-bold'
-  | 'number-sm'
-  | 'number-md'
-  | 'button-sm'
-  | 'button-md'
-  | 'button-lg'
-  | 'table-header-sm'
-  | 'table-header-md'
-  | 'chips-sm'
-  | 'link'
-
-type TypographyProperties = Record<TypographyVariants, PropertiesToken>
-
-export const typographyProperties: TypographyProperties = {
-  'heading-lg': {
-    fontSize: 'font-size-1',
-    lineHeight: 'font-height-1',
-    fontWeight: 'font-weight-bold',
-  },
-  'heading-md': {
-    fontSize: 'font-size-2',
-    lineHeight: 'font-height-2',
-    fontWeight: 'font-weight-medium',
-  },
-  'heading-md-bold': {
-    fontSize: 'font-size-2',
-    lineHeight: 'font-height-2',
-    fontWeight: 'font-weight-bold',
-  },
-  'heading-sm': {
-    fontSize: 'font-size-3',
-    lineHeight: 'font-height-3',
-    fontWeight: 'font-weight-medium',
-  },
-  'heading-sm-bold': {
-    fontSize: 'font-size-3',
-    lineHeight: 'font-height-3',
-    fontWeight: 'font-weight-bold',
-  },
-  body: {
-    fontSize: 'font-size-4',
-    lineHeight: 'font-height-3',
-    fontWeight: 'font-weight-medium',
-  },
-  'body-bold': {
-    fontSize: 'font-size-4',
-    lineHeight: 'font-height-3',
-    fontWeight: 'font-weight-bold',
-  },
-  caption: {
-    fontSize: 'font-size-5',
-    lineHeight: 'font-height-3',
-    fontWeight: 'font-weight-medium',
-  },
-  'caption-bold': {
-    fontSize: 'font-size-5',
-    lineHeight: 'font-height-3',
-    fontWeight: 'font-weight-bold',
-  },
-  'number-sm': {
-    fontFamily: 'font-family-monospace',
-    fontSize: 'font-size-5',
-    lineHeight: 'font-height-2',
-    fontWeight: 'font-weight-medium',
-  },
-  'number-md': {
-    fontFamily: 'font-family-monospace',
-    fontSize: 'font-size-4',
-    lineHeight: 'font-height-2',
-    fontWeight: 'font-weight-medium',
-  },
-  'button-sm': {
-    fontSize: 'font-size-5',
-    lineHeight: 'font-height-1',
-    fontWeight: 'font-weight-bold',
-    textTransform: 'uppercase',
-  },
-  'button-md': {
-    fontSize: 'font-size-4',
-    lineHeight: 'font-height-1',
-    fontWeight: 'font-weight-bold',
-    textTransform: 'uppercase',
-  },
-  'button-lg': {
-    fontSize: 'font-size-3',
-    lineHeight: 'font-height-1',
-    fontWeight: 'font-weight-bold',
-    textTransform: 'uppercase',
-  },
-  'table-header-sm': {
-    fontSize: 'font-size-5',
-    lineHeight: 'font-height-2',
-    fontWeight: 'font-weight-bold',
-  },
-  'table-header-md': {
-    fontSize: 'font-size-4',
-    lineHeight: 'font-height-2',
-    fontWeight: 'font-weight-bold',
-    textTransform: 'uppercase',
-  },
-  'chips-sm': {
-    fontSize: 'font-size-6',
-    lineHeight: 'font-height-3',
-    fontWeight: 'font-weight-bold',
-    textTransform: 'uppercase',
-  },
-  link: {
-    fontSize: 'font-size-4',
-    lineHeight: 'font-height-2',
-    fontWeight: 'font-weight-medium',
-    color: 'color-accent',
-  },
-}
-
-const DEFAULT_VARIANT: TypographyVariants = 'body'
-
-function getPropertiesByVariant(variant: TypographyVariants) {
-  return variant in typographyProperties
-    ? typographyProperties[variant]
-    : typographyProperties[DEFAULT_VARIANT]
-}
-
-type StyledTemplate<P> = FlattenInterpolation<ThemedStyledProps<P, CustomTheme>>
-
-/**
- * Standard styles for screen-rendered text
- * @param {TypographyVariants} variant Name of the variant
- * @param {TypographyOptions} options Add boldness, italics and color
- * @returns {FlattenInterpolation}
- */
-function typography<P>(
-  variant: TypographyVariants | ((props: P) => string) = DEFAULT_VARIANT,
-  options?: TypographyOptions
-): StyledTemplate<P> | ((props: P) => StyledTemplate<P>) {
-  if (isFunction(variant)) {
-    return ((props: P) => typography(variant(props) as TypographyVariants, options)) as (
-      props: P
-    ) => StyledTemplate<P>
-  }
-
-  const properties = getPropertiesByVariant(variant)
-
-  return css`
-    ${fontStyle({
-      family: properties.fontFamily,
-      height: properties.lineHeight,
-      size: properties.fontSize,
-      weight: properties.fontWeight,
-      transform: properties.textTransform,
-      color: properties.color || options?.color,
-    })}
-
-    ${conditional({
-      'font-style: italic;': options?.italic,
-    })};
-  `
-}
-
-export default typography

package/src/testing/DatePickerEvent/DatePickerEvent.ts

@@ -1,117 +0,0 @@
-/* eslint-disable */
-import { act, queries, fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/react'
-// find the date picker container from its input field 🤷
-function getContainerFromInput(input: HTMLElement): HTMLElement {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return input.parentNode!.parentNode!.parentNode!.parentNode as HTMLElement
-}
-
-/**
- * Expand the `DatePicker` calendar, if it not already expanded.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<void>}
- */
-async function expand(input: HTMLElement): Promise<void> {
-  const datePickerContainer = getContainerFromInput(input)
-
-  // if menu is rendered, then the select is already expanded
-  if (queries.queryByRole(datePickerContainer, 'menu')) {
-    return
-  }
-
-  fireEvent.click(input)
-
-  await waitFor(() => {
-    expect(queries.getByRole(datePickerContainer, 'menu')).toBeInTheDocument()
-  })
-}
-
-/**
- * Collapse the `DatePicker` calendar, if it not already collapsed.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<void>}
- */
-async function collapse(input: HTMLElement): Promise<void> {
-  const datePickerContainer = getContainerFromInput(input)
-
-  // if menu is not rendered, then the select is already collapsed
-  if (!queries.queryByRole(datePickerContainer, 'menu')) {
-    return
-  }
-
-  fireEvent.click(queries.getByText(datePickerContainer, 'Close'))
-
-  await waitFor(() => {
-    expect(queries.queryByRole(datePickerContainer, 'menu')).not.toBeInTheDocument()
-  })
-}
-
-/**
- * Pick (select)  the provided day in the current month/year.
- * Notice that we programatically expand the `DatePicker` calendar before picking the date.
- * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<void>}
- */
-async function pick(day: string, input: HTMLElement): Promise<void> {
-  const datePickerContainer = getContainerFromInput(input)
-
-  await expand(input)
-
-  act(() => {
-    input.focus()
-  })
-
-  const dayElement = queries.getByLabelText(datePickerContainer, day)
-
-  if (dayElement && dayElement.getAttribute('aria-checked') == 'false') {
-    fireEvent.click(dayElement)
-  }
-
-  await collapse(input)
-}
-
-/**
- * Clear the selection, if there are any options selected.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<void>}
- */
-async function clear(input: HTMLElement): Promise<void> {
-  const datePickerContainer = getContainerFromInput(input)
-
-  const clearButton = queries.getByLabelText(datePickerContainer, 'Clear selection')
-
-  fireEvent.click(clearButton)
-
-  await collapse(input)
-}
-
-/**
- * Get options elements currently selected in the `DatePicker` calendar.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<HTMLElement[]>}
- */
-async function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {
-  const datePickerContainer = getContainerFromInput(input)
-
-  await expand(input)
-
-  const selectedDays: HTMLElement[] = queries.queryAllByRole(datePickerContainer, 'checkbox', {
-    checked: true,
-  })
-
-  await collapse(input)
-
-  return selectedDays
-}
-
-const datePickerEvent = {
-  getContainer: getContainerFromInput,
-  expand,
-  collapse,
-  pick,
-  clear,
-  getSelectedDates,
-}
-
-export default datePickerEvent

package/src/testing/DatePickerEvent/DateRangePickerEvent.ts

@@ -1,83 +0,0 @@
-/* eslint-disable */
-import { queries } from '@testing-library/react'
-
-import DatePickerEvent from './DatePickerEvent'
-
-/**
- * Expand the `DatePicker` calendar, if it not already expanded.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<void>}
- */
-async function expand(input: HTMLElement): Promise<void> {
-  await DatePickerEvent.expand(input)
-}
-
-/**
- * Collapse the `DatePicker` calendar, if it not already collapsed.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<void>}
- */
-async function collapse(input: HTMLElement): Promise<void> {
-  await DatePickerEvent.collapse(input)
-}
-
-/**
- * Pick (select)  the provided day in the current month/year.
- * Notice that we programatically expand the `DatePicker` calendar before picking the date.
- * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<void>}
- */
-async function pick(range: [string | null, string | null], input: HTMLElement): Promise<void> {
-  const dateRangePickerContainer = DatePickerEvent.getContainer(input)
-
-  await expand(input)
-
-  const [rangeStart, rangeEnd] = range
-
-  if (rangeStart != null) {
-    const dateRangeStartInput = queries.getByTestId(
-      dateRangePickerContainer,
-      'input-date-range-start'
-    )
-
-    await DatePickerEvent.pick(rangeStart, dateRangeStartInput)
-  }
-
-  if (rangeEnd != null) {
-    const dateRangeEndInput = queries.getByTestId(dateRangePickerContainer, 'input-date-range-end')
-
-    await DatePickerEvent.pick(rangeEnd, dateRangeEndInput)
-  }
-
-  await collapse(input)
-}
-
-/**
- * Clear the selection, if there are any options selected.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<void>}
- */
-async function clear(input: HTMLElement): Promise<void> {
-  await DatePickerEvent.clear(input)
-}
-
-/**
- * Get options elements currently selected in the `DatePicker` calendar.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`
- * @returns {Promise<HTMLElement[]>}
- */
-async function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {
-  return DatePickerEvent.getSelectedDates(input)
-}
-
-export const dateRangePickerEvent = {
-  getContainer: DatePickerEvent.getContainer,
-  expand,
-  collapse,
-  pick,
-  clear,
-  getSelectedDates,
-}
-
-export default dateRangePickerEvent

package/src/testing/DatePickerEvent/index.ts

@@ -1,2 +0,0 @@
-export { default as DatePickerEvent } from './DatePickerEvent'
-export { default as DateRangePickerEvent } from './DateRangePickerEvent'

package/src/testing/DragDropFileEvent/DragDropFileEvent.ts

@@ -1,56 +0,0 @@
-import { createEvent, fireEvent } from '@testing-library/react'
-
-import toArray from 'utils/toolset/toArray'
-
-/**
- * Get the input dropzone, which is the input parent (label).
- * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component
- */
-const getDropZoneFromInput = (input: HTMLInputElement): HTMLLabelElement =>
-  input.parentNode as HTMLLabelElement
-
-/**
- * Simulates the onDragOver event on the drop zone.
- * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component
- */
-const dragOver = (input: HTMLInputElement) => {
-  const dropzone = getDropZoneFromInput(input)
-
-  const dragOverEvent = createEvent.dragOver(dropzone)
-
-  fireEvent(dropzone, dragOverEvent)
-}
-
-/**
- * Simulates the onDragLeave event on the drop zone.
- * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component
- */
-const dragLeave = (input: HTMLInputElement) => {
-  const dropzone = getDropZoneFromInput(input)
-
-  const dragLeaveEvent = createEvent.dragLeave(dropzone)
-
-  fireEvent(dropzone, dragLeaveEvent)
-}
-
-/**
- * Simulates the onDrop event on the drop zone. You can provide a list of files or a single file.
- * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component
- */
-const dropFiles = (input: HTMLInputElement, files: File | File[]) => {
-  const dropzone = getDropZoneFromInput(input)
-
-  const fileDropEvent = createEvent.drop(dropzone)
-
-  Object.defineProperty(fileDropEvent, 'dataTransfer', { value: { files: toArray(files) } })
-
-  fireEvent(dropzone, fileDropEvent)
-}
-
-export const DragDropFileEvent = {
-  dragOver,
-  dragLeave,
-  dropFiles,
-}
-
-export default DragDropFileEvent

package/src/testing/DragDropFileEvent/index.ts

@@ -1 +0,0 @@
-export { default } from './DragDropFileEvent'