@toptal/picasso-number-input 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-number-input",
-  "version": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396",
+  "version": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
   "description": "Toptal UI components library - NumberInput",
   "publishConfig": {
     "access": "public"
@@ -22,14 +22,14 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396",
-    "@toptal/picasso-form": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396",
-    "@toptal/picasso-icons": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396",
-    "@toptal/picasso-input": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396",
-    "@toptal/picasso-input-adornment": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396",
-    "@toptal/picasso-outlined-input": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396",
-    "@toptal/picasso-shared": "13.1.3-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.23+77646e396",
-    "@toptal/picasso-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396",
+    "@toptal/picasso-container": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-form": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-icons": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-input": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-input-adornment": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-outlined-input": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
+    "@toptal/picasso-shared": "13.1.3-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.26+25389459e",
+    "@toptal/picasso-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e",
     "classnames": "^2.3.1"
   },
   "sideEffects": [
@@ -45,11 +45,7 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080+77646e396"
+    "@toptal/picasso-test-utils": "1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083+25389459e"
   },
-  "files": [
-    "dist-package/**",
-    "!dist-package/tsconfig.tsbuildinfo"
-  ],
-  "gitHead": "77646e396bff10ff86e3a85e5a1a8c3af86093ef"
+  "gitHead": "25389459e8d238e1cadceeda472ae9cc5b53b162"
 }

package/src/NumberInput/NumberInput.tsx

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,73 @@
+// 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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,153 @@
+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()
+    })
+  })
+})