@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0

package/package.json

@@ -1,54 +1,54 @@
-{
-    "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-test.1",
-    "description": "",
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "clean": "powershell Remove-Item lib/ -recurse",
-        "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/IconsS4t/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
-        "tm-build": "npm run clean && tsc && npm run copy-files",
-        "tm-watch": "tsc -w",
-        "tm-publish": "npm publish --tag latest",
-        "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build"
-    },
-    "author": "TopConsult",
-    "license": "ISC",
-    "devDependencies": {
-        "@chromatic-com/storybook": "^4.1.3",
-        "@storybook/addon-docs": "^10.1.0",
-        "@storybook/addon-onboarding": "^10.1.0",
-        "@storybook/react-vite": "^10.1.0",
-        "@types/htmlparser2": "^3.10.7",
-        "@types/node": "^20.2.5",
-        "@types/react": "^18.2.7",
-        "@types/react-dom": "^18.2.4",
-        "copyfiles": "^2.4.1",
-        "esbuild": "^0.25.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "storybook": "^10.1.0",
-        "typescript": "^5.9.3",
-        "vite": "^6.1.1"
-    },
-    "main": "dist/cjs/index.js",
-    "types": "./index.d.ts",
-    "module": "lib/esm/index.js",
-    "files": [
-        "dist",
-        "lib"
-    ],
-    "dependencies": {
-        "@topconsultnpm/sdk-ts": "6.19.0-test.1",
-        "buffer": "^6.0.3",
-        "devextreme": "25.1.4",
-        "devextreme-react": "25.1.4",
-        "exceljs": "^4.4.0",
-        "htmlparser2": "^10.0.0",
-        "react-router-dom": "^6.15.0",
-        "styled-components": "^6.1.1"
-    },
-    "overrides": {
-        "esbuild": "^0.25.0"
-    }
-}
+{
+    "name": "@topconsultnpm/sdkui-react",
+    "version": "6.19.0",
+    "description": "",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "clean": "powershell Remove-Item lib/ -recurse",
+        "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/IconsS4t/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
+        "tm-build": "npm run clean && tsc && npm run copy-files",
+        "tm-watch": "tsc -w",
+        "tm-publish": "npm publish --tag latest",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "author": "TopConsult",
+    "license": "ISC",
+    "devDependencies": {
+        "@chromatic-com/storybook": "^4.1.3",
+        "@storybook/addon-docs": "^10.1.0",
+        "@storybook/addon-onboarding": "^10.1.0",
+        "@storybook/react-vite": "^10.1.0",
+        "@types/htmlparser2": "^3.10.7",
+        "@types/node": "^20.2.5",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.3",
+        "copyfiles": "^2.4.1",
+        "esbuild": "^0.25.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "storybook": "^10.1.0",
+        "typescript": "^5.9.3",
+        "vite": "^6.1.1"
+    },
+    "main": "dist/cjs/index.js",
+    "types": "./index.d.ts",
+    "module": "lib/esm/index.js",
+    "files": [
+        "dist",
+        "lib"
+    ],
+    "dependencies": {
+        "@topconsultnpm/sdk-ts": "6.19.0",
+        "buffer": "^6.0.3",
+        "devextreme": "25.1.7",
+        "devextreme-react": "25.1.7",
+        "exceljs": "^4.4.0",
+        "htmlparser2": "^10.0.0",
+        "react-router-dom": "^6.15.0",
+        "styled-components": "^6.1.1"
+    },
+    "overrides": {
+        "esbuild": "^0.25.0"
+    }
+}

package/lib/components/features/assistant/ToppyHelpCenter.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { DeviceType } from '../../base/TMDeviceProvider';
-interface ToppyHelpCenterProps {
-    content?: React.ReactNode;
-    deviceType?: DeviceType;
-    usePortal?: boolean;
-    align?: 'right' | 'left';
-    initialIsCollapsed?: boolean;
-    onToppyImageClick?: () => void;
-}
-declare const ToppyHelpCenter: React.FC<ToppyHelpCenterProps>;
-export default ToppyHelpCenter;

package/lib/components/features/assistant/ToppyHelpCenter.js

