@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/stories/TMDataGrid.stories.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { TMDataGrid, TMDeviceProvider } from '../components';
+import { TMDataGridPageSize } from '../components/base/TMDataGrid';
+// Importing the DevExtreme library's Material Design theme in light blue color scheme
+import 'devextreme/dist/css/dx.fluent.blue.light.compact.css';
+// Importing custom styles for the tm-sdkui library
+// import '/lib/css/tm-sdkui.css';
+import { sortArgTypes } from './TMStoriesUtils';
+const generateData = (count) => {
+    const data = [];
+    for (let i = 1; i <= count; i++) {
+        data.push({
+            id: i,
+            name: `User ${i}`,
+            email: `user${i}@example.com`,
+            phone: `+1-555-000${i % 1000}`,
+            city: `City ${i % 100}`,
+            age: 20 + (i % 50),
+            gender: i % 2 === 0 ? "Male" : "Female",
+            address: `Street ${i}`,
+            country: `Country ${i % 5}`,
+            zipCode: `12345-${i % 100}`,
+            state: `State ${i % 10}`,
+            occupation: `Occupation ${i % 3}`,
+            company: `Company ${i % 10}`,
+            socialSecurityNumber: `SSN-${i % 10000}`,
+            birthDate: `199${(i % 30) + 1}-01-01`,
+            maritalStatus: i % 2 === 0 ? "Single" : "Married",
+            hobby: `Hobby ${i % 5}`,
+            profilePicture: `https://example.com/pic${i}.jpg`,
+            lastLogin: `2025-02-0${i % 10}`,
+            creditScore: 600 + (i % 400),
+            loyaltyPoints: i % 1000,
+            referralCode: `REF${i % 1000}`,
+            preferredLanguage: `Language ${i % 5}`,
+            subscriptionStatus: i % 2 === 0 ? "Active" : "Inactive",
+            device: `Device ${i % 5}`,
+            lastPurchaseDate: `2025-01-0${i % 10}`,
+            shippingAddress: `Address ${i}`,
+            preferredPaymentMethod: `Payment ${i % 3}`,
+            totalSpent: 100 + (i * 10),
+            referralCount: i % 50,
+            notes: `Notes about user ${i}`,
+            lastUpdated: `2025-02-0${i % 10}`,
+            emergencyContact: `Emergency ${i % 5}`,
+            jobTitle: `Job ${i % 10}`,
+            vehicle: `Vehicle ${i % 4}`,
+            bloodType: i % 4 === 0 ? "O" : i % 4 === 1 ? "A" : i % 4 === 2 ? "B" : "AB",
+            pet: i % 2 === 0 ? "Dog" : "Cat",
+            subscriptionPlan: `Plan ${i % 3}`,
+            favoriteColor: `Color ${i % 7}`,
+        });
+    }
+    return data;
+};
+// Default export for Storybook configuration for TMDataGrid component
+export default {
+    // The title will determine how the component appears in the sidebar of Storybook
+    title: 'Components/TMDataGrid',
+    // Specifies the component that is being documented in this story
+    component: TMDataGrid,
+    decorators: [(Story) => (_jsxs(TMDeviceProvider, { children: [" ", _jsx(Story, {}), " "] })),],
+    // Tags for categorizing the component within Storybook
+    tags: ['autodocs'],
+    // Description
+    description: 'A responsive, customizable data grid component for displaying tabular data efficiently.',
+    argTypes: sortArgTypes({
+        accessKey: {
+            description: "Specifies the shortcut key that sets focus on the UI component",
+            control: { type: 'text' },
+            type: { name: "string", required: false },
+        },
+        activeStateEnabled: {
+            description: "Specifies whether the UI component changes its visual state as a result of user interaction"
+        },
+        allowColumnReordering: {
+            description: "Specifies whether a user can reorder columns"
+        },
+        allowColumnResizing: {
+            description: "Specifies whether a user can resize columns"
+        },
+        autoNavigateToFocusedRow: {
+            description: "Automatically scrolls the component to the focused row when the focusedRowKey is changed. Incompatible with infinite scrolling mode"
+        },
+        cacheEnabled: {
+            description: "Specifies whether data should be cached"
+        },
+        cellHintEnabled: {
+            description: "Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content"
+        },
+        columnAutoWidth: {
+            description: "Specifies whether columns should adjust their widths to the content"
+        },
+        columnChooser: {
+            description: "Configures the column chooser"
+        },
+        columnFixing: {
+            description: "Configures column fixing"
+        },
+        columnHidingEnabled: {
+            description: "Specifies whether the UI component should hide columns to adapt to the screen or container size. Ignored if allowColumnResizing is true and columnResizingMode is 'widget'"
+        },
+        columnMinWidth: {
+            description: "Specifies the minimum width of columns"
+        },
+        columnResizingMode: {
+            description: "Specifies how the UI component resizes columns. Applies only if allowColumnResizing is true"
+        },
+        columns: {
+            description: "An array of grid columns"
+        },
+        columnWidth: {
+            description: "Specifies the width for all data columns. Has a lower priority than the column.width property"
+        },
+        customizeColumns: {
+            description: "Customizes columns after they are created"
+        },
+        dataRowComponent: {
+            description: "An alias for the dataRowTemplate property specified in React. Accepts a custom component"
+        },
+        dataRowRender: {
+            description: "An alias for the dataRowTemplate property specified in React. Accepts a rendering function"
+        },
+        dataRowTemplate: {
+            description: "Specifies a custom template for data rows"
+        },
+        dataSource: {
+            description: "Binds the UI component to data"
+        },
+        dateSerializationFormat: {
+            description: "Specifies the format in which date-time values should be sent to the server"
+        },
+        disabled: {
+            description: "Specifies whether the UI component responds to user interaction"
+        },
+        editing: {
+            description: "Configures editing"
+        },
+        elementAttr: {
+            description: "Specifies the global attributes to be attached to the UI component's container element"
+        },
+        errorRowEnabled: {
+            description: "Indicates whether to show the error row"
+        },
+        export: {
+            description: "Configures client-side exporting"
+        },
+        filterBuilder: {
+            description: "Configures the integrated filter builder"
+        },
+        filterBuilderPopup: {
+            description: "Configures the popup in which the integrated filter builder is shown"
+        },
+        filterPanel: {
+            description: "Configures the filter panel"
+        },
+        filterRow: {
+            description: "Configures the filter row"
+        },
+        filterSyncEnabled: {
+            description: "Specifies whether to synchronize the filter row, header filter, and filter builder"
+        },
+        filterValue: {
+            description: "Specifies a filter expression"
+        },
+        focusedColumnIndex: {
+            description: "The index of the column that contains the focused data cell"
+        },
+        focusedRowEnabled: {
+            description: "Specifies whether the focused row feature is enabled"
+        },
+        focusedRowIndex: {
+            description: "Specifies or indicates the focused data row's index"
+        },
+        focusedRowKey: {
+            description: "Specifies initially or currently focused grid row's key"
+        },
+        grouping: {
+            description: "Configures grouping"
+        },
+        groupPanel: {
+            description: "Configures the group panel"
+        },
+        headerFilter: {
+            description: "Configures the header filter feature"
+        },
+        height: {
+            description: "Specifies the UI component's height"
+        },
+        highlightChanges: {
+            description: "Specifies whether to highlight rows and cells with edited data. repaintChangesOnly should be true"
+        },
+        hint: {
+            description: "Specifies text for a hint that appears when a user pauses on the UI component"
+        },
+        hoverStateEnabled: {
+            description: "Specifies whether to highlight rows when a user moves the mouse pointer over them"
+        },
+        keyboardNavigation: {
+            description: "Configures keyboard navigation"
+        },
+        keyExpr: {
+            description: "Specifies the key property (or properties) that provide key values to access data items"
+        },
+        loadPanel: {
+            description: "Configures the load panel"
+        },
+        masterDetail: {
+            description: "Allows you to build a master-detail interface in the grid"
+        },
+        noDataText: {
+            description: "Specifies a text string shown when the DataGrid does not display any data"
+        },
+        pager: {
+            description: "Configures the pager"
+        },
+        paging: {
+            description: "Configures paging"
+        },
+        remoteOperations: {
+            description: "Notifies the DataGrid of the server's data processing operations"
+        },
+        renderAsync: {
+            description: "Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements"
+        },
+        rowAlternationEnabled: {
+            description: "Specifies whether rows should be shaded differently"
+        },
+        rowDragging: {
+            description: "Configures row reordering using drag and drop gestures"
+        },
+        rtlEnabled: {
+            description: "Switches the UI component to a right-to-left representation"
+        },
+        scrolling: {
+            description: "Configures scrolling"
+        },
+        searchPanel: {
+            description: "Configures the search panel"
+        },
+        selectedRowKeys: {
+            description: "Allows you to select rows or determine which rows are selected"
+        },
+        selection: {
+            description: "Configures runtime selection"
+        },
+        selectionFilter: {
+            description: "Specifies filters for the rows that must be selected initially"
+        },
+        showBorders: {
+            description: "Specifies whether the outer borders of the UI component are visible"
+        },
+        showColumnHeaders: {
+            description: "Specifies whether column headers are visible"
+        },
+        showColumnLines: {
+            description: "Specifies whether vertical lines that separate one column from another are visible"
+        },
+        showRowLines: {
+            description: "Specifies whether horizontal lines that separate one row from another are visible"
+        },
+        stateStoring: {
+            description: "Configures state storing"
+        },
+        summary: {
+            description: "Specifies the properties of the grid summary"
+        },
+        tabIndex: {
+            description: "Specifies the number of the element when the Tab key is used for navigating"
+        },
+        toolbar: {
+            description: "Configures the toolbar"
+        },
+        visible: {
+            description: "Specifies whether the UI component is visible"
+        },
+        width: {
+            description: "Specifies the UI component's width"
+        },
+        wordWrapEnabled: {
+            description: "Specifies whether text that does not fit into a column should be wrapped"
+        },
+    }),
+};
+/******* 1. Default Template and Default TMDatagrid *******/
+const DefaultTemplate = (args) => {
+    const dataSource = useMemo(() => generateData(5), []);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [focusedRowKey, setFocusedRowKey] = useState(undefined);
+    const onSelectionChanged = useCallback((e) => {
+        setSelectedRowKeys(e.component.getSelectedRowKeys());
+    }, []);
+    const onFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, []);
+    return (_jsx(TMDataGrid, { ...args, dataSource: dataSource, pageSize: TMDataGridPageSize.Small, keyExpr: "id", width: "100%", height: "100%", focusedRowEnabled: true, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, columnResizingMode: 'widget', columnHidingEnabled: true, columnAutoWidth: true, allowColumnResizing: true, allowColumnReordering: true, style: { userSelect: "none" } }));
+};
+export const DefaultTMDatagrid = DefaultTemplate.bind({});
+DefaultTMDatagrid.args = {};
+/******* 2. Default Template and Datagrid with Search Panel to Right *******/
+export const TMDatagridWithSearchPanelToRight = DefaultTemplate.bind({});
+TMDatagridWithSearchPanelToRight.args = {
+    searchPanelToolbarPosition: 'default',
+};
+/******* 3. Default Template and Datagrid with Counter enable *******/
+export const TMDatagridWithCounters = DefaultTemplate.bind({});
+TMDatagridWithCounters.args = {
+    counterConfig: { show: true }
+};

