Skip to content

Upgrade to storybook v8 #44041

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
avatus merged 1 commit into from
Jul 23, 2024
Merged

Upgrade to storybook v8 #44041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,5 @@

# Ignore WASM generated files:
web/packages/teleport/src/ironrdp/pkg
# Ignore generated mockServiceWorker file
web/.storybook/public/mockServiceWorker.js
3 changes: 3 additions & 0 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ module.exports = {
transformIgnorePatterns: [`node_modules/(?!.pnpm|${esModules})`],
coverageReporters: ['text-summary', 'lcov'],
testPathIgnorePatterns: ['e2e'],
testEnvironmentOptions: {
customExportConditions: [''],
Copy link
Copy Markdown
Member

@ravicious ravicious Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this for?

Copy link
Copy Markdown
Contributor Author

@avatus avatus Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it had to do with the setupServer from msw but, I never got that working anyway. I'll fiddle around with those tests some more and if this is needed, I'll add a comment

Copy link
Copy Markdown
Member

@ravicious ravicious Jul 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need it?

Copy link
Copy Markdown
Contributor Author

@avatus avatus Jul 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes we do still need it for setupServer in our tests. More info here in migration guide
https://mswjs.io/docs/migrations/1.x-to-2.x/#cannot-find-module-mswnode-jsdom

},
setupFilesAfterEnv: [
'<rootDir>/web/packages/build/jest/setupTests.ts',
'<rootDir>/web/packages/build/jest/customMatchers.ts',
Expand Down
24 changes: 17 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
"build-term": "pnpm --filter=@gravitational/teleterm build",
"start-term": "pnpm --filter=@gravitational/teleterm start",
"package-term": "pnpm --filter=@gravitational/teleterm package",
"storybook": "start-storybook -p 9002 -c web/.storybook -s web/.storybook/public",
"storybook-smoke-test": "pnpm storybook --ci --smoke-test",
Copy link
Copy Markdown
Contributor

@gzdunek gzdunek Jul 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pnpm

"storybook": "storybook dev -p 9002 -c web/.storybook --https --ssl-cert=web/certs/server.crt --ssl-key=web/certs/server.key",
"storybook-smoke-test": "storybook dev -p 9002 -c web/.storybook --ci --smoke-test",
"test": "jest",
"test-coverage": "jest --coverage && web/scripts/print-coverage-link.sh",
"test-update-snapshot": "pnpm run test --updateSnapshot",
Expand All @@ -36,12 +36,16 @@
}
},
"devDependencies": {
"@storybook/react": "^6.5.16",
"@gravitational/build": "workspace:*",
Copy link
Copy Markdown
Member

@ravicious ravicious Jul 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this needs to be here. 🤔

Copy link
Copy Markdown
Contributor Author

@avatus avatus Jul 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the vite config filein storybook wasn't able to find this package without having this here. i could use relative paths but i wanted to keep the import cleaner

"@storybook/components": "^8.2.5",
"@storybook/addon-toolbars": "^8.2.5",
"@storybook/react": "^8.2.5",
"@storybook/react-vite": "^8.2.5",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^15.0.7",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12",
"@types/node": "^20.14.9",
"@types/node": "^20.14.11",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-highlight": "^0.12.8",
Expand All @@ -50,9 +54,10 @@
"@types/wicg-file-system-access": "^2023.10.5",
"jest": "^29.7.0",
"jsdom-testing-mocks": "^1.13.0",
"msw": "^0.47.4",
"msw-storybook-addon": "^1.8.0",
"msw": "^2.3.1",
"msw-storybook-addon": "^2.0.3",
"prettier": "^3.3.2",
"storybook": "^8.2.5",
Comment thread
ravicious marked this conversation as resolved.
Outdated
"typescript": "^5.5.2",
"vite": "^5.3.2"
},
Expand Down Expand Up @@ -87,5 +92,10 @@
"tslib": "^2.6.3",
"whatwg-fetch": "^3.6.20"
},
"packageManager": "pnpm@9.5.0"
"packageManager": "pnpm@9.5.0",
"msw": {
"workerDirectory": [
"web/.storybook/public"
]
}
}
5,397 changes: 1,455 additions & 3,942 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

130 changes: 0 additions & 130 deletions web/.storybook/main.js
View file
Open in desktop

This file was deleted.

49 changes: 49 additions & 0 deletions web/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*
* Teleport
* Copyright (C) 2023 Gravitational, Inc.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import fs from 'node:fs';
import path from 'node:path';

import type { StorybookConfig } from '@storybook/react-vite';

const enterpriseTeleportExists = fs.existsSync(
path.join(__dirname, '/../../e/web')
);

function createStoriesPaths() {
const stories = ['../packages/**/*.story.@(ts|tsx|js|jsx)'];
Copy link
Copy Markdown
Contributor

@kimlisa kimlisa Jul 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we also have really old files that end in jsx, i put js just in case?


// include enterprise stories if available (**/* pattern ignores dot dir names)
if (enterpriseTeleportExists) {
stories.unshift('../../e/web/**/*.story.@(ts|tsx|js|jsx)');
}

return stories;
}

const config: StorybookConfig = {
stories: createStoriesPaths(),
framework: {
name: '@storybook/react-vite',
options: { builder: { viteConfigPath: 'web/.storybook/vite.config.mts' } },
},
staticDirs: ['public'],
addons: ['@storybook/addon-toolbars'],
};

export default config;
124 changes: 0 additions & 124 deletions web/.storybook/preview.js
View file
Open in desktop

This file was deleted.

Loading