Add Account card in library

.release-please-manifest.json

@@ -1,7 +1,7 @@
 {
     "packages/assets": "0.5.2",
     "packages/ui-core": "2.0.1",
-    "packages/ui-react": "0.5.0",
+    "packages/ui-react": "0.5.1",
     "packages/utils": "0.4.0",
     "builder": "0.3.0",
     "sandbox": "0.3.0"

packages/ui-react/lib/complex/AccountCard/index.tsx

@@ -0,0 +1,240 @@
+/* @license Copyright 2024 @polkadot-ui/library authors & contributors
+SPDX-License-Identifier: MIT */
+
+import { JSX, useEffect, useState } from "react";
+
+import { Polkicon } from "../../icons/Polkicon";
+import { Card } from "../../base/structure/Card";
+import { Grid } from "../../base/structure/Grid";
+import { GridJustify, GridSizes, GridItemsAlignment } from "../../base/types";
+import { valEmpty } from "../../utils";
+import { ellipsisFn } from "@polkadot-ui/utils";
+import {
+  HPositionLR,
+  HPosition,
+  ComponentBaseWithClassName,
+} from "../../utils/types";
+
+import "@polkadot-ui/core/css/complex/AccountCard/index.css";
+
+type FontType =
+  | "xx-small"
+  | "x-small"
+  | "small"
+  | "medium"
+  | "large"
+  | "larger"
+  | "x-large"
+  | "xx-large";
+
+interface AccountCardProps {
+  title: TitleProps;
+  fontSize?: FontType | string;
+  ellipsis?: EllipsisProps;
+  icon?: IconProps;
+  extraComponent?: ExtraComponentProps;
+  noCard?: boolean;
+}
+
+export interface IconProps extends CommonParams, ComponentBaseWithClassName {
+  size?: number;
+  copy?: boolean;
+  position?: HPositionLR;
+  colors?: string[];
+  outerColor?: string;
+  dark?: boolean;
+}
+
+export interface ExtraComponentProps
+  extends CommonParams,
+    ComponentBaseWithClassName {
+  component?: JSX.Element;
+  position?: HPositionLR;
+}
+
+export interface EllipsisProps {
+  active?: boolean;
+  amount?: number;
+  position?: string;
+}
+
+interface CommonParams {
+  gridSize?: GridSizes;
+  justify?: GridJustify;
+}
+
+export interface TitleProps extends ComponentBaseWithClassName {
+  address: string;
+  align?: GridItemsAlignment;
+  justify?: GridJustify;
+  component?: JSX.Element;
+  name?: string;
+}
+
+const isOfFontType = (input: string): input is FontType =>
+  [
+    "xx-small",
+    "x-small",
+    "small",
+    "medium",
+    "large",
+    "larger",
+    "x-large",
+    "xx-large",
+  ].includes(input);
+
+export const AccountCard = ({
+  title,
+  fontSize,
+  ellipsis = { active: false, amount: 7 },
+  icon,
+  extraComponent,
+  noCard = false,
+  className,
+  style,
+}: AccountCardProps & ComponentBaseWithClassName) => {
+  const fontClasses: string[] = [
+    isOfFontType(fontSize)
+      ? valEmpty(fontSize, "account-card-font-size-" + fontSize) ||
+        "account-card-font-size-medium"
+      : "",
+    valEmpty(ellipsis.active, "ellipsis"),
+    " account-card-main-text",
+  ];
+
+  const structure = [];
+
+  // state icSize (icon's Grid column gridSize)
+  const [icSize, setIcSize] = useState<GridSizes | undefined>(icon?.gridSize);
+  // state mainSize (main area's Grid column size)
+  const [mainSize, setMainSize] = useState<GridSizes>(12);
+  // state xtraSize (extra component's Grid column size)
+  const [xtraSize, setXtraSize] = useState<GridSizes | undefined>(
+    extraComponent?.gridSize
+  );
+
+  // Adjust the columns
+  useEffect(() => {
+    // default values for iSize (icon's column size), xSize (extra component's column size) and mSize (main area's column size)
+    let iGridSize: GridSizes = 2;
+    let xGridSize: GridSizes = 2;
+    let mGridSize: GridSizes = 8;
+
+    // Based on the existance of icon/extraComponent and if their sizes are given as params, the following 'if' is calculating the correct sizes
+    // in the 12 column Grid that polakdot-cloud supports at the moment, and sets the states accordingly
+    if (icon?.gridSize || extraComponent?.gridSize) {
+      iGridSize = icon?.gridSize || 2;
+      xGridSize = extraComponent?.gridSize || 2;
+      mGridSize = (12 -
+        ((icon ? iGridSize : 0) +
+          (extraComponent ? xGridSize : 0))) as GridSizes;
+    }
+    setIcSize(iGridSize);
+    setXtraSize(xGridSize);
+    setMainSize(mGridSize);
+  }, [icon, extraComponent]);
+
+  const IconComponent = (
+    <Grid
+      key={`icon_${icSize}`}
+      column
+      sm={icSize}
+      justify={icon?.justify}
+      style={Object.assign({}, { margin: "auto" }, icon?.style)}
+      className={icon?.className}
+    >
+      <Polkicon
+        address={title.address}
+        size={icon?.size || 30}
+        copy={icon?.copy}
+        colors={icon?.colors}
+        outerColor={icon?.outerColor}
+      />
+    </Grid>
+  );
+
+  const MainTextComponent = (
+    <Grid
+      key={`main_${mainSize}`}
+      column
+      sm={mainSize}
+      justify={title?.justify}
+      alignItems={title?.align || "center"}
+    >
+      <div
+        style={Object.assign(
+          {},
+          title?.style || {},
+          !isOfFontType(fontSize) ? { fontSize } : {},
+          // Auto-ellipsis when component becomes too small and ellipsis is not active
+          !ellipsis?.active
+            ? {
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+              }
+            : {}
+        )}
+        className={`${title?.className} ${fontClasses
+          ?.filter((a) => a.trim() != "")
+          ?.join("")}`}
+      >
+        {title?.component ||
+          (ellipsis?.active
+            ? ellipsisFn(
+                title?.name || title.address,
+                ellipsis.amount,
+                (ellipsis?.position as HPosition) || "center"
+              )
+            : title?.name || title.address)}
+      </div>
+    </Grid>
+  );
+
+  structure.push(MainTextComponent);
+
+  if (icon) {
+    if (icon?.position === "right") {
+      structure.push(IconComponent);
+    } else {
+      structure.unshift(IconComponent);
+    }
+  }
+
+  if (extraComponent) {
+    const Comp = (
+      <Grid
+        key={`x_${xtraSize}`}
+        column
+        sm={xtraSize}
+        justify={extraComponent?.justify}
+        alignItems="center"
+        className={extraComponent?.className}
+        style={extraComponent?.style}
+      >
+        {extraComponent.component}
+      </Grid>
+    );
+
+    if (extraComponent?.position === "right") {
+      structure.push(Comp);
+    } else {
+      structure.unshift(Comp);
+    }
+  }
+
+  return (
+    <Grid row alignItems="center" key={`core_component`}>
+      {noCard ? (
+        structure
+      ) : (
+        <Card
+          style={style}
+          className={"account-card-theme-border " + className}
+        >
+          {structure}
+        </Card>
+      )}
+    </Grid>
+  );
+};

packages/ui-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "polkadot-ui-react",
-  "license": "GPL-3.0-only",
-  "version": "0.5.0",
+  "license": "MIT",
+  "version": "0.5.1",
   "type": "module",
   "contributors": [
     "Ross Bulat<[email protected]>",
@@ -39,7 +39,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@polkadot-ui/assets": "^0.5.2",
-    "@polkadot-ui/core": "^2.0.0",
+    "@polkadot-ui/core": "^2.0.1",
     "@polkadot-ui/utils": "^0.4.0",
     "@polkadot/keyring": "^12.6.2",
     "@polkadot/util": "^12.6.2",

sandbox/src/pages/Components.tsx

@@ -4,6 +4,7 @@ SPDX-License-Identifier: MIT */
 import { Odometer } from "../../../packages/ui-react/lib/complex/Odometer";
 import { Polkicon } from "../../../packages/ui-react/lib/icons/Polkicon";
 import { Chart } from "../../../packages/ui-react/lib/base/structure/Chart";
+import { AccountCard } from "../../../packages/ui-react/lib/complex/AccountCard";
 import BigNumber from "bignumber.js";
 import { useState } from "react";
 
@@ -76,6 +77,36 @@ export const Components = () => {
         </button>
       </div>
 
+      <h2>Account Card</h2>
+      <div style={{ display: "flex" }}>
+        <AccountCard
+          style={{ padding: "1rem" }}
+          icon={{
+            copy: false,
+            position: "right",
+            gridSize: 3,
+            justify: "space-around",
+          }}
+          title={{
+            address: "1f1yYj2bCFhJCTVdeWLDueUsrZynLAaj6jeMy18fjZ7Cr73",
+          }}
+        />
+      </div>
+      <div style={{ display: "flex" }}>
+        <AccountCard
+          style={{ padding: "1rem" }}
+          icon={{
+            copy: false,
+            position: "right",
+            gridSize: 3,
+            justify: "space-around",
+          }}
+          title={{
+            address: "1f1yYj2bCFhJCTVdeWLDueUsrZynLAaj6jeMy18fjZ7Cr73",
+          }}
+        />
+      </div>
+
       <h2>Polkicon</h2>
       <p>Light-weight, customisable Polkadot Icon.</p>
       <h3>Size</h3>

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "baseUrl": ".",
     "rootDir": ".",
     "declaration": true,

yarn.lock

@@ -849,10 +849,10 @@
   resolved "https://registry.yarnpkg.com/@polkadot-ui/assets/-/assets-0.5.2.tgz#a72a3258b0be98d32e19bf23f341481f16d8802d"
   integrity sha512-2oXG8Nx0gdCJm7TwkGUM3icJBxNfVPN+DAvb6mE/45JMCHFupFGO+jjk3pdCKMF1DT5WxTJMrjRqstwMQVRnJg==
 
-"@polkadot-ui/core@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@polkadot-ui/core/-/core-2.0.0.tgz#b2270e74be6586b9a11c0e86da152839fabac876"
-  integrity sha512-xlbBTvDmvIBuatrSZ8H5N/+UGpThNw0ba9UwMcg6unsWaGMvSGrkxbd1Bww5nbUTsou8sf3Rgec/rPmYPQO5/Q==
+"@polkadot-ui/core@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@polkadot-ui/core/-/core-2.0.1.tgz#4f108ab5c375995296a789984cf8699b42d13dd0"
+  integrity sha512-/ti+8sahCS9ERtX1CMpvgx0H/BXVwRiHqL8+gjeRweszZcVweObxCU09EEbTSCJEgbHPJJTXd1tfpDnfB1GQ6w==
 
 "@polkadot-ui/utils@^0.4.0":
   version "0.4.0"
@@ -11284,6 +11284,7 @@ [email protected]:
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==