feat: react internet notifier feature

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,30 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+/dist
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*storybook.log
+
+# files
+audit.json
+performance.html

.husky/pre-commit

@@ -0,0 +1 @@
+yarn run pre:commit

.husky/pre-push

@@ -0,0 +1 @@
+yarn run pre:push

.nvmrc

@@ -0,0 +1 @@
+20

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 120
+}

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 emmanuelonah
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,62 @@
+# ReactInternetNotifier
+
+A lightweight React package for real-time internet connectivity notifications.
+
+## Installation
+
+```bash
+npm install react-internet-notifier
+# or
+yarn add react-internet-notifier
+```
+
+## Quick Start
+
+```ts
+import React from 'react';
+import { ReactInternetNotifier } from "react-internet-notifier";
+
+function App() {
+  return (
+    <div>
+      <ReactInternetNotifier />
+      {/* Your app components */}
+    </div>
+  );
+}
+```
+
+## Features
+
+* 🌐 Real-time internet connection monitoring
+* 🔔 Non-intrusive pop-up notifications
+* 🚀 Easy one-line integration
+* 🌍 Cross-browser compatibility
+
+## Props
+
+| Prop     | Type                                                   | Default  | Description                                                      |
+|----------|--------------------------------------------------------|----------|------------------------------------------------------------------|
+| duration | number                                                 | 10000    | Duration (in milliseconds) for which the notification is displayed. It's an optional prop. |
+| position | "top" \| "bottom" \| "top-center" \| "bottom-center"   | "bottom" | Position of the notification on the screen. It's an optional prop.                      |
+
+## Example with Props
+
+```ts
+<ReactInternetNotifier duration={3000} position="top-right" />
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create feature branch (git checkout -b feature/amazing-feature)
+3. Commit changes (git commit -m 'Add amazing feature')
+4. Push to branch (git push origin feature/amazing-feature)
+5. Open Pull Request
+
+## Preview
+
+<img src="./src/assets/icn-desktop-offline.png" alt="">
+<img src="./src/assets/icn-desktop-online.png" alt="">
+<img src="./src/assets/icn-mobile-offline.png" alt="">
+<img src="./src/assets/icn-mobile-online.png" alt="">

eslint.config.mjs

@@ -0,0 +1,71 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    ignores: [
+      '**/dist/*',
+      '**/tests/*',
+      'tsconfig.json',
+      '**/node_modules/*',
+      '**/coverage/*',
+      '**/*.svg.tsx',
+      'tsdx.config.js',
+    ],
+  },
+  { settings: { react: { version: 'detect' } } },
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    plugins: {
+      'react-hooks': pluginReactHooks,
+    },
+    rules: {
+      semi: 'off',
+      eqeqeq: 'off',
+      'max-len': ['error', { code: 120 }],
+      'no-empty': 'error',
+      'no-undef': 'off',
+      'no-redeclare': 'off',
+      'valid-typeof': 'off',
+      'getter-return': 'off',
+      'no-cond-assign': 'off',
+      'no-fallthrough': 'off',
+      'no-func-assign': 'off',
+      'react/prop-types': 'off',
+      'no-sparse-arrays': 'off',
+      'no-useless-escape': 'off',
+      'no-control-regex': 'off',
+      'no-unsafe-finally': 'off',
+      'react/display-name': 'off',
+      'no-case-declarations': 'off',
+      'no-prototype-builtins': 'off',
+      'no-async-promise-executor': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'no-constant-binary-expression': 'off',
+      'no-misleading-character-class': 'off',
+      'react-hooks/exhaustive-deps': 'error',
+      '@typescript-eslint/no-this-alias': 'off',
+      '@typescript-eslint/no-namespace': 'off',
+      'import/no-anonymous-default-export': 'off',
+      '@typescript-eslint/no-unused-expressions': 'error',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+];

package.json

@@ -0,0 +1,102 @@
+{
+  "name": "react-internet-notifier",
+  "version": "1.0.0",
+  "author": "emmanuelonah",
+  "module": "dist/react-internet-notifier.esm.js",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "eslint .",
+    "sb": "storybook dev -p 6006",
+    "b:sb": "storybook build",
+    "test:cv": "yarn run test --coverage --watchAll=false",
+    "pkgs:audit": " yarn audit --json > audit.json",
+    "pre:commit": "yarn run lint",
+    "pre:push": "yarn run test:cv && yarn run build",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "release:major": "npm version major && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:patch": "npm version patch && npm publish",
+    "prepare": "husky && tsdx build"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "size-limit": [
+    {
+      "path": "dist/react-internet-notifier.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/react-internet-notifier.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.3",
+    "@eslint/js": "^9.18.0",
+    "@size-limit/preset-small-lib": "^11.1.6",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.2",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-storybook": "^0.11.2",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "postcss": "^8.4.49",
+    "prettier": "3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^11.1.6",
+    "storybook": "^8.4.7",
+    "ts-jest": "^29.2.5",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.8.1",
+    "typescript": "~4.6.4",
+    "typescript-eslint": "^8.19.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.styles\\.css$": "identity-obj-proxy"
+    },
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testEnvironment": "jsdom"
+  }
+}

src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './portal/index.component';
+export * from './modal/index.component';

src/components/modal/icon-cancel.svg.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export function IconCancel() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24" width="24px" height="24px">
+      <path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 8.7070312 7.2929688 L 7.2929688 8.7070312 L 10.585938 12 L 7.2929688 15.292969 L 8.7070312 16.707031 L 12 13.414062 L 15.292969 16.707031 L 16.707031 15.292969 L 13.414062 12 L 16.707031 8.7070312 L 15.292969 7.2929688 L 12 10.585938 L 8.7070312 7.2929688 z" />
+    </svg>
+  );
+}