From a6a0e4905f5ebce5112462deebd12fa5acb6f5ca Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Thu, 27 Oct 2022 13:45:27 +0200
Subject: [PATCH] feat(web/input): description tooltip on fields

---
 package/client/resource/interface/input.ts    |  1 +
 resource/interface/client/input.lua           |  3 ++-
 web/src/features/dev/debug/input.ts           | 15 ++++++++++--
 .../dialog/components/InfoTooltip.tsx         | 23 +++++++++++++++++++
 web/src/features/dialog/components/Label.tsx  | 13 +++++++++++
 .../features/dialog/components/checkbox.tsx   |  6 +++--
 web/src/features/dialog/components/input.tsx  |  5 ++--
 web/src/features/dialog/components/number.tsx |  3 ++-
 web/src/features/dialog/components/slider.tsx |  3 ++-
 web/src/interfaces/dialog.ts                  |  5 ++++
 10 files changed, 68 insertions(+), 9 deletions(-)
 create mode 100644 web/src/features/dialog/components/InfoTooltip.tsx
 create mode 100644 web/src/features/dialog/components/Label.tsx

diff --git a/package/client/resource/interface/input.ts b/package/client/resource/interface/input.ts
index 9226cd7..ebfe1aa 100644
--- a/package/client/resource/interface/input.ts
+++ b/package/client/resource/interface/input.ts
@@ -14,6 +14,7 @@ interface InputDialogRowProps {
   min?: number;
   max?: number;
   step?: number;
+  description?: string;
 }
 
 type inputDialog = (
diff --git a/resource/interface/client/input.lua b/resource/interface/client/input.lua
index b84e703..75144b8 100644
--- a/resource/interface/client/input.lua
+++ b/resource/interface/client/input.lua
@@ -14,6 +14,7 @@ local input
 ---@field min? number
 ---@field max? number
 ---@field step? number
+---@field description? string
 
 ---@param heading string
 ---@param rows string[] | InputDialogRowProps[]
@@ -57,4 +58,4 @@ RegisterNUICallback('inputData', function(data, cb)
     local promise = input
     input = nil
     promise:resolve(data)
-end)
\ No newline at end of file
+end)
diff --git a/web/src/features/dev/debug/input.ts b/web/src/features/dev/debug/input.ts
index 689f2c5..0a23a70 100644
--- a/web/src/features/dev/debug/input.ts
+++ b/web/src/features/dev/debug/input.ts
@@ -8,7 +8,12 @@ export const debugInput = () => {
       data: {
         heading: 'Police locker',
         rows: [
-          { type: 'input', label: 'Locker number', placeholder: '420' },
+          {
+            type: 'input',
+            label: 'Locker number',
+            placeholder: '420',
+            description: 'Description that tells you what this input field does',
+          },
           { type: 'checkbox', label: 'Some checkbox' },
           { type: 'input', label: 'Locker PIN', password: true, icon: 'lock' },
           { type: 'checkbox', label: 'Some other checkbox', checked: true },
@@ -29,7 +34,13 @@ export const debugInput = () => {
             max: 10,
             icon: 'receipt',
           },
-          { type: 'slider', label: 'Slide bar', min: 10, max: 50, step: 2 },
+          {
+            type: 'slider',
+            label: 'Slide bar',
+            min: 10,
+            max: 50,
+            step: 2,
+          },
         ],
       },
     },
