mirror/helm-dashboard
1
0
Fork 0
mirror of https://github.com/komodorio/helm-dashboard.git synced 2026-03-24 11:48:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Updated Story book to the latest one

* Updated tailwindcss related packages and config

* Fixed Storybook

* Added missed colors

* Fixed CSS for the error dialog
This commit is contained in:
yuri-sakharov
2025-11-26 08:55:42 +02:00
committed by GitHub
parent 210a371d06
commit 51df16e83e
21 changed files with 3489 additions and 7792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/.storybook/main.cjs
View File

@@ -1,32 +0,0 @@
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: "@storybook/react",
core: {
builder: "@storybook/builder-vite",
},
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
],
include: path.resolve(__dirname, "../"),
});
return config;
},
features: {
storyStoreV7: true,
},
};

22
frontend/.storybook/main.ts
View File

@@ -1,25 +1,21 @@
// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite"; import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = { const config: StorybookConfig = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
addons: [ addons: [
"@storybook/addon-actions",
"@storybook/addon-links", "@storybook/addon-links",
"@storybook/addon-essentials", "@storybook/addon-docs"
"@storybook/addon-styling",
{
name: "@storybook/addon-styling",
},
"@storybook/addon-mdx-gfm",
], ],
core: {}, core: {},
framework: { framework: {
name: "@storybook/react-vite", name: "@storybook/react-vite",
options: {}, options: {},
}, },
docs: { features: {
autodocs: true, mdx2Csf: true,
}, }
}; };
export default config; export default config;

12
frontend/.storybook/preview.cjs
View File

@@ -1,12 +0,0 @@
import "../src/index.css";
import "tailwindcss/tailwind.css";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};

12
frontend/.storybook/preview.js
View File

@@ -1,12 +0,0 @@
import "tailwindcss/tailwind.css";
import "../src/index.css";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};

34
frontend/.storybook/preview.tsx Normal file
View File

@@ -0,0 +1,34 @@
import "tailwindcss/tailwind.css";
import "../src/index.css";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { Preview, StoryFn } from "@storybook/react";
import { AppContextProvider } from "../src/context/AppContext";
const queryClient = new QueryClient();
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
export const decorators: Preview["decorators"] = [
(Story: StoryFn) => (
<BrowserRouter>
<AppContextProvider>
<QueryClientProvider client={queryClient}>
<Story />
</QueryClientProvider>
</AppContextProvider>
</BrowserRouter>
),
];
export const tags = ["autodocs"];

4
frontend/index.html
View File

@@ -2,10 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg" /> <link rel="icon" type="image/svg+xml" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Helm Dashboard</title> <title>Helm Dashboard</title>
<script src="/assets/analytics.js"></script> <script type="module" src="/analytics.js"></script>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"

8007
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
frontend/package.json
View File

@@ -10,8 +10,7 @@
"@types/marked": "^5.0.0", "@types/marked": "^5.0.0",
"compare-versions": "^6.0.0-rc.2", "compare-versions": "^6.0.0-rc.2",
"diff2html": "^3.4.46", "diff2html": "^3.4.46",
"flowbite": "^1.6.6", "flowbite-react": "^0.12.10",
"flowbite-react": "^0.4.9",
"highlight.js": "^11.8.0", "highlight.js": "^11.8.0",
"html-react-parser": "^4.0.0", "html-react-parser": "^4.0.0",
"luxon": "^3.3.0", "luxon": "^3.3.0",
@@ -31,16 +30,10 @@
"@babel/core": "^7.21.0", "@babel/core": "^7.21.0",
"@eslint/eslintrc": "^3.3.1", "@eslint/eslintrc": "^3.3.1",
"@eslint/js": "^9.39.1", "@eslint/js": "^9.39.1",
"@storybook/addon-actions": "^7.0.24", "@storybook/addon-docs": "^10.0.8",
"@storybook/addon-essentials": "^8.6.14", "@storybook/addon-links": "^10.0.8",
"@storybook/addon-interactions": "^7.0.24", "@storybook/mdx2-csf": "^1.1.0",
"@storybook/addon-links": "^7.0.24", "@storybook/react-vite": "^10.0.8",
"@storybook/addon-mdx-gfm": "7.0.24",
"@storybook/addon-styling": "^2.0.0",
"@storybook/react": "^9.1.13",
"@storybook/react-vite": "9.1.13",
"@storybook/testing-library": "^0.2.0",
"@tailwindcss/line-clamp": "^0.4.4",
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"@types/swagger-ui-react": "^4.18.0", "@types/swagger-ui-react": "^4.18.0",
@@ -55,12 +48,12 @@
"eslint-config-prettier": "^10.1.8", "eslint-config-prettier": "^10.1.8",
"eslint-plugin-react": "^7.37.5", "eslint-plugin-react": "^7.37.5",
"eslint-plugin-storybook": "^10.0.8", "eslint-plugin-storybook": "^10.0.8",
"flowbite": "^4.0.1",
"globals": "^16.5.0", "globals": "^16.5.0",
"lint-staged": "^13.2.3", "lint-staged": "^13.2.3",
"postcss": "^8.4.24", "postcss": "^8.4.24",
"prettier": "^3.6.2", "prettier": "^3.6.2",
"react-icons": "^4.8.0", "storybook": "10.0.8",
"storybook": "9.1.13",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.2.4", "vite": "^7.2.4",
@@ -74,9 +67,9 @@
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified. Please use 'cypress:run' or 'cypress:open' commands\" && exit 1",
"storybook": "storybook dev -p 6006", "storybook": "storybook dev -p 6006",
"build-storybook": "storybook build", "storybook:build": "storybook build",
"lint": "npx eslint src/", "lint": "npx eslint src/",
"lint:fix": "npm run lint -- --fix", "lint:fix": "npm run lint -- --fix",
"prettier": "npx prettier src/ --check", "prettier": "npx prettier src/ --check",

