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

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,89 +0,0 @@
-import React, { BaseHTMLAttributes } from 'react'
-import styled, { css } from 'styled-components'
-import { getToken as token } from 'theming'
-import conditional, { whenProps } from 'tools/conditional'
-import Status from 'utils/types/Status'
-
-const Bar = styled.div<{ rounded: boolean }>`
-  align-items: center;
-  display: flex;
-  flex-grow: 0;
-  flex-shrink: 1;
-
-  justify-content: center;
-  overflow: hidden;
-  width: 100%;
-
-  position: relative;
-
-  height: ${token('progressbar-height')};
-
-  ${({ rounded }) =>
-    rounded &&
-    css`
-      border-radius: ${token('progressbar-height')};
-    `}
-`
-
-const Line = styled.span`
-  width: 100%;
-  height: 1px;
-
-  background: ${token('progressbar-line')};
-  background: black;
-`
-
-type ProgressProps = Pick<ProgressBarProps, 'value' | 'rounded' | 'status'>
-const Progress = styled.span<ProgressProps>`
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: ${({ value }) => value}%;
-  height: ${token('progressbar-height')};
-
-  background: ${conditional({
-    'progressbar-neutral-fill': whenProps({ status: Status.Neutral }),
-    'progressbar-success-fill': whenProps({ status: Status.Success }),
-    'progressbar-warning-fill': whenProps({ status: Status.Warn }),
-    'progressbar-danger-fill': whenProps({ status: Status.Danger }),
-  })};
-  border-radius: ${conditional({
-    ['progressbar-height']: whenProps({ rounded: true }),
-  })};
-
-  transition: 600ms ease;
-`
-
-export interface ProgressBarProps extends BaseHTMLAttributes<HTMLDivElement> {
-  value?: number
-  status?: string
-  rounded?: boolean
-  showLine?: boolean
-}
-
-export function ProgressBar({
-  value = 60,
-  status = Status.Neutral,
-  rounded = false,
-  showLine = false,
-  ...extra
-}: ProgressBarProps): JSX.Element {
-  const clampedValue = Math.max(0, Math.min(value, 100))
-
-  return (
-    <Bar
-      role="progressBar"
-      aria-valuenow={clampedValue}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      rounded={rounded}
-      {...extra}
-    >
-      {showLine && <Line />}
-      <Progress value={clampedValue} rounded={rounded} status={status} />
-    </Bar>
-  )
-}
-
-export default ProgressBar

package/src/components/ProgressBar/index.tsx

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

package/src/components/Radio/Radio.stories.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import Radio, { RadioProps } from './Radio'
-import type { Meta } from '@storybook/react'
-
-import Status from 'utils/types/Status'
-
-export default {
-  title: 'Components/Radio',
-  component: Radio,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    status: {
-      control: {
-        type: 'select',
-        options: [Status.Success, Status.Danger, Status.Neutral],
-      },
-      table: {
-        disable: true,
-      },
-    },
-    trailing: {
-      table: {
-        disable: true,
-      },
-    },
-    leading: {
-      table: {
-        disable: true,
-      },
-    },
-    onChange: {
-      action: 'changed',
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: RadioProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Radio {...args} name="radio-example" value="1">
-        Option 1
-      </Radio>
-      <Radio {...args} leading={<span>&clubs;</span>} name="radio-example" value="2">
-        Option 2
-      </Radio>
-      <Radio {...args} trailing={<span>&spades;</span>} name="radio-example" value="3">
-        Option 3
-      </Radio>
-    </div>
-  )
-}
-
-Playground.args = {}

package/src/components/Radio/Radio.test.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-
-import Radio from './Radio'
-import generator from '../../tests/generator'
-import renderer, { fire } from '../../tests/renderer'
-
-const setup = ({ ...overrides }) => renderer(<Radio {...overrides} />).render()
-
-describe('<Radio />', () => {
-  it('renders correctly', () => {
-    const props = {
-      children: generator.word(),
-      onChange: jest.fn(),
-    }
-
-    setup(props)
-
-    const component = screen.getByTestId('radio')
-    const selector = screen.getByTestId('selector')
-
-    expect(component).toHaveTextContent(props.children)
-    expect(selector).toHaveAttribute('type', 'radio')
-  })
-
-  it('renders leading correctly', () => {
-    const props = {
-      children: generator.word(),
-      leading: <span>&clubs;</span>,
-      onChange: jest.fn(),
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('radio')).toHaveTextContent(props.children)
-    expect(screen.getByTestId('selection-leading')).toBeInTheDocument()
-  })
-
-  it('renders trailing correctly', () => {
-    const props = {
-      children: generator.word(),
-      trailing: <span>&spades;</span>,
-      onChange: jest.fn(),
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('radio')).toHaveTextContent(props.children)
-    expect(screen.getByTestId('selection-trailing')).toBeInTheDocument()
-  })
-
-  it('triggers onChange when clicked', () => {
-    const props = {
-      children: generator.word(),
-      onChange: jest.fn(),
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('selector')).not.toBeChecked()
-
-    fire.click(screen.getByTestId('selector'))
-
-    expect(screen.getByTestId('selector')).toBeChecked()
-  })
-})

