diff --git a/README.md b/README.md index 029c2873b..26b35a658 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,12 @@ scaleway-lib is a set of NPM packages used at Scaleway. ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/jest-helpers) ![npm](https://img.shields.io/npm/v/@scaleway/jest-helpers) +- [`@scaleway/outdated-browser`](./packages/outdated-browser/README.md): A small web script to display outdated banne + + ![npm](https://img.shields.io/npm/dm/@scaleway/outdated-browser) + ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/outdated-browser) + ![npm](https://img.shields.io/npm/v/@scaleway/outdated-browser) + ## Development ### Locally diff --git a/packages/outdated-browser/.npmignore b/packages/outdated-browser/.npmignore new file mode 100644 index 000000000..d1811b877 --- /dev/null +++ b/packages/outdated-browser/.npmignore @@ -0,0 +1,3 @@ +**/__tests__/** +src +!.npmignore diff --git a/packages/outdated-browser/README.md b/packages/outdated-browser/README.md new file mode 100644 index 000000000..45cd113f3 --- /dev/null +++ b/packages/outdated-browser/README.md @@ -0,0 +1,40 @@ +# `@scaleway/outdated-browser` + +A small web script to display outdated banner + +--- + +## Install + +```bash +$ pnpm add @scaleway/outdated-browser +``` + +## Usage + +This package is intended to be used in tandem with a bundler +Only one parameter is required, a regex of accepted browser user agents + +Example with webpack: +```js +import { getUserAgentRegExp } from 'browserslist-useragent-regexp' + +const SUPPORTED_BROWSERS = getUserAgentRegExp({ + browsers: '> 1%, last 2 versions, Firefox ESR, not IE > 0, not IE_Mob > 0', + allowHigherVersions: true, + ignoreMinor: true, + ignorePatch: true, +}).toString() + +export default { + entry: { + outdated: '@scaleway/outdated-browser', + main: './src/index.tsx', + }, + plugins: [ + new webpack.DefinePlugin({ + SUPPORTED_BROWSERS, + }), + ], +} +``` diff --git a/packages/outdated-browser/package.json b/packages/outdated-browser/package.json new file mode 100644 index 000000000..dd1617966 --- /dev/null +++ b/packages/outdated-browser/package.json @@ -0,0 +1,21 @@ +{ + "name": "@scaleway/outdated-browser", + "version": "1.0.0", + "description": "A small web script to display outdated banner", + "type": "module", + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "browser": { + "dist/index.js": "./dist/index.browser.js" + }, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/scaleway/scaleway-lib", + "directory": "packages/outdated-browser" + }, + "license": "MIT" +} diff --git a/packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap b/packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap new file mode 100644 index 000000000..2fd07d13e --- /dev/null +++ b/packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap @@ -0,0 +1,68 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@outdated-browser render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen 1`] = ` +"
+ + + + + + +
We are sorry, this app can not be run with an old version of web browser.
+

+ Please update your browser to a more recent version. +

The Scaleway Team

+ Update my browser now + +
" +`; + +exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is defined and match userAgent 1`] = `""`; + +exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is nil 1`] = `""`; diff --git a/packages/outdated-browser/src/__tests__/index.ts b/packages/outdated-browser/src/__tests__/index.ts new file mode 100644 index 000000000..1d358d701 --- /dev/null +++ b/packages/outdated-browser/src/__tests__/index.ts @@ -0,0 +1,51 @@ +/** + * @jest-environment jsdom + */ + +describe('@outdated-browser', () => { + const originUA = global.navigator.userAgent + let fakeUA: string | undefined + + beforeAll(() => { + Object.defineProperty(global.navigator, 'userAgent', { + get() { + return fakeUA ?? originUA + }, + }) + }) + + afterEach(() => { + jest.resetModules() + jest.restoreAllMocks() + fakeUA = undefined + }) + + test('render nothing if SUPPORTED_BROWSER is nil', () => { + // @ts-expect-error global mock + global.SUPPORTED_BROWSERS = '' + + return import('..').then(() => { + expect(document.documentElement.innerHTML).toMatchSnapshot() + }) + }) + + test('render nothing if SUPPORTED_BROWSER is defined and match userAgent ', () => { + fakeUA = 'a' + // @ts-expect-error global mock + global.SUPPORTED_BROWSERS = 'a' + + return import('..').then(() => { + expect(document.documentElement.innerHTML).toMatchSnapshot() + }) + }) + + test('render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen ', () => { + fakeUA = 'b' + // @ts-expect-error global mock + global.SUPPORTED_BROWSERS = 'a' + + return import('..').then(() => { + expect(document.documentElement.innerHTML).toMatchSnapshot() + }) + }) +}) diff --git a/packages/outdated-browser/src/index.ts b/packages/outdated-browser/src/index.ts new file mode 100644 index 000000000..455e4ac8e --- /dev/null +++ b/packages/outdated-browser/src/index.ts @@ -0,0 +1,80 @@ +const content = ` + + + + + + +
We are sorry, this app can not be run with an old version of web browser.
+

+ Please update your browser to a more recent version. +

The Scaleway Team

+ Update my browser now + +` + +const style = ` + #outdated { + position: fixed; + z-index: 9999; + width: 100%; + display: flex; + gap: 16px; + background: rgba(242, 86, 72, 0.95); + flex-direction: column; + align-items: center; + text-align: center; + padding: 16px; + color: white; + font-family: 'Open Sans', 'Segoe UI', sans-serif; + } + + #outdated svg { + max-width: 300px; + } + + #outdated a { + color: white; + border: 1px solid white; + border-radius: 4px; + background: transparent; + padding: 10px 20px; + text-decoration: none; + text-transform: uppercase; + transition: all .3s ease-in; + } + + #outdated a:hover { + color: rgb(242, 86, 72); + background: white; + } + + #outdated button { + color: white; + background: transparent; + font-size: 32px; + position: absolute; + border: 0; + right: 60px; + top: 10px; + cursor: pointer; + } +` + +declare const SUPPORTED_BROWSERS: string + +if ( + SUPPORTED_BROWSERS && + !new RegExp(SUPPORTED_BROWSERS).test(navigator.userAgent) +) { + const styleElement = document.createElement('style') + styleElement.innerHTML = style + document.head.append(styleElement) + + const element = document.createElement('div') + element.setAttribute('id', 'outdated') + element.innerHTML = content + document.body.prepend(element) +} + +export {}