Update packages

custom-types/styled.d.ts

@@ -1,5 +1,5 @@
 import "styled-components";
-import { ThemeSpec } from "../src/theme/types";
+import { ThemeSpec } from "@lifesg/react-design-system/theme/types";
 
 declare module "styled-components" {
     export interface DefaultTheme extends ThemeSpec {}

jest.config.js

@@ -10,6 +10,6 @@ module.exports = {
             "<rootDir>/src/__mocks__/fileMock.js",
     },
     moduleDirectories: ["node_modules", "<rootDir>"],
-    setupFilesAfterEnv: ["@testing-library/jest-dom"],
+    setupFilesAfterEnv: ["<rootDir>/tests/setup/global-setup.ts"],
     reporters: ["default", ["jest-junit", { outputName: "junit.xml" }]],
 };

package.json

@@ -36,6 +36,8 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@hookform/resolvers": "^3.3.4",
+        "@lifesg/react-design-system": "^3.0.0-alpha.20",
+        "@lifesg/web-frontend-engine": "^2.0.0-alpha.8",
         "react-hook-form": "^7.54.2",
         "use-immer": "^0.9.0",
         "yup": "^1.4.0"
@@ -47,9 +49,7 @@
         "@babel/preset-typescript": "^7.16.7",
         "@floating-ui/dom": "^1.6.13",
         "@floating-ui/react": "^0.26.28",
-        "@lifesg/react-design-system": "^3.0.0-alpha.6",
         "@lifesg/react-icons": "^1.10.0",
-        "@lifesg/web-frontend-engine": "^2.0.0-alpha.1",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-image": "^3.0.3",
         "@rollup/plugin-json": "^6.1.0",
@@ -64,13 +64,12 @@
         "@storybook/addon-themes": "^7.5.1",
         "@storybook/react": "^7.4.6",
         "@storybook/react-webpack5": "^7.4.6",
-        "@testing-library/jest-dom": "^5.16.3",
-        "@testing-library/react": "^12.1.4",
-        "@types/jest": "^27.4.1",
+        "@testing-library/jest-dom": "^6.7.0",
+        "@testing-library/react": "^12.1.5",
+        "@types/jest": "^30.0.0",
         "@types/lodash": "^4.14.180",
         "@types/react": "^17.0.43",
         "@types/react-dom": "^17.0.14",
-        "@types/styled-components": "^5.1.3",
         "@typescript-eslint/eslint-plugin": "^5.16.0",
         "@typescript-eslint/parser": "^5.16.0",
         "babel-loader": "^8.2.4",
@@ -80,10 +79,11 @@
         "eslint-plugin-prettier": "^5.1.3",
         "globals": "^14.0.0",
         "husky": "^9.0.11",
-        "jest": "^27.5.1",
+        "jest": "^30.0.5",
         "jest-canvas-mock": "^2.5.2",
+        "jest-environment-jsdom": "^30.0.5",
         "jest-junit": "^16.0.0",
-        "jest-styled-components": "^7.0.8",
+        "jest-styled-components": "^7.2.0",
         "lint-staged": "^12.3.7",
         "postcss-import": "^16.0.1",
         "prettier": "^3.2.5",
@@ -96,23 +96,21 @@
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-typescript2": "^0.36.0",
         "storybook": "^7.4.6",
-        "styled-components": "^5.3.5",
+        "styled-components": "^6.1.19",
         "typescript": "^4.8.2",
         "typescript-eslint": "^7.1.0"
     },
     "peerDependencies": {
         "@floating-ui/dom": "^1.6.10",
         "@floating-ui/react": "^0.26.23",
-        "@lifesg/react-design-system": "^3.0.0-alpha.6",
         "@lifesg/react-icons": "^1.10.0",
-        "@lifesg/web-frontend-engine": "^2.0.0-alpha.1",
         "react": "^17.0.2 || ^18.0.0",
         "react-dom": "^17.0.2 || ^18.0.0",
-        "styled-components": "^5.3.5"
+        "styled-components": "^6.1.19"
     },
     "lint-staged": {
         "*.{tsx,ts}": [
             "eslint --fix"
         ]
     }
