@topconsultnpm/sdkui-react-beta 6.12.35 → 6.12.36

package/lib/components/base/TMUserAvatar.d.ts

@@ -0,0 +1,5 @@
+declare const TMUserAvatar: ({ name, returnType }: {
+    name: string;
+    returnType?: "jsx" | "svg";
+}) => string | import("react/jsx-runtime").JSX.Element;
+export default TMUserAvatar;

package/lib/components/base/TMUserAvatar.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TMTooltip from './TMTooltip';
+const TMUserAvatar = ({ name, returnType = 'jsx' }) => {
+    // Helper function to generate dark color from name
+    const generateDarkColorFromName = (str) => {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.floor((hash & 0x00FFFFFF) / 0x10000);
+        let colorRange;
+        if (hue >= 0 && hue < 30)
+            colorRange = 0; // Dark red
+        else if (hue >= 30 && hue < 90)
+            colorRange = 60; // Dark orange to yellow
+        else if (hue >= 90 && hue < 150)
+            colorRange = 120; // Dark green
+        else if (hue >= 150 && hue < 210)
+            colorRange = 180; // Dark cyan
+        else if (hue >= 210 && hue < 270)
+            colorRange = 240; // Dark blue
+        else if (hue >= 270 && hue < 330)
+            colorRange = 300; // Dark purple
+        else
+            colorRange = 360; // Dark magenta
+        return `hsl(${colorRange}, 70%, 30%)`; // Dark color
+    };
+    // Helper function to extract initials from name
+    const extractInitialsFromName = (name) => {
+        if (name.length >= 3) {
+            const lettersOnly = name.replace(/[^a-zA-Z]/g, '');
+            return lettersOnly.substring(0, 3).toUpperCase();
+        }
+        return name[0].toUpperCase();
+    };
+    const initials = extractInitialsFromName(name ?? '-');
+    const bgColor = generateDarkColorFromName(name ?? '-');
+    if (returnType === 'svg') {
+        return `
+            <svg width="30" height="30" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="20" cy="20" r="20" fill="${bgColor}" />
+                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="14" font-weight="bold" font-family="sans-serif">
+                    ${initials}
+                </text>
+            </svg>
+        `.trim();
+    }
+    return (_jsx(TMTooltip, { content: name ?? '-', children: _jsx("div", { style: {
+                width: "40px",
+                height: "40px",
+                borderRadius: "50%",
+                backgroundColor: bgColor,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginRight: "10px",
+                fontWeight: "bold",
+                color: '#fff',
+                fontSize: "18px",
+                userSelect: "none",
+                cursor: "default",
+            }, children: _jsx("span", { style: { fontSize: "12px" }, children: initials }) }) }));
+};
+export default TMUserAvatar;

package/lib/components/index.d.ts

@@ -19,6 +19,7 @@ export { Spinner } from './base/TMSpinner';
 export { default as TMToggleButton } from './base/TMToggleButton';
 export { default as TMTooltip } from './base/TMTooltip';
 export { default as TMVilViewer } from './base/TMVilViewer';
+export { default as TMUserAvatar } from './base/TMUserAvatar';
 export { default as TMDropDown } from './editors/TMDropDown';
 export { default as TMTreeDropDown } from './editors/TMTreeDropDown';
 export { default as TMSummary } from './editors/TMSummary';

package/lib/components/index.js

@@ -20,6 +20,7 @@ export { Spinner } from './base/TMSpinner';
 export { default as TMToggleButton } from './base/TMToggleButton';
 export { default as TMTooltip } from './base/TMTooltip';
 export { default as TMVilViewer } from './base/TMVilViewer';
+export { default as TMUserAvatar } from './base/TMUserAvatar';
 //editors
 export { default as TMDropDown } from './editors/TMDropDown';
 export { default as TMTreeDropDown } from './editors/TMTreeDropDown';

package/lib/stories/TMUserAvatar.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TMUserAvatar from '../components/base/TMUserAvatar';
+declare const meta: Meta<typeof TMUserAvatar>;
+export default meta;
+type Story = StoryObj<typeof TMUserAvatar>;
+export declare const MultipleAvatars: Story;

package/lib/stories/TMUserAvatar.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TMUserAvatar from '../components/base/TMUserAvatar';
+import { TMDeviceProvider } from '../components';
+const meta = {
+    title: 'Components/TMUserAvatar',
+    component: TMUserAvatar,
+    decorators: [(Story) => (_jsxs(TMDeviceProvider, { children: [" ", _jsx(Story, {}), " "] })),],
+    tags: ['autodocs'],
+    args: {
+        name: 'Test User',
+    },
+};
+export default meta;
+export const MultipleAvatars = {
+    render: () => {
+        const names = ['Luca', 'Claudio', 'Marco', 'Alessia', 'Giorgio', 'Ashkan', 'Joele', 'Alessandro'];
+        return (_jsx("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' }, children: names.map((name, index) => (_jsx(TMUserAvatar, { name: name }, index))) }));
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.12.35",
+  "version": "6.12.36",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",