Upgrade clo-ui to 0.5.1

web/package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "dependencies": {
     "classnames": "^2.5.1",
-    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.4.5",
+    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.5.1",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react": "^18.3.1",

web/src/App.tsx

@@ -1,4 +1,4 @@
-import 'clo-ui/dist/styles/default.scss';
+import 'clo-ui/styles/default.scss';
 import './App.module.css';
 
 import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';

web/src/api/index.ts

@@ -1,5 +1,7 @@
-import { isEmpty, isNull, isUndefined } from 'lodash';
 import isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 import { DEFAULT_SORT_BY, DEFAULT_SORT_DIRECTION, DEFAULT_TIME_RANGE } from '../data';
 import { Change, Error, ErrorKind, SearchQuery } from '../types';

web/src/context/AppContextProvider.tsx

@@ -1,5 +1,6 @@
-import { detectActiveThemeMode, useSystemThemeMode } from 'clo-ui';
-import { isNull } from 'lodash';
+import { useSystemThemeMode } from 'clo-ui/hooks/useSystemThemeMode';
+import { detectActiveThemeMode } from 'clo-ui/utils/detectActiveThemeMode';
+import isNull from 'lodash/isNull';
 import { createContext, Dispatch, ReactNode, useContext, useEffect, useReducer, useState } from 'react';
 
 import { Prefs, SortBy, SortDirection } from '../types';

web/src/data.tsx

@@ -1,4 +1,4 @@
-import { FilterSection } from 'clo-ui';
+import { FilterSection } from 'clo-ui/components/FilterSection';
 
 import { ChangeKind, FilterKind, Option, SearchTipItem, Service, SortBy, SortDirection, SortOption } from './types';
 

web/src/layout/audit/SearchTipsModal.tsx

@@ -1,4 +1,4 @@
-import { Modal } from 'clo-ui';
+import { Modal } from 'clo-ui/components/Modal';
 import { FaRegLightbulb } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 

web/src/layout/audit/Searchbar.tsx

@@ -1,4 +1,5 @@
-import { scrollToTop, Searchbar as SearchbarForm } from 'clo-ui';
+import { Searchbar as SearchbarForm } from 'clo-ui/components/Searchbar';
+import { scrollToTop } from 'clo-ui/utils/scrollToTop';
 import { useEffect, useState } from 'react';
 // import { FaRegQuestionCircle } from 'react-icons/fa';
 import { useNavigate, useSearchParams } from 'react-router-dom';

web/src/layout/audit/filters/Filters.tsx

@@ -1,5 +1,8 @@
-import { FilterSection, FiltersSection, InputFiltersSection } from 'clo-ui';
-import { isEmpty, isUndefined } from 'lodash';
+import { FilterSection } from 'clo-ui/components/FilterSection';
+import { FiltersSection } from 'clo-ui/components/FiltersSection';
+import { InputFiltersSection } from 'clo-ui/components/InputFiltersSection';
+import isEmpty from 'lodash/isEmpty';
+import isUndefined from 'lodash/isUndefined';
 import React from 'react';
 import { IoMdCloseCircleOutline } from 'react-icons/io';
 

web/src/layout/audit/filters/OrganizationsSelect.tsx

@@ -1,4 +1,5 @@
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 import { ChangeEvent, useRef } from 'react';
 
 import styles from './OrganizationsSelect.module.css';

web/src/layout/audit/filters/SelectedFilters.tsx

@@ -1,5 +1,6 @@
-import { SelectedFilterBadge } from 'clo-ui';
-import { isEmpty, isUndefined } from 'lodash';
+import { SelectedFilterBadge } from 'clo-ui/components/SelectedFilterBadge';
+import isEmpty from 'lodash/isEmpty';
+import isUndefined from 'lodash/isUndefined';
 import { Fragment } from 'react';
 import { IoMdCloseCircleOutline } from 'react-icons/io';
 

web/src/layout/audit/filters/TimeRange.tsx

@@ -1,4 +1,4 @@
-import { isNull } from 'lodash';
+import isNull from 'lodash/isNull';
 import { ChangeEvent, useRef } from 'react';
 
 import { DATE_RANGE, DEFAULT_TIME_RANGE } from '../../../data';

web/src/layout/audit/index.tsx

@@ -1,17 +1,17 @@
 import classNames from 'classnames';
-import {
-  DropdownOnHover,
-  ElementWithTooltip,
-  Loading,
-  NoData,
-  Pagination,
-  scrollToTop,
-  Sidebar,
-  SortOptions,
-  SubNavbar,
-  useBreakpointDetect,
-} from 'clo-ui';
-import { isEmpty, isNull, isUndefined } from 'lodash';
+import { DropdownOnHover } from 'clo-ui/components/DropdownOnHover';
+import { ElementWithTooltip } from 'clo-ui/components/ElementWithTooltip';
+import { Loading } from 'clo-ui/components/Loading';
+import { NoData } from 'clo-ui/components/NoData';
+import { Pagination } from 'clo-ui/components/Pagination';
+import { Sidebar } from 'clo-ui/components/Sidebar';
+import { SortOptions } from 'clo-ui/components/SortOptions';
+import { SubNavbar } from 'clo-ui/components/SubNavbar';
+import { useBreakpointDetect } from 'clo-ui/hooks/useBreakpointDetect';
+import { scrollToTop } from 'clo-ui/utils/scrollToTop';
+import isEmpty from 'lodash/isEmpty';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 import moment from 'moment';
 import { Fragment, useContext, useEffect, useState } from 'react';
 import { AiFillCheckCircle, AiFillCloseCircle } from 'react-icons/ai';

web/src/layout/navigation/Footer.tsx

@@ -1,5 +1,5 @@
-import { ExternalLink } from 'clo-ui';
-import { Footer as FooterWrapper } from 'clo-ui';
+import { ExternalLink } from 'clo-ui/components/ExternalLink';
+import { Footer as FooterWrapper } from 'clo-ui/components/Footer';
 import { FaGithub } from 'react-icons/fa';
 import { FiExternalLink } from 'react-icons/fi';
 

web/src/layout/navigation/MobileSettings.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { ExternalLink, useOutsideClick } from 'clo-ui';
+import { ExternalLink } from 'clo-ui/components/ExternalLink';
+import { useOutsideClick } from 'clo-ui/hooks/useOutsideClick';
 import { RefObject, useRef, useState } from 'react';
 import { BsList } from 'react-icons/bs';
 import { FaGithub } from 'react-icons/fa';

web/src/layout/navigation/Navbar.tsx

@@ -1,4 +1,6 @@
-import { ExternalLink, Navbar as NavbarWrapper, scrollToTop } from 'clo-ui';
+import { ExternalLink } from 'clo-ui/components/ExternalLink';
+import { Navbar as NavbarWrapper } from 'clo-ui/components/Navbar';
+import { scrollToTop } from 'clo-ui/utils/scrollToTop';
 import { FaGithub } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 

web/src/layout/navigation/Settings.tsx

@@ -1,4 +1,4 @@
-import { Dropdown } from 'clo-ui';
+import { Dropdown } from 'clo-ui/components/Dropdown';
 import { FaCog } from 'react-icons/fa';
 
 import styles from './Settings.module.css';

web/src/layout/navigation/ThemeMode.tsx

@@ -1,5 +1,5 @@
-import { ThemeMode as ThemeModeForm } from 'clo-ui';
-import { isUndefined } from 'lodash';
+import { ThemeMode as ThemeModeForm } from 'clo-ui/components/ThemeMode';
+import isUndefined from 'lodash/isUndefined';
 import { useContext } from 'react';
 
 import { AppContext, updateTheme } from '../../context/AppContextProvider';

web/src/utils/localStoragePreferences.ts

@@ -1,5 +1,6 @@
-import { detectActiveThemeMode } from 'clo-ui';
-import { isEmpty, sortBy } from 'lodash';
+import { detectActiveThemeMode } from 'clo-ui/utils/detectActiveThemeMode';
+import isEmpty from 'lodash/isEmpty';
+import sortBy from 'lodash/sortBy';
 
 import { DEFAULT_SORT_BY, DEFAULT_SORT_DIRECTION } from '../data';
 import { Prefs } from '../types';

web/src/utils/prepareQueryString.ts

@@ -1,4 +1,5 @@
-import { isEmpty, isUndefined } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import isUndefined from 'lodash/isUndefined';
 
 import { BasicQuery, SearchFiltersURL } from '../types';
 

web/tsconfig.json

@@ -14,7 +14,7 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

web/yarn.lock

@@ -1062,7 +1062,7 @@
     "@babel/plugin-transform-modules-commonjs" "^7.27.1"
     "@babel/plugin-transform-typescript" "^7.27.1"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
   integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
@@ -3534,12 +3534,13 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-"clo-ui@https://github.com/cncf/clo-ui.git#v0.4.5":
-  version "0.4.5"
-  resolved "https://github.com/cncf/clo-ui.git#1dfa964eb0a74bfc1ebcefe72305bc4cf562a8f5"
+"clo-ui@https://github.com/cncf/clo-ui.git#v0.5.1":
+  version "0.5.1"
+  resolved "https://github.com/cncf/clo-ui.git#0dce582aee7070329d4d28fe3f94e5aa78d8397d"
   dependencies:
     bootstrap "^5.3.8"
     classnames "^2.5.1"
+    date-fns "^2.30.0"
     lodash "^4.17.21"
     moment "^2.30.1"
     react-date-range "1.4.0"
@@ -4019,6 +4020,13 @@ data-view-byte-offset@^1.0.1:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 [email protected], debug@^2.6.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"