refactor(textinput): categorize under Controls, rename TextField to TextInput

Author: WesSouza

src/AppBar/AppBar.stories.tsx

@@ -6,7 +6,7 @@ import {
   MenuList,
   MenuListItem,
   Separator,
-  TextField,
+  TextInput,
   Toolbar
 } from 'react95';
 import styled from 'styled-components';
@@ -74,7 +74,7 @@ export function Default() {
           )}
         </div>
 
-        <TextField placeholder='Search...' width={150} />
+        <TextInput placeholder='Search...' width={150} />
       </Toolbar>
     </AppBar>
   );

src/NumberInput/NumberInput.tsx

@@ -5,7 +5,7 @@ import { Button } from '../Button/Button';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import { blockSizes } from '../common/system';
 import { clamp, getSize } from '../common/utils';
-import { TextField } from '../TextField/TextField';
+import { TextInput } from '../TextInput/TextInput';
 import { CommonStyledProps } from '../types';
 
 type NumberInputProps = {
@@ -163,7 +163,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           width: width !== undefined ? getSize(width) : 'auto'
         }}
       >
-        <TextField
+        <TextInput
           value={valueDerived}
           variant={variant}
           onChange={handleInputChange}

src/TextField/TextField.mdx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';
-import { Button, ScrollView, TextField } from 'react95';
+import { Button, ScrollView, TextInput } from 'react95';
 import styled from 'styled-components';
 
 const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin, ante vel porttitor posuere, tellus nisi interdum ipsum, non bibendum ante risus ut purus. Curabitur vel posuere odio. Vivamus rutrum, nunc et ullamcorper sagittis, tellus ligula maximus quam, id dapibus sapien metus lobortis diam. Proin luctus, dolor in finibus feugiat, lacus enim gravida sem, quis aliquet tellus leo nec enim. Morbi varius bibendum augue quis venenatis. Curabitur ut elit augue. Pellentesque posuere enim a mattis interdum. Donec sodales convallis turpis, a vulputate elit. Suspendisse potenti.`;
@@ -19,10 +19,10 @@ const Wrapper = styled.div`
 `;
 
 export default {
-  title: 'TextField',
-  component: TextField,
+  title: 'Controls/TextInput',
+  component: TextInput,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-} as ComponentMeta<typeof TextField>;
+} as ComponentMeta<typeof TextInput>;
 
 export function Default() {
   const [state, setState] = useState({
@@ -36,7 +36,7 @@ export function Default() {
   return (
     <div style={{ width: 400 }}>
       <div style={{ display: 'flex' }}>
-        <TextField
+        <TextInput
           value={state.value}
           placeholder='Type here...'
           onChange={handleChange}
@@ -47,11 +47,11 @@ export function Default() {
         </Button>
       </div>
       <br />
-      <TextField defaultValue='Disabled' disabled fullWidth />
+      <TextInput defaultValue='Disabled' disabled fullWidth />
       <br />
-      <TextField multiline rows={4} defaultValue={loremIpsum} fullWidth />
+      <TextInput multiline rows={4} defaultValue={loremIpsum} fullWidth />
       <br />
-      <TextField
+      <TextInput
         multiline
         disabled
         rows={4}
@@ -74,15 +74,15 @@ export function Flat() {
         content), just use the flat variant:
       </p>
       <br />
-      <TextField
+      <TextInput
         variant='flat'
         placeholder='type here...'
         width={150}
         onChange={onChange}
         fullWidth
       />
       <br />
-      <TextField
+      <TextInput
         id='disabled'
         variant='flat'
         placeholder='Disabled'
@@ -92,7 +92,7 @@ export function Flat() {
         fullWidth
       />
       <br />
-      <TextField
+      <TextInput
         multiline
         variant='flat'
         rows={4}
@@ -101,7 +101,7 @@ export function Flat() {
         fullWidth
       />
       <br />
-      <TextField
+      <TextInput
         multiline
         variant='flat'
         disabled

src/TextField/TextField.stories.tsx renamed to src/TextInput/TextInout.stories.tsx

@@ -4,11 +4,11 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react';
 
 import { renderWithTheme } from '../../test/utils';
-import { TextField } from './TextField';
+import { TextInput } from './TextInput';
 
-describe('<TextField />', () => {
+describe('<TextInput />', () => {
   it('should render an <input /> inside the div', () => {
-    const { container } = renderWithTheme(<TextField />);
+    const { container } = renderWithTheme(<TextInput />);
     const input = container.querySelector('input');
     expect(input).toHaveAttribute('type', 'text');
     expect(input).not.toHaveAttribute('required');
@@ -21,7 +21,7 @@ describe('<TextField />', () => {
     const handleKeyUp = jest.fn();
     const handleKeyDown = jest.fn();
     const { getByRole } = renderWithTheme(
-      <TextField
+      <TextInput
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
@@ -50,7 +50,7 @@ describe('<TextField />', () => {
   });
 
   it('should considered [] as controlled', () => {
-    const { getByRole } = renderWithTheme(<TextField value={[]} />);
+    const { getByRole } = renderWithTheme(<TextInput value={[]} />);
     const input = getByRole('textbox');
 
     expect(input).toHaveProperty('value', '');
@@ -60,53 +60,53 @@ describe('<TextField />', () => {
 
   it('should forwardRef to native input', () => {
     const inputRef = React.createRef<HTMLInputElement>();
-    const { getByRole } = renderWithTheme(<TextField ref={inputRef} />);
+    const { getByRole } = renderWithTheme(<TextInput ref={inputRef} />);
     const input = getByRole('textbox');
     expect(inputRef.current).toBe(input);
   });
 
   describe('multiline', () => {
     it('should render textarea when passed the multiline prop', () => {
-      const { container } = renderWithTheme(<TextField multiline />);
+      const { container } = renderWithTheme(<TextInput multiline />);
       const textarea = container.querySelector('textarea');
       expect(textarea).not.toBe(null);
     });
 
     it('should forward rows prop', () => {
-      const { container } = renderWithTheme(<TextField multiline rows={3} />);
+      const { container } = renderWithTheme(<TextInput multiline rows={3} />);
       const textarea = container.querySelector('textarea');
       expect(textarea).toHaveAttribute('rows', '3');
     });
   });
 
   describe('prop: disabled', () => {
     it('should render a disabled <input />', () => {
-      const { container } = renderWithTheme(<TextField disabled />);
+      const { container } = renderWithTheme(<TextInput disabled />);
       const input = container.querySelector('input');
       expect(input).toHaveAttribute('disabled');
     });
     it('should be overridden by props', () => {
-      const { getByRole, rerender } = renderWithTheme(<TextField disabled />);
-      rerender(<TextField disabled={false} />);
+      const { getByRole, rerender } = renderWithTheme(<TextInput disabled />);
+      rerender(<TextInput disabled={false} />);
       const input = getByRole('textbox');
       expect(input).not.toHaveAttribute('disabled');
     });
   });
 
   describe('prop: variant', () => {
     it('should be "default" by default', () => {
-      const { getByTestId } = renderWithTheme(<TextField />);
+      const { getByTestId } = renderWithTheme(<TextInput />);
       expect(getByTestId('variant-default')).toBeInTheDocument();
     });
     it('should handle "flat" variant', () => {
-      const { getByTestId } = renderWithTheme(<TextField variant='flat' />);
+      const { getByTestId } = renderWithTheme(<TextInput variant='flat' />);
       expect(getByTestId('variant-flat')).toBeInTheDocument();
     });
   });
 
   describe('prop: fullWidth', () => {
     it('should make component take 100% width', () => {
-      const { container } = renderWithTheme(<TextField fullWidth />);
+      const { container } = renderWithTheme(<TextInput fullWidth />);
       expect(
         window.getComputedStyle(container.firstChild as HTMLInputElement).width
       ).toBe('100%');