react-battery-level 0.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 HyeonGyu OH
+
+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.

package/README.md

@@ -0,0 +1,84 @@
+# React Battery Level
+
+## Simple customizable battery component!
+
+## Features
+
+- **SVG-Based**: Crisp and clean rendering at any size or resolution.
+- **Dynamic Gauge**: Visual battery level represented by a customizable SVG fill.
+- **Charging State**: Optional SVG lightning bolt icon for charging indication.
+- **Customizable Appearance**: Configure the dimensions, color, and styles of the SVG elements.
+- **Percentage Display**: Option to display the battery percentage text within the SVG.
+
+<div align="center">
+  <img width="300px" src="/demo/demo1.gif">
+   <img width="300px" src="/demo/demo2.gif">
+    <img width="300px" src="/demo/demo3.gif">
+</div>
+
+## Installation
+
+```bash
+npm install react-battery-level --save
+```
+
+## Usage
+
+```jsx
+import { useState } from "react";
+import BatteryLevel from "./BatteryLevel";
+
+function App() {
+  const [gauge, setGauge] = useState(75);
+  return (
+    //Adjust only width to maintain aspect ratio.
+    <BatteryLevel
+      width="10vw"
+      gauge={gauge}
+      gaugeColor={gauge <= 20 ? "#FF5713" : "#6EF47A"}
+      isCharging={true}
+      isShowGaugePercentage={false}
+      lightningBoltStyles={{
+        fill: gauge <= 20 ? "#FF5713" : "#6EF47A",
+        stroke: "white",
+        strokeWidth: 0.5,
+      }}
+    />
+  );
+}
+export default App;
+```
+
+## Props
+
+| Prop                    | Type                 | Default     | Description                                            |
+| ----------------------- | -------------------- | ----------- | ------------------------------------------------------ |
+| `width`                 | `number` \| `string` | `"100%"`    | Optional. The width of the SVG battery icon.           |
+| `height`                | `number` \| `string` | `"auto"`    | Optional. The height of the SVG battery icon.          |
+| `gauge`                 | `number`             | None        | Required. The charge level of the battery (0-100).     |
+| `gaugeColor`            | `string`             | `"#6EF47A"` | Optional. The color of the battery fill.               |
+| `isCharging`            | `boolean`            | `false`     | Required. Indicates if the battery is charging.        |
+| `isShowGaugePercentage` | `boolean`            | `true`      | Optional. Shows the battery percentage inside the SVG. |
+| `lightningBoltStyles`   | `object`             | `{}`        | Optional. Styling for the SVG lightning bolt.          |
+| `gaugePercentageStyles` | `object`             | `{}`        | Optional. Styling for the battery percentage text.     |
+
+<br>
+
+### `lightningBoltStyles` Object
+
+| Key           | Type                 | Default   | Description                              |
+| ------------- | -------------------- | --------- | ---------------------------------------- |
+| `fill`        | `string`             | `"white"` | SVG fill color for the lightning bolt.   |
+| `stroke`      | `string`             | `"black"` | SVG stroke color for the lightning bolt. |
+| `strokeWidth` | `number` \| `string` | `0.5`     | SVG stroke width for the lightning bolt. |
+
+### `gaugePercentageStyles` Object
+
+| Key        | Type                 | Default   | Description                                |
+| ---------- | -------------------- | --------- | ------------------------------------------ |
+| `fontSize` | `number` \| `string` | `7`       | Font size for the battery percentage text. |
+| `color`    | `string`             | `"black"` | Color for the battery percentage text.     |
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+type Props = {
+    width?: number | string;
+    height?: number | string;
+    gauge: number;
+    gaugeColor?: string;
+    isCharging: boolean;
+    isShowGaugePercentage: boolean;
+    lightningBoltStyles?: {
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: string | number;
+    };
+    gaugePercentageStyles?: {
+        fontSize: string | number;
+        color: string;
+    };
+};
+declare const BatteryLevel: ({ gauge, width, height, isCharging, isShowGaugePercentage, gaugeColor, lightningBoltStyles, gaugePercentageStyles, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BatteryLevel;

package/dist/index.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BatteryLevel = function (_a) {
+    var gauge = _a.gauge, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "100%" : _c, _d = _a.isCharging, isCharging = _d === void 0 ? false : _d, _e = _a.isShowGaugePercentage, isShowGaugePercentage = _e === void 0 ? true : _e, _f = _a.gaugeColor, gaugeColor = _f === void 0 ? "#6EF47A" : _f, _g = _a.lightningBoltStyles, lightningBoltStyles = _g === void 0 ? {
+        fill: "white",
+        stroke: "black",
+        strokeWidth: 0.5,
+    } : _g, _h = _a.gaugePercentageStyles, gaugePercentageStyles = _h === void 0 ? {
+        fontSize: 7,
+        color: "black",
+    } : _h;
+    var maxGaugeWidth = 73;
+    var batteryHeight = 73;
+    var gaugeWidth = gauge * (maxGaugeWidth / 100);
+    return (_jsxs("svg", __assign({ width: width, height: height, viewBox: "0 0 45 23", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M44.2102 11.4C44.2102 9.96999 43.2702 8.76999 41.9702 8.35999V14.43C43.2702 14.02 44.2102 12.82 44.2102 11.39V11.4Z", fill: "black" }), _jsx("path", { d: "M41.9702 14.93C41.8702 14.93 41.7602 14.9 41.6702 14.83C41.5402 14.74 41.4702 14.59 41.4702 14.43V8.35999C41.4702 8.19999 41.5502 8.04999 41.6702 7.95999C41.8002 7.86999 41.9702 7.83999 42.1202 7.88999C43.6702 8.37999 44.7102 9.78999 44.7102 11.4C44.7102 13.01 43.6702 14.42 42.1202 14.91C42.0702 14.93 42.0202 14.93 41.9702 14.93ZM42.4702 9.13999V13.65C43.2302 13.16 43.7102 12.32 43.7102 11.39C43.7102 10.46 43.2302 9.61999 42.4702 9.12999V9.13999Z", fill: "black" }), _jsx("path", { d: "M33.5 22.74H7.60995C3.94995 22.74 0.959961 19.76 0.959961 16.09V6.7C0.959961 3.04 3.93995 0.0500031 7.60995 0.0500031H33.5C37.16 0.0500031 40.1499 3.03 40.1499 6.7V16.09C40.1499 19.75 37.17 22.74 33.5 22.74ZM7.60995 2.56C5.31995 2.56 3.45996 4.42 3.45996 6.71V16.1C3.45996 18.39 5.31995 20.25 7.60995 20.25H33.5C35.79 20.25 37.6499 18.39 37.6499 16.1V6.71C37.6499 4.42 35.79 2.56 33.5 2.56H7.60995Z", fill: "black" }), _jsx("rect", { id: "4", x: "4.1", y: "3", width: gaugeWidth + "%", height: batteryHeight + "%", rx: "3", ry: "3", fill: gaugeColor }), isShowGaugePercentage && (_jsxs("text", __assign({ x: "20", y: "11", fontSize: gaugePercentageStyles.fontSize, color: gaugePercentageStyles.color, textAnchor: "middle", alignmentBaseline: "central", fill: "black" }, { children: [gauge, "%"] }))), isCharging && (_jsx("path", { d: "M27.6495 12.15L18.7595 7.23C18.7595 7.23 18.6696 7.21 18.6396 7.23C18.5996 7.25 18.5796 7.29 18.5796 7.34V10.3H11.5996C11.5396 10.3 11.4896 10.34 11.4796 10.39C11.4696 10.44 11.4895 10.5 11.5395 10.53L20.4295 15.45C20.4295 15.45 20.4696 15.47 20.4896 15.47C20.5096 15.47 20.5296 15.47 20.5496 15.45C20.5896 15.43 20.6096 15.39 20.6096 15.34V12.38H27.5896C27.6496 12.38 27.6995 12.34 27.7095 12.29C27.7195 12.24 27.6995 12.18 27.6495 12.15Z", fill: lightningBoltStyles.fill, stroke: lightningBoltStyles.stroke, strokeWidth: lightningBoltStyles.strokeWidth }))] })));
+};
+export default BatteryLevel;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "react-battery-level",
+  "version": "0.1.3",
+  "private": false,
+  "description": "Simple customizable react battery component",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rbrbrb7290/react-battery-level"
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.86",
+    "@types/react": "^18.2.63",
+    "@types/react-dom": "^18.2.20",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "battery",
+    "battery svg",
+    "battery indicator",
+    "battery level"
+  ],
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "build:npm": "tsc -p tsconfig.json"
+  },
+  "files": [
+    "dist",
+    "demo/*.gif"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}