diff --git a/flow-typed/npm/@material-ui/core/Avatar_vx.x.x.js b/flow-typed/npm/@material-ui/core/Avatar_vx.x.x.js new file mode 100644 index 000000000..89d35a86e --- /dev/null +++ b/flow-typed/npm/@material-ui/core/Avatar_vx.x.x.js @@ -0,0 +1,38 @@ +// flow-typed signature: ce23ecafd4a8df99e8eab3d7417dea83 +// flow-typed version: <>/@material-ui/core/Avatar_v3.1.0/flow_v0.81.0 + +/** + * This is an autogenerated libdef stub for: + * + * '@material-ui/core/Avatar' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module '@material-ui/core/Avatar' { + declare module.exports: any; +} + +/** + * We include stubs for each file inside this npm package in case you need to + * require those files directly. Feel free to delete any files that aren't + * needed. + */ +declare module '@material-ui/core/Avatar/Avatar' { + declare module.exports: any; +} + +// Filename aliases +declare module '@material-ui/core/Avatar/Avatar.js' { + declare module.exports: $Exports<'@material-ui/core/Avatar/Avatar'>; +} +declare module '@material-ui/core/Avatar/index' { + declare module.exports: $Exports<'@material-ui/core/Avatar'>; +} +declare module '@material-ui/core/Avatar/index.js' { + declare module.exports: $Exports<'@material-ui/core/Avatar'>; +} diff --git a/flow-typed/npm/polished_vx.x.x.js b/flow-typed/npm/polished_vx.x.x.js new file mode 100644 index 000000000..aaeee971d --- /dev/null +++ b/flow-typed/npm/polished_vx.x.x.js @@ -0,0 +1,690 @@ +// flow-typed signature: 269daa88cf96222ec337ad11f33aeff0 +// flow-typed version: <>/polished_v2.3.0/flow_v0.81.0 + +/** + * This is an autogenerated libdef stub for: + * + * 'polished' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module 'polished' { + declare module.exports: any; +} + +/** + * We include stubs for each file inside this npm package in case you need to + * require those files directly. Feel free to delete any files that aren't + * needed. + */ +declare module 'polished/babel.config' { + declare module.exports: any; +} + +declare module 'polished/dist/polished.es' { + declare module.exports: any; +} + +declare module 'polished/dist/polished' { + declare module.exports: any; +} + +declare module 'polished/dist/polished.min' { + declare module.exports: any; +} + +declare module 'polished/docs/assets/anchor' { + declare module.exports: any; +} + +declare module 'polished/docs/assets/docs' { + declare module.exports: any; +} + +declare module 'polished/docs/assets/highlight.pack' { + declare module.exports: any; +} + +declare module 'polished/docs/assets/polished' { + declare module.exports: any; +} + +declare module 'polished/docs/assets/script' { + declare module.exports: any; +} + +declare module 'polished/lib/color/adjustHue' { + declare module.exports: any; +} + +declare module 'polished/lib/color/complement' { + declare module.exports: any; +} + +declare module 'polished/lib/color/darken' { + declare module.exports: any; +} + +declare module 'polished/lib/color/desaturate' { + declare module.exports: any; +} + +declare module 'polished/lib/color/getLuminance' { + declare module.exports: any; +} + +declare module 'polished/lib/color/grayscale' { + declare module.exports: any; +} + +declare module 'polished/lib/color/hsl' { + declare module.exports: any; +} + +declare module 'polished/lib/color/hsla' { + declare module.exports: any; +} + +declare module 'polished/lib/color/invert' { + declare module.exports: any; +} + +declare module 'polished/lib/color/lighten' { + declare module.exports: any; +} + +declare module 'polished/lib/color/mix' { + declare module.exports: any; +} + +declare module 'polished/lib/color/opacify' { + declare module.exports: any; +} + +declare module 'polished/lib/color/parseToHsl' { + declare module.exports: any; +} + +declare module 'polished/lib/color/parseToRgb' { + declare module.exports: any; +} + +declare module 'polished/lib/color/readableColor' { + declare module.exports: any; +} + +declare module 'polished/lib/color/rgb' { + declare module.exports: any; +} + +declare module 'polished/lib/color/rgba' { + declare module.exports: any; +} + +declare module 'polished/lib/color/saturate' { + declare module.exports: any; +} + +declare module 'polished/lib/color/setHue' { + declare module.exports: any; +} + +declare module 'polished/lib/color/setLightness' { + declare module.exports: any; +} + +declare module 'polished/lib/color/setSaturation' { + declare module.exports: any; +} + +declare module 'polished/lib/color/shade' { + declare module.exports: any; +} + +declare module 'polished/lib/color/tint' { + declare module.exports: any; +} + +declare module 'polished/lib/color/toColorString' { + declare module.exports: any; +} + +declare module 'polished/lib/color/transparentize' { + declare module.exports: any; +} + +declare module 'polished/lib/helpers/directionalProperty' { + declare module.exports: any; +} + +declare module 'polished/lib/helpers/em' { + declare module.exports: any; +} + +declare module 'polished/lib/helpers/getValueAndUnit' { + declare module.exports: any; +} + +declare module 'polished/lib/helpers/modularScale' { + declare module.exports: any; +} + +declare module 'polished/lib/helpers/rem' { + declare module.exports: any; +} + +declare module 'polished/lib/helpers/stripUnit' { + declare module.exports: any; +} + +declare module 'polished/lib/index' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_capitalizeString' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_curry' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_endsWith' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_guard' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_hslToHex' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_hslToRgb' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_nameToHex' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_numberToHex' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_pxto' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_reduceHexValue' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_rgbToHsl' { + declare module.exports: any; +} + +declare module 'polished/lib/internalHelpers/_statefulSelectors' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/between' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/clearFix' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/cover' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/ellipsis' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/fluidRange' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/fontFace' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/hideText' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/hideVisually' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/hiDPI' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/normalize' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/placeholder' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/radialGradient' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/retinaImage' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/selection' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/timingFunctions' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/triangle' { + declare module.exports: any; +} + +declare module 'polished/lib/mixins/wordWrap' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/animation' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/backgroundImages' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/backgrounds' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/border' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/borderColor' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/borderRadius' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/borderStyle' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/borderWidth' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/buttons' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/margin' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/padding' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/position' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/size' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/textInputs' { + declare module.exports: any; +} + +declare module 'polished/lib/shorthands/transitions' { + declare module.exports: any; +} + +declare module 'polished/lib/types/color' { + declare module.exports: any; +} + +declare module 'polished/lib/types/fluidRangeConfiguration' { + declare module.exports: any; +} + +declare module 'polished/lib/types/fontFaceConfiguration' { + declare module.exports: any; +} + +declare module 'polished/lib/types/interactionState' { + declare module.exports: any; +} + +declare module 'polished/lib/types/modularScaleRatio' { + declare module.exports: any; +} + +declare module 'polished/lib/types/radialGradientConfiguration' { + declare module.exports: any; +} + +declare module 'polished/lib/types/sideKeyword' { + declare module.exports: any; +} + +declare module 'polished/lib/types/style' { + declare module.exports: any; +} + +declare module 'polished/lib/types/timingFunction' { + declare module.exports: any; +} + +declare module 'polished/lib/types/triangleConfiguration' { + declare module.exports: any; +} + +// Filename aliases +declare module 'polished/babel.config.js' { + declare module.exports: $Exports<'polished/babel.config'>; +} +declare module 'polished/dist/polished.es.js' { + declare module.exports: $Exports<'polished/dist/polished.es'>; +} +declare module 'polished/dist/polished.js' { + declare module.exports: $Exports<'polished/dist/polished'>; +} +declare module 'polished/dist/polished.min.js' { + declare module.exports: $Exports<'polished/dist/polished.min'>; +} +declare module 'polished/docs/assets/anchor.js' { + declare module.exports: $Exports<'polished/docs/assets/anchor'>; +} +declare module 'polished/docs/assets/docs.js' { + declare module.exports: $Exports<'polished/docs/assets/docs'>; +} +declare module 'polished/docs/assets/highlight.pack.js' { + declare module.exports: $Exports<'polished/docs/assets/highlight.pack'>; +} +declare module 'polished/docs/assets/polished.js' { + declare module.exports: $Exports<'polished/docs/assets/polished'>; +} +declare module 'polished/docs/assets/script.js' { + declare module.exports: $Exports<'polished/docs/assets/script'>; +} +declare module 'polished/lib/color/adjustHue.js' { + declare module.exports: $Exports<'polished/lib/color/adjustHue'>; +} +declare module 'polished/lib/color/complement.js' { + declare module.exports: $Exports<'polished/lib/color/complement'>; +} +declare module 'polished/lib/color/darken.js' { + declare module.exports: $Exports<'polished/lib/color/darken'>; +} +declare module 'polished/lib/color/desaturate.js' { + declare module.exports: $Exports<'polished/lib/color/desaturate'>; +} +declare module 'polished/lib/color/getLuminance.js' { + declare module.exports: $Exports<'polished/lib/color/getLuminance'>; +} +declare module 'polished/lib/color/grayscale.js' { + declare module.exports: $Exports<'polished/lib/color/grayscale'>; +} +declare module 'polished/lib/color/hsl.js' { + declare module.exports: $Exports<'polished/lib/color/hsl'>; +} +declare module 'polished/lib/color/hsla.js' { + declare module.exports: $Exports<'polished/lib/color/hsla'>; +} +declare module 'polished/lib/color/invert.js' { + declare module.exports: $Exports<'polished/lib/color/invert'>; +} +declare module 'polished/lib/color/lighten.js' { + declare module.exports: $Exports<'polished/lib/color/lighten'>; +} +declare module 'polished/lib/color/mix.js' { + declare module.exports: $Exports<'polished/lib/color/mix'>; +} +declare module 'polished/lib/color/opacify.js' { + declare module.exports: $Exports<'polished/lib/color/opacify'>; +} +declare module 'polished/lib/color/parseToHsl.js' { + declare module.exports: $Exports<'polished/lib/color/parseToHsl'>; +} +declare module 'polished/lib/color/parseToRgb.js' { + declare module.exports: $Exports<'polished/lib/color/parseToRgb'>; +} +declare module 'polished/lib/color/readableColor.js' { + declare module.exports: $Exports<'polished/lib/color/readableColor'>; +} +declare module 'polished/lib/color/rgb.js' { + declare module.exports: $Exports<'polished/lib/color/rgb'>; +} +declare module 'polished/lib/color/rgba.js' { + declare module.exports: $Exports<'polished/lib/color/rgba'>; +} +declare module 'polished/lib/color/saturate.js' { + declare module.exports: $Exports<'polished/lib/color/saturate'>; +} +declare module 'polished/lib/color/setHue.js' { + declare module.exports: $Exports<'polished/lib/color/setHue'>; +} +declare module 'polished/lib/color/setLightness.js' { + declare module.exports: $Exports<'polished/lib/color/setLightness'>; +} +declare module 'polished/lib/color/setSaturation.js' { + declare module.exports: $Exports<'polished/lib/color/setSaturation'>; +} +declare module 'polished/lib/color/shade.js' { + declare module.exports: $Exports<'polished/lib/color/shade'>; +} +declare module 'polished/lib/color/tint.js' { + declare module.exports: $Exports<'polished/lib/color/tint'>; +} +declare module 'polished/lib/color/toColorString.js' { + declare module.exports: $Exports<'polished/lib/color/toColorString'>; +} +declare module 'polished/lib/color/transparentize.js' { + declare module.exports: $Exports<'polished/lib/color/transparentize'>; +} +declare module 'polished/lib/helpers/directionalProperty.js' { + declare module.exports: $Exports<'polished/lib/helpers/directionalProperty'>; +} +declare module 'polished/lib/helpers/em.js' { + declare module.exports: $Exports<'polished/lib/helpers/em'>; +} +declare module 'polished/lib/helpers/getValueAndUnit.js' { + declare module.exports: $Exports<'polished/lib/helpers/getValueAndUnit'>; +} +declare module 'polished/lib/helpers/modularScale.js' { + declare module.exports: $Exports<'polished/lib/helpers/modularScale'>; +} +declare module 'polished/lib/helpers/rem.js' { + declare module.exports: $Exports<'polished/lib/helpers/rem'>; +} +declare module 'polished/lib/helpers/stripUnit.js' { + declare module.exports: $Exports<'polished/lib/helpers/stripUnit'>; +} +declare module 'polished/lib/index.js' { + declare module.exports: $Exports<'polished/lib/index'>; +} +declare module 'polished/lib/internalHelpers/_capitalizeString.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_capitalizeString'>; +} +declare module 'polished/lib/internalHelpers/_curry.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_curry'>; +} +declare module 'polished/lib/internalHelpers/_endsWith.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_endsWith'>; +} +declare module 'polished/lib/internalHelpers/_guard.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_guard'>; +} +declare module 'polished/lib/internalHelpers/_hslToHex.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_hslToHex'>; +} +declare module 'polished/lib/internalHelpers/_hslToRgb.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_hslToRgb'>; +} +declare module 'polished/lib/internalHelpers/_nameToHex.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_nameToHex'>; +} +declare module 'polished/lib/internalHelpers/_numberToHex.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_numberToHex'>; +} +declare module 'polished/lib/internalHelpers/_pxto.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_pxto'>; +} +declare module 'polished/lib/internalHelpers/_reduceHexValue.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_reduceHexValue'>; +} +declare module 'polished/lib/internalHelpers/_rgbToHsl.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_rgbToHsl'>; +} +declare module 'polished/lib/internalHelpers/_statefulSelectors.js' { + declare module.exports: $Exports<'polished/lib/internalHelpers/_statefulSelectors'>; +} +declare module 'polished/lib/mixins/between.js' { + declare module.exports: $Exports<'polished/lib/mixins/between'>; +} +declare module 'polished/lib/mixins/clearFix.js' { + declare module.exports: $Exports<'polished/lib/mixins/clearFix'>; +} +declare module 'polished/lib/mixins/cover.js' { + declare module.exports: $Exports<'polished/lib/mixins/cover'>; +} +declare module 'polished/lib/mixins/ellipsis.js' { + declare module.exports: $Exports<'polished/lib/mixins/ellipsis'>; +} +declare module 'polished/lib/mixins/fluidRange.js' { + declare module.exports: $Exports<'polished/lib/mixins/fluidRange'>; +} +declare module 'polished/lib/mixins/fontFace.js' { + declare module.exports: $Exports<'polished/lib/mixins/fontFace'>; +} +declare module 'polished/lib/mixins/hideText.js' { + declare module.exports: $Exports<'polished/lib/mixins/hideText'>; +} +declare module 'polished/lib/mixins/hideVisually.js' { + declare module.exports: $Exports<'polished/lib/mixins/hideVisually'>; +} +declare module 'polished/lib/mixins/hiDPI.js' { + declare module.exports: $Exports<'polished/lib/mixins/hiDPI'>; +} +declare module 'polished/lib/mixins/normalize.js' { + declare module.exports: $Exports<'polished/lib/mixins/normalize'>; +} +declare module 'polished/lib/mixins/placeholder.js' { + declare module.exports: $Exports<'polished/lib/mixins/placeholder'>; +} +declare module 'polished/lib/mixins/radialGradient.js' { + declare module.exports: $Exports<'polished/lib/mixins/radialGradient'>; +} +declare module 'polished/lib/mixins/retinaImage.js' { + declare module.exports: $Exports<'polished/lib/mixins/retinaImage'>; +} +declare module 'polished/lib/mixins/selection.js' { + declare module.exports: $Exports<'polished/lib/mixins/selection'>; +} +declare module 'polished/lib/mixins/timingFunctions.js' { + declare module.exports: $Exports<'polished/lib/mixins/timingFunctions'>; +} +declare module 'polished/lib/mixins/triangle.js' { + declare module.exports: $Exports<'polished/lib/mixins/triangle'>; +} +declare module 'polished/lib/mixins/wordWrap.js' { + declare module.exports: $Exports<'polished/lib/mixins/wordWrap'>; +} +declare module 'polished/lib/shorthands/animation.js' { + declare module.exports: $Exports<'polished/lib/shorthands/animation'>; +} +declare module 'polished/lib/shorthands/backgroundImages.js' { + declare module.exports: $Exports<'polished/lib/shorthands/backgroundImages'>; +} +declare module 'polished/lib/shorthands/backgrounds.js' { + declare module.exports: $Exports<'polished/lib/shorthands/backgrounds'>; +} +declare module 'polished/lib/shorthands/border.js' { + declare module.exports: $Exports<'polished/lib/shorthands/border'>; +} +declare module 'polished/lib/shorthands/borderColor.js' { + declare module.exports: $Exports<'polished/lib/shorthands/borderColor'>; +} +declare module 'polished/lib/shorthands/borderRadius.js' { + declare module.exports: $Exports<'polished/lib/shorthands/borderRadius'>; +} +declare module 'polished/lib/shorthands/borderStyle.js' { + declare module.exports: $Exports<'polished/lib/shorthands/borderStyle'>; +} +declare module 'polished/lib/shorthands/borderWidth.js' { + declare module.exports: $Exports<'polished/lib/shorthands/borderWidth'>; +} +declare module 'polished/lib/shorthands/buttons.js' { + declare module.exports: $Exports<'polished/lib/shorthands/buttons'>; +} +declare module 'polished/lib/shorthands/margin.js' { + declare module.exports: $Exports<'polished/lib/shorthands/margin'>; +} +declare module 'polished/lib/shorthands/padding.js' { + declare module.exports: $Exports<'polished/lib/shorthands/padding'>; +} +declare module 'polished/lib/shorthands/position.js' { + declare module.exports: $Exports<'polished/lib/shorthands/position'>; +} +declare module 'polished/lib/shorthands/size.js' { + declare module.exports: $Exports<'polished/lib/shorthands/size'>; +} +declare module 'polished/lib/shorthands/textInputs.js' { + declare module.exports: $Exports<'polished/lib/shorthands/textInputs'>; +} +declare module 'polished/lib/shorthands/transitions.js' { + declare module.exports: $Exports<'polished/lib/shorthands/transitions'>; +} +declare module 'polished/lib/types/color.js' { + declare module.exports: $Exports<'polished/lib/types/color'>; +} +declare module 'polished/lib/types/fluidRangeConfiguration.js' { + declare module.exports: $Exports<'polished/lib/types/fluidRangeConfiguration'>; +} +declare module 'polished/lib/types/fontFaceConfiguration.js' { + declare module.exports: $Exports<'polished/lib/types/fontFaceConfiguration'>; +} +declare module 'polished/lib/types/interactionState.js' { + declare module.exports: $Exports<'polished/lib/types/interactionState'>; +} +declare module 'polished/lib/types/modularScaleRatio.js' { + declare module.exports: $Exports<'polished/lib/types/modularScaleRatio'>; +} +declare module 'polished/lib/types/radialGradientConfiguration.js' { + declare module.exports: $Exports<'polished/lib/types/radialGradientConfiguration'>; +} +declare module 'polished/lib/types/sideKeyword.js' { + declare module.exports: $Exports<'polished/lib/types/sideKeyword'>; +} +declare module 'polished/lib/types/style.js' { + declare module.exports: $Exports<'polished/lib/types/style'>; +} +declare module 'polished/lib/types/timingFunction.js' { + declare module.exports: $Exports<'polished/lib/types/timingFunction'>; +} +declare module 'polished/lib/types/triangleConfiguration.js' { + declare module.exports: $Exports<'polished/lib/types/triangleConfiguration'>; +} diff --git a/src/webui/app.js b/src/webui/app.js index 7631655d1..24f593df3 100644 --- a/src/webui/app.js +++ b/src/webui/app.js @@ -65,12 +65,8 @@ export default class App extends Component { loadPackages = async () => { try { this.req = await API.request('packages', 'GET'); - const transformedPackages = this.req.map(({ name, ...others}) => ({ - label: name, - ...others - })); this.setState({ - packages: transformedPackages, + packages: this.req, isLoading: false }); } catch (error) { diff --git a/src/webui/components/AutoComplete/index.js b/src/webui/components/AutoComplete/index.js index 54d8e449e..2203cd8bd 100644 --- a/src/webui/components/AutoComplete/index.js +++ b/src/webui/components/AutoComplete/index.js @@ -33,11 +33,11 @@ const renderInputComponent = (inputProps): Node => { ); }; -const getSuggestionValue = (suggestion): string => suggestion.label; +const getSuggestionValue = (suggestion): string => suggestion.name; const renderSuggestion = (suggestion, { query, isHighlighted }): Node => { - const matches = match(suggestion.label, query); - const parts = parse(suggestion.label, matches); + const matches = match(suggestion.name, query); + const parts = parse(suggestion.name, matches); return (
diff --git a/src/webui/components/Footer/index.js b/src/webui/components/Footer/index.js index ca5055993..52448245f 100644 --- a/src/webui/components/Footer/index.js +++ b/src/webui/components/Footer/index.js @@ -17,15 +17,15 @@ const Footer = (): Element => ( ♥ on - + - - - - - - - + + + + + + + diff --git a/src/webui/components/Header/styles.js b/src/webui/components/Header/styles.js index 422b1f159..42678a40d 100644 --- a/src/webui/components/Header/styles.js +++ b/src/webui/components/Header/styles.js @@ -11,29 +11,11 @@ import IconButton from '@material-ui/core/IconButton/index'; import colors from '../../utils/styles/colors'; import mq from '../../utils/styles/media'; -export const NavBar = styled(AppBar)` - && { - background-color: ${colors.primary}; - min-height: 60px; - display: flex; - justify-content: center; - } -`; - export const InnerNavBar = styled(Toolbar)` && { justify-content: space-between; align-items: center; - padding: 0 20px; - ${mq.medium(css` - min-width: 400px; - max-width: 800px; - width: 100%; - margin: auto; - `)}; - ${mq.large(css` - max-width: 1240px; - `)}; + padding: 0 15px; } `; @@ -63,9 +45,6 @@ export const MobileNavBar = styled.div` border-bottom: 1px solid ${colors.greyLight}; padding: 8px; position: relative; - ${mq.medium(css` - display: none; - `)}; } `; @@ -83,9 +62,6 @@ export const InnerMobileNavBar = styled.div` export const IconSearchButton = styled(IconButton)` && { display: block; - ${mq.medium(css` - display: none; - `)}; } `; @@ -95,8 +71,37 @@ export const SearchWrapper = styled.div` max-width: 393px; width: 100%; display: none; + } +`; + +export const NavBar = styled(AppBar)` + && { + background-color: ${colors.primary}; + min-height: 60px; + display: flex; + justify-content: center; ${mq.medium(css` - display: flex; + ${SearchWrapper} { + display: flex; + } + ${IconSearchButton} { + display: none; + } + ${MobileNavBar} { + display: none; + } + `)}; + ${mq.large(css` + ${InnerNavBar} { + padding: 0 20px; + } + `)}; + ${mq.xlarge(css` + ${InnerNavBar} { + max-width: 1240px; + width: 100%; + margin: 0 auto; + } `)}; } `; diff --git a/src/webui/components/Icon/img/license.svg b/src/webui/components/Icon/img/license.svg new file mode 100644 index 000000000..a370d2bb5 --- /dev/null +++ b/src/webui/components/Icon/img/license.svg @@ -0,0 +1 @@ + diff --git a/src/webui/components/Icon/img/time.svg b/src/webui/components/Icon/img/time.svg new file mode 100644 index 000000000..8ef8c2424 --- /dev/null +++ b/src/webui/components/Icon/img/time.svg @@ -0,0 +1 @@ + diff --git a/src/webui/components/Icon/index.js b/src/webui/components/Icon/index.js index 140980974..99d3c51fc 100644 --- a/src/webui/components/Icon/index.js +++ b/src/webui/components/Icon/index.js @@ -19,6 +19,8 @@ import austria from './img/austria.svg'; import spain from './img/spain.svg'; import earth from './img/earth.svg'; import verdaccio from './img/verdaccio.svg'; +import license from './img/license.svg'; +import time from './img/time.svg'; export const Icons: $Shape = { // flags @@ -31,6 +33,8 @@ export const Icons: $Shape = { austria, earth, verdaccio, + license, + time, }; const Icon = ({ className, name, size = 'sm', img = false, pointer = false, ...props }: IProps): Node => { diff --git a/src/webui/components/Icon/styles.js b/src/webui/components/Icon/styles.js index e48fd6646..d3d87885e 100644 --- a/src/webui/components/Icon/styles.js +++ b/src/webui/components/Icon/styles.js @@ -10,23 +10,28 @@ const getSize = (size: string) => { switch (size) { case 'md': return ` - width: 20px; + width: 18px; height: 18px; `; + case 'lg': + return ` + width: 20px; + height: 20px; + `; default: return ` - width: 18px; - height: 18px; + width: 14px; + height: 14px; `; } }; -const commonStyle = ({ size = 'sm', pointer }: IProps) => css` +const commonStyle = ({ size = 'sm', pointer, modifiers }: IProps) => css` && { - padding: 0 5px; display: inline-block; cursor: ${pointer ? 'pointer' : 'default'}; ${getSize(size)}; + ${modifiers && modifiers}; } `; diff --git a/src/webui/components/Icon/types.js b/src/webui/components/Icon/types.js index 0ee04c052..5301ddd74 100644 --- a/src/webui/components/Icon/types.js +++ b/src/webui/components/Icon/types.js @@ -2,8 +2,8 @@ * @prettier * @flow */ - import { Icons } from './index'; +import type { Styles } from '../../../../types'; export interface IIconsMap { brazil: string; @@ -15,6 +15,8 @@ export interface IIconsMap { india: string; earth: string; verdaccio: string; + license: string; + time: string; [key: string]: string; } @@ -26,4 +28,5 @@ export interface IProps { size?: 'sm' | 'md'; pointer?: boolean; img?: boolean; + modifiers?: Styles; } diff --git a/src/webui/components/Label/index.js b/src/webui/components/Label/index.js index 11cbdf081..048db0151 100644 --- a/src/webui/components/Label/index.js +++ b/src/webui/components/Label/index.js @@ -6,21 +6,22 @@ import React from 'react'; import styled from 'react-emotion'; import { fontWeight } from '../../utils/styles/sizes'; -import ellipsis from '../../utils/styles/ellipsis'; import type { Node } from 'react'; import { IProps } from './types'; -const Wrapper = styled.span` +const Wrapper = styled.div` font-weight: ${({ weight }) => fontWeight[weight]}; text-transform: ${({ capitalize }) => (capitalize ? 'capitalize' : 'none')}; - ${props => props.limit && ellipsis(props.limit)}; + ${({ modifiers }: IProps) => modifiers && modifiers}; `; -const Label = ({ text = '', capitalize = false, weight = 'regular', ...props }: IProps): Node => ( - - {text} - -); +const Label = ({ text = '', capitalize = false, weight = 'regular', ...props }: IProps): Node => { + return ( + + {text} + + ); +}; export default Label; diff --git a/src/webui/components/Label/types.js b/src/webui/components/Label/types.js index 8d08900de..2bda7b3d2 100644 --- a/src/webui/components/Label/types.js +++ b/src/webui/components/Label/types.js @@ -2,10 +2,11 @@ * @prettier * @flow */ +import type { Styles } from '../../../../types'; export interface IProps { text: string; capitalize?: boolean; weight?: string; - limit?: number; + modifiers?: Styles; } diff --git a/src/webui/components/Package/index.js b/src/webui/components/Package/index.js index b1b88d80f..bfb460d74 100644 --- a/src/webui/components/Package/index.js +++ b/src/webui/components/Package/index.js @@ -1,62 +1,88 @@ +/** + * @prettier + * @flow + */ + import React from 'react'; -import PropTypes from 'prop-types'; -import Chip from '@material-ui/core/Chip'; -import { Link } from 'react-router-dom'; +import type { Element } from 'react'; +import { spacing } from '../../utils/styles/mixings'; -import { formatDateDistance } from '../../utils/package'; +import Tag from '../Tag'; +import { formatDate, formatDateDistance } from '../../utils/package'; -import classes from './package.scss'; +import { IProps } from './types'; +import { + Wrapper, + Header, + MainInfo, + Name, + Version, + Overview, + Published, + OverviewItem, + Description, + Icon, + Text, + Details, + Avatar, + Author, + Field, + Content, + Footer, +} from './styles'; -const Package = ({ name, version, author, description, license, time, keywords }) => { - return (
- -
-
-

- {name} -

-
-
- {author ? `By: ${author}` : ''} -
-
-
-

- {description} -

-
-
- {keywords && keywords.map((keyword, index) => ( - +const getInitialsName = (name: string) => + name + .split(' ') + .reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '') + .toUpperCase(); + +const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element => ( + +
+ + {label} + {`v${version}`} + + + {license && ( + + + {license} + + )} + + + {`Published on ${formatDate(time)} •`} + {`${formatDateDistance(time)} ago`} + + +
+ + + + + {!avatar && getInitialsName(name)} + +
+ +
+ + + {description && ( + + {description} + + )} + + {keywords.length > 0 && ( +
+ {keywords.sort().map((keyword, index) => ( + {keyword} ))} -
-
-
- {time ? `Published ${formatDateDistance(time)} ago` : ''} -
-
- {license} -
-
- -
); -}; - -Package.propTypes = { - name: PropTypes.string, - version: PropTypes.string, - author: PropTypes.string, - description: PropTypes.string, - keywords: PropTypes.array, - license: PropTypes.string, - time: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.instanceOf(Date) - ]) -}; + + )} + +); export default Package; diff --git a/src/webui/components/Package/package.scss b/src/webui/components/Package/package.scss deleted file mode 100644 index f50e0aa07..000000000 --- a/src/webui/components/Package/package.scss +++ /dev/null @@ -1,101 +0,0 @@ -@import '../../styles/variables'; -@import '../../styles/mixins'; - -.package { - .header { - display: flex; - align-items: center; - margin: 10px 0 0; - } - - .footer { - display: flex; - p.description { - width: 100%; - margin-bottom: 0; - font-size: $font-size-sm; - color: $grey-dark; - word-wrap: break-word; - } - } - - .tags { - margin: 0 0.5em 0.5em 0; - font-size: $font-size-sm; - :global { - .el-tag { - margin-right: 5px; - } - } - .tag { - margin: 4px; - } - } - - .details { - display: flex; - font-size: 80%; - color: $grey-light; - padding-top: 5px; - .license { - width: 20%; - text-align: right; - } - - .homepage { - width: 80%; - } - } - - > a { - display: block; - position: relative; - color: inherit; - margin: 0; - padding: 10px 0; - cursor: pointer; - text-decoration: none; - - .title { - width: 100%; - - h1 { - font-size: $font-size-md; - margin: 0; - - :global { - .el-tag { - margin-left: 5px; - } - } - } - } - - .author { - color: $grey-light; - font-size: inherit; - width: 30%; - text-align: right; - } - - &:hover { - &::before { - content: ''; - display: block; - background: rgba(255, 255, 255, 0.7); - @include fullSize; - } - - &::after { - display: block; - position: absolute; - top: 50%; - right: 0; - left: 0; - text-align: center; - transform: translateY(-50%); - font-size: $font-size-md; - } - } - } -} diff --git a/src/webui/components/Package/styles.js b/src/webui/components/Package/styles.js new file mode 100644 index 000000000..dfb8074f4 --- /dev/null +++ b/src/webui/components/Package/styles.js @@ -0,0 +1,201 @@ +/** + * @prettier + * @flow + */ + +import styled, { css } from 'react-emotion'; +import { Link } from 'react-router-dom'; +import { default as Photo } from '@material-ui/core/Avatar'; +import { default as Ico } from '../Icon'; + +import mq from '../../utils/styles/media'; +import { ellipsis } from '../../utils/styles/mixings'; +import colors from '../../utils/styles/colors'; + +import Label from '../Label'; + +// HEADER +export const Header = styled.div` + && { + display: flex; + flex-direction: column; + padding: 0 0 5px 0; + } +`; + +export const Name = styled.span` + && { + ${ellipsis('50%')}; + } +`; + +export const MainInfo = styled.span` + && { + font-size: 16px; + font-weight: 600; + line-height: 30px; + flex: 1; + color: #3a8bff; + padding: 0 10px 0 0; + overflow: hidden; + display: flex; + align-items: center; + :hover { + ${Name} { + text-decoration: underline; + } + } + } +`; + +export const OverviewItem = styled.span` + && { + display: flex; + align-items: center; + margin: 0 0 5px 0; + color: ${colors.greyLight}; + } +`; + +export const Overview = styled.span` + && { + position: relative; + display: flex; + flex-direction: column; + } +`; + +export const Version = styled.span` + && { + font-size: 12px; + padding: 0 0 0 10px; + margin: 0 0 0 5px; + color: #9f9f9f; + position: relative; + ${ellipsis('100%')}; + :before { + content: '•'; + position: absolute; + left: 0; + } + } +`; + +export const Icon = styled(Ico)` + && { + margin: 1px 5px 0 0; + fill: ${colors.greyLight}; + } +`; + +export const Published = styled.span` + && { + display: none; + color: ${colors.greyLight}; + ${({ modifiers }) => modifiers}; + } +`; + +// Content +export const Field = styled.div` + && { + padding: 0 0 5px 0; + } +`; + +export const Content = styled.div` + && { + ${Field} { + :last-child { + padding: 0; + } + } + } +`; + +export const Text = styled(Label)` + && { + color: #908ba1; + } +`; + +export const Details = styled.span` + && { + margin-left: 5px; + line-height: 14px; + display: flex; + flex-direction: column; + } +`; + +export const Author = styled.div` + && { + display: flex; + align-items: center; + } +`; + +export const Avatar = styled(Photo)` + && { + width: 30px; + height: 30px; + background: #4b5e40; + font-size: 15px; + } +`; + +export const Description = styled.div` + && { + margin: 5px 0; + max-height: 100px; + text-overflow: ellipsis; + } +`; + +// Footer +export const Footer = styled.div` + && { + display: none; + padding: 5px 0 0 0; + } +`; + +// Container +export const Wrapper = styled(Link)` + && { + font-size: 12px; + background-color: #fff; + margin: 0 0 15px 0; + transition: box-shadow 0.15s; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); + border-radius: 3px; + padding: 10px; + text-decoration: none; + display: block; + color: #2f273c; + ${mq.medium(css` + ${Header} { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + ${OverviewItem} { + margin: 0 0 0 10px; + } + ${Overview} { + flex-direction: row; + ${OverviewItem} { + :first-child { + margin: 0; + } + } + } + ${Footer} { + display: block; + } + ${Published} { + display: inline-block; + } + `)}; + } +`; diff --git a/src/webui/components/Package/types.js b/src/webui/components/Package/types.js new file mode 100644 index 000000000..f39ea33a8 --- /dev/null +++ b/src/webui/components/Package/types.js @@ -0,0 +1,20 @@ +/** + * @prettier + * @flow + */ + +export interface IProps { + name: string; + version: string; + time: string; + author: IAuthor; + description?: string; + keywords?: string[]; + license?: string; +} + +export interface IAuthor { + name: string; + avatar: string; + email: string; +} diff --git a/src/webui/components/PackageList/index.js b/src/webui/components/PackageList/index.js index cd3f4ec55..f5d26c2e7 100644 --- a/src/webui/components/PackageList/index.js +++ b/src/webui/components/PackageList/index.js @@ -28,18 +28,14 @@ export default class PackageList extends React.Component { renderList = () => { const { packages } = this.props; return ( -
    - {packages.map((pkg, i) => { - const { label: name, version, description, time, keywords } = pkg; - const author = formatAuthor(pkg.author); - const license = formatLicense(pkg.license); - return ( -
  • - -
    • - ); - })} -
+ packages.map((pkg, i) => { + const { name, version, description, time, keywords } = pkg; + const author = formatAuthor(pkg.author); + const license = formatLicense(pkg.license); + return ( + + ); + }) ); } @@ -53,4 +49,4 @@ export default class PackageList extends React.Component {
); } -} \ No newline at end of file +} diff --git a/src/webui/components/PackageList/packageList.scss b/src/webui/components/PackageList/packageList.scss index fc45752c0..26d77bf9c 100644 --- a/src/webui/components/PackageList/packageList.scss +++ b/src/webui/components/PackageList/packageList.scss @@ -1,22 +1,12 @@ -@import '../../styles/variables'; @import '../../styles/mixins'; .pkgContainer { margin: 0; padding: 0; - li { - @include border-bottom-default($paleNavy); - list-style: none; - - &:last-child { - border-bottom: none; - } - } - .listTitle { font-weight: $font-weight-regular; font-size: $font-size-xl; - margin: 0; + margin: 0 0 10px 0; } } diff --git a/src/webui/components/PackageSidebar/modules/PeerDependencies/index.jsx b/src/webui/components/PackageSidebar/modules/PeerDependencies/index.jsx index d68a4671f..92b1de1d2 100644 --- a/src/webui/components/PackageSidebar/modules/PeerDependencies/index.jsx +++ b/src/webui/components/PackageSidebar/modules/PeerDependencies/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Dependencies from '../Dependencies'; -export const TITLE = 'Peer Dependencies' +export const TITLE = 'Peer Dependencies'; const PeerDependencies = ({dependencies = {}, title = TITLE}) => { return ( diff --git a/src/webui/components/Search/index.js b/src/webui/components/Search/index.js index 1cc0f151f..e2f0644b1 100644 --- a/src/webui/components/Search/index.js +++ b/src/webui/components/Search/index.js @@ -113,13 +113,9 @@ class Search extends Component { const signal = controller.signal; // Keep track of search requests. this.requestList.push(controller); - const response = await API.request(`search/${encodeURIComponent(value)}`, 'GET', { signal }); - const transformedPackages = response.map(({ name, ...others }) => ({ - label: name, - ...others, - })); + const suggestions = await API.request(`search/${encodeURIComponent(value)}`, 'GET', { signal }); this.setState({ - suggestions: transformedPackages, + suggestions, loaded: true, }); } catch (error) { diff --git a/src/webui/components/Tag/index.js b/src/webui/components/Tag/index.js new file mode 100644 index 000000000..359d5bdbb --- /dev/null +++ b/src/webui/components/Tag/index.js @@ -0,0 +1,14 @@ +/** + * @prettier + * @flow + */ + +import React from 'react'; +import type { Element } from 'react'; + +import { IProps } from './types'; +import { Wrapper } from './styles'; + +const Tag = ({ children }: IProps): Element => {children}; + +export default Tag; diff --git a/src/webui/components/Tag/styles.js b/src/webui/components/Tag/styles.js new file mode 100644 index 000000000..a6eea8f92 --- /dev/null +++ b/src/webui/components/Tag/styles.js @@ -0,0 +1,20 @@ +/** + * @prettier + * @flow + */ + +import styled from 'react-emotion'; +import { ellipsis } from '../../utils/styles/mixings'; + +export const Wrapper = styled.span` + && { + vertical-align: middle; + line-height: 22px; + border-radius: 2px; + color: #9f9f9f; + background-color: hsla(0, 0%, 51%, 0.1); + padding: 0.22rem 0.4rem; + margin: 5px 10px 0 0; + ${ellipsis('300px')}; + } +`; diff --git a/src/webui/components/Tag/types.js b/src/webui/components/Tag/types.js new file mode 100644 index 000000000..b8ccd4136 --- /dev/null +++ b/src/webui/components/Tag/types.js @@ -0,0 +1,9 @@ +/** + * @prettier + * @flow + */ +import type { Node } from 'react'; + +export interface IProps { + children: Node; +} diff --git a/src/webui/styles/global.scss b/src/webui/styles/global.scss index 2b38a8eef..e33736172 100644 --- a/src/webui/styles/global.scss +++ b/src/webui/styles/global.scss @@ -3,7 +3,7 @@ :global { .container { - margin-top: 20px; + padding: 15px; flex: 1; @include container-size; diff --git a/src/webui/styles/mixins.scss b/src/webui/styles/mixins.scss index 3017203a5..17bcb83a9 100644 --- a/src/webui/styles/mixins.scss +++ b/src/webui/styles/mixins.scss @@ -39,9 +39,6 @@ @mixin fullSize { @mixin container-size { margin-left: auto; margin-right: auto; - width: 100%; - min-width: 400px; - max-width: $break-sm; @media screen and (min-width: $break-lg) { max-width: $break-lg; } diff --git a/src/webui/styles/variables.scss b/src/webui/styles/variables.scss index 12857acff..557518b45 100644 --- a/src/webui/styles/variables.scss +++ b/src/webui/styles/variables.scss @@ -56,7 +56,7 @@ $font-weight-semibold: 600; $font-weight-bold: 700; -$break-sm: 800px; +$break-sm: 768px; $break-lg: 1240px; // Spacing diff --git a/src/webui/utils/package.js b/src/webui/utils/package.js index 67219fd95..4ed69ddc4 100644 --- a/src/webui/utils/package.js +++ b/src/webui/utils/package.js @@ -1,6 +1,6 @@ import isString from 'lodash/isString'; import isObject from 'lodash/isObject'; -export const TIMEFORMAT = 'YYYY/MM/DD, HH:mm:ss'; +export const TIMEFORMAT = 'DD.MM.YYYY, HH:mm:ss'; import format from 'date-fns/format'; import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; @@ -42,15 +42,25 @@ export function formatRepository(repository) { * @see https://docs.npmjs.com/files/package.json#author */ export function formatAuthor(author) { + let authorDetails = { name: 'Anonymous', email: '', avatar: '' }; + if (isString(author)) { - return author; + authorDetails = { + ...authorDetails, + name: author ? author : authorDetails.name + }; } - if (isObject(author) && author.name) { - return author.name; + if (isObject(author)) { + authorDetails = { + ...authorDetails, + name: author.name ? author.name : authorDetails.name, + email: author.email ? author.email : authorDetails.email, + avatar: author.avatar ? author.avatar : authorDetails.avatar + }; } - return null; + return authorDetails; } /** diff --git a/src/webui/utils/styles/ellipsis.js b/src/webui/utils/styles/ellipsis.js deleted file mode 100644 index 55b089216..000000000 --- a/src/webui/utils/styles/ellipsis.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @prettier - * @flow - */ - -import { css } from 'react-emotion'; - -const ellipsis = (maxWidth: number) => css` - white-space: nowrap; - max-width: ${maxWidth}px; - text-overflow: ellipsis; - overflow: hidden; -`; - -export default ellipsis; diff --git a/src/webui/utils/styles/media.js b/src/webui/utils/styles/media.js index 0f0771999..d322688e6 100644 --- a/src/webui/utils/styles/media.js +++ b/src/webui/utils/styles/media.js @@ -3,7 +3,8 @@ import { css } from 'emotion'; const breakpoints = { small: 576, medium: 768, - large: 1240 + large: 1024, + xlarge: 1275 }; const mq = Object.keys(breakpoints).reduce( diff --git a/src/webui/utils/styles/mixings.js b/src/webui/utils/styles/mixings.js new file mode 100644 index 000000000..9d2745c9b --- /dev/null +++ b/src/webui/utils/styles/mixings.js @@ -0,0 +1,45 @@ +/** + * @prettier + * @flow + */ + +/** + * CSS to represent truncated text with an ellipsis. + */ +export function ellipsis(width: string | number) { + return { + display: 'inline-block', + maxWidth: width, + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + wordWrap: 'normal', + }; +} + +/** + * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions. + */ +interface SpacingShortHand { + top?: type; + right?: type; + bottom?: type; + left?: type; +} + +const positionMap = ['Top', 'Right', 'Bottom', 'Left']; + +export function spacing(property: 'padding' | 'margin', ...values: Array>) { + const [firstValue = 0, secondValue = 0, thirdValue = 0, fourthValue = 0] = values; + const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue]; + let styles = {}; + for (let i = 0; i < valuesWithDefaults.length; i += 1) { + if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) { + styles = { + ...styles, + [`${property}${positionMap[i]}`]: valuesWithDefaults[i], + }; + } + } + return styles; +} diff --git a/test/e2e/e2e.spec.js b/test/e2e/e2e.spec.js index 85be58f82..bff3109ed 100644 --- a/test/e2e/e2e.spec.js +++ b/test/e2e/e2e.spec.js @@ -22,7 +22,7 @@ describe('/ (Verdaccio Page)', () => { }; const getPackages = async function() { - return await page.$$('.package-list-items > div'); + return await page.$$('.package-list-items .package'); }; const logIn = async function() { @@ -125,15 +125,14 @@ describe('/ (Verdaccio Page)', () => { await page.reload(); await page.waitFor(1000); const packagesList = await getPackages(); - expect(packagesList).toHaveLength(1); }); it('should navigate to the package detail', async () => { const packagesList = await getPackages(); - const packageItem = packagesList[0]; - await packageItem.focus(); - await packageItem.click({ clickCount: 1, delay: 200 }); + const firstPackage = packagesList[0]; + await firstPackage.focus(); + await firstPackage.click({ clickCount: 1, delay: 200 }); await page.waitFor(1000); const readmeText = await page.evaluate(() => document.querySelector('.markdown-body').textContent); expect(readmeText).toMatch('test'); diff --git a/test/unit/api/utils.spec.js b/test/unit/api/utils.spec.js index 74203d77a..1fae9e9ca 100644 --- a/test/unit/api/utils.spec.js +++ b/test/unit/api/utils.spec.js @@ -1,7 +1,6 @@ // @flow import { generateGravatarUrl, GRAVATAR_DEFAULT } from '../../../src/utils/user'; import { spliceURL } from '../../../src/utils/string'; -import Package from '../../../src/webui/components/Package/index'; import { validateName, convertDistRemoteToLocalTarballUrls, @@ -27,7 +26,7 @@ describe('Utilities', () => { const buildURI = (host, version) => `http://${host}/npm_test/-/npm_test-${version}.tgz`; const fakeHost = 'fake.com'; - const metadata: Package = { + const metadata: any = { name: 'npm_test', versions: { '1.0.0': { @@ -42,6 +41,7 @@ describe('Utilities', () => { } } }; + const cloneMetadata = (pkg = metadata) => Object.assign({}, pkg); describe('API utilities', () => { diff --git a/test/unit/webui/components/__snapshots__/footer.spec.js.snap b/test/unit/webui/components/__snapshots__/footer.spec.js.snap index 8162e4f4b..37654496b 100644 --- a/test/unit/webui/components/__snapshots__/footer.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/footer.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`