2
frontend/src/components/SelectMenu.stories.tsx
View File

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

2
frontend/src/components/common/DropDown.stories.tsx
View File

@@ -1,5 +1,5 @@
import { Meta } from "@storybook/react-vite"; import { Meta } from "@storybook/react-vite";
import { action } from "@storybook/addon-actions"; import { action } from "storybook/actions";
import DropDown from "./DropDown"; import DropDown from "./DropDown";
import { BsSlack, BsGithub } from "react-icons/bs"; import { BsSlack, BsGithub } from "react-icons/bs";

24
frontend/src/components/common/Page/Page.stories.tsx
View File

@@ -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);
},
};

2
frontend/src/components/modal/ErrorModal.stories.tsx
View File

@@ -1,4 +1,4 @@
import { action } from "@storybook/addon-actions"; import { action } from "storybook/actions";
import { Meta } from "@storybook/react-vite"; import { Meta } from "@storybook/react-vite";
import ErrorModal from "./ErrorModal"; import ErrorModal from "./ErrorModal";

4
frontend/src/components/modal/ErrorModal.tsx
View File

@@ -50,9 +50,7 @@ export default function ErrorModal({
return ( return (
<Modal <Modal
containerClassNames={ containerClassNames={"error-dialog w-2/3"}
"border-2 border-error-border-color bg-error-background w-2/3"
}
title={ErrorTitle} title={ErrorTitle}
isOpen={isOpen} isOpen={isOpen}
onClose={onClose} onClose={onClose}

4
frontend/src/components/modal/GlobalErrorModal.tsx
View File

@@ -34,9 +34,7 @@ export default function GlobalErrorModal({
return ( return (
<Modal <Modal
containerClassNames={ containerClassNames={"error-dialog w-3/5"}
"border-2 border-error-border-color bg-error-background w-3/5 "
}
title={ErrorTitle} title={ErrorTitle}
isOpen={isOpen} isOpen={isOpen}
onClose={onClose} onClose={onClose}

2
frontend/src/components/modal/Modal.stories.tsx
View File

@@ -1,4 +1,4 @@
import { action } from "@storybook/addon-actions"; import { action } from "storybook/actions";
import { StoryObj, StoryFn, Meta } from "@storybook/react-vite"; import { StoryObj, StoryFn, Meta } from "@storybook/react-vite";
import Modal, { ModalAction, ModalButtonStyle } from "./Modal"; import Modal, { ModalAction, ModalButtonStyle } from "./Modal";

2
frontend/src/components/revision/RevisionResource.tsx
View File

@@ -104,7 +104,7 @@ const ResourceRow = ({
<td className="font-bold text-sm w-56">{name}</td> <td className="font-bold text-sm w-56">{name}</td>
<td>{reason ? <Badge type={badgeType}>{reason}</Badge> : null}</td> <td>{reason ? <Badge type={badgeType}>{reason}</Badge> : null}</td>
<td className="rounded text-gray-100"> <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 && ( {message && (
<div className="text-gray-500 font-thin">{message}</div> <div className="text-gray-500 font-thin">{message}</div>
)} )}

105
frontend/src/index.css
View File

@@ -1,61 +1,138 @@
@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 base;
@tailwind components; @tailwind components;
@tailwind utilities; @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 { @layer base {
body { body {
color: theme("colors.body"); color: var(--color-body);
font-family: "Roboto", serif; font-family: var(--font-roboto);
}
} }
button, button,
input, input,
input::placeholder { input::placeholder {
font-family: "Roboto", serif; font-family: var(--font-roboto);
}
} }
/* 5. Components layer */
@layer components { @layer components {
.card { .card {
background-color: theme("colors.white"); background-color: var(--color-white);
border-radius: theme("borderRadius.lg"); border-radius: theme("borderRadius.lg");
border: theme("borderWidth.DEFAULT") solid theme("colors.gray.200"); border: 1px solid var(--color-gray-200);
padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl"); box-shadow: theme("boxShadow.xl");
padding-top: theme("spacing.12"); padding: theme("spacing.12") theme("spacing.6") theme("spacing.6");
} }
.card-hover { .card-hover {
background-color: theme("colors.gray.100"); background-color: var(--color-gray-100);
border-radius: theme("borderRadius.lg"); border-radius: theme("borderRadius.lg");
padding: theme("spacing.6"); padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl"); box-shadow: theme("boxShadow.xl");
} }
.card-active { .card-active {
background-color: theme("colors.gray.200"); background-color: var(--color-gray-200);
border-radius: theme("borderRadius.lg"); border-radius: theme("borderRadius.lg");
padding: theme("spacing.6"); padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl"); box-shadow: theme("boxShadow.xl");
} }
.card-disabled { .card-disabled {
background-color: theme("colors.gray.300"); background-color: var(--color-gray-300);
border-radius: theme("borderRadius.lg"); border-radius: theme("borderRadius.lg");
padding: theme("spacing.6"); padding: theme("spacing.6");
box-shadow: theme("boxShadow.xl"); box-shadow: theme("boxShadow.xl");
} }
.custom-shadow { .custom-shadow {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); 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, pre,
code { code {
font-family: SFMono-Regular, Menlo; font-family: var(--font-sf-mono);
font-size: 12.5px; font-size: 12.5px;
} }
/* 7. Portal positioning */
#portal { #portal {
top: 0; top: 0;
width: 40%; width: 40%;
@@ -63,11 +140,13 @@ code {
position: absolute; position: absolute;
} }
/* 8. Required fields */
.require:after { .require:after {
content: " *"; content: " *";
color: red; color: red;
} }
/* 9. Input focus shadow */
.input-box-shadow:focus { .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);
} }

0
frontend/src/stories/Introduction.stories.mdx → frontend/src/stories/Introduction.mdx
View File

79
frontend/tailwind.config.cjs
View File

@@ -1,85 +1,12 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
module.exports = { module.exports = {
content: [ content: [
"./index.html", "./index.html",
"./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/flowbite/**/*.js", "./node_modules/flowbite/**/*.js",
"node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}", "./node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
], ],
theme: { plugins: [
fontFamily: { require("flowbite/plugin")
roboto: ["Roboto", "serif"],
"roboto-slab": ["Roboto Slab", "sans-serif"],
inter: ["Inter", "serif"],
"sf-mono": [
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace",
], ],
monospace: ["monospace"],
poppins: ["Poppins", "sans-serif"],
},
fontWeight: {
thin: "100",
hairline: "100",
extralight: "200",
light: "300",
normal: "400",
semibold: "500",
extrabold: "600",
bold: "700",
},
extend: {
colors: {
"cluster-list": "#3d4048",
body: "#3d4048",
dark: "#3d4048",
"tab-color": "#3B3D45",
primary: "#1347FF",
secondary: "#ECEFF2",
muted: "#707583",
error: {
"border-color": "#DC3545",
background: "#F9D7DA",
color: "#842029",
},
failed: "#FC1683",
deployed: "#1FA470",
superseded: "#9195A1",
pending: "#5AB0FF",
danger: "#ff0072",
"text-danger": "#FC1683",
"text-warning": "#ffc107",
"text-success": "#A4F8D7",
upgradable: "#0d6efd",
warning: "#ffa800",
success: "#00c2ab",
"border-deployed": "#1BE99A",
"revision-light": "#DCDDDF",
"revision-dark": "#007bff",
"installed-charts-filter": "#dad8ce",
dropdown: "#E9ECEF",
"chart-values": "#ECEFF2",
"add-repo": "#0b5ed7",
"link-color": "#0D6EFD ",
"body-background": "#F4F7FA",
repository: "#D6EFFE",
revision: "#D6EFFE",
"header-install": "#EBEFFF",
"upgrade-color": "#FC1683",
},
},
},
// eslint-disable-next-line no-undef
plugins: [require("@tailwindcss/line-clamp"), require("flowbite/plugin")],
fontFamily: {
sans: ["Roboto", "Graphik", "sans-serif"],
serif: ["Merriweather", "serif"],
},
}; };

11
frontend/vite.config.ts
View File

@@ -29,6 +29,17 @@ export default defineConfig(({ mode }) => {
assetsDir: "./assets/", assetsDir: "./assets/",
outDir: "../pkg/frontend/dist", outDir: "../pkg/frontend/dist",
emptyOutDir: true, emptyOutDir: true,
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom', 'react-router-dom'],
vendors: ['luxon','highlight.js','diff2html','swagger-ui-react']
}
}
}
},
css: {
postcss: './postcss.config.cjs'
}, },
server: { server: {
proxy: { proxy: {

2808
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff