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

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -1,165 +0,0 @@
-import React, { useCallback } from 'react'
-import styled from 'styled-components'
-import clsx from 'clsx'
-
-import { getToken as token } from 'theming'
-import { Group } from 'components/Layout'
-import conditional, { whenProps } from 'tools/conditional'
-import isEmpty from 'utils/toolset/isEmpty'
-import toArray from 'utils/toolset/toArray'
-import Toggle from './Toggle'
-import ToggleGroupContext, { SelectableContext, useSelectable } from './ToggleGroupContext'
-
-import type {
-  ToggleGroupOptionProps,
-  ToggleGroupProps,
-  ToggleOption,
-  ToggleGroupOptionValue,
-  SelectedToggleGroupOptions,
-} from './ToggleGroup.types'
-
-const Container = styled(Group)<{ $multiple: boolean; $scale: ToggleGroupProps['scale'] }>`
-  padding: ${conditional({
-    'toggle-group-multiple-padding': whenProps({ $multiple: true }),
-    'toggle-group-single-padding': whenProps({ $multiple: false }),
-  })};
-
-  border-color: ${conditional({
-    'toggle-group-multiple-border-color': whenProps({ $multiple: true }),
-    'toggle-group-single-border-color': whenProps({ $multiple: false }),
-  })};
-
-  border-style: ${conditional({
-    'toggle-group-multiple-border-style': whenProps({ $multiple: true }),
-    'toggle-group-single-border-style': whenProps({ $multiple: false }),
-  })};
-
-  border-width: ${conditional({
-    'toggle-group-multiple-border-width': whenProps({ $multiple: true }),
-    'toggle-group-single-border-width': whenProps({ $multiple: false }),
-  })};
-
-  border-radius: ${conditional({
-    'toggle-group-multiple-border-radius': whenProps({ $multiple: true }),
-    'toggle-group-single-border-radius': whenProps({ $multiple: false }),
-  })};
-
-  &.are-disabled {
-    border-color: ${token('toggle-group-border-color--disabled')};
-  }
-
-  ${Toggle} {
-    height: ${conditional({
-      'toggle-single-height': whenProps({ $multiple: false, $scale: 'default' }),
-      'toggle-single-small-height': whenProps({ $multiple: false, $scale: 'small' }),
-      'toggle-multiple-height': whenProps({ $multiple: true, $scale: 'default' }),
-      'toggle-multiple-small-height': whenProps({ $multiple: true, $scale: 'small' }),
-    })};
-
-    font-size: ${conditional({
-      'toggle-single-font-size': whenProps({ $multiple: false, $scale: 'default' }),
-      'toggle-single-small-font-size': whenProps({ $multiple: false, $scale: 'small' }),
-      'toggle-multiple-font-size': whenProps({ $multiple: true, $scale: 'default' }),
-      'toggle-multiple-small-font-size': whenProps({ $multiple: true, $scale: 'small' }),
-    })};
-  }
-`
-
-function fromValueToSelected(
-  value: ToggleGroupOptionValue | ToggleGroupOptionValue[]
-): ToggleOption[] {
-  const valueAsArray = toArray(value)
-
-  return valueAsArray.map((value) => ({ value }))
-}
-
-function fromSelectedToValue(
-  selected: SelectedToggleGroupOptions,
-  multiple: boolean
-): ToggleGroupOptionValue | ToggleGroupOptionValue[] | null {
-  const pairs = Array.from(selected)
-
-  if (multiple) {
-    const value: ToggleGroupOptionValue[] = []
-    for (const [, option] of pairs) {
-      value.push(option.value)
-    }
-
-    return value
-  } else {
-    if (isEmpty(pairs)) {
-      return null
-    }
-    const [[, option]] = pairs
-    return option.value
-  }
-}
-
-const DEFAULT_SELECTED = [] as ToggleGroupOptionValue[]
-
-function ToggleGroup(props: ToggleGroupProps): JSX.Element {
-  const {
-    disabled = false,
-    multiple = false,
-    scale = 'default',
-    id,
-    name,
-    onChange,
-    options,
-    children,
-    className,
-    ...others
-  } = props
-  const selectable = useSelectable({
-    multiple,
-    selected: fromValueToSelected(props.value ?? DEFAULT_SELECTED),
-    onChange: useCallback(
-      function handleSelectionChange(selected) {
-        onChange?.({
-          target: { id, name: name ?? '', value: fromSelectedToValue(selected, multiple) },
-        })
-      },
-      [id, multiple, name, onChange]
-    ),
-  })
-
-  return (
-    <Container
-      {...others}
-      className={clsx(className, {
-        'are-disabled': disabled,
-      })}
-      id={id}
-      role={multiple ? 'group' : 'radiogroup'}
-      align="center"
-      space="xs"
-      $multiple={multiple}
-      $scale={scale}
-    >
-      <ToggleGroupContext.Provider value={{ scale, disabled }}>
-        <SelectableContext.Provider value={selectable}>
-          {children ??
-            (options || []).map(function renderOption(option: ToggleGroupOptionProps) {
-              const { label, value, ...others } = option
-              const key = String(value)
-
-              return (
-                <Toggle
-                  key={key}
-                  {...others}
-                  disabled={Boolean(disabled || option.disabled)}
-                  value={value}
-                >
-                  {label}
-                </Toggle>
-              )
-            })}
-        </SelectableContext.Provider>
-      </ToggleGroupContext.Provider>
-    </Container>
-  )
-}
-
-ToggleGroup.Option = Toggle
-
-export default ToggleGroup

