Merge branch 'develop' into chore/revamp-manifest-component-header

Author: RohitRaj011

.eslintignore

@@ -207,7 +207,6 @@ src/components/charts/list/DeployedChartFilters.tsx
 src/components/charts/list/DiscoverCharts.tsx
 src/components/charts/modal/ChartGroupBasicDeploy.tsx
 src/components/charts/modal/CreateChartGroup.tsx
-src/components/charts/modal/DeployChart.tsx
 src/components/charts/useChartGroup.ts
 src/components/charts/util/ChartGroupCard.tsx
 src/components/charts/util/ChartSelect.tsx
@@ -282,7 +281,6 @@ src/components/common/HiddenInput/HiddenInput.tsx
 src/components/common/List/List.tsx
 src/components/common/MultiSelect/MultiSelect.tsx
 src/components/common/Select/Select.tsx
-src/components/common/ToastBody.tsx
 src/components/common/ValidateForm/ValidateForm.tsx
 src/components/common/eaEmptyState/EAEmptyState.tsx
 src/components/common/edge/rectangularEdge.tsx
@@ -298,7 +296,7 @@ src/components/common/helpers/Helpers.tsx
 src/components/common/helpers/compareVersion.ts
 src/components/common/helpers/isSubset.ts
 src/components/common/helpers/time.ts
-src/components/common/helpers/util.ts
+src/components/common/helpers/utils.tsx
 src/components/common/helpers/workflowURL.ts
 src/components/common/hooks/FileReader.ts
 src/components/common/hooks/__tests__/FileReader.test.tsx
@@ -463,7 +461,7 @@ src/components/v2/common/ReactSelectCustomization.tsx
 src/components/v2/common/message.ui.tsx
 src/components/v2/devtronStackManager/AboutDevtronView.tsx
 src/components/v2/devtronStackManager/DevtronStackManager.component.tsx
-src/components/v2/devtronStackManager/DevtronStackManager.service.ts
+src/components/v2/devtronStackManager/DevtronStackManager.service.tsx
 src/components/v2/devtronStackManager/DevtronStackManager.tsx
 src/components/v2/devtronStackManager/DevtronStackManager.utils.ts
 src/components/v2/devtronStackManager/SuccessModalComponent.tsx
@@ -483,7 +481,6 @@ src/components/v2/values/chartValuesDiff/ChartValuesView.reducer.ts
 src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
 src/components/v2/values/chartValuesDiff/ChartValuesView.utils.ts
 src/components/v2/values/chartValuesDiff/ProjectUpdateModal.tsx
-src/components/v2/values/common/ReadmeColumn.component.tsx
 src/components/v2/values/common/chartValues.api.ts
 src/components/workflowEditor/CDSuccessModal.tsx
 src/components/workflowEditor/CreateWorkflow.tsx

.eslintrc.js

@@ -40,6 +40,7 @@ module.exports = {
         'airbnb',
         'airbnb/hooks',
         'prettier',
+        'plugin:storybook/recommended',
     ],
     rules: {
         'prettier/prettier': ['error'],

.gitignore

@@ -36,3 +36,6 @@ playwright/.auth/
 .npmrc
 
 package-lock.json
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+    stories: [
+        {
+            directory: '../src/stories',
+            files: '*.stories.@(ts|tsx)',
+            titlePrefix: 'Design System/',
+        },
+    ],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+        '@storybook/addon-a11y',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    typescript: {
+        // Disabled to prevent connection lost issue while linking common lib locally
+        reactDocgen: false,
+    },
+    core: {
+        disableTelemetry: true,
+    },
+}
+export default config

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link
+    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet"
+/>
+<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap" rel="stylesheet" />

