Update fields to have a custom component

Author: DaneEveritt

package.json

@@ -67,7 +67,7 @@
         "@types/react-router": "^5.1.3",
         "@types/react-router-dom": "^5.1.3",
         "@types/react-transition-group": "^2.9.2",
-        "@types/styled-components": "^4.4.0",
+        "@types/styled-components": "^5.1.0",
         "@types/uuid": "^3.4.5",
         "@types/webpack-env": "^1.15.2",
         "@types/yup": "^0.29.3",

resources/scripts/.eslintrc.yml

@@ -48,6 +48,7 @@ rules:
   "@typescript-eslint/no-unused-vars": 0
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0
+  "@typescript-eslint/ban-ts-comment": 0
   # @todo this would be nice to have, but don't want to deal with the warning spam at the moment.
   "@typescript-eslint/explicit-module-boundary-types": 0
   no-restricted-imports:

resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx

@@ -36,6 +36,7 @@ export default () => {
         clearFlashes('account:password');
         updateAccountPassword({ ...values })
             .then(() => {
+                // @ts-ignore
                 window.location = '/auth/login';
             })
             .catch(error => addFlash({

resources/scripts/components/elements/Field.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Field as FormikField, FieldProps } from 'formik';
 import classNames from 'classnames';
+import Input from '@/components/elements/Input';
 
 interface OwnProps {
     name: string;
@@ -20,13 +21,12 @@ const Field = ({ id, name, light = false, label, description, validate, classNam
                     {label &&
                     <label htmlFor={id} className={light ? undefined : 'input-dark-label'}>{label}</label>
                     }
-                    <input
+                    <Input
                         id={id}
                         {...field}
                         {...props}
-                        className={classNames((className || (light ? 'input' : 'input-dark')), {
-                            error: touched[field.name] && errors[field.name],
-                        })}
+                        isLight={light}
+                        hasError={!!(touched[field.name] && errors[field.name])}
                     />
                     {touched[field.name] && errors[field.name] ?
                         <p className={'input-help error'}>

resources/scripts/components/elements/Input.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled, { css } from 'styled-components/macro';
+import tw from 'twin.macro';
+
+export interface Props {
+    isLight?: boolean;
+    hasError?: boolean;
+}
+
+const light = css<Props>`
+    ${tw`bg-white border-neutral-200 text-neutral-800`};    
+    &:focus { ${tw`border-primary-400`} }
+        
+    &:disabled {
+        ${tw`bg-neutral-100 border-neutral-200`};
+    }
+`;
+
+const Input = styled.input<Props>`
+    // Reset to normal styling.
+    ${tw`appearance-none w-full min-w-0`};
+    ${tw`p-3 border rounded text-sm transition-all duration-150`};
+    ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
+    
+    ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
+    & + .input-help {
+        ${tw`mt-1 text-xs`};
+        ${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`};
+    }
+    
+    &:required, &:invalid {
+        ${tw`shadow-none`};
+    }
+    
+    &:focus {
+        ${tw`shadow-md border-neutral-400`};
+    }
+
+    &:disabled {
+        ${tw`opacity-75`};
+    }
+    
+    ${props => props.isLight && light};
+`;
+
+export default Input;

resources/scripts/macros.d.ts

@@ -1,4 +1,28 @@
 // This allows the use of css={} on JSX elements.
 //
 // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
-import {} from 'styled-components/cssprop';
+//
+// This is just the contents of the @types/styled-components/cssprop.d.ts file
+// since using the other method of just importing the one file did not work
+// correctly for some reason.
+// noinspection ES6UnusedImports
+import {} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { CSSProp } from 'styled-components';
+
+declare module 'react' {
+    interface Attributes {
+        // NOTE: unlike the plain javascript version, it is not possible to get access
+        // to the element's own attributes inside function interpolations.
+        // Only theme will be accessible, and only with the DefaultTheme due to the global
+        // nature of this declaration.
+        // If you are writing this inline you already have access to all the attributes anyway,
+        // no need for the extra indirection.
+        /**
+         * If present, this React element will be converted by
+         * `babel-plugin-styled-components` into a styled component
+         * with the given css as its styles.
+         */
+        css?: CSSProp;
+    }
+}

tsconfig.json

@@ -26,5 +26,8 @@
   },
   "include": [
     "./resources/scripts/**/*"
+  ],
+  "exclude": [
+    "/node_modules/"
   ]
 }

yarn.lock

@@ -971,7 +971,7 @@
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   dependencies:
@@ -1090,10 +1090,12 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/styled-components@^4.4.0":
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.0.tgz#15a3d59533fd3a5bd013db4a7c4422ec542c59d2"
+"@types/styled-components@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6"
+  integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ==
   dependencies:
+    "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
     "@types/react-native" "*"
     csstype "^2.2.0"