Unverified Commit 30ece0a2 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Update dependencies (#339)

Notable:
- Typescript v3 -> v4
- Storybook v5 -> v6
  - changed stories from `storiesOf` format to component story format
- Postcss-loader v3 -> v4
- D3 v5 -> v6
parent dc909eb9
Pipeline #97262 passed with stages
in 8 minutes and 15 seconds
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
import { configure, addParameters, addDecorator } from '@storybook/react';
function loadStories() {
require('../stories/index.tsx');
}
addParameters({
options: {
name: 'ENSEMBL',
hierarchyRootSeparator: /\|/,
hierarchySeparator: /\//
},
});
configure(loadStories, module);
const webpackConfig = require('./webpack');
module.exports = {
stories: ['../stories/**/*.stories.tsx'],
webpackFinal: (config) => webpackConfig(config),
addons: [
'@storybook/addon-essentials'
]
}
import { addons } from '@storybook/addons';
import { create as createTheme } from '@storybook/theming/create';
const ensemblTheme = createTheme({
base: 'light',
brandTitle: 'Ensembl storybook',
brandUrl: 'https://ensembl.org'
});
addons.setConfig({
theme: ensemblTheme
});
import 'src/styles/main.scss';
export const parameters = {
options: {
storySort: {
order: [
'Design Primitives',
'Components', [ 'Genome Browser', 'Entity Viewer', 'Shared Components' ],
'Hooks',
'Other'
]
},
},
docs: { // recipe for migrating from addons/notes
extractComponentDescription: (_, { notes }) => {
if (notes) {
return typeof notes === 'string' ? notes : notes.markdown || notes.text;
}
return null;
},
}
};
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
const path = require('path'); const path = require('path');
const postcssPresetEnv = require('postcss-preset-env'); const postcssPresetEnv = require('postcss-preset-env');
module.exports = ({ config }) => { module.exports = (config) => {
// a bit of a hack to remove svg handling from Storybook's default webpack config: // a bit of a hack to remove svg handling from Storybook's default webpack config:
// find the rule that matches svg files and replace its regex with Storybook's default, // find the rule that matches svg files and replace its regex with Storybook's default,
...@@ -13,15 +13,6 @@ module.exports = ({ config }) => { ...@@ -13,15 +13,6 @@ module.exports = ({ config }) => {
const defaultSvgRule = config.module.rules.find(rule => rule.test.test('.svg')); const defaultSvgRule = config.module.rules.find(rule => rule.test.test('.svg'));
defaultSvgRule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/; defaultSvgRule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
config.module.rules.push({
test: /\.tsx?$/,
loader: require.resolve('babel-loader'),
include: [
path.resolve(__dirname, '../src'),
path.resolve(__dirname, '../stories'),
path.resolve(__dirname, '../tests'),
]
});
config.module.rules.push({ config.module.rules.push({
test: /.scss$/, test: /.scss$/,
include: [ include: [
...@@ -42,8 +33,11 @@ module.exports = ({ config }) => { ...@@ -42,8 +33,11 @@ module.exports = ({ config }) => {
{ {
loader: 'postcss-loader', loader: 'postcss-loader',
options: { options: {
ident: 'postcss', postcssOptions: {
plugins: () => [postcssPresetEnv()] plugins: [
['postcss-preset-env']
]
}
} }
}, },
'sass-loader' 'sass-loader'
......
This diff is collapsed.
...@@ -48,122 +48,124 @@ ...@@ -48,122 +48,124 @@
} }
}, },
"dependencies": { "dependencies": {
"@apollo/client": "3.0.2", "@apollo/client": "3.1.5",
"@reduxjs/toolkit": "1.4.0", "@reduxjs/toolkit": "1.4.0",
"@sentry/browser": "5.19.2", "@sentry/browser": "5.23.0",
"classnames": "2.2.6", "classnames": "2.2.6",
"connected-react-router": "6.8.0", "connected-react-router": "6.8.0",
"core-js": "3.6.5", "core-js": "3.6.5",
"d3": "5.16.0", "d3": "6.1.1",
"dotenv": "8.2.0", "dotenv": "8.2.0",
"ensembl-genome-browser": "https://raw.githubusercontent.com/Ensembl/ensembl-genome-browser-assets/master/assets-80f51620ed443c640cdfd6b5aebd505b.tar.gz", "ensembl-genome-browser": "https://raw.githubusercontent.com/Ensembl/ensembl-genome-browser-assets/master/assets-80f51620ed443c640cdfd6b5aebd505b.tar.gz",
"graphql": "15.3.0", "graphql": "15.3.0",
"koa-proxy": "1.0.0-alpha.3", "koa-proxy": "1.0.0-alpha.3",
"lodash": "4.17.19", "lodash": "4.17.20",
"query-string": "6.13.1", "query-string": "6.13.1",
"react": "16.13.1", "react": "16.13.1",
"react-cookie": "4.0.3", "react-cookie": "4.0.3",
"react-dom": "16.13.1", "react-dom": "16.13.1",
"react-ga": "3.1.2", "react-ga": "3.1.2",
"react-redux": "7.2.0", "react-redux": "7.2.1",
"react-router": "5.2.0", "react-router": "5.2.0",
"react-router-dom": "5.2.0", "react-router-dom": "5.2.0",
"react-spring": "8.0.27", "react-spring": "8.0.27",
"redux": "4.0.5", "redux": "4.0.5",
"redux-observable": "1.2.0", "redux-observable": "1.2.0",
"rxjs": "6.6.0", "rxjs": "6.6.3",
"typesafe-actions": "5.1.0", "typesafe-actions": "5.1.0",
"what-input": "5.2.10" "what-input": "5.2.10"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.10.5", "@babel/core": "7.11.6",
"@babel/plugin-proposal-class-properties": "7.10.4", "@babel/plugin-proposal-class-properties": "7.10.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4", "@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4",
"@babel/plugin-proposal-object-rest-spread": "7.10.4", "@babel/plugin-proposal-object-rest-spread": "7.11.0",
"@babel/plugin-proposal-optional-chaining": "7.10.4", "@babel/plugin-proposal-optional-chaining": "7.11.0",
"@babel/plugin-syntax-dynamic-import": "7.8.3", "@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-transform-modules-commonjs": "7.10.4", "@babel/plugin-transform-modules-commonjs": "7.10.4",
"@babel/preset-env": "7.10.4", "@babel/preset-env": "7.11.5",
"@babel/preset-react": "7.10.4", "@babel/preset-react": "7.10.4",
"@babel/preset-typescript": "7.10.4", "@babel/preset-typescript": "7.10.4",
"@storybook/addon-actions": "5.3.19", "@storybook/addon-essentials": "6.0.21",
"@storybook/addon-notes": "5.3.19", "@storybook/addons": "6.0.21",
"@storybook/react": "5.3.19", "@storybook/react": "6.0.21",
"@storybook/theming": "6.0.21",
"@svgr/webpack": "5.4.0", "@svgr/webpack": "5.4.0",
"@types/classnames": "2.2.10", "@types/classnames": "2.2.10",
"@types/d3": "5.7.2", "@types/d3": "5.7.2",
"@types/enzyme": "3.10.5", "@types/enzyme": "3.10.6",
"@types/enzyme-adapter-react-16": "1.0.6", "@types/enzyme-adapter-react-16": "1.0.6",
"@types/faker": "4.1.12", "@types/faker": "5.1.0",
"@types/jest": "26.0.5", "@types/jest": "26.0.13",
"@types/lodash": "4.14.157", "@types/lodash": "4.14.161",
"@types/node": "14.0.23", "@types/node": "14.6.4",
"@types/prettier": "2.0.2", "@types/prettier": "2.1.0",
"@types/react": "16.9.43", "@types/react": "16.9.49",
"@types/react-dom": "16.9.8", "@types/react-dom": "16.9.8",
"@types/react-redux": "7.1.9", "@types/react-redux": "7.1.9",
"@types/react-router-dom": "5.1.5", "@types/react-router-dom": "5.1.5",
"@types/react-router-hash-link": "1.2.1", "@types/react-router-hash-link": "1.2.1",
"@types/redux-mock-store": "1.0.2", "@types/redux-mock-store": "1.0.2",
"@types/webpack-env": "1.15.2", "@types/webpack-env": "1.15.2",
"@typescript-eslint/eslint-plugin": "3.6.1", "@typescript-eslint/eslint-plugin": "4.1.0",
"@typescript-eslint/parser": "3.6.1", "@typescript-eslint/parser": "4.1.0",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
"babel-jest": "26.1.0", "babel-jest": "26.3.0",
"babel-loader": "8.1.0", "babel-loader": "8.1.0",
"brotli-webpack-plugin": "1.1.0", "brotli-webpack-plugin": "1.1.0",
"compression-webpack-plugin": "4.0.0", "compression-webpack-plugin": "5.0.2",
"connect-history-api-fallback": "1.6.0", "connect-history-api-fallback": "1.6.0",
"copy-webpack-plugin": "6.0.3", "copy-webpack-plugin": "6.1.0",
"css-loader": "3.6.0", "css-loader": "4.3.0",
"enzyme": "3.11.0", "enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.2", "enzyme-adapter-react-16": "1.15.4",
"enzyme-to-json": "3.5.0", "enzyme-to-json": "3.5.0",
"eslint": "7.5.0", "eslint": "7.8.1",
"eslint-config-prettier": "6.11.0", "eslint-config-prettier": "6.11.0",
"eslint-plugin-prettier": "3.1.4", "eslint-plugin-prettier": "3.1.4",
"eslint-plugin-react": "7.20.3", "eslint-plugin-react": "7.20.6",
"eslint-plugin-react-hooks": "4.0.8", "eslint-plugin-react-hooks": "4.1.0",
"faker": "4.1.0", "faker": "5.1.0",
"file-loader": "6.0.0", "file-loader": "6.1.0",
"fork-ts-checker-webpack-plugin": "5.0.7", "fork-ts-checker-webpack-plugin": "5.1.0",
"gh-pages": "3.1.0", "gh-pages": "3.1.0",
"html-webpack-plugin": "4.3.0", "html-webpack-plugin": "4.4.1",
"husky": "4.2.5", "husky": "4.3.0",
"identity-obj-proxy": "3.0.0", "identity-obj-proxy": "3.0.0",
"image-webpack-loader": "6.0.0", "image-webpack-loader": "6.0.0",
"jest": "26.1.0", "jest": "26.4.2",
"jest-fetch-mock": "3.0.3", "jest-fetch-mock": "3.0.3",
"jest-transform-stub": "2.0.0", "jest-transform-stub": "2.0.0",
"koa": "2.13.0", "koa": "2.13.0",
"koa-connect": "2.1.0", "koa-connect": "2.1.0",
"koa-static": "5.0.0", "koa-static": "5.0.0",
"licence-manager": "git+https://github.com/Ensembl/ensembl-licence-manager.git#36b534d28ff26d345b4ba4da0cbc18e1e0f7a6b7", "licence-manager": "git+https://github.com/Ensembl/ensembl-licence-manager.git#36b534d28ff26d345b4ba4da0cbc18e1e0f7a6b7",
"lint-staged": "10.2.11", "lint-staged": "10.3.0",
"mini-css-extract-plugin": "0.9.0", "mini-css-extract-plugin": "0.11.1",
"node-sass": "4.14.1", "node-sass": "4.14.1",
"optimize-css-assets-webpack-plugin": "5.0.3", "optimize-css-assets-webpack-plugin": "5.0.4",
"postcss-loader": "3.0.0", "postcss": "7.0.32",
"postcss-loader": "4.0.1",
"postcss-preset-env": "6.7.0", "postcss-preset-env": "6.7.0",
"prettier": "2.0.5", "prettier": "2.1.1",
"redux-mock-store": "1.5.4", "redux-mock-store": "1.5.4",
"rimraf": "3.0.2", "rimraf": "3.0.2",
"robotstxt-webpack-plugin": "7.0.0", "robotstxt-webpack-plugin": "7.0.0",
"sass-loader": "9.0.2", "sass-loader": "10.0.2",
"source-map-loader": "1.0.1", "source-map-loader": "1.1.0",
"style-loader": "1.2.1", "style-loader": "1.2.1",
"stylelint": "13.6.1", "stylelint": "13.7.0",
"stylelint-config-recommended-scss": "4.2.0", "stylelint-config-recommended-scss": "4.2.0",
"stylelint-scss": "3.18.0", "stylelint-scss": "3.18.0",
"stylelint-webpack-plugin": "2.1.0", "stylelint-webpack-plugin": "2.1.0",
"terser-webpack-plugin": "3.0.7", "terser-webpack-plugin": "4.1.0",
"typescript": "3.9.7", "typescript": "4.0.2",
"webpack": "4.43.0", "webpack": "4.44.1",
"webpack-bundle-analyzer": "3.8.0", "webpack-bundle-analyzer": "3.8.0",
"webpack-cli": "3.3.12", "webpack-cli": "3.3.12",
"webpack-dev-server": "3.11.0", "webpack-dev-server": "3.11.0",
"webpack-merge": "5.0.9", "webpack-merge": "5.1.4",
"workbox-webpack-plugin": "5.1.3" "workbox-webpack-plugin": "5.1.4"
}, },
"browserslist": [ "browserslist": [
"> 1% and last 2 versions", "> 1% and last 2 versions",
......
...@@ -19,7 +19,7 @@ import classNames from 'classnames'; ...@@ -19,7 +19,7 @@ import classNames from 'classnames';
import styles from './RadioGroup.scss'; import styles from './RadioGroup.scss';
type OptionValue = string | number | boolean; export type OptionValue = string | number | boolean;
export type RadioOption = { export type RadioOption = {
value: OptionValue; value: OptionValue;
label: string; label: string;
......
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
*/ */
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import ColourCard from './ColourCard'; import ColourCard from './ColourCard';
import variables from 'src/styles/_settings.scss'; import variables from 'src/styles/_settings.scss';
...@@ -93,16 +92,16 @@ const colours = [ ...@@ -93,16 +92,16 @@ const colours = [
} }
]; ];
storiesOf('Design Primitives|Colours', module).add( export const ColoursStory = () => (
'colour palette', <>
() => ( {colours.map((colourData, index) => (
<> <ColourCard key={index} {...colourData} />
{colours.map((colourData, index) => ( ))}
<ColourCard key={index} {...colourData} /> </>
))}
</>
),
{
notes: "Basic palette as per Andrea's design mockups"
}
); );
ColoursStory.storyName = 'colour palette';
export default {
title: 'Design Primitives/Colours'
};
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import './colours/Colours.stories';
import './typography/Typography.stories';
...@@ -15,35 +15,34 @@ ...@@ -15,35 +15,34 @@
*/ */
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import storyStyles from '../../common.scss'; import storyStyles from '../../common.scss';
import styles from './Typography.stories.scss'; import styles from './Typography.stories.scss';
import dummyText from 'tests/data/json/LoremIpsum.json'; import dummyText from 'tests/data/json/LoremIpsum.json';
storiesOf('Design Primitives|Typography', module).add( export default {
'fonts', title: 'Design Primitives/Typography'
() => { };
return (
<div className={storyStyles.page}> export const Fonts = () => {
<p> return (
The font shown as 'preferred' is the first one listed in the CSS, but <div className={storyStyles.page}>
that may not be the font rendered by your browser. <p>
</p> The font shown as 'preferred' is the first one listed in the CSS, but
<h2>Body font</h2> that may not be the font rendered by your browser.
<p> </p>
<b>Preferred</b>: Lato Regular <h2>Body font</h2>
</p> <p>
<p>{dummyText.medium}</p> <b>Preferred</b>: Lato Regular
<h2>Monospace</h2> </p>
<p> <p>{dummyText.medium}</p>
<b>Preferred</b>: IBM Plex Mono <h2>Monospace</h2>
</p> <p>
<div className={styles.monospace}>{dummyText.medium}</div> <b>Preferred</b>: IBM Plex Mono
</div> </p>
); <div className={styles.monospace}>{dummyText.medium}</div>
}, </div>
{ );
notes: 'Consolas is not currently installed locally.' };
}
); Fonts.storyName = 'fonts';
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
*/ */
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import BasePairsRuler from 'src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler'; import BasePairsRuler from 'src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler';
...@@ -45,23 +44,26 @@ const LengthInputForm = (props: ContainerProps) => { ...@@ -45,23 +44,26 @@ const LengthInputForm = (props: ContainerProps) => {
); );
}; };
storiesOf('Components|EntityViewer/BasePairsRuler', module).add( export const BasePairsRulerStory = () => {
'default', const initialLength = 80792;
() => { const [length, setLength] = useState(initialLength);
const initialLength = 80792;
const [length, setLength] = useState(initialLength);
const handleLenghtChange = (length: number) => { const handleLenghtChange = (length: number) => {
setLength(length); setLength(length);
}; };
return ( return (
<div className={styles.container}> <div className={styles.container}>
<BasePairsRuler length={length} width={800} standalone={true} /> <BasePairsRuler length={length} width={800} standalone={true} />
<div> <div>
<LengthInputForm value={length} onChange={handleLenghtChange} /> <LengthInputForm value={length} onChange={handleLenghtChange} />
</div>
</div> </div>
); </div>
} );
); };
BasePairsRulerStory.storyName = 'default';
export default {
title: 'Components/Entity Viewer/BasePairsRuler'
};
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import './base-pairs-ruler/BasePairsRuler.stories';
import './transcripts/UnsplicedTranscripts.stories';
import './protein/ProteinDomainImage.stories';
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
*/ */
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { storiesOf } from '@storybook/react';