@toptal/picasso-number-input 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-c43b015f0.4047 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-5ba02f38f.4049

package/src/NumberInput/NumberInput.tsx

@@ -1,152 +0,0 @@
-import type { ReactNode } from 'react'
-import React, { forwardRef, useRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import type { BaseProps, OmitInternalProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
-import { OutlinedInput } from '@toptal/picasso-outlined-input'
-import { InputAdornment } from '@toptal/picasso-input-adornment'
-import {
-  useCombinedRefs,
-  usePropDeprecationWarning,
-} from '@toptal/picasso-utils'
-import type { Props as OutlinedInputProps } from '@toptal/picasso-outlined-input'
-import { useFieldsLayoutContext } from '@toptal/picasso-form'
-
-import styles from './styles'
-import { NumberInputEndAdornment } from '../NumberInputEndAdornment'
-
-export interface Props
-  extends Omit<
-      OmitInternalProps<OutlinedInputProps>,
-      'defaultValue' | 'type' | 'multiline' | 'rows'
-    >,
-    BaseProps {
-  /** Value of the `input` element. */
-  value?: string | number
-  /** Minimum value for the `input` element */
-  min?: number | string
-  /** Maximum value for the `input` element */
-  max?: number | string
-  /** Next value of the `input` element will be calculated based on step */
-  step?: number | string
-  /** Should controls be hidden or not */
-  hideControls?: boolean
-  /** Specify icon which should be rendered inside NumberInput */
-  icon?: ReactNode
-  /** Indicates whether component is in disabled state */
-  disabled?: boolean
-  /** Callback invoked when `NumberInput` changes its state. */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  highlight?: 'autofill'
-}
-
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoNumberInput',
-})
-
-export const NumberInput = forwardRef<HTMLInputElement, Props>(
-  function NumberInput(props, ref) {
-    const {
-      step = 1,
-      min = -Infinity,
-      max = Infinity,
-      hideControls,
-      value,
-      onChange,
-      disabled,
-      error,
-      status,
-      onResetClick,
-      enableReset,
-      width,
-      icon,
-      size,
-      testIds,
-      highlight,
-      ...rest
-    } = props
-
-    // TODO: [FX-4715]
-    usePropDeprecationWarning({
-      props,
-      name: 'error',
-      componentName: 'NumberInput',
-      description:
-        'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
-    })
-
-    const { layout } = useFieldsLayoutContext()
-
-    const classes = useStyles(props)
-
-    const inputRef = useCombinedRefs<HTMLInputElement>(
-      ref,
-      useRef<HTMLInputElement>(null)
-    )
-
-    const endAdornment = hideControls ? null : (
-      <NumberInputEndAdornment
-        step={step}
-        min={min}
-        max={max}
-        value={value}
-        disabled={disabled}
-        size={size}
-        inputRef={inputRef}
-      />
-    )
-
-    const startAdornment = icon ? (
-      <InputAdornment position='start' disablePointerEvents>
-        {icon}
-      </InputAdornment>
-    ) : null
-
-    return (
-      <OutlinedInput
-        classes={{
-          root: cx(classes.root, {
-            [classes.highlightAutofill]: highlight === 'autofill',
-            [classes.horizontalLayout]: layout === 'horizontal',
-          }),
-          input: classes.input,
-        }}
-        inputProps={{
-          ...rest,
-          step,
-          min,
-          max,
-        }}
-        width={width}
-        onResetClick={onResetClick}
-        enableReset={enableReset}
-        status={error ? 'error' : status}
-        inputRef={inputRef}
-        type='number'
-        value={value}
-        disabled={disabled}
-        onChange={onChange}
-        endAdornment={endAdornment}
-        startAdornment={startAdornment}
-        size={size}
-        testIds={testIds}
-      />
-    )
-  }
-)
-
-NumberInput.defaultProps = {
-  onChange: () => {},
-  value: 0,
-  step: 1,
-  min: -Infinity,
-  max: Infinity,
-  hideControls: false,
-  size: 'medium',
-  status: 'default',
-}
-
-NumberInput.displayName = 'NumberInput'
-
-export default NumberInput