.storybook/preview.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+import '../src/css/application.scss'
+import { BrowserRouter } from 'react-router-dom'
+import { ToastManagerContainer } from '@devtron-labs/devtron-fe-common-lib'
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        backgrounds: {
+            values: [
+                {
+                    name: 'Light',
+                    value: 'var(--N0)',
+                },
+                {
+                    name: 'Dark',
+                    value: 'var(--N700)',
+                },
+            ],
+            default: 'Light',
+        },
+    },
+    tags: ['autodocs'],
+    decorators: (Story) => (
+        <>
+            <BrowserRouter>
+                <Story />
+            </BrowserRouter>
+            <ToastManagerContainer />
+        </>
+    ),
+}
+
+export default preview

Dockerfile

@@ -9,7 +9,7 @@ RUN yarn install --network-timeout 600000
 COPY src/ src
 COPY nginx.conf .
 COPY tsconfig.json .
-COPY vite.config.ts .
+COPY vite.config.mts .
 COPY . .
 
 RUN echo `git rev-parse --short HEAD` > health.html

Dockerfile.storybook

@@ -0,0 +1,19 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+COPY package.json .
+COPY yarn.lock .
+
+RUN yarn install --network-timeout 600000
+
+COPY . .
+
+RUN yarn build-storybook
+
+FROM nginx:stable
+
+COPY --from=builder /app/storybook-static/ /usr/share/nginx/html
+WORKDIR /usr/share/nginx/html
+
+CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]
+EXPOSE 80

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.2.24",
+        "@devtron-labs/devtron-fe-common-lib": "0.3.6",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -40,7 +40,6 @@
         "react-monaco-editor": "^0.55.0",
         "react-router-dom": "^5.3.4",
         "react-select": "5.8.0",
-        "react-toastify": "^8.2.0",
         "react-virtualized": "^9.22.5",
         "recharts": "^2.1.9",
         "rollup-plugin-node-polyfills": "0.2.1",
@@ -70,7 +69,9 @@
         "test-coverage": "npm run test -- --coverage --watchAll=false",
         "test:ci": "jest --watchAll=false --ci --json --coverage --testLocationInResults --outputFile=report.json",
         "jest": "jest",
-        "lint-staged": "lint-staged"
+        "lint-staged": "lint-staged",
+        "storybook": "IS_STORYBOOK=true storybook dev -p 6006",
+        "build-storybook": "IS_STORYBOOK=true storybook build"
     },
     "browserslist": [
         ">0.2%",
@@ -79,8 +80,18 @@
         "not op_mini all"
     ],
     "devDependencies": {
+        "@chromatic-com/storybook": "^1.8.0",
         "@playwright/test": "^1.32.1",
         "@sentry/cli": "^2.2.0",
+        "@storybook/addon-a11y": "^8.2.9",
+        "@storybook/addon-actions": "^8.2.9",
+        "@storybook/addon-essentials": "^8.2.9",
+        "@storybook/addon-interactions": "^8.2.9",
+        "@storybook/addon-links": "^8.2.9",
+        "@storybook/blocks": "^8.2.9",
+        "@storybook/react": "^8.2.9",
+        "@storybook/react-vite": "^8.2.9",
+        "@storybook/test": "^8.2.9",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.4",
         "@types/jest": "^27.4.1",
@@ -104,6 +115,7 @@
         "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-storybook": "^0.8.0",
         "husky": "^7.0.4",
         "jest-extended": "^2.0.0",
         "jest-junit": "^13.0.0",
@@ -113,6 +125,7 @@
         "prettier": "^3.1.1",
         "react-test-render": "^1.1.2",
         "sass": "^1.69.7",
+        "storybook": "^8.2.9",
         "ts-jest": "29.2.5",
         "ts-node": "10.9.2",
         "typescript": "5.5.4",
@@ -144,11 +157,5 @@
             "monaco-editor": "<rootDir>/node_modules/react-monaco-editor",
             "monaco-yaml": "<rootDir>/node_modules/react-monaco-editor"
         }
-    },
-    "resolutions": {
-        "**/@typescript-eslint/eslint-plugin": "^4.33.0",
-        "**/@typescript-eslint/parser": "^4.33.0",
-        "react": "^17.0.2",
-        "@types/react": "17.0.39"
     }
 }