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

package/src/components/Calendar/useCalendar.ts

@@ -1,190 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { useDidMount } from 'hooks/useDidMount'
-import toArray from 'utils/toolset/toArray'
-
-import DateHelper, { TODAY } from './Date.helper'
-import type { useCalendarProps, useCalendarReturn, RenderableMonth } from './Calendar.types'
-
-function useCalendar(props: useCalendarProps): useCalendarReturn {
-  const { constraints, onSelect, mode = 'single' } = props
-  const amountOfMonthsToRender = mode == 'single' ? 1 : 2
-
-  const didMount = useDidMount()
-  const [selected, setSelected] = useState<ReturnType<typeof getSelectionPair>>(() =>
-    getSelectionPair(props.selected)
-  )
-  const [renderableMonths, setRenderableMonths] = useState<ReturnType<typeof getRenderableMonths>>(
-    () => {
-      const month = props.month != null ? props.month : TODAY.getMonth()
-      const year = props.year != null ? props.year : TODAY.getYear()
-
-      return getRenderableMonths(year, month, amountOfMonthsToRender)
-    }
-  )
-
-  /**
-   * Set the month to be rendered (or initial month when calendar is in range mode).
-   * @param {Object} args
-   * @param {number} [args.month] - Initial month to be rendered, if not provided, the current initial month will be used.
-   * @param {number} [args.year] - Initial year to be rendered, if not provided, the current initial month will be used.
-   */
-  function set(args: { month?: number; year?: number }) {
-    const [initialMonth] = renderableMonths
-    const date = new Date(args.year ?? initialMonth.year, args.month ?? initialMonth.month)
-
-    setRenderableMonths(
-      getRenderableMonths(date.getFullYear(), date.getMonth(), amountOfMonthsToRender)
-    )
-  }
-
-  /**
-   * Select day or day range.
-   * @param range `null` to clear selection, selection range start, or an array with selection start and end.
-   */
-  function select(range: useCalendarProps['selected']) {
-    const [start, end] = getSelectionPair(range)
-
-    function getSelectionBoundary(boundary?: string | number | null): string | null {
-      if (boundary != null) {
-        return DateHelper(boundary).toString()
-      }
-
-      return null
-    }
-
-    setSelected([start, end])
-
-    if (didMount) {
-      // prevent calling onSelect when initialized with value
-      onSelect?.([getSelectionBoundary(start), getSelectionBoundary(end)])
-    }
-  }
-
-  /**
-   * Clear calendar selection.
-   */
-  function clear() {
-    select([null, null])
-  }
-
-  useEffect(
-    function onMonthOrYearPropsChange() {
-      set({
-        month: props.month,
-        year: props.year,
-      })
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.month, props.year]
-  )
-
-  useEffect(
-    function onSelectedPropChange() {
-      const newSelected = getSelectionPair(props.selected)
-
-      if (newSelected[0] != selected[0] || newSelected[1] != selected[1]) {
-        setSelected(newSelected)
-      }
-    },
-    // we just intend to update the internal state when the prop changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.selected]
-  )
-
-  return {
-    mode,
-    months: renderableMonths,
-    selected,
-    constraints: toArray(constraints || []),
-    clear,
-    set,
-    select,
-  }
-}
-
-const DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000
-
-/**
- * Generate the whole grid of days,
- * @param {number} year
- * @param {number }month
- * @returns {RenderableMonth}
- */
-export function getRenderableMonth(year: number, month: number): RenderableMonth {
-  const date = DateHelper(Date.UTC(year, month))
-
-  const firstDayOfTheWeek = date.getWeekday()
-  const totalDaysInMonth = 32 - new Date(Date.UTC(year, month, 32)).getUTCDate()
-
-  const days = []
-
-  /**
-   * Filling days of previous month.
-   * If the month does not start on Sunday, then we need to generate only the days of
-   * the previous month to fill out the grid.
-   */
-  for (let index = firstDayOfTheWeek; index > 0; index--) {
-    days.push(DateHelper(date.getTime() - index * DAY_IN_MILLISECONDS))
-  }
-
-  // Filling days of current month
-  for (let index = 0; index < totalDaysInMonth; index++) {
-    days.push(DateHelper(date.getTime() + index * DAY_IN_MILLISECONDS))
-  }
-
-  /**
-   * Filling days of next month, just enough to complete the grid.
-   */
-  for (let index = 0; (firstDayOfTheWeek + totalDaysInMonth + index) % 7 != 0; index++) {
-    days.push(DateHelper(date.getTime() + (totalDaysInMonth + index) * DAY_IN_MILLISECONDS))
-  }
-
-  return {
-    month: date.getMonth(),
-    year: date.getYear(),
-    days,
-  }
-}
-
-/**
- *
- * @param {number} year
- * @param {number} month
- * @param {number?} amount - number of months to be generated. Default value is 1.
- * @returns
- */
-export function getRenderableMonths(
-  year: number,
-  month: number,
-  amount = 1
-): ReturnType<typeof getRenderableMonth>[] {
-  if (month < 0 || month > 11) {
-    throw new Error(
-      'Invalid month! Please, provide a number between 0 (January) and 11 (December).'
-    )
-  }
-
-  // TODO: validate accepted year range?
-
-  const months = new Array<ReturnType<typeof getRenderableMonth>>()
-
-  for (let i = 0; i < amount; i++) {
-    months.push(getRenderableMonth(year, month + i))
-  }
-
-  return months
-}
-
-export function getSelectionPair(
-  selected?: null | [string | number | null, string | number | null]
-): [number | null, number | null] {
-  const [start, end] = toArray(selected)
-
-  return [
-    start != null ? DateHelper(start).getTime() : null,
-    end != null ? DateHelper(end ?? start).getTime() : null,
-  ]
-}
-
-export default useCalendar

