Skip to content

Commit

Permalink
Merge pull request #56 from PSPDFKit-labs/fixes
Browse files Browse the repository at this point in the history 
update browserslist and show proper error message for not
  • Loading branch information
@ritz078
ritz078 authored Apr 6, 2022
2 parents 83df528 + 1d4add9 commit a9702a3
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 68 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"atob": "^2.1.2",
"browserslist": "^4.16.6",
"browserslist": "^4.20.2",
"classnames": "^2.3.1",
"globby": "^11.0.1",
"just-group-by": "^1.1.1",
Expand Down
59 changes: 33 additions & 26 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ import atob from "atob";
import ReactTooltip from "react-tooltip";
import { SelectVersion } from "@components/SelectVersion/SelectVersion";

const usage = browserslist.usage.global;

function getConfigFromQuery() {
if (typeof window !== "undefined") {
const query = new URLSearchParams(window.location.search);
Expand All @@ -38,7 +36,13 @@ function getConfigFromQuery() {
return "last 2 versions";
}

export default function Home({ savedData, initialBrowsers, searchQuery }) {
export default function Home({
savedData,
initialBrowsers,
searchQuery,
usage,
}) {
console.log(usage);
const preSavedData = useMemo(() => {
let { ref, version } = searchQuery;

Expand Down Expand Up @@ -259,18 +263,16 @@ export default function Home({ savedData, initialBrowsers, searchQuery }) {
onChange={(event) => setConfig(event.target.value)}
/>
{error && (
<div className={styles.errorIcon}>
<Error />
<div
className={cn(styles.tooltip, {
[styles.stickyTooltip]: sticky,
})}
>
<span className={styles.tooltiptext}>
Invalid Configuration
</span>
<ArrowDown />
<div
className={cn(styles.tooltip, {
[styles.stickyTooltip]: sticky,
})}
>
<div className={styles.errorIcon}>
<Error />
</div>

<span className={styles.tooltiptext}>{error}</span>
</div>
)}
</div>
Expand Down Expand Up @@ -358,11 +360,11 @@ export default function Home({ savedData, initialBrowsers, searchQuery }) {
<span>{getVersion(version)}</span>
{!preSavedData && (
<span
data-tip={getTooltipData(version)}
data-tip-disable={!usage[version]}
data-tip={getTooltipData(version, usage)}
data-tip-disable={!usage.global[version]}
className={styles.usage}
>
{getUsage(version)}
{getUsage(version, usage)}
</span>
)}
</div>
Expand Down Expand Up @@ -408,11 +410,11 @@ export default function Home({ savedData, initialBrowsers, searchQuery }) {
<span>{getVersion(version)}</span>
{!preSavedData && (
<span
data-tip={getTooltipData(version)}
data-tip-disable={!usage[version]}
data-tip={getTooltipData(version, usage)}
data-tip-disable={!usage.global[version]}
className={styles.usage}
>
{getUsage(version)}
{getUsage(version, usage)}
</span>
)}
</div>
Expand Down Expand Up @@ -537,18 +539,23 @@ export async function getServerSideProps({ query }) {
savedData,
initialBrowsers,
searchQuery: query,
usage: browserslist.usage,
},
};
}

function getUsage(version) {
if (usage[version]?.toString(10) === "0") return "0%";
function getUsage(version, usage) {
const globalUsage = usage.global;

if (globalUsage[version]?.toString(10) === "0") return "0%";

return typeof usage[version] === "number"
? `${usage[version].toFixed(3)}%`
return typeof globalUsage[version] === "number"
? `${globalUsage[version].toFixed(3)}%`
: "N/A";
}

function getTooltipData(version) {
return typeof usage[version] === "number" ? `${usage[version]}%` : "N/A";
function getTooltipData(version, usage) {
return typeof usage.global[version] === "number"
? `🌐 ${usage.global[version]}%, 🇺🇸 ${usage.US[version]}%`
: "N/A";
}
39 changes: 24 additions & 15 deletions styles/main.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
.search {
padding: 16px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: sticky;
Expand Down Expand Up @@ -185,6 +186,10 @@
position: absolute;
right: 13px;
margin-top: 13px;

&:hover > span {
visibility: visible;
}
}

.queryComposition {
Expand Down Expand Up @@ -508,34 +513,34 @@
position: absolute;
display: inline-block;
border-radius: 8px;
left: -70px;
top: -56px;
right: 0;
top: -10px;
transform: translateX(-50%) translateY(10px);

&:hover > span {
display: block;
}
}

.stickyTooltip {
top: 30px;

svg {
transform: rotate(180deg);
margin-top: -8px;
}
bottom: -100px;
}

.tooltiptext {
width: 163px;
width: 250px;
color: #fff;
text-align: center;
padding: 16px 0 16px 7px;
padding: 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover > span {
visibility: visible;
background-color: black;
border: 1px solid rgba(255,255,255,0.2);
transform: translateX(-60%);
bottom: 0;
display: none;
}

.disclaimer {
Expand Down Expand Up @@ -587,3 +592,7 @@
}
}

.errorDetails {
color: #e75541;
text-align: left;
}
47 changes: 21 additions & 26 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1536,16 +1536,16 @@ browserslist@^4.12.0, browserslist@^4.8.5:
node-releases "^1.1.53"
pkg-up "^2.0.0"

browserslist@^4.16.6:
version "4.16.6"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
dependencies:
caniuse-lite "^1.0.30001219"
colorette "^1.2.2"
electron-to-chromium "^1.3.723"
browserslist@^4.20.2:
version "4.20.2"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
dependencies:
caniuse-lite "^1.0.30001317"
electron-to-chromium "^1.4.84"
escalade "^3.1.1"
node-releases "^1.1.71"
node-releases "^2.0.2"
picocolors "^1.0.0"

buffer-alloc-unsafe@^1.1.0:
version "1.1.0"
Expand Down Expand Up @@ -1633,10 +1633,10 @@ camelcase@^5.3.1:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001283:
version "1.0.30001310"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001310.tgz"
integrity sha512-cb9xTV8k9HTIUA3GnPUJCk0meUnrHL5gy5QePfDjxHyNBcnzPzrHFv5GqfP7ue5b1ZyzZL0RJboD6hQlPXjhjg==
caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001317:
version "1.0.30001325"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz#2b4ad19b77aa36f61f2eaf72e636d7481d55e606"
integrity sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ==

caw@^2.0.0, caw@^2.0.1:
version "2.0.1"
Expand Down Expand Up @@ -1772,11 +1772,6 @@ color-name@~1.1.4:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

colorette@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==

commander@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
Expand Down Expand Up @@ -2124,10 +2119,10 @@ electron-to-chromium@^1.3.413:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.474.tgz#161af012e11f96795eade84bf03b8ddc039621b9"
integrity sha512-fPkSgT9IBKmVJz02XioNsIpg0WYmkPrvU1lUJblMMJALxyE7/32NGvbJQKKxpNokozPvqfqkuUqVClYsvetcLw==

electron-to-chromium@^1.3.723:
version "1.3.776"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.776.tgz#33f6e2423b61f1bdaa8d2a103aae78a09764a75f"
integrity sha512-V0w7eFSBoFPpdw4xexjVPZ770UDZIevSwkkj4W97XbE3IsCsTRFpa7/yXGZ88EOQAUEA09JMMsWK0xsw0kRAYw==
electron-to-chromium@^1.4.84:
version "1.4.104"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.104.tgz#60973b0a7d398efa877196e8ccb0c93d48b918d8"
integrity sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ==

emoji-regex@^8.0.0:
version "8.0.0"
Expand Down Expand Up @@ -3438,10 +3433,10 @@ node-releases@^1.1.53:
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.58.tgz#8ee20eef30fa60e52755fcc0942def5a734fe935"
integrity sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==

node-releases@^1.1.71:
version "1.1.73"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
node-releases@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==

normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
version "2.5.0"
Expand Down

0 comments on commit a9702a3

Please sign in to comment.