@spothero/ui 14.4.0 → 14.5.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# 14.5.0 - 05/03/2022
+
+## New Features
+* [[173526f](https://github.com/spothero/fe-ui/commit/173526f)] - FED-354 feat: adds Input component ([#283](https://github.com/spothero/fe-ui/pull/283)) (annaliarosed)
+	* `feat:` Set up TextInput component
+	* `refactor:` Rename component and set up styles
+	* `feat:` Unlabeled, placeholder styles added
+	* `feat:` Unlabeled, value styles added
+	* `feat:` Unlabeled, focus styles added
+	* `feat:` Unlabeled, error and disabled styles added
+	* `feat:` Add label prop and styles
+	* `feat:` Add helperText prop and styles
+	* `feat:` Add errorMessage prop and styles
+	* `feat:` Add isReadOnly prop to stories
+	* `fix:` Clean up
+	* `fix:` Change value color when isInvalid
+	* `fix:` Add missing ref
+	* `refactor:` Extract FormControl
+	* `fix:` Remove imported interfaces
+	* `fix:` Pass only isInvalid prop to FormControl
+	* `fix:` Pass only isDisabled and isRequired prop to FormControl
+	* `fix:` Pass forgotten propsCo-authored-by: Annalia Destefano <annalia.destefano@spothero.com>
+
 # 14.4.0 - 04/21/2022
 
 ## Dependency Updates

package/CHANGELOG.tmp

@@ -1,5 +1,23 @@
-# 14.4.0 - 04/21/2022
+# 14.5.0 - 05/03/2022
 
-## Dependency Updates
-* [[d04c143](https://github.com/spothero/fe-ui/commit/d04c143)] - Upgrade to React 17 ([#282](https://github.com/spothero/fe-ui/pull/282)) (Gru Singh)
+## New Features
+* [[173526f](https://github.com/spothero/fe-ui/commit/173526f)] - FED-354 feat: adds Input component ([#283](https://github.com/spothero/fe-ui/pull/283)) (annaliarosed)
+	* `feat:` Set up TextInput component
+	* `refactor:` Rename component and set up styles
+	* `feat:` Unlabeled, placeholder styles added
+	* `feat:` Unlabeled, value styles added
+	* `feat:` Unlabeled, focus styles added
+	* `feat:` Unlabeled, error and disabled styles added
+	* `feat:` Add label prop and styles
+	* `feat:` Add helperText prop and styles
+	* `feat:` Add errorMessage prop and styles
+	* `feat:` Add isReadOnly prop to stories
+	* `fix:` Clean up
+	* `fix:` Change value color when isInvalid
+	* `fix:` Add missing ref
+	* `refactor:` Extract FormControl
+	* `fix:` Remove imported interfaces
+	* `fix:` Pass only isInvalid prop to FormControl
+	* `fix:` Pass only isDisabled and isRequired prop to FormControl
+	* `fix:` Pass forgotten propsCo-authored-by: Annalia Destefano <annalia.destefano@spothero.com>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "14.4.0",
+  "version": "14.5.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index-bundled.cjs.js",
   "module": "v2/index.js",

package/styles/v2/components/FormControl/FormControl.jsx

@@ -0,0 +1,43 @@
+import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
+import {
+    FormControl as ChakraFormControl,
+    FormHelperText,
+    FormLabel,
+    FormErrorMessage,
+} from '@chakra-ui/react';
+
+const FormControl = forwardRef(
+    ({children, label, helperText, errorMessage, ...props}, ref) => (
+        <ChakraFormControl {...props} ref={ref}>
+            {label && (
+                <FormLabel
+                    color="gray.600"
+                    fontWeight="semibold"
+                    mb={2}
+                    fontSize="sm"
+                >
+                    {label}
+                </FormLabel>
+            )}
+            {children}
+            {helperText && (
+                <FormHelperText color="gray.600" mt={1} fontSize="xs">
+                    {helperText}
+                </FormHelperText>
+            )}
+            <FormErrorMessage color="error" mt={1} fontSize="xs">
+                {errorMessage}
+            </FormErrorMessage>
+        </ChakraFormControl>
+    )
+);
+
+FormControl.propTypes = {
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    errorMessage: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export default FormControl;

package/styles/v2/components/Input/Input.jsx

@@ -0,0 +1,41 @@
+import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
+import {Input as ChakraInput} from '@chakra-ui/react';
+import FormControl from '../FormControl/FormControl';
+
+const Input = forwardRef(
+    (
+        {
+            label,
+            helperText,
+            errorMessage,
+            isInvalid,
+            isDisabled,
+            isRequired,
+            ...props
+        },
+        ref
+    ) => (
+        <FormControl
+            isInvalid={isInvalid}
+            isDisabled={isDisabled}
+            isRequired={isRequired}
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+        >
+            <ChakraInput ref={ref} {...props} />
+        </FormControl>
+    )
+);
+
+Input.propTypes = {
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    errorMessage: PropTypes.string,
+    isInvalid: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isRequired: PropTypes.bool,
+};
+
+export default Input;

package/styles/v2/components/Input/Input.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Component from './Input';
+
+export default {
+    title: 'v2/Input',
+    component: Component,
+    parameters: {
+        removeBaseHtmlClass: true,
+    },
+};
+
+const InputTemplate = props => (
+    <Component variant="outline" maxWidth="200px" {...props} />
+);
+
+InputTemplate.propTypes = {
+    placeholder: PropTypes.string,
+    label: PropTypes.string,
+    helperText: PropTypes.string,
+    errorMessage: PropTypes.string,
+    isInvalid: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isReadOnly: PropTypes.bool,
+};
+
+export const Input = InputTemplate.bind({});
+
+Input.argTypes = {
+    placeholder: {
+        control: {type: 'text'},
+    },
+    label: {
+        control: {type: 'text'},
+    },
+    helperText: {
+        control: {type: 'text'},
+    },
+    errorMessage: {
+        control: {type: 'text'},
+    },
+};
+
+Input.args = {
+    placeholder: 'Placeholder text',
+    label: 'Label',
+    helperText: 'Helper text',
+    errorMessage: 'Error message',
+    isInvalid: false,
+    isDisabled: false,
+    isReadOnly: false,
+};

package/styles/v2/components/Input/index.js

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

package/styles/v2/components/Input/styles/index.js

@@ -0,0 +1,35 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+const variants = {
+    outline: {
+        field: {
+            border: '1px solid',
+            borderColor: 'gray.200',
+            fontSize: 'base',
+            paddingLeft: 3,
+            paddingRight: 3,
+            bg: 'inherit',
+            fontWeight: 'semibold',
+            boxShadow: 'none !important',
+            _placeholder: {color: 'gray.600', fontWeight: 'normal'},
+            _focus: {
+                borderColor: 'brandBlue',
+            },
+            _hover: {borderColor: 'gray.300'},
+            _readOnly: {boxShadow: 'none !important', userSelect: 'all'},
+            _disabled: {
+                backgroundColor: 'gray.50',
+                opacity: 0.4,
+                cursor: 'not-allowed',
+            },
+            _invalid: {
+                borderColor: 'error',
+            },
+        },
+    },
+};
+
+export default merge(chakraDefaultTheme.components.Input, {
+    variants,
+});

package/styles/v2/components/index.js

@@ -22,6 +22,7 @@ export {default as Icon} from './Icon/Icon';
 export {default as Image} from './Image/Image';
 export {default as Loader} from './Loader/Loader';
 export {default as Checkbox} from './Checkbox';
+export {default as Input} from './Input';
 export {Popover, PopoverTrigger, PopoverContent} from './Popover';
 
 // generic chakra reexports

package/styles/v2/components/styles.js

@@ -11,3 +11,4 @@ export {default as Tabs} from './Tabs/styles';
 export {default as Select} from './Select/styles';
 export {default as Checkbox} from './Checkbox/styles';
 export {default as Popover} from './Popover/styles';
+export {default as Input} from './Input/styles';