Feature 7 - Input Component [Dev]

packages/components/package.json

@@ -58,6 +58,7 @@
     }
   },
   "dependencies": {
+    "@lerna/bootstrap": "^4.0.0",
     "@platzily-ui/styling": "0.1.4",
     "prop-types": "15.7.2"
   },

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,92 @@
+import { useState, forwardRef } from 'react';
+import { createStyleSheet } from '@platzily-ui/styling';
+import PropTypes from 'prop-types';
+
+const useStyleSheet = createStyleSheet(
+  (theme, { required, type }) => ({
+    inputDefault: {
+      width: 199,
+      height: 40,
+      borderRadius: 5,
+      display: 'flex',
+      alignContent: 'center',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.palette.neutral.light,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: theme.palette.neutral.secondary,
+      required,
+      type,
+      '&:focus': {
+        borderColor: theme.palette.tertiary.main,
+        backgroundColor: theme.palette.neutral.light,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        outline: 'none',
+      },
+      '&:disabled': {
+        borderColor: theme.palette.neutral.tertiary,
+        cursor: 'not-allowed',
+      },
+      '&:invalid': {
+        borderColor: theme.palette.error.main,
+      },
+      '&:hover': {
+        borderColor: theme.palette.tertiary.main,
+      },
+    },
+    inputRequired: {
+      textAlign: 'left',
+      '&::placeholder': {
+        color: theme.palette.error.main,
+        paddingLeft: '95%'
+      }
+    },
+  }),
+  { key: 'InputComponent' },
+);
+
+const Input = forwardRef(function Input(props, ref) {
+  const { required, className, ...otherProps } = props;
+  const { classes, cx } = useStyleSheet(props);
+
+  // useState Hook
+  const [state, setState] = useState({
+    name: '',
+  });
+  const handleInputChange = (event) => setState({ name: event.target.value });
+
+  // Required Validation because of the styles
+  let requiredStyles;
+  let placeHolder;
+  if(required) {
+    requiredStyles = classes.inputRequired;
+    placeHolder = '*';
+  } else {
+    requiredStyles = null;
+    placeHolder = null;
+  }
+
+  return (
+    <input
+      ref={ref}
+      className={cx(classes.inputDefault, requiredStyles , className)}
+      value={state.name}
+      onChange={handleInputChange}
+      placeholder={placeHolder}
+      {...otherProps}
+    />
+  );
+});
+
+Input.propTypes = {
+  className: PropTypes.string,
+  required: PropTypes.boolean,
+};
+
+Input.defaultProps = {
+  required: false,
+};
+
+export default Input;

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

@@ -0,0 +1,61 @@
+import { getByTestId, 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 an object within the styles attribute then the component will take those styles ', () => {
+    // arrange
+    const theme = createTheme();
+    const { getByRole } = render(
+      <ThemeProvider theme={theme}>
+        <Input role="banner" style={{ color: theme.palette.secondary.main }} />
+      </ThemeProvider>,
+    );
+
+    // act
+    const InputTestedText = getByRole('banner');
+    // assert
+    expect(InputTestedText).toBeDefined();
+    expect(InputTestedText).toHaveStyle(`color:#97c343`);
+  });
+
+  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="form" type={'date'} required />
+      </ThemeProvider>,
+    );
+
+    // act
+    const InputTestedText = getByRole('form');
+
+    // assert
+    expect(InputTestedText).toBeDefined();
+    expect(InputTestedText).toHaveProperty('type');
+    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/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,24 @@
+import { Input } from '@platzily-ui/components';
+import { createStyleSheet } from '@platzily-ui/styling';
+
+const useStyleSheet = createStyleSheet((theme) => ({
+  inputStyle: {
+    padding: theme.spacing(2),
+  },
+}), { key: 'padding' });
+
+const InputComponent = (props) => {
+  const { classes } = useStyleSheet();
+  const { required, type, placeholder, disabled, otherProps } = props;
+
+  return <Input
+    className={classes.inputStyle}
+    type={type}
+    required={required}
+    placeholder={placeholder}
+    disabled={disabled}
+    {...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,9 @@
     "start": "next dev"
   },
   "dependencies": {
-    "@platzily-ui/icons": "0.1.0",
+    "@lerna/bootstrap": "^4.0.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,132 @@
+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="Dafault type"  />
+
+</div>
+
+```jsx
+import { Input } from '@platzily-ui/components';
+
+const InputComponent = () => {
+
+  return <Input />;
+};
+export default InputComponent;
+```
+
+ The user also can provide principally the disabled and required attribute .
+
+ <div style={{ display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input placeholder="disabled" disabled />
+  <Input placeholder="*" required />
+</div>
+
+```jsx
+import { Button } from '@platzily-ui/components';
+import { Fragment } from 'react';
+
+const InputComponent = () => {
+  return (
+    <Fragment>
+      <Input placeholder="disabled" disabled />
+      <Input placeholder="required" required />
+    </Fragment>
+  );
+};
+export default InputComponent;
+```
+
+
+------
+
+## Type attribute
+
+Users can use all his different values in the type attribute like: date, checkbox, password, 
+
+<div style={{ display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input type="date" />
+</div>
+
+```jsx
+import { Input } from '@platzily-ui/components';
+
+const InputComponent = () => {
+
+  return <Input type="date" />;
+};
+export default InputComponent;
+```
+
+<div style={{ display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input type="checkbox" />
+</div>
+
+```jsx
+import { Input } from '@platzily-ui/components';
+
+const InputComponent = () => {
+
+  return <Input type="checkbox" />;
+};
+
+export default InputComponent;
+```
+
+<div style={{ display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input placeholder="password" type="password" />
+</div>
+
+```jsx
+import { Input } from '@platzily-ui/components';
+
+const InputComponent = () => {
+
+  return <Input type="password" />;
+};
+
+export default InputComponent;
+```
+
+## Styling
+
+The user can provide styles to the component using the createStyleSheet method.
+
+<div style={{ display: 'flex', alignItems:'center', flexDirection:'column', gap:'15px', justifyContent: 'center', padding: '15px'}}>
+  <Input placeholder="Styled Input"  />
+</div>
+
+```jsx
+import { Input } from '@platzily-ui/components';
+import { createStyleSheet } from '@platzily-ui/styling';
+
+const useStyleSheet = createStyleSheet((theme) => ({
+  inputStyle: {
+    backgroundColor: theme.palette.secondary.main,
+    padding: theme.spacing(2),
+  },
+}), { key: 'classNameStyle' });
+
+const InputComponent = (props) => {
+  const { classes } = useStyleSheet();
+
+  return <Input
+    className={classes.inputStyle}
+  />;
+};
+
+export default InputComponent;
+```

yarn.lock

@@ -1446,7 +1446,7 @@
     pacote "^11.2.6"
     semver "^7.3.4"
 
-"@lerna/bootstrap@4.0.0":
+"@lerna/bootstrap@4.0.0", "@lerna/bootstrap@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@lerna/bootstrap/-/bootstrap-4.0.0.tgz#5f5c5e2c6cfc8fcec50cb2fbe569a8c607101891"
   integrity sha512-RkS7UbeM2vu+kJnHzxNRCLvoOP9yGNgkzRdy4UV2hNalD7EP41bLvRVOwRYQ7fhc2QcbhnKNdOBihYRL0LcKtw==