package/lib/stories/TMHtmlContentDisplay.stories.d.ts

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

package/lib/stories/TMHtmlContentDisplay.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import TMHtmlContentDisplay from '../components/editors/TMHtmlContentDisplay';
+const sampleMarkup = `
+  <p>This is a <strong>sample</strong> paragraph with <a target="_blank" href="https://www.google.com/">a link</a>.</p>
+  <p>Another paragraph with the word <u>sample</u> and some <em>emphasized</em> content.</p>
+  <ul>
+    <li>First item</li>
+    <li>Second item with <u>underline</u> and <em>emphasis</em></li>
+  </ul>
+  <ol>
+    <li>Ordered item one</li>
+    <li>Ordered item <em>two</em> with a sample word</li>
+  </ol>
+  <p>Check out this URL: https://www.example.com</p>
+  <p>Check out this URL: https://www.illibraio.it/test-quiz/test/</p>
+  <p>Check out this URL: http://www.illibraio.it/test-quiz/test/</p>
+  <p>Check out this URL: https://www.topconsult.it/it</p>
+  
+`;
+const meta = {
+    title: 'Components/TMHtmlContentDisplay',
+    component: TMHtmlContentDisplay,
+    argTypes: {
+        searchText: { control: false }, // Disable default control
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        const [searchText, setSearchText] = useState(args.searchText || '');
+        return (_jsxs("div", { style: { padding: 20 }, children: [_jsx("input", { type: "text", placeholder: "Search text...", value: searchText, onChange: (e) => setSearchText(e.target.value), style: {
+                        marginBottom: '1rem',
+                        padding: '0.5rem',
+                        width: '100%',
+                        maxWidth: '300px',
+                        fontSize: '1rem',
+                    } }), _jsx(TMHtmlContentDisplay, { ...args, searchText: searchText })] }));
+    },
+    args: {
+        markup: sampleMarkup,
+        isSelected: false,
+        searchText: '',
+    },
+};

package/lib/stories/TMHtmlEditor.stories.d.ts

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

package/lib/stories/TMHtmlEditor.stories.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import TMHtmlEditor from '../components/editors/TMHtmlEditor';
+import { TMHtmlContentDisplay } from '../components';
+const meta = {
+    title: 'Components/TMHtmlEditor',
+    component: TMHtmlEditor,
+    argTypes: {
+        onValueChanged: { control: false },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        const [content, setContent] = useState('');
+        const [cleanComment, setCleanComment] = useState('');
+        const [mentionsConfig, setMentionsConfig] = useState([]);
+        useEffect(() => {
+            const mentions = [{
+                    dataSource: [{ text: 'Marco Rossi', icon: '👤' }, { text: 'Paolo Bianchi', icon: '👩' },],
+                    searchExpr: 'text',
+                    displayExpr: 'text',
+                    valueExpr: 'text',
+                    itemTemplate: function (itemData) {
+                        return `<div style="display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%;">
+                            ${itemData.icon}
+                            <span>${itemData.text}</span>
+                        </div>`;
+                    },
+                }];
+            setMentionsConfig(mentions);
+        }, []);
+        const handleValueChange = (e) => {
+            setContent(e.value);
+            setCleanComment(e.value
+                // Replace </p> with '' only if followed by <ol> or <ul>
+                .replace(/<\/p>(?=\s*<(ol|ul)>)/gi, '')
+                // Replace all other </p> with '\r\n'
+                .replace(/<\/p>/gi, '\r\n')
+                // Remove all <p> tags
+                .replace(/<p>/gi, '')
+                // Remove all <br> tags
+                .replace(/<br>/gi, '')
+                // Trim whitespace
+                .trim());
+        };
+        return (_jsxs("div", { style: { padding: 20 }, children: [_jsx(TMHtmlEditor, { ...args, onValueChanged: handleValueChange, isEditorEnabled: true, mentionsConfig: mentionsConfig }), _jsxs("div", { style: { marginTop: '1rem', padding: '0.5rem', backgroundColor: '#f5f5f5' }, children: [_jsx("h4", { children: "Output" }), _jsx(TMHtmlContentDisplay, { markup: cleanComment, isSelected: false })] }), _jsxs("div", { style: { marginTop: '1rem', padding: '0.5rem', backgroundColor: '#e0e0e0' }, children: [_jsx("h4", { children: "Output (HTML String)" }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: JSON.stringify(cleanComment) })] })] }));
+    },
+};

package/lib/stories/TMIcons.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/react-vite";
+declare const _default: Meta;
+export default _default;
+export declare const TMIcons: any;

