Bump tailwindcss related packages and updated config. Fixed Storybook! (#624)

* Updated Story book to the latest one * Updated tailwindcss related packages and config * Fixed Storybook * Added missed colors * Fixed CSS for the error dialog
2026-03-26 14:28:04 +00:00 · 2025-11-26 08:55:42 +02:00
parent 210a371d06
commit 51df16e83e
21 changed files with 3489 additions and 7792 deletions
--- a/frontend/src/components/SelectMenu.stories.tsx
+++ b/frontend/src/components/SelectMenu.stories.tsx
@@ -7,7 +7,7 @@
 */

 import { Meta, StoryObj } from "@storybook/react-vite";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import SelectMenu, { SelectMenuItem } from "./SelectMenu";

 const meta = {
--- a/frontend/src/components/common/DropDown.stories.tsx
+++ b/frontend/src/components/common/DropDown.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react-vite";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import DropDown from "./DropDown";
 import { BsSlack, BsGithub } from "react-icons/bs";

--- a/frontend/src/components/common/Page/Page.stories.tsx
+++ b/frontend/src/components/common/Page/Page.stories.tsx
@@ -1,24 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { within, userEvent } from "@storybook/testing-library";
-import { Page } from "./Page";
-
-const meta = {
-  title: "Example/Page",
-  component: Page,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof Page>;
-
-export default meta;
-
-export const LoggedOut = {};
-
-export const LoggedIn: StoryObj<typeof Page> = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole("button", { name: /Log in/i });
-    await userEvent.click(loginButton);
-  },
-};
--- a/frontend/src/components/modal/ErrorModal.stories.tsx
+++ b/frontend/src/components/modal/ErrorModal.stories.tsx
@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Meta } from "@storybook/react-vite";
 import ErrorModal from "./ErrorModal";

