Feature 7 - Input Component [Dev]

packages/components/src/Input/Input.d.ts

@@ -0,0 +1,5 @@
+import { HTMLProps } from 'react';
+
+export interface InputProps extends HTMLProps<HTMLInputElement> {}
+
+export default function Input(props: InputProps): JSX.Element;

packages/components/src/Input/Input.js

@@ -0,0 +1,57 @@
+import { forwardRef } from 'react';
+import { createStyleSheet } from '@platzily-ui/styling';
+import PropTypes from 'prop-types';
+
+const useStyleSheet = createStyleSheet(
+  (theme, { width, height }) => ({
+    inputDefault: {
+      width: width || 199,
+      height: height || 40,
+      backgroundColor: theme.palette.neutral.light,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: theme.palette.neutral.secondary,
+      '&:focus': {
+        borderColor: theme.palette.tertiary.main,
+        backgroundColor: theme.palette.neutral.light,
+        outline: 'none',
+      },
+      '&:disabled': {
+        borderColor: theme.palette.neutral.tertiary,
+        cursor: 'not-allowed',
+      },
+
+      '&:hover': {
+        borderColor: theme.palette.tertiary.main,
+      },
+    },
+
+  }),
+  { key: 'Input' },
+);
+
+const Input = forwardRef(function Input(props, ref) {
+  const { className, width, height, ...otherProps } = props;
+  const { classes, cx } = useStyleSheet(props);
+
+  return (
+    <input
+      ref={ref}
+      className={cx({
+        [classes.inputDefault]: true,
+        [className]: !!className,
+      })}
+      {...otherProps}
+    />
+  );
+});
+
+Input.propTypes = {
+  className: PropTypes.string,
+  height: PropTypes.number,
+  width: PropTypes.number,
+};
+
+
+
+export default Input;

packages/components/src/Input/Input.spec.js

