tycho-components 0.2.13 → 0.2.15

package/dist/AppCopyText/AppCopyText.d.ts

@@ -0,0 +1,12 @@
+import './styles.scss';
+export declare const TitlePositions: readonly ["top", "right"];
+type TitlePosition = (typeof TitlePositions)[number];
+export type Props = {
+    className?: string;
+    title?: string;
+    content: string;
+    titlePosition?: TitlePosition;
+    hideTitle?: boolean;
+};
+export default function AppCopyText({ className, title, content, titlePosition, hideTitle, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppCopyText/AppCopyText.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import cx from 'classnames';
+import './styles.scss';
+import { Icon, Tooltip } from 'tycho-storybook';
+import { useTranslation } from 'react-i18next';
+export const TitlePositions = ['top', 'right'];
+export default function AppCopyText({ className, title, content, titlePosition = 'right', hideTitle = true, }) {
+    const [copied, setCopied] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const { t } = useTranslation('common');
+    const getClassNames = cx('ds-copy-text', className, {
+        'title-top': titlePosition === 'top' && !hideTitle,
+        'title-right': titlePosition === 'right' && !hideTitle,
+        'no-title': hideTitle,
+    });
+    const handleClipboard = () => {
+        navigator.clipboard
+            .writeText(content)
+            .then(() => {
+            setCopied(true);
+            setTimeout(() => {
+                setCopied(false);
+            }, 2000);
+        })
+            .catch((err) => {
+            console.error('Failed to copy text:', err);
+        });
+    };
+    const tooltipTitle = copied ? t('tooltip.copied') : t('tooltip.copy');
+    const iconName = copied ? 'check' : 'content_copy';
+    const iconFilled = isHovered && !copied;
+    const contentElement = (_jsxs("div", { className: getClassNames, onClick: handleClipboard, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [!hideTitle && title && (_jsx("span", { className: "ds-copy-text__title", children: title })), !hideTitle && title && titlePosition === 'right' && (_jsx("span", { className: "ds-copy-text__separator", children: "|" })), _jsxs("div", { className: "group-content", children: [_jsx("span", { className: "ds-copy-text__content", children: content }), _jsx(Icon, { name: iconName, size: "small", className: "ds-copy-text__icon", filled: iconFilled })] })] }));
+    return (_jsx(Tooltip, { title: tooltipTitle, placement: "top", mode: "simple", triggerOpen: copied ? true : undefined, children: contentElement }));
+}

package/dist/AppCopyText/index.d.ts

@@ -0,0 +1,2 @@
+import AppCopyText from './AppCopyText';
+export default AppCopyText;

package/dist/AppCopyText/index.js

@@ -0,0 +1,2 @@
+import AppCopyText from './AppCopyText';
+export default AppCopyText;

package/dist/AppCopyText/styles.scss

@@ -0,0 +1,54 @@
+.ds-copy-text {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+
+  &__title {
+    @include helper-small-1;
+    color: var(--text-secondary);
+  }
+
+  &__separator {
+    color: var(--text-secondary);
+  }
+
+  &__content {
+    color: var(--text-primary);
+    font-size: var(--font-size-body-medium, 14px);
+  }
+
+  &__icon {
+    color: var(--icon-accent);
+    transition: all 0.2s ease;
+  }
+
+  &:hover {
+    .ds-copy-text__icon {
+      color: var(--text-primary);
+      background-color: var(--button-secondary-default);
+    }
+  }
+
+  .group-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &.title-top {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-50, 4px);
+  }
+
+  &.title-right {
+    flex-direction: row;
+  }
+
+  &.no-title {
+    .ds-copy-text__separator {
+      display: none;
+    }
+  }
+}

package/dist/LanguageSelector/index.d.ts

@@ -1,4 +1,4 @@
 import LanguageSelector from './LanguageSelector';
 export default LanguageSelector;
-export { AvailableLanguages as languages } from './LanguageSelector';
+export { AvailableLanguages } from './LanguageSelector';
 export type { AvailableLanguage } from './LanguageSelector';

package/dist/LanguageSelector/index.js

@@ -1,3 +1,3 @@
 import LanguageSelector from './LanguageSelector';
 export default LanguageSelector;
-export { AvailableLanguages as languages } from './LanguageSelector';
+export { AvailableLanguages } from './LanguageSelector';

package/dist/configs/Localization.d.ts

@@ -71,6 +71,8 @@ export declare const commonResources: {
             'table.label.rows-page': string;
             'table.label.pages': string;
             'table.label.items': string;
+            'tooltip.copy': string;
+            'tooltip.copied': string;
         };
         header: {
             'label.platform': string;
@@ -263,6 +265,8 @@ export declare const commonResources: {
             'table.label.rows-page': string;
             'table.label.pages': string;
             'table.label.items': string;
+            'tooltip.copy': string;
+            'tooltip.copied': string;
         };
         header: {
             'label.platform': string;
@@ -453,6 +457,8 @@ export declare const commonResources: {
             'table.label.rows-page': string;
             'table.label.pages': string;
             'table.label.items': string;
+            'tooltip.copy': string;
+            'tooltip.copied': string;
         };
         header: {
             'label.platform': string;

package/dist/configs/localization/CommonTexts.d.ts

@@ -25,6 +25,8 @@ export declare const CommonTexts: {
         'table.label.rows-page': string;
         'table.label.pages': string;
         'table.label.items': string;
+        'tooltip.copy': string;
+        'tooltip.copied': string;
     };
     'pt-BR': {
         'button.confirm': string;
@@ -52,6 +54,8 @@ export declare const CommonTexts: {
         'table.label.rows-page': string;
         'table.label.pages': string;
         'table.label.items': string;
+        'tooltip.copy': string;
+        'tooltip.copied': string;
     };
     it: {
         'button.confirm': string;
@@ -79,5 +83,7 @@ export declare const CommonTexts: {
         'table.label.rows-page': string;
         'table.label.pages': string;
         'table.label.items': string;
+        'tooltip.copy': string;
+        'tooltip.copied': string;
     };
 };

package/dist/configs/localization/CommonTexts.js

@@ -25,6 +25,8 @@ export const CommonTexts = {
         'table.label.rows-page': 'Items per page',
         'table.label.pages': 'of {{value}} pages',
         'table.label.items': '{{first}} - {{last}} of {{total}} items',
+        'tooltip.copy': 'Copy',
+        'tooltip.copied': 'Copied!',
     },
     'pt-BR': {
         'button.confirm': 'Confirmar',
@@ -52,6 +54,8 @@ export const CommonTexts = {
         'table.label.rows-page': 'Itens por página',
         'table.label.pages': 'de {{value}} páginas',
         'table.label.items': '{{first}} - {{last}} de {{total}} itens',
+        'tooltip.copy': 'Copiar',
+        'tooltip.copied': 'Copiado!',
     },
     it: {
         'button.confirm': 'Conferma',
@@ -79,5 +83,7 @@ export const CommonTexts = {
         'table.label.rows-page': 'Elementi per pagina',
         'table.label.pages': 'di {{value}} pagine',
         'table.label.items': '{{first}} - {{last}} di {{total}} elementi',
+        'tooltip.copy': 'Copia',
+        'tooltip.copied': 'Copiato!',
     },
 };

package/dist/index.d.ts

@@ -62,7 +62,7 @@ export { default as SentenceUtils } from './functions/SentenceUtils';
 export { default as UsabilityUtils } from './functions/UsabilityUtils';
 export { default as Header } from './Header';
 export { default as LanguageSelector } from './LanguageSelector';
-export { languages } from './LanguageSelector';
+export { AvailableLanguages } from './LanguageSelector';
 export type { AvailableLanguage } from './LanguageSelector';
 export { default as Participants } from './Participants';
 export { default as SentenceView } from './SentenceView';
@@ -72,3 +72,4 @@ export { default as SyntreesCytoscape } from './TreeView/cytoscape/SyntreesCytos
 export { default as VirtualKeyboard } from './VirtualKeyboard';
 export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
 export type { KeyboardLayout } from './VirtualKeyboard/KeyboardCustomLayout';
+export { default as AppCopyText } from './AppCopyText';

package/dist/index.js

@@ -48,7 +48,7 @@ export { default as SentenceUtils } from './functions/SentenceUtils';
 export { default as UsabilityUtils } from './functions/UsabilityUtils';
 export { default as Header } from './Header';
 export { default as LanguageSelector } from './LanguageSelector';
-export { languages } from './LanguageSelector';
+export { AvailableLanguages } from './LanguageSelector';
 export { default as Participants } from './Participants';
 export { default as SentenceView } from './SentenceView';
 export { default as TreeView } from './TreeView';
@@ -56,3 +56,4 @@ export { default as CytoscapeTreeConverter } from './TreeView/cytoscape/Cytoscap
 export { default as SyntreesCytoscape } from './TreeView/cytoscape/SyntreesCytoscape';
 export { default as VirtualKeyboard } from './VirtualKeyboard';
 export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
+export { default as AppCopyText } from './AppCopyText';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.2.13",
+  "version": "0.2.15",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -53,7 +53,7 @@
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
-    "tycho-storybook": "0.1.10",
+    "tycho-storybook": "0.1.11",
     "yup": "^1.2.0"
   },
   "devDependencies": {