react-battery-level 1.0.1 → 1.0.3

package/README.md

@@ -2,83 +2,87 @@
 
 ## 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.
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+- [License](#license)
+
+### Features
 
 <div align="center">
-  <img width="300px" src="/demo/demo1.gif">
-   <img width="300px" src="/demo/demo2.gif">
-    <img width="300px" src="/demo/demo3.gif">
+  <img width="300px" src="/demo/demo.gif">
 </div>
 
-## Installation
+### Installation
 
 ```bash
-npm install react-battery-level --save
+npm i react-battery-level
 ```
 
-## Usage
+### Usage
 
 ```jsx
-import { useState } from "react";
-import BatteryLevel from "react-battery-level";
+import BatteryLevel from 'react-battery-level';
 
 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,
+      width="250"
+      gauge={75}
+      isCharging
+      borderStyles={{
+        color: '#000',
       }}
     />
   );
 }
+
 export default App;
 ```
 
 ## Props
 
-| Prop                    | Type                 | Default     | Description                                            |
-| ----------------------- | -------------------- | ----------- | ------------------------------------------------------ |
-| `width`                 | `number` \| `string` | `"100%"`    | Optional. The width of the SVG battery icon.           |
-| `height`                | `number` \| `string` | `"100%"`    | 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
+`BatteryLevel` 컴포넌트는 다음과 같은 props를 받습니다:
+
+| Prop               | Type                 | Default     | Description                                            |
+| ------------------ | -------------------- | ----------- | ------------------------------------------------------ |
+| `width`            | `number` \| `string` | `"150"`     | Optional. The width of the battery icon.               |
+| `height`           | `number` \| `string` | `"100%"`    | Optional. The height of the battery icon.              |
+| `gauge`            | `number`             | None        | Required. The charge level of the battery (0-100).     |
+| `gaugeColor`       | `string`             | `"#34C759"` | Optional. The color of the battery fill.               |
+| `isCharging`       | `boolean`            | `false`     | Optional. Indicates if the battery is charging.        |
+| `showPercentage`   | `boolean`            | `false`     | Optional. Shows the battery percentage inside the SVG. |
+| `borderStyles`     | `object`             | `{}`        | Optional. Styling for the border.                      |
+| `lightningStyles`  | `object`             | `{}`        | Optional. Styling for the lightning bolt.              |
+| `percentageStyles` | `object`             | `{}`        | Optional. Styling for the battery percentage text.     |
+
+### `borderStyles` Object
+
+| Key           | Type     | Default   | Description                          |
+| ------------- | -------- | --------- | ------------------------------------ |
+| `color`       | `string` | `"black"` | Stroke color for the battery border. |
+| `strokeWidth` | `number` | `1`       | Stroke width for the battery border. |
+| `radius`      | `number` | `5`       | Border radius for the battery.       |
+
+### `lightningStyles` Object
+
+| Key           | Type     | Default                    | Description                                  |
+| ------------- | -------- | -------------------------- | -------------------------------------------- |
+| `fill`        | `string` | `"yellow"`                 | Fill color for the lightning bolt.           |
+| `stroke`      | `string` | `none`                     | Stroke color for the lightning bolt.         |
+| `strokeWidth` | `number` | `0.5`                      | Stroke width for the lightning bolt.         |
+| `position`    | `object` | `{ x: 15, y: -1 }`         | Position of the lightning bolt.              |
+| `transform`   | `object` | `{ scale: 1, rotate: 10 }` | Transform properties for the lightning bolt. |
+
+### `percentageStyles` Object
+
+| Key        | Type     | Default   | Description                                |
+| ---------- | -------- | --------- | ------------------------------------------ |
+| `fontSize` | `number` | `8`       | Font size for the battery percentage text. |
+| `color`    | `string` | `"black"` | Color for the battery percentage text.     |
+
+### License
 
 MIT

package/dist/index.d.ts

@@ -1,19 +1,3 @@
-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;
+import { BatteryProps } from './types';
+declare const BatteryLevel: ({ width, height, gauge, gaugeColor, isCharging, lightningStyles, showPercentage, percentageStyles, borderStyles, }: BatteryProps) => import("react/jsx-runtime").JSX.Element;
 export default BatteryLevel;

package/dist/index.js

@@ -1,112 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var __assign =
-  (this && this.__assign) ||
-  function () {
-    __assign =
-      Object.assign ||
-      function (t) {
+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];
+            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,
-            }),
-        ],
-      }
-    )
-  );
+    var _b = _a.width, width = _b === void 0 ? '150' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, gauge = _a.gauge, _d = _a.gaugeColor, gaugeColor = _d === void 0 ? '#34C759' : _d, _e = _a.isCharging, isCharging = _e === void 0 ? false : _e, _f = _a.lightningStyles, lightningStyles = _f === void 0 ? {} : _f, _g = _a.showPercentage, showPercentage = _g === void 0 ? false : _g, _h = _a.percentageStyles, percentageStyles = _h === void 0 ? {} : _h, _j = _a.borderStyles, borderStyles = _j === void 0 ? {} : _j;
+    var BATTERY_WIDTH = 42;
+    var BATTERY_HEIGHT = 22;
+    var BATTERY_X = 1;
+    var BATTERY_Y = 1;
+    var PADDING = 2;
+    var GAUGE_MAX_WIDTH = BATTERY_WIDTH - PADDING * 2;
+    var defaultBorderStyles = {
+        color: 'black',
+        strokeWidth: 1,
+        radius: 5,
+    };
+    var defaultLightningStyles = {
+        fill: 'yellow',
+        stroke: 'none',
+        strokeWidth: 0.5,
+        position: { x: 15, y: -1 },
+        transform: { scale: 1, rotate: 10 },
+    };
+    var defaultPercentageStyles = {
+        fontSize: 8,
+        color: 'black',
+    };
+    var appliedBorderStyles = __assign(__assign({}, defaultBorderStyles), borderStyles);
+    var appliedLightningStyles = __assign(__assign(__assign({}, defaultLightningStyles), lightningStyles), { position: __assign(__assign({}, defaultLightningStyles.position), lightningStyles.position), transform: __assign(__assign({}, defaultLightningStyles.transform), lightningStyles.transform) });
+    var appliedPercentageStyles = __assign(__assign({}, defaultPercentageStyles), percentageStyles);
+    return (_jsxs("svg", __assign({ width: width, height: height, viewBox: "0 0 50 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { x: "1", y: "1", width: BATTERY_WIDTH, height: BATTERY_HEIGHT, rx: appliedBorderStyles.radius, stroke: appliedBorderStyles.color, strokeWidth: appliedBorderStyles.strokeWidth }), _jsx("path", { d: "M44.6 8V16C46.2094 15.32244 47.256 13.74626 47.256 12C47.256 10.25374 46.2094 8.67756 44.6 8Z", fill: appliedBorderStyles.color, fillOpacity: "1" }), _jsx("rect", { x: BATTERY_X + PADDING, y: BATTERY_Y + PADDING, width: GAUGE_MAX_WIDTH * (gauge / 100), height: "18", rx: "3", fill: gaugeColor }), showPercentage && (_jsxs("text", __assign({ x: BATTERY_X + 22, y: BATTERY_Y + 11, fontSize: appliedPercentageStyles.fontSize, color: appliedPercentageStyles.color, textAnchor: "middle", alignmentBaseline: "central", fill: "black" }, { children: [gauge, "%"] }))), isCharging && (_jsx("g", __assign({ transform: "\n              translate(".concat(appliedLightningStyles.position.x, ", ").concat(appliedLightningStyles.position.y, ") \n              scale(").concat(appliedLightningStyles.transform.scale, ") \n              rotate(").concat(appliedLightningStyles.transform.rotate, ")\n            ") }, { children: _jsx("path", { d: "M12 0L4 12H10L5 24L16 10H9L12 0Z", fill: appliedLightningStyles.fill, stroke: appliedLightningStyles.stroke, strokeWidth: appliedLightningStyles.strokeWidth }) })))] })));
 };
 export default BatteryLevel;

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+export type BatteryProps = {
+    width?: number | string;
+    height?: number | string;
+    gauge: number;
+    gaugeColor?: string;
+    isCharging?: boolean;
+    lightningStyles?: {
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+        position?: {
+            x?: number;
+            y?: number;
+        };
+        transform?: {
+            scale?: number;
+            rotate?: number;
+        };
+    };
+    showPercentage?: boolean;
+    percentageStyles?: {
+        fontSize?: number;
+        color?: string;
+    };
+    borderStyles?: {
+        color?: string;
+        strokeWidth?: number;
+        radius?: number;
+    };
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-battery-level",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "private": false,
   "description": "Simple customizable react battery component",
   "main": "dist/index.js",
@@ -26,10 +26,12 @@
   "license": "MIT",
   "keywords": [
     "battery",
-    "gauge",
-    "battery svg",
     "battery indicator",
-    "battery level"
+    "battery level",
+    "react battery",
+    "react battery level",
+    "react battery gauge",
+    "react battery indicator"
   ],
   "scripts": {
     "start": "react-scripts start",