package/src/components/ToggleGroup/ToggleGroup.types.ts

@@ -1,35 +0,0 @@
-import type { ButtonProps } from 'components/Button'
-import type { HTMLAttributes } from 'react'
-import type { Selectable, SelectableState, SelectableType } from 'hooks/useSelectable'
-import type ColorScheme from 'utils/types/ColorScheme'
-import type EventLike from 'utils/types/EventLike'
-
-export type ToggleGroupType = SelectableType
-
-export type ToggleGroupOptionValue = string | number | boolean
-
-export interface ToggleOption extends Selectable {
-  value: ToggleGroupOptionValue
-}
-
-export type SelectedToggleGroupOptions = SelectableState<ToggleOption>
-
-export interface ToggleGroupOptionProps
-  extends Pick<ButtonProps, 'children' | 'leading' | 'disabled' | 'role'> {
-  value: ToggleGroupOptionValue
-  label?: string
-}
-
-export interface ToggleGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  name?: string
-  options?: ToggleGroupOptionProps[]
-  multiple?: boolean
-  value?: ToggleGroupOptionValue | Array<ToggleGroupOptionValue>
-  disabled?: boolean
-  getToggleProps?: (option: ToggleOption, index: number) => Record<string, unknown>
-  onChange?: (
-    event: EventLike<ToggleGroupOptionValue | Array<ToggleGroupOptionValue> | null>
-  ) => void
-  scale?: 'small' | 'default'
-  scheme?: ColorScheme
-}

package/src/components/ToggleGroup/ToggleGroupContext.ts

@@ -1,13 +0,0 @@
-import React from 'react'
-import { createSelectable } from 'hooks/useSelectable'
-
-import type { ToggleGroupProps, ToggleOption } from './ToggleGroup.types'
-
-const ToggleGroupContext = React.createContext<Pick<ToggleGroupProps, 'scale' | 'disabled'>>({
-  scale: 'default',
-  disabled: false,
-})
-
-export const { SelectableContext, useSelectable } = createSelectable<ToggleOption>()
-
-export default ToggleGroupContext

package/src/components/ToggleGroup/index.ts

@@ -1,3 +0,0 @@
-export { default as ToggleGroup } from './ToggleGroup'
-
-export type { ToggleGroupProps, ToggleGroupOptionProps } from './ToggleGroup.types'

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import Tooltip, { TooltipAlign, TooltipPosition, TooltipProps } from './Tooltip'
-import type { Meta } from '@storybook/react'
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-    },
-    position: {
-      control: {
-        type: 'select',
-        options: TooltipPosition,
-      },
-    },
-    align: {
-      control: {
-        type: 'select',
-        options: TooltipAlign,
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: TooltipProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <Tooltip {...args}>
-          <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-neutral text-neutral-white">
-            ?
-          </span>
-        </Tooltip>
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  message: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
-  position: TooltipPosition.Top,
-  align: TooltipAlign.Start,
-}
-
-export function WithReactNodeAsMessage(): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <Tooltip
-          message={
-            <>
-              A tooltip
-              <br /> with
-              <br /> some
-              <br />
-              line breaks
-              <br />
-            </>
-          }
-        >
-          <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-neutral text-neutral-white">
-            ?
-          </span>
-        </Tooltip>
-      </div>
-    </div>
-  )
-}

package/src/components/Tooltip/Tooltip.test.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-
-import Tooltip from './Tooltip'
-import generator from '../../tests/generator'
-import renderer from '../../tests/renderer'
-
-const setup = ({ ...overrides }) => renderer(<Tooltip message="" {...overrides} />).render()
-
-describe('<Tooltip />', () => {
-  it('should render the tooltip when hovered', () => {
-    const props = {
-      message: generator.sentence(),
-      children: generator.word(),
-    }
-
-    setup(props)
-
-    // eslint-disable-next-line testing-library/no-node-access
-    const child = screen.getByText(props.children)
-    expect(() => screen.getByText(/`${props.message}`/i)).toThrow()
-
-    userEvent.hover(child)
-    screen.getByText(props.message)
-  })
-
-  it('should render the tooltip with a ReactNode when hovered', () => {
-    const props = {
-      message: (
-        <>
-          A tooltip
-          <br /> with
-          <br /> line breaks
-        </>
-      ),
-      children: generator.word(),
-    }
-
-    setup(props)
-
-    // eslint-disable-next-line testing-library/no-node-access
-    const child = screen.getByText(props.children)
-    expect(() => screen.getByText(/A tooltip with line breaks/i)).toThrow()
-
-    userEvent.hover(child)
-    screen.getByText(/A tooltip with line breaks/)
-  })
-})

package/src/components/Tooltip/Tooltip.tsx

@@ -1,185 +0,0 @@
-import React, { HTMLAttributes, ReactNode, useCallback, useState } from 'react'
-import type { PropsWithChildren } from 'react'
-import styled, { css } from 'styled-components'
-
-import type ColorScheme from 'utils/types/ColorScheme'
-import focusable from 'styles/focusable'
-import conditional, { whenProps } from 'tools/conditional'
-import { getToken as token } from 'theming'
-import { Popover, usePopover } from 'components/Popover'
-import typography from 'styles/typography'
-
-import type { PopoverAlign, PopoverPosition } from 'components/Popover'
-
-export enum TooltipPosition {
-  Top = 'top',
-  Bottom = 'bottom',
-  Left = 'left',
-  Right = 'right',
-}
-
-export enum TooltipAlign {
-  Start = 'start',
-  Center = 'center',
-  End = 'end',
-}
-
-export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
-  message: ReactNode
-  scheme?: ColorScheme
-  position?: TooltipPosition | PopoverPosition
-  align?: TooltipAlign | PopoverAlign
-}
-
-type ContainerProps = Pick<TooltipProps, 'scheme'>
-
-const Container = styled.div<ContainerProps>`
-  display: inline-block;
-
-  position: relative;
-
-  cursor: help;
-
-  ${focusable`
-    outline: ${conditional({
-      '$tooltip-outline': whenProps({ scheme: 'light' }),
-      '$tooltip-dark-outline': whenProps({ scheme: 'dark' }),
-    })};
-  `}
-`
-
-const Bubble = styled(Popover.Floating)`
-  ${typography('body')}
-
-  white-space: initial;
-
-  min-width: ${token('tooltip-min-width')};
-  max-width: ${token('tooltip-max-width')};
-  width: max-content;
-
-  z-index: ${token('z-index-tooltip')};
-
-  background: ${token('tooltip-background')};
-  box-shadow: ${token('tooltip-shadow')};
-  border-radius: ${token('tooltip-border-radius')};
-
-  padding: ${token('tooltip-padding-y')} ${token('tooltip-padding-x')};
-
-  color: ${token('tooltip-color')};
-  font-size: ${token('tooltip-font-size')};
-  line-height: ${token('tooltip-font-height')};
-`
-
-type ArrowProps = Pick<TooltipProps, 'position'> & {
-  top?: number
-  left?: number
-}
-
-const StyledArrow = styled.span<ArrowProps>`
-  position: absolute;
-
-  width: 0;
-  height: 0;
-  display: block;
-
-  background: transparent;
-  border-style: solid;
-
-  z-index: ${token('z-index-tooltip')};
-
-  ${({ top }) => top && `top: ${top}px;`}
-  ${({ left }) => left && `left: ${left}px;`}
-
-  ${({ position }) =>
-    position === 'top' &&
-    css`
-      bottom: -8px;
-
-      border-color: ${token('tooltip-background')} transparent transparent transparent;
-      border-width: 12px 10px 0 10px;
-    `}
-
-  ${({ position }) =>
-    position === 'bottom' &&
-    css`
-      top: -8px;
-
-      border-color: transparent transparent ${token('tooltip-background')} transparent;
-      border-width: 0 10px 12px 10px;
-    `}
-
-  ${({ position }) =>
-    position === 'left' &&
-    css`
-      right: -8px;
-
-      border-color: transparent transparent transparent ${token('tooltip-background')};
-      border-width: 10px 0 10px 12px;
-    `}
-
-  ${({ position }) =>
-    position === 'right' &&
-    css`
-      left: -8px;
-
-      border-color: transparent ${token('tooltip-background')} transparent transparent;
-      border-width: 10px 12px 10px 0;
-    `}
-`
-
-function Arrow() {
-  const { register, result } = usePopover()
-
-  return (
-    <StyledArrow
-      ref={(element) => (register.setArrow.current = element)}
-      position={result.position}
-      top={result.arrow.top}
-      left={result.arrow.left}
-    />
-  )
-}
-
-function Tooltip({
-  children,
-  message,
-  scheme,
-  position = TooltipPosition.Top,
-  align = TooltipAlign.Center,
-  ...rest
-}: PropsWithChildren<TooltipProps>): JSX.Element {
-  const [visible, setVisible] = useState(false)
-
-  const showTooltip = useCallback(() => {
-    setVisible(true)
-  }, [])
-
-  const hideTooltip = useCallback(() => {
-    setVisible(false)
-  }, [])
-
-  return (
-    <Container
-      {...rest}
-      onFocus={showTooltip}
-      onBlur={hideTooltip}
-      onMouseEnter={showTooltip}
-      onMouseLeave={hideTooltip}
-      tabIndex={0}
-      scheme={scheme}
-    >
-      <Popover position={position} align={align}>
-        {visible && (
-          <Bubble role="tooltip">
-            {message}
-            <Arrow />
-          </Bubble>
-        )}
-
-        <Popover.Reference>{children}</Popover.Reference>
-      </Popover>
-    </Container>
-  )
-}
-
-export default Tooltip

package/src/components/Tooltip/index.ts

@@ -1,2 +0,0 @@
-export { default as Tooltip, TooltipPosition, TooltipAlign } from './Tooltip'
-export type { TooltipProps } from './Tooltip'

package/src/components/TopNavigation/Logo/Logo.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import { Logo } from './'
-import type { LogoProps } from './Logo'
-import renderer, { screen } from '../../../tests/renderer'
-import generators from '../../../tests/generator'
-
-function setup(props: LogoProps) {
-  return renderer(<Logo {...props} />).render()
-}
-
-describe('<Logo />', () => {
-  it('renders correctly', () => {
-    const linkUrl = generators.url()
-    const imgAlt = generators.word()
-
-    setup({ url: linkUrl, children: <img src="logo.svg" alt={imgAlt} /> })
-
-    expect(screen.getByRole('link', { name: imgAlt })).toHaveAttribute('href', linkUrl)
-  })
-})

package/src/components/TopNavigation/Logo/Logo.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import type { PropsWithChildren } from 'react'
-
-import { BaseLink } from 'components/Link'
-import styled from 'styled-components'
-
-export type LogoProps = PropsWithChildren<{
-  url: string
-  className?: string
-}>
-
-function Logo({ url, className, children }: LogoProps): JSX.Element {
-  return (
-    <BaseLink className={className} href={url}>
-      {children}
-    </BaseLink>
-  )
-}
-
-export default styled(Logo)<LogoProps>({})

package/src/components/TopNavigation/Logo/index.ts

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