sprintify-ui 0.11.19 → 0.11.21

package/dist/types/utils/avatar.d.ts

@@ -0,0 +1,2 @@
+export declare function getInitials(fullName: string): string;
+export declare function getAvatarColor(name: string, email?: string): string;

package/dist/types/utils/index.d.ts

@@ -4,4 +4,5 @@ import resizeImageFromURI from './resizeImageFromURI';
 import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
-export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, blobToBase64, validateBase64, base64ToBlob, getColorConfig, };
+import { getInitials, getAvatarColor } from './avatar';
+export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, };

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.19",
+  "version": "0.11.21",
   "type": "module",
   "scripts": {
-    "build": "rimraf dist && vue-tsc && vite build",
-    "build-fast": "rimraf dist && vite build",
+    "generate-llm-txt": "node scripts/generate-llm-txt.js",
+    "build": "rimraf dist && vue-tsc && vite build && npm run generate-llm-txt",
+    "build-fast": "rimraf dist && vite build && npm run generate-llm-txt",
     "storybook": "storybook dev -p 6006",
     "eslint:fix": "eslint --ext .js,.vue,.ts src --fix",
-    "build-storybook": "storybook build",
+    "build-storybook": "npm run generate-llm-txt && storybook build",
     "prepack": "npm run build",
     "prepare": "husky install && relative-deps",
     "release": "standard-version",

package/src/components/BaseAvatar.stories.js

@@ -37,3 +37,21 @@ Demo.args = {
       "https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face",
   },
 };
+
+export const Fallback = Template.bind({});
+Fallback.args = {
+  showDetails: true,
+  user: {
+    email: "jane@witify.io",
+    full_name: "Jane Doe",
+  },
+};
+
+export const FallbackSingleName = Template.bind({});
+FallbackSingleName.args = {
+  showDetails: true,
+  user: {
+    email: "admin@witify.io",
+    full_name: "Admin",
+  },
+};

package/src/components/BaseAvatar.vue

@@ -11,10 +11,36 @@
       class="flex items-center"
     >
       <img
+        v-if="user.avatar_url"
         :src="user.avatar_url"
         :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
         class="shrink-0 block overflow-hidden rounded-full object-cover object-center"
       >
+      <svg
+        v-else
+        viewBox="0 0 100 100"
+        :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
+        class="shrink-0 block overflow-hidden rounded-full"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r="50"
+          :fill="avatarColor"
+        ></circle>
+        <text
+          x="50"
+          y="50"
+          text-anchor="middle"
+          dominant-baseline="central"
+          fill="white"
+          :font-size="initials.length === 1 ? '45' : '40'"
+          font-weight="600"
+          font-family="system-ui, -apple-system, sans-serif"
+        >
+          {{ initials }}
+        </text>
+      </svg>
       <div
         v-if="showDetails"
         class="max-w-[120px] grow leading-tight"
@@ -44,6 +70,7 @@ import { User } from '@/types/User';
 import { RouteLocationRaw } from 'vue-router';
 import { twMerge } from 'tailwind-merge';
 import BaseTooltip from './BaseTooltip.vue';
+import { getInitials, getAvatarColor } from '@/utils/avatar';
 
 defineOptions({
   inheritAttrs: false,
@@ -80,6 +107,9 @@ const props = defineProps({
   },
 });
 
+const initials = computed(() => getInitials(props.user?.full_name || ''));
+const avatarColor = computed(() => getAvatarColor(props.user?.full_name || '', props.user?.email));
+
 const classInternal = computed(() => {
   return twMerge(
     'inline-flex',

package/src/components/BaseTooltip.vue

@@ -5,7 +5,7 @@
   >
     <slot />
     <Teleport
-      v-if="visible"
+      v-if="visible && text"
       to="body"
     >
       <div

package/src/utils/avatar.ts

@@ -0,0 +1,30 @@
+import { palette } from './colors';
+
+const avatarColorKeys = [
+  'red', 'orange', 'yellow', 'green', 'teal',
+  'cyan', 'blue', 'indigo', 'purple', 'pink',
+] as const;
+
+export function getInitials(fullName: string): string {
+  const words = fullName.trim().split(/\s+/).filter(Boolean);
+
+  if (words.length === 0) {
+    return '?';
+  }
+
+  if (words.length === 1) {
+    return words[0][0].toUpperCase();
+  }
+
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+}
+
+export function getAvatarColor(name: string, email?: string): string {
+  const input = (name + (email || '')).trim();
+  let sum = 0;
+  for (let i = 0; i < input.length; i++) {
+    sum += input.charCodeAt(i);
+  }
+  const key = avatarColorKeys[sum % avatarColorKeys.length];
+  return palette[key].high.backgroundColor;
+}

package/src/utils/index.ts

@@ -4,6 +4,7 @@ import resizeImageFromURI from './resizeImageFromURI';
 import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
+import { getInitials, getAvatarColor } from './avatar';
 
 export {
   toHumanList,
@@ -15,4 +16,6 @@ export {
   validateBase64,
   base64ToBlob,
   getColorConfig,
+  getInitials,
+  getAvatarColor,
 };