tycho-components 0.7.16 → 0.7.17

package/dist/AppCard/AppCard.d.ts

@@ -0,0 +1,10 @@
+import { DropdownMenuItem } from 'tycho-storybook/dist/DropdownMenu/DropdownMenu';
+import './style.scss';
+type Props = {
+    title: string | React.ReactNode;
+    content: React.ReactNode;
+    footer?: React.ReactNode;
+    options?: DropdownMenuItem[];
+};
+export default function AppCard({ title, content, footer, options, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppCard/AppCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenu } from 'tycho-storybook';
+import './style.scss';
+export default function AppCard({ title, content, footer, options, }) {
+    return (_jsxs("div", { className: "app-card-container", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: title }), options && (_jsx(DropdownMenu, { list: options }))] }), _jsx("div", { className: "body", children: content }), footer && (_jsx("div", { className: "footer", children: footer }))] }));
+}

package/dist/AppCard/index.d.ts

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

package/dist/AppCard/index.js

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

package/dist/AppCard/style.scss

@@ -0,0 +1,26 @@
+.app-card-container {
+  border: 1px solid var(--border-subtle-1);
+  border-radius: var(--radius-100);
+
+  > .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background-color: var(--layer-layer-2);
+    border-bottom: 1px solid var(--border-subtle-1);
+
+    > .title {
+      @include label-large-2;
+    }
+  }
+
+  > .body {
+    padding: 16px;
+  }
+
+  > .footer {
+    padding: 8px 16px;
+    border-top: 1px solid var(--border-subtle-1);
+  }
+}

package/dist/AppEditable/AppEditable.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { format } from 'date-fns-tz';
 import { useCallback } from 'react';
 import EasyEdit from 'react-easy-edit';
 import { useTranslation } from 'react-i18next';
 import Switch from 'react-switch';
+import { Icon, Tooltip } from 'tycho-storybook';
 import AppColorpicker from '../AppColorpicker';
 import './style.scss';
 // Utility to safely get nested values via a dotted path
@@ -101,5 +100,5 @@ export default function AppEditable({ translation, fields, item, save, group, cl
     };
     return (_jsx(_Fragment, { children: fields.map((field, idx) => (_jsxs("div", { className: `editable-container ${className || ''}`, children: [_jsxs("div", { className: "title", children: [_jsxs("h6", { children: [field.title
                                     ? field.title
-                                    : t(`${translation}:${group || ''}.field.${field.name}`), field.required && _jsx("span", { children: "*" })] }), field.tooltip && (_jsx(FontAwesomeIcon, { icon: faQuestionCircle, className: "info", title: t(`${translation}:${group || ''}.tooltip.${field.name}`) }))] }), renderField(field)] }, idx))) }));
+                                    : t(`${translation}:${group || ''}.field.${field.name}`), field.required && _jsx("span", { children: "*" })] }), field.tooltip && (_jsx(Tooltip, { title: t(`${translation}:${group || ''}.tooltip.${field.name}`), children: _jsx("span", { children: _jsx(Icon, { name: 'help', className: "info", size: "x-small" }) }) }))] }), renderField(field)] }, idx))) }));
 }

package/dist/AppEditable/style.scss

@@ -11,8 +11,6 @@
     }
 
     .info {
-      width: 16px;
-      height: 16px;
       margin-left: var(--spacing-xsmall);
       cursor: pointer;
     }
@@ -35,7 +33,7 @@
 .textarea-code {
   .easy-edit-inline-wrapper .easy-edit-component-wrapper {
     textarea {
-      font-family: "Courier New", Courier, monospace;
+      font-family: 'Courier New', Courier, monospace;
       height: 300px;
     }
   }
@@ -65,7 +63,7 @@
     font-size: var(--font-size-body);
     margin-bottom: var(--spacing-xxsmall);
 
-    input[type="checkbox"] {
+    input[type='checkbox'] {
       margin-right: 8px;
     }
   }
@@ -80,12 +78,12 @@
       padding-right: var(--spacing-xsmall);
       padding-left: var(--spacing-xsmall);
 
-      &[name="save"] {
+      &[name='save'] {
         background-color: var(--color-confirmed);
         color: var(--color-surface);
       }
 
-      &[name="cancel"] {
+      &[name='cancel'] {
         background-color: var(--color-error);
         color: var(--color-surface);
       }

package/dist/Header/HeaderReplaceAll/HeaderReplaceAll.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
 import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { getCurrentInput, getCurrentOnChange } from 'tycho-storybook';
+import { IconButton, getCurrentInput, getCurrentOnChange } from 'tycho-storybook';
 import './style.scss';
 export default function HeaderReplaceAll() {
     const { t } = useTranslation('header');
@@ -27,5 +25,5 @@ export default function HeaderReplaceAll() {
         }
     };
     const popoverReplace = (_jsx(Popover, { className: "popover-replace", children: _jsxs(Popover.Body, { children: [_jsx("input", { type: "text", placeholder: t('replace.find.placeholder'), value: findValue, onChange: (e) => setFindValue(e.target.value) }), _jsx("input", { type: "text", placeholder: t('replace.placeholder'), value: replaceValue, onChange: (e) => setReplaceValue(e.target.value) }), _jsx(Button, { size: "sm", onClick: handleReplaceAll, children: "confirm" })] }) }));
-    return (_jsx(OverlayTrigger, { placement: "bottom", trigger: "click", overlay: popoverReplace, rootClose: true, children: _jsx(Button, { className: "btn-replace-all", title: t('replace.all.tooltip'), children: _jsx(FontAwesomeIcon, { icon: faArrowsRotate }) }) }));
+    return (_jsx(OverlayTrigger, { placement: "bottom", trigger: "click", overlay: popoverReplace, rootClose: true, children: _jsx(IconButton, { name: "autorenew", size: "small", title: t('replace.all.tooltip') }) }));
 }

package/dist/Participants/Participants.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useState } from 'react';
-import { Button, Form } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Button } from 'tycho-storybook';
 import AppEditable from '../AppEditable';
 import { useMessageUtils } from '../configs/useMessageUtils';
 import ParticipantCreate from './ParticipantCreate';
