From b5fccd1ac9a9275b784e0eec8e821aec29f1c872 Mon Sep 17 00:00:00 2001 From: "Juan Picado @jotadeveloper" Date: Sat, 22 Jul 2017 10:50:53 +0200 Subject: [PATCH] refactor: hide search and title when there is no packages to display --- package.json | 1 + src/webui/src/components/Help/help.scss | 27 +++++ src/webui/src/components/Help/index.js | 37 ++++++ src/webui/src/components/PackageList/index.js | 37 +++--- .../components/PackageList/packageList.scss | 28 +---- src/webui/src/components/Search/index.js | 22 ++++ src/webui/src/components/Search/search.scss | 14 +++ src/webui/src/modules/home/home.scss | 20 ---- src/webui/src/modules/home/index.js | 40 ++++--- yarn.lock | 111 ++++++++++++------ 10 files changed, 220 insertions(+), 117 deletions(-) create mode 100644 src/webui/src/components/Help/help.scss create mode 100644 src/webui/src/components/Help/index.js create mode 100644 src/webui/src/components/Search/index.js create mode 100644 src/webui/src/components/Search/search.scss diff --git a/package.json b/package.json index baa866e85..dab9d8268 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "react-dom": "15.6.1", "react-hot-loader": "3.0.0-beta.7", "react-router-dom": "4.1.1", + "react-syntax-highlighter": "5.6.2", "rimraf": "2.6.1", "sass-loader": "6.0.6", "source-map-loader": "0.2.1", diff --git a/src/webui/src/components/Help/help.scss b/src/webui/src/components/Help/help.scss new file mode 100644 index 000000000..419002376 --- /dev/null +++ b/src/webui/src/components/Help/help.scss @@ -0,0 +1,27 @@ +.help { + + .noPkg { + display: flex; + flex-direction: column; + align-items: center; + padding: 30px 0; + font-size: 20px; + color: #9f9f9f; + + .noPkgTitle { + margin: 1em 0; + padding: 0; + font-size: 24px; + } + + p { + line-height: 1.5; + margin: 0 auto; + font-size: 14px; + } + + code { + font-style: italic; + } + } +} diff --git a/src/webui/src/components/Help/index.js b/src/webui/src/components/Help/index.js new file mode 100644 index 000000000..f432c45c4 --- /dev/null +++ b/src/webui/src/components/Help/index.js @@ -0,0 +1,37 @@ + +import React from 'react'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import {sunburst} from 'react-syntax-highlighter/dist/styles'; + +import classes from './help.scss'; + +const Help = () => { + return ( +
+
  • +

    + No Package Published Yet +

    +

    +

    + To publish your first package just: +
    +
    + + 1. Login + + + {`npm adduser --registry ${location.origin}`} + + 2. Publish + + {`npm publish --registry ${location.origin}`} + + 3. Refresh this page! +

    +
    • +
    + ); +}; + +export default Help; diff --git a/src/webui/src/components/PackageList/index.js b/src/webui/src/components/PackageList/index.js index 73fb7f65f..4fc75dabd 100644 --- a/src/webui/src/components/PackageList/index.js +++ b/src/webui/src/components/PackageList/index.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classes from './packageList.scss'; - import Package from '../Package'; +import Help from '../Help'; + +import classes from './packageList.scss'; export default class PackageList extends React.Component { @@ -19,24 +20,24 @@ export default class PackageList extends React.Component { render() { return ( +
    - { - this.props.packages.length ? - this.renderList(): -
  • -

    No Package Published Yet

    -

    - To publish your first package just: -

    - 1. Login
    - npm adduser --registry {location.origin}
    - 2. Publish
    - npm publish --registry {location.origin}
    - 3. Done! -

    -
    • - } + {this.renderTitle()} + {this.props.packages.length ? this.renderList(): }
    +
    ); } + + renderTitle() { + if (this.isTherePackages() === false) { + return; + } + + return

    Available Packages

    ; + } + + isTherePackages() { + return this.props.packages.length > 0; + } } diff --git a/src/webui/src/components/PackageList/packageList.scss b/src/webui/src/components/PackageList/packageList.scss index 9c9bd9339..899403208 100644 --- a/src/webui/src/components/PackageList/packageList.scss +++ b/src/webui/src/components/PackageList/packageList.scss @@ -7,28 +7,10 @@ list-style: none; } - li.noPkg { - display: flex; - flex-direction: column; - align-items: center; - padding: 30px 0; - font-size: 20px; - color: #9f9f9f; - - .noPkgTitle { - margin: 0; - padding: 0; - font-size: 24px; - } - - p { - line-height: 1.5; - margin: 0 auto; - font-size: 14px; - } - - code { - font-style: italic; - } + .listTitle { + font-weight: normal; + font-size: 24px; + margin-top: 30px; + margin-bottom: 0; } } diff --git a/src/webui/src/components/Search/index.js b/src/webui/src/components/Search/index.js new file mode 100644 index 000000000..cf996b999 --- /dev/null +++ b/src/webui/src/components/Search/index.js @@ -0,0 +1,22 @@ + +import React from 'react'; +import PropTypes from 'prop-types'; + +import classes from './search.scss'; + +const Search = (props) => { + return ( + + ); +}; + +Search.propTypes = { + handleSearchInput: PropTypes.func.isRequired +}; + +export default Search; diff --git a/src/webui/src/components/Search/search.scss b/src/webui/src/components/Search/search.scss new file mode 100644 index 000000000..10711f3eb --- /dev/null +++ b/src/webui/src/components/Search/search.scss @@ -0,0 +1,14 @@ +@import '../../styles/variable'; + +.searchBox { + width: 100%; + font-size: 18px; + line-height: 30px; + border: none; + border-bottom: 1px solid lightgrey; + outline: none; + + &:focus { + border-bottom: 1px solid grey; + } +} diff --git a/src/webui/src/modules/home/home.scss b/src/webui/src/modules/home/home.scss index 46b81fa10..11f0bc216 100644 --- a/src/webui/src/modules/home/home.scss +++ b/src/webui/src/modules/home/home.scss @@ -1,21 +1 @@ @import '../../styles/variable'; - -.searchBox { - width: 100%; - font-size: 18px; - line-height: 30px; - border: none; - border-bottom: 1px solid lightgrey; - outline: none; - - &:focus { - border-bottom: 1px solid grey; - } -} - -.listTitle { - font-weight: normal; - font-size: 24px; - margin-top: 30px; - margin-bottom: 0; -} diff --git a/src/webui/src/modules/home/index.js b/src/webui/src/modules/home/index.js index ee9887803..37f282472 100644 --- a/src/webui/src/modules/home/index.js +++ b/src/webui/src/modules/home/index.js @@ -1,10 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Loading, MessageBox} from 'element-react'; +import {isEmpty} from 'lodash'; import API from '../../../utils/api'; import PackageList from '../../components/PackageList'; +import Search from '../../components/Search'; import classes from './home.scss'; @@ -89,32 +91,32 @@ export default class Home extends React.Component { }); } - renderLoading() { - return ( - - ); - } - - renderPackageList() { - return ( -
    -

    Available Packages

    - -
    - ); + isTherePackages() { + return isEmpty(this.state.packages); } render() { return (
    - + { this.renderSearchBar() } { this.state.loading ? this.renderLoading() : this.renderPackageList() }
    ); } + + renderSearchBar() { + if (this.isTherePackages()) { + return; + } + return ; + } + + renderLoading() { + return ; + } + + renderPackageList() { + return ; + } + } diff --git a/yarn.lock b/yarn.lock index a5bac9aba..2649959db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1156,11 +1156,11 @@ browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.3.6, browserslist@^1.5 electron-to-chromium "^1.2.7" browserslist@^2.1.2: - version "2.2.0" - resolved "https://registry.npmjs.org/browserslist/-/browserslist-2.2.0.tgz#5e35ec993e467c6464b8cb708447386891de9f50" + version "2.2.1" + resolved "https://registry.npmjs.org/browserslist/-/browserslist-2.2.1.tgz#709048c57bf3bf9b382105c396a737ad525d948e" dependencies: - caniuse-lite "^1.0.30000701" - electron-to-chromium "^1.3.15" + caniuse-lite "^1.0.30000704" + electron-to-chromium "^1.3.16" buffer-equal-constant-time@1.0.1: version "1.0.1" @@ -1265,12 +1265,12 @@ caniuse-api@^1.5.2: lodash.uniq "^4.5.0" caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: - version "1.0.30000702" - resolved "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000702.tgz#a60cd30f3ef44ae7b5ed12e9d9b70d4bff6352cb" + version "1.0.30000704" + resolved "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000704.tgz#8c5aa6fed8058e65c70f2c1f5d63f7088650705c" -caniuse-lite@^1.0.30000701: - version "1.0.30000702" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000702.tgz#bd66e40345528fe0c001917d1d3f55454df634f1" +caniuse-lite@^1.0.30000704: + version "1.0.30000704" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000704.tgz#adb6ea01134515663682db93abab291d4c02946b" caseless@~0.11.0: version "0.11.0" @@ -1608,8 +1608,8 @@ cors@^2.8.3: vary "^1" cosmiconfig@^2.1.1: - version "2.1.3" - resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.1.3.tgz#952771eb0dddc1cb3fa2f6fbe51a522e93b3ee0a" + version "2.2.1" + resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.1.tgz#7fbdc6fb47597d5f88175de1df696b66d36e5944" dependencies: is-directory "^0.3.1" js-yaml "^3.4.3" @@ -1671,13 +1671,21 @@ cross-spawn@^3.0.0: lru-cache "^4.0.1" which "^1.2.9" -cross-spawn@^4, cross-spawn@^4.0.0: +cross-spawn@^4: version "4.0.2" resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41" dependencies: lru-cache "^4.0.1" which "^1.2.9" +cross-spawn@^5.0.1: + version "5.1.0" + resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" + dependencies: + lru-cache "^4.0.1" + shebang-command "^1.2.0" + which "^1.2.9" + cryptiles@2.x.x: version "2.0.5" resolved "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8" @@ -2088,7 +2096,7 @@ ee-first@1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" -electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.15: +electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.16: version "1.3.16" resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.16.tgz#d0e026735754770901ae301a21664cba45d92f7d" @@ -2414,12 +2422,12 @@ evp_bytestokey@^1.0.0: dependencies: create-hash "^1.1.1" -execa@^0.5.0: - version "0.5.1" - resolved "https://registry.npmjs.org/execa/-/execa-0.5.1.tgz#de3fb85cb8d6e91c85bcbceb164581785cb57b36" +execa@^0.7.0: + version "0.7.0" + resolved "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777" dependencies: - cross-spawn "^4.0.0" - get-stream "^2.2.0" + cross-spawn "^5.0.1" + get-stream "^3.0.0" is-stream "^1.1.0" npm-run-path "^2.0.0" p-finally "^1.0.0" @@ -2781,12 +2789,9 @@ get-stdin@^5.0.0: version "5.0.1" resolved "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398" -get-stream@^2.2.0: - version "2.3.1" - resolved "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de" - dependencies: - object-assign "^4.0.1" - pinkie-promise "^2.0.0" +get-stream@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14" getpass@^0.1.1: version "0.1.7" @@ -2983,6 +2988,14 @@ he@1.1.x: version "1.1.1" resolved "https://registry.npmjs.org/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +highlight.js@~9.12.0: + version "9.12.0" + resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" + +highlight.js@~9.8.0: + version "9.8.0" + resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-9.8.0.tgz#38eeef40cd45eaddbec8c9e5238fb7a783a3b685" + history@^4.5.1, history@^4.6.0: version "4.6.3" resolved "https://registry.npmjs.org/history/-/history-4.6.3.tgz#6d723a8712c581d6bef37e8c26f4aedc6eb86967" @@ -3549,8 +3562,8 @@ jsesc@~0.5.0: resolved "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" json-loader@^0.5.4: - version "0.5.4" - resolved "https://registry.npmjs.org/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de" + version "0.5.5" + resolved "https://registry.npmjs.org/json-loader/-/json-loader-0.5.5.tgz#1147a469b24f4641520614312fea0c07af176974" json-schema-traverse@^0.3.0: version "0.3.1" @@ -3885,6 +3898,12 @@ lower-case@^1.1.1: version "1.1.4" resolved "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac" +lowlight@^1.5.0: + version "1.9.0" + resolved "https://registry.npmjs.org/lowlight/-/lowlight-1.9.0.tgz#6eccfb20f9125a56a82032083967998b5ba19905" + dependencies: + highlight.js "~9.12.0" + lru-cache@^4.0.1: version "4.1.1" resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" @@ -4474,10 +4493,10 @@ os-locale@^1.4.0: lcid "^1.0.0" os-locale@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/os-locale/-/os-locale-2.0.0.tgz#15918ded510522b81ee7ae5a309d54f639fc39a4" + version "2.1.0" + resolved "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2" dependencies: - execa "^0.5.0" + execa "^0.7.0" lcid "^1.0.0" mem "^1.1.0" @@ -4961,8 +4980,8 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0. supports-color "^3.2.3" postcss@^6.0.1: - version "6.0.7" - resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.7.tgz#6a097477c46d13d0560a817d69abc0bae549d0a0" + version "6.0.8" + resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.8.tgz#89067a9ce8b11f8a84cbc5117efc30419a0857b3" dependencies: chalk "^2.0.1" source-map "^0.5.6" @@ -5179,6 +5198,14 @@ react-router@^4.1.1: prop-types "^15.5.4" warning "^3.0.0" +react-syntax-highlighter@5.6.2: + version "5.6.2" + resolved "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-5.6.2.tgz#01f5ad3cc44c40c26b6fb4e00a4bed90f66304c5" + dependencies: + babel-runtime "^6.18.0" + highlight.js "~9.8.0" + lowlight "^1.5.0" + react-transition-group@^1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f" @@ -5667,6 +5694,16 @@ shallow-clone@^0.1.2: lazy-cache "^0.2.3" mixin-object "^2.0.1" +shebang-command@^1.2.0: + version "1.2.0" + resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" + dependencies: + shebang-regex "^1.0.0" + +shebang-regex@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3" + signal-exit@^3.0.0, signal-exit@^3.0.1, signal-exit@^3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" @@ -5752,8 +5789,8 @@ source-map@~0.1.33: amdefine ">=0.0.4" sourcemapped-stacktrace@^1.1.6: - version "1.1.6" - resolved "https://registry.npmjs.org/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.6.tgz#112d8749c942c3cd3b630dfac9514577b86a3a51" + version "1.1.7" + resolved "https://registry.npmjs.org/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.7.tgz#17e05374ff78b71a9d89ad3975a49f22725ba935" dependencies: source-map "0.5.6" @@ -6087,8 +6124,8 @@ table@^4.0.1: string-width "^2.0.0" tapable@^0.2.5, tapable@~0.2.5: - version "0.2.6" - resolved "https://registry.npmjs.org/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d" + version "0.2.7" + resolved "https://registry.npmjs.org/tapable/-/tapable-0.2.7.tgz#e46c0daacbb2b8a98b9b0cea0f4052105817ed5c" tar-pack@^3.4.0: version "3.4.0" @@ -6228,8 +6265,8 @@ typedarray@^0.0.6: resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" ua-parser-js@^0.7.9: - version "0.7.13" - resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.13.tgz#cd9dd2f86493b3f44dbeeef3780fda74c5ee14be" + version "0.7.14" + resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca" uglify-js@3.0.x: version "3.0.25"