package/src/components/Radio/Radio.tsx

@@ -1,153 +0,0 @@
-import React, { Fragment, InputHTMLAttributes, ReactNode } from 'react'
-import clsx from 'clsx'
-
-import { Icon } from 'components/Icon'
-import type ColorScheme from 'utils/types/ColorScheme'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import SelectionWrapper, { SelectionStyleProps } from 'common/SelectionWrapper'
-import styled from 'styled-components'
-import { getToken as token } from 'theming'
-import transition from 'styles/transition'
-
-export interface RadioProps extends InputHTMLAttributes<HTMLInputElement>, SelectionStyleProps {
-  leading?: ReactNode
-  scheme?: ColorScheme
-  trailing?: ReactNode
-}
-
-const Check = styled(Icon)<SelectionStyleProps>`
-  position: absolute;
-  top: 50%;
-
-  left: 50%;
-
-  width: 10px;
-  height: 10px;
-
-  transform: translate(-50%, -50%);
-
-  pointer-events: none;
-
-  fill: currentColor;
-`
-
-const Selector = styled.input<SelectionStyleProps>`
-  ${transition()}
-
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-
-  cursor: pointer;
-
-  appearance: none;
-
-  outline: none;
-
-  color: white;
-
-  height: ${token('radio-small-selector-size')};
-  width: ${token('radio-small-selector-size')};
-
-  border-radius: ${token('radio-selector-border-radius')};
-  border-width: ${token('button-border-width')};
-  border-style: solid;
-
-  background: ${conditional({
-    'radio-selector-background': whenProps({ scheme: 'light' }),
-    'radio-dark-selector-background': whenProps({ scheme: 'dark' }),
-  })};
-
-  &:not(:checked) {
-    border-color: ${conditional({
-      'radio-selector-border-color': whenProps({ scheme: 'light' }),
-      'radio-dark-selector-border-color': whenProps({ scheme: 'dark' }),
-    })};
-
-    + ${Check} {
-      color: transparent;
-    }
-  }
-
-  &:checked {
-    border-color: ${token('radio-selector-border-color--checked')};
-
-    + ${Check} {
-      color: ${token('radio-selector-border-color--checked')};
-    }
-  }
-
-  ${disableable`
-    background: ${conditional({
-      'radio-selector-background--disabled': whenProps({ scheme: 'light' }),
-      'radio-dark-selector-background--disabled': whenProps({ scheme: 'dark' }),
-    })};
-    border-color: ${conditional({
-      'radio-selector-border-color--disabled': whenProps({ scheme: 'light' }),
-      'radio-dark-selector-border-color--disabled': whenProps({ scheme: 'dark' }),
-    })};
-  `}
-
-  ${hoverable`
-    background: ${conditional({
-      'radio-selector-background--hover': whenProps({ scheme: 'light' }),
-      'radio-dark-selector-background--hover': whenProps({ scheme: 'dark' }),
-    })};
-    border-color: ${conditional({
-      'radio-selector-border-color--hover': whenProps({ scheme: 'light' }),
-      'radio-dark-selector-border-color--hover': whenProps({ scheme: 'dark' }),
-    })};
-  `}
-
-  ${focusable`
-    background: ${conditional({
-      'radio-selector-background--focus': whenProps({ scheme: 'light' }),
-      'radio-dark-selector-background--focus': whenProps({ scheme: 'dark' }),
-    })};
-    border-color: ${conditional({
-      'radio-selector-border-color--focus': whenProps({ scheme: 'light' }),
-      'radio-dark-selector-border-color--focus': whenProps({ scheme: 'dark' }),
-    })};
-
-    box-shadow: ${token('radio-selector-box-shadow')};
-  `}
-`
-
-function Radio({
-  className,
-  disabled,
-  children,
-  leading,
-  trailing,
-  scheme = 'light',
-  ...others
-}: RadioProps): JSX.Element {
-  return (
-    <SelectionWrapper
-      scheme={scheme}
-      selector={
-        <Fragment>
-          <Selector
-            data-testid="selector"
-            {...others}
-            scheme={scheme}
-            disabled={disabled}
-            type="radio"
-          />
-          <Check name="circle" className="check" />
-        </Fragment>
-      }
-      leading={leading}
-      trailing={trailing}
-      className={clsx({ 'is-disabled': disabled }, className)}
-      data-testid="radio"
-    >
-      {children}
-    </SelectionWrapper>
-  )
-}
-
-export default Radio

