From cf05a46719b75853fb9078d5fcd76bfb324197d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa?= Date: Fri, 24 May 2024 14:18:22 +0200 Subject: [PATCH] fix max stack --- package.json | 2 + src/components/contextual/basemaps.tsx | 4 +- src/components/contextual/card.tsx | 4 +- .../contextual/contextual-basemaps.tsx | 4 +- src/components/download-links/index.tsx | 2 +- .../map/controls/basemap-settings/index.tsx | 4 +- .../map/controls/fullscreen/index.tsx | 2 +- .../map/controls/pitch-reset/component.tsx | 2 +- src/components/map/controls/share/index.tsx | 6 +- .../map/controls/zoom/component.tsx | 2 +- src/components/map/legend/mock.tsx | 2 +- src/components/map/legend/types.ts | 2 +- src/components/planet-date-select/index.tsx | 4 +- src/components/suggested-layers/index.tsx | 2 +- src/components/{ => ui}/checkbox/index.tsx | 2 +- src/components/{ => ui}/command/index.tsx | 2 +- src/components/{ => ui}/dialog/index.tsx | 2 +- src/components/{ => ui}/dropdown/index.tsx | 0 src/components/{ => ui}/icon/index.tsx | 0 src/components/{ => ui}/icon/types.d.ts | 0 src/components/{ => ui}/input/index.tsx | 0 src/components/{ => ui}/loading/index.tsx | 2 +- src/components/{ => ui}/loading/types.d.ts | 0 src/components/{ => ui}/popover/index.tsx | 0 src/components/{ => ui}/popup/index.tsx | 0 src/components/{ => ui}/radio-group/index.tsx | 0 .../radio-group/radio-group-item/index.tsx | 0 .../{ => ui}/radio-group/types.d.ts | 0 .../{ => ui}/select-multi/constants/theme.ts | 0 .../{ => ui}/select-multi/index.tsx | 2 +- .../{ => ui}/select-multi/option/index.tsx | 6 +- .../{ => ui}/select-multi/types.d.ts | 0 src/components/{ => ui}/select/index.tsx | 2 +- src/components/{ => ui}/slider/index.tsx | 0 src/components/{ => ui}/switch/index.tsx | 0 src/components/ui/toast/index.tsx | 129 ++++++++++++ src/components/ui/toaster/index.tsx | 33 ++++ src/components/{ => ui}/tooltip/component.tsx | 0 src/components/{ => ui}/tooltip/index.tsx | 0 src/components/ui/use-toast/index.tsx | 187 ++++++++++++++++++ .../widget-controls/download/index.tsx | 4 +- src/components/widget-controls/index.tsx | 2 +- src/components/widget-controls/info/index.tsx | 4 +- src/containers/alert/index.tsx | 4 +- src/containers/categories-menu/index.tsx | 4 +- src/containers/datasets/alerts/widget.tsx | 6 +- src/containers/datasets/biomass/widget.tsx | 2 +- .../datasets/blue-carbon/widget.tsx | 2 +- .../carbon-market-potential/widget.tsx | 6 +- .../planet/contextual-basemaps/card.tsx | 4 +- .../protected-areas/layer.tsx | 5 +- .../customize-widgets-deck/widget.tsx | 4 +- .../datasets/drawing-tool/index.tsx | 3 +- .../datasets/drawing-upload-tool/index.tsx | 20 +- .../datasets/drivers-change/widget.tsx | 2 +- .../datasets/emissions-mitigation/widget.tsx | 2 +- src/containers/datasets/fisheries/widget.tsx | 2 +- .../datasets/flood-protection/widget.tsx | 8 +- .../datasets/habitat-change/widget.tsx | 6 +- .../datasets/habitat-extent/widget.tsx | 6 +- src/containers/datasets/height/widget.tsx | 2 +- .../climate-watch/index.tsx | 2 +- .../climate-watch/indicator/index.tsx | 4 +- .../international-status/frel-ipcc/index.tsx | 2 +- .../datasets/iucn-ecoregion/layer.tsx | 5 +- .../datasets/iucn-ecoregion/widget.tsx | 4 +- .../indicator-source/index.tsx | 6 +- .../datasets/national-dashboard/widget.tsx | 2 +- src/containers/datasets/net-change/widget.tsx | 6 +- src/containers/datasets/protection/widget.tsx | 6 +- .../restoration-sites/filter-sites/index.tsx | 4 +- .../selected-filters/index.tsx | 2 +- .../datasets/restoration-sites/widget.tsx | 4 +- .../datasets/restoration/fisheries/widget.tsx | 4 +- src/containers/datasets/restoration/layer.tsx | 6 +- .../datasets/restoration/loss/widget.tsx | 2 +- .../overview/mean-restoration/chart.tsx | 2 +- .../overview/mean-restoration/widget.tsx | 2 +- .../overview/restorable-areas/widget.tsx | 2 +- .../restoration/restoration-value/widget.tsx | 2 +- .../datasets/species-distribution/widget.tsx | 4 +- .../datasets/species-location/widget.tsx | 8 +- .../datasets/species-threatened/legend.tsx | 2 +- .../datasets/species-threatened/widget.tsx | 2 +- src/containers/guide/switcher/index.tsx | 2 +- .../location-dialog-content/index.tsx | 2 +- src/containers/location-widget/index.tsx | 2 +- src/containers/locations-list/index.tsx | 2 +- .../map/delete-drawing-button/index.tsx | 2 +- src/containers/map/index.tsx | 2 +- .../map/iucn-ecoregion-popup/index.tsx | 2 +- src/containers/map/legend/item/index.tsx | 10 +- src/containers/map/location-pop-up/index.tsx | 2 +- .../navigation/language-selector/index.tsx | 4 +- .../navigation/location-tools/index.tsx | 4 +- .../navigation/map-settings/index.tsx | 2 +- src/containers/navigation/menu/index.tsx | 4 +- .../navigation/mobile/configure/index.tsx | 4 +- .../mobile/language-selector/index.tsx | 4 +- .../navigation/mobile/locations/index.tsx | 4 +- .../navigation/mobile/map-toggle/index.tsx | 2 +- .../navigation/mobile/news/index.tsx | 4 +- src/containers/navigation/news/index.tsx | 4 +- src/containers/news/content/index.tsx | 2 +- src/containers/widget/index.tsx | 2 +- src/containers/widgets/index.tsx | 4 +- src/containers/widgets/no-data/index.tsx | 2 +- src/containers/widgets/widgets-menu/index.tsx | 3 +- src/layouts/mobile/index.tsx | 2 +- src/pages/_app.tsx | 5 +- src/pages/_document.tsx | 2 + yarn.lock | 113 +++++++++++ 112 files changed, 632 insertions(+), 155 deletions(-) rename src/components/{ => ui}/checkbox/index.tsx (97%) rename src/components/{ => ui}/command/index.tsx (98%) rename src/components/{ => ui}/dialog/index.tsx (99%) rename src/components/{ => ui}/dropdown/index.tsx (100%) rename src/components/{ => ui}/icon/index.tsx (100%) rename src/components/{ => ui}/icon/types.d.ts (100%) rename src/components/{ => ui}/input/index.tsx (100%) rename src/components/{ => ui}/loading/index.tsx (96%) rename src/components/{ => ui}/loading/types.d.ts (100%) rename src/components/{ => ui}/popover/index.tsx (100%) rename src/components/{ => ui}/popup/index.tsx (100%) rename src/components/{ => ui}/radio-group/index.tsx (100%) rename src/components/{ => ui}/radio-group/radio-group-item/index.tsx (100%) rename src/components/{ => ui}/radio-group/types.d.ts (100%) rename src/components/{ => ui}/select-multi/constants/theme.ts (100%) rename src/components/{ => ui}/select-multi/index.tsx (99%) rename src/components/{ => ui}/select-multi/option/index.tsx (91%) rename src/components/{ => ui}/select-multi/types.d.ts (100%) rename src/components/{ => ui}/select/index.tsx (98%) rename src/components/{ => ui}/slider/index.tsx (100%) rename src/components/{ => ui}/switch/index.tsx (100%) create mode 100644 src/components/ui/toast/index.tsx create mode 100644 src/components/ui/toaster/index.tsx rename src/components/{ => ui}/tooltip/component.tsx (100%) rename src/components/{ => ui}/tooltip/index.tsx (100%) create mode 100644 src/components/ui/use-toast/index.tsx diff --git a/package.json b/package.json index 9bfcde2fb..3f640c688 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@radix-ui/react-select": "^1.2.1", "@radix-ui/react-slider": "1.1.2", "@radix-ui/react-switch": "^1.0.2", + "@radix-ui/react-toast": "1.1.5", "@radix-ui/react-toggle": "^1.0.2", "@radix-ui/react-tooltip": "^1.0.5", "@tailwindcss/forms": "0.5.3", @@ -56,6 +57,7 @@ "autoprefixer": "^10.4.19", "axios": "1.6.0", "chroma-js": "^2.4.2", + "class-variance-authority": "^0.7.0", "classnames": "^2.3.2", "cmdk": "0.2.0", "d3-format": "3.1.0", diff --git a/src/components/contextual/basemaps.tsx b/src/components/contextual/basemaps.tsx index 074ac808b..58549ea2e 100644 --- a/src/components/contextual/basemaps.tsx +++ b/src/components/contextual/basemaps.tsx @@ -10,8 +10,8 @@ import { useRecoilState } from 'recoil'; import BASEMAPS, { BasemapId } from 'containers/datasets/contextual-layers/basemaps'; -import { Checkbox, CheckboxIndicator } from 'components/checkbox'; -import Icon from 'components/icon'; +import { Checkbox, CheckboxIndicator } from 'components/ui/checkbox'; +import Icon from 'components/ui/icon'; import CHECK_SVG from 'svgs/ui/check.svg?sprite'; diff --git a/src/components/contextual/card.tsx b/src/components/contextual/card.tsx index 582aa12ba..f88a0f669 100644 --- a/src/components/contextual/card.tsx +++ b/src/components/contextual/card.tsx @@ -12,8 +12,8 @@ import { useRecoilState } from 'recoil'; import { INFO } from 'containers/datasets'; import type { BasemapId } from 'containers/datasets/contextual-layers/basemaps'; -import { Checkbox, CheckboxIndicator } from 'components/checkbox'; -import Icon from 'components/icon'; +import { Checkbox, CheckboxIndicator } from 'components/ui/checkbox'; +import Icon from 'components/ui/icon'; import Info from 'components/widget-controls/info'; import { WIDGET_CARD_WRAPPER_STYLE } from 'styles/widgets'; import type { ContextualBasemapsId, MosaicId, WidgetSlugType } from 'types/widget'; diff --git a/src/components/contextual/contextual-basemaps.tsx b/src/components/contextual/contextual-basemaps.tsx index 0befa4ff0..7c28b571a 100644 --- a/src/components/contextual/contextual-basemaps.tsx +++ b/src/components/contextual/contextual-basemaps.tsx @@ -9,8 +9,8 @@ import { useRecoilState } from 'recoil'; import { CONTEXTUAL_LAYERS_PLANET_SERIES_ATTRIBUTES } from 'containers/datasets/contextual-layers/constants'; import DateSelect from 'components/planet-date-select'; -import RadioGroup from 'components/radio-group'; -import RadioGroupItem from 'components/radio-group/radio-group-item'; +import RadioGroup from 'components/ui/radio-group'; +import RadioGroupItem from 'components/ui/radio-group/radio-group-item'; import type { ActiveLayers } from 'types/layers'; import type { ContextualBasemapsId } from 'types/widget'; diff --git a/src/components/download-links/index.tsx b/src/components/download-links/index.tsx index ab2c5e90e..ef51dd669 100644 --- a/src/components/download-links/index.tsx +++ b/src/components/download-links/index.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import cn from 'lib/classnames'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import ARROW_SVG from 'svgs/ui/arrow.svg'; diff --git a/src/components/map/controls/basemap-settings/index.tsx b/src/components/map/controls/basemap-settings/index.tsx index ec9c57e2e..e14a6a5f2 100644 --- a/src/components/map/controls/basemap-settings/index.tsx +++ b/src/components/map/controls/basemap-settings/index.tsx @@ -4,8 +4,8 @@ import Helper from 'containers/guide/helper'; import Basemaps from 'components/contextual/basemaps'; import BasemapsContextualMapSettings from 'components/contextual/contextual-basemaps'; -import { Dialog, DialogClose, DialogContent, DialogTrigger } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogClose, DialogContent, DialogTrigger } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import BASEMAP_SETTINGS_SVG from 'svgs/map/basemap-settings.svg?sprite'; diff --git a/src/components/map/controls/fullscreen/index.tsx b/src/components/map/controls/fullscreen/index.tsx index 8c85ce36a..ddbb1f6a4 100644 --- a/src/components/map/controls/fullscreen/index.tsx +++ b/src/components/map/controls/fullscreen/index.tsx @@ -6,7 +6,7 @@ import { fullScreenAtom } from 'store/map-settings'; import { useRecoilState } from 'recoil'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import DISABLE_FULLSCREEN_SVG from 'svgs/map/disable-fullscreen.svg?sprite'; import ENABLE_FULLSCREEN_SVG from 'svgs/map/enable-fullscreen.svg?sprite'; diff --git a/src/components/map/controls/pitch-reset/component.tsx b/src/components/map/controls/pitch-reset/component.tsx index 23f2bcfe1..2ac5a2bb9 100644 --- a/src/components/map/controls/pitch-reset/component.tsx +++ b/src/components/map/controls/pitch-reset/component.tsx @@ -4,7 +4,7 @@ import { useMap } from 'react-map-gl'; import cn from 'lib/classnames'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import NAVIGATION_SVG from 'svgs/map/navigation.svg?sprite'; diff --git a/src/components/map/controls/share/index.tsx b/src/components/map/controls/share/index.tsx index c46551d0e..928f71023 100644 --- a/src/components/map/controls/share/index.tsx +++ b/src/components/map/controls/share/index.tsx @@ -4,9 +4,9 @@ import { useRouter } from 'next/router'; import cn from 'lib/classnames'; -import { Dialog, DialogClose, DialogContent, DialogTrigger } from 'components/dialog'; -import Icon from 'components/icon'; -import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from 'components/tooltip'; +import { Dialog, DialogClose, DialogContent, DialogTrigger } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; +import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from 'components/ui/tooltip'; import SHARE_SVG from 'svgs/map/share.svg?sprite'; diff --git a/src/components/map/controls/zoom/component.tsx b/src/components/map/controls/zoom/component.tsx index bccd9b75d..38fd85498 100644 --- a/src/components/map/controls/zoom/component.tsx +++ b/src/components/map/controls/zoom/component.tsx @@ -4,7 +4,7 @@ import { useMap } from 'react-map-gl'; import cn from 'lib/classnames'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import ZOOM_IN_SVG from 'svgs/map/zoom-in.svg?sprite'; import ZOOM_OUT_SVG from 'svgs/map/zoom-out.svg?sprite'; diff --git a/src/components/map/legend/mock.tsx b/src/components/map/legend/mock.tsx index aa2a50d2b..e556b70ae 100644 --- a/src/components/map/legend/mock.tsx +++ b/src/components/map/legend/mock.tsx @@ -1,4 +1,4 @@ -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import HEXAGON_SVG from 'svgs/map/hexagon.svg'; diff --git a/src/components/map/legend/types.ts b/src/components/map/legend/types.ts index bfcdbe2ee..0f6ccfcb1 100644 --- a/src/components/map/legend/types.ts +++ b/src/components/map/legend/types.ts @@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react'; import { DraggableAttributes } from '@dnd-kit/core'; import { SyntheticListeners } from '@dnd-kit/core/dist/hooks/utilities'; -import { IconProps } from 'components/icon/types'; +import { IconProps } from 'components/ui/icon/types'; type Components = { Info: React.ReactNode; diff --git a/src/components/planet-date-select/index.tsx b/src/components/planet-date-select/index.tsx index ad32621ab..eda81159c 100644 --- a/src/components/planet-date-select/index.tsx +++ b/src/components/planet-date-select/index.tsx @@ -15,8 +15,8 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from 'components/dropdown'; -import Icon from 'components/icon'; +} from 'components/ui/dropdown'; +import Icon from 'components/ui/icon'; import type { ContextualBasemapsId, MosaicId, WidgetSlugType } from 'types/widget'; import ARROW_SVG from 'svgs/ui/arrow.svg?sprite'; diff --git a/src/components/suggested-layers/index.tsx b/src/components/suggested-layers/index.tsx index 725ea4f8b..f1d0babde 100644 --- a/src/components/suggested-layers/index.tsx +++ b/src/components/suggested-layers/index.tsx @@ -6,7 +6,7 @@ import { activeLayersAtom } from 'store/layers'; import { useRecoilState } from 'recoil'; -import { SwitchWrapper, SwitchRoot, SwitchThumb } from 'components/switch'; +import { SwitchWrapper, SwitchRoot, SwitchThumb } from 'components/ui/switch'; import type { ActiveLayers } from 'types/layers'; import type { ContextualBasemapsId, WidgetSlugType } from 'types/widget'; diff --git a/src/components/checkbox/index.tsx b/src/components/ui/checkbox/index.tsx similarity index 97% rename from src/components/checkbox/index.tsx rename to src/components/ui/checkbox/index.tsx index e9abb3847..079901e8c 100644 --- a/src/components/checkbox/index.tsx +++ b/src/components/ui/checkbox/index.tsx @@ -4,7 +4,7 @@ import cn from 'lib/classnames'; import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import CHECK_SVG from 'svgs/ui/check.svg?sprite'; diff --git a/src/components/command/index.tsx b/src/components/ui/command/index.tsx similarity index 98% rename from src/components/command/index.tsx rename to src/components/ui/command/index.tsx index 858932eb9..118a071de 100644 --- a/src/components/command/index.tsx +++ b/src/components/ui/command/index.tsx @@ -6,7 +6,7 @@ import cn from 'lib/classnames'; import { DialogProps } from '@radix-ui/react-dialog'; import { Command as CommandPrimitive } from 'cmdk'; -import { Dialog, DialogContent } from 'components/dialog'; +import { Dialog, DialogContent } from 'components/ui/dialog'; const Command = forwardRef< ElementRef, diff --git a/src/components/dialog/index.tsx b/src/components/ui/dialog/index.tsx similarity index 99% rename from src/components/dialog/index.tsx rename to src/components/ui/dialog/index.tsx index 3408a1c7e..717ca20ea 100644 --- a/src/components/dialog/index.tsx +++ b/src/components/ui/dialog/index.tsx @@ -4,7 +4,7 @@ import cn from 'lib/classnames'; import * as DialogPrimitive from '@radix-ui/react-dialog'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; diff --git a/src/components/dropdown/index.tsx b/src/components/ui/dropdown/index.tsx similarity index 100% rename from src/components/dropdown/index.tsx rename to src/components/ui/dropdown/index.tsx diff --git a/src/components/icon/index.tsx b/src/components/ui/icon/index.tsx similarity index 100% rename from src/components/icon/index.tsx rename to src/components/ui/icon/index.tsx diff --git a/src/components/icon/types.d.ts b/src/components/ui/icon/types.d.ts similarity index 100% rename from src/components/icon/types.d.ts rename to src/components/ui/icon/types.d.ts diff --git a/src/components/input/index.tsx b/src/components/ui/input/index.tsx similarity index 100% rename from src/components/input/index.tsx rename to src/components/ui/input/index.tsx diff --git a/src/components/loading/index.tsx b/src/components/ui/loading/index.tsx similarity index 96% rename from src/components/loading/index.tsx rename to src/components/ui/loading/index.tsx index b4e367047..09a666911 100644 --- a/src/components/loading/index.tsx +++ b/src/components/ui/loading/index.tsx @@ -5,7 +5,7 @@ import cn from 'lib/classnames'; import cx from 'classnames'; import { motion, AnimatePresence } from 'framer-motion'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import LOADING_SVG from 'svgs/ui/loading.svg?sprite'; diff --git a/src/components/loading/types.d.ts b/src/components/ui/loading/types.d.ts similarity index 100% rename from src/components/loading/types.d.ts rename to src/components/ui/loading/types.d.ts diff --git a/src/components/popover/index.tsx b/src/components/ui/popover/index.tsx similarity index 100% rename from src/components/popover/index.tsx rename to src/components/ui/popover/index.tsx diff --git a/src/components/popup/index.tsx b/src/components/ui/popup/index.tsx similarity index 100% rename from src/components/popup/index.tsx rename to src/components/ui/popup/index.tsx diff --git a/src/components/radio-group/index.tsx b/src/components/ui/radio-group/index.tsx similarity index 100% rename from src/components/radio-group/index.tsx rename to src/components/ui/radio-group/index.tsx diff --git a/src/components/radio-group/radio-group-item/index.tsx b/src/components/ui/radio-group/radio-group-item/index.tsx similarity index 100% rename from src/components/radio-group/radio-group-item/index.tsx rename to src/components/ui/radio-group/radio-group-item/index.tsx diff --git a/src/components/radio-group/types.d.ts b/src/components/ui/radio-group/types.d.ts similarity index 100% rename from src/components/radio-group/types.d.ts rename to src/components/ui/radio-group/types.d.ts diff --git a/src/components/select-multi/constants/theme.ts b/src/components/ui/select-multi/constants/theme.ts similarity index 100% rename from src/components/select-multi/constants/theme.ts rename to src/components/ui/select-multi/constants/theme.ts diff --git a/src/components/select-multi/index.tsx b/src/components/ui/select-multi/index.tsx similarity index 99% rename from src/components/select-multi/index.tsx rename to src/components/ui/select-multi/index.tsx index d104cf9c1..4974818db 100644 --- a/src/components/select-multi/index.tsx +++ b/src/components/ui/select-multi/index.tsx @@ -5,7 +5,7 @@ import cn from 'lib/classnames'; import { Listbox } from '@headlessui/react'; import { Float } from '@headlessui-float/react'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import ARROW_SVG from 'svgs/ui/arrow.svg?sprite'; diff --git a/src/components/select-multi/option/index.tsx b/src/components/ui/select-multi/option/index.tsx similarity index 91% rename from src/components/select-multi/option/index.tsx rename to src/components/ui/select-multi/option/index.tsx index 30543911a..791c636ea 100644 --- a/src/components/select-multi/option/index.tsx +++ b/src/components/ui/select-multi/option/index.tsx @@ -1,10 +1,8 @@ -import cn from 'lib/classnames'; - import { Listbox } from '@headlessui/react'; import cx from 'classnames'; -import { Checkbox, CheckboxIndicator } from 'components/checkbox'; -import Icon from 'components/icon'; +import { Checkbox, CheckboxIndicator } from 'components/ui/checkbox'; +import Icon from 'components/ui/icon'; import CHECK_SVG from 'svgs/ui/check-light.svg?sprite'; diff --git a/src/components/select-multi/types.d.ts b/src/components/ui/select-multi/types.d.ts similarity index 100% rename from src/components/select-multi/types.d.ts rename to src/components/ui/select-multi/types.d.ts diff --git a/src/components/select/index.tsx b/src/components/ui/select/index.tsx similarity index 98% rename from src/components/select/index.tsx rename to src/components/ui/select/index.tsx index 60853afbb..d71225a82 100644 --- a/src/components/select/index.tsx +++ b/src/components/ui/select/index.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; import cn from 'classnames'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite'; diff --git a/src/components/slider/index.tsx b/src/components/ui/slider/index.tsx similarity index 100% rename from src/components/slider/index.tsx rename to src/components/ui/slider/index.tsx diff --git a/src/components/switch/index.tsx b/src/components/ui/switch/index.tsx similarity index 100% rename from src/components/switch/index.tsx rename to src/components/ui/switch/index.tsx diff --git a/src/components/ui/toast/index.tsx b/src/components/ui/toast/index.tsx new file mode 100644 index 000000000..3d47f138f --- /dev/null +++ b/src/components/ui/toast/index.tsx @@ -0,0 +1,129 @@ +'use client'; + +import * as React from 'react'; + +import cn from 'lib/classnames'; + +import * as ToastPrimitives from '@radix-ui/react-toast'; +import { cva, type VariantProps } from 'class-variance-authority'; + +import Icon from 'components/ui/icon'; + +import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; + +const ToastProvider = ToastPrimitives.Provider; + +const ToastViewport = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ToastViewport.displayName = ToastPrimitives.Viewport.displayName; + +const toastVariants = cva( + 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', + { + variants: { + variant: { + default: 'border bg-background text-foreground', + destructive: + 'destructive group border-destructive bg-destructive text-destructive-foreground', + }, + }, + defaultVariants: { + variant: 'default', + }, + } +); + +const Toast = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & VariantProps +>(({ variant, ...props }, ref) => { + return ; +}); +Toast.displayName = ToastPrimitives.Root.displayName; + +const ToastAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ToastAction.displayName = ToastPrimitives.Action.displayName; + +const ToastClose = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +ToastClose.displayName = ToastPrimitives.Close.displayName; + +const ToastTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ToastTitle.displayName = ToastPrimitives.Title.displayName; + +const ToastDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +ToastDescription.displayName = ToastPrimitives.Description.displayName; + +type ToastProps = React.ComponentPropsWithoutRef; + +type ToastActionElement = React.ReactElement; + +export { + type ToastProps, + type ToastActionElement, + ToastProvider, + ToastViewport, + Toast, + ToastTitle, + ToastDescription, + ToastClose, + ToastAction, +}; diff --git a/src/components/ui/toaster/index.tsx b/src/components/ui/toaster/index.tsx new file mode 100644 index 000000000..79667b77b --- /dev/null +++ b/src/components/ui/toaster/index.tsx @@ -0,0 +1,33 @@ +'use client'; + +import { + Toast, + ToastClose, + ToastDescription, + ToastProvider, + ToastTitle, + ToastViewport, +} from 'components/ui/toast'; +import { useToast } from 'components/ui/use-toast'; + +export function Toaster() { + const { toasts } = useToast(); + + return ( + + {toasts.map(function ({ id, title, description, action, ...props }) { + return ( + +
+ {title && {title}} + {description && {description}} +
+ {action} + + + ); + })} + + + ); +} diff --git a/src/components/tooltip/component.tsx b/src/components/ui/tooltip/component.tsx similarity index 100% rename from src/components/tooltip/component.tsx rename to src/components/ui/tooltip/component.tsx diff --git a/src/components/tooltip/index.tsx b/src/components/ui/tooltip/index.tsx similarity index 100% rename from src/components/tooltip/index.tsx rename to src/components/ui/tooltip/index.tsx diff --git a/src/components/ui/use-toast/index.tsx b/src/components/ui/use-toast/index.tsx new file mode 100644 index 000000000..c595b2de5 --- /dev/null +++ b/src/components/ui/use-toast/index.tsx @@ -0,0 +1,187 @@ +// Inspired by react-hot-toast library +import * as React from 'react'; + +import type { ToastActionElement, ToastProps } from 'components/ui/toast'; + +const TOAST_LIMIT = 1; +const TOAST_REMOVE_DELAY = 1000000; + +type ToasterToast = ToastProps & { + id: string; + title?: React.ReactNode; + description?: React.ReactNode; + action?: ToastActionElement; +}; + +const actionTypes = { + ADD_TOAST: 'ADD_TOAST', + UPDATE_TOAST: 'UPDATE_TOAST', + DISMISS_TOAST: 'DISMISS_TOAST', + REMOVE_TOAST: 'REMOVE_TOAST', +} as const; + +let count = 0; + +function genId() { + count = (count + 1) % Number.MAX_VALUE; + return count.toString(); +} + +type ActionType = typeof actionTypes; + +type Action = + | { + type: ActionType['ADD_TOAST']; + toast: ToasterToast; + } + | { + type: ActionType['UPDATE_TOAST']; + toast: Partial; + } + | { + type: ActionType['DISMISS_TOAST']; + toastId?: ToasterToast['id']; + } + | { + type: ActionType['REMOVE_TOAST']; + toastId?: ToasterToast['id']; + }; + +interface State { + toasts: ToasterToast[]; +} + +const toastTimeouts = new Map>(); + +const addToRemoveQueue = (toastId: string) => { + if (toastTimeouts.has(toastId)) { + return; + } + + const timeout = setTimeout(() => { + toastTimeouts.delete(toastId); + dispatch({ + type: 'REMOVE_TOAST', + toastId: toastId, + }); + }, TOAST_REMOVE_DELAY); + + toastTimeouts.set(toastId, timeout); +}; + +export const reducer = (state: State, action: Action): State => { + switch (action.type) { + case 'ADD_TOAST': + return { + ...state, + toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), + }; + + case 'UPDATE_TOAST': + return { + ...state, + toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), + }; + + case 'DISMISS_TOAST': { + const { toastId } = action; + + // ! Side effects ! - This could be extracted into a dismissToast() action, + // but I'll keep it here for simplicity + if (toastId) { + addToRemoveQueue(toastId); + } else { + state.toasts.forEach((toast) => { + addToRemoveQueue(toast.id); + }); + } + + return { + ...state, + toasts: state.toasts.map((t) => + t.id === toastId || toastId === undefined + ? { + ...t, + open: false, + } + : t + ), + }; + } + case 'REMOVE_TOAST': + if (action.toastId === undefined) { + return { + ...state, + toasts: [], + }; + } + return { + ...state, + toasts: state.toasts.filter((t) => t.id !== action.toastId), + }; + } +}; + +const listeners: Array<(state: State) => void> = []; + +let memoryState: State = { toasts: [] }; + +function dispatch(action: Action) { + memoryState = reducer(memoryState, action); + listeners.forEach((listener) => { + listener(memoryState); + }); +} + +type Toast = Omit; + +function toast({ ...props }: Toast) { + const id = genId(); + + const update = (props: ToasterToast) => + dispatch({ + type: 'UPDATE_TOAST', + toast: { ...props, id }, + }); + const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id }); + + dispatch({ + type: 'ADD_TOAST', + toast: { + ...props, + id, + open: true, + onOpenChange: (open) => { + if (!open) dismiss(); + }, + }, + }); + + return { + id: id, + dismiss, + update, + }; +} + +function useToast() { + const [state, setState] = React.useState(memoryState); + + React.useEffect(() => { + listeners.push(setState); + return () => { + const index = listeners.indexOf(setState); + if (index > -1) { + listeners.splice(index, 1); + } + }; + }, [state]); + + return { + ...state, + toast, + dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }), + }; +} + +export { useToast, toast }; diff --git a/src/components/widget-controls/download/index.tsx b/src/components/widget-controls/download/index.tsx index 68d90e21e..51f8e17b9 100644 --- a/src/components/widget-controls/download/index.tsx +++ b/src/components/widget-controls/download/index.tsx @@ -1,7 +1,7 @@ import { DOWNLOAD } from 'containers/datasets'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import DOWNLOAD_SVG from 'svgs/ui/download.svg?sprite'; diff --git a/src/components/widget-controls/index.tsx b/src/components/widget-controls/index.tsx index da209387c..c35d3e269 100644 --- a/src/components/widget-controls/index.tsx +++ b/src/components/widget-controls/index.tsx @@ -13,7 +13,7 @@ import { updateLayers } from 'hooks/layers'; import { DOWNLOAD, INFO, LAYERS } from 'containers/datasets'; import Helper from 'containers/guide/helper'; -import { SwitchWrapper, SwitchRoot, SwitchThumb } from 'components/switch'; +import { SwitchWrapper, SwitchRoot, SwitchThumb } from 'components/ui/switch'; import type { WidgetSlugType } from 'types/widget'; import Download from './download'; diff --git a/src/components/widget-controls/info/index.tsx b/src/components/widget-controls/info/index.tsx index e99a2c390..fe54bbf6f 100644 --- a/src/components/widget-controls/info/index.tsx +++ b/src/components/widget-controls/info/index.tsx @@ -1,7 +1,7 @@ import { INFO } from 'containers/datasets'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import INFO_SVG from 'svgs/ui/info.svg?sprite'; diff --git a/src/containers/alert/index.tsx b/src/containers/alert/index.tsx index 4bfa4e860..f7c0d858b 100644 --- a/src/containers/alert/index.tsx +++ b/src/containers/alert/index.tsx @@ -11,8 +11,8 @@ import { locationToolAtom } from 'store/sidebar'; import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'; -import { Dialog, DialogPortal, DialogContent } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogPortal, DialogContent } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; diff --git a/src/containers/categories-menu/index.tsx b/src/containers/categories-menu/index.tsx index 4da6d5eeb..c4368feb4 100644 --- a/src/containers/categories-menu/index.tsx +++ b/src/containers/categories-menu/index.tsx @@ -10,8 +10,8 @@ import { useRecoilState, useSetRecoilState } from 'recoil'; import CATEGORY_OPTIONS from 'containers/navigation/constants'; import widgets from 'containers/widgets/constants'; -import { Checkbox, CheckboxIndicator } from 'components/checkbox'; -import Icon from 'components/icon'; +import { Checkbox, CheckboxIndicator } from 'components/ui/checkbox'; +import Icon from 'components/ui/icon'; import { Category } from 'types/category'; import CHECK_SVG from 'svgs/ui/check.svg?sprite'; diff --git a/src/containers/datasets/alerts/widget.tsx b/src/containers/datasets/alerts/widget.tsx index 076cd8ba3..ce4316500 100644 --- a/src/containers/datasets/alerts/widget.tsx +++ b/src/containers/datasets/alerts/widget.tsx @@ -11,11 +11,11 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import NoData from 'containers/widgets/no-data'; import Chart from 'components/chart'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; import DateSelect from 'components/planet-date-select'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; import SuggestedLayers from 'components/suggested-layers'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/biomass/widget.tsx b/src/containers/datasets/biomass/widget.tsx index b9d49defc..e6640189b 100644 --- a/src/containers/datasets/biomass/widget.tsx +++ b/src/containers/datasets/biomass/widget.tsx @@ -8,7 +8,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import NoData from 'containers/widgets/no-data'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import BiomassChart from './chart'; diff --git a/src/containers/datasets/blue-carbon/widget.tsx b/src/containers/datasets/blue-carbon/widget.tsx index 334299f03..34d9a1b0d 100644 --- a/src/containers/datasets/blue-carbon/widget.tsx +++ b/src/containers/datasets/blue-carbon/widget.tsx @@ -7,7 +7,7 @@ import { useRecoilValue } from 'recoil'; import NoData from 'containers/widgets/no-data'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import BlueCarbonChart from './chart'; diff --git a/src/containers/datasets/carbon-market-potential/widget.tsx b/src/containers/datasets/carbon-market-potential/widget.tsx index 91e9ea13b..a438eab9a 100644 --- a/src/containers/datasets/carbon-market-potential/widget.tsx +++ b/src/containers/datasets/carbon-market-potential/widget.tsx @@ -4,9 +4,9 @@ import cn from 'lib/classnames'; import NoData from 'containers/widgets/no-data'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/contextual-layers/planet/contextual-basemaps/card.tsx b/src/containers/datasets/contextual-layers/planet/contextual-basemaps/card.tsx index e5d8312da..3b9524007 100644 --- a/src/containers/datasets/contextual-layers/planet/contextual-basemaps/card.tsx +++ b/src/containers/datasets/contextual-layers/planet/contextual-basemaps/card.tsx @@ -12,8 +12,8 @@ import { useRecoilState } from 'recoil'; import { INFO } from 'containers/datasets'; import type { BasemapId } from 'containers/datasets/contextual-layers/basemaps'; -import { Checkbox, CheckboxIndicator } from 'components/checkbox'; -import Icon from 'components/icon'; +import { Checkbox, CheckboxIndicator } from 'components/ui/checkbox'; +import Icon from 'components/ui/icon'; import Info from 'components/widget-controls/info'; import { WIDGET_CARD_WRAPPER_STYLE } from 'styles/widgets'; import type { ContextualBasemapsId, MosaicId, WidgetSlugType } from 'types/widget'; diff --git a/src/containers/datasets/contextual-layers/protected-areas/layer.tsx b/src/containers/datasets/contextual-layers/protected-areas/layer.tsx index 365546ae8..d79f0d058 100644 --- a/src/containers/datasets/contextual-layers/protected-areas/layer.tsx +++ b/src/containers/datasets/contextual-layers/protected-areas/layer.tsx @@ -20,11 +20,12 @@ const MangrovesProtectedAreasLayer = ({ beforeId, id, onAdd, onRemove }: LayerPr visibility: activeLayer.visibility, }); + const ids = LAYERS.map((layer) => layer.id); useEffect(() => { - const ids = LAYERS.map((layer) => layer.id); onAdd(ids); return () => onRemove(ids); - }, [onAdd, onRemove, LAYERS]); + // eslint-disable-next-line + }, [onAdd, onRemove]); if (!SOURCE || !LAYERS) return null; return ( diff --git a/src/containers/datasets/customize-widgets-deck/widget.tsx b/src/containers/datasets/customize-widgets-deck/widget.tsx index d34685540..563596dd7 100644 --- a/src/containers/datasets/customize-widgets-deck/widget.tsx +++ b/src/containers/datasets/customize-widgets-deck/widget.tsx @@ -9,8 +9,8 @@ import Category from 'containers/categories-menu'; import widgets from 'containers/widgets/constants'; import WidgetsMenu from 'containers/widgets/widgets-menu'; -import { Dialog, DialogClose, DialogContent, DialogTrigger } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogClose, DialogContent, DialogTrigger } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/drawing-tool/index.tsx b/src/containers/datasets/drawing-tool/index.tsx index f89a6d2ce..962103901 100644 --- a/src/containers/datasets/drawing-tool/index.tsx +++ b/src/containers/datasets/drawing-tool/index.tsx @@ -15,7 +15,7 @@ import { useUploadFile } from 'hooks/analysis'; import Helper from 'containers/guide/helper'; import DeleteDrawingButton from 'containers/map/delete-drawing-button'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import AREA_SVG from 'svgs/sidebar/area.svg?sprite'; @@ -58,7 +58,6 @@ const WidgetDrawingTool = () => { })); }, [setDrawingToolState, isDrawingToolEnabled, resetDrawingUploadToolState]); - useUploadFile(acceptedFiles?.[0], onUploadFile); useEffect(() => { setMapCursor(isDrawingToolEnabled ? 'cell' : 'grab'); }, [setMapCursor, isDrawingToolEnabled]); diff --git a/src/containers/datasets/drawing-upload-tool/index.tsx b/src/containers/datasets/drawing-upload-tool/index.tsx index 3af8c89a0..d9ee6cd03 100644 --- a/src/containers/datasets/drawing-upload-tool/index.tsx +++ b/src/containers/datasets/drawing-upload-tool/index.tsx @@ -17,7 +17,7 @@ import { useUploadFile } from 'hooks/analysis'; import Helper from 'containers/guide/helper'; import DeleteDrawingButton from 'containers/map/delete-drawing-button'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import UPLOAD_SVG from 'svgs/sidebar/upload.svg?sprite'; @@ -68,6 +68,11 @@ const WidgetDrawingUploadTool = () => { useUploadFile(acceptedFiles?.[0], onUploadFile); + const { data, isLoading, isError, isInitialLoading, fetchStatus, ...rest } = useUploadFile( + acceptedFiles?.[0], + onUploadFile + ); + useEffect(() => { setMapCursor(isDrawingUploadToolEnabled ? 'cell' : 'grab'); }, [setMapCursor, isDrawingUploadToolEnabled]); @@ -109,9 +114,16 @@ const WidgetDrawingUploadTool = () => { description="Upload" /> - + {!isInitialLoading && ( + + )} + {isInitialLoading && fetchStatus === 'fetching' && ( + + )} )} {(uploadedGeojson || isDrawingUploadToolEnabled) && ( diff --git a/src/containers/datasets/drivers-change/widget.tsx b/src/containers/datasets/drivers-change/widget.tsx index 547bb353f..d44ef1cbc 100644 --- a/src/containers/datasets/drivers-change/widget.tsx +++ b/src/containers/datasets/drivers-change/widget.tsx @@ -3,7 +3,7 @@ import { primaryDrivers } from 'containers/datasets/drivers-change/constants'; import { useMangroveDriversChange } from 'containers/datasets/drivers-change/hooks'; import NoData from 'containers/widgets/no-data'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; const DriversChangeWidget = () => { diff --git a/src/containers/datasets/emissions-mitigation/widget.tsx b/src/containers/datasets/emissions-mitigation/widget.tsx index a717fa9af..4d6fcfe12 100644 --- a/src/containers/datasets/emissions-mitigation/widget.tsx +++ b/src/containers/datasets/emissions-mitigation/widget.tsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import NoData from 'containers/widgets/no-data'; import Chart from 'components/chart'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import { useMangroveEmissionsMitigation } from './hooks'; diff --git a/src/containers/datasets/fisheries/widget.tsx b/src/containers/datasets/fisheries/widget.tsx index edc5d179d..62d6a3b49 100644 --- a/src/containers/datasets/fisheries/widget.tsx +++ b/src/containers/datasets/fisheries/widget.tsx @@ -1,6 +1,6 @@ import NoData from 'containers/widgets/no-data'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import FisheriesChart from './chart'; diff --git a/src/containers/datasets/flood-protection/widget.tsx b/src/containers/datasets/flood-protection/widget.tsx index b5e6f040d..463064720 100644 --- a/src/containers/datasets/flood-protection/widget.tsx +++ b/src/containers/datasets/flood-protection/widget.tsx @@ -13,10 +13,10 @@ import type { } from 'containers/datasets/flood-protection/types'; import NoData from 'containers/widgets/no-data'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; -import { SwitchRoot, SwitchThumb, SwitchWrapper } from 'components/switch'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; +import { SwitchRoot, SwitchThumb, SwitchWrapper } from 'components/ui/switch'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/habitat-change/widget.tsx b/src/containers/datasets/habitat-change/widget.tsx index 4d267a0de..1ead9a0b5 100644 --- a/src/containers/datasets/habitat-change/widget.tsx +++ b/src/containers/datasets/habitat-change/widget.tsx @@ -9,9 +9,9 @@ import { useRecoilState } from 'recoil'; import NoData from 'containers/widgets/no-data'; import Chart from 'components/chart'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/habitat-extent/widget.tsx b/src/containers/datasets/habitat-extent/widget.tsx index da81eec1d..f114b784d 100644 --- a/src/containers/datasets/habitat-extent/widget.tsx +++ b/src/containers/datasets/habitat-extent/widget.tsx @@ -10,9 +10,9 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import NoData from 'containers/widgets/no-data'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/height/widget.tsx b/src/containers/datasets/height/widget.tsx index e40f36f40..a490d42f2 100644 --- a/src/containers/datasets/height/widget.tsx +++ b/src/containers/datasets/height/widget.tsx @@ -7,7 +7,7 @@ import { useRecoilValue } from 'recoil'; import NoData from 'containers/widgets/no-data'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import HeightChart from './chart'; diff --git a/src/containers/datasets/international-status/climate-watch/index.tsx b/src/containers/datasets/international-status/climate-watch/index.tsx index e95703b36..d27fc1512 100644 --- a/src/containers/datasets/international-status/climate-watch/index.tsx +++ b/src/containers/datasets/international-status/climate-watch/index.tsx @@ -1,6 +1,6 @@ import Link from 'next/link'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SUBTITLE_STYLE } from 'styles/widgets'; import { useClimateWatchNDCS, useClimateWatchNDCSCountriesDocs } from './hooks'; diff --git a/src/containers/datasets/international-status/climate-watch/indicator/index.tsx b/src/containers/datasets/international-status/climate-watch/indicator/index.tsx index e556d56c1..72b88d24c 100644 --- a/src/containers/datasets/international-status/climate-watch/indicator/index.tsx +++ b/src/containers/datasets/international-status/climate-watch/indicator/index.tsx @@ -1,11 +1,11 @@ -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipTrigger, -} from 'components/tooltip'; +} from 'components/ui/tooltip'; type IndicatorTypes = { label: string; diff --git a/src/containers/datasets/international-status/frel-ipcc/index.tsx b/src/containers/datasets/international-status/frel-ipcc/index.tsx index c35493c39..08e9dd253 100644 --- a/src/containers/datasets/international-status/frel-ipcc/index.tsx +++ b/src/containers/datasets/international-status/frel-ipcc/index.tsx @@ -1,6 +1,6 @@ import NoData from 'containers/widgets/no-data'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import { useMangroveInternationalStatus } from './hooks'; diff --git a/src/containers/datasets/iucn-ecoregion/layer.tsx b/src/containers/datasets/iucn-ecoregion/layer.tsx index 424a8a283..e582824df 100644 --- a/src/containers/datasets/iucn-ecoregion/layer.tsx +++ b/src/containers/datasets/iucn-ecoregion/layer.tsx @@ -12,7 +12,7 @@ import { useLayers, useSource } from './hooks'; const MangrovesLayer = ({ beforeId, id, onAdd, onRemove }: LayerProps) => { const activeLayers = useRecoilValue(activeLayersAtom); - const activeLayer = activeLayers.find((l) => l.id === 'mangrove_iucn_ecoregion'); + const activeLayer = activeLayers.find((l) => l.id === id); const SOURCE = useSource(); const LAYERS = useLayers({ @@ -25,7 +25,8 @@ const MangrovesLayer = ({ beforeId, id, onAdd, onRemove }: LayerProps) => { const ids = LAYERS.map((layer) => layer.id); onAdd(ids); return () => onRemove(ids); - }, [onAdd, onRemove, LAYERS]); + // eslint-disable-next-line + }, [onAdd, onRemove]); if (!SOURCE || !LAYERS) return null; diff --git a/src/containers/datasets/iucn-ecoregion/widget.tsx b/src/containers/datasets/iucn-ecoregion/widget.tsx index 173c465cd..87e424cc8 100644 --- a/src/containers/datasets/iucn-ecoregion/widget.tsx +++ b/src/containers/datasets/iucn-ecoregion/widget.tsx @@ -1,7 +1,7 @@ import NoData from 'containers/widgets/no-data'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; -import Loading from 'components/loading'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import IUCNEcoregionsChart from './chart'; diff --git a/src/containers/datasets/national-dashboard/indicator-source/index.tsx b/src/containers/datasets/national-dashboard/indicator-source/index.tsx index 25147e398..d7bfdb82f 100644 --- a/src/containers/datasets/national-dashboard/indicator-source/index.tsx +++ b/src/containers/datasets/national-dashboard/indicator-source/index.tsx @@ -9,9 +9,9 @@ import { useRecoilState } from 'recoil'; import { updateLayers } from 'hooks/layers'; -import Icon from 'components/icon'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; -import { SwitchWrapper, SwitchRoot, SwitchThumb } from 'components/switch'; +import Icon from 'components/ui/icon'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; +import { SwitchWrapper, SwitchRoot, SwitchThumb } from 'components/ui/switch'; import WidgetControls from 'components/widget-controls'; import { WIDGET_SELECT_STYLES, WIDGET_SELECT_ARROW_STYLES } from 'styles/widgets'; import type { ActiveLayers } from 'types/layers'; diff --git a/src/containers/datasets/national-dashboard/widget.tsx b/src/containers/datasets/national-dashboard/widget.tsx index c54ce19f4..3775d538c 100644 --- a/src/containers/datasets/national-dashboard/widget.tsx +++ b/src/containers/datasets/national-dashboard/widget.tsx @@ -8,7 +8,7 @@ import chroma from 'chroma-js'; import NoData from 'containers/widgets/no-data'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SUBTITLE_STYLE } from 'styles/widgets'; import { COLORS } from './constants'; diff --git a/src/containers/datasets/net-change/widget.tsx b/src/containers/datasets/net-change/widget.tsx index be88e5dfc..95d55ab20 100644 --- a/src/containers/datasets/net-change/widget.tsx +++ b/src/containers/datasets/net-change/widget.tsx @@ -10,9 +10,9 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import NoData from 'containers/widgets/no-data'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/protection/widget.tsx b/src/containers/datasets/protection/widget.tsx index 84243b67b..4be267dc1 100644 --- a/src/containers/datasets/protection/widget.tsx +++ b/src/containers/datasets/protection/widget.tsx @@ -4,9 +4,9 @@ import cn from 'lib/classnames'; import NoData from 'containers/widgets/no-data'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; import SuggestedLayers from 'components/suggested-layers'; import { WIDGET_CARD_WRAPPER_STYLE, diff --git a/src/containers/datasets/restoration-sites/filter-sites/index.tsx b/src/containers/datasets/restoration-sites/filter-sites/index.tsx index 7c800147b..e0c12f979 100644 --- a/src/containers/datasets/restoration-sites/filter-sites/index.tsx +++ b/src/containers/datasets/restoration-sites/filter-sites/index.tsx @@ -7,8 +7,8 @@ import { RestorationSitesMapFilters } from 'store/widgets/restoration-sites'; import { useSetRecoilState } from 'recoil'; -import Loading from 'components/loading'; -import MultiSelect from 'components/select-multi'; +import Loading from 'components/ui/loading'; +import MultiSelect from 'components/ui/select-multi'; import { WIDGET_CARD_WRAPPER_STYLE, BUTTON_STYLES } from 'styles/widgets'; import type { DataDitesProperties } from '../types'; diff --git a/src/containers/datasets/restoration-sites/selected-filters/index.tsx b/src/containers/datasets/restoration-sites/selected-filters/index.tsx index 9ea4fdb36..75622c87b 100644 --- a/src/containers/datasets/restoration-sites/selected-filters/index.tsx +++ b/src/containers/datasets/restoration-sites/selected-filters/index.tsx @@ -1,6 +1,6 @@ import cn from 'lib/classnames'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import { BUTTON_STYLES } from 'styles/widgets'; import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; diff --git a/src/containers/datasets/restoration-sites/widget.tsx b/src/containers/datasets/restoration-sites/widget.tsx index c75f7da8f..9210b7929 100644 --- a/src/containers/datasets/restoration-sites/widget.tsx +++ b/src/containers/datasets/restoration-sites/widget.tsx @@ -10,8 +10,8 @@ import { useSetRecoilState } from 'recoil'; import NoData from 'containers/widgets/no-data'; -import { Dialog, DialogContent, DialogClose, DialogTrigger } from 'components/dialog'; -import Loading from 'components/loading'; +import { Dialog, DialogContent, DialogClose, DialogTrigger } from 'components/ui/dialog'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import { BUTTON_STYLES } from 'styles/widgets'; diff --git a/src/containers/datasets/restoration/fisheries/widget.tsx b/src/containers/datasets/restoration/fisheries/widget.tsx index f5e89db3e..19f4ef321 100644 --- a/src/containers/datasets/restoration/fisheries/widget.tsx +++ b/src/containers/datasets/restoration/fisheries/widget.tsx @@ -1,8 +1,8 @@ import cn from 'lib/classnames'; import { formatAxis } from 'lib/format'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import BIVALVE_SVG from 'svgs/fisheries/bivalve.svg?sprite'; diff --git a/src/containers/datasets/restoration/layer.tsx b/src/containers/datasets/restoration/layer.tsx index dcd2cbacd..7fcd536f2 100644 --- a/src/containers/datasets/restoration/layer.tsx +++ b/src/containers/datasets/restoration/layer.tsx @@ -21,9 +21,9 @@ const MangrovesLayer = ({ beforeId, id, onAdd, onRemove }: LayerProps) => { }); useEffect(() => { - onAdd([LAYER.id]); - return () => onRemove([LAYER.id]); - }, [LAYER, onAdd, onRemove]); + onAdd([id]); + return () => onRemove([id]); + }, [id, onAdd, onRemove]); if (!SOURCE || !LAYER) return null; diff --git a/src/containers/datasets/restoration/loss/widget.tsx b/src/containers/datasets/restoration/loss/widget.tsx index f1961e6d5..151aa0fe8 100644 --- a/src/containers/datasets/restoration/loss/widget.tsx +++ b/src/containers/datasets/restoration/loss/widget.tsx @@ -3,7 +3,7 @@ import { numberFormat } from 'lib/format'; import { TreemapNode } from 'recharts/types/util/types'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/restoration/overview/mean-restoration/chart.tsx b/src/containers/datasets/restoration/overview/mean-restoration/chart.tsx index 6637459b6..a39c56d40 100644 --- a/src/containers/datasets/restoration/overview/mean-restoration/chart.tsx +++ b/src/containers/datasets/restoration/overview/mean-restoration/chart.tsx @@ -3,7 +3,7 @@ import { createRef, useLayoutEffect, useState } from 'react'; import type { Data } from 'containers/datasets/restoration/overview/types'; import Legend from 'containers/legend'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import TRIANGLE_SVG from 'svgs/ui/triangle.svg?sprite'; diff --git a/src/containers/datasets/restoration/overview/mean-restoration/widget.tsx b/src/containers/datasets/restoration/overview/mean-restoration/widget.tsx index 3b81112e7..b1d4c7499 100644 --- a/src/containers/datasets/restoration/overview/mean-restoration/widget.tsx +++ b/src/containers/datasets/restoration/overview/mean-restoration/widget.tsx @@ -2,7 +2,7 @@ import cn from 'lib/classnames'; import { useMangroveRestoration } from 'containers/datasets/restoration/overview/hooks'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/restoration/overview/restorable-areas/widget.tsx b/src/containers/datasets/restoration/overview/restorable-areas/widget.tsx index cf9405978..3db354d80 100644 --- a/src/containers/datasets/restoration/overview/restorable-areas/widget.tsx +++ b/src/containers/datasets/restoration/overview/restorable-areas/widget.tsx @@ -2,7 +2,7 @@ import cn from 'lib/classnames'; import { useMangroveRestoration } from 'containers/datasets/restoration/overview/hooks'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/restoration/restoration-value/widget.tsx b/src/containers/datasets/restoration/restoration-value/widget.tsx index 41c131bb3..fd6debc86 100644 --- a/src/containers/datasets/restoration/restoration-value/widget.tsx +++ b/src/containers/datasets/restoration/restoration-value/widget.tsx @@ -1,6 +1,6 @@ import cn from 'lib/classnames'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE, diff --git a/src/containers/datasets/species-distribution/widget.tsx b/src/containers/datasets/species-distribution/widget.tsx index df3ab847b..9ffe20951 100644 --- a/src/containers/datasets/species-distribution/widget.tsx +++ b/src/containers/datasets/species-distribution/widget.tsx @@ -4,8 +4,8 @@ import cn from 'lib/classnames'; import NoData from 'containers/widgets/no-data'; -import Icon from 'components/icon'; -import Loading from 'components/loading'; +import Icon from 'components/ui/icon'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import TRIANGLE_SVG from 'svgs/ui/triangle.svg?sprite'; diff --git a/src/containers/datasets/species-location/widget.tsx b/src/containers/datasets/species-location/widget.tsx index 1cf65c6a9..921442cf9 100644 --- a/src/containers/datasets/species-location/widget.tsx +++ b/src/containers/datasets/species-location/widget.tsx @@ -19,10 +19,10 @@ import { CommandInput, CommandEmpty, CommandList, -} from 'components/command'; -import Loading from 'components/loading'; -import RadioGroupItem from 'components/radio-group/radio-group-item'; -import type { RadioOption } from 'components/radio-group/types'; +} from 'components/ui/command'; +import Loading from 'components/ui/loading'; +import RadioGroupItem from 'components/ui/radio-group/radio-group-item'; +import type { RadioOption } from 'components/ui/radio-group/types'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import { useMangroveSpeciesLocation } from './hooks'; diff --git a/src/containers/datasets/species-threatened/legend.tsx b/src/containers/datasets/species-threatened/legend.tsx index 4226f6ed2..a127d8961 100644 --- a/src/containers/datasets/species-threatened/legend.tsx +++ b/src/containers/datasets/species-threatened/legend.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'; import cn from 'lib/classnames'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import ARROW_SVG from 'svgs/ui/arrow.svg?sprite'; diff --git a/src/containers/datasets/species-threatened/widget.tsx b/src/containers/datasets/species-threatened/widget.tsx index cdf66e0fd..07f6e67c0 100644 --- a/src/containers/datasets/species-threatened/widget.tsx +++ b/src/containers/datasets/species-threatened/widget.tsx @@ -1,6 +1,6 @@ import NoData from 'containers/widgets/no-data'; -import Loading from 'components/loading'; +import Loading from 'components/ui/loading'; import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets'; import SpeciesThreatenedChart from './chart'; diff --git a/src/containers/guide/switcher/index.tsx b/src/containers/guide/switcher/index.tsx index b1b35ffd6..de708feaf 100644 --- a/src/containers/guide/switcher/index.tsx +++ b/src/containers/guide/switcher/index.tsx @@ -2,7 +2,7 @@ import { activeGuideAtom } from 'store/guide'; import { useRecoilState } from 'recoil'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import HELP_SVG from 'svgs/tools-bar/help.svg?sprite'; diff --git a/src/containers/location-dialog-content/index.tsx b/src/containers/location-dialog-content/index.tsx index 02c0f8507..82b018306 100644 --- a/src/containers/location-dialog-content/index.tsx +++ b/src/containers/location-dialog-content/index.tsx @@ -1,6 +1,6 @@ import LocationsList from 'containers/locations-list'; -import { DialogContent, DialogClose } from 'components/dialog'; +import { DialogContent, DialogClose } from 'components/ui/dialog'; const LocationDialogContent = ({ close }: { close: () => void }) => { return ( diff --git a/src/containers/location-widget/index.tsx b/src/containers/location-widget/index.tsx index 39faa3492..2a7313634 100644 --- a/src/containers/location-widget/index.tsx +++ b/src/containers/location-widget/index.tsx @@ -17,7 +17,7 @@ import type { LocationTypes } from 'containers/datasets/locations/types'; import LocationDialogContent from 'containers/location-dialog-content'; import LocationTools from 'containers/navigation/location-tools'; -import { Dialog, DialogTrigger } from 'components/dialog'; +import { Dialog, DialogTrigger } from 'components/ui/dialog'; const LocationWidget = () => { const { diff --git a/src/containers/locations-list/index.tsx b/src/containers/locations-list/index.tsx index ee3276328..1c970ce70 100644 --- a/src/containers/locations-list/index.tsx +++ b/src/containers/locations-list/index.tsx @@ -21,7 +21,7 @@ import { Location, LocationTypes } from 'containers/datasets/locations/types'; // import HighlightedPlacesMobile from 'containers/locations-list/mobile/highlighted-places'; // import HighlightedPlaces from 'components/highlighted-places'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; // import { Media } from 'components/media-query'; import { breakpoints } from 'styles/styles.config'; diff --git a/src/containers/map/delete-drawing-button/index.tsx b/src/containers/map/delete-drawing-button/index.tsx index e4db0b62d..919eff89a 100644 --- a/src/containers/map/delete-drawing-button/index.tsx +++ b/src/containers/map/delete-drawing-button/index.tsx @@ -13,7 +13,7 @@ import { locationToolAtom } from 'store/sidebar'; import { useResetRecoilState, useRecoilValue } from 'recoil'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import REMOVE_SVG from 'svgs/ui/close.svg?sprite'; diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx index da37eda27..6a0a4bb0e 100644 --- a/src/containers/map/index.tsx +++ b/src/containers/map/index.tsx @@ -47,7 +47,7 @@ import ZoomControl from 'components/map/controls/zoom'; import DrawControl from 'components/map/drawing-tool'; import { CustomMapProps } from 'components/map/types'; import { Media } from 'components/media-query'; -import Popup from 'components/popup'; +import Popup from 'components/ui/popup'; import { breakpoints } from 'styles/styles.config'; import type { RestorationPopUp, PopUpKey, LocationPopUp } from 'types/map'; diff --git a/src/containers/map/iucn-ecoregion-popup/index.tsx b/src/containers/map/iucn-ecoregion-popup/index.tsx index 7e4be0163..449d36079 100644 --- a/src/containers/map/iucn-ecoregion-popup/index.tsx +++ b/src/containers/map/iucn-ecoregion-popup/index.tsx @@ -9,7 +9,7 @@ import { COLORS } from 'containers/datasets/iucn-ecoregion/constants'; import { useMangroveEcoregions } from 'containers/datasets/iucn-ecoregion/hooks'; import type { IUCNEcoregionPopUpInfo, Label } from 'containers/datasets/iucn-ecoregion/types'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; import { WIDGET_CARD_WRAPPER_STYLE } from 'styles/widgets'; type Tags = diff --git a/src/containers/map/legend/item/index.tsx b/src/containers/map/legend/item/index.tsx index 8c227d173..ad78a0b6f 100644 --- a/src/containers/map/legend/item/index.tsx +++ b/src/containers/map/legend/item/index.tsx @@ -13,12 +13,12 @@ import { LAYERS } from 'containers/layers/constants'; import WidgetWrapper from 'containers/widget'; import { widgets } from 'containers/widgets/constants'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import { Media } from 'components/media-query'; -import { Popover, PopoverContent, PopoverTrigger } from 'components/popover'; -import Slider from 'components/slider'; -import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from 'components/tooltip'; +import { Popover, PopoverContent, PopoverTrigger } from 'components/ui/popover'; +import Slider from 'components/ui/slider'; +import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from 'components/ui/tooltip'; import type { ActiveLayers } from 'types/layers'; import type { WidgetSlugType } from 'types/widget'; diff --git a/src/containers/map/location-pop-up/index.tsx b/src/containers/map/location-pop-up/index.tsx index 7a372f5b7..77921788d 100644 --- a/src/containers/map/location-pop-up/index.tsx +++ b/src/containers/map/location-pop-up/index.tsx @@ -13,7 +13,7 @@ import { useRecoilState } from 'recoil'; import { useLocations } from 'containers/datasets/locations/hooks'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import { WIDGET_SUBTITLE_STYLE } from 'styles/widgets'; import type { LocationPopUp } from 'types/map'; diff --git a/src/containers/navigation/language-selector/index.tsx b/src/containers/navigation/language-selector/index.tsx index c06bbe4a7..fcf60db8b 100644 --- a/src/containers/navigation/language-selector/index.tsx +++ b/src/containers/navigation/language-selector/index.tsx @@ -9,8 +9,8 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from 'components/dropdown'; -import Icon from 'components/icon'; +} from 'components/ui/dropdown'; +import Icon from 'components/ui/icon'; import TRANSLATE_SVG from 'svgs/tools-bar/translate.svg?sprite'; diff --git a/src/containers/navigation/location-tools/index.tsx b/src/containers/navigation/location-tools/index.tsx index 0189cfc45..002549e2b 100644 --- a/src/containers/navigation/location-tools/index.tsx +++ b/src/containers/navigation/location-tools/index.tsx @@ -14,8 +14,8 @@ import WidgetDrawingUploadTool from 'containers/datasets/drawing-upload-tool'; import Helper from 'containers/guide/helper'; import LocationDialogContent from 'containers/location-dialog-content'; -import { Dialog, DialogTrigger } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogTrigger } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import GLASS_SVG from 'svgs/sidebar/glass.svg?sprite'; diff --git a/src/containers/navigation/map-settings/index.tsx b/src/containers/navigation/map-settings/index.tsx index dabb346d0..e83480173 100644 --- a/src/containers/navigation/map-settings/index.tsx +++ b/src/containers/navigation/map-settings/index.tsx @@ -8,7 +8,7 @@ import { locationToolAtom } from 'store/sidebar'; import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import MAP_SETTINGS_SVG from 'svgs/sidebar/map-settings.svg?sprite'; diff --git a/src/containers/navigation/menu/index.tsx b/src/containers/navigation/menu/index.tsx index b0c3545ba..6b9e7774f 100644 --- a/src/containers/navigation/menu/index.tsx +++ b/src/containers/navigation/menu/index.tsx @@ -10,8 +10,8 @@ import Helper from 'containers/guide/helper'; import About from 'containers/navigation/menu/about'; import BlogContent from 'containers/news/content'; -import { Dialog, DialogContent, DialogClose, DialogTrigger } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogClose, DialogTrigger } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import { Media } from 'components/media-query'; import GMA_PNG from 'images/gma.png'; diff --git a/src/containers/navigation/mobile/configure/index.tsx b/src/containers/navigation/mobile/configure/index.tsx index 1c4766d94..a211eea8f 100644 --- a/src/containers/navigation/mobile/configure/index.tsx +++ b/src/containers/navigation/mobile/configure/index.tsx @@ -1,8 +1,8 @@ import Category from 'containers/categories-menu'; import WidgetsMenu from 'containers/widgets/widgets-menu'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import CONFIGS_SVG from 'svgs/sidebar/configure.svg?sprite'; diff --git a/src/containers/navigation/mobile/language-selector/index.tsx b/src/containers/navigation/mobile/language-selector/index.tsx index 3c8f5da71..7311dee21 100644 --- a/src/containers/navigation/mobile/language-selector/index.tsx +++ b/src/containers/navigation/mobile/language-selector/index.tsx @@ -5,8 +5,8 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from 'components/dropdown'; -import Icon from 'components/icon'; +} from 'components/ui/dropdown'; +import Icon from 'components/ui/icon'; import TRANSLATE_SVG from 'svgs/tools-bar/translate.svg?sprite'; diff --git a/src/containers/navigation/mobile/locations/index.tsx b/src/containers/navigation/mobile/locations/index.tsx index 26613f5b4..490d6ef80 100644 --- a/src/containers/navigation/mobile/locations/index.tsx +++ b/src/containers/navigation/mobile/locations/index.tsx @@ -2,8 +2,8 @@ import { useCallback, useState } from 'react'; import LocationsList from 'containers/locations-list'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import GLASS_SVG from 'svgs/sidebar/glass.svg?sprite'; diff --git a/src/containers/navigation/mobile/map-toggle/index.tsx b/src/containers/navigation/mobile/map-toggle/index.tsx index 8f1ce45f1..46db05155 100644 --- a/src/containers/navigation/mobile/map-toggle/index.tsx +++ b/src/containers/navigation/mobile/map-toggle/index.tsx @@ -7,7 +7,7 @@ import { mapViewAtom } from 'store/sidebar'; import { useRecoilState, useRecoilValue } from 'recoil'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; diff --git a/src/containers/navigation/mobile/news/index.tsx b/src/containers/navigation/mobile/news/index.tsx index 513d59b8b..22f415b55 100644 --- a/src/containers/navigation/mobile/news/index.tsx +++ b/src/containers/navigation/mobile/news/index.tsx @@ -1,7 +1,7 @@ import BlogContent from 'containers/news/content'; -import { Dialog, DialogContent, DialogTrigger } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogTrigger } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import NEWS_SVG from 'svgs/tools-bar/news.svg?sprite'; diff --git a/src/containers/navigation/news/index.tsx b/src/containers/navigation/news/index.tsx index f6913fe51..2e72e039e 100644 --- a/src/containers/navigation/news/index.tsx +++ b/src/containers/navigation/news/index.tsx @@ -7,8 +7,8 @@ import { useBlogPosts } from 'hooks/blog'; import Helper from 'containers/guide/helper'; import BlogContent from 'containers/news/content'; -import { Dialog, DialogContent, DialogTrigger } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogTrigger } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import NEWS_SVG from 'svgs/tools-bar/news.svg?sprite'; diff --git a/src/containers/news/content/index.tsx b/src/containers/news/content/index.tsx index d01ddf752..b76d03457 100644 --- a/src/containers/news/content/index.tsx +++ b/src/containers/news/content/index.tsx @@ -9,7 +9,7 @@ import type { Post } from 'hooks/blog/types'; import PostComponent from 'containers/news/post'; -import { DialogClose } from 'components/dialog'; +import { DialogClose } from 'components/ui/dialog'; export const BlogContent = () => { const { data } = useBlogPosts(); diff --git a/src/containers/widget/index.tsx b/src/containers/widget/index.tsx index 681e3d05f..3cf98aa60 100644 --- a/src/containers/widget/index.tsx +++ b/src/containers/widget/index.tsx @@ -8,7 +8,7 @@ import { widgetsCollapsedAtom } from 'store/widgets'; import { AnimatePresence, motion } from 'framer-motion'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; import WidgetControls from 'components/widget-controls'; import { WidgetSlugType } from 'types/widget'; diff --git a/src/containers/widgets/index.tsx b/src/containers/widgets/index.tsx index cad3d57f7..bd1404f5d 100644 --- a/src/containers/widgets/index.tsx +++ b/src/containers/widgets/index.tsx @@ -23,8 +23,8 @@ import WidgetWrapper from 'containers/widget'; import { widgets, ANALYSIS_WIDGETS_SLUGS } from 'containers/widgets/constants'; import { useWidgetsIdsByCategory } from 'containers/widgets/hooks'; -import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog'; -import Icon from 'components/icon'; +import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/ui/dialog'; +import Icon from 'components/ui/icon'; import { breakpoints } from 'styles/styles.config'; import { BUTTON_STYLES } from 'styles/widgets'; import { WidgetTypes } from 'types/widget'; diff --git a/src/containers/widgets/no-data/index.tsx b/src/containers/widgets/no-data/index.tsx index f2e6c0e8e..96b91302d 100644 --- a/src/containers/widgets/no-data/index.tsx +++ b/src/containers/widgets/no-data/index.tsx @@ -1,4 +1,4 @@ -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import NO_DATA_SVG from 'svgs/ui/no-data.svg?sprite'; diff --git a/src/containers/widgets/widgets-menu/index.tsx b/src/containers/widgets/widgets-menu/index.tsx index 717d117f5..9b0ee58ed 100644 --- a/src/containers/widgets/widgets-menu/index.tsx +++ b/src/containers/widgets/widgets-menu/index.tsx @@ -19,7 +19,8 @@ import { widgets as rawWidgets } from 'containers/widgets/constants'; import { useWidgetsIdsByLocation } from 'containers/widgets/hooks'; import { useWidgetsIdsByCategory } from 'containers/widgets/hooks'; -import { CheckboxIndicator } from 'components/checkbox'; +import { CheckboxIndicator } from 'components/ui/checkbox'; +import type { ActiveLayers } from 'types/layers'; import type { WidgetSlugType, ContextualBasemapsId } from 'types/widget'; const WidgetsMenu: FC = () => { diff --git a/src/layouts/mobile/index.tsx b/src/layouts/mobile/index.tsx index e701a5ada..72d955a19 100644 --- a/src/layouts/mobile/index.tsx +++ b/src/layouts/mobile/index.tsx @@ -9,7 +9,7 @@ import MapContainer from 'containers/map'; import NavigationBar from 'containers/navigation/mobile'; import WidgetsContainer from 'containers/widgets'; -import Icon from 'components/icon'; +import Icon from 'components/ui/icon'; import LOGO_MOBILE_SVG from 'svgs/logo-mobile.svg?sprite'; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index cdaa5e7b8..24993f159 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -17,12 +17,11 @@ import { tx, PseudoTranslationPolicy } from '@transifex/native'; import { TXProvider } from '@transifex/react'; import { RecoilRoot } from 'recoil'; -import { MediaContextProvider } from 'components/media-query'; - import 'styles/globals.css'; import 'styles/mapbox.css'; -import { TooltipProvider } from 'components/tooltip'; +import { MediaContextProvider } from 'components/media-query'; +import { TooltipProvider } from 'components/ui/tooltip'; const OpenSansFont = Open_Sans({ weight: ['300', '400', '600', '700'], diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 32e9b0db0..5c3d78058 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -3,6 +3,7 @@ import type { DocumentContext, DocumentInitialProps } from 'next/document'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import { mediaStyles } from 'components/media-query'; +import { Toaster } from 'components/ui/toaster'; class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext): Promise { @@ -19,6 +20,7 @@ class MyDocument extends Document {
+ ); diff --git a/yarn.lock b/yarn.lock index 4e318e8b2..984eb9e8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1504,6 +1504,30 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-dismissable-layer@npm:1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-escape-keydown": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: e73cf4bd3763f4d55b1bea7486a9700384d7d94dc00b1d5a75e222b2f1e4f32bc667a206ca4ed3baaaf7424dce7a239afd0ba59a6f0d89c3462c4e6e8d029a04 + languageName: node + linkType: hard + "@radix-ui/react-dropdown-menu@npm:2.0.4": version: 2.0.4 resolution: "@radix-ui/react-dropdown-menu@npm:2.0.4" @@ -1784,6 +1808,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-portal@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-primitive": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64 + languageName: node + linkType: hard + "@radix-ui/react-presence@npm:1.0.0": version: 1.0.0 resolution: "@radix-ui/react-presence@npm:1.0.0" @@ -2072,6 +2116,37 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-toast@npm:1.1.5": + version: 1.1.5 + resolution: "@radix-ui/react-toast@npm:1.1.5" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-collection": 1.0.3 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-dismissable-layer": 1.0.5 + "@radix-ui/react-portal": 1.0.4 + "@radix-ui/react-presence": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-controllable-state": 1.0.1 + "@radix-ui/react-use-layout-effect": 1.0.1 + "@radix-ui/react-visually-hidden": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 6fe821ffaefd0b802e6faf1dffa3d7f69c64cf0972f10eafbdfa5a518f3e2c25c834fe542454e141bd8a35f45b8a1807e6a639e0aefe2a00a26aaeea5057ac7f + languageName: node + linkType: hard + "@radix-ui/react-toggle@npm:^1.0.2": version: 1.0.2 resolution: "@radix-ui/react-toggle@npm:1.0.2" @@ -2310,6 +2385,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-visually-hidden@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-visually-hidden@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-primitive": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 2e9d0c8253f97e7d6ffb2e52a5cfd40ba719f813b39c3e2e42c496d54408abd09ef66b5aec4af9b8ab0553215e32452a5d0934597a49c51dd90dc39181ed0d57 + languageName: node + linkType: hard + "@radix-ui/rect@npm:1.0.0": version: 1.0.0 resolution: "@radix-ui/rect@npm:1.0.0" @@ -3803,6 +3898,15 @@ __metadata: languageName: node linkType: hard +"class-variance-authority@npm:^0.7.0": + version: 0.7.0 + resolution: "class-variance-authority@npm:0.7.0" + dependencies: + clsx: 2.0.0 + checksum: e7fd1fab433ef06f52a1b7b241b70b4a185864deef199d3b0a2c3412f1cc179517288264c383f3b971a00d76811625fc8f7ffe709e6170219e88cd7368f08a20 + languageName: node + linkType: hard + "classnames@npm:^2.2.5, classnames@npm:^2.3.2": version: 2.3.2 resolution: "classnames@npm:2.3.2" @@ -3870,6 +3974,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:2.0.0": + version: 2.0.0 + resolution: "clsx@npm:2.0.0" + checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e + languageName: node + linkType: hard + "clsx@npm:^1.0.4": version: 1.2.1 resolution: "clsx@npm:1.2.1" @@ -7323,6 +7434,7 @@ __metadata: "@radix-ui/react-select": ^1.2.1 "@radix-ui/react-slider": 1.1.2 "@radix-ui/react-switch": ^1.0.2 + "@radix-ui/react-toast": 1.1.5 "@radix-ui/react-toggle": ^1.0.2 "@radix-ui/react-tooltip": ^1.0.5 "@tailwindcss/forms": 0.5.3 @@ -7343,6 +7455,7 @@ __metadata: autoprefixer: ^10.4.19 axios: 1.6.0 chroma-js: ^2.4.2 + class-variance-authority: ^0.7.0 classnames: ^2.3.2 cmdk: 0.2.0 d3-format: 3.1.0