Skip to content
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

Jump to bottom

Add type-checking for storybook config #738

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add type-checking for storybook config #738

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
10 changes: 8 additions & 2 deletions packages/synapse-react-client/.storybook/manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ addons.setConfig({
brandImage:
'https://s3.amazonaws.com/static.synapse.org/images/synapse-logo-blue.svg',
}),
colorPrimary: palette.primary[500],
colorSecondary: palette.secondary[500],
colorPrimary:
palette.primary && 'main' in palette.primary
? palette.primary.main
: undefined,
colorSecondary:
palette.secondary && 'main' in palette.secondary
? palette.secondary.main
: undefined,
})
237 changes: 130 additions & 107 deletions packages/synapse-react-client/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import { Preview, ReactRenderer } from '@storybook/react'
import '../demo/style/DemoStyle.scss'
import whyDidYouRender from '@welldone-software/why-did-you-render'
import { Buffer } from 'buffer'
Expand Down Expand Up @@ -31,6 +32,7 @@ faker.seed(12345)

globalThis.Buffer = Buffer
globalThis.process = {
// @ts-expect-error
browser: true,
env: {
NODE_ENV: 'development',
Expand All @@ -47,60 +49,17 @@ 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',
onUnhandledRequest: (req, print) => {
// only show warning if we try to hit the mock-repo.sagebase.org endpoint. Otherwise, allow the request to pass
// check if the req.url.pathname contains excludedRoutes
if (req.url.pathname.startsWith(MOCK_REPO_ORIGIN)) {
print.warning()
}

return
},
serviceWorker: {
url: `${
location.hostname.endsWith('.github.io') ? '/synapse-web-monorepo' : ''
Expand All @@ -112,67 +71,131 @@ const fontLoader = async () => ({
fonts: await Promise.all([document.fonts.load('700 1em Lato')]),
})

export const loaders = [mswLoader]
const loaders: Preview['loaders'] = [mswLoader]

if (isChromatic() && document.fonts) {
loaders.push(fontLoader)
}

export const decorators = [
(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,
}),
['PsychENCODE Portal']: createTheme(defaultMuiThemeOptions, {
palette: psychEncodePortalPalette,
}),
['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,
}),
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' },
],
},
},
defaultTheme: 'Synapse',
}),
]

export default {
parameters,
decorators,
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' },
],
},
},
authenticatedForMockStack: {
name: 'Authenticated for Mocks?',
title: 'Authenticated? (Mock Stack Only)',
description:
'Whether to simulate being logged in when interacting with the mock stack',
defaultValue: true,
toolbar: {
icon: 'key',
dynamicTitle: true,
showName: true,
items: [
{ value: true, title: 'Authenticated' },
{ value: false, title: 'Unauthenticated' },
],
},
},
},
loaders,
decorators: [
(Story, context) => {
return (
<StorybookComponentWrapper storybookContext={context}>
<Story />
</StorybookComponentWrapper>
)
},
// Adds global styles and theme switching support.
withThemeFromJSXProvider<ReactRenderer>({
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,
}),
['PsychENCODE Portal']: createTheme(defaultMuiThemeOptions, {
palette: psychEncodePortalPalette,
}),
['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,
}),
},
defaultTheme: 'Synapse',
}),
],
}

export default preview
4 changes: 2 additions & 2 deletions packages/synapse-react-client/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"extends": "../../shared/tsconfig.base.json",
"compilerOptions": {
"rootDir": "./src",
"rootDir": ".",
"outDir": "./dist/types",
"module": "esnext",
"target": "esnext",
Expand All @@ -11,5 +11,5 @@
"isolatedModules": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx"]
"include": ["src/**/*.ts", "src/**/*.tsx", ".storybook/**/*"]
}
Loading