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

package/src/components/Textarea/Textarea.tsx

@@ -1,230 +0,0 @@
-import React, { forwardRef } from 'react'
-import styled from 'styled-components'
-import clsx from 'clsx'
-
-import { getToken as token } from 'theming'
-import { useFocusWithin } from 'hooks/useFocusWithin'
-import type ColorScheme from 'utils/types/ColorScheme'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import focusable from 'styles/focusable'
-import font from 'styles/font'
-import hoverable from 'styles/hoverable'
-import Status from 'utils/types/Status'
-import transition from 'styles/transition'
-
-import type { TextareaHTMLAttributes, ReactNode } from 'react'
-
-interface WithAdditionalProps {
-  scale?: 'small' | 'default' | 'large'
-  status?: Status
-  scheme?: ColorScheme
-  leading?: ReactNode
-  trailing?: ReactNode
-}
-
-export interface TextareaProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
-    WithAdditionalProps {
-  className?: string
-  children?: ReactNode
-}
-
-const TextareaWrapper = styled.div<WithAdditionalProps>`
-  ${transition()}
-
-  display: inline-flex;
-  flex-flow: row nowrap;
-
-  min-height: ${token('textarea-min-height')};
-
-  ${font({
-    height: 'textarea-font-height',
-  })}
-
-  font-size: ${conditional({
-    'textarea-font-size': whenProps({ scale: 'default' }),
-    'textarea-small-font-size': whenProps({ scale: 'small' }),
-    'textarea-large-font-size': whenProps({ scale: 'large' }),
-  })};
-
-  border-radius: ${token('textarea-border-radius')};
-  border-width: 1px;
-  border-style: solid;
-
-  background: ${conditional({
-    'textarea-background': whenProps({ scheme: 'light' }),
-    'textarea-dark-background': whenProps({ scheme: 'dark' }),
-  })};
-
-  border-color: ${conditional({
-    'textarea-border-color': whenProps({ scheme: 'light', status: Status.Neutral }),
-    'textarea-dark-border-color': whenProps({ scheme: 'dark', status: Status.Neutral }),
-    'textarea-danger-border-color': whenProps({ status: Status.Danger }),
-    'textarea-success-border-color': whenProps({ status: Status.Success }),
-  })};
-
-  color: ${conditional({
-    'textarea-color': whenProps({ scheme: 'light' }),
-    'textarea-dark-color': whenProps({ scheme: 'dark' }),
-  })};
-
-  ${hoverable`
-    background: ${conditional({
-      'textarea-background--hover': whenProps({ scheme: 'light' }),
-      'textarea-dark-background--hover': whenProps({ scheme: 'dark' }),
-    })};
-
-    border-color: ${conditional({
-      'textarea-border-color--hover': whenProps({ scheme: 'light' }),
-      'textarea-dark-border-color--hover': whenProps({ scheme: 'dark' }),
-    })};
-  `}
-
-  ${focusable`
-    background: ${conditional({
-      'textarea-background--focus': whenProps({ scheme: 'light' }),
-      'textarea-dark-background--focus': whenProps({ scheme: 'dark' }),
-    })};
-
-    border-color: ${conditional({
-      'textarea-border-color--focus': whenProps({ scheme: 'light' }),
-      'textarea-dark-border-color--focus': whenProps({ scheme: 'dark' }),
-    })};
-
-    box-shadow: ${conditional({
-      'textarea-box-shadow': whenProps({ scheme: 'light' }),
-      'textarea-dark-box-shadow': whenProps({ scheme: 'dark' }),
-    })};
-
-    outline: ${token('textarea-outline')};
-    outline-offset: ${token('textarea-outline-offset')};
-  `}
-
-  ${disableable()}
-`
-
-const StyledSpan = styled.span<WithAdditionalProps>`
-  ${transition()}
-
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-
-  color: ${conditional({
-    'textarea-border-color': whenProps({ scheme: 'light', status: Status.Neutral }),
-    'textarea-dark-border-color': whenProps({ scheme: 'dark', status: Status.Neutral }),
-    'textarea-danger-border-color': whenProps({ status: Status.Danger }),
-    'textarea-success-border-color': whenProps({ status: Status.Success }),
-  })};
-`
-
-const Leading = styled(StyledSpan)<WithAdditionalProps>`
-  align-items: flex-start;
-
-  margin: 0 0 0
-    ${conditional({
-      'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
-      'text-field-small-padding-x': whenProps({ scale: 'small' }),
-    })};
-
-  padding: ${token('space-s')} 0;
-`
-
-const Trailing = styled(StyledSpan)<WithAdditionalProps>`
-  align-items: flex-start;
-
-  margin: 0
-    ${conditional({
-      'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
-      'text-field-small-padding-x': whenProps({ scale: 'small' }),
-    })}
-    0 0;
-
-  padding: ${token('space-s')} 0;
-`
-
-const StyledTextarea = styled.textarea<WithAdditionalProps>`
-  ${transition()}
-
-  ${font({
-    height: 'textarea-font-height',
-  })}
-
-  background: transparent;
-
-  padding: ${conditional({
-      'textarea-padding-y': whenProps({ scale: 'default' }),
-      'textarea-small-padding-y': whenProps({ scale: 'small' }),
-      'textarea-large-padding-y': whenProps({ scale: 'large' }),
-    })}
-    0;
-
-  margin: 0
-    ${conditional({
-      'textarea-padding-x': whenProps({ scale: ['default', 'large'] }),
-      'textarea-small-padding-x': whenProps({ scale: 'small' }),
-    })};
-
-  border: none;
-
-  flex: 1 0 auto;
-
-  ${focusable()}
-  ${disableable()}
-`
-
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
-  props: TextareaProps,
-  ref
-): JSX.Element {
-  const {
-    disabled = false,
-    status = Status.Neutral,
-    scheme = 'light',
-    scale = 'default',
-    className,
-    leading,
-    trailing,
-    ...others
-  } = props
-  const { ref: containerRef, focused } = useFocusWithin<HTMLDivElement>()
-
-  return (
-    <TextareaWrapper
-      className={clsx(className, {
-        'is-disabled': disabled,
-        'is-focused': focused,
-      })}
-      scheme={scheme}
-      scale={scale}
-      status={status}
-      ref={containerRef}
-    >
-      {leading && (
-        <Leading status={status} scheme={scheme} scale={scale}>
-          {leading}
-        </Leading>
-      )}
-      <StyledTextarea
-        ref={ref}
-        data-testid="textarea"
-        {...others}
-        scale={scale}
-        status={status}
-        scheme={scheme}
-        leading={leading}
-        trailing={trailing}
-        disabled={disabled}
-      />
-      {trailing && (
-        <Trailing status={status} scheme={scheme} scale={scale}>
-          {trailing}
-        </Trailing>
-      )}
-    </TextareaWrapper>
-  )
-})
-
-export default Textarea