package/src/NumberInput/__snapshots__/test.tsx.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NumberInput renders 1`] = `
-<div
-  class="Picasso-root"
->
-  <div
-    class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoNumberInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-  >
-    <input
-      aria-invalid="false"
-      class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoNumberInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
-      max="100"
-      min="-100"
-      step="5"
-      type="number"
-      value="10"
-    />
-    <div
-      class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionEnd"
-    >
-      <div
-        class="PicassoContainer-flex PicassoContainer-inline PicassoContainer-column"
-      >
-        <button
-          class="MuiButtonBase-root NumberInputEndAdornment-medium NumberInputEndAdornment-root"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            class="PicassoSvgArrowUpMinor16-root"
-            style="min-width: 16px; min-height: 16px;"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="m7.997 5.29 4.707 4.707-.707.707-4-4-4 4-.707-.707 4-4 .707-.707Z"
-            />
-          </svg>
-        </button>
-        <button
-          class="MuiButtonBase-root NumberInputEndAdornment-medium NumberInputEndAdornment-root"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            class="PicassoSvgArrowDownMinor16-root"
-            style="min-width: 16px; min-height: 16px;"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <fieldset
-      aria-hidden="true"
-      class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
-      style="padding-left: 8px;"
-    >
-      <legend
-        class="PrivateNotchedOutline-legend"
-        style="width: 0.01px;"
-      >
-        <span>
-          ​
-        </span>
-      </legend>
-    </fieldset>
-  </div>
-</div>
-`;

package/src/NumberInput/index.ts

@@ -1,7 +0,0 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared'
-
-import type { Props } from './NumberInput'
-
-export { default as NumberInput } from './NumberInput'
-export type NumberInputProps = OmitInternalProps<Props>
-export * from './NumberInput'

package/src/NumberInput/story/Default.example.tsx

@@ -1,25 +0,0 @@
-import type { ChangeEventHandler } from 'react'
-import React, { useState } from 'react'
-import { NumberInput, Container } from '@toptal/picasso'
-
-const DefaultExample = () => {
-  const [value, setValue] = useState('1')
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
-    setValue(event.target.value)
-  }
-
-  return (
-    <Container>
-      <NumberInput
-        value={value}
-        onChange={handleChange}
-        step='1'
-        max='100'
-        min='-100'
-      />
-    </Container>
-  )
-}
-
-export default DefaultExample

package/src/NumberInput/story/Disabled.example.tsx

@@ -1,26 +0,0 @@
-import type { ChangeEventHandler } from 'react'
-import React, { useState } from 'react'
-import { NumberInput, Container } from '@toptal/picasso'
-
-const DisabledExample = () => {
-  const [value, setValue] = useState('1')
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
-    setValue(event.target.value)
-  }
-
-  return (
-    <Container>
-      <NumberInput
-        disabled
-        value={value}
-        onChange={handleChange}
-        step='5'
-        max='100'
-        min='-100'
-      />
-    </Container>
-  )
-}
-
-export default DisabledExample

package/src/NumberInput/story/Sizes.example.tsx

@@ -1,57 +0,0 @@
-import type { ChangeEventHandler } from 'react'
-import React, { useState } from 'react'
-import { NumberInput, Container, FormLabel } from '@toptal/picasso'
-import { SPACING_4 } from '@toptal/picasso-utils'
-
-const SizesExample = () => {
-  const [value, setValue] = useState('1')
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
-    setValue(event.target.value)
-  }
-
-  return (
-    <Container>
-      <Container padded={SPACING_4}>
-        <FormLabel htmlFor='small-number-input'>Small</FormLabel>
-        <NumberInput
-          id='small-number-input'
-          value={value}
-          size='small'
-          onChange={handleChange}
-          step='1'
-          max='100'
-          min='-100'
-        />
-      </Container>
-
-      <Container padded={SPACING_4}>
-        <FormLabel htmlFor='medium-number-input'>Medium (default)</FormLabel>
-        <NumberInput
-          id='medium-number-input'
-          value={value}
-          size='medium'
-          onChange={handleChange}
-          step='1'
-          max='100'
-          min='-100'
-        />
-      </Container>
-
-      <Container padded={SPACING_4}>
-        <FormLabel htmlFor='large-number-input'>Large</FormLabel>
-        <NumberInput
-          id='large-number-input'
-          value={value}
-          size='large'
-          onChange={handleChange}
-          step='1'
-          max='100'
-          min='-100'
-        />
-      </Container>
-    </Container>
-  )
-}
-
-export default SizesExample

package/src/NumberInput/story/Status.example.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { NumberInput, Form } from '@toptal/picasso'
-
-const Example = () => {
-  return (
-    <Form>
-      <Form.Field>
-        <Form.Label>Default</Form.Label>
-        <NumberInput value='100' status='default' />
-      </Form.Field>
-      <Form.Field>
-        <Form.Label>Error</Form.Label>
-        <NumberInput value='100' status='error' />
-      </Form.Field>
-      <Form.Field>
-        <Form.Label>Success</Form.Label>
-        <NumberInput value='100' status='success' />
-      </Form.Field>
-    </Form>
-  )
-}
-
-export default Example

package/src/NumberInput/story/WithIcon.example.tsx

@@ -1,27 +0,0 @@
-import type { ChangeEventHandler } from 'react'
-import React, { useState } from 'react'
-import { NumberInput, Container } from '@toptal/picasso'
-import { ReferralBonus16 } from '@toptal/picasso-icons'
-
-const WithIconExample = () => {
-  const [value, setValue] = useState('1')
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
-    setValue(event.target.value)
-  }
-
-  return (
-    <Container>
-      <NumberInput
-        value={value}
-        onChange={handleChange}
-        step='5'
-        max='100'
-        min='-100'
-        icon={<ReferralBonus16 />}
-      />
-    </Container>
-  )
-}
-
-export default WithIconExample

package/src/NumberInput/story/index.jsx

@@ -1,42 +0,0 @@
-import { NumberInput } from '../NumberInput'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const page = PicassoBook.section('Forms').createPage(
-  'NumberInput',
-  `Input component for numbers
-  
-  ${PicassoBook.createSourceLink(__filename)}
-  `
-)
-
-page
-  .createTabChapter('Props')
-  .addComponentDocs({ component: NumberInput, name: 'NumberInput' })
-
-page
-  .createChapter()
-  .addExample(
-    'NumberInput/story/Default.example.tsx',
-    'Default',
-    'base/NumberInput'
-  )
-  .addExample(
-    'NumberInput/story/Disabled.example.tsx',
-    'Disabled',
-    'base/NumberInput'
-  )
-  .addExample(
-    'NumberInput/story/Status.example.tsx',
-    'Status',
-    'base/NumberInput'
-  )
-  .addExample(
-    'NumberInput/story/WithIcon.example.tsx',
-    'With Icon',
-    'base/NumberInput'
-  )
-  .addExample(
-    'NumberInput/story/Sizes.example.tsx',
-    'Sizes',
-    'base/NumberInput'
-  )

package/src/NumberInput/styles.ts

@@ -1,23 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { highlightStyles as highlightAutofillStyles } from '@toptal/picasso-input'
-
-export default (theme: Theme) =>
-  createStyles({
-    root: {
-      paddingRight: 0,
-      cursor: 'text',
-    },
-    input: {
-      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-        '-webkit-appearance': 'none',
-        appearance: 'none',
-        margin: 0,
-      },
-      '-moz-appearance': 'textfield',
-    },
-    horizontalLayout: {
-      width: '100%',
-    },
-    ...highlightAutofillStyles(theme),
-  })

package/src/NumberInput/test.tsx

@@ -1,153 +0,0 @@
-import type { ChangeEventHandler } from 'react'
-import React, { useState } from 'react'
-import { render, fireEvent } from '@toptal/picasso-test-utils'
-
-import type { Props as NumberInputProps } from './NumberInput'
-import { NumberInput } from './NumberInput'
-
-const NumberInputRenderer = (
-  props: { initialValue: number | string } & Partial<NumberInputProps>
-) => {
-  const [value, setValue] = useState(props.initialValue)
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = e => {
-    setValue(e.target.value)
-  }
-
-  return (
-    <NumberInput
-      step={5}
-      max={100}
-      min={-100}
-      value={value}
-      onChange={handleChange}
-      status={props.status}
-      testIds={props.testIds}
-    />
-  )
-}
-
-const renderNumberInput = (
-  props: Partial<NumberInputProps> & { initialValue?: number | string } = {}
-) => {
-  const { initialValue = '10' } = props
-
-  return render(<NumberInputRenderer initialValue={initialValue} {...props} />)
-}
-
-describe('NumberInput', () => {
-  it('renders', () => {
-    const { container } = renderNumberInput()
-
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('increase value', async () => {
-    const { getByDisplayValue, queryAllByRole } = renderNumberInput()
-
-    const input = getByDisplayValue('10') as HTMLInputElement
-
-    const controls = queryAllByRole('button')
-    const controlUp = controls[0]
-
-    fireEvent.click(controlUp)
-
-    expect(input.value).toBe('15')
-  })
-
-  it('decrease value', () => {
-    const { getByDisplayValue, queryAllByRole } = renderNumberInput()
-
-    const input = getByDisplayValue('10') as HTMLInputElement
-
-    const controls = queryAllByRole('button')
-    const controlDown = controls[1]
-
-    fireEvent.click(controlDown)
-
-    expect(input.value).toBe('5')
-  })
-
-  describe('near max/min limits', () => {
-    it('increase value near max limit', () => {
-      const { getByDisplayValue, queryAllByRole } = renderNumberInput({
-        initialValue: '97',
-      })
-
-      const input = getByDisplayValue('97') as HTMLInputElement
-
-      const controls = queryAllByRole('button')
-      const controlUp = controls[0]
-
-      fireEvent.click(controlUp)
-
-      expect(input.value).toBe('100')
-    })
-
-    it('decrease value near min limit', () => {
-      const { getByDisplayValue, queryAllByRole } = renderNumberInput({
-        initialValue: '-97',
-      })
-
-      const input = getByDisplayValue('-97') as HTMLInputElement
-
-      const controls = queryAllByRole('button')
-      const controlDown = controls[1]
-
-      fireEvent.click(controlDown)
-
-      expect(input.value).toBe('-100')
-    })
-
-    it('decrease value when it is closer than step to max', () => {
-      const { getByDisplayValue, queryAllByRole } = renderNumberInput({
-        initialValue: '97',
-      })
-
-      const input = getByDisplayValue('97') as HTMLInputElement
-
-      const controls = queryAllByRole('button')
-      const controlDown = controls[1]
-
-      fireEvent.click(controlDown)
-
-      expect(input.value).toBe('95')
-    })
-
-    it('increase value when it is closer to min than step', () => {
-      const { getByDisplayValue, queryAllByRole } = renderNumberInput({
-        initialValue: '-97',
-      })
-
-      const input = getByDisplayValue('-97') as HTMLInputElement
-
-      const controls = queryAllByRole('button')
-      const controlUp = controls[0]
-
-      fireEvent.click(controlUp)
-
-      expect(input.value).toBe('-95')
-    })
-  })
-
-  describe('when in a valid state', () => {
-    it('shows valid icon', () => {
-      const testProps: NumberInputProps = {
-        value: '10',
-        status: 'success',
-        testIds: { validIcon: 'valid-icon' },
-      }
-
-      const { getByTestId, rerender } = renderNumberInput(testProps)
-
-      const validIcon = getByTestId('valid-icon')
-
-      expect(validIcon).toBeVisible()
-
-      // re-render with different props
-      rerender(<NumberInput {...testProps} status='error' />)
-
-      expect(validIcon).not.toBeVisible()
-    })
-  })
-})