@grafana/components 0.0.1

package/dist/esm/utils/formatters.js

@@ -0,0 +1,29 @@
+const formatNumber = (value, options = {}) => {
+  const { decimals = 2, compactThreshold = 1e3, precise = false } = options;
+  if (value === "loading") {
+    return "";
+  }
+  const num = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(num)) {
+    return "N/A";
+  }
+  const abs = Math.abs(num);
+  if (!precise && abs >= compactThreshold) {
+    const sign = num < 0 ? "-" : "";
+    const absNum = Math.abs(num);
+    if (absNum >= 1e9) {
+      return `${sign}${(absNum / 1e9).toFixed(1)}b`;
+    } else if (absNum >= 1e6) {
+      return `${sign}${(absNum / 1e6).toFixed(1)}m`;
+    } else if (absNum >= 1e3) {
+      return `${sign}${(absNum / 1e3).toFixed(1)}k`;
+    }
+  }
+  return num.toLocaleString("en-US", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  });
+};
+
+export { formatNumber };
+//# sourceMappingURL=formatters.js.map

package/dist/esm/utils/formatters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.js","sources":["../../../src/utils/formatters.ts"],"sourcesContent":["/**\n * Number formatting options\n */\nexport interface FormatNumberOptions {\n  /** Decimal places (default: 2) */\n  decimals?: number;\n  /** Threshold for compact formatting (default: 1000) */\n  compactThreshold?: number;\n  /** Never use compact formatting (for precise displays) */\n  precise?: boolean;\n}\n\n/**\n * Format numbers with optional compact notation (k, m, b)\n * Components handle their own prefixes/suffixes ($ or %)\n *\n * @param value - The number to format (or 'loading' state)\n * @param options - Formatting options\n * @returns Formatted number string (no prefixes/suffixes)\n *\n * @example\n * formatNumber(1234) // \"1.2k\"\n * formatNumber(1234, { precise: true }) // \"1,234.00\"\n * formatNumber(1234, { decimals: 0 }) // \"1k\"\n * formatNumber(999) // \"999.00\"\n */\nexport const formatNumber = (\n  value: number | string | 'loading',\n  options: FormatNumberOptions = {},\n): string => {\n  const { decimals = 2, compactThreshold = 1000, precise = false } = options;\n\n  if (value === 'loading') {\n    return '';\n  }\n\n  const num = typeof value === 'string' ? parseFloat(value) : value;\n  if (isNaN(num)) {\n    return 'N/A';\n  }\n\n  const abs = Math.abs(num);\n\n  // Use compact notation if above threshold and not precise\n  if (!precise && abs >= compactThreshold) {\n    const sign = num < 0 ? '-' : '';\n    const absNum = Math.abs(num);\n    // Always use 1 decimal place for compact notation for consistency\n    if (absNum >= 1000000000) {\n      return `${sign}${(absNum / 1000000000).toFixed(1)}b`;\n    } else if (absNum >= 1000000) {\n      return `${sign}${(absNum / 1000000).toFixed(1)}m`;\n    } else if (absNum >= 1000) {\n      return `${sign}${(absNum / 1000).toFixed(1)}k`;\n    }\n  }\n\n  // Standard formatting with specified decimal places\n  return num.toLocaleString('en-US', {\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n  });\n};\n"],"names":[],"mappings":"AA0BO,MAAM,YAAA,GAAe,CAC1B,KAAA,EACA,OAAA,GAA+B,EAAC,KACrB;AACX,EAAA,MAAM,EAAE,QAAA,GAAW,CAAA,EAAG,mBAAmB,GAAA,EAAM,OAAA,GAAU,OAAM,GAAI,OAAA;AAEnE,EAAA,IAAI,UAAU,SAAA,EAAW;AACvB,IAAA,OAAO,EAAA;AAAA,EACT;AAEA,EAAA,MAAM,MAAM,OAAO,KAAA,KAAU,QAAA,GAAW,UAAA,CAAW,KAAK,CAAA,GAAI,KAAA;AAC5D,EAAA,IAAI,KAAA,CAAM,GAAG,CAAA,EAAG;AACd,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,GAAA,GAAM,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA;AAGxB,EAAA,IAAI,CAAC,OAAA,IAAW,GAAA,IAAO,gBAAA,EAAkB;AACvC,IAAA,MAAM,IAAA,GAAO,GAAA,GAAM,CAAA,GAAI,GAAA,GAAM,EAAA;AAC7B,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA;AAE3B,IAAA,IAAI,UAAU,GAAA,EAAY;AACxB,MAAA,OAAO,GAAG,IAAI,CAAA,EAAA,CAAI,SAAS,GAAA,EAAY,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA,IACnD,CAAA,MAAA,IAAW,UAAU,GAAA,EAAS;AAC5B,MAAA,OAAO,GAAG,IAAI,CAAA,EAAA,CAAI,SAAS,GAAA,EAAS,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA,IAChD,CAAA,MAAA,IAAW,UAAU,GAAA,EAAM;AACzB,MAAA,OAAO,GAAG,IAAI,CAAA,EAAA,CAAI,SAAS,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA,IAC7C;AAAA,EACF;AAGA,EAAA,OAAO,GAAA,CAAI,eAAe,OAAA,EAAS;AAAA,IACjC,qBAAA,EAAuB,QAAA;AAAA,IACvB,qBAAA,EAAuB;AAAA,GACxB,CAAA;AACH;;;;"}

package/package.json

@@ -0,0 +1,118 @@
+{
+  "author": "Grafana Labs",
+  "name": "@grafana/components",
+  "license": "Apache-2.0",
+  "version": "0.0.1",
+  "description": "Product Design Engineering Components for Grafana",
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/grafana/components.git"
+  },
+  "keywords": [
+    "grafana",
+    "plugins",
+    "typescript"
+  ],
+  "type": "module",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/cjs/index.d.cts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./dist/css/*.css": {
+      "import": "./dist/css/*.css",
+      "require": "./dist/css/*.css"
+    }
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "lint": "eslint --ext .js,.ts src/",
+    "typecheck": "tsc --emitDeclarationOnly false --noEmit",
+    "clean": "rimraf ./dist ./compiled",
+    "build": "yarn clean && yarn build:ts && yarn build:js",
+    "build:ts": "tsc -p ./tsconfig.build.json",
+    "build:js": "rollup -c rollup.config.ts --configPlugin esbuild",
+    "build:publish": "yarn lint && yarn test && yarn build && npm publish",
+    "npm:publish": "npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=24.5.0",
+    "npm": "please-use-yarn",
+    "yarn": ">= 1.22.0"
+  },
+  "packageManager": "yarn@1.22.22",
+  "devDependencies": {
+    "@auto-it/omit-commits": "^11.3.0",
+    "@auto-it/released": "^11.3.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.37.0",
+    "@grafana/design-tokens": "^0.0.23",
+    "@grafana/eslint-config": "^9.0.0",
+    "@grafana/tsconfig": "^2.0.1",
+    "@rollup/plugin-commonjs": "^29",
+    "@rollup/plugin-eslint": "^9.2.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/react": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
+    "@stylistic/eslint-plugin-ts": "^4.4.1",
+    "@types/node": "^24.9.2",
+    "@types/react": "^18",
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.3",
+    "auto": "^11.3.0",
+    "esbuild": "^0.25.12",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsdoc": "^61.1.12",
+    "eslint-plugin-n": "^17.23.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "lint-staged": "^16.2.6",
+    "postcss": "^8.2.15",
+    "prettier": "^3.6.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.52.5",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "rollup-plugin-node-externals": "^8.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^10.0.8",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.1",
+    "vite": "^7.2.4"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.13.5",
+    "@floating-ui/react": "^0.27.16",
+    "@grafana/data": "^12.3.0",
+    "@grafana/ui": "^12.3.0",
+    "react-useportal": "^1.0.19"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}