@@ -1,173 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import styled, { keyframes, css } from 'styled-components';
-import Toppy from '../../../assets/Toppy-generico.png';
-import { DeviceType } from '../../base/TMDeviceProvider';
-const toppyEntrance = keyframes `
-  0% { right: -200px; opacity: 0; }
-  60% { opacity: 1; }
-  100% { right: 10px; opacity: 1; }
-`;
-const pulseAnimation = keyframes `
-  0% { transform: scale(1); }
-  50% { transform: scale(1.05); }
-  100% { transform: scale(1); }
-`;
-const bounceAnimation = keyframes `
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-10px);
-  }
-  60% {
-    transform: translateY(-5px);
-  }
-`;
-const wiggle = keyframes `
-  0% { transform: rotate(-5deg) scale(1.1); }
-  10% { transform: rotate(5deg) scale(0.95); }
-  20% { transform: rotate(-5deg) scale(1.1); }
-  30% { transform: rotate(5deg) scale(1.05); }
-  40% { transform: rotate(-5deg) scale(1); }
-  50% { transform: rotate(5deg) scale(0.96); }
-  60% { transform: rotate(-5deg) scale(1.15); }
-  70% { transform: rotate(5deg) scale(0.99); }
-  80% { transform: rotate(-5deg) scale(1.05); }
-  90% { transform: rotate(5deg) scale(1); }
-  100% { transform: rotate(-5deg) scale(1.08); }
-`;
-const ToppyContainer = styled.div `
-  position: ${({ $fixed }) => ($fixed ? 'fixed' : 'absolute')};
-  bottom: ${({ $isCollapsed, $isMobile }) => $isMobile ? '5px' : $isCollapsed ? '5px' : '-20px'};
-  ${({ $align, $isCollapsed }) => $align === 'left'
-    ? `left: ${$isCollapsed ? '5px' : '10px'}; right: auto;`
-    : `right: ${$isCollapsed ? '5px' : '10px'}; left: auto;`}
-  display: flex;
-  flex-direction: column-reverse; /* Il contenuto è sopra l'immagine */
-  align-items: ${({ $align }) => $align === 'left' ? 'flex-start' : 'flex-end'};
-  animation: ${({ $fixed }) => $fixed && css `${toppyEntrance} 0.5s cubic-bezier(0.23, 1, 0.32, 1)`};
-  z-index: ${({ $fixed }) => ($fixed ? 2147483647 : 10)};
-`;
-const ToppyImage = styled.img `
-  width: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '60px' : $isMobile ? '90px' : '120px'};
-  height: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '70px' : $isMobile ? '105px' : '140px'};
-  cursor: pointer;
-  object-fit: cover;
-  object-position: top center;
-  clip-path: inset(0 0 22% 0 round 10px);
-  transform: ${({ $isCollapsed, $align }) => $isCollapsed
-    ? 'none'
-    : $align === 'left'
-        ? 'rotate(20deg)'
-        : 'rotate(-20deg)'};
-
-  ${({ $isCollapsed }) => $isCollapsed &&
-    css `
-      /* animation: ${bounceAnimation} 2s infinite; */
-      /* animation: ${pulseAnimation} 2s infinite; */
-      animation: ${wiggle} 4s infinite;
-    `}
-`;
-const ToppyContent = styled.div `
-  margin-bottom: ${({ $isMobile, $align }) => $align === 'left'
-    ? '30px' // Spazio tra ToppyContent e ToppyImage
-    : $isMobile
-        ? '30px'
-        : '20px'};
-
-
-  display: ${props => (props.$isCollapsed ? 'none' : 'block')};
-  width: max-content;
-  max-width: 250px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 113, 188, 0.45) 0%,
-    rgba(27, 20, 100, 0.65) 100%
-  );
-  color: white;
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px solid #FFFFFF;
-  opacity: ${props => (props.$isCollapsed ? 0 : 1)};
-  transform: ${props => (props.$isCollapsed ? 'translateY(20px)' : 'translateY(0)')};
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  pointer-events: ${props => (props.$isCollapsed ? 'none' : 'auto')};
-  position: relative; 
-
- ${({ $align, $isMobile }) => $align === 'left' &&
-    css `
-      position: absolute;
-      left: 50px;
-      right: auto;
-      bottom: 100%;
-      transform: translateY(-${$isMobile ? '10px' : '20px'}); 
-    `}
-
-  &::after {
-    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
-    content: "";
-    position: absolute;
-    top: 100%;
-
-    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
-    border-width: 32px 32px 0 0;
-    border-style: solid;
-    border-color: #FFFFFF transparent; 
-    display: block;
-    width: 0;
-    height: 0;
-    z-index: 1;
-  }
-  
-  &::before {
-    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
-    content: "";
-    position: absolute;
-    top: 100%;
-
-    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
-    border-width: 32px 32px 0 0;
-    border-style: solid;
-    border-color: rgba(27, 20, 100, 0.65) transparent; 
-    display: block;
-    width: 0;
-    height: 0;
-    z-index: 2;
-  }
-`;
-const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right', initialIsCollapsed, onToppyImageClick }) => {
-    const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);
-    const [portalContainer, setPortalContainer] = useState(null);
-    useEffect(() => {
-        if (initialIsCollapsed === undefined && deviceType === DeviceType.MOBILE) {
-            setIsCollapsed(true);
-        }
-    }, [deviceType, initialIsCollapsed]);
-    useEffect(() => {
-        if (!usePortal)
-            return;
-        const portalRoot = document.createElement('div');
-        portalRoot.setAttribute('id', 'toppy-portal-root');
-        document.body.appendChild(portalRoot);
-        setPortalContainer(portalRoot);
-        return () => {
-            document.body.removeChild(portalRoot);
-        };
-    }, [usePortal]);
-    const toggleCollapse = (e) => {
-        e.stopPropagation();
-        setIsCollapsed(!isCollapsed);
-        onToppyImageClick?.();
-    };
-    const isMobile = deviceType === DeviceType.MOBILE;
-    const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsx(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: content })] }));
-    if (usePortal) {
-        if (!portalContainer)
-            return null;
-        return ReactDOM.createPortal(toppyComponent, portalContainer);
-    }
-    return toppyComponent;
-};
-export default ToppyHelpCenter;