package/src/components/Calendar/usePickerMode.ts

@@ -1,48 +0,0 @@
-import { useReducer } from 'react'
-
-import DayPicker from './Pickers/DayPicker'
-import MonthPicker from './Pickers/MonthPicker'
-import YearPicker from './Pickers/YearPicker'
-
-import type {
-  PickerMode,
-  PickerModeAction,
-  usePickerModeProps,
-  usePickerModeReturn,
-} from './Calendar.types'
-
-function usePickerMode(props?: usePickerModeProps): usePickerModeReturn {
-  function reducer(state: PickerMode, action: PickerModeAction) {
-    switch (action.type) {
-      case 'set-mode':
-        return action.payload
-      case 'toggle-mode':
-        if (state != action.payload) {
-          return action.payload
-        }
-
-        return 'day-picker'
-      default:
-        return state
-    }
-  }
-
-  const [mode, dispatch] = useReducer(reducer, props?.mode || 'day-picker')
-
-  return {
-    get() {
-      return mode
-    },
-    is(other: PickerMode) {
-      return other != null && other === mode
-    },
-    dispatch,
-    Picker: {
-      'day-picker': DayPicker,
-      'month-picker': MonthPicker,
-      'year-picker': YearPicker,
-    }[mode],
-  }
-}
-
-export default usePickerMode

package/src/components/Card/Card.stories.tsx

@@ -1,117 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import Card from './Card'
-import generator from '../../tests/generator'
-import Status from 'utils/types/Status'
-
-import type { CardProps } from './Card'
-
-export default {
-  title: 'Components/Card',
-  component: Card,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      options: ['light', 'dark'],
-      control: {
-        type: 'select',
-      },
-    },
-    flagged: {
-      description: 'Should show the vertical line on the left side of the card',
-      control: {
-        type: 'boolean',
-      },
-    },
-    theme: {
-      table: {
-        disable: true,
-      },
-    },
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export const Playground: Story<CardProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Card {...args} style={{ width: 416 }} />
-    </div>
-  )
-}
-
-Playground.args = {
-  status: Status.Neutral,
-  children: (
-    <>
-      <Card.Title leading={<span>&clubs;</span>}>Card Title</Card.Title>
-      <Card.Subtitle>Card Subtitle</Card.Subtitle>
-      <Card.Separator />
-      <Card.Body>{generator.sentence({ paragraphs: 5 })}</Card.Body>
-    </>
-  ),
-}
-
-export const Default: Story<CardProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Card {...args} style={{ width: 416 }}>
-        <Card.Title leading={<span>&clubs;</span>}>Card Title</Card.Title>
-        <Card.Subtitle>Card Subtitle</Card.Subtitle>
-        <Card.Body>{generator.sentence({ paragraphs: 5 })}</Card.Body>
-      </Card>
-    </div>
-  )
-}
-
-Default.args = {
-  status: Status.Neutral,
-}
-
-export const TitleOnly: Story<CardProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Card {...args} style={{ width: 416 }}>
-        <Card.Title leading={<span>&clubs;</span>}>Card Title</Card.Title>
-        <Card.Separator />
-        <Card.Body>{generator.sentence({ paragraphs: 5 })}</Card.Body>
-      </Card>
-      <Card {...args} style={{ width: 416 }}>
-        <Card.Title leading={<span>&clubs;</span>}>Card Title</Card.Title>
-
-        <Card.Body>{generator.sentence({ paragraphs: 5 })}</Card.Body>
-      </Card>
-    </div>
-  )
-}
-
-TitleOnly.args = {
-  status: Status.Neutral,
-}
-
-export const Flagged: Story<CardProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Card flagged style={{ width: 416 }} {...args}>
-        <Card.Body>{generator.sentence({ paragraphs: 5 })}</Card.Body>
-      </Card>
-    </div>
-  )
-}
-
-Flagged.args = {
-  status: Status.Neutral,
-}

