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

package/src/components/TextField/TextField.stories.tsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import TextField, { TextFieldProps } from './TextField'
-import type { Meta } from '@storybook/react'
-
-import { Icon } from 'components/Icon'
-import Status from 'utils/types/Status'
-import useTextField from './useTextField'
-
-export default {
-  title: 'Components/TextField',
-  component: TextField,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    scale: {
-      control: {
-        type: 'select',
-        options: ['large', 'default', 'small'],
-      },
-    },
-    status: {
-      control: {
-        type: 'select',
-        options: [Status.Success, Status.Danger, Status.Neutral],
-      },
-    },
-    trailing: {
-      table: {
-        disable: true,
-      },
-    },
-    leading: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: TextFieldProps): JSX.Element {
-  const [value, setValue] = useTextField(args)
-
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <TextField value={value} onChange={setValue} {...args} leading={<Icon name="calendar" />} />
-      </div>
-      <div className="flex items-center p-4 space-x-2">
-        <TextField
-          value={value}
-          onChange={setValue}
-          {...args}
-          status={Status.Danger}
-          trailing={<Icon name="warning" />}
-        />
-      </div>
-      <div className="flex items-center p-4 space-x-2">
-        <TextField value={value} onChange={setValue} {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  scale: 'default',
-  scheme: 'light',
-}

package/src/components/TextField/TextField.test.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-import TextField from './TextField'
-import renderer from '../../tests/renderer'
-
-const setup = ({ ...overrides } = {}) => renderer(<TextField {...overrides} />).render()
-
-describe('<TextField />', () => {
-  it('renders correctly', () => {
-    setup({})
-
-    screen.getByTestId('input')
-  })
-
-  it('renders type="text" by default', () => {
-    setup({})
-
-    expect(screen.getByTestId('input')).toHaveAttribute('type', 'text')
-  })
-
-  it('renders type="password" correctly', () => {
-    setup({
-      type: 'password',
-    })
-
-    expect(screen.getByTestId('input')).toHaveAttribute('type', 'password')
-  })
-
-  it('renders type="number" correctly', () => {
-    setup({
-      type: 'number',
-    })
-
-    expect(screen.getByTestId('input')).toHaveAttribute('type', 'number')
-  })
-})

package/src/components/TextField/TextField.tsx

@@ -1,244 +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 { InputHTMLAttributes, ReactNode } from 'react'
-
-interface WithAdditionalProps {
-  scale?: 'small' | 'default' | 'large'
-  status?: Status
-  scheme?: ColorScheme
-  leading?: ReactNode
-  trailing?: ReactNode
-}
-
-export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement>, WithAdditionalProps {
-  className?: string
-  children?: ReactNode
-}
-
-const InputWrapper = styled.div<WithAdditionalProps>`
-  ${transition()}
-
-  display: inline-flex;
-  flex-flow: row nowrap;
-
-  height: ${conditional({
-    'text-field-height': whenProps({ scale: 'default' }),
-    'text-field-small-height': whenProps({ scale: 'small' }),
-    'text-field-large-height': whenProps({ scale: 'large' }),
-  })};
-  min-width: 0;
-
-  ${font({
-    height: 'text-field-font-height',
-  })}
-
-  font-size: ${conditional({
-    'text-field-font-size': whenProps({ scale: 'default' }),
-    'text-field-small-font-size': whenProps({ scale: 'small' }),
-    'text-field-large-font-size': whenProps({ scale: 'large' }),
-  })};
-
-  border-radius: ${token('text-field-border-radius')};
-  border-width: 1px;
-  border-style: solid;
-
-  background: ${conditional({
-    'text-field-background': whenProps({ scheme: 'light' }),
-    'text-field-dark-background': whenProps({ scheme: 'dark' }),
-  })};
-
-  border-color: ${conditional({
-    'text-field-border-color': whenProps({ scheme: 'light', status: Status.Neutral }),
-    'text-field-dark-border-color': whenProps({ scheme: 'dark', status: Status.Neutral }),
-    'text-field-danger-border-color': whenProps({ status: Status.Danger }),
-    'text-field-success-border-color': whenProps({ status: Status.Success }),
-  })};
-
-  color: ${conditional({
-    'text-field-color': whenProps({ scheme: 'light' }),
-    'text-field-dark-color': whenProps({ scheme: 'dark' }),
-  })};
-
-  ${hoverable`
-    background: ${conditional({
-      'text-field-background--hover': whenProps({ scheme: 'light' }),
-      'text-field-dark-background--hover': whenProps({ scheme: 'dark' }),
-    })};
-
-    border-color: ${conditional({
-      'text-field-border-color--hover': whenProps({ scheme: 'light' }),
-      'text-field-dark-border-color--hover': whenProps({ scheme: 'dark' }),
-    })};
-  `}
-
-  ${focusable`
-    background: ${conditional({
-      'text-field-background--focus': whenProps({ scheme: 'light' }),
-      'text-field-dark-background--focus': whenProps({ scheme: 'dark' }),
-    })};
-
-    border-color: ${conditional({
-      'text-field-border-color--focus': whenProps({ scheme: 'light' }),
-      'text-field-dark-border-color--focus': whenProps({ scheme: 'dark' }),
-    })};
-
-    box-shadow: ${conditional({
-      'text-field-box-shadow': whenProps({ scheme: 'light' }),
-      'text-field-dark-box-shadow': whenProps({ scheme: 'dark' }),
-    })};
-
-    outline: ${token('text-field-outline')};
-    outline-offset: ${token('text-field-outline-offset')};
-  `}
-
-  ${disableable()}
-`
-
-const StyledSpan = styled.span<WithAdditionalProps>`
-  ${transition()}
-
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-
-  color: ${conditional({
-    'text-field-border-color': whenProps({ scheme: 'light', status: Status.Neutral }),
-    'text-field-dark-border-color': whenProps({ scheme: 'dark', status: Status.Neutral }),
-    'text-field-danger-border-color': whenProps({ status: Status.Danger }),
-    'text-field-success-border-color': whenProps({ status: Status.Success }),
-  })};
-`
-
-export const Leading = styled(StyledSpan)<WithAdditionalProps>`
-  margin: 0 0 0
-    ${conditional({
-      'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
-      'text-field-small-padding-x': whenProps({ scale: 'small' }),
-    })};
-`
-
-export const Trailing = styled(StyledSpan)<WithAdditionalProps>`
-  margin: 0
-    ${conditional({
-      'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
-      'text-field-small-padding-x': whenProps({ scale: 'small' }),
-    })}
-    0 0;
-`
-
-const StyledInput = styled.input<WithAdditionalProps>`
-  ${transition()}
-
-  ${font({
-    height: 'text-field-font-height',
-  })}
-
-  background: transparent;
-
-  padding: ${conditional({
-      'text-field-padding-y': whenProps({ scale: 'default' }),
-      'text-field-small-padding-y': whenProps({ scale: 'small' }),
-      'text-field-large-padding-y': whenProps({ scale: 'large' }),
-    })}
-    0;
-
-  margin: 0
-    ${conditional({
-      'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
-      'text-field-small-padding-x': whenProps({ scale: 'small' }),
-    })};
-
-  border: none;
-
-  flex: 1;
-
-  min-width: 0;
-
-  ${focusable()}
-  ${disableable()}
-
-  /* suppress the clear button for IE */
-  &[type="search"]::-ms-clear,
-  &[type="search"]::-ms-reveal {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-
-  /* suppress the clear button for Chromium-based browsers */
-  &[type='search']::-webkit-search-decoration,
-  &[type='search']::-webkit-search-cancel-button,
-  &[type='search']::-webkit-search-results-button,
-  &[type='search']::-webkit-search-results-decoration {
-    display: none;
-  }
-`
-
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
-  props: TextFieldProps,
-  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 (
-    <InputWrapper
-      className={clsx(className, {
-        'is-disabled': disabled,
-        'is-focused': focused,
-      })}
-      scheme={scheme}
-      status={status}
-      scale={scale}
-      ref={containerRef}
-    >
-      {leading && (
-        <Leading status={status} scheme={scheme} scale={scale}>
-          {leading}
-        </Leading>
-      )}
-      <StyledInput
-        ref={ref}
-        type="text"
-        data-testid="input"
-        {...others}
-        scale={scale}
-        status={status}
-        scheme={scheme}
-        leading={leading}
-        trailing={trailing}
-        disabled={disabled}
-      />
-      {trailing && (
-        <Trailing status={status} scheme={scheme} scale={scale}>
-          {trailing}
-        </Trailing>
-      )}
-    </InputWrapper>
-  )
-})
-
-export default TextField