--- a/frontend/src/components/modal/ErrorModal.tsx
+++ b/frontend/src/components/modal/ErrorModal.tsx
@@ -50,9 +50,7 @@ export default function ErrorModal({

  return (
    <Modal
-      containerClassNames={
-        "border-2 border-error-border-color bg-error-background w-2/3"
-      }
+      containerClassNames={"error-dialog w-2/3"}
      title={ErrorTitle}
      isOpen={isOpen}
      onClose={onClose}
--- a/frontend/src/components/modal/GlobalErrorModal.tsx
+++ b/frontend/src/components/modal/GlobalErrorModal.tsx
@@ -34,9 +34,7 @@ export default function GlobalErrorModal({

  return (
    <Modal
-      containerClassNames={
-        "border-2 border-error-border-color bg-error-background w-3/5 "
-      }
+      containerClassNames={"error-dialog w-3/5"}
      title={ErrorTitle}
      isOpen={isOpen}
      onClose={onClose}
--- a/frontend/src/components/modal/Modal.stories.tsx
+++ b/frontend/src/components/modal/Modal.stories.tsx
@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { StoryObj, StoryFn, Meta } from "@storybook/react-vite";
 import Modal, { ModalAction, ModalButtonStyle } from "./Modal";

--- a/frontend/src/components/revision/RevisionResource.tsx
+++ b/frontend/src/components/revision/RevisionResource.tsx
@@ -104,7 +104,7 @@ const ResourceRow = ({
        <td className="font-bold text-sm w-56">{name}</td>
        <td>{reason ? <Badge type={badgeType}>{reason}</Badge> : null}</td>
        <td className="rounded text-gray-100">
-          <div className="flex flex-col space-y-1 justify-start items-start ">
+          <div className="flex flex-col space-y-1 flex-start">
            {message && (
              <div className="text-gray-500 font-thin">{message}</div>
            )}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,73 +1,152 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Inter&family=Poppins:wght@600&family=Poppins:wght@500&family=Inter:wght@500&family=Roboto+Slab:wght@400&family=Roboto+Slab:wght@700&family=Roboto:wght@700&family=Roboto:wght@500");
+/* 1. Google Fonts */
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Inter:wght@400;500&family=Poppins:wght@500;600&family=Roboto+Slab:wght@400;700");
+
+/* 2. Tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

+/* 3. Theme variables (CSS-first approach) */
+:root {
+    /* Fonts */
+    --font-roboto: "Roboto", serif;
+    --font-roboto-slab: "Roboto Slab", serif;
+    --font-inter: "Inter", serif;
+    --font-poppins: "Poppins", sans-serif;
+    --font-sf-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    /* Font weights */
+    --font-weight-thin: 100;
+    --font-weight-hairline: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-semibold: 500;
+    --font-weight-extrabold: 600;
+    --font-weight-bold: 700;
+
+    /* Colors */
+    --color-body: #3d4048;
+    --color-white: #ffffff;
+    --color-gray-100: #f3f4f6;
+    --color-gray-200: #e5e7eb;
+    --color-gray-300: #d1d5db;
+    --color-cluster-list: #3d4048;
+    --color-dark: #3d4048;
+    --color-tab-color: #3B3D45;
+    --color-primary: #1347FF;
+    --color-secondary: #ECEFF2;
+    --color-muted: #707583;
+    --color-error-border: #DC3545;
+    --color-error-background: #F9D7DA;
+    --color-error-color: #842029;
+    --color-failed: #FC1683;
+    --color-deployed: #1FA470;
+    --color-superseded: #9195A1;
+    --color-pending: #5AB0FF;
+    --color-danger: #ff0072;
+    --color-text-danger: #FC1683;
+    --color-text-warning: #ffc107;
+    --color-text-success: #A4F8D7;
+    --color-upgradable: #0d6efd;
+    --color-warning: #ffa800;
+    --color-success: #00c2ab;
+    --color-border-deployed: #1BE99A;
+    --color-revision-light: #DCDDDF;
+    --color-revision-dark: #007bff;
+    --color-installed-charts-filter: #dad8ce;
+    --color-dropdown: #E9ECEF;
+    --color-chart-values: #ECEFF2;
+    --color-add-repo: #0b5ed7;
+    --color-link-color: #0D6EFD;
+    --color-body-background: #F4F7FA;
+    --color-repository: #D6EFFE;
+    --color-revision: #D6EFFE;
+    --color-header-install: #EBEFFF;
+    --color-upgrade-color: #FC1683;
+
+}
+
+/* 4. Base layer */
@layer base {
-  body {
-    color: theme("colors.body");
-    font-family: "Roboto", serif;
-  }
-}
-
-button,
-input,
-input::placeholder {
-  font-family: "Roboto", serif;
+    body {
+        color: var(--color-body);
+        font-family: var(--font-roboto);
+    }
+
+    button,
+    input,
+    input::placeholder {
+        font-family: var(--font-roboto);
+    }
 }

+/* 5. Components layer */
@layer components {
-  .card {
-    background-color: theme("colors.white");
-    border-radius: theme("borderRadius.lg");
-    border: theme("borderWidth.DEFAULT") solid theme("colors.gray.200");
-    padding: theme("spacing.6");
-    box-shadow: theme("boxShadow.xl");
-    padding-top: theme("spacing.12");
-  }
-  .card-hover {
-    background-color: theme("colors.gray.100");
-    border-radius: theme("borderRadius.lg");
-    padding: theme("spacing.6");
-    box-shadow: theme("boxShadow.xl");
-  }
-  .card-active {
-    background-color: theme("colors.gray.200");
-    border-radius: theme("borderRadius.lg");
-    padding: theme("spacing.6");
-    box-shadow: theme("boxShadow.xl");
-  }
-  .card-disabled {
-    background-color: theme("colors.gray.300");
-    border-radius: theme("borderRadius.lg");
-    padding: theme("spacing.6");
-    box-shadow: theme("boxShadow.xl");
-  }
-  .custom-shadow {
-    position: relative;
-    box-sizing: border-box;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
-  }
+    .card {
+        background-color: var(--color-white);
+        border-radius: theme("borderRadius.lg");
+        border: 1px solid var(--color-gray-200);
+        box-shadow: theme("boxShadow.xl");
+        padding: theme("spacing.12") theme("spacing.6") theme("spacing.6");
+    }
+
+    .card-hover {
+        background-color: var(--color-gray-100);
+        border-radius: theme("borderRadius.lg");
+        padding: theme("spacing.6");
+        box-shadow: theme("boxShadow.xl");
+    }
+
+    .card-active {
+        background-color: var(--color-gray-200);
+        border-radius: theme("borderRadius.lg");
+        padding: theme("spacing.6");
+        box-shadow: theme("boxShadow.xl");
+    }
+
+    .card-disabled {
+        background-color: var(--color-gray-300);
+        border-radius: theme("borderRadius.lg");
+        padding: theme("spacing.6");
+        box-shadow: theme("boxShadow.xl");
+    }
+
+    .custom-shadow {
+        position: relative;
+        box-sizing: border-box;
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+    }
+
+    .error-dialog {
+        border:  var(--color-error-border);
+        background-color: var(--color-error-background);
+        color: var(--color-error-color);
+    }
 }

+/* 6. Code & pre fonts */
 pre,
 code {
-  font-family: SFMono-Regular, Menlo;
-  font-size: 12.5px;
+    font-family: var(--font-sf-mono);
+    font-size: 12.5px;
 }

+/* 7. Portal positioning */
 #portal {
-  top: 0;
-  width: 40%;
-  left: 30%;
-  position: absolute;
+    top: 0;
+    width: 40%;
+    left: 30%;
+    position: absolute;
 }

+/* 8. Required fields */
 .require:after {
-  content: " *";
-  color: red;
+    content: " *";
+    color: red;
 }

+/* 9. Input focus shadow */
 .input-box-shadow:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
--- a/frontend/src/stories/Introduction.stories.mdx
+++ b/frontend/src/stories/Introduction.stories.mdx