package/src/components/Card/Card.test.tsx

@@ -1,139 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import * as stories from './Card.stories'
-import Card from './Card'
-import generator from '../../tests/generator'
-import renderer, { screen } from '../../tests/renderer'
-import Status from 'utils/types/Status'
-
-import type { CardProps } from './Card'
-
-const { Playground } = composeStories(stories)
-
-const setup = ({ ...overrides }: Partial<CardProps> = {}) => {
-  return renderer(<Playground {...overrides} />).render()
-}
-
-describe('Card', () => {
-  it('renders correctly', () => {
-    const props = {
-      leading: generator.word({ length: 1 }),
-      title: generator.sentence(),
-      subtitle: generator.sentence(),
-      body: generator.sentence(),
-    }
-
-    setup({
-      children: (
-        <>
-          <Card.Title leading={<span>{props.leading}</span>}>{props.title}</Card.Title>
-          <Card.Subtitle>{props.subtitle}</Card.Subtitle>
-          <Card.Separator />
-          <Card.Body>{props.body}</Card.Body>
-        </>
-      ),
-    })
-
-    screen.getByText(props.leading)
-    screen.getByText(props.title)
-    screen.getByText(props.subtitle)
-    screen.getByText(props.body)
-
-    expect(screen.queryByTestId('card-flag')).not.toBeInTheDocument()
-  })
-
-  describe('with flag', () => {
-    it('renders success correctly', () => {
-      const props = {
-        title: generator.sentence(),
-        subtitle: generator.sentence(),
-        body: generator.sentence(),
-      }
-
-      setup({
-        flagged: true,
-        status: Status.Success,
-        children: (
-          <>
-            <Card.Title>{props.title}</Card.Title>
-            <Card.Subtitle>{props.subtitle}</Card.Subtitle>
-            <Card.Separator />
-            <Card.Body>{props.body}</Card.Body>
-          </>
-        ),
-      })
-
-      screen.getByLabelText('success')
-    })
-
-    it('renders warn correctly', () => {
-      const props = {
-        title: generator.sentence(),
-        subtitle: generator.sentence(),
-        body: generator.sentence(),
-      }
-
-      setup({
-        flagged: true,
-        status: Status.Warn,
-        children: (
-          <>
-            <Card.Title>{props.title}</Card.Title>
-            <Card.Subtitle>{props.subtitle}</Card.Subtitle>
-            <Card.Separator />
-            <Card.Body>{props.body}</Card.Body>
-          </>
-        ),
-      })
-
-      screen.getByLabelText('warn')
-    })
-
-    it('renders danger correctly', () => {
-      const props = {
-        title: generator.sentence(),
-        subtitle: generator.sentence(),
-        body: generator.sentence(),
-      }
-
-      setup({
-        flagged: true,
-        status: Status.Danger,
-        children: (
-          <>
-            <Card.Title>{props.title}</Card.Title>
-            <Card.Subtitle>{props.subtitle}</Card.Subtitle>
-            <Card.Separator />
-            <Card.Body>{props.body}</Card.Body>
-          </>
-        ),
-      })
-
-      screen.getByLabelText('danger')
-    })
-
-    it('renders neutral correctly', () => {
-      const props = {
-        title: generator.sentence(),
-        subtitle: generator.sentence(),
-        body: generator.sentence(),
-      }
-
-      setup({
-        flagged: true,
-        status: Status.Neutral,
-        children: (
-          <>
-            <Card.Title>{props.title}</Card.Title>
-            <Card.Subtitle>{props.subtitle}</Card.Subtitle>
-            <Card.Separator />
-            <Card.Body>{props.body}</Card.Body>
-          </>
-        ),
-      })
-
-      screen.getByLabelText('neutral')
-    })
-  })
-})