-}
+}

rollup.config.js

@@ -6,7 +6,6 @@ import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
 import typescript from "rollup-plugin-typescript2";
-import pkg from "./package.json";
 
 export const plugins = [
     peerDepsExternal(), // Add the externals for me. [react, react-dom, styled-components]
@@ -41,14 +40,14 @@ export default [
         input: "src/index.ts",
         output: [
             {
-                file: pkg.module,
+                dir: "dist",
                 format: "esm",
                 sourcemap: true,
                 exports: "named",
                 interop: "compat",
             },
             {
-                file: pkg.main,
+                dir: "dist/cjs",
                 format: "cjs",
                 sourcemap: true,
                 exports: "named",

src/components/common/base-card/base-card.styles.tsx

@@ -38,12 +38,12 @@ export const Body = styled.div<IBodyStyleProps>`
 
     border-radius: ${Radius.md};
 
-    :hover {
+    &:hover {
         border-color: ${Colour["border-primary"]};
         box-shadow: 0px 2px 8px 0px ${Colour["border-selected-subtle"]};
     }
 
-    :focus {
+    &:focus {
         outline-color: ${Colour["border-primary"]};
     }
 `;

src/components/common/icon-button/icon-button.styles.tsx

@@ -18,11 +18,11 @@ export const IconButton = styled.button<IIconButtonStyleProps>`
     background: transparent;
     cursor: pointer;
 
-    :hover {
+    &:hover {
         box-shadow: none;
     }
 
-    :focus {
+    &:focus {
         outline-color: ${Colour["border-focus-strong"]};
     }
 

src/components/common/multi-entry/multi-entry.styles.tsx

@@ -36,12 +36,17 @@ export const MultiEntryAccordionItem = styled(
 
     [data-testid="accordion-item-expand-collapse-button"] {
         margin-right: 0.1rem;
+        padding: 0 1rem 0 0;
     }
 
     [data-testid="accordion-item-title"] {
         margin: ${({ $hasSubtitle }) =>
             $hasSubtitle ? `1rem 0 0.5rem 1rem` : "1rem 0 1rem 1rem"};
     }
+
+    [data-testid="content-container"] {
+        padding-right: 0;
+    }
 `;
 
 export const AddMultiEntryButton = styled(ButtonWithIcon.Default)`

src/components/element-card/element-card.styles.tsx

@@ -104,7 +104,7 @@ export const ActionButton = styled.button<IActionButtonStyleProps>`
             return css`
                 color: ${Colour["text-primary"]};
 
-                :hover {
+                &:hover {
                     color: ${Colour["text-hover"]};
                 }
             `;

src/components/element-editor/basic-details/basic-details.styles.tsx

@@ -26,8 +26,7 @@ export const AccordionItem = styled(
     }
 
     [data-testid="accordion-item-title"] {
-        margin: ${({ $hideTopBorder }) =>
-            $hideTopBorder ? "1rem 0 1rem 1rem" : "0 0 0 1rem"};
+        margin: 1rem 0 1rem 1rem;
     }
 
     [data-testid="accordion-item-expandable-container"] {
@@ -36,8 +35,13 @@ export const AccordionItem = styled(
     }
 
     [data-testid="accordion-item-expand-collapse-button"] {
-        margin: ${({ $hideTopBorder }) =>
-            $hideTopBorder ? "0 0.1rem 0 1rem" : "0 0.1rem 0 0"};
+        margin-left: 0;
+        margin-right: 0.1rem;
+        padding: 0 1rem 0 0;
+    }
+
+    [data-testid="content-container"] {
+        padding-right: 0;
     }
 `;
 

src/components/side-panel/toolbar.styles.tsx

@@ -33,11 +33,11 @@ export const ModeButton = styled.button<IModeButtonProps>`
     border-radius: ${Radius.xs};
     padding: 1rem;
 
-    :hover {
+    &:hover {
         background: ${Colour["bg-hover-strong"]};
     }
 
-    :focus {
+    &:focus {
         outline-color: ${Colour["border-focus-strong"]};
     }
 

stories/translator/doc-elements.styles.tsx

@@ -42,11 +42,11 @@ export const IconButton = styled.button<IModeButtonProps>`
     padding: 1rem;
     align-self: center;
 
-    :hover {
+    &:hover {
         background: ${Colour["bg-hover-strong"]};
     }
 
-    :focus {
+    &:focus {
         outline-color: ${Colour["border-focus-strong"]};
     }
 

tests/components/child-entry/child-entry.spec.tsx

@@ -24,7 +24,7 @@ describe("ChildEntry", () => {
         });
         const deleteButton = screen.getByTestId("delete-button");
         fireEvent.click(deleteButton);
-        expect(mockDelete).toBeCalled();
+        expect(mockDelete).toHaveBeenCalled();
     });
 });
 

tests/components/common/pills/pills.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "jest-canvas-mock";
 import { Pills } from "src/components/common/pills";
 import { EElementType, TElement } from "src/context-providers";

tests/components/element-card/element-card.spec.tsx

@@ -125,7 +125,7 @@ describe("ElementCard", () => {
             );
             const deleteButton = getDeleteButton();
             fireEvent.click(deleteButton);
-            expect(mockDeleteElement).toBeCalled();
+            expect(mockDeleteElement).toHaveBeenCalled();
         });
 
         it("should run the duplicateElement hook when clicking the duplicate button", () => {
@@ -149,7 +149,7 @@ describe("ElementCard", () => {
             );
             const duplicateButton = getDuplicateButton();
             fireEvent.click(duplicateButton);
-            expect(mockDuplicateElement).toBeCalled();
+            expect(mockDuplicateElement).toHaveBeenCalled();
             expect(mockDuplicateElement).toHaveBeenCalledWith(MOCK_ELEMENT);
         });
     });

tests/components/element-editor/basic-details/basic-details.spec.tsx

@@ -74,9 +74,9 @@ describe("BasicDetails", () => {
 
             const elementName = screen.getByTestId("label-field");
             const errorMessageField = screen.getByTestId(
-                "required-error-message-field"
+                "required-error-message-field-base"
             );
-            const elementId = screen.getByTestId("id-field");
+            const elementId = screen.getByTestId("id-field-base");
 
             expect(elementName).toHaveValue("Email address");
             expect(errorMessageField).toHaveValue("This is a required field.");
@@ -117,9 +117,9 @@ describe("BasicDetails", () => {
             // Check if the form fields have been replaced with the new element type's default values
             const elementName = screen.getByTestId("label-field");
             const errorMessageField = screen.getByTestId(
-                "required-error-message-field"
+                "required-error-message-field-base"
             );
-            const elementId = screen.getByTestId("id-field");
+            const elementId = screen.getByTestId("id-field-base");
 
             expect(elementName).toHaveValue("Short text");
             expect(errorMessageField).toHaveValue("This is a required field.");
@@ -141,9 +141,11 @@ describe("BasicDetails", () => {
             });
 
             const descriptionField = screen.getByTestId("description-field");
-            const placeholderField = screen.getByTestId("placeholder-field");
+            const placeholderField = screen.getByTestId(
+                "placeholder-field-base"
+            );
             const preselectedValueField = screen.getByTestId(
-                "preselected-value-field"
+                "preselected-value-field-base"
             );
 
             fireEvent.change(descriptionField, {
@@ -180,10 +182,11 @@ describe("BasicDetails", () => {
             // Wait for the form to reset
             const updatedDescriptionField =
                 await screen.findByTestId("description-field");
-            const updatedPlaceholderField =
-                await screen.findByTestId("placeholder-field");
+            const updatedPlaceholderField = await screen.findByTestId(
+                "placeholder-field-base"
+            );
             const updatedPreselectedValueField = await screen.findByTestId(
-                "preselected-value-field"
+                "preselected-value-field-base"
             );
 
             expect(updatedDescriptionField).toHaveValue("");

tests/components/element-editor/basic-details/common/id-field.spec.tsx

@@ -52,8 +52,8 @@ describe("IdField", () => {
             },
         });
 
-        const idField = await screen.findByTestId("id-field");
-        expect(idField).toBeDisabled();
+        const idField = await screen.findByTestId("id-field-base");
+        expect(idField).toHaveAttribute("aria-disabled", "true");
     });
 });
 

tests/components/element-editor/basic-details/common/options.spec.tsx

@@ -57,7 +57,7 @@ describe("Options", () => {
                 fireEvent.click(addOptionButton);
             });
 
-            optionItems = screen.getAllByTestId("option-label");
+            optionItems = screen.getAllByTestId("option-label-base");
 
             expect(optionItems).toHaveLength(3);
         });
@@ -75,7 +75,7 @@ describe("Options", () => {
                 },
             });
 
-            let optionItems = screen.getAllByTestId("option-label");
+            let optionItems = screen.getAllByTestId("option-label-base");
 
             expect(optionItems).toHaveLength(3);
 
@@ -87,7 +87,7 @@ describe("Options", () => {
                 fireEvent.click(deleteButton);
             });
 
-            optionItems = screen.getAllByTestId("option-label");
+            optionItems = screen.getAllByTestId("option-label-base");
 
             expect(optionItems).toHaveLength(2);
         });

tests/components/element-editor/basic-details/elements/dropdown/dropdown-basic-details.spec.tsx

@@ -39,8 +39,10 @@ describe("DropdownBasicDetails", () => {
         const dropdownItem = screen.getByText("Dropdown items");
         expect(dropdownItem).toBeInTheDocument();
 
-        const dropdownItemLabels = await screen.findAllByTestId("option-label");
-        const dropdownItemValues = await screen.findAllByTestId("option-value");
+        const dropdownItemLabels =
+            await screen.findAllByTestId("option-label-base");
+        const dropdownItemValues =
+            await screen.findAllByTestId("option-value-base");
 
         expect(dropdownItemLabels[0]).toBeInTheDocument();
         expect(dropdownItemValues[0]).toBeInTheDocument();
@@ -99,9 +101,9 @@ describe("DropdownBasicDetails", () => {
                 if (fieldName === "preselectedValue") {
                     //Ensure the rendering condition is met
                     const dropdownItemLabels =
-                        await screen.findAllByTestId("option-label");
+                        await screen.findAllByTestId("option-label-base");
                     const dropdownItemValues =
-                        await screen.findAllByTestId("option-value");
+                        await screen.findAllByTestId("option-value-base");
 
                     fireEvent.change(dropdownItemLabels[0], {
                         target: { value: "New Label" },

tests/components/element-editor/conditional-rendering/conditional-rendering-child.spec.tsx

@@ -65,7 +65,7 @@ describe("ConditionalRenderingChild", () => {
 
         const deleteButton = screen.getByTestId("delete-button");
         fireEvent.click(deleteButton);
-        expect(mockDelete).toBeCalled();
+        expect(mockDelete).toHaveBeenCalled();
     });
 
     it("should render an error message when validation error message field is left empty", async () => {

tests/components/element-editor/prefill/prefill-child.spec.tsx

@@ -110,7 +110,7 @@ describe("PrefillChild", () => {
         );
         const deleteButton = screen.getByTestId("delete-button");
         fireEvent.click(deleteButton);
-        expect(mockDelete).toBeCalled();
+        expect(mockDelete).toHaveBeenCalled();
     });
 
     it("should render an error message when prefill fields are left empty", async () => {