Skip to content

Commit

Permalink
Merge pull request #1483 from nickgros/storybook-8.4.7
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickgros
nickgros authored Jan 6, 2025
2 parents 77e029e + 7cd2fe7 commit 13fc3ec
Show file tree
Hide file tree
Showing 15 changed files with 569 additions and 2,976 deletions.
21 changes: 10 additions & 11 deletions packages/synapse-react-client/.storybook/main.mts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { mergeConfig, defineConfig } from 'vite'
import { StorybookConfig } from '@storybook/react-vite'
import { defineConfig, mergeConfig } from 'vite'

const config: StorybookConfig = {
stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
Expand All @@ -26,18 +26,17 @@ const config: StorybookConfig = {
},

typescript: {
// These options are from https://storybook.js.org/blog/material-ui-in-storybook/
check: false,
checkOptions: {},
// These options are from https://storybook.js.org/recipes/@mui/material
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
// @ts-expect-error - speeds up storybook build time
allowSyntheticDefaultImports: false,
// speeds up storybook build time
esModuleInterop: false,
// makes union prop types like variant and size appear as select controls
// Speeds up Storybook build time
compilerOptions: {
allowSyntheticDefaultImports: false,
esModuleInterop: false,
},
// Makes union prop types like variant and size appear as select controls
shouldExtractLiteralValuesFromEnum: true,
// makes string and boolean types that can be undefined appear as inputs and switches
// Makes string and boolean types that can be undefined appear as inputs and switches
shouldRemoveUndefinedFromOptional: true,
// Filter out third-party props from node_modules except @mui packages
propFilter: prop =>
Expand All @@ -49,7 +48,7 @@ const config: StorybookConfig = {

staticDirs: ['../public'],

viteFinal(config, { configType }) {
async viteFinal(config, { configType }) {
let base,
plugins = undefined
// Fix deployment to github pages
Expand Down
231 changes: 115 additions & 116 deletions packages/synapse-react-client/.storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import * as React from 'react'
import '../stories/DemoStyle.scss'
import { faker } from '@faker-js/faker'
import { ThemeProvider } from '@mui/material'
import { createTheme } from '@mui/material/styles'
import { withThemeFromJSXProvider } from '@storybook/addon-themes'
import { Preview } from '@storybook/react'
import whyDidYouRender from '@welldone-software/why-did-you-render'
import { Buffer } from 'buffer'
import { StorybookComponentWrapper } from '../src/components/StorybookComponentWrapper'
import isChromatic from 'chromatic/isChromatic'
import { initialize, mswLoader } from 'msw-storybook-addon'
import '../stories/DemoStyle.scss'
import * as React from 'react'
import { StorybookComponentWrapper } from '../src/components/StorybookComponentWrapper'
import { getHandlers } from '../src/mocks/msw/handlers'
import { MOCK_REPO_ORIGIN } from '../src/utils/functions/getEndpoint'
import isChromatic from 'chromatic/isChromatic'
import { faker } from '@faker-js/faker'
import { ThemeProvider } from '@mui/material'
import { withThemeFromJSXProvider } from '@storybook/addon-themes'
import defaultMuiThemeOptions from '../src/theme/DefaultTheme'
import {
adKnowledgePortalPalette,
arkPortalPalette,
Expand All @@ -18,15 +20,13 @@ import {
crcResearcherPortalPalette,
digitalHealthPortalPalette,
elPortalPalette,
geniePalette,
mtbPalette,
nfPortalPalette,
sageBionetworksPalette,
stopAdPortalPalette,
geniePalette,
} from '../src/theme/palette/Palettes'
import { createTheme } from '@mui/material/styles'
import defaultMuiThemeOptions from '../src/theme/DefaultTheme'
import { Decorator } from '@storybook/react'
import { MOCK_REPO_ORIGIN } from '../src/utils/functions/getEndpoint'

// KaTeX CSS is not included in the SRC style bundle since it includes many large font files.
import 'katex/dist/katex.css'
Expand All @@ -51,57 +51,6 @@ if (process.env.NODE_ENV === 'development') {
})
}

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
expanded: true,
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
msw: {
handlers: [
// Only return mocked data when making requests to our mock stack
...getHandlers(MOCK_REPO_ORIGIN),
],
},
}

export const globalTypes = {
showReactQueryDevtools: {
name: 'React Query Devtools',
defaultValue: false,
toolbar: {
icon: 'wrench',
showName: true,
items: [
{ value: false, title: 'Hide React Query Devtools' },
{ value: true, title: 'Show React Query Devtools' },
],
},
},
stack: {
name: 'Stack',
title: 'Stack Changer',
description:
'Choose the stack that Synapse should point to. You may need to re-authenticate after changing stacks.',
defaultValue: null,
toolbar: {
icon: 'database',
dynamicTitle: true,
showName: true,
items: [
{ value: null, title: 'default (usually production)' },
{ value: 'production', title: 'Production' },
{ value: 'staging', title: 'Staging' },
{ value: 'development', title: 'Development' },
{ value: 'mock', title: 'Mocked Data' },
],
},
},
}

// Initialize MSW
initialize({
onUnhandledRequest: 'bypass',
Expand All @@ -122,61 +71,111 @@ if (isChromatic() && document.fonts) {
loaders.push(fontLoader)
}

export const decorators: Decorator[] = [
(Story, context) => {
return (
<StorybookComponentWrapper storybookContext={context}>
<Story />
</StorybookComponentWrapper>
)
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
expanded: true,
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
msw: {
handlers: [
// Only return mocked data when making requests to our mock stack
...getHandlers(MOCK_REPO_ORIGIN),
],
},
},
// Adds global styles and theme switching support.
withThemeFromJSXProvider({
Provider: ThemeProvider,
themes: {
['Synapse']: createTheme(defaultMuiThemeOptions),
['Sage Bionetworks']: createTheme(defaultMuiThemeOptions, {
palette: sageBionetworksPalette,
}),
['MTB']: createTheme(defaultMuiThemeOptions, { palette: mtbPalette }),
['ARK Portal']: createTheme(defaultMuiThemeOptions, {
palette: arkPortalPalette,
}),
['NF Portal']: createTheme(defaultMuiThemeOptions, {
palette: nfPortalPalette,
}),
['BSMN Portal']: createTheme(defaultMuiThemeOptions, {
palette: bsmnPortalPalette,
}),
['STOP AD Portal']: createTheme(defaultMuiThemeOptions, {
palette: stopAdPortalPalette,
}),
['dhealth Portal']: createTheme(defaultMuiThemeOptions, {
palette: digitalHealthPortalPalette,
}),
['CRC Researcher Portal']: createTheme(defaultMuiThemeOptions, {
palette: crcResearcherPortalPalette,
}),
['Cancer Complexity Portal']: createTheme(defaultMuiThemeOptions, {
palette: cancerComplexityPortalPalette,
}),

['AD Knowledge Portal']: createTheme(defaultMuiThemeOptions, {
palette: adKnowledgePortalPalette,
}),
['EL Portal']: createTheme(defaultMuiThemeOptions, {
palette: elPortalPalette,
}),
['GENIE Portal']: createTheme(defaultMuiThemeOptions, {
palette: geniePalette,
}),
decorators: [
(Story, context) => {
return (
<StorybookComponentWrapper storybookContext={context}>
<Story />
</StorybookComponentWrapper>
)
},
defaultTheme: 'Synapse',
}),
]
// Adds global styles and theme switching support.
withThemeFromJSXProvider({
Provider: ThemeProvider,
themes: {
['Synapse']: createTheme(defaultMuiThemeOptions),
['Sage Bionetworks']: createTheme(defaultMuiThemeOptions, {
palette: sageBionetworksPalette,
}),
['MTB']: createTheme(defaultMuiThemeOptions, { palette: mtbPalette }),
['ARK Portal']: createTheme(defaultMuiThemeOptions, {
palette: arkPortalPalette,
}),
['NF Portal']: createTheme(defaultMuiThemeOptions, {
palette: nfPortalPalette,
}),
['BSMN Portal']: createTheme(defaultMuiThemeOptions, {
palette: bsmnPortalPalette,
}),
['STOP AD Portal']: createTheme(defaultMuiThemeOptions, {
palette: stopAdPortalPalette,
}),
['dhealth Portal']: createTheme(defaultMuiThemeOptions, {
palette: digitalHealthPortalPalette,
}),
['CRC Researcher Portal']: createTheme(defaultMuiThemeOptions, {
palette: crcResearcherPortalPalette,
}),
['Cancer Complexity Portal']: createTheme(defaultMuiThemeOptions, {
palette: cancerComplexityPortalPalette,
}),

export default {
parameters,
decorators,
['AD Knowledge Portal']: createTheme(defaultMuiThemeOptions, {
palette: adKnowledgePortalPalette,
}),
['EL Portal']: createTheme(defaultMuiThemeOptions, {
palette: elPortalPalette,
}),
['GENIE Portal']: createTheme(defaultMuiThemeOptions, {
palette: geniePalette,
}),
},
defaultTheme: 'Synapse',
}),
],
loaders,
globalTypes: {
showReactQueryDevtools: {
name: 'React Query Devtools',
toolbar: {
icon: 'wrench',
showName: true,
items: [
{ value: false, title: 'Hide React Query Devtools' },
{ value: true, title: 'Show React Query Devtools' },
],
},
},
stack: {
name: 'Stack',
title: 'Stack Changer',
description:
'Choose the stack that Synapse should point to. You may need to re-authenticate after changing stacks.',
toolbar: {
icon: 'database',
dynamicTitle: true,
showName: true,
items: [
{ value: null, title: 'default (usually production)' },
{ value: 'production', title: 'Production' },
{ value: 'staging', title: 'Staging' },
{ value: 'development', title: 'Development' },
{ value: 'mock', title: 'Mocked Data' },
],
},
},
},
initialGlobals: {
showReactQueryDevtools: false,
stack: null,
},
}

export default preview
25 changes: 12 additions & 13 deletions packages/synapse-react-client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,18 +148,17 @@
"@jest/reporters": "^29.7.0",
"@juggle/resize-observer": "^3.4.0",
"@open-draft/deferred-promise": "^2.2.0",
"@storybook/addon-actions": "^8.2.4",
"@storybook/addon-designs": "^8.0.3",
"@storybook/addon-essentials": "^8.2.4",
"@storybook/addon-interactions": "^8.2.4",
"@storybook/addon-links": "^8.2.4",
"@storybook/addon-themes": "^8.2.4",
"@storybook/manager-api": "^8.2.4",
"@storybook/react": "^8.2.4",
"@storybook/react-vite": "^8.2.4",
"@storybook/test": "^8.2.4",
"@storybook/testing-library": "^0.2.2",
"@storybook/theming": "^8.2.4",
"@storybook/addon-actions": "^8.4.7",
"@storybook/addon-designs": "^8.0.4",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-links": "^8.4.7",
"@storybook/addon-themes": "^8.4.7",
"@storybook/manager-api": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@storybook/test": "^8.4.7",
"@storybook/theming": "^8.4.7",
"@svgr/plugin-jsx": "^8.1.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
Expand Down Expand Up @@ -226,7 +225,7 @@
"react-dom": "^18.2.0",
"react-select-event": "^5.5.1",
"react-test-renderer": "^18.2.0",
"storybook": "^8.2.4",
"storybook": "^8.4.7",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"timers-browserify": "^2.0.12",
Expand Down
8 changes: 5 additions & 3 deletions ...s/synapse-react-client/src/components/ChallengeTeamWizard/ChallengeTeamWizard.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { Meta, StoryObj } from '@storybook/react'
import ChallengeTeamWizard from './ChallengeTeamWizard'
import mockProject from '../../mocks/entity/mockProject'
import { fn } from '@storybook/test'
import mockProject from '../../mocks/entity/mockProject'
import ChallengeTeamWizard, {
ChallengeTeamWizardProps,
} from './ChallengeTeamWizard'

const meta = {
const meta: Meta<ChallengeTeamWizardProps & { isAuthenticated?: boolean }> = {
title: 'Synapse/Challenge/ChallengeTeamWizard',
component: ChallengeTeamWizard,
argTypes: {
Expand Down
16 changes: 4 additions & 12 deletions packages/synapse-react-client/src/components/EntityFinder/EntityFinderModal.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,18 @@
import { Meta, StoryObj } from '@storybook/react'
import { EntityFinderModal } from './EntityFinderModal'
import { fn } from '@storybook/test'
import {
SinglePane as EntityFinderSinglePane,
DualPane as EntityFinderDualPane,
SinglePane as EntityFinderSinglePane,
} from './EntityFinder.stories'
import { fn } from '@storybook/test'
import { EntityFinderModal } from './EntityFinderModal'

const meta = {
const meta: Meta<typeof EntityFinderModal> = {
title: 'Synapse/EntityFinderModal',
component: EntityFinderModal,
args: {
onConfirm: fn(),
onCancel: fn(),
},
argTypes: {
versionSelection: {
options: ['REQUIRED', 'DISABLED', 'TRACKED', 'UNTRACKED'],
control: {
type: 'select',
},
},
},
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>
Expand Down
Loading

0 comments on commit 13fc3ec

Please sign in to comment.