@tomo-inc/tomo-ui 0.0.10 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomo-inc/tomo-ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -19,6 +19,8 @@
     "@heroui/react": "2.8.5",
     "@heroui/system": "^2.4.23",
     "@heroui/theme": "^2.4.23",
+    "bignumber.js": "^9.1.2",
+    "classnames": "^2.5.1",
     "color": "^5.0.3",
     "flat": "^6.0.1",
     "framer-motion": "^11.5.6",

package/project.json

@@ -5,6 +5,13 @@
   "projectType": "library",
   "tags": ["scope:uikit", "type:tomo-uikit"],
   "targets": {
+    "version:up": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "uikits/tomo-ui",
+        "command": "npm version patch --no-git-tag-version"
+      }
+    },
     "build": {
       "executor": "nx:run-commands",
       "outputs": ["{projectRoot}/dist"],

package/src/components/drawer/index.tsx

@@ -0,0 +1,9 @@
+export { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/react";
+
+export type {
+  DrawerBodyProps,
+  DrawerContentProps,
+  DrawerFooterProps,
+  DrawerHeaderProps,
+  DrawerProps,
+} from "@heroui/react";

package/src/components/formatted-number/index.tsx

@@ -0,0 +1,134 @@
+import { BigNumber } from "bignumber.js";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { effectiveBalance, isEmpty } from "../../utils/amount";
+import { NumberType } from "./type";
+
+export const AdaptiveFormatted = (
+  value: string | number | undefined,
+  type: NumberType,
+  balanceIsSub?: boolean,
+  decimalSubLen?: number,
+  decimalFlag?: boolean,
+) => {
+  BigNumber.config({
+    FORMAT: {
+      prefix: "",
+      decimalSeparator: ".",
+      groupSeparator: ",",
+      groupSize: 3,
+      secondaryGroupSize: 0,
+      fractionGroupSeparator: " ",
+      fractionGroupSize: 0,
+      suffix: "",
+    },
+    EXPONENTIAL_AT: [-18, 30],
+  });
+
+  const valueStr = value?.toString() || "";
+  if (isEmpty(valueStr) || !value) {
+    return {
+      formatted: "-",
+      ext: undefined,
+    };
+  }
+  if (valueStr === "0") {
+    return {
+      formatted: type === NumberType.USD ? "0.00" : "0",
+      ext: undefined,
+    };
+  }
+
+  const bigValue = new BigNumber(value);
+  if (type === NumberType.USD) {
+    if (bigValue.lt(0.00001)) {
+      return {
+        formatted: "0.00001",
+        ext: undefined,
+        pre: "<",
+      };
+    }
+  }
+  if (bigValue.lt(0.000001)) {
+    return {
+      formatted: "0.000001",
+      ext: undefined,
+      pre: "<",
+    };
+  }
+
+  const normalBalance = new BigNumber(valueStr).toString();
+  const [intPart, decimalPart] = normalBalance.split(".");
+  if (decimalPart && decimalPart.length > 1 && Number(decimalPart) > 0) {
+    const leadingZeros = decimalPart.match(/^0+/);
+
+    if (leadingZeros && leadingZeros[0].length > 4 && (type === NumberType.PRICE || balanceIsSub)) {
+      const exponent = parseInt(decimalPart).toString().substring(0, 4);
+      return {
+        formatted: `${intPart}.0{${leadingZeros[0].length}}${exponent}`,
+        ext: [intPart, leadingZeros[0].length, exponent],
+      };
+    }
+  }
+  const formatted = effectiveBalance(normalBalance, type === NumberType.USD ? 2 : 4, decimalSubLen, decimalFlag);
+
+  return {
+    formatted,
+    ext: undefined,
+  };
+};
+
+export interface FormattedNumberProps {
+  value: string | number;
+  type: NumberType;
+  className?: string;
+  subClassName?: string;
+  formatClassName?: string;
+  balanceIsSub?: boolean;
+  decimalSubLen?: number;
+  decimalFlag?: boolean;
+}
+
+export const FormattedNumber = ({
+  value,
+  type,
+  className,
+  subClassName,
+  formatClassName,
+  balanceIsSub,
+  decimalSubLen,
+  decimalFlag,
+}: FormattedNumberProps) => {
+  const node = useMemo(() => {
+    const adapt = AdaptiveFormatted(value, type, balanceIsSub, decimalSubLen, decimalFlag);
+    if (adapt.ext) {
+      const ext = adapt.ext as string[];
+      return {
+        render: (
+          <span>
+            {ext[0]}.
+            <span>
+              0<sub className={subClassName}>{ext[1]}</sub>
+              {ext[2]}
+            </span>
+          </span>
+        ),
+        pre: adapt.pre,
+      };
+    }
+    return {
+      render: <span className={formatClassName}>{adapt.formatted}</span>,
+      pre: adapt.pre,
+    };
+  }, [value, type, balanceIsSub, decimalSubLen, decimalFlag, formatClassName, subClassName]);
+
+  return (
+    <span className={classNames(className)}>
+      {node.pre}
+      {(type === NumberType.USD || type === NumberType.PRICE) && "$"}
+      {node.render}
+    </span>
+  );
+};
+
+export { FormattedNumber as AdaptiveNumber, NumberType };

package/src/components/formatted-number/type.ts

@@ -0,0 +1,5 @@
+export enum NumberType {
+  USD = "USD",
+  PRICE = "PRICE",
+  BALANCE = "BALANCE",
+}

package/src/components/index.ts

@@ -1,15 +1,21 @@
 export * from "./button";
 export * from "./card";
 export * from "./chip";
+export * from "./drawer";
+export * from "./formatted-number";
 export * from "./image";
+export * from "./info-item";
 export * from "./input";
 export * from "./link";
+export * from "./listbox";
 export * from "./mfaTypeChoose";
 export * from "./modal";
 export * from "./passcodeInput";
 export * from "./qr";
+export * from "./radio";
 export * from "./select";
 export * from "./skeleton";
 export * from "./spinner";
+export * from "./switch";
 export * from "./tabs";
 export * from "./toast";

package/src/components/info-item/index.tsx

@@ -0,0 +1,23 @@
+export interface InfoItemProps {
+  label?: string | React.ReactNode;
+  context?: string | React.ReactNode;
+}
+
+export const InfoItem = ({ label, context }: InfoItemProps) => {
+  return (
+    <div className="flex w-full items-center justify-between gap-1">
+      <div className="truncate text-xs font-normal text-default-500 ">
+        <span className="w-full opacity-100 h-auto will-change-transform transform-none">{label}</span>
+      </div>
+      <div className="text-xs font-normal text-foreground flex-1 overflow-hidden">
+        <div className="w-full flex justify-end">
+          <div className="w-fit max-w-full">
+            <span className="w-full opacity-100 h-auto will-change-transform transform-none">{context}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { InfoItem as BaseItem };

package/src/components/listbox/index.tsx

@@ -0,0 +1,2 @@
+export { Listbox, ListboxItem } from "@heroui/react";
+export type { ListboxItemProps, ListboxProps } from "@heroui/react";

package/src/components/radio/index.tsx

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from "@heroui/react";
+export type { RadioGroupProps, RadioProps } from "@heroui/react";

package/src/components/switch/index.tsx

@@ -0,0 +1,2 @@
+export { Switch } from "@heroui/react";
+export type { SwitchProps } from "@heroui/react";

package/src/tailwind/plugin.ts

@@ -46,12 +46,9 @@ export const baseConfig: HeroUIPluginConfig = {
         t5: "#EEC41F",
       } as any,
     },
-    dark: {},
   },
 };
-
-export const ThemePlugin = heroui(baseConfig) as any;
-export default ThemePlugin;
+export default heroui(baseConfig) as any;
 
 // export const ThemePlugin: any = heroui({
 //   layout: {},

package/src/utils/amount.ts

@@ -0,0 +1,58 @@
+import { BigNumber } from "bignumber.js";
+
+export function effectiveBalance(
+  balance: any,
+  length: number = 4,
+  decimalSubLen: number = 2,
+  decimalFlag: boolean = false,
+) {
+  if (isNaN(parseFloat(balance))) {
+    return "0.00";
+  }
+  if (!balance || balance === "0") {
+    return 0;
+  }
+  if (balance < 1 / Math.pow(10, 6)) {
+    if (decimalFlag) {
+      return BigNumber(balance.toString()).toFixed();
+    }
+    return "0.00";
+  }
+  balance = new BigNumber(balance.toString()).toFixed();
+  if (balance.split(".").length === 1) {
+    return balance > 1000 ? `${Number(balance).toLocaleString()}.00` : `${balance}.00`;
+  }
+  const integer = balance.split(".")[0];
+  const decimal = balance.split(".")[1];
+  if (integer > 0) {
+    const str = decimal.length === 1 ? `${decimal}0` : decimal.substr(0, decimalSubLen);
+    const res = `${integer}.${str}`;
+    return Number(res) > 1000 ? `${Number(integer).toLocaleString()}.${str}` : res;
+  }
+
+  const temp: any = [];
+  let tempNum = 0;
+  let isNotZero = false;
+  for (let i = 0; i < decimal.length; i++) {
+    if (decimal[i] != "0" && !isNotZero) {
+      isNotZero = true;
+    }
+    if (isNotZero) {
+      tempNum++;
+    }
+    if (tempNum <= length) {
+      temp.push(decimal[i]);
+    }
+  }
+  const res = parseFloat(`${integer}.${temp.join("")}`);
+  return res > 1000 ? `${Number(integer).toLocaleString()}.${temp.join("")}` : res;
+}
+
+export const isEmpty = (data: string | object) => {
+  if (data instanceof Array) {
+    return !data.length;
+  } else if (data instanceof Object) {
+    return !Object.keys(data).length;
+  }
+  return !data;
+};