Upgrade clo-ui to 0.5.1 (#1812)

* Upgrade clo-ui to 0.5.0

Signed-off-by: Cintia Sánchez García <[email protected]>

* Fix some tests

Signed-off-by: Cintia Sánchez García <[email protected]>

* Update clo-ui version

Signed-off-by: Cintia Sánchez García <[email protected]>

---------

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

web/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "apexcharts": "3.49.0",
     "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",
     "nth-check": "^2.0.1",
@@ -61,7 +61,7 @@
   "jest": {
     "moduleNameMapper": {
       "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/__mocks__/fileMock.js"
+      "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/fileMock.js"
     }
   },
   "scripts": {

web/src/App.tsx

@@ -1,6 +1,6 @@
-import 'clo-ui/dist/styles/xxxl_grid.scss';
+import 'clo-ui/styles/xxxl_grid.scss';
 
-import { AlertController } from 'clo-ui';
+import { AlertController } from 'clo-ui/components/AlertController';
 import { useState } from 'react';
 import { BrowserRouter as Router, Navigate, Route, Routes, useParams } from 'react-router-dom';
 

web/src/__mocks__/clo-ui/components/CodeBlock.tsx

@@ -0,0 +1,22 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+type CodeBlockProps = {
+  content: ReactNode;
+  label?: string;
+  withCopyBtn?: boolean;
+};
+
+const CodeBlock: FunctionComponent<CodeBlockProps> = ({ content, label, withCopyBtn }) => {
+  return (
+    <div data-testid="code" data-label={label}>
+      {content}
+      {withCopyBtn && label ? (
+        <button aria-label={label} type="button">
+          {label}
+        </button>
+      ) : null}
+    </div>
+  );
+};
+
+export { CodeBlock };

web/src/context/AppContextProvider.tsx

@@ -1,4 +1,6 @@
-import { detectActiveThemeMode, getMetaTag, useSystemThemeMode } from 'clo-ui';
+import { useSystemThemeMode } from 'clo-ui/hooks/useSystemThemeMode';
+import { detectActiveThemeMode } from 'clo-ui/utils/detectActiveThemeMode';
+import { getMetaTag } from 'clo-ui/utils/getMetaTag';
 import { isNull } from 'lodash';
 import { createContext, Dispatch, useContext, useEffect, useReducer, useState } from 'react';
 

web/src/data.tsx

@@ -1,4 +1,7 @@
-import { ExternalLink, Foundation, Maturity, SampleQuery } from 'clo-ui';
+import { ExternalLink } from 'clo-ui/components/ExternalLink';
+import { Foundation } from 'clo-ui/components/Foundation';
+import { Maturity } from 'clo-ui/components/Maturity';
+import { SampleQuery } from 'clo-ui/components/SampleQueries';
 import { BiLock, BiMedal, BiShieldQuarter, BiTable, BiTrophy, BiWorld } from 'react-icons/bi';
 import { BsCalendar3, BsUiChecks } from 'react-icons/bs';
 import { CgFileDocument, CgReadme } from 'react-icons/cg';

web/src/layout/common/BadgeModal.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Foundation } from 'clo-ui';
+import { Foundation } from 'clo-ui/components/Foundation';
 
 import BadgeModal from './BadgeModal';
 

web/src/layout/common/BadgeModal.tsx

@@ -1,4 +1,7 @@
-import { CodeBlock, Foundation, Modal, Tabs } from 'clo-ui';
+import { CodeBlock } from 'clo-ui/components/CodeBlock';
+import { Foundation } from 'clo-ui/components/Foundation';
+import { Modal } from 'clo-ui/components/Modal';
+import { Tabs } from 'clo-ui/components/Tabs';
 import { useContext } from 'react';
 
 import { AppContext } from '../../context/AppContextProvider';

web/src/layout/common/CategoriesSummary.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { RoundScore } from 'clo-ui';
+import { RoundScore } from 'clo-ui/components/RoundScore';
 import { isUndefined } from 'lodash';
 
 import { CATEGORY_ICONS } from '../../data';

web/src/layout/common/CategoryProgressbar.tsx

@@ -1,4 +1,5 @@
-import { getCategoryColor, roundScoreValue } from 'clo-ui';
+import { getCategoryColor } from 'clo-ui/utils/getCategoryColor';
+import { roundScoreValue } from 'clo-ui/utils/roundScoreValue';
 import { isUndefined } from 'lodash';
 import { useLocation, useNavigate } from 'react-router-dom';
 

web/src/layout/common/ProjectDropdown.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { Foundation } from 'clo-ui';
+import { Foundation } from 'clo-ui/components/Foundation';
 
 import ProjectDropdown from './ProjectDropdown';