@rpcbase/client 0.82.0 → 0.84.0

package/auth/AccountsList/AccountListItem.js

@@ -1,10 +1,9 @@
 /* @flow */
 import assert from "assert"
-import {useTranslation} from "react-i18next"
 import page from "page"
 
-import Avatar from "ui/avatars/Avatar"
-import getInitials from "ui/avatars/Avatar/getInitials"
+import getInitials from "../../helpers/getInitials"
+import Avatar from "../../ui/Avatar"
 
 import "./account-list-item.scss"
 

package/helpers/getInitials.js

@@ -0,0 +1,39 @@
+/* @flow */
+const _deburr = require("lodash/deburr")
+
+
+const KNOWN_PREFIXES = ["O", "de", "Van"]
+const INITIALS_MAX_LENGTH = 3
+
+const getInitials = (input) => {
+  const cleaned = _deburr(input)
+
+  const initials = []
+
+  const splitted = cleaned.split(/'|’| |-/)
+
+  // when single word, return begining of that word as initials
+  if (splitted.length === 1) {
+    return splitted[0].toUpperCase().slice(0, INITIALS_MAX_LENGTH)
+  }
+
+  for (let i = 0; i < splitted.length; i++) {
+    const part = splitted[i]
+    // TMP: this breaks for lowercased words
+    // skip if first letter not capitalized
+    // if (!/[A-Z]/.test(part[0])) {
+    //   continue
+    // }
+
+    // skip if prefix, but not if prefix not followed by other non prefix word
+    if (KNOWN_PREFIXES.includes(part) && i < splitted.length - 1) {
+      continue
+    }
+
+    initials.push(part[0])
+  }
+
+  return initials.slice(0, INITIALS_MAX_LENGTH).join("")
+}
+
+module.exports = getInitials

package/helpers/getInitials.test.js

@@ -0,0 +1,22 @@
+/* @flow */
+const getInitials = require("./getInitials")
+
+
+const inputs = [
+  ["Philippe de Reynal", "PR"],
+  ["Sarah Connor", "SC"],
+  ["Sarah O'Connor", "SC"],
+  ["Cédric O", "CO"],
+  ["Chloë Grace Moretz", "CGM"],
+  ["Ella Marija Lani Yelich-O'Connor", "EML"],
+  ["Hannah John-Kamen", "HJK"],
+  ["npm", "NPM"],
+  ["Apple", "APP"],
+]
+
+inputs.forEach((i) => {
+  test(i[0], () => {
+    const initials = getInitials(i[0])
+    expect(initials).toBe(i[1])
+  })
+})

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.82.0",
+  "version": "0.84.0",
   "scripts": {
     "build-firebase": "webpack -c firebase/webpack.config.js",
     "build": "yarn build-firebase",
     "test": "jest"
   },
   "dependencies": {
+    "figma-squircle": "0.3.1",
     "i18next": "23.4.4",
     "i18next-chained-backend": "4.4.0",
     "i18next-resources-to-backend": "1.1.4",

package/ui/Avatar/index.native.js

@@ -0,0 +1,31 @@
+/* @flow */
+import {Text, View} from "react-native"
+
+// import View from "ui/View"
+
+import {SIZE_STYLES} from "./styles"
+
+
+const Avatar = ({size = "medium", style = {}, text = "?", color = "#000", textColor = "#FFF"}) => {
+  const sizeStyles = SIZE_STYLES[size]
+
+  return (
+    <View
+      className={"font-monospace"}
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: color,
+        userSelect: "none",
+        ...sizeStyles,
+        ...style,
+      }}
+    >
+      <Text style={{color: textColor}}>{text}</Text>
+    </View>
+  )
+}
+
+export default Avatar
+
+export {SIZE_STYLES}

package/ui/Avatar/index.web.js

@@ -0,0 +1,40 @@
+/* @flow */
+import {Text} from "react-native"
+
+import {SIZE_STYLES} from "./styles"
+
+
+const Avatar = ({
+  className = "",
+  size = "medium",
+  style = {},
+  text = "?",
+  color = "#000",
+  textColor = "#FFF",
+}) => {
+  const sizeStyles = SIZE_STYLES[size]
+
+  // TODO: too many re-renders in conv sidebar
+  // console.log("RENDER AVATAR", text)
+
+  return (
+    <div
+      className={cx("font-monospace", className)}
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: color,
+        userSelect: "none",
+        ...sizeStyles,
+        ...style,
+      }}
+    >
+      <Text style={{color: textColor}}>{text}</Text>
+    </div>
+  )
+}
+
+export default Avatar
+
+export {SIZE_STYLES}

package/ui/Avatar/styles.js

@@ -0,0 +1,41 @@
+/* @flow */
+import {getSvgPath} from "figma-squircle"
+import {Platform} from "react-native"
+
+
+const CORNER_SMOOTHING = 0.82
+
+const getSizeProps = ({size, smoothRadius, fallbackRadius}) => ({
+  width: size,
+  height: size,
+  ...Platform.select({
+    web: {
+      clipPath: `path('${getSvgPath({
+        width: size,
+        height: size,
+        cornerRadius: smoothRadius,
+        cornerSmoothing: CORNER_SMOOTHING,
+      })}')`,
+    },
+    native: {borderRadius: fallbackRadius},
+  }),
+})
+
+export const SIZE_STYLES = {
+  small: {
+    ...getSizeProps({size: 22, smoothRadius: 4, fallbackRadius: 3}),
+    fontSize: 13,
+  },
+  medium: {
+    ...getSizeProps({size: 34, smoothRadius: 8, fallbackRadius: 6}),
+    fontSize: 15,
+  },
+  large: {
+    ...getSizeProps({size: 48, smoothRadius: 14, fallbackRadius: 6}),
+    fontSize: 26,
+  },
+  xlarge: {
+    ...getSizeProps({size: 68, smoothRadius: 18, fallbackRadius: 8}),
+    fontSize: 26,
+  },
+}