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 @@
const path = require('path');
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:
// find the rule that matches svg files and replace its regex with Storybook's default,
......@@ -13,15 +13,6 @@ module.exports = ({ config }) => {
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)(\?.*)?$/;
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({
test: /.scss$/,
include: [
......@@ -42,8 +33,11 @@ module.exports = ({ config }) => {
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [postcssPresetEnv()]
postcssOptions: {
plugins: [
['postcss-preset-env']
]
}
}
},
'sass-loader'
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -48,122 +48,124 @@
}
},
"dependencies": {
"@apollo/client": "3.0.2",
"@apollo/client": "3.1.5",
"@reduxjs/toolkit": "1.4.0",
"@sentry/browser": "5.19.2",
"@sentry/browser": "5.23.0",
"classnames": "2.2.6",
"connected-react-router": "6.8.0",
"core-js": "3.6.5",
"d3": "5.16.0",
"d3": "6.1.1",
"dotenv": "8.2.0",
"ensembl-genome-browser": "https://raw.githubusercontent.com/Ensembl/ensembl-genome-browser-assets/master/assets-80f51620ed443c640cdfd6b5aebd505b.tar.gz",
"graphql": "15.3.0",
"koa-proxy": "1.0.0-alpha.3",
"lodash": "4.17.19",
"lodash": "4.17.20",
"query-string": "6.13.1",
"react": "16.13.1",
"react-cookie": "4.0.3",
"react-dom": "16.13.1",
"react-ga": "3.1.2",
"react-redux": "7.2.0",
"react-redux": "7.2.1",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-spring": "8.0.27",
"redux": "4.0.5",
"redux-observable": "1.2.0",
"rxjs": "6.6.0",
"rxjs": "6.6.3",
"typesafe-actions": "5.1.0",
"what-input": "5.2.10"
},
"devDependencies": {
"@babel/core": "7.10.5",
"@babel/core": "7.11.6",
"@babel/plugin-proposal-class-properties": "7.10.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4",
"@babel/plugin-proposal-object-rest-spread": "7.10.4",
"@babel/plugin-proposal-optional-chaining": "7.10.4",
"@babel/plugin-proposal-object-rest-spread": "7.11.0",
"@babel/plugin-proposal-optional-chaining": "7.11.0",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@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-typescript": "7.10.4",
"@storybook/addon-actions": "5.3.19",
"@storybook/addon-notes": "5.3.19",
"@storybook/react": "5.3.19",
"@storybook/addon-essentials": "6.0.21",
"@storybook/addons": "6.0.21",
"@storybook/react": "6.0.21",
"@storybook/theming": "6.0.21",
"@svgr/webpack": "5.4.0",
"@types/classnames": "2.2.10",
"@types/d3": "5.7.2",
"@types/enzyme": "3.10.5",
"@types/enzyme": "3.10.6",
"@types/enzyme-adapter-react-16": "1.0.6",
"@types/faker": "4.1.12",
"@types/jest": "26.0.5",
"@types/lodash": "4.14.157",
"@types/node": "14.0.23",
"@types/prettier": "2.0.2",
"@types/react": "16.9.43",
"@types/faker": "5.1.0",
"@types/jest": "26.0.13",
"@types/lodash": "4.14.161",
"@types/node": "14.6.4",
"@types/prettier": "2.1.0",
"@types/react": "16.9.49",
"@types/react-dom": "16.9.8",
"@types/react-redux": "7.1.9",
"@types/react-router-dom": "5.1.5",
"@types/react-router-hash-link": "1.2.1",
"@types/redux-mock-store": "1.0.2",
"@types/webpack-env": "1.15.2",
"@typescript-eslint/eslint-plugin": "3.6.1",
"@typescript-eslint/parser": "3.6.1",
"@typescript-eslint/eslint-plugin": "4.1.0",
"@typescript-eslint/parser": "4.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "26.1.0",
"babel-jest": "26.3.0",
"babel-loader": "8.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",
"copy-webpack-plugin": "6.0.3",
"css-loader": "3.6.0",
"copy-webpack-plugin": "6.1.0",
"css-loader": "4.3.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",
"eslint": "7.5.0",
"eslint": "7.8.1",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-prettier": "3.1.4",
"eslint-plugin-react": "7.20.3",
"eslint-plugin-react-hooks": "4.0.8",
"faker": "4.1.0",
"file-loader": "6.0.0",
"fork-ts-checker-webpack-plugin": "5.0.7",
"eslint-plugin-react": "7.20.6",
"eslint-plugin-react-hooks": "4.1.0",
"faker": "5.1.0",
"file-loader": "6.1.0",
"fork-ts-checker-webpack-plugin": "5.1.0",
"gh-pages": "3.1.0",
"html-webpack-plugin": "4.3.0",
"husky": "4.2.5",
"html-webpack-plugin": "4.4.1",
"husky": "4.3.0",
"identity-obj-proxy": "3.0.0",
"image-webpack-loader": "6.0.0",
"jest": "26.1.0",
"jest": "26.4.2",
"jest-fetch-mock": "3.0.3",
"jest-transform-stub": "2.0.0",
"koa": "2.13.0",
"koa-connect": "2.1.0",
"koa-static": "5.0.0",
"licence-manager": "git+https://github.com/Ensembl/ensembl-licence-manager.git#36b534d28ff26d345b4ba4da0cbc18e1e0f7a6b7",
"lint-staged": "10.2.11",
"mini-css-extract-plugin": "0.9.0",
"lint-staged": "10.3.0",
"mini-css-extract-plugin": "0.11.1",
"node-sass": "4.14.1",
"optimize-css-assets-webpack-plugin": "5.0.3",
"postcss-loader": "3.0.0",
"optimize-css-assets-webpack-plugin": "5.0.4",
"postcss": "7.0.32",
"postcss-loader": "4.0.1",
"postcss-preset-env": "6.7.0",
"prettier": "2.0.5",
"prettier": "2.1.1",
"redux-mock-store": "1.5.4",
"rimraf": "3.0.2",
"robotstxt-webpack-plugin": "7.0.0",
"sass-loader": "9.0.2",
"source-map-loader": "1.0.1",
"sass-loader": "10.0.2",
"source-map-loader": "1.1.0",
"style-loader": "1.2.1",
"stylelint": "13.6.1",
"stylelint": "13.7.0",
"stylelint-config-recommended-scss": "4.2.0",
"stylelint-scss": "3.18.0",
"stylelint-webpack-plugin": "2.1.0",
"terser-webpack-plugin": "3.0.7",
"typescript": "3.9.7",
"webpack": "4.43.0",
"terser-webpack-plugin": "4.1.0",
"typescript": "4.0.2",
"webpack": "4.44.1",
"webpack-bundle-analyzer": "3.8.0",
"webpack-cli": "3.3.12",
"webpack-dev-server": "3.11.0",
"webpack-merge": "5.0.9",
"workbox-webpack-plugin": "5.1.3"
"webpack-merge": "5.1.4",
"workbox-webpack-plugin": "5.1.4"
},
"browserslist": [
"> 1% and last 2 versions",
......
......@@ -19,7 +19,7 @@ import classNames from 'classnames';
import styles from './RadioGroup.scss';
type OptionValue = string | number | boolean;
export type OptionValue = string | number | boolean;
export type RadioOption = {
value: OptionValue;
label: string;
......
......@@ -15,7 +15,6 @@
*/
import React from 'react';
import { storiesOf } from '@storybook/react';
import ColourCard from './ColourCard';
import variables from 'src/styles/_settings.scss';
......@@ -93,16 +92,16 @@ const colours = [
}
];
storiesOf('Design Primitives|Colours', module).add(
'colour palette',
() => (
<>
{colours.map((colourData, index) => (
<ColourCard key={index} {...colourData} />
))}
</>
),
{
notes: "Basic palette as per Andrea's design mockups"
}
export const ColoursStory = () => (
<>
{colours.map((colourData, index) => (
<ColourCard key={index} {...colourData} />
))}
</>
);
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 @@
*/
import React from 'react';
import { storiesOf } from '@storybook/react';
import storyStyles from '../../common.scss';
import styles from './Typography.stories.scss';
import dummyText from 'tests/data/json/LoremIpsum.json';
storiesOf('Design Primitives|Typography', module).add(
'fonts',
() => {
return (
<div className={storyStyles.page}>
<p>
The font shown as 'preferred' is the first one listed in the CSS, but
that may not be the font rendered by your browser.
</p>
<h2>Body font</h2>
<p>
<b>Preferred</b>: Lato Regular
</p>
<p>{dummyText.medium}</p>
<h2>Monospace</h2>
<p>
<b>Preferred</b>: IBM Plex Mono
</p>
<div className={styles.monospace}>{dummyText.medium}</div>
</div>
);
},
{
notes: 'Consolas is not currently installed locally.'
}
);
export default {
title: 'Design Primitives/Typography'
};
export const Fonts = () => {
return (
<div className={storyStyles.page}>
<p>
The font shown as 'preferred' is the first one listed in the CSS, but
that may not be the font rendered by your browser.
</p>
<h2>Body font</h2>
<p>
<b>Preferred</b>: Lato Regular
</p>
<p>{dummyText.medium}</p>
<h2>Monospace</h2>
<p>
<b>Preferred</b>: IBM Plex Mono
</p>
<div className={styles.monospace}>{dummyText.medium}</div>
</div>
);
};
Fonts.storyName = 'fonts';
......@@ -15,7 +15,6 @@
*/
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';
......@@ -45,23 +44,26 @@ const LengthInputForm = (props: ContainerProps) => {
);
};
storiesOf('Components|EntityViewer/BasePairsRuler', module).add(
'default',
() => {
const initialLength = 80792;
const [length, setLength] = useState(initialLength);
export const BasePairsRulerStory = () => {
const initialLength = 80792;
const [length, setLength] = useState(initialLength);
const handleLenghtChange = (length: number) => {
setLength(length);
};
const handleLenghtChange = (length: number) => {
setLength(length);
};
return (
<div className={styles.container}>
<BasePairsRuler length={length} width={800} standalone={true} />
<div>
<LengthInputForm value={length} onChange={handleLenghtChange} />
</div>
return (
<div className={styles.container}>
<BasePairsRuler length={length} width={800} standalone={true} />
<div>
<LengthInputForm value={length} onChange={handleLenghtChange} />
</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 @@
*/
import React, { useState, useEffect, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import { getTranscriptData } from '../transcripts/transcriptData';
......@@ -28,7 +27,7 @@ import styles from './ProteinDomainImage.stories.scss';
const GRAPHIC_WIDTH = 695;
const TRANSCRIPT_ID = 'ENST00000380152';
const ProteinDomainImageStory = () => {
export const ProteinDomainImageStory = () => {
const [id, setId] = useState(TRANSCRIPT_ID);
const [data, setData] = useState<Transcript | null>(null);
......@@ -67,6 +66,8 @@ const ProteinDomainImageStory = () => {
);
};
ProteinDomainImageStory.storyName = 'default';
const FeatureIdForm = (props: {
id: string;
onChange: (id: string) => void;
......@@ -93,7 +94,6 @@ const FeatureIdForm = (props: {
);
};
storiesOf('Components|EntityViewer/Protein', module).add(
'ProteinDomainImage',
ProteinDomainImageStory
);
export default {
title: 'Components/Entity Viewer/ProteinDomains'
};
......@@ -17,7 +17,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { scaleLinear } from 'd3';
import classNames from 'classnames';
import { storiesOf } from '@storybook/react';
import { getTranscriptData } from './transcriptData';
import { getFeatureCoordinates } from 'src/content/app/entity-viewer/shared/helpers/entity-helpers';
......@@ -29,12 +28,12 @@ import { Transcript as TranscriptType } from 'src/content/app/entity-viewer/type
import styles from './UnsplicedTranscripts.stories.scss';
const GRAPHIC_WIDTH = 1200;
const VERTICAL_SPACE = 50;
const GRAPHIC_WIDTH = 700;
const VERTICAL_SPACE = 20;
const BRCA2Id = 'ENSG00000139618';
// single transcript id example: 'ENST00000544455';
const UnsplicedTranscriptsStory = () => {
export const UnsplicedTranscriptsStory = () => {
const [id, setId] = useState(BRCA2Id);
const [data, setData] = useState<GeneType | TranscriptType | null>(null);
......@@ -72,6 +71,8 @@ const UnsplicedTranscriptsStory = () => {
);
};
UnsplicedTranscriptsStory.storyName = 'unspliced';
const MultipleTranscripts = (props: { gene: GeneType }) => {
const [view, setView] = useState('expanded');
const { gene } = props;
......@@ -152,7 +153,6 @@ const FeatureIdForm = (props: {
);
};
storiesOf('Components|EntityViewer/Transcripts', module).add(
'unspliced',
UnsplicedTranscriptsStory
);
export default {
title: 'Components/Entity Viewer/Transcripts'
};
......@@ -15,13 +15,12 @@
*/
import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { ChromosomeNavigatorWrapper as ChromosomeNavigator } from 'src/content/app/browser/chromosome-navigator/ChromosomeNavigator';
import styles from './ChromosomeNavigator.stories.scss';
const Wrapper = () => {
export const ChromosomeNavigatorStory = () => {
const length = 1000000;
const [viewportStart, setViewportStart] = useState(200000);
const [viewportEnd