package/src/components/TextField/index.ts

@@ -1,6 +0,0 @@
-export { default as TextField } from './TextField'
-export { default as useTextField } from './useTextField'
-export type { TextFieldProps } from './TextField'
-
-// this won't be exported. internal use only
-export { Leading, Trailing } from './TextField'

package/src/components/TextField/useTextField.tsx

@@ -1,26 +0,0 @@
-import { useCallback, useState } from 'react'
-
-import type { ChangeEvent } from 'react'
-import type { TextFieldProps } from './TextField'
-
-type InputValue = string | number | readonly string[] | undefined
-type ReturnType = [InputValue, (e: ChangeEvent<HTMLInputElement>) => void]
-
-function useTextField({ onChange: onChangeProp, value: valueProp }: TextFieldProps): ReturnType {
-  const [value, setValue] = useState(valueProp || '')
-
-  const onChange = useCallback(
-    function handleChange(e: ChangeEvent<HTMLInputElement>) {
-      const {
-        target: { value },
-      } = e
-      setValue(value)
-      onChangeProp?.(e)
-    },
-    [onChangeProp]
-  )
-
-  return [value, onChange]
-}
-
-export default useTextField

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,101 +0,0 @@
-import React, { useState, ChangeEvent } from 'react'
-import Textarea, { TextareaProps } from './Textarea'
-import type { Meta } from '@storybook/react'
-
-import { Icon } from 'components/Icon'
-import Status from 'utils/types/Status'
-
-export default {
-  title: 'Components/Textarea',
-  component: Textarea,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    scale: {
-      control: {
-        type: 'select',
-        options: ['large', 'default', 'small'],
-      },
-    },
-    status: {
-      control: {
-        type: 'select',
-        options: [Status.Success, Status.Danger, Status.Neutral],
-      },
-    },
-    trailing: {
-      table: {
-        disable: true,
-      },
-    },
-    leading: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: TextareaProps): JSX.Element {
-  const [value, setValue] = useState('')
-
-  function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
-    const {
-      target: { value },
-    } = e
-    setValue(value)
-  }
-
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <Textarea
-          value={value}
-          onChange={handleChange}
-          {...args}
-          leading={<Icon name="calendar" />}
-        />
-      </div>
-      <div className="flex items-center p-4 space-x-2">
-        <Textarea
-          value={value}
-          onChange={handleChange}
-          {...args}
-          status={Status.Danger}
-          trailing={<Icon name="warning" />}
-        />
-      </div>
-      <div className="flex items-center p-4 space-x-2">
-        <Textarea value={value} onChange={handleChange} {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  scale: 'default',
-  scheme: 'light',
-}

package/src/components/Textarea/Textarea.test.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-import Textarea from './Textarea'
-import renderer from '../../tests/renderer'
-
-const setup = ({ ...overrides } = {}) => renderer(<Textarea {...overrides} />).render()
-
-describe('<Textarea />', () => {
-  it('renders correctly', () => {
-    setup({})
-
-    screen.getByTestId('textarea')
-  })
-})