From 09750be1a598bdc19c615a5b8ae0d56fc0d84d09 Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 4 Dec 2024 14:06:15 -0400 Subject: [PATCH 1/5] [TM-1476] [TM-13476] add tree species iu --- src/assets/icons/add-button.svg | 9 + src/assets/icons/edit-ta.svg | 8 + src/assets/icons/new-tag-tree-species.svg | 8 + src/assets/icons/non-scientific name.svg | 9 + src/assets/icons/trash-ta.svg | 8 + .../AutoCompleteInput/AutoCompleteInput.tsx | 15 +- .../elements/Inputs/Input/Input.tsx | 7 +- .../TreeSpeciesInput/TreeSpeciesInput.tsx | 279 +++++++++++++++--- .../elements/Tabs/Default/TabButton.tsx | 15 +- src/components/extensive/Icon/Icon.tsx | 7 +- tailwind.config.js | 2 + 11 files changed, 309 insertions(+), 58 deletions(-) create mode 100644 src/assets/icons/add-button.svg create mode 100644 src/assets/icons/edit-ta.svg create mode 100644 src/assets/icons/new-tag-tree-species.svg create mode 100644 src/assets/icons/non-scientific name.svg create mode 100644 src/assets/icons/trash-ta.svg diff --git a/src/assets/icons/add-button.svg b/src/assets/icons/add-button.svg new file mode 100644 index 000000000..b2d5c5208 --- /dev/null +++ b/src/assets/icons/add-button.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/edit-ta.svg b/src/assets/icons/edit-ta.svg new file mode 100644 index 000000000..85d3d0d07 --- /dev/null +++ b/src/assets/icons/edit-ta.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/new-tag-tree-species.svg b/src/assets/icons/new-tag-tree-species.svg new file mode 100644 index 000000000..e79ab3b38 --- /dev/null +++ b/src/assets/icons/new-tag-tree-species.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/non-scientific name.svg b/src/assets/icons/non-scientific name.svg new file mode 100644 index 000000000..7bb70d7f4 --- /dev/null +++ b/src/assets/icons/non-scientific name.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/trash-ta.svg b/src/assets/icons/trash-ta.svg new file mode 100644 index 000000000..551bd1526 --- /dev/null +++ b/src/assets/icons/trash-ta.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx b/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx index 57c6b16dc..80fa54ab2 100644 --- a/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx +++ b/src/components/elements/Inputs/AutoCompleteInput/AutoCompleteInput.tsx @@ -1,5 +1,6 @@ import { Popover, Transition } from "@headlessui/react"; import { useT } from "@transifex/react"; +import classNames from "classnames"; import { ChangeEvent, forwardRef, Fragment, Ref, useState } from "react"; import { Else, If, Then } from "react-if"; @@ -11,11 +12,16 @@ import Input, { InputProps } from "../Input/Input"; export interface AutoCompleteInputProps extends InputProps { onSearch: (query: string) => Promise; disableAutoComplete?: boolean; + classNameMenu?: string; + onSelected?: (item: string) => void; } //TODO: Bugfix: Users can enter space in this input const AutoCompleteInput = forwardRef( - ({ onSearch, disableAutoComplete, ...inputProps }: AutoCompleteInputProps, ref?: Ref) => { + ( + { onSearch, disableAutoComplete, classNameMenu, onSelected, ...inputProps }: AutoCompleteInputProps, + ref?: Ref + ) => { const t = useT(); const [list, setList] = useState([]); const [loading, setLoading] = useState(false); @@ -27,6 +33,8 @@ const AutoCompleteInput = forwardRef( inputProps.onChange?.({ target: { name: inputProps.name, value: item } } as ChangeEvent); } + onSelected?.(item); + setList([]); }; @@ -63,7 +71,10 @@ const AutoCompleteInput = forwardRef( leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0" > - + diff --git a/src/components/elements/Inputs/Input/Input.tsx b/src/components/elements/Inputs/Input/Input.tsx index 9bc551e42..a1ae18309 100644 --- a/src/components/elements/Inputs/Input/Input.tsx +++ b/src/components/elements/Inputs/Input/Input.tsx @@ -14,7 +14,7 @@ export interface InputProps extends InputWrapperProps, Omit, HTMLInputElement>, "type" | "form"> { name: string; - variant?: "secondary" | "default" | "login" | "signup" | "monitored"; + variant?: "secondary" | "default" | "login" | "signup" | "monitored" | "treePlanted"; formHook?: UseFormReturn; clearable?: boolean; iconButtonProps?: IconButtonProps; @@ -112,6 +112,11 @@ const Input = forwardRef( true, "pl-4": inputProps.type === "number", "border-neutral-300": !error + }, + treePlanted: { + "py-[7.5px] py-1.5 !w-[100px] text-center border border-blueCustom-700 rounded hover:border-primary hover:shadow-blue-border opacity-60 outline-none text-14-light !font-primary": + true, + "text-center": inputProps.type === "number" } }; diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx index ca047e0cd..615dd8321 100644 --- a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx +++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx @@ -1,11 +1,12 @@ import { useT } from "@transifex/react"; +import classNames from "classnames"; import { remove } from "lodash"; -import { Fragment, KeyboardEvent, useCallback, useId, useRef } from "react"; +import { Fragment, KeyboardEvent, useCallback, useId, useRef, useState } from "react"; import { FieldError, FieldErrors } from "react-hook-form"; -import { When } from "react-if"; +import { Else, If, Then, When } from "react-if"; import { v4 as uuidv4 } from "uuid"; -import { IconNames } from "@/components/extensive/Icon/Icon"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; import List from "@/components/extensive/List/List"; import { useDebounce } from "@/hooks/useDebounce"; import { updateArrayState } from "@/utils/array"; @@ -14,6 +15,7 @@ import Button from "../../Button/Button"; import ErrorMessage from "../../ErrorMessage/ErrorMessage"; import IconButton from "../../IconButton/IconButton"; import Text from "../../Text/Text"; +import AutoCompleteInput from "../AutoCompleteInput/AutoCompleteInput"; import Input from "../Input/Input"; import InputWrapper, { InputWrapperProps } from "../InputElements/InputWrapper"; @@ -31,13 +33,21 @@ export interface TreeSpeciesInputProps extends Omit error?: FieldErrors[]; } -export type TreeSpeciesValue = { uuid?: string; name?: string; amount?: number }; +export type TreeSpeciesValue = { uuid?: string; name?: string; amount?: number; new?: boolean }; const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { const id = useId(); const t = useT(); const lastInputRef = useRef(null); + const [valueAutoComplete, setValueAutoComplete] = useState(""); + const [editIndex, setEditIndex] = useState(null); + const [deleteIndex, setDeleteIndex] = useState(null); + const [editValue, setEditValue] = useState(null); + const refPlanted = useRef(null); + const refTotal = useRef(null); + const refTreeSpecies = useRef(null); + const { onChange, value, clearErrors, collection } = props; const handleCreate = useDebounce( @@ -74,7 +84,12 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { const addValue = (e: React.MouseEvent | KeyboardEvent) => { e.preventDefault(); if (!props.error) { - handleCreate?.({ uuid: uuidv4(), name: undefined, amount: undefined }); + if (!props.withNumbers) { + handleCreate?.({ uuid: uuidv4(), name: valueAutoComplete, amount: 0, new: true }); + } else { + handleCreate?.({ uuid: uuidv4(), name: valueAutoComplete, amount: 0 }); + } + lastInputRef.current && lastInputRef.current.focus(); } }; @@ -88,78 +103,246 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { return (
-
- - {props.title} ({props.value.length}) + +
+ + If you would like to add a species not included on the original Restoration Project, it will be flagged to + the admin as new information pending review. +
+ +
+ + {t("Scientific Name:")} - - - {t(`Total Count: ({number})`, { number: props.value.reduce((total, v) => total + (v.amount || 0), 0) })} +
+
+ setValueAutoComplete(e.target.value)} + onSearch={(query: string) => { + console.log("Query", query); + if (query === "non-scientific name") return Promise.resolve([]); + return Promise.resolve([ + "Amadea diffusa", + "Amadea occidentalis", + "Amadea puberulenta", + "Amadea lorem ipsum", + "Amadea lorem ipsum" + ]); + }} + onSelected={item => { + console.log(item); + setValueAutoComplete(item); + }} + /> + 0}> + + +
+ + + + + + + + +
+
+ +
+ + {t("No matches available")} + +
+ + + {t("You can this add, but it will be pending review from Admin.")} + +
+
+ +
+
+ + {props.title} + + {props.value.length} + +
+
+ + {props.withNumbers ? "TREES TO BE PLANTED:" : "SPECIES PLANTED:"} + + + {props.withNumbers ? props.value.reduce((total, v) => total + (v.amount || 0), 0) : "0"} + +
+ +
+ + {"TOTAL PLANTED TO DATE:"} + + + 47,800 + +
- ( -
- handleUpdate({ ...value, name: e.target.value })} - placeholder={t("Species Name")} - error={props.error?.[index]?.name ? ({} as FieldError) : undefined} - onKeyDownCapture={onKeyDownCapture} - containerClassName="flex-1" - /> - +
+ +
+ + {t(`Are you sure you want to delete “${value.name}”?`)} + +
+ + +
+
+ + +
+ + + {t(`NEW ${value.name}`)} + +
+ +
+
+ + + + + + + + {t(value.name)} + +
+
+
handleUpdate({ ...value, amount: +e.target.value })} + onChange={e => (props.withNumbers ? handleUpdate({ ...value, amount: +e.target.value }) : {})} onKeyDownCapture={onKeyDownCapture} - containerClassName="flex-3" + containerClassName="" /> +
+ + + 7,400 + + + +
+ { + setEditIndex(value.uuid ?? null); + setEditValue(value); + }} + /> + setDeleteIndex(value.uuid ?? null)} + /> +
- handleDelete(props.value?.[index]?.uuid)} - />
)} /> -
); diff --git a/src/components/elements/Tabs/Default/TabButton.tsx b/src/components/elements/Tabs/Default/TabButton.tsx index 97e284389..1f533454f 100644 --- a/src/components/elements/Tabs/Default/TabButton.tsx +++ b/src/components/elements/Tabs/Default/TabButton.tsx @@ -30,19 +30,22 @@ export const TabButton = forwardRef( className, "w-full items-center focus:outline-none disabled:text-neutral-900", item.done && "peer", - lastItem || selected ? "border-b" : "border-b-0", + lastItem || selected ? "border-b" : "border-b", selected - ? "border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary" + ? "border border-success bg-white text-blueCustom-900 peer-aria-checked:shadow-t-secondary" : item.done - ? `border-secondary-500 bg-secondary-300 text-neutral-800 ` - : `border-neutral-100 bg-neutral-300 text-neutral-900` + ? `border-white bg-primary text-white ` + : `border-b border-white bg-grey-950 text-blueCustom-900` )} > - + {item.title} - + + + + ); diff --git a/src/components/extensive/Icon/Icon.tsx b/src/components/extensive/Icon/Icon.tsx index 654c1e1e4..6b5861781 100644 --- a/src/components/extensive/Icon/Icon.tsx +++ b/src/components/extensive/Icon/Icon.tsx @@ -200,7 +200,12 @@ export enum IconNames { ORANGE_DOTS = "orange-dots", IC_NOTIFICATION = "notification", IC_LOADING = "loading", - IC_INFO_WHITE_BLACK = "ic-info-white-black" + IC_INFO_WHITE_BLACK = "ic-info-white-black", + IC_ADD_BUTTON = "add-button", + TRASH_TA = "trash-ta", + EDIT_TA = "edit-ta", + NON_SCIENTIFIC_NAME = "non-scientific name", + NEW_TAG_TREE_SPECIES = "new-tag-tree-species" } export interface IconProps { diff --git a/tailwind.config.js b/tailwind.config.js index 45e929c37..197389d0d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -90,6 +90,7 @@ module.exports = { 600: "#29C499", 500: "#009344", 450: "#3BAE5B", + 410: "#27E045", 400: "#9EDD8F", 300: "#C7ECC4", 200: "#E0F3E9", @@ -106,6 +107,7 @@ module.exports = { 400: "#B1B1B1", 450: "#CCD4D6", 300: "#D8D8D8", + 250: "#F7F7F7", 200: "#E3E3E3", 150: "#F5F7F9", 100: "#F2F2F2", From 93e0613c45628ce9b0a6c07fa1cfff12a543ce01 Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 4 Dec 2024 14:09:52 -0400 Subject: [PATCH 2/5] [TM-1476] [TM-13476] fix build --- .../elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx index 615dd8321..6e1ec4650 100644 --- a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx +++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx @@ -124,6 +124,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
Date: Wed, 4 Dec 2024 14:18:47 -0400 Subject: [PATCH 3/5] [TM-1476] update snapshots --- .../TreeSpeciesInput.stories.storyshot | 436 +++++++++++++----- .../__snapshots__/Table.stories.storyshot | 72 +-- .../__snapshots__/Tabs.stories.storyshot | 24 +- .../SecondaryTabs.stories.storyshot | 12 +- .../__snapshots__/ModalAdd.stories.storyshot | 2 +- .../ModalConfirm.stories.storyshot | 2 +- .../ModalSubmit.stories.storyshot | 2 +- .../ModalWithLogo.stories.storyshot | 2 +- .../PerPageSelector.stories.storyshot | 6 +- .../MainLayout.stories.storyshot | 4 +- .../__snapshots__/Navbar.stories.storyshot | 8 +- 11 files changed, 392 insertions(+), 178 deletions(-) diff --git a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot index 1e1feb841..70549b0e9 100644 --- a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot +++ b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot @@ -7,9 +7,9 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `

+
+ If you would like to add a species not included on the original Restoration Project, it will be flagged to the admin as new information pending review. +
+

- ( - 1 - ) + Scientific Name:

-
-
- +
+
+ +
+
- +

+ TOTAL PLANTED TO DATE: +

+

+ 47,800 +

+
+
+
+
+
+
+

+ Test +

+
+
+
+
+
+ +
+
+
+

+ 7,400 +

+
+
`; @@ -104,9 +226,9 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]

- ( - 1 - ) -

-

- Total Count: (23) + Scientific Name:

-
-
- -
-
-
-
- +
+
+ +
+
-
+
+
- Add Another undefined - - +
+
+

+ Test +

+
+
+
+
+
+ +
+
+
+
+ + +
+
+
`; diff --git a/src/components/elements/Table/__snapshots__/Table.stories.storyshot b/src/components/elements/Table/__snapshots__/Table.stories.storyshot index 90fe654fd..3ff9deb0d 100644 --- a/src/components/elements/Table/__snapshots__/Table.stories.storyshot +++ b/src/components/elements/Table/__snapshots__/Table.stories.storyshot @@ -47,7 +47,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = ` className="text-16-bold" data-headlessui-state="" data-testid="txt" - id="headlessui-listbox-label-:r29:" + id="headlessui-listbox-label-:r2e:" onClick={[Function]} > Funding source @@ -58,11 +58,11 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
Funding source @@ -921,11 +921,11 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
Funding source @@ -1784,11 +1784,11 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
Funding source @@ -2647,11 +2647,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
Funding source @@ -3513,11 +3513,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
Funding source @@ -4377,11 +4377,11 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
Funding source @@ -5240,11 +5240,11 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
Funding source @@ -6106,11 +6106,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
Funding source @@ -6973,11 +6973,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
Funding source @@ -7840,11 +7840,11 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
Funding source @@ -8704,11 +8704,11 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
Funding source @@ -9570,11 +9570,11 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
+