package/src/components/Radio/index.ts

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

package/src/components/Section/Section.test.tsx

@@ -1,35 +0,0 @@
-import React, { Fragment } from 'react'
-
-import generator from '../../tests/generator'
-import renderer, { screen } from '../../tests/renderer'
-
-import Section from './Section'
-
-const setup = ({ ...overrides }) => renderer(<Section {...overrides} />).render()
-
-describe('<Section />', () => {
-  it('renders children correctly', () => {
-    const props = {
-      children: generator.word(),
-    }
-
-    setup(props)
-    screen.getByText(props.children)
-  })
-
-  it('renders title correctly', () => {
-    const title = generator.word()
-    const props = {
-      children: (
-        <Fragment>
-          <Section.Title>{title}</Section.Title>
-        </Fragment>
-      ),
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('section-title')).toBeInTheDocument()
-    screen.getByText(title)
-  })
-})

package/src/components/Section/Section.tsx

@@ -1,66 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react'
-import styled from 'styled-components'
-import font from 'styles/font'
-import { getToken as token } from 'theming'
-
-export type SectionProps = HTMLAttributes<HTMLElement>
-
-const StyledSection = styled.section`
-  ${font({
-    height: 'font-height-2',
-  })}
-`
-
-const StyledSectionTitle = styled.section`
-  ${font({
-    weight: 'font-weight-bold',
-    height: 'font-height-2',
-  })}
-
-  font-size: ${token('font-size-3')};
-  color: ${token('color-neutral-darker')};
-
-  border-bottom: 2px solid ${token('color-neutral-light')};
-
-  padding: ${token('space-s')} ${token('space-xs')};
-  margin-bottom: ${token('space-l')};
-`
-
-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: 0 ${token('button-spacing-x')} 0 0;
-`
-
-export interface SectionTitleProps extends HTMLAttributes<HTMLElement> {
-  children: ReactNode
-  leading?: ReactNode
-}
-
-function SectionTitle({ children, leading, ...others }: SectionTitleProps) {
-  return (
-    <StyledSectionTitle data-testid="section-title" {...others}>
-      {leading && <Leading>{leading}</Leading>}
-      {children}
-    </StyledSectionTitle>
-  )
-}
-
-function Section({ children, ...others }: SectionProps): JSX.Element {
-  return (
-    <StyledSection data-testid="section" {...others}>
-      {children}
-    </StyledSection>
-  )
-}
-
-Section.Title = SectionTitle
-
-export default Section

package/src/components/Section/Sections.stories.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-import type { Meta } from '@storybook/react'
-import Section from './Section'
-import type { SectionProps } from './Section'
-
-import generator from '../../tests/generator'
-
-export default {
-  title: 'Components/Section',
-  component: Section,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-      children: {
-        table: {
-          disable: true,
-        },
-      },
-    },
-  },
-  parameters: {
-    tokenPrefix: 'button',
-  },
-} as Meta
-
-export function Playground(args: SectionProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Section {...args}>
-        <Section.Title leading={<span>&clubs;</span>}>Title goes here</Section.Title>
-        <div className="flex flex-col space-y-4">
-          <p>{generator.sentence()}</p>
-          <p>{generator.sentence()}</p>
-          <p>{generator.sentence()}</p>
-          <p>{generator.sentence()}</p>
-          <p>{generator.sentence()}</p>
-          <p>{generator.sentence()}</p>
-          <p>{generator.sentence()}</p>
-          <p>{generator.sentence()}</p>
-        </div>
-      </Section>
-    </div>
-  )
-}

package/src/components/Section/index.ts

@@ -1,2 +0,0 @@
-export { default as Section } from './Section'
-export type { SectionProps, SectionTitleProps } from './Section'

package/src/components/Select/Select.constants.ts

@@ -1,12 +0,0 @@
-import get from 'utils/toolset/get'
-
-import type { SelectAdapter } from './Select.types'
-
-export const GenericAdapter: SelectAdapter<unknown> = {
-  getKey(o): string {
-    return get(o, 'value')!
-  },
-  getLabel(o): string {
-    return get(o, 'label')!
-  },
-}

package/src/components/Select/Select.context.ts

@@ -1,11 +0,0 @@
-import { createContext } from 'react'
-import { createSelectable } from 'hooks/useSelectable'
-
-import type { Option, useSelectReturn } from './Select.types'
-
-const { SelectableContext, useSelectable } = createSelectable<Option>()
-
-export { SelectableContext, useSelectable }
-
-const SelectContext = createContext<useSelectReturn | null>(null)
-export { SelectContext }