refactor(numberinput): categorize under Controls, rename from NumberField to NumberInput

Author: WesSouza

src/DatePicker/DatePicker.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { Button } from '../Button/Button';
-import { NumberField } from '../NumberField/NumberField';
+import { NumberInput } from '../NumberInput/NumberInput';
 import { ScrollView } from '../ScrollView/ScrollView';
 import { Select } from '../Select/Select';
 import { SelectChangeEvent } from '../Select/Select.types';
@@ -175,7 +175,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               width={128}
               menuMaxHeight={200}
             />
-            <NumberField value={year} onChange={handleYearSelect} width={100} />
+            <NumberInput value={year} onChange={handleYearSelect} width={100} />
           </Toolbar>
           <Calendar>
             <WeekDays>

src/NumberField/NumberField.mdx

@@ -2,15 +2,15 @@ import { fireEvent } from '@testing-library/react';
 import React from 'react';
 
 import { renderWithTheme } from '../../test/utils';
-import { NumberField } from './NumberField';
+import { NumberInput } from './NumberInput';
 
 // TODO: should we pass number or string to callbacks?
-describe('<NumberField />', () => {
+describe('<NumberInput />', () => {
   it('should call onChange on spin buttons click', () => {
     const handleChange = jest.fn();
 
     const { getByTestId } = renderWithTheme(
-      <NumberField onChange={handleChange} defaultValue={2} />
+      <NumberInput onChange={handleChange} defaultValue={2} />
     );
     const spinButton = getByTestId('increment');
     spinButton.click();
@@ -21,7 +21,7 @@ describe('<NumberField />', () => {
   it('should call onChange on blur after keyboard input', () => {
     const handleChange = jest.fn();
     const { container } = renderWithTheme(
-      <NumberField onChange={handleChange} defaultValue={0} />
+      <NumberInput onChange={handleChange} defaultValue={0} />
     );
     const input = container.querySelector('input') as HTMLInputElement;
     input.focus();
@@ -39,7 +39,7 @@ describe('<NumberField />', () => {
     const handleChange = jest.fn();
 
     const { getByTestId, container } = renderWithTheme(
-      <NumberField onChange={handleChange} value={0} />
+      <NumberInput onChange={handleChange} value={0} />
     );
     const input = container.querySelector('input') as HTMLInputElement;
     const incrementButton = getByTestId('increment');
@@ -55,7 +55,7 @@ describe('<NumberField />', () => {
   it('should give correct result after user changes input value and then clicks increment button', () => {
     const handleChange = jest.fn();
     const { container, getByTestId } = renderWithTheme(
-      <NumberField onChange={handleChange} defaultValue={0} />
+      <NumberInput onChange={handleChange} defaultValue={0} />
     );
     const input = container.querySelector('input') as HTMLInputElement;
     const incrementButton = getByTestId('increment');
@@ -68,7 +68,7 @@ describe('<NumberField />', () => {
 
   it('should reach max value', () => {
     const { getByTestId, container } = renderWithTheme(
-      <NumberField defaultValue={90} min={0} max={100} step={10} />
+      <NumberInput defaultValue={90} min={0} max={100} step={10} />
     );
     const input = container.querySelector('input') as HTMLInputElement;
     const incrementButton = getByTestId('increment');
@@ -79,7 +79,7 @@ describe('<NumberField />', () => {
 
   it('should reach min value', () => {
     const { getByTestId, container } = renderWithTheme(
-      <NumberField defaultValue={10} min={0} max={100} step={10} />
+      <NumberInput defaultValue={10} min={0} max={100} step={10} />
     );
     const input = container.querySelector('input') as HTMLInputElement;
     const decrementButton = getByTestId('decrement');
@@ -91,7 +91,7 @@ describe('<NumberField />', () => {
   describe('prop: step', () => {
     it('should be 1 by default', () => {
       const { getByTestId, container } = renderWithTheme(
-        <NumberField defaultValue={0} />
+        <NumberInput defaultValue={0} />
       );
       const input = container.querySelector('input') as HTMLInputElement;
       const incrementButton = getByTestId('increment');
@@ -102,7 +102,7 @@ describe('<NumberField />', () => {
 
     it('should change value by specified step', () => {
       const { getByTestId, container } = renderWithTheme(
-        <NumberField defaultValue={10} step={3} />
+        <NumberInput defaultValue={10} step={3} />
       );
       const input = container.querySelector('input') as HTMLInputElement;
       const decrementButton = getByTestId('decrement');
@@ -113,7 +113,7 @@ describe('<NumberField />', () => {
 
     it('should handle decimal step', () => {
       const { getByTestId, container } = renderWithTheme(
-        <NumberField defaultValue={10} step={0.3} />
+        <NumberInput defaultValue={10} step={0.3} />
       );
       const input = container.querySelector('input') as HTMLInputElement;
       const decrementButton = getByTestId('decrement');
@@ -126,7 +126,7 @@ describe('<NumberField />', () => {
   describe('prop: disabled', () => {
     it('should render disabled', () => {
       const { getByTestId, container } = renderWithTheme(
-        <NumberField defaultValue={10} disabled />
+        <NumberInput defaultValue={10} disabled />
       );
       const input = container.querySelector('input') as HTMLInputElement;
       const incrementButton = getByTestId('increment');
@@ -139,7 +139,7 @@ describe('<NumberField />', () => {
 
     it('should not react to button clicks', () => {
       const { getByTestId, container } = renderWithTheme(
-        <NumberField defaultValue={10} disabled />
+        <NumberInput defaultValue={10} disabled />
       );
       const input = container.querySelector('input') as HTMLInputElement;
       const incrementButton = getByTestId('increment');
@@ -156,7 +156,7 @@ describe('<NumberField />', () => {
   describe('prop: width', () => {
     it('should render component of specified width', () => {
       const { container } = renderWithTheme(
-        <NumberField defaultValue={10} disabled width={93} />
+        <NumberInput defaultValue={10} disabled width={93} />
       );
       expect(
         getComputedStyle(container.firstElementChild as HTMLInputElement).width
@@ -165,7 +165,7 @@ describe('<NumberField />', () => {
 
     it('should handle %', () => {
       const { container } = renderWithTheme(
-        <NumberField defaultValue={10} disabled width='93%' />
+        <NumberInput defaultValue={10} disabled width='93%' />
       );
       expect(
         getComputedStyle(container.firstElementChild as HTMLInputElement).width

src/NumberField/NumberField.spec.tsx renamed to src/NumberInput/NumberInput.spec.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import React from 'react';
-import { NumberField, ScrollView } from 'react95';
+import { ScrollView, NumberInput } from 'react95';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
@@ -21,19 +21,19 @@ const Wrapper = styled.div`
 `;
 
 export default {
-  title: 'NumberField',
-  component: NumberField,
+  title: 'Controls/NumberInput',
+  component: NumberInput,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-} as ComponentMeta<typeof NumberField>;
+} as ComponentMeta<typeof NumberInput>;
 
 export function Default() {
   return (
     <>
-      <NumberField defaultValue={3} step={1.5} min={1.5} max={9} width={130} />
+      <NumberInput defaultValue={3} step={1.5} min={1.5} max={9} width={130} />
       <br />
-      <NumberField defaultValue={1995} width={130} />
+      <NumberInput defaultValue={1995} width={130} />
       <br />
-      <NumberField disabled defaultValue={2020} width={130} />
+      <NumberInput disabled defaultValue={2020} width={130} />
     </>
   );
 }
@@ -46,20 +46,20 @@ export function Flat() {
   return (
     <ScrollView id='cutout'>
       <p>
-        When you want to use NumberField on a light background (like scrollable
+        When you want to use NumberInput on a light background (like scrollable
         content), just use the flat variant:
       </p>
-      <NumberField
+      <NumberInput
         variant='flat'
         defaultValue={1.5}
         min={0}
         max={9}
         width='130px'
       />
       <br />
-      <NumberField variant='flat' defaultValue={1995} width='130px' />
+      <NumberInput variant='flat' defaultValue={1995} width='130px' />
       <br />
-      <NumberField variant='flat' disabled defaultValue={2020} width='130px' />
+      <NumberInput variant='flat' disabled defaultValue={2020} width='130px' />
     </ScrollView>
   );
 }

src/NumberField/NumberField.stories.tsx renamed to src/NumberInput/NumberInput.stories.tsx

@@ -8,7 +8,7 @@ import { clamp, getSize } from '../common/utils';
 import { TextField } from '../TextField/TextField';
 import { CommonStyledProps } from '../types';
 
-type NumberFieldProps = {
+type NumberInputProps = {
   className?: string;
   defaultValue?: number;
   disabled?: boolean;
@@ -22,12 +22,12 @@ type NumberFieldProps = {
   width?: string | number;
 } & CommonStyledProps;
 
-const StyledNumberFieldWrapper = styled.div`
+const StyledNumberInputWrapper = styled.div`
   display: inline-flex;
   align-items: center;
 `;
 
-const StyledButton = styled(Button)<Pick<NumberFieldProps, 'variant'>>`
+const StyledButton = styled(Button)<Pick<NumberInputProps, 'variant'>>`
   width: 30px;
   padding: 0;
   flex-shrink: 0;
@@ -49,7 +49,7 @@ const StyledButton = styled(Button)<Pick<NumberFieldProps, 'variant'>>`
         `}
 `;
 
-const StyledButtonWrapper = styled.div<Pick<NumberFieldProps, 'variant'>>`
+const StyledButtonWrapper = styled.div<Pick<NumberInputProps, 'variant'>>`
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -96,9 +96,8 @@ const StyledButtonIcon = styled.span<{ invert?: boolean }>`
           `}
   }
 `;
-
-const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
-  function NumberField(
+const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  (
     {
       className,
       defaultValue,
@@ -113,7 +112,7 @@ const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
       width
     },
     ref
-  ) {
+  ) => {
     const [valueDerived, setValueState] = useControlledOrUncontrolled({
       value,
       defaultValue
@@ -157,7 +156,7 @@ const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
     }, [handleClick, step]);
 
     return (
-      <StyledNumberFieldWrapper
+      <StyledNumberInputWrapper
         className={className}
         style={{
           ...style,
@@ -192,9 +191,11 @@ const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
             <StyledButtonIcon />
           </StyledButton>
         </StyledButtonWrapper>
-      </StyledNumberFieldWrapper>
+      </StyledNumberInputWrapper>
     );
   }
 );
 
-export { NumberField, NumberFieldProps };
+NumberInput.displayName = 'NumberInput';
+
+export { NumberInput, NumberInputProps };

src/NumberField/NumberField.tsx renamed to src/NumberInput/NumberInput.tsx

@@ -9,7 +9,7 @@ import { TabBody } from '../TabBody/TabBody';
 import Fieldset from '../Fieldset/Fieldset';
 import Window from '../Window/Window';
 import WindowHeader from '../WindowHeader/WindowHeader';
-import { NumberField } from '../NumberField/NumberField';
+import { NumberInput } from '../NumberInput/NumberInput';
 import Checkbox from '../Checkbox/Checkbox';
 import WindowContent from '../WindowContent/WindowContent';
 
@@ -64,7 +64,7 @@ import WindowContent from '../WindowContent/WindowContent';
             <TabPanel value={0} activeTab={activeTab}>
               <Fieldset label='Order:'>
                 <div style={{ padding: '0.5em 0 0.5em 0' }}>Amount:</div>
-                <NumberField
+                <NumberInput
                   width='100%'
                   min={0}
                   value={0}

src/Tabs/Tabs.mdx

@@ -4,7 +4,7 @@ import {
   Anchor,
   Checkbox,
   GroupBox,
-  NumberField,
+  NumberInput,
   Tab,
   TabBody,
   Tabs,
@@ -51,7 +51,7 @@ export function Default() {
             <div>
               <GroupBox label='Order:'>
                 <div style={{ padding: '0.5em 0 0.5em 0' }}>Amount:</div>
-                <NumberField width='100%' min={0} defaultValue={0} />
+                <NumberInput width='100%' min={0} defaultValue={0} />
                 <br />
                 <Checkbox
                   name='shipping'