@@ -40,12 +39,12 @@ export default function Participants({ document, participants, onChange, useChat
         if (participants.length > 0)
             setParticipant(participants[0]);
     }, []);
-    return (_jsxs("div", { className: "participants-container", children: [_jsxs("div", { className: "header", children: [_jsx("h3", { children: t('label.title') }), _jsx("div", { className: "actions", children: _jsxs("button", { type: "button", className: "action", onClick: () => setOpenCreate(true), children: [_jsx(FontAwesomeIcon, { icon: faPlus, title: t('button.label.add') }), _jsx("span", { className: "ms-2", children: t('button.label.add') })] }) })] }), _jsx("div", { className: "body", children: participant && (_jsxs(_Fragment, { children: [_jsx(Form.Select, { onChange: (e) => setParticipant(participants[Number(e.target.value)]), value: participant
+    return (_jsxs("div", { className: "participants-container", children: [_jsxs("div", { className: "header", children: [_jsx("h3", { children: t('label.title') }), _jsx("div", { className: "actions", children: _jsx(Button, { icon: "add", text: t('button.label.add'), onClick: () => setOpenCreate(true), size: "small", mode: "outlined" }) })] }), _jsx("div", { className: "body", children: participant && (_jsxs(_Fragment, { children: [_jsx(Form.Select, { onChange: (e) => setParticipant(participants[Number(e.target.value)]), value: participant
                                 ? participants.findIndex((p) => p.code === participant.code)
-                                : 0, children: participants.map((el, idx) => (_jsx("option", { value: idx, children: `${el.code} - ${el.name}` }, idx))) }), _jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: PARTICIPANT_FIELDS, className: "fields", reference: "code" }), useChat && (_jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: CHAT_FIELDS, className: "fields", reference: "code" })), _jsx("div", { className: "footer", children: _jsxs(Button, { variant: "danger", onClick: () => {
+                                : 0, children: participants.map((el, idx) => (_jsx("option", { value: idx, children: `${el.code} - ${el.name}` }, idx))) }), _jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: PARTICIPANT_FIELDS, className: "fields", reference: "code" }), useChat && (_jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: CHAT_FIELDS, className: "fields", reference: "code" })), _jsx("div", { className: "footer", children: _jsx(Button, { icon: "delete", text: t('common:button.remove'), size: "small", className: "danger", onClick: () => {
                                     setParticipant(participant);
                                     setOpenRemove(true);
-                                }, children: [_jsx(FontAwesomeIcon, { icon: faTrash }), _jsx("span", { className: "ms-1", children: t('common:button.remove') })] }) })] })) }), participant && openRemove && (_jsx(ParticipantRemove, { document: document, onChange: (list) => {
+                                } }) })] })) }), participant && openRemove && (_jsx(ParticipantRemove, { document: document, onChange: (list) => {
                     onChange(list);
                     setParticipant(list.length > 0 ? list[0] : undefined);
                     setOpenRemove(false);

package/dist/Participants/style.scss

@@ -1,18 +1,12 @@
 .participants-container {
   .header {
     display: flex;
+    align-items: center;
     background-color: var(--color-secondary);
     padding: 8px 16px;
 
     .actions {
       margin-left: auto;
-      margin-top: auto;
-      margin-bottom: auto;
-
-      .action {
-        border: var(--border-default);
-        padding: 0px 16px;
-      }
     }
   }
 

package/dist/TreeView/TreeView.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { faDiagramProject, faDownload, faExpand, faInfoCircle, faMagnifyingGlass, faUpRightAndDownLeftFromCenter, } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { saveAs } from 'file-saver';
 import html2canvas from 'html2canvas';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IconButton } from 'tycho-storybook';
 import AppPlaceholder from '../AppPlaceholder';
 import DateUtils from '../functions/DateUtils';
 import SentenceUtils from '../functions/SentenceUtils';
@@ -117,13 +116,12 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
     if (invalid) {
         return (_jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }));
     }
-    return (_jsxs("div", { className: "tree-view-container", children: [cy &&
-                getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression, openSearchModal)
-                    .filter((btn) => btn.condition)
-                    .map((btn, i) => {
-                    const right = 12 + i * 44;
-                    return (_jsx("button", { className: "floating-button", type: "button", title: t(btn.title), onClick: btn.onClick, style: { right: `${right}px` }, children: _jsx(FontAwesomeIcon, { icon: btn.icon, className: btn.extraClass }) }, i));
-                }), showSearchModal && cy && (_jsx(TreeViewSearch, { struct: struct, cy: cy, onClose: closeSearchModal, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria })), _jsx("div", { id: selector, className: "canvas-tree" }), showInfo && (_jsxs("div", { className: "info", children: [_jsx("span", { children: SentenceUtils.getAsText(struct) }), translations &&
+    return (_jsxs("div", { className: "tree-view-container", children: [_jsx("div", { className: "floating-buttons", children: cy &&
+                    getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression, openSearchModal)
+                        .filter((btn) => btn.condition)
+                        .map((btn, i) => {
+                        return (_jsx(IconButton, { name: btn.icon, title: t(btn.title), onClick: btn.onClick, size: "small", mode: "ghost" }, i));
+                    }) }), showSearchModal && cy && (_jsx(TreeViewSearch, { struct: struct, cy: cy, onClose: closeSearchModal, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria })), _jsx("div", { id: selector, className: "canvas-tree" }), showInfo && (_jsxs("div", { className: "info", children: [_jsx("span", { children: SentenceUtils.getAsText(struct) }), translations &&
                         Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t('date.parsed'), ' ', DateUtils.formatDateTime(struct.parsed, 'dd/MM/yyyy HH:mm:ss')] }))] }))] }));
 }
 const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression, openSearchModal) => [
@@ -131,37 +129,36 @@ const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, exp
         condition: true,
         title: 'button.download.tree',
         onClick: generateImage,
-        icon: faDownload,
+        icon: 'download',
     },
     {
         condition: true,
         title: 'button.recenter.tree',
         onClick: reset,
-        icon: faExpand,
+        icon: 'fullscreen',
     },
     {
         condition: !!expression,
         title: 'button.download.penn',
         onClick: downloadPsd,
-        icon: faDiagramProject,
-        extraClass: 'fa-rotate-90',
+        icon: 'graph_4',
     },
     {
         condition: !!onExpand,
         title: 'button.expand.tree',
-        onClick: onExpand,
-        icon: faUpRightAndDownLeftFromCenter,
+        onClick: onExpand || (() => { }),
+        icon: 'open_in_full',
     },
     {
         condition: true,
         title: 'button.info',
         onClick: toggleInfo,
-        icon: faInfoCircle,
+        icon: 'info',
     },
     {
         condition: true,
         title: 'button.search',
         onClick: openSearchModal || (() => { }),
-        icon: faMagnifyingGlass,
+        icon: 'search',
     },
 ];

package/dist/TreeView/TreeViewSearch/TreeViewSearchField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
-import './style.scss';
 import { Icon, IconButton, Tag } from 'tycho-storybook';
+import './style.scss';
 export default function TreeViewSearchField({ label, value, badges, onValueChange, onAddBadge, onRemoveBadge, }) {
     const { t } = useTranslation('tree');
     const handleKeyPress = (e) => {

package/dist/TreeView/style.scss

@@ -10,18 +10,13 @@
     border-radius: var(--border-radius-button);
   }
 
-  .floating-button {
+  .floating-buttons {
+    display: flex;
     position: absolute;
     top: 16px;
+    right: 16px;
     z-index: 1100;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-
-    svg {
-      width: 24px;
-      height: 24px;
-    }
+    gap: 8px;
   }
 
   .info {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.7.16",
+  "version": "0.7.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -16,10 +16,6 @@
     "dist/"
   ],
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@tanstack/react-table": "^8.20.6",
     "axios": "^1.13.2",
     "classnames": "^2.5.1",
@@ -51,7 +47,7 @@
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
-    "tycho-storybook": "0.4.14",
+    "tycho-storybook": "0.4.15",
     "yup": "^1.2.0"
   },
   "devDependencies": {