package/lib/stories/TMIcons.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon123, IconABC, IconAccessPoint, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAddressBook, IconAdvanced, IconAlarmPlus, IconAll, IconAppAdvancedSettings, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowSortedDown, IconArrowSortedUp, IconArrowUnsorted, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBatchUpdate, IconBell, IconBellCheck, IconBellCheckOutline, IconBellOutline, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconChangeUser, IconCheck, IconCheckIn, IconChevronDown, IconChevronRight, IconCircleInfo, IconClear, IconClearButton, IconCloseCircle, IconCloseOutline, IconCloud, IconColumns, IconCommand, IconConvertFilePdf, IconCopy, IconCount, IconCrown, IconDashboard, IconDataList, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetailDcmts, IconDetails, IconDisk, IconDotsVerticalCircleOutline, IconDown, IconDownload, IconDraggabledots, IconDuplicate, IconEasy, IconEdit, IconEnvelopeOpenText, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconExportTo, IconFactory, IconFastBackward, IconFastForward, IconFastSearch, IconFileDots, IconFileSearch, IconFilter, IconFoldeAdd, IconFolder, IconFolderOpen, IconFolderSearch, IconFolderZip, IconForceStop, IconForward, IconFreeSearch, IconFreeze, IconFunction, IconGreaterThan, IconGreaterThanOrEqual, IconGrid, IconHeart, IconHide, IconHistory, IconHourglass, IconImport, IconInfo, IconInsertAbove, IconInsertBelow, IconKey, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLightningFill, IconLink, IconList, IconLock, IconLockClosed, IconLogin, IconLogout, IconMail, IconMapping, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMic, IconMonitor, IconMultipleSelection, IconNone, IconNotification, IconNotStarted, IconNull, IconOpenInNew, IconPalette, IconPassword, IconPaste, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconProcess, IconProgress, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRecentlyViewed, IconRecursiveOps, IconRefresh, IconRelation, IconRelationManyToMany, IconRelationOneToMany, IconReset, IconRight, IconSave, IconSavedQuery, IconSearch, IconSearchCheck, IconSelected, IconServerService, IconSettings, IconShare, IconSharedDcmt, IconShow, IconSignature, IconSignaturePencil, IconSignCert, IconSort, IconSortAsc, IconSortAscClock, IconSortAscLetters, IconSortAscNumbers, IconSortDesc, IconSortDescClock, IconSortDescLetters, IconSortDescNumbers, IconStar, IconStarRemove, IconStatistics, IconStop, IconStopwatch, IconSubstFile, IconSuccess, IconSuccessCirlce, IconSuitcase, IconSum, IconSupport, IconSync, IconTag, IconTest, IconTree, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserCheck, IconUserExpired, IconUserGroup, IconUserLevelAdministrator, IconUserLevelAutonomousAdministrator, IconUserLevelMember, IconUserLevelSystemAdministrator, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace } from "../helper";
+export default {
+    title: "Icons/TMIcons",
+    component: IconAccessPoint,
+    argTypes: {
+        fontSize: { control: "text" },
+        color: { control: "color" },
+    },
+};
+const TMIconsTemplate = (args) => (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: "flex", gap: "20px" }, children: [_jsx("span", { title: "IconAccessPoint", children: _jsx(IconAccessPoint, { ...args }) }), _jsx("span", { title: "IconCloseOutline", children: _jsx(IconCloseOutline, { ...args }) }), _jsx("span", { title: "IconArchive", children: _jsx(IconArchive, { ...args }) }), _jsx("span", { title: "IconLogin", children: _jsx(IconLogin, { ...args }) }), _jsx("span", { title: "IconUser", children: _jsx(IconUser, { ...args }) }), _jsx("span", { title: "IconPassword", children: _jsx(IconPassword, { ...args }) }), _jsx("span", { title: "IconLanguage", children: _jsx(IconLanguage, { ...args }) }), _jsx("span", { title: "IconSuitcase", children: _jsx(IconSuitcase, { ...args }) }), _jsx("span", { title: "IconProcess", children: _jsx(IconProcess, { ...args }) }), _jsx("span", { title: "IconSupport", children: _jsx(IconSupport, { ...args }) }), _jsx("span", { title: "IconMonitor", children: _jsx(IconMonitor, { ...args }) }), _jsx("span", { title: "IconDashboard", children: _jsx(IconDashboard, { ...args }) }), _jsx("span", { title: "IconAdd", children: _jsx(IconAdd, { ...args }) }), _jsx("span", { title: "IconDelete", children: _jsx(IconDelete, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconDuplicate", children: _jsx(IconDuplicate, { ...args }) }), _jsx("span", { title: "IconRefresh", children: _jsx(IconRefresh, { ...args }) }), _jsx("span", { title: "IconExpandRight", children: _jsx(IconExpandRight, { ...args }) }), _jsx("span", { title: "IconColumns", children: _jsx(IconColumns, { ...args }) }), _jsx("span", { title: "IconSave", children: _jsx(IconSave, { ...args }) }), _jsx("span", { title: "IconArrowDown", children: _jsx(IconArrowDown, { ...args }) }), _jsx("span", { title: "IconArrowUp", children: _jsx(IconArrowUp, { ...args }) }), _jsx("span", { title: "IconUndo", children: _jsx(IconUndo, { ...args }) }), _jsx("span", { title: "IconShow", children: _jsx(IconShow, { ...args }) }), _jsx("span", { title: "IconHide", children: _jsx(IconHide, { ...args }) }), _jsx("span", { title: "IconPreview", children: _jsx(IconPreview, { ...args }) }), _jsx("span", { title: "IconCount", children: _jsx(IconCount, { ...args }) }), _jsx("span", { title: "IconPencil", children: _jsx(IconPencil, { ...args }) }), _jsx("span", { title: "IconEraser", children: _jsx(IconEraser, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconAll", children: _jsx(IconAll, { ...args }) }), _jsx("span", { title: "IconSelected", children: _jsx(IconSelected, { ...args }) }), _jsx("span", { title: "IconVisible", children: _jsx(IconVisible, { ...args }) }), _jsx("span", { title: "IconCloseCircle", children: _jsx(IconCloseCircle, { ...args }) }), _jsx("span", { title: "IconApplyAndClose", children: _jsx(IconApplyAndClose, { ...args }) }), _jsx("span", { title: "IconApply", children: _jsx(IconApply, { ...args }) }), _jsx("span", { title: "IconSettings", children: _jsx(IconSettings, { ...args }) }), _jsx("span", { title: "IconNotification", children: _jsx(IconNotification, { ...args }) }), _jsx("span", { title: "IconHeart", children: _jsx(IconHeart, { ...args }) }), _jsx("span", { title: "IconUserProfile", children: _jsx(IconUserProfile, { ...args }) }), _jsx("span", { title: "IconWorkflow", children: _jsx(IconWorkflow, { ...args }) }), _jsx("span", { title: "IconBackward", children: _jsx(IconBackward, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconForward", children: _jsx(IconForward, { ...args }) }), _jsx("span", { title: "IconFastBackward", children: _jsx(IconFastBackward, { ...args }) }), _jsx("span", { title: "IconFastForward", children: _jsx(IconFastForward, { ...args }) }), _jsx("span", { title: "IconLogout", children: _jsx(IconLogout, { ...args }) }), _jsx("span", { title: "IconWifi", children: _jsx(IconWifi, { ...args }) }), _jsx("span", { title: "IconMenuHorizontal", children: _jsx(IconMenuHorizontal, { ...args }) }), _jsx("span", { title: "IconMenuVertical", children: _jsx(IconMenuVertical, { ...args }) }), _jsx("span", { title: "IconOpenInNew", children: _jsx(IconOpenInNew, { ...args }) }), _jsx("span", { title: "IconMail", children: _jsx(IconMail, { ...args }) }), _jsx("span", { title: "IconCopy", children: _jsx(IconCopy, { ...args }) }), _jsx("span", { title: "IconSearch", children: _jsx(IconSearch, { ...args }) }), _jsx("span", { title: "IconMenuKebab", children: _jsx(IconMenuKebab, { ...args }) }), _jsx("span", { title: "IconDown", children: _jsx(IconDown, { ...args }) }), _jsx("span", { title: "IconUp", children: _jsx(IconUp, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconLeft", children: _jsx(IconLeft, { ...args }) }), _jsx("span", { title: "IconRight", children: _jsx(IconRight, { ...args }) }), _jsx("span", { title: "IconArrowLeft", children: _jsx(IconArrowLeft, { ...args }) }), _jsx("span", { title: "IconArrowRight", children: _jsx(IconArrowRight, { ...args }) }), _jsx("span", { title: "IconFileDots", children: _jsx(IconFileDots, { ...args }) }), _jsx("span", { title: "IconDownload", children: _jsx(IconDownload, { ...args }) }), _jsx("span", { title: "IconUpload", children: _jsx(IconUpload, { ...args }) }), _jsx("span", { title: "IconFolderSearch", children: _jsx(IconFolderSearch, { ...args }) }), _jsx("span", { title: "IconFoldeAdd", children: _jsx(IconFoldeAdd, { ...args }) }), _jsx("span", { title: "IconEqual", children: _jsx(IconEqual, { ...args }) }), _jsx("span", { title: "IconEqualNot", children: _jsx(IconEqualNot, { ...args }) }), _jsx("span", { title: "IconGreaterThan", children: _jsx(IconGreaterThan, { ...args }) }), _jsx("span", { title: "IconLessThan", children: _jsx(IconLessThan, { ...args }) }), _jsx("span", { title: "IconLessThanOrEqual", children: _jsx(IconLessThanOrEqual, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconGreaterThanOrEqual", children: _jsx(IconGreaterThanOrEqual, { ...args }) }), _jsx("span", { title: "IconSort", children: _jsx(IconSort, { ...args }) }), _jsx("span", { title: "IconPlatform", children: _jsx(IconPlatform, { ...args }) }), _jsx("span", { title: "Icon123", children: _jsx(Icon123, { ...args }) }), _jsx("span", { title: "IconABC", children: _jsx(IconABC, { ...args }) }), _jsx("span", { title: "IconCalendar", children: _jsx(IconCalendar, { ...args }) }), _jsx("span", { title: "IconAtSign", children: _jsx(IconAtSign, { ...args }) }), _jsx("span", { title: "IconEdit", children: _jsx(IconEdit, { ...args }) }), _jsx("span", { title: "IconWarning", children: _jsx(IconWarning, { ...args }) }), _jsx("span", { title: "IconInfo", children: _jsx(IconInfo, { ...args }) }), _jsx("span", { title: "IconSuccess", children: _jsx(IconSuccess, { ...args }) }), _jsx("span", { title: "IconAlarmPlus", children: _jsx(IconAlarmPlus, { ...args }) }), _jsx("span", { title: "IconHourglass", children: _jsx(IconHourglass, { ...args }) }), _jsx("span", { title: "IconNone", children: _jsx(IconNone, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconNotStarted", children: _jsx(IconNotStarted, { ...args }) }), _jsx("span", { title: "IconProgress", children: _jsx(IconProgress, { ...args }) }), _jsx("span", { title: "IconInsertAbove", children: _jsx(IconInsertAbove, { ...args }) }), _jsx("span", { title: "IconInsertBelow", children: _jsx(IconInsertBelow, { ...args }) }), _jsx("span", { title: "IconFilter", children: _jsx(IconFilter, { ...args }) }), _jsx("span", { title: "IconDcmtType", children: _jsx(IconDcmtType, { ...args }) }), _jsx("span", { title: "IconDcmtTypeOnlyMetadata", children: _jsx(IconDcmtTypeOnlyMetadata, { ...args }) }), _jsx("span", { title: "IconDcmtTypeSys", children: _jsx(IconDcmtTypeSys, { ...args }) }), _jsx("span", { title: "IconCloud", children: _jsx(IconCloud, { ...args }) }), _jsx("span", { title: "IconWeb", children: _jsx(IconWeb, { ...args }) }), _jsx("span", { title: "IconBxInfo", children: _jsx(IconBxInfo, { ...args }) }), _jsx("span", { title: "IconStop", children: _jsx(IconStop, { ...args }) }), _jsx("span", { title: "IconPlay", children: _jsx(IconPlay, { ...args }) }), _jsx("span", { title: "IconStopwatch", children: _jsx(IconStopwatch, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconUpdate", children: _jsx(IconUpdate, { ...args }) }), _jsx("span", { title: "IconSuccessCirlce", children: _jsx(IconSuccessCirlce, { ...args }) }), _jsx("span", { title: "IconCircleInfo", children: _jsx(IconCircleInfo, { ...args }) }), _jsx("span", { title: "IconDetails", children: _jsx(IconDetails, { ...args }) }), _jsx("span", { title: "IconFreeze", children: _jsx(IconFreeze, { ...args }) }), _jsx("span", { title: "IconUnFreeze", children: _jsx(IconUnFreeze, { ...args }) }), _jsx("span", { title: "IconProgressCompleted", children: _jsx(IconProgressCompleted, { ...args }) }), _jsx("span", { title: "IconProgressNotCompleted", children: _jsx(IconProgressNotCompleted, { ...args }) }), _jsx("span", { title: "IconProgressAbortRequested", children: _jsx(IconProgressAbortRequested, { ...args }) }), _jsx("span", { title: "IconProgressReady", children: _jsx(IconProgressReady, { ...args }) }), _jsx("span", { title: "IconProgressStarted", children: _jsx(IconProgressStarted, { ...args }) }), _jsx("span", { title: "IconProgressRunning", children: _jsx(IconProgressRunning, { ...args }) }), _jsx("span", { title: "IconUserLevelMember", children: _jsx(IconUserLevelMember, { ...args }) }), _jsx("span", { title: "IconUserLevelAdministrator", children: _jsx(IconUserLevelAdministrator, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconUserLevelSystemAdministrator", children: _jsx(IconUserLevelSystemAdministrator, { ...args }) }), _jsx("span", { title: "IconUserLevelAutonomousAdministrator", children: _jsx(IconUserLevelAutonomousAdministrator, { ...args }) }), _jsx("span", { title: "IconHistory", children: _jsx(IconHistory, { ...args }) }), _jsx("span", { title: "IconForceStop", children: _jsx(IconForceStop, { ...args }) }), _jsx("span", { title: "IconDraggabledots", children: _jsx(IconDraggabledots, { ...args }) }), _jsx("span", { title: "IconClear", children: _jsx(IconClear, { ...args }) }), _jsx("span", { title: "IconClearButton", children: _jsx(IconClearButton, { ...args }) }), _jsx("span", { title: "IconAddCircleOutline", children: _jsx(IconAddCircleOutline, { ...args }) }), _jsx("span", { title: "IconDotsVerticalCircleOutline", children: _jsx(IconDotsVerticalCircleOutline, { ...args }) }), _jsx("span", { title: "IconMapping", children: _jsx(IconMapping, { ...args }) }), _jsx("span", { title: "IconAutoConfig", children: _jsx(IconAutoConfig, { ...args }) }), _jsx("span", { title: "IconArchiveDoc", children: _jsx(IconArchiveDoc, { ...args }) }), _jsx("span", { title: "IconCommand", children: _jsx(IconCommand, { ...args }) }), _jsx("span", { title: "IconSum", children: _jsx(IconSum, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconDisk", children: _jsx(IconDisk, { ...args }) }), _jsx("span", { title: "IconDataList", children: _jsx(IconDataList, { ...args }) }), _jsx("span", { title: "IconWindowMaximize", children: _jsx(IconWindowMaximize, { ...args }) }), _jsx("span", { title: "IconWindowMinimize", children: _jsx(IconWindowMinimize, { ...args }) }), _jsx("span", { title: "IconReset", children: _jsx(IconReset, { ...args }) }), _jsx("span", { title: "IconExport", children: _jsx(IconExport, { ...args }) }), _jsx("span", { title: "IconImport", children: _jsx(IconImport, { ...args }) }), _jsx("span", { title: "IconPalette", children: _jsx(IconPalette, { ...args }) }), _jsx("span", { title: "IconFastSearch", children: _jsx(IconFastSearch, { ...args }) }), _jsx("span", { title: "IconUserGroup", children: _jsx(IconUserGroup, { ...args }) }), _jsx("span", { title: "IconBoard", children: _jsx(IconBoard, { ...args }) }), _jsx("span", { title: "IconActivity", children: _jsx(IconActivity, { ...args }) }), _jsx("span", { title: "IconWorkspace", children: _jsx(IconWorkspace, { ...args }) }), _jsx("span", { title: "IconAttachment", children: _jsx(IconAttachment, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconActivityLog", children: _jsx(IconActivityLog, { ...args }) }), _jsx("span", { title: "IconCrown", children: _jsx(IconCrown, { ...args }) }), _jsx("span", { title: "IconChangeUser", children: _jsx(IconChangeUser, { ...args }) }), _jsx("span", { title: "IconPaste", children: _jsx(IconPaste, { ...args }) }), _jsx("span", { title: "IconFileSearch", children: _jsx(IconFileSearch, { ...args }) }), _jsx("span", { title: "IconStar", children: _jsx(IconStar, { ...args }) }), _jsx("span", { title: "IconStarRemove", children: _jsx(IconStarRemove, { ...args }) }), _jsx("span", { title: "IconLightningFill", children: _jsx(IconLightningFill, { ...args }) }), _jsx("span", { title: "IconLink", children: _jsx(IconLink, { ...args }) }), _jsx("span", { title: "IconEasy", children: _jsx(IconEasy, { ...args }) }), _jsx("span", { title: "IconConvertFilePdf", children: _jsx(IconConvertFilePdf, { ...args }) }), _jsx("span", { title: "IconRelation", children: _jsx(IconRelation, { ...args }) }), _jsx("span", { title: "IconCheckIn", children: _jsx(IconCheckIn, { ...args }) }), _jsx("span", { title: "IconRecursiveOps", children: _jsx(IconRecursiveOps, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconSearchCheck", children: _jsx(IconSearchCheck, { ...args }) }), _jsx("span", { title: "IconSignature", children: _jsx(IconSignature, { ...args }) }), _jsx("span", { title: "IconSavedQuery", children: _jsx(IconSavedQuery, { ...args }) }), _jsx("span", { title: "IconSync", children: _jsx(IconSync, { ...args }) }), _jsx("span", { title: "IconAdvanced", children: _jsx(IconAdvanced, { ...args }) }), _jsx("span", { title: "IconSubstFile", children: _jsx(IconSubstFile, { ...args }) }), _jsx("span", { title: "IconBatchUpdate", children: _jsx(IconBatchUpdate, { ...args }) }), _jsx("span", { title: "IconShare", children: _jsx(IconShare, { ...args }) }), _jsx("span", { title: "IconSharedDcmt", children: _jsx(IconSharedDcmt, { ...args }) }), _jsx("span", { title: "IconExportTo", children: _jsx(IconExportTo, { ...args }) }), _jsx("span", { title: "IconArrowSortedDown", children: _jsx(IconArrowSortedDown, { ...args }) }), _jsx("span", { title: "IconArrowSortedUp", children: _jsx(IconArrowSortedUp, { ...args }) }), _jsx("span", { title: "IconStatistics", children: _jsx(IconStatistics, { ...args }) }), _jsx("span", { title: "IconArrowUnsorted", children: _jsx(IconArrowUnsorted, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconPrinter", children: _jsx(IconPrinter, { ...args }) }), _jsx("span", { title: "IconFactory", children: _jsx(IconFactory, { ...args }) }), _jsx("span", { title: "IconTest", children: _jsx(IconTest, { ...args }) }), _jsx("span", { title: "IconCheck", children: _jsx(IconCheck, { ...args }) }), _jsx("span", { title: "IconSortAsc", children: _jsx(IconSortAsc, { ...args }) }), _jsx("span", { title: "IconSortDesc", children: _jsx(IconSortDesc, { ...args }) }), _jsx("span", { title: "IconSortAscLetters", children: _jsx(IconSortAscLetters, { ...args }) }), _jsx("span", { title: "IconSortDescLetters", children: _jsx(IconSortDescLetters, { ...args }) }), _jsx("span", { title: "IconSortAscNumbers", children: _jsx(IconSortAscNumbers, { ...args }) }), _jsx("span", { title: "IconSortDescNumbers", children: _jsx(IconSortDescNumbers, { ...args }) }), _jsx("span", { title: "IconSortAscClock", children: _jsx(IconSortAscClock, { ...args }) }), _jsx("span", { title: "IconSortDescClock", children: _jsx(IconSortDescClock, { ...args }) }), _jsx("span", { title: "IconTree", children: _jsx(IconTree, { ...args }) }), _jsx("span", { title: "IconGrid", children: _jsx(IconGrid, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconList", children: _jsx(IconList, { ...args }) }), _jsx("span", { title: "IconLock", children: _jsx(IconLock, { ...args }) }), _jsx("span", { title: "IconLockClosed", children: _jsx(IconLockClosed, { ...args }) }), _jsx("span", { title: "IconBxLock", children: _jsx(IconBxLock, { ...args }) }), _jsx("span", { title: "IconFolder", children: _jsx(IconFolder, { ...args }) }), _jsx("span", { title: "IconFolderOpen", children: _jsx(IconFolderOpen, { ...args }) }), _jsx("span", { title: "IconTag", children: _jsx(IconTag, { ...args }) }), _jsx("span", { title: "IconFolderZip", children: _jsx(IconFolderZip, { ...args }) }), _jsx("span", { title: "IconBell", children: _jsx(IconBell, { ...args }) }), _jsx("span", { title: "IconBellCheck", children: _jsx(IconBellCheck, { ...args }) }), _jsx("span", { title: "IconBellOutline", children: _jsx(IconBellOutline, { ...args }) }), _jsx("span", { title: "IconBellCheckOutline", children: _jsx(IconBellCheckOutline, { ...args }) }), _jsx("span", { title: "IconEnvelopeOpenText", children: _jsx(IconEnvelopeOpenText, { ...args }) }), _jsx("span", { title: "IconMetadata_Computed", children: _jsx(IconMetadata_Computed, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconMetadata_Text", children: _jsx(IconMetadata_Text, { ...args }) }), _jsx("span", { title: "IconMetadata_User", children: _jsx(IconMetadata_User, { ...args }) }), _jsx("span", { title: "IconMetadata_Date", children: _jsx(IconMetadata_Date, { ...args }) }), _jsx("span", { title: "IconMetadata_DataList", children: _jsx(IconMetadata_DataList, { ...args }) }), _jsx("span", { title: "IconMetadata_DynamicDataList", children: _jsx(IconMetadata_DynamicDataList, { ...args }) }), _jsx("span", { title: "IconMetadata_Numerator", children: _jsx(IconMetadata_Numerator, { ...args }) }), _jsx("span", { title: "IconMetadata_Special", children: _jsx(IconMetadata_Special, { ...args }) }), _jsx("span", { title: "IconMetadata_Numeric", children: _jsx(IconMetadata_Numeric, { ...args }) }), _jsx("span", { title: "IconMetadata", children: _jsx(IconMetadata, { ...args }) }), _jsx("span", { title: "IconRelationManyToMany", children: _jsx(IconRelationManyToMany, { ...args }) }), _jsx("span", { title: "IconRelationOneToMany", children: _jsx(IconRelationOneToMany, { ...args }) }), _jsx("span", { title: "IconBoxArchiveIn", children: _jsx(IconBoxArchiveIn, { ...args }) }), _jsx("span", { title: "IconBasket", children: _jsx(IconBasket, { ...args }) }), _jsx("span", { title: "IconSignCert", children: _jsx(IconSignCert, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconServerService", children: _jsx(IconServerService, { ...args }) }), _jsx("span", { title: "IconUserExpired", children: _jsx(IconUserExpired, { ...args }) }), _jsx("span", { title: "IconUserCheck", children: _jsx(IconUserCheck, { ...args }) }), _jsx("span", { title: "IconAddressBook", children: _jsx(IconAddressBook, { ...args }) }), _jsx("span", { title: "IconFreeSearch", children: _jsx(IconFreeSearch, { ...args }) }), _jsx("span", { title: "IconMic", children: _jsx(IconMic, { ...args }) }), _jsx("span", { title: "IconKey", children: _jsx(IconKey, { ...args }) }), _jsx("span", { title: "IconDetailDcmts", children: _jsx(IconDetailDcmts, { ...args }) }), _jsx("span", { title: "IconMultipleSelection", children: _jsx(IconMultipleSelection, { ...args }) }), _jsx("span", { title: "IconChevronRight", children: _jsx(IconChevronRight, { ...args }) }), _jsx("span", { title: "IconChevronDown", children: _jsx(IconChevronDown, { ...args }) }), _jsx("span", { title: "IconRecentlyViewed", children: _jsx(IconRecentlyViewed, { ...args }) }), _jsx("span", { title: "IconFunction", children: _jsx(IconFunction, { ...args }) }), _jsx("span", { title: "IconNull", children: _jsx(IconNull, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconAppAdvancedSettings", children: _jsx(IconAppAdvancedSettings, { ...args }) }), _jsx("span", { title: "IconSignaturePencil", children: _jsx(IconSignaturePencil, { ...args }) })] })] }));
+export const TMIcons = TMIconsTemplate.bind({});
+TMIcons.args = { fontSize: "48px", color: "black" };

package/lib/stories/TMSDKUI_Localizator.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/react-vite";
+declare const _default: Meta;
+export default _default;
+export declare const DefaultLocalizator: any;

package/lib/stories/TMSDKUI_Localizator.stories.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CultureIDs } from "@topconsultnpm/sdk-ts";
+import { SDKUI_Localizator } from "../helper";
+// Default export for Storybook configuration
+export default {
+    title: "Localizator/SDKUI_Localizator",
+    component: () => _jsx("div", {}),
+    tags: ["autodocs"],
+};
+// Story component
+const Template = () => {
+    const [language, setLanguage] = useState(CultureIDs.En_US);
+    const [searchTerm, setSearchTerm] = useState("");
+    const localizedStrings = [
+        { key: "Abort", value: SDKUI_Localizator.Abort },
+        { key: "Abort_Confirm", value: SDKUI_Localizator.Abort_Confirm },
+        { key: "About", value: SDKUI_Localizator.About },
+        { key: "Add", value: SDKUI_Localizator.Add },
+        { key: "AddAbove", value: SDKUI_Localizator.AddAbove },
+        { key: "AddBelow", value: SDKUI_Localizator.AddBelow },
+        { key: "AddAlls", value: SDKUI_Localizator.AddAlls },
+        { key: "AddDefinition", value: SDKUI_Localizator.AddDefinition },
+        { key: "AddOrSubstFile", value: SDKUI_Localizator.AddOrSubstFile },
+        { key: "All", value: SDKUI_Localizator.All },
+        { key: "AllFilesAndFoldersInSupportArea", value: SDKUI_Localizator.AllFilesAndFoldersInSupportArea },
+        { key: "AllItems", value: SDKUI_Localizator.AllItems },
+        { key: "Alls2", value: SDKUI_Localizator.Alls2 },
+        { key: "Alphabetic", value: SDKUI_Localizator.Alphabetic },
+        { key: "Applied", value: SDKUI_Localizator.Applied },
+        { key: "Apply", value: SDKUI_Localizator.Apply },
+        { key: "ApplyAndClose", value: SDKUI_Localizator.ApplyAndClose },
+        { key: "Approve", value: SDKUI_Localizator.Approve },
+        { key: "Archive", value: SDKUI_Localizator.Archive },
+        { key: "ArchiveConstraint", value: SDKUI_Localizator.ArchiveConstraint },
+        { key: "ArchiveConstraints_ContentCompulsory", value: SDKUI_Localizator.ArchiveConstraints_ContentCompulsory },
+        { key: "ArchiveConstraints_None", value: SDKUI_Localizator.ArchiveConstraints_None },
+        { key: "ArchiveConstraints_OnlyMetadata", value: SDKUI_Localizator.ArchiveConstraints_OnlyMetadata },
+        { key: "ArchiveID", value: SDKUI_Localizator.ArchiveID },
+        { key: "Attention", value: SDKUI_Localizator.Attention },
+        { key: "AuthMode", value: SDKUI_Localizator.AuthMode },
+        { key: "AuthMode_OnBehalfOf", value: SDKUI_Localizator.AuthMode_OnBehalfOf },
+        { key: "AuthMode_WindowsViaTopMedia", value: SDKUI_Localizator.AuthMode_WindowsViaTopMedia },
+        { key: "Author", value: SDKUI_Localizator.Author },
+        { key: "Back", value: SDKUI_Localizator.Back },
+        { key: "BatchUpdate", value: SDKUI_Localizator.BatchUpdate },
+        { key: "BlogCase", value: SDKUI_Localizator.BlogCase },
+        { key: "Blog_Read", value: SDKUI_Localizator.Blog_Read },
+        { key: "Blog_Write", value: SDKUI_Localizator.Blog_Write },
+        { key: "Browser", value: SDKUI_Localizator.Browser },
+        { key: "BrowseAreaFile", value: SDKUI_Localizator.BrowseAreaFile },
+        { key: "BrowseAreaFolder", value: SDKUI_Localizator.BrowseAreaFolder },
+        { key: "CassettoDoganaleExportMRN", value: SDKUI_Localizator.CassettoDoganaleExportMRN },
+        { key: "CassettoDoganaleExportVU", value: SDKUI_Localizator.CassettoDoganaleExportVU },
+        { key: "CassettoDoganaleImportMRN", value: SDKUI_Localizator.CassettoDoganaleImportMRN },
+        { key: "CassettoDoganalePlus_UserName", value: SDKUI_Localizator.CassettoDoganalePlus_UserName },
+        { key: "Cancel", value: SDKUI_Localizator.Cancel },
+        { key: "ChangePassword", value: SDKUI_Localizator.ChangePassword },
+        { key: "CheckIn", value: SDKUI_Localizator.CheckIn },
+        { key: "CheckOut", value: SDKUI_Localizator.CheckOut },
+        { key: "ChronologyDelete", value: SDKUI_Localizator.ChronologyDelete },
+        { key: "Clear", value: SDKUI_Localizator.Clear },
+        { key: "ClearOTP", value: SDKUI_Localizator.ClearOTP },
+        { key: "Close", value: SDKUI_Localizator.Close },
+        { key: "Columns_All_Hide", value: SDKUI_Localizator.Columns_All_Hide },
+        { key: "Columns_All_Show", value: SDKUI_Localizator.Columns_All_Show },
+        { key: "CompleteError", value: SDKUI_Localizator.CompleteError },
+        { key: "Configure", value: SDKUI_Localizator.Configure },
+        { key: "ConfirmPassword", value: SDKUI_Localizator.ConfirmPassword },
+        { key: "ConfirmOnCancel", value: SDKUI_Localizator.ConfirmOnCancel },
+        { key: "ContinueOperation", value: SDKUI_Localizator.ContinueOperation },
+        { key: "CopiedSuccessfully", value: SDKUI_Localizator.CopiedSuccessfully },
+        { key: "CopyToClipboard", value: SDKUI_Localizator.CopyToClipboard },
+        { key: "Count", value: SDKUI_Localizator.Count },
+        { key: "Create", value: SDKUI_Localizator.Create },
+        { key: "CreationTime", value: SDKUI_Localizator.CreationTime },
+        { key: "CultureID", value: SDKUI_Localizator.CultureID },
+        { key: "Date", value: SDKUI_Localizator.Date },
+        { key: "Date_Modified", value: SDKUI_Localizator.Date_Modified },
+        { key: "DcmtCount", value: SDKUI_Localizator.DcmtCount },
+        { key: "DcmtsDetail", value: SDKUI_Localizator.DcmtsDetail },
+        { key: "DcmtsMaster", value: SDKUI_Localizator.DcmtsMaster },
+        { key: "DcmtType", value: SDKUI_Localizator.DcmtType },
+        { key: "DcmtTypesSelected", value: SDKUI_Localizator.DcmtTypesSelected },
+        { key: "DcmtTypeSelect", value: SDKUI_Localizator.DcmtTypeSelect },
+        { key: "Default", value: SDKUI_Localizator.Default },
+        { key: "Details", value: SDKUI_Localizator.Details },
+        { key: "Delete", value: SDKUI_Localizator.Delete },
+        { key: "Delete_ConfirmFor1", value: SDKUI_Localizator.Delete_ConfirmFor1 },
+        { key: "Delete_ConfirmForN", value: SDKUI_Localizator.Delete_ConfirmForN },
+        { key: "DeletionCompletedSuccessfully", value: SDKUI_Localizator.DeletionCompletedSuccessfully },
+        { key: "DeletionOperationInterrupted", value: SDKUI_Localizator.DeletionOperationInterrupted },
+        { key: "Description", value: SDKUI_Localizator.Description },
+        { key: "Destination", value: SDKUI_Localizator.Destination },
+        { key: "DetailsView", value: SDKUI_Localizator.DetailsView },
+        { key: "Disabled", value: SDKUI_Localizator.Disabled },
+        { key: "Domain", value: SDKUI_Localizator.Domain },
+        { key: "Download_in_Process", value: SDKUI_Localizator.Download_in_Process },
+        { key: "Drafts", value: SDKUI_Localizator.Drafts },
+        { key: "Duplicate", value: SDKUI_Localizator.Duplicate },
+        { key: "Duplicate_ConfirmFor1", value: SDKUI_Localizator.Duplicate_ConfirmFor1 },
+        { key: "Duplicate_ConfirmForN", value: SDKUI_Localizator.Duplicate_ConfirmForN },
+        { key: "Duplicate_Download", value: SDKUI_Localizator.Duplicate_Download },
+        { key: "DuplicationCompletedSuccessfully", value: SDKUI_Localizator.DuplicationCompletedSuccessfully },
+        { key: "DuplicateNameError", value: SDKUI_Localizator.DuplicateNameError },
+        { key: "DuplicationOperationInterrupted", value: SDKUI_Localizator.DuplicationOperationInterrupted }
+    ];
+    // Filter localized strings based on the search term (including digits)
+    const filteredStrings = localizedStrings.filter((entry) => entry.key.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        entry.value.toString().toLowerCase().includes(searchTerm.toLowerCase()));
+    SDKUI_Localizator.setLanguage(language);
+    return (_jsxs("div", { style: { padding: "16px", border: "1px solid #ccc", borderRadius: "8px" }, children: [_jsx("input", { type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: "Search for a language...", style: {
+                    marginBottom: "16px",
+                    padding: "8px",
+                    border: "1px solid #ccc",
+                    borderRadius: "4px",
+                    width: "100%",
+                } }), _jsx("select", { value: language, onChange: (e) => {
+                    setLanguage(e.target.value);
+                    SDKUI_Localizator.setLanguage(e.target.value);
+                }, style: { marginBottom: "16px", padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }, children: Object.values(CultureIDs).map((lang) => (_jsx("option", { value: lang, children: lang }, lang))) }), _jsx("div", { children: filteredStrings.length > 0 ? (filteredStrings.map((entry) => (_jsxs("p", { children: [_jsxs("strong", { children: [entry.key, ":"] }), " ", entry.value] }, entry.key)))) : (_jsx("p", { children: "No matching results" })) })] }));
+};
+export const DefaultLocalizator = Template.bind({});

package/lib/stories/TMStoriesUtils.d.ts

@@ -0,0 +1 @@
+export declare const sortArgTypes: (argTypes: Record<string, any>) => Record<string, any>;

package/lib/stories/TMStoriesUtils.js

@@ -0,0 +1,10 @@
+// Helper function to sort an object by its keys alphabetically
+export const sortArgTypes = (argTypes) => {
+    const sortedArgTypes = Object.keys(argTypes)
+        .sort()
+        .reduce((acc, key) => {
+        acc[key] = argTypes[key];
+        return acc;
+    }, {});
+    return sortedArgTypes;
+};