@@ -0,0 +1,60 @@
+import { render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@platzily-ui/styling';
+import Input from './Input';
+
+describe('@Components/Input', () => {
+  it('Given the Input Component, when the props provide a width and his value, then the component will take those styles', () => {
+    // arrange
+    const theme = createTheme();
+    const { getByRole } = render(
+      <ThemeProvider theme={theme}>
+        <Input role="textbox" width={150} />
+      </ThemeProvider>,
+    );
+
+    // act
+    const InputTestedText = getByRole('textbox');
+    // assert
+    expect(InputTestedText).toBeDefined();
+    expect(InputTestedText).toHaveStyle(`width:150px`);
+  });
+
+  it('Given the Input Component, when the props provide type or required attributes then the component will take those props', () => {
+    // arrange
+    const { getByRole } = render(
+      <ThemeProvider theme={createTheme()}>
+        <Input role="textbox" required />
+      </ThemeProvider>,
+    );
+
+    // act
+    const InputTestedText = getByRole('textbox');
+
+    // assert
+    expect(InputTestedText).toBeDefined();
+    expect(InputTestedText).toHaveProperty('required');
+  });
+
+  it('Given the Input Component, when include the component inside form tag, then form tag gets properties and his values. ', () => {
+    // arrange
+    const { getByTestId } = render(
+      <ThemeProvider theme={createTheme()}>
+        <form data-testid="login-form">
+          <Input type="text" name="username" value="platzily-user" />
+          <Input type="password" name="password" value="12345678" />
+          <Input type="checkbox" name="rememberMe" checked />
+          <button type="submit">Sign in</button>
+        </form>
+      </ThemeProvider>,
+    );
+
+    // act
+    const InputTestedText = getByTestId('login-form');
+
+    // assert
+    expect(InputTestedText).toHaveFormValues({
+      username: 'platzily-user',
+      rememberMe: true,
+    });
+  });
+});

packages/components/src/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Input';
+export { default } from './Input';

packages/components/src/Input/index.js

@@ -0,0 +1 @@
+export { default } from './Input';

packages/components/src/Paper/Paper.js

@@ -15,7 +15,7 @@ const useStyleSheet = createStyleSheet(
   (theme, { color, elevation }) => ({
     paper: {
       backgroundColor: detectColor(theme, color || 'neutral-tertiary'),
-      padding: theme.spacing(),
+      padding: theme.spacing(1),
       borderRadius: 5,
     },
     outlined: {

packages/components/src/index.d.ts

@@ -12,3 +12,6 @@ export { default as Button } from './Button';
 
 export * from './SvgIcon';
 export { default as SvgIcon } from './SvgIcon';
+
+export * from './Input';
+export { default as Input } from './Input';

packages/components/src/index.js

@@ -3,3 +3,4 @@ export { default as Text } from './Text';
 export { default as Header } from './Header';
 export { default as Button } from './Button';
 export { default as SvgIcon } from './SvgIcon';
+export { default as Input } from './Input';

packages/docs/components/Input/Input.js

@@ -0,0 +1,32 @@
+import { Input } from '@platzily-ui/components';
+import { createStyleSheet } from '@platzily-ui/styling';
+
+const useStyleSheet = createStyleSheet((theme) => ({
+  input: {
+    borderRadius: theme.spacing(),
+    padding: theme.spacing(2),
+    '&:invalid':{
+      borderColor: theme.palette.error.main,
+      '&::placeholder': {
+        color: theme.palette.error.main,
+      }
+    }
+  },
+}), { key: 'DocsInput' });
+
+const InputComponent = (props) => {
+  const { classes } = useStyleSheet();
+  const { type, placeholder, disabled, width, required, ...otherProps } = props;
+
+  return <Input
+    className={classes.input}
+    type={type}
+    placeholder={placeholder}
+    disabled={disabled}
+    width={width}
+    required={required}
+    {...otherProps}
+  />;
+};
+
+export default InputComponent;

packages/docs/components/styling/index.js

@@ -5,6 +5,7 @@ import UseThemeStyledBoxComponent from './UseThemeStyledBox';
 import ColorComponent from './ColorComponent';
 
 import HeaderComponent from '../Header/Header';
+import InputComponent from '../Input/Input';
 
 import { defaultTheme, customTheme } from './theme';
 
@@ -59,3 +60,11 @@ export function Header() {
     </ThemeProvider>
   );
 }
+
+export function Input(props) {
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <InputComponent {...props}/>
+    </ThemeProvider>
+  );
+}

packages/docs/package.json

@@ -41,8 +41,8 @@
     "start": "next dev"
   },
   "dependencies": {
-    "@platzily-ui/icons": "0.1.0",
     "@platzily-ui/components": "0.1.0",
+    "@platzily-ui/icons": "0.1.0",
     "@platzily-ui/styling": "0.1.4",
     "next": "12.0.2",
     "nextra": "1.1.0",

packages/docs/pages/components/Input.mdx

@@ -0,0 +1,122 @@
+import { Input } from '../../components/styling/index';
+
+# Inputs
+
+Input fields let get the user  different type of data.
+
+
+<div style={{marginTop: 50, display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px', backgroundColor:'#F4F8FB', borderRadius:'5px'}}>
+  <Input placeholder="Hello Input"  />
+</div>
+
+------
+
+The component has type='text' by default but the user can change it using the attribute type and his prefer value.
+
+<div style={{ display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input placeholder="Type text by default"  />
+
+</div>
+
+```jsx
+import { Input } from '@platzily-ui/components';
+
+const InputComponent = () => {
+
+  return <Input />;
+};
+export default InputComponent;
+```
+
+ The user should provide width and height properties and his values by props, also can provide any input attribute of HTML.
+
+<div style={{ backgroundColor:'#F4F8FB', display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input placeholder="Example One" width={200} height={40} />
+  <Input placeholder="Example Two" width={180} height={35} />
+  <Input placeholder="Example Three" width={160} height={30} />
+</div>
+
+```jsx
+import { Button } from '@platzily-ui/components';
+import { Fragment } from 'react';
+
+const InputComponent = () => {
+  return (
+    <Fragment>
+      <Input width={200} height={40} /> // Example One
+      <Input width={180} height={35} /> // Example Two
+      <Input width={160} height={30} /> // Example Three
+    </Fragment>
+  );
+};
+export default InputComponent;
+```
+
+
+------
+
+## Type attribute
+
+Users can use all his different values in the type attribute like: date, checkbox, password, 
+
+<div style={{ backgroundColor:'#F4F8FB', display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input type="date" />
+  <Input type="checkbox" width={18} />
+  <Input placeholder="password" type="password" />
+</div>
+
+```jsx
+import { Input } from '@platzily-ui/components';
+import { Fragment } from 'react';
+
+const InputComponent = () => {
+  return (
+    <Fragment>
+      <Input type="date" />
+      <Input type="checkbox" width={18} />
+      <Input placeholder="password" type="password" /> />
+    </Fragment>
+  );
+  return ;
+};
+export default InputComponent;
+```
+
+
+----------
+## Styling
+
+The user can provide styles to the component using the createStyleSheet method.
+
+<div style={{ backgroundColor:'#F4F8FB', display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input placeholder="required *" required />
+</div>
+
+```jsx
+import { Input } from '@platzily-ui/components';
+import { createStyleSheet } from '@platzily-ui/styling';
+
+const useStyleSheet = createStyleSheet((theme) => ({
+  input: {
+    borderRadius: theme.spacing(),
+    padding: theme.spacing(2),
+    '&:invalid':{
+      borderColor: theme.palette.error.main,
+      '&::placeholder': {
+        color: theme.palette.error.main,
+      }
+    }
+  },
+}), { key: 'classNameStyle' });
+
+const InputComponent = (props) => {
+  const { classes } = useStyleSheet();
+
+  return <Input
+    className={classes.input}
+    required
+  />;
+};
+
+export default InputComponent;
+```