Merge branch 'feat/tag-input' into 'main'

Feat/tag input

Closes #13 and #16

See merge request software/fabcity-map/fabcity-map-frontend!15

package.json

@@ -7,6 +7,7 @@
     "copy:htaccess": "cp public/.htaccess build/"
   },
   "dependencies": {
+    "@headlessui/react": "^1.1.1",
     "@tailwindcss/forms": "^0.3.2",
     "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",

src/components/Form/CheckboxInput.tsx

-import React from 'react';
-import { CheckCircleOutline as CheckIcon } from 'heroicons-react';
-
-interface Props {
-  label: string;
-  value: boolean;
-  name: string;
-  required?: boolean;
-}
-
-const CheckboxInput: React.FC<Props> = ({ name, label, value, ...inputProps }) => {
-  return (
-    <label className="flex mb-4 items-center">
-      <CheckIcon className={`${value ? 'text-indigo-500' : 'text-gray-400'} mr-2`} />
-      <input readOnly type="checkbox" name={name} value={name} className="hidden" checked={value} {...inputProps} />
-      {!!label && <span className="form-label">{label}</span>}
-    </label>
-  );
-};
-
-export default CheckboxInput;

src/components/Form/CoordinateInput.tsx

+import React from 'react';
+import { CheckCircleOutline as CheckIcon } from 'heroicons-react';
+
+interface Props {
+  label: string;
+  value: [number | '', number | ''];
+  required?: boolean;
+  text?: string;
+}
+
+const CoordinateInput: React.FC<Props> = ({ label, text, value, required }) => {
+  return (
+    <>
+      {!!label && (
+        <span className="form-label">
+          {label}
+          {required && `*`}
+        </span>
+      )}
+      <label className="flex mt-1 mb-4 p-2 items-center w-full rounded-lg border-2 border-black border-opacity-20 hover:border-opacity-40 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+        <CheckIcon className={`${Boolean(value.filter(Boolean).length) ? 'text-indigo-500' : 'text-gray-400'} mr-2`} />
+        <input readOnly type="text" name={'lat'} value={value[0]} className="hidden" required={required}></input>
+        <input readOnly type="text" name={'lng'} value={value[1]} className="hidden" required={required}></input>
+        {!!text && <span className="form-label">{text}</span>}
+      </label>
+    </>
+  );
+};
+
+export default CoordinateInput;

src/components/Form/FileInput.tsx

@@ -17,7 +17,7 @@ const FileInput: React.FC<Props> = ({ name, label, value, onChange, ...inputProp
         {inputProps?.required && `*`}
       </span>
       <label
-        className={`flex items-center rounded-lg border-2 border-black mb-6 w-full p-2 text-center focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 cursor-pointer${
+        className={`mt-1 flex items-center rounded-lg border-2 border-black mb-6 w-full p-2 text-center focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 cursor-pointer${
           value
             ? ' bg-white text-black border-opacity-20 hover:border-opacity-40 truncate text-sm text-opacity-40'
             : ' bg-indigo-500 text-white border-opacity-0 hover:bg-indigo-600 text-md'

src/components/Form/TextInput.tsx

-import React, { MutableRefObject } from 'react';
+import React, { MutableRefObject, useRef } from 'react';
 
 interface Props {
   label: string;
@@ -7,10 +7,9 @@ interface Props {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   required?: boolean;
   type?: string;
-  ref?: MutableRefObject<HTMLInputElement>;
 }
 
-const TextInput: React.FC<Props> = ({ name, label, value, onChange, ref, type = 'text', ...inputProps }) => {
+const TextInput: React.FC<Props> = ({ name, label, value, onChange, type = 'text', ...inputProps }) => {
   return (
     <label className="block mb-4">
       {!!label && (
@@ -19,15 +18,7 @@ const TextInput: React.FC<Props> = ({ name, label, value, onChange, ref, type =
           {inputProps?.required && `*`}
         </span>
       )}
-      <input
-        ref={ref}
-        type={type}
-        name={name}
-        value={value}
-        className="form-input"
-        onChange={onChange}
-        {...inputProps}
-      />
+      <input type={type} name={name} value={value} className="form-input" onChange={onChange} {...inputProps} />
     </label>
   );
 };