package/src/components/Card/Card.tsx

@@ -1,106 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react'
-
-import { getToken as token } from 'theming'
-import CardTitle, { CardTitleWrapper } from './CardTitle'
-import conditional, { whenProps } from 'tools/conditional'
-import font from 'styles/font'
-import Status from 'utils/types/Status'
-import styled, { css } from 'styled-components'
-
-export interface CardProps extends HTMLAttributes<HTMLElement> {
-  children: ReactNode
-  status?: Status
-  flagged?: boolean
-}
-
-const CardSubtitle = styled.div`
-  padding: 0 ${token('card-padding-x')} ${token('card-padding-y')};
-
-  color: ${token('card-color')};
-  font-weight: ${token('card-subtitle-font-weight')};
-  font-size: ${token('card-subtitle-font-size')};
-`
-
-const CardSeparator = styled.hr`
-  display: block;
-  height: 1px;
-  margin: 0;
-
-  border: 0;
-  border-bottom: 1px solid ${token('card-separator-background')};
-`
-
-const CardBody = styled.div`
-  padding: ${token('card-padding-y')} ${token('card-padding-x')};
-`
-
-const Wrapper = styled.div`
-  ${font({})}
-
-  display: flex;
-  flex-direction: row;
-
-  color: ${token('card-color')};
-
-  ${CardTitleWrapper} + ${CardSubtitle} {
-    margin-top: ${token('space-xs')};
-  }
-
-  ${CardTitleWrapper} + ${CardSeparator} {
-    margin-top: ${token('card-padding-y')};
-  }
-
-  border: 1px solid ${token('card-border-color')};
-  border-radius: ${token('card-border-radius')};
-  background: ${token('card-background')};
-`
-
-const Container = styled.div<{ flagged: boolean }>`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  line-height: ${token('card-font-height')};
-
-  ${({ flagged }) =>
-    flagged &&
-    css`
-      ${CardSeparator} {
-        margin-left: calc(-1 * ${token('space-s')});
-      }
-    `}
-`
-
-const Flag = styled.span<{ status: Status }>`
-  display: block;
-  flex: 0 0 ${token('card-flag-width')};
-
-  background: ${conditional({
-    'card-flag-background-neutral': whenProps({ status: Status.Neutral }),
-    'card-flag-background-danger': whenProps({ status: Status.Danger }),
-    'card-flag-background-warning': whenProps({ status: Status.Warn }),
-    'card-flag-background-success': whenProps({ status: Status.Success }),
-  })};
-  border-radius: ${token('card-border-radius')} 0 0 ${token('card-border-radius')};
-`
-
-function Card({
-  flagged = false,
-  status = Status.Neutral,
-  children,
-  ...others
-}: CardProps): JSX.Element {
-  return (
-    <Wrapper {...others}>
-      {flagged && <Flag status={status} aria-label={status} />}
-      <Container flagged={flagged}>{children}</Container>
-    </Wrapper>
-  )
-}
-
-Card.Title = CardTitle
-Card.Subtitle = CardSubtitle
-Card.Separator = CardSeparator
-Card.Body = CardBody
-
-export default Card

package/src/components/Card/CardTitle.tsx

@@ -1,43 +0,0 @@
-import React, { ReactNode, HTMLAttributes } from 'react'
-
-import styled from 'styled-components'
-import { getToken as token } from 'theming'
-
-export interface CardTitleProps extends HTMLAttributes<HTMLElement> {
-  leading?: ReactNode
-}
-
-const StyledSpan = styled.span`
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-
-  pointer-events: none;
-`
-
-const Leading = styled(StyledSpan)`
-  margin-right: ${token('space-xs')};
-`
-
-const Wrapper = styled.div`
-  padding: ${token('card-padding-y')} ${token('card-padding-x')} 0;
-
-  color: ${token('card-color')};
-  font-weight: ${token('card-title-font-weight')};
-  font-size: ${token('card-title-font-size')};
-  line-height: ${token('card-title-font-height')};
-`
-
-function CardTitle({ children, leading, ...others }: CardTitleProps): JSX.Element {
-  return (
-    <Wrapper {...others}>
-      {leading && <Leading>{leading}</Leading>}
-      {children}
-    </Wrapper>
-  )
-}
-
-export { Wrapper as CardTitleWrapper }
-
-export default CardTitle

package/src/components/Card/index.ts

@@ -1,2 +0,0 @@
-export { default as Card } from './Card'
-export type { CardProps } from './Card'