package/src/components/Textarea/index.ts

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

package/src/components/Toast/Toast.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import Toast, { ToastProps } from './Toast'
-import type { Meta } from '@storybook/react'
-import Status from 'utils/types/Status'
-
-export default {
-  title: 'Components/Toast',
-  component: Toast,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-    },
-    status: {
-      control: {
-        type: 'select',
-        options: Status,
-      },
-    },
-    onClose: {
-      control: { action: 'clicked' },
-    },
-  },
-} as Meta
-
-export function Playground(args: ToastProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center space-x-2">
-        <Toast {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  message: 'lorem ipsum',
-  status: Status.Success,
-}

package/src/components/Toast/Toast.test.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-
-import renderer from '../../tests/renderer'
-import generator from '../../tests/generator'
-
-import Toast from './Toast'
-
-const setup = ({ ...overrides }) =>
-  renderer(<Toast message="" onClose={jest.fn()} {...overrides} />).render()
-
-describe('<Toast />', () => {
-  it('should render the toast', () => {
-    const props = {
-      message: generator.sentence(),
-      onClose: jest.fn(),
-    }
-
-    setup(props)
-
-    expect(screen.getByRole(/alert/i)).toBeInTheDocument()
-    screen.getByText(props.message)
-  })
-})

package/src/components/Toast/Toast.tsx

@@ -1,141 +0,0 @@
-import React, { BaseHTMLAttributes, useEffect, useState } from 'react'
-import styled from 'styled-components'
-
-import { Icon } from 'components/Icon'
-import { getToken as token } from 'theming'
-import conditional, { whenProps } from 'tools/conditional'
-import Status from 'utils/types/Status'
-
-import DefaultCloseButton from 'common/CloseButton'
-
-import { ProgressBar } from 'components/ProgressBar'
-
-type ContainerProps = Pick<ToastProps, 'status'>
-const Container = styled.div<ContainerProps>`
-  position: relative;
-
-  width: ${token('toast-width')};
-  max-width: 100%;
-  padding: ${token('toast-padding-y')} ${token('toast-padding-x')};
-  overflow: hidden;
-
-  color: ${token('toast-font-color')};
-  font-weight: ${token('toast-font-weight')};
-  font-size: ${token('toast-font-size')};
-  line-height: ${token('toast-font-height')};
-
-  background: ${conditional({
-    'toast-neutral-background': whenProps({ status: Status.Neutral }),
-    'toast-success-background': whenProps({ status: Status.Success }),
-    'toast-warning-background': whenProps({ status: Status.Warn }),
-    'toast-danger-background': whenProps({ status: Status.Danger }),
-  })};
-  border-radius: ${token('toast-border-radius')};
-  box-shadow: ${token('toast-shadow')};
-`
-
-const Content = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-`
-
-const Leading = styled.span`
-  position: absolute;
-`
-
-const ToastCountDown = styled(ProgressBar)`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-`
-const CloseButton = styled(DefaultCloseButton)`
-  position: absolute;
-
-  top: ${token('toast-close-y')};
-  right: ${token('toast-close-x')};
-
-  color: ${token('color-neutral-white')};
-`
-
-export interface ToastProps extends BaseHTMLAttributes<HTMLDivElement> {
-  message: string
-  status?: Status
-  timeout?: number
-  showIcon?: boolean
-  onClose: () => void
-}
-
-const INTERVAL = 300 //ms
-
-function Toast({
-  message,
-  onClose,
-  timeout,
-  showIcon = false,
-  status = Status.Neutral,
-}: ToastProps): JSX.Element {
-  const [count, setCount] = useState(100)
-
-  /**
-   * this is a quick solution for the progress/countdown effect,
-   * we can use requestAnimationFrame or some other library to
-   * better implement this in the future
-   */
-  useEffect(() => {
-    if (!timeout) return
-
-    const decrementBy = (INTERVAL * 100) / timeout
-    const interval = window.setTimeout(() => {
-      if (count <= 0) {
-        window.clearTimeout(interval)
-        onClose()
-      } else {
-        setCount((value) => value - decrementBy)
-      }
-    }, INTERVAL)
-
-    return () => {
-      window.clearTimeout(interval)
-    }
-  }, [count, onClose, timeout])
-
-  return (
-    <Container status={status} aria-live="polite" role="alert">
-      {showIcon && (
-        <Leading>
-          <ToastIcon status={status} />
-        </Leading>
-      )}
-      <Content>{message}</Content>
-      {Boolean(timeout) && <ToastCountDown value={count} status={status} />}
-      {onClose && <CloseButton onClick={onClose} size={14} />}
-    </Container>
-  )
-}
-
-interface ToastIconProps {
-  status: Status
-}
-
-function ToastIcon({ status }: ToastIconProps) {
-  let iconName = ''
-
-  switch (status) {
-    case Status.Success:
-      iconName = 'check'
-      break
-
-    case Status.Warn:
-    case Status.Danger:
-      iconName = 'warning'
-      break
-
-    default:
-      iconName = 'information'
-  }
-
-  return <Icon name={iconName} size={20} />
-}
-
-export default Toast

package/src/components/Toast/icons/close.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6066 17.636L30.364 13.3934L24 19.7574L17.636 13.3934L13.3934 17.636L19.7574 24L13.3934 30.364L17.636 34.6066L24 28.2426L30.364 34.6066L34.6066 30.364L28.2426 24L34.6066 17.636Z" />
-</svg>

package/src/components/Toast/icons/danger.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M3.79753 20.9444H20.2031C21.1809 20.9444 21.8064 19.9034 21.3454 19.0421L13.142 3.68477C12.655 2.77174 11.3443 2.77174 10.856 3.68477L2.65392 19.0421C2.19415 19.9034 2.8197 20.9444 3.79753 20.9444ZM10.7045 9.30522H13.2948V14.4782H10.7045V9.30522ZM11.9996 15.7715C12.7146 15.7715 13.2948 16.3508 13.2948 17.0647C13.2948 17.7786 12.7146 18.358 11.9996 18.358C11.2847 18.358 10.7045 17.7786 10.7045 17.0647C10.7045 16.3508 11.2847 15.7715 11.9996 15.7715Z" />
-</svg>

package/src/components/Toast/icons/neutral.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M12 2C6.48625 2 2 6.48625 2 12C2 17.5138 6.48625 22 12 22C17.5138 22 22 17.5138 22 12C22 6.48625 17.5138 2 12 2ZM12 19.2727C11.2473 19.2727 10.6364 18.6618 10.6364 17.9091C10.6364 17.1564 11.2473 16.5455 12 16.5455C12.7527 16.5455 13.3636 17.1564 13.3636 17.9091C13.3636 18.6618 12.7527 19.2727 12 19.2727ZM13.3636 14.2727H10.6364L10.6364 5.18182L13.3636 5.18182L13.3636 14.2727Z" />
-</svg>

package/src/components/Toast/icons/success.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2101 6.67156L20.0888 4.55024L9.48218 15.1568L4.53244 10.2071L2.41112 12.3284L7.36086 17.2782L9.48218 19.3995L11.6035 17.2782L22.2101 6.67156Z" fill="none"/>
-</svg>

package/src/components/Toast/icons/warning.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path clip-rule="evenodd"
-    d="M3.79753 20.9444H20.2031C21.1809 20.9444 21.8064 19.9034 21.3454 19.0421L13.142 3.68477C12.655 2.77174 11.3443 2.77174 10.856 3.68477L2.65392 19.0421C2.19415 19.9034 2.8197 20.9444 3.79753 20.9444ZM10.7045 9.30522H13.2948V14.4782H10.7045V9.30522ZM11.9996 15.7715C12.7146 15.7715 13.2948 16.3508 13.2948 17.0647C13.2948 17.7786 12.7146 18.358 11.9996 18.358C11.2847 18.358 10.7045 17.7786 10.7045 17.0647C10.7045 16.3508 11.2847 15.7715 11.9996 15.7715Z" />
-</svg>

package/src/components/Toast/index.tsx

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

package/src/components/ToggleGroup/Toggle.test.tsx

@@ -1,76 +0,0 @@
-import React from 'react'
-
-import generator from '../../tests/generator'
-import renderer, { screen, fire } from '../../tests/renderer'
-import Toggle from './Toggle'
-import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
-
-describe('Toggle', () => {
-  const props = {
-    label: generator.word(),
-    value: generator.word(),
-    name: generator.word(),
-  }
-
-  it('throws error when rendered outside required contexts', () => {
-    expect(() => renderer(<Toggle {...props} />).render()).toThrowError(
-      'A Toggle options must be rendered inside a ToggleGroup'
-    )
-  })
-
-  it('will unselect and toggle if the type is multiple', () => {
-    const props = {
-      label: generator.word(),
-      value: generator.word(),
-    }
-
-    const selectable = {
-      clear: jest.fn(),
-      type: jest.fn().mockReturnValue('multiple'),
-      selected: new Map(),
-      select: jest.fn(),
-      unselect: jest.fn(),
-      toggle: jest.fn(),
-    }
-
-    renderer(
-      <ToggleGroupContext.Provider value={{ scale: 'default', disabled: false }}>
-        <SelectableContext.Provider value={selectable}>
-          <Toggle value={props.value}>{props.label}</Toggle>
-        </SelectableContext.Provider>
-      </ToggleGroupContext.Provider>
-    ).render()
-
-    screen.getByText(props.label)
-    fire.click(screen.getByText(props.label))
-    expect(selectable.toggle).toHaveBeenCalledWith({ value: props.value })
-  })
-
-  it('will not unselect if the type is single', () => {
-    const props = {
-      label: generator.word(),
-      value: generator.word(),
-    }
-
-    const selectable = {
-      clear: jest.fn(),
-      type: jest.fn().mockReturnValue('single'),
-      selected: new Map(),
-      select: jest.fn(),
-      unselect: jest.fn(),
-      toggle: jest.fn(),
-    }
-
-    renderer(
-      <ToggleGroupContext.Provider value={{ scale: 'default', disabled: false }}>
-        <SelectableContext.Provider value={selectable}>
-          <Toggle value={props.value}>{props.label}</Toggle>
-        </SelectableContext.Provider>
-      </ToggleGroupContext.Provider>
-    ).render()
-
-    screen.getByText(props.label)
-    fire.click(screen.getByText(props.label))
-    expect(selectable.select).toHaveBeenCalledWith({ value: props.value })
-  })
-})