From 080109632a67263802bcac5a60dfc9d6c5d7f0a7 Mon Sep 17 00:00:00 2001 From: alexd-bes <129009580+alexd-bes@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:44:47 +1200 Subject: [PATCH] deps(uiMapComponents): RN-1417: Update storybook version PART 3 (#5880) * map components * Fix tests --- .../.storybook/AppProviders.js | 34 ----- .../.storybook/awsModuleMock.js | 12 -- packages/ui-map-components/.storybook/main.js | 8 -- .../.storybook/moduleMock.js | 5 - .../.storybook/preview-head.html | 7 - .../ui-map-components/.storybook/preview.js | 23 ---- .../.storybook/webpack.config.js | 54 -------- .../{.babelrc.js => babel.test.js} | 2 +- packages/ui-map-components/jest.config.js | 2 +- packages/ui-map-components/package.json | 9 +- .../{legend.stories.js => legend.stories.jsx} | 0 .../{marker.stories.js => marker.stories.jsx} | 0 .../ui-map-components/stories/theme/colors.js | 36 ----- .../stories/theme/darkTheme.js | 12 -- .../ui-map-components/stories/theme/index.js | 6 - .../stories/theme/lightTheme.js | 125 ------------------ ...cker.stories.js => tilePicker.stories.jsx} | 0 packages/ui-map-components/tsconfig.json | 4 +- yarn.lock | 2 - 19 files changed, 9 insertions(+), 332 deletions(-) delete mode 100644 packages/ui-map-components/.storybook/AppProviders.js delete mode 100644 packages/ui-map-components/.storybook/awsModuleMock.js delete mode 100644 packages/ui-map-components/.storybook/main.js delete mode 100644 packages/ui-map-components/.storybook/moduleMock.js delete mode 100644 packages/ui-map-components/.storybook/preview-head.html delete mode 100644 packages/ui-map-components/.storybook/preview.js delete mode 100644 packages/ui-map-components/.storybook/webpack.config.js rename packages/ui-map-components/{.babelrc.js => babel.test.js} (91%) rename packages/ui-map-components/stories/{legend.stories.js => legend.stories.jsx} (100%) rename packages/ui-map-components/stories/{marker.stories.js => marker.stories.jsx} (100%) delete mode 100644 packages/ui-map-components/stories/theme/colors.js delete mode 100644 packages/ui-map-components/stories/theme/darkTheme.js delete mode 100644 packages/ui-map-components/stories/theme/index.js delete mode 100644 packages/ui-map-components/stories/theme/lightTheme.js rename packages/ui-map-components/stories/{tilePicker.stories.js => tilePicker.stories.jsx} (100%) diff --git a/packages/ui-map-components/.storybook/AppProviders.js b/packages/ui-map-components/.storybook/AppProviders.js deleted file mode 100644 index bb6f190224..0000000000 --- a/packages/ui-map-components/.storybook/AppProviders.js +++ /dev/null @@ -1,34 +0,0 @@ -/* - * Tupaia - * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd - */ - -import React from 'react'; -import { MuiThemeProvider, StylesProvider } from '@material-ui/core/styles'; -import { ThemeProvider } from 'styled-components'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import PropTypes from 'prop-types'; -import { lightTheme, darkTheme } from '../stories/theme'; - -export const AppProviders = ({ params, children }) => { - const theme = params?.theme === 'dark' ? darkTheme : lightTheme; - return ( - - - - - {children} - - - - ); -}; - -AppProviders.propTypes = { - params: PropTypes.object, - children: PropTypes.any.isRequired, -}; - -AppProviders.defaultProps = { - params: null, -}; diff --git a/packages/ui-map-components/.storybook/awsModuleMock.js b/packages/ui-map-components/.storybook/awsModuleMock.js deleted file mode 100644 index 255e521a43..0000000000 --- a/packages/ui-map-components/.storybook/awsModuleMock.js +++ /dev/null @@ -1,12 +0,0 @@ -// mock implementation of `aws-sdk`, because `s3` folder within `@tupaia/utils` uses it but that -// breaks storybook -module.exports = { - strict: () => {}, - Upload: () => ({ - done: async () => ({ - Location: 'testUrl', - }), - }), - fromEnv: () => {}, - S3: () => {}, -}; diff --git a/packages/ui-map-components/.storybook/main.js b/packages/ui-map-components/.storybook/main.js deleted file mode 100644 index e32f7873ab..0000000000 --- a/packages/ui-map-components/.storybook/main.js +++ /dev/null @@ -1,8 +0,0 @@ -// import the build chain webpack config and merge it with storybook config -module.exports = { - stories: ['../stories/**/*.stories.js'], - addons: ['@storybook/addon-essentials'], - typescript: { - reactDocgen: 'react-docgen-typescript-plugin', - }, -}; diff --git a/packages/ui-map-components/.storybook/moduleMock.js b/packages/ui-map-components/.storybook/moduleMock.js deleted file mode 100644 index 7f225744d0..0000000000 --- a/packages/ui-map-components/.storybook/moduleMock.js +++ /dev/null @@ -1,5 +0,0 @@ -// mock implementation of `yargs`, because `script.js` within `@tupaia/utils` uses it but that -// breaks storybook -module.exports = { - strict: () => {}, -}; diff --git a/packages/ui-map-components/.storybook/preview-head.html b/packages/ui-map-components/.storybook/preview-head.html deleted file mode 100644 index 1c868e3e2f..0000000000 --- a/packages/ui-map-components/.storybook/preview-head.html +++ /dev/null @@ -1,7 +0,0 @@ - - diff --git a/packages/ui-map-components/.storybook/preview.js b/packages/ui-map-components/.storybook/preview.js deleted file mode 100644 index 1914497bf3..0000000000 --- a/packages/ui-map-components/.storybook/preview.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { addDecorator } from '@storybook/react'; -import { AppProviders } from './AppProviders'; - -export const parameters = { - backgrounds: { - default: 'light', - values: [ - { - name: 'light', - value: '#FFFFFF', - }, - { - name: 'dark', - value: '#252934', - }, - ], - }, -}; - -addDecorator((story, context) => ( - {story()} -)); diff --git a/packages/ui-map-components/.storybook/webpack.config.js b/packages/ui-map-components/.storybook/webpack.config.js deleted file mode 100644 index 0bac24724a..0000000000 --- a/packages/ui-map-components/.storybook/webpack.config.js +++ /dev/null @@ -1,54 +0,0 @@ -/* - * Tupaia - * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd - * - */ - -const path = require('path'); - -/** - * The doc doesn't really mention using webpack.config.js, but .storybook/main.js instead. - * - * Nevertheless, configuring the webpack.config.js seems to work fine. - * - * @param config - * @return {Promise<*>} - * @see https://storybook.js.org/docs/react/configure/webpack - * @see https://storybook.js.org/docs/react/configure/webpack#using-your-existing-config - */ -module.exports = async ({ config }) => { - /** - * Fixes npm packages that depend on `fs` module, etc. - * - * E.g: "winston" would fail to load without this, because it relies on fs, which isn't available during browser build. - * - * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-495370896 - */ - config.node = { - fs: 'empty', - tls: 'empty', - net: 'empty', - module: 'empty', - console: true, - }; - - config.resolve.alias = { - ...config.resolve.alias, - yargs: path.resolve(__dirname, '../../../moduleMock.js'), - child_process: path.resolve(__dirname, '../../../moduleMock.js'), - '@aws-sdk/credential-providers': path.resolve(__dirname, 'awsModuleMock.js'), - '@aws-sdk/client-s3': path.resolve(__dirname, 'awsModuleMock.js'), - '@aws-sdk/lib-storage': path.resolve(__dirname, 'awsModuleMock.js'), - }; - - config.module.rules.push({ - test: /\.(js|jsx)$/, - loader: require.resolve('babel-loader'), - options: { - presets: ['@babel/preset-env', '@babel/preset-react'], - plugins: ['@babel/plugin-proposal-nullish-coalescing-operator'], - }, - }); - - return config; -}; diff --git a/packages/ui-map-components/.babelrc.js b/packages/ui-map-components/babel.test.js similarity index 91% rename from packages/ui-map-components/.babelrc.js rename to packages/ui-map-components/babel.test.js index acb867ab25..de16b6aea7 100644 --- a/packages/ui-map-components/.babelrc.js +++ b/packages/ui-map-components/babel.test.js @@ -1,6 +1,6 @@ /* * Tupaia - * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd + * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd */ const isTest = process.env.NODE_ENV === 'test'; diff --git a/packages/ui-map-components/jest.config.js b/packages/ui-map-components/jest.config.js index 404168ebec..d62c5b0d76 100644 --- a/packages/ui-map-components/jest.config.js +++ b/packages/ui-map-components/jest.config.js @@ -18,7 +18,7 @@ module.exports = { }, transform: { '^.+\\.tsx?$': 'ts-jest', - '^.+\\.js$': 'babel-jest', + '^.+\\.js$': ['babel-jest', { configFile: './babel.test.js' }], }, testTimeout: 30 * 1000, // 30 seconds. Needed for CI as some test take a while if CPU has high load }; diff --git a/packages/ui-map-components/package.json b/packages/ui-map-components/package.json index debe0e9c3b..2df1903e4d 100644 --- a/packages/ui-map-components/package.json +++ b/packages/ui-map-components/package.json @@ -17,10 +17,11 @@ "build-dev": "npm run build", "lint": "yarn package:lint:js", "lint:fix": "yarn lint --fix", - "storybook": "start-storybook -s public -p 6006", "test": "yarn package:test --env=jsdom", "test:coverage": "yarn test --coverage", - "test:watch": "yarn test --watch" + "test:watch": "yarn test --watch", + "start-storybook": "yarn package:storybook:start", + "build-storybook": "yarn package:storybook:build" }, "dependencies": { "@material-ui/core": "^4.9.8", @@ -40,11 +41,9 @@ "devDependencies": { "@material-ui/styles": "^4.9.10", "@mui/types": "^7.2.4", - "@storybook/react": "^6.3.9", "@types/jest": "^29.5.1", "@types/leaflet": "^1.7.1", "@types/react-dom": "^16.9.18", - "@types/styled-components": "^5.1.26", - "react-docgen-typescript-plugin": "^1.0.5" + "@types/styled-components": "^5.1.26" } } diff --git a/packages/ui-map-components/stories/legend.stories.js b/packages/ui-map-components/stories/legend.stories.jsx similarity index 100% rename from packages/ui-map-components/stories/legend.stories.js rename to packages/ui-map-components/stories/legend.stories.jsx diff --git a/packages/ui-map-components/stories/marker.stories.js b/packages/ui-map-components/stories/marker.stories.jsx similarity index 100% rename from packages/ui-map-components/stories/marker.stories.js rename to packages/ui-map-components/stories/marker.stories.jsx diff --git a/packages/ui-map-components/stories/theme/colors.js b/packages/ui-map-components/stories/theme/colors.js deleted file mode 100644 index a185550554..0000000000 --- a/packages/ui-map-components/stories/theme/colors.js +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Tupaia - * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd - */ - -// Primary & Secondary colors -export const WHITE = '#FFFFFF'; -export const BLACK = '#000000'; -export const BLUE = '#3884B8'; -export const DARK_BLUE = '#135D8F'; -export const YELLOW = '#FFCC24'; -export const RED = '#D13333'; -export const ORANGE = '#EF5A06'; -export const GREEN = '#02B851'; -export const DARKGREY = '#283238'; // dark background -export const LIGHTGREY = '#F9F9F9'; // page background -export const TEXT_DARKGREY = '#414D55'; -export const TEXT_MIDGREY = '#6F7B82'; -export const TEXT_LIGHTGREY = '#9AA8B0'; - -// Greys (based on first 2 letters of hex code) -export const GREY_72 = '#727D84'; -export const GREY_9F = '#9FA6AA'; -export const GREY_DE = '#DEDEE0'; // use for border colors of cards -export const GREY_E2 = '#E2E2E2'; -export const GREY_F1 = '#F1F1F1'; -export const GREY_FB = '#FBF9F9'; - -// Blues -export const LIGHT_BLUE = '#99D6FF'; - -// Reds -export const LIGHT_RED = '#FEE2E2'; - -// Greens -export const DARK_GREEN = '#00972E'; diff --git a/packages/ui-map-components/stories/theme/darkTheme.js b/packages/ui-map-components/stories/theme/darkTheme.js deleted file mode 100644 index 179e5781b3..0000000000 --- a/packages/ui-map-components/stories/theme/darkTheme.js +++ /dev/null @@ -1,12 +0,0 @@ -/* - * Tupaia - * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd - * - */ -import { createMuiTheme } from '@material-ui/core/styles'; - -const DARKENED_BLUE = '#0296c5'; - -export const darkTheme = createMuiTheme({ - palette: { type: 'dark', primary: { main: DARKENED_BLUE }, contrastText: 'white' }, -}); diff --git a/packages/ui-map-components/stories/theme/index.js b/packages/ui-map-components/stories/theme/index.js deleted file mode 100644 index 2f77229134..0000000000 --- a/packages/ui-map-components/stories/theme/index.js +++ /dev/null @@ -1,6 +0,0 @@ -/* - * Tupaia - * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd - */ -export * from './darkTheme'; -export * from './lightTheme'; diff --git a/packages/ui-map-components/stories/theme/lightTheme.js b/packages/ui-map-components/stories/theme/lightTheme.js deleted file mode 100644 index 8948680393..0000000000 --- a/packages/ui-map-components/stories/theme/lightTheme.js +++ /dev/null @@ -1,125 +0,0 @@ -/* - * Tupaia - * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd - * - */ - -import { createMuiTheme } from '@material-ui/core/styles'; -import * as COLORS from './colors'; - -const themeName = 'Tupaia-Storybook'; -const palette = { - primary: { - main: COLORS.BLUE, - light: COLORS.LIGHT_BLUE, - }, - secondary: { - main: COLORS.DARK_BLUE, - light: COLORS.LIGHT_BLUE, - }, - error: { - main: COLORS.RED, - light: COLORS.LIGHT_RED, - }, - warning: { - main: COLORS.RED, - light: COLORS.LIGHT_RED, - }, - success: { - main: COLORS.GREEN, - dark: COLORS.DARK_GREEN, - }, - text: { - primary: COLORS.TEXT_DARKGREY, - secondary: COLORS.TEXT_MIDGREY, - tertiary: COLORS.TEXT_LIGHTGREY, - }, - contrastText: COLORS.TEXT_MIDGREY, - grey: { - 100: COLORS.GREY_FB, - 200: COLORS.GREY_F1, - 300: COLORS.GREY_E2, - 400: COLORS.GREY_DE, - 500: COLORS.GREY_9F, - 600: COLORS.GREY_72, - }, - background: { - default: 'transparent', // use background addon to switch colors - paper: COLORS.WHITE, - }, -}; -const typography = { - h1: { - fontSize: '3.125rem', - fontWeight: 500, - lineHeight: 1.18, - letterSpacing: 0, - }, - h2: { - fontSize: '2rem', - fontWeight: 600, - lineHeight: 1.18, - letterSpacing: 0, - }, - h3: { - fontSize: '1.5rem', - fontWeight: 600, - lineHeight: 1.18, - letterSpacing: 0, - }, - h4: { - fontSize: '1.3125rem', - fontWeight: 600, - lineHeight: 1.18, - letterSpacing: 0, - }, - h5: { - fontSize: '1.3125rem', - fontWeight: 500, - lineHeight: 1.18, - letterSpacing: 0, - }, - h6: { - fontSize: '1.125rem', - fontWeight: 500, - lineHeight: 1.18, - letterSpacing: 0, - }, - subtitle1: { - fontSize: '1.125rem', - fontWeight: 500, - lineHeight: 1.18, - letterSpacing: 0, - }, - subtitle2: { - fontSize: '0.8125rem', - fontWeight: 600, - lineHeight: 1.18, - letterSpacing: 0, - }, - body1: { - fontSize: '0.9375rem', - fontWeight: 400, - lineHeight: 1.18, - letterSpacing: 0, - }, - body2: { - fontSize: '0.875rem', - fontWeight: 400, - lineHeight: 1.18, - letterSpacing: 0, - }, - button: { - textTransform: 'none', - letterSpacing: '0.035em', - }, -}; -const shape = { borderRadius: 3 }; -const overrides = { - MuiCard: { - root: { - borderColor: COLORS.GREY_DE, - }, - }, -}; -export const lightTheme = createMuiTheme({ palette, themeName, typography, shape, overrides }); diff --git a/packages/ui-map-components/stories/tilePicker.stories.js b/packages/ui-map-components/stories/tilePicker.stories.jsx similarity index 100% rename from packages/ui-map-components/stories/tilePicker.stories.js rename to packages/ui-map-components/stories/tilePicker.stories.jsx diff --git a/packages/ui-map-components/tsconfig.json b/packages/ui-map-components/tsconfig.json index ceac796a45..db999d5910 100644 --- a/packages/ui-map-components/tsconfig.json +++ b/packages/ui-map-components/tsconfig.json @@ -17,6 +17,8 @@ "include": [ "src/**/*", "jest.config.ts", - "helpers/**/*" + "helpers/**/*", + "stories/**/*", + ".storybook" ] } diff --git a/yarn.lock b/yarn.lock index fd0298c7b0..b505d87b35 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14206,7 +14206,6 @@ __metadata: "@material-ui/icons": ^4.9.1 "@material-ui/styles": ^4.9.10 "@mui/types": ^7.2.4 - "@storybook/react": ^6.3.9 "@tupaia/types": "workspace:*" "@tupaia/ui-components": "workspace:*" "@tupaia/utils": "workspace:*" @@ -14218,7 +14217,6 @@ __metadata: moment: ^2.24.0 prop-types: ^15.7.2 react: ^16.13.1 - react-docgen-typescript-plugin: ^1.0.5 react-dom: ^16.13.1 react-leaflet: ^3.2.1 react-table: ^7.7.0