Skip to content

Commit 86268f9

Browse files
eshankvaisheshankvaish
authored
Merge pull request #2023 from devtron-labs/feat/storybook
feat: add storybook
2 parents da338f5 + 13c2c2a commit 86268f9

File tree

15 files changed

+3156
-204
lines changed

15 files changed

+3156
-204
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ module.exports = {
4040
'airbnb',
4141
'airbnb/hooks',
4242
'prettier',
43+
'plugin:storybook/recommended',
4344
],
4445
rules: {
4546
'prettier/prettier': ['error'],

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@ playwright/.auth/
3636
.npmrc
3737

3838
package-lock.json
39+
40+
*storybook.log
41+
storybook-static

‎.storybook/main.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { StorybookConfig } from '@storybook/react-vite'
2+
3+
const config: StorybookConfig = {
4+
stories: [
5+
{
6+
directory: '../src/stories',
7+
files: '*.stories.@(ts|tsx)',
8+
titlePrefix: 'Design System/',
9+
},
10+
],
11+
addons: [
12+
'@storybook/addon-links',
13+
'@storybook/addon-essentials',
14+
'@chromatic-com/storybook',
15+
'@storybook/addon-interactions',
16+
'@storybook/addon-a11y',
17+
],
18+
framework: {
19+
name: '@storybook/react-vite',
20+
options: {},
21+
},
22+
typescript: {
23+
// Disabled to prevent connection lost issue while linking common lib locally
24+
reactDocgen: false,
25+
},
26+
core: {
27+
disableTelemetry: true,
28+
},
29+
}
30+
export default config

‎.storybook/preview-head.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<link
2+
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
3+
rel="stylesheet"
4+
/>
5+
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet" />
6+
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap" rel="stylesheet" />

‎.storybook/preview.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
import type { Preview } from '@storybook/react'
3+
import '../src/css/application.scss'
4+
import { BrowserRouter } from 'react-router-dom'
5+
6+
const preview: Preview = {
7+
parameters: {
8+
controls: {
9+
matchers: {
10+
color: /(background|color)$/i,
11+
date: /Date$/i,
12+
},
13+
},
14+
},
15+
tags: ['autodocs'],
16+
decorators: (Story) => <BrowserRouter><Story /></BrowserRouter>
17+
}
18+
19+
export default preview

‎Dockerfile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ RUN yarn install --network-timeout 600000
99
COPY src/ src
1010
COPY nginx.conf .
1111
COPY tsconfig.json .
12-
COPY vite.config.ts .
12+
COPY vite.config.mts .
1313
COPY . .
1414

1515
RUN echo `git rev-parse --short HEAD` > health.html

‎Dockerfile.storybook

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
FROM node:20-alpine AS builder
2+
3+
WORKDIR /app
4+
COPY package.json .
5+
COPY yarn.lock .
6+
7+
RUN yarn install --network-timeout 600000
8+
9+
COPY . .
10+
11+
RUN yarn build-storybook
12+
13+
FROM nginx:stable
14+
15+
COPY --from=builder /app/storybook-static/ /usr/share/nginx/html
16+
WORKDIR /usr/share/nginx/html
17+
18+
CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]
19+
EXPOSE 80

‎package.json

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "0.2.30",
7+
"@devtron-labs/devtron-fe-common-lib": "0.2.32",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",
@@ -70,7 +70,9 @@
7070
"test-coverage": "npm run test -- --coverage --watchAll=false",
7171
"test:ci": "jest --watchAll=false --ci --json --coverage --testLocationInResults --outputFile=report.json",
7272
"jest": "jest",
73-
"lint-staged": "lint-staged"
73+
"lint-staged": "lint-staged",
74+
"storybook": "IS_STORYBOOK=true storybook dev -p 6006",
75+
"build-storybook": "IS_STORYBOOK=true storybook build"
7476
},
7577
"browserslist": [
7678
">0.2%",
@@ -79,8 +81,18 @@
7981
"not op_mini all"
8082
],
8183
"devDependencies": {
84+
"@chromatic-com/storybook": "^1.8.0",
8285
"@playwright/test": "^1.32.1",
8386
"@sentry/cli": "^2.2.0",
87+
"@storybook/addon-a11y": "^8.2.9",
88+
"@storybook/addon-actions": "^8.2.9",
89+
"@storybook/addon-essentials": "^8.2.9",
90+
"@storybook/addon-interactions": "^8.2.9",
91+
"@storybook/addon-links": "^8.2.9",
92+
"@storybook/blocks": "^8.2.9",
93+
"@storybook/react": "^8.2.9",
94+
"@storybook/react-vite": "^8.2.9",
95+
"@storybook/test": "^8.2.9",
8496
"@testing-library/jest-dom": "^5.16.2",
8597
"@testing-library/react": "^12.1.4",
8698
"@types/jest": "^27.4.1",
@@ -104,6 +116,7 @@
104116
"eslint-plugin-prettier": "^5.1.2",
105117
"eslint-plugin-react": "^7.33.2",
106118
"eslint-plugin-react-hooks": "^4.6.0",
119+
"eslint-plugin-storybook": "^0.8.0",
107120
"husky": "^7.0.4",
108121
"jest-extended": "^2.0.0",
109122
"jest-junit": "^13.0.0",
@@ -113,6 +126,7 @@
113126
"prettier": "^3.1.1",
114127
"react-test-render": "^1.1.2",
115128
"sass": "^1.69.7",
129+
"storybook": "^8.2.9",
116130
"ts-jest": "29.2.5",
117131
"ts-node": "10.9.2",
118132
"typescript": "5.5.4",
@@ -144,11 +158,5 @@
144158
"monaco-editor": "<rootDir>/node_modules/react-monaco-editor",
145159
"monaco-yaml": "<rootDir>/node_modules/react-monaco-editor"
146160
}
147-
},
148-
"resolutions": {
149-
"**/@typescript-eslint/eslint-plugin": "^4.33.0",
150-
"**/@typescript-eslint/parser": "^4.33.0",
151-
"react": "^17.0.2",
152-
"@types/react": "17.0.39"
153161
}
154162
}

‎src/App.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,7 @@
1717
import { lazy, Suspense, useRef, useState, useEffect } from 'react'
1818
import { Route, Switch, Redirect, useHistory, useLocation } from 'react-router-dom'
1919
import { toast } from 'react-toastify'
20-
// @TODO: Patternfly styles files need to be removed in future
21-
import './css/patternfly.scss'
22-
import 'react-toastify/dist/ReactToastify.css'
23-
import './css/base.scss'
24-
import './css/formulae.scss'
25-
import './css/forms.scss'
26-
import 'tippy.js/dist/tippy.css'
20+
import './css/application.scss';
2721
import {
2822
showError,
2923
BreadcrumbStore,

‎src/components/ciConfig/CIConfigForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ export default function CIConfigForm({
214214

215215
const requestBody = {
216216
id: ciConfig?.id ?? null,
217-
appId: +appId ?? null,
217+
appId: +appId,
218218
dockerRegistry: registry.value || '',
219219
dockerRepository: repository_name.value?.replace(/\s/g, '') || '',
220220
beforeDockerBuild: [],

0 commit comments

Comments
 (0)