diff --git a/web/src/features/dialog/components/InfoTooltip.tsx b/web/src/features/dialog/components/InfoTooltip.tsx
new file mode 100644
index 0000000..967ce1a
--- /dev/null
+++ b/web/src/features/dialog/components/InfoTooltip.tsx
@@ -0,0 +1,23 @@
+import { Box, Tooltip } from '@chakra-ui/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const InfoTooltip: React.FC<{ description: string }> = ({ description }) => {
+  return (
+    <Tooltip label={description} placement="top" hasArrow arrowSize={4} maxW={220}>
+      <Box
+        borderRadius="full"
+        bg="whiteAlpha.200"
+        p={0.5}
+        w={18}
+        h={18}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <FontAwesomeIcon icon="question" fixedWidth fontSize={10} />
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default InfoTooltip;
diff --git a/web/src/features/dialog/components/Label.tsx b/web/src/features/dialog/components/Label.tsx
new file mode 100644
index 0000000..90e0a0a
--- /dev/null
+++ b/web/src/features/dialog/components/Label.tsx
@@ -0,0 +1,13 @@
+import { HStack, Text } from '@chakra-ui/react';
+import InfoTooltip from './InfoTooltip';
+
+const Label: React.FC<{ label: string; description?: string }> = ({ label, description }) => {
+  return (
+    <HStack spacing={1}>
+      <Text>{label}</Text>
+      {description && <InfoTooltip description={description} />}
+    </HStack>
+  );
+};
+
+export default Label;
diff --git a/web/src/features/dialog/components/checkbox.tsx b/web/src/features/dialog/components/checkbox.tsx
index 236c2fc..9ea68b3 100644
--- a/web/src/features/dialog/components/checkbox.tsx
+++ b/web/src/features/dialog/components/checkbox.tsx
@@ -1,6 +1,8 @@
-import { Box, Checkbox } from '@chakra-ui/react';
+import { Box, Checkbox, HStack, Text } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { ICheckbox } from '../../../interfaces/dialog';
+import InfoTooltip from './InfoTooltip';
+import Label from './Label';
 
 interface Props {
   row: ICheckbox;
@@ -20,7 +22,7 @@ const CheckboxField: React.FC<Props> = (props) => {
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
           defaultChecked={props.row.checked}
         >
-          {props.row.label}
+          <Label label={props.row.label} description={props.row.description} />
         </Checkbox>
       </Box>
     </>
diff --git a/web/src/features/dialog/components/input.tsx b/web/src/features/dialog/components/input.tsx
index 09de9dd..c3a8920 100644
--- a/web/src/features/dialog/components/input.tsx
+++ b/web/src/features/dialog/components/input.tsx
@@ -1,7 +1,8 @@
-import { Box, InputGroup, InputLeftElement, InputRightElement, Text, Input } from '@chakra-ui/react';
+import { Box, InputGroup, InputLeftElement, InputRightElement, Input } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect } from 'react';
 import { IInput } from '../../../interfaces/dialog';
+import Label from './Label';
 
 interface Props {
   row: IInput;
@@ -19,7 +20,7 @@ const InputField: React.FC<Props> = (props) => {
   return (
     <>
       <Box mb={3} textAlign="left">
-        <Text>{props.row.label}</Text>
+        <Label label={props.row.label} description={props.row.description} />
         <InputGroup>
           {props.row.icon && (
             <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
diff --git a/web/src/features/dialog/components/number.tsx b/web/src/features/dialog/components/number.tsx
index 20a9cfb..b5b825b 100644
--- a/web/src/features/dialog/components/number.tsx
+++ b/web/src/features/dialog/components/number.tsx
@@ -11,6 +11,7 @@ import {
 import { useEffect } from 'react';
 import { INumber } from '../../../interfaces/dialog';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Label from './Label';
 
 interface Props {
   row: INumber;
@@ -25,7 +26,7 @@ const NumberField: React.FC<Props> = (props) => {
 
   return (
     <Box mb={3}>
-      <Text>{props.row.label}</Text>
+      <Label label={props.row.label} description={props.row.description} />
       <NumberInput
         onChange={(val: string) => props.handleChange(+val, props.index)}
         defaultValue={props.row.default}
diff --git a/web/src/features/dialog/components/slider.tsx b/web/src/features/dialog/components/slider.tsx
index 68a6831..77f83bd 100644
--- a/web/src/features/dialog/components/slider.tsx
+++ b/web/src/features/dialog/components/slider.tsx
@@ -1,6 +1,7 @@
 import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { ISlider } from '../../../interfaces/dialog';
+import Label from './Label';
 
 interface Props {
   row: ISlider;
@@ -18,7 +19,7 @@ const SliderField: React.FC<Props> = (props) => {
   return (
     <>
       <Box mb={3} key={`slider-${props.index}`}>
-        <Text>{props.row.label}</Text>
+        <Label label={props.row.label} description={props.row.description} />
         <Slider
           onChangeEnd={(val: number) => props.handleChange(val, props.index)}
           onChange={(val: number) => setSliderValue(val)}
diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts
index 1f71161..7a50bb6 100644
--- a/web/src/interfaces/dialog.ts
+++ b/web/src/interfaces/dialog.ts
@@ -8,6 +8,7 @@ export interface IInput {
   password?: boolean;
   icon?: IconProp;
   disabled?: boolean;
+  description?: string;
 }
 
 export interface ICheckbox {
@@ -15,6 +16,7 @@ export interface ICheckbox {
   label: string;
   checked?: boolean;
   disabled?: boolean;
+  description?: string;
 }
 
 export interface ISelect {
@@ -23,6 +25,7 @@ export interface ISelect {
   default?: string;
   options?: { value: string; label?: string }[];
   disabled?: boolean;
+  description?: string;
 }
 
 export interface INumber {
@@ -34,6 +37,7 @@ export interface INumber {
   min?: number;
   max?: number;
   disabled?: boolean;
+  description?: string;
 }
 
 export interface ISlider {
@@ -44,4 +48,5 @@ export interface ISlider {
   max?: number;
   step?: number;
   disabled?: boolean;
+  description?: string;
 }