@canonical/react-components 3.9.1 → 3.11.0

package/dist/esm/components/PrefixedIpInput/utils.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Checks if a given IP address is a valid IPv4 address.
+ * @param ip The IP address to check
+ * @returns True if the IP is a valid IPv4 address, false otherwise
+ */
+export declare const isIPv4: (ip: string) => boolean;
+/**
+ * Takes a subnet CIDR notation (IPv4) and returns the first and last IP of the subnet.
+ * The network and host addresses are excluded.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The first and last valid IP addresses as two strings in a list.
+ */
+export declare const getIpRangeFromCidr: (cidr: string) => string[];
+export declare const getFirstValidIp: (ip: string) => string;
+export declare const convertIpToUint32: (ip: string) => number;
+/**
+ * Checks if an IPv4 address is valid for the given subnet.
+ *
+ * @param ip The IPv4 address to check, as a string
+ * @param cidr The subnet's CIDR notation e.g. 192.168.0.0/24
+ * @returns True if the IP is in the subnet, false otherwise
+ */
+export declare const isIpInSubnet: (ip: string, cidr: string) => boolean;
+/**
+ * Separates the immutable and editable octets of an IPv4 subnet range.
+ *
+ * @param startIp The start IP of the subnet
+ * @param endIp The end IP of the subnet
+ * @returns The immutable and editable octects as two strings in a list
+ */
+export declare const getImmutableAndEditableOctets: (startIp: string, endIp: string) => string[];
+/**
+ * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable  as two strings in a list
+ */
+export declare const getImmutableAndEditable: (cidr: string) => string[];

package/dist/esm/components/PrefixedIpInput/utils.js

@@ -0,0 +1,112 @@
+/**
+ * Checks if a given IP address is a valid IPv4 address.
+ * @param ip The IP address to check
+ * @returns True if the IP is a valid IPv4 address, false otherwise
+ */
+export var isIPv4 = ip => {
+  var ipv4Regex = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
+  return ipv4Regex.test(ip);
+};
+
+/**
+ * Takes a subnet CIDR notation (IPv4) and returns the first and last IP of the subnet.
+ * The network and host addresses are excluded.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The first and last valid IP addresses as two strings in a list.
+ */
+export var getIpRangeFromCidr = cidr => {
+  // https://gist.github.com/binarymax/6114792
+
+  // Get start IP and number of valid addresses
+  var [startIp, mask] = cidr.split("/");
+  var numberOfAddresses = (1 << 32 - parseInt(mask)) - 1;
+
+  // IPv4 can be represented by an unsigned 32-bit integer, so we can use a Uint32Array to store the IP
+  var buffer = new ArrayBuffer(4); //4 octets
+  var int32 = new Uint32Array(buffer);
+
+  // Convert starting IP to Uint32 and add the number of addresses to get the end IP.
+  // Subtract 1 from the number of addresses to exclude the broadcast address.
+  int32[0] = convertIpToUint32(startIp) + numberOfAddresses - 1;
+
+  // Convert the buffer to a Uint8Array to get the octets, then convert it to an array
+  var arrayApplyBuffer = Array.from(new Uint8Array(buffer));
+
+  // Reverse the octets and join them with "." to get the end IP
+  var endIp = arrayApplyBuffer.reverse().join(".");
+  var firstValidIp = getFirstValidIp(startIp);
+  return [firstValidIp, endIp];
+};
+export var getFirstValidIp = ip => {
+  var buffer = new ArrayBuffer(4); //4 octets
+  var int32 = new Uint32Array(buffer);
+
+  // add 1 because the first IP is the network address
+  int32[0] = convertIpToUint32(ip) + 1;
+  var arrayApplyBuffer = Array.from(new Uint8Array(buffer));
+  return arrayApplyBuffer.reverse().join(".");
+};
+export var convertIpToUint32 = ip => {
+  var octets = ip.split(".").map(a => parseInt(a));
+  var buffer = new ArrayBuffer(4);
+  var int32 = new Uint32Array(buffer);
+  int32[0] = (octets[0] << 24) + (octets[1] << 16) + (octets[2] << 8) + octets[3];
+  return int32[0];
+};
+
+/**
+ * Checks if an IPv4 address is valid for the given subnet.
+ *
+ * @param ip The IPv4 address to check, as a string
+ * @param cidr The subnet's CIDR notation e.g. 192.168.0.0/24
+ * @returns True if the IP is in the subnet, false otherwise
+ */
+export var isIpInSubnet = (ip, cidr) => {
+  var [startIP, endIP] = getIpRangeFromCidr(cidr);
+  var ipUint32 = convertIpToUint32(ip);
+  var startIPUint32 = convertIpToUint32(startIP);
+  var endIPUint32 = convertIpToUint32(endIP);
+  return ipUint32 >= startIPUint32 && ipUint32 <= endIPUint32;
+};
+
+/**
+ * Separates the immutable and editable octets of an IPv4 subnet range.
+ *
+ * @param startIp The start IP of the subnet
+ * @param endIp The end IP of the subnet
+ * @returns The immutable and editable octects as two strings in a list
+ */
+export var getImmutableAndEditableOctets = (startIp, endIp) => {
+  var startIpOctetList = startIp.split(".");
+  var endIpOctetList = endIp.split(".");
+  var immutable = [];
+  var editable = [];
+  startIpOctetList.forEach((octet, index) => {
+    if (octet === endIpOctetList[index]) {
+      immutable.push(octet);
+    } else {
+      editable.push("[".concat(octet, "-").concat(endIpOctetList[index], "]"));
+    }
+  });
+  return [immutable.join("."), editable.join(".")];
+};
+
+/**
+ * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable  as two strings in a list
+ */
+export var getImmutableAndEditable = cidr => {
+  var isIPV4 = isIPv4(cidr.split("/")[0]);
+  if (isIPV4) {
+    var [startIp, endIp] = getIpRangeFromCidr(cidr);
+    return getImmutableAndEditableOctets(startIp, endIp);
+  }
+  var [networkAddress] = cidr.split("/");
+  var immutableIPV6 = networkAddress.substring(0, networkAddress.lastIndexOf(":"));
+  var ipv6PlaceholderColons = 7 - (immutableIPV6.match(/:/g) || []).length; // 7 is the maximum number of colons in an IPv6 address
+  var editableIPV6 = "".concat("0000:".repeat(ipv6PlaceholderColons), "0000");
+  return [immutableIPV6, editableIPV6];
+};

package/dist/esm/components/PrefixedIpInput/utils.test.d.ts

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

package/dist/esm/index.d.ts

@@ -43,6 +43,8 @@ export { default as LoginPageLayout } from "./components/LoginPageLayout";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
+export { default as PrefixedInput } from "./components/PrefixedInput";
+export { default as PrefixedIpInput, isIPv4, getIpRangeFromCidr, getFirstValidIp, convertIpToUint32, isIpInSubnet, getImmutableAndEditableOctets, getImmutableAndEditable, } from "./components/PrefixedIpInput";
 export { default as RadioInput } from "./components/RadioInput";
 export { default as Row } from "./components/Row";
 export { default as ScrollableContainer } from "./components/ScrollableContainer";
@@ -118,6 +120,8 @@ export type { NotificationAction, NotificationType, QueuedNotification, Notifica
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
 export type { PaginationProps } from "./components/Pagination";
 export type { PanelProps } from "./components/Panel";
+export type { PrefixedInputProps } from "./components/PrefixedInput";
+export type { PrefixedIpInputProps } from "./components/PrefixedIpInput";
 export type { RadioInputProps } from "./components/RadioInput";
 export type { RowProps } from "./components/Row";
 export type { ScrollableTableProps } from "./components/ScrollableTable";

package/dist/esm/index.js

@@ -43,6 +43,8 @@ export { default as LoginPageLayout } from "./components/LoginPageLayout";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
+export { default as PrefixedInput } from "./components/PrefixedInput";
+export { default as PrefixedIpInput, isIPv4, getIpRangeFromCidr, getFirstValidIp, convertIpToUint32, isIpInSubnet, getImmutableAndEditableOctets, getImmutableAndEditable } from "./components/PrefixedIpInput";
 export { default as RadioInput } from "./components/RadioInput";
 export { default as Row } from "./components/Row";
 export { default as ScrollableContainer } from "./components/ScrollableContainer";

package/dist/index.d.ts

@@ -43,6 +43,8 @@ export { default as LoginPageLayout } from "./components/LoginPageLayout";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
+export { default as PrefixedInput } from "./components/PrefixedInput";
+export { default as PrefixedIpInput, isIPv4, getIpRangeFromCidr, getFirstValidIp, convertIpToUint32, isIpInSubnet, getImmutableAndEditableOctets, getImmutableAndEditable, } from "./components/PrefixedIpInput";
 export { default as RadioInput } from "./components/RadioInput";
 export { default as Row } from "./components/Row";
 export { default as ScrollableContainer } from "./components/ScrollableContainer";
@@ -118,6 +120,8 @@ export type { NotificationAction, NotificationType, QueuedNotification, Notifica
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
 export type { PaginationProps } from "./components/Pagination";
 export type { PanelProps } from "./components/Panel";
+export type { PrefixedInputProps } from "./components/PrefixedInput";
+export type { PrefixedIpInputProps } from "./components/PrefixedIpInput";
 export type { RadioInputProps } from "./components/RadioInput";
 export type { RowProps } from "./components/Row";
 export type { ScrollableTableProps } from "./components/ScrollableTable";

package/dist/index.js

@@ -64,6 +64,15 @@ var _exportNames = {
   Pagination: true,
   Panel: true,
   PasswordToggle: true,
+  PrefixedInput: true,
+  PrefixedIpInput: true,
+  isIPv4: true,
+  getIpRangeFromCidr: true,
+  getFirstValidIp: true,
+  convertIpToUint32: true,
+  isIpInSubnet: true,
+  getImmutableAndEditableOctets: true,
+  getImmutableAndEditable: true,
   RadioInput: true,
   Row: true,
   ScrollableContainer: true,
@@ -419,6 +428,18 @@ Object.defineProperty(exports, "PasswordToggle", {
     return _PasswordToggle.default;
   }
 });
+Object.defineProperty(exports, "PrefixedInput", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedInput.default;
+  }
+});
+Object.defineProperty(exports, "PrefixedIpInput", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.default;
+  }
+});
 Object.defineProperty(exports, "RadioInput", {
   enumerable: true,
   get: function () {
@@ -641,6 +662,12 @@ Object.defineProperty(exports, "applyTheme", {
     return _ThemeSwitcher.applyTheme;
   }
 });
+Object.defineProperty(exports, "convertIpToUint32", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.convertIpToUint32;
+  }
+});
 Object.defineProperty(exports, "createEventQueue", {
   enumerable: true,
   get: function () {
@@ -665,6 +692,30 @@ Object.defineProperty(exports, "getElementAbsoluteHeight", {
     return _utils.getElementAbsoluteHeight;
   }
 });
+Object.defineProperty(exports, "getFirstValidIp", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.getFirstValidIp;
+  }
+});
+Object.defineProperty(exports, "getImmutableAndEditable", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.getImmutableAndEditable;
+  }
+});
+Object.defineProperty(exports, "getImmutableAndEditableOctets", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.getImmutableAndEditableOctets;
+  }
+});
+Object.defineProperty(exports, "getIpRangeFromCidr", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.getIpRangeFromCidr;
+  }
+});
 Object.defineProperty(exports, "getParentsBottomSpacing", {
   enumerable: true,
   get: function () {
@@ -683,6 +734,18 @@ Object.defineProperty(exports, "isDarkTheme", {
     return _ThemeSwitcher.isDarkTheme;
   }
 });
+Object.defineProperty(exports, "isIPv4", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.isIPv4;
+  }
+});
+Object.defineProperty(exports, "isIpInSubnet", {
+  enumerable: true,
+  get: function () {
+    return _PrefixedIpInput.isIpInSubnet;
+  }
+});
 Object.defineProperty(exports, "isNavigationAnchor", {
   enumerable: true,
   get: function () {
@@ -859,6 +922,8 @@ var _LoginPageLayout = _interopRequireDefault(require("./components/LoginPageLay
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
 var _Panel = _interopRequireDefault(require("./components/Panel"));
 var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));
+var _PrefixedInput = _interopRequireDefault(require("./components/PrefixedInput"));
+var _PrefixedIpInput = _interopRequireWildcard(require("./components/PrefixedIpInput"));
 var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));
 var _Row = _interopRequireDefault(require("./components/Row"));
 var _ScrollableContainer = _interopRequireDefault(require("./components/ScrollableContainer"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.9.1",
+  "version": "3.11.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {