@dktunited-techoff/techoff-suite-ui 1.7.11 → 1.8.0

package/lib/layouts/TsHeader/TsHeader.types.d.ts

@@ -1,23 +0,0 @@
-import { ReactElement } from 'react';
-export type TsHeaderProps = {
-    actions: ReactElement;
-    appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
-    search?: ReactElement;
-};
-export type TsHeaderProfileItemProps = {
-    icon: string;
-    label: string;
-    link: string;
-};
-export type TsHeaderProfileProps = {
-    firstname: string;
-    lastname: string;
-};
-export type TsHeaderSearchProps = {
-    getItemLabel: (e: any) => string;
-    getItemValue: (e: any) => string;
-    loadItems: (search?: string) => Promise<any[]>;
-    noDataLabel?: string;
-    placeholder?: string;
-    onChange: (value: string) => void;
-};

package/lib/layouts/TsHeader/TsHeader.types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=TsHeader.types.js.map

package/lib/layouts/TsHeader/TsHeader.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsHeader.types.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeader.types.ts"],"names":[],"mappings":""}

package/lib/layouts/TsHeader/TsHeaderProfile.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { TsHeaderProfileItemProps, TsHeaderProfileProps } from './TsHeader.types';
-export declare const TsHeaderProfileItem: ({ icon, label, link }: TsHeaderProfileItemProps) => React.JSX.Element;
-export declare const TsHeaderProfile: ({ children, firstname, lastname }: TsHeaderProfileProps & PropsWithChildren) => React.JSX.Element;

package/lib/layouts/TsHeader/TsHeaderProfile.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TsHeaderProfile = exports.TsHeaderProfileItem = void 0;
-const React = require("react");
-const react_1 = require("react");
-const TsIcon_1 = require("../../components/TsIcon/TsIcon");
-const use_click_outside_1 = require("../../hooks/use-click-outside");
-const string_utils_1 = require("../../utils/string.utils");
-const TsHeaderProfileItem = ({ icon, label, link }) => {
-    // ########
-    // Handlers
-    const handleNavigate = () => window.open(link, '_blank', 'noreferrer');
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "ts-header-profile-menu-item", onClick: handleNavigate },
-        React.createElement("div", { className: "ts-header-profile-menu-item-icon" },
-            React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })),
-        React.createElement("div", { className: "ts-header-profile-menu-item-label" }, label),
-        React.createElement("div", { className: "ts-header-profile-menu-item-icon" },
-            React.createElement(TsIcon_1.TsIcon, { name: "external-link", size: "16" }))));
-};
-exports.TsHeaderProfileItem = TsHeaderProfileItem;
-const TsHeaderProfile = ({ children, firstname, lastname }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const ref = (0, use_click_outside_1.useClickOutside)(() => setIsOpen(false));
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "ts-header-profile-container", ref: ref },
-        React.createElement("div", { className: "ts-header-profile-dropdown", onClick: () => children && setIsOpen(prev => !prev) },
-            React.createElement("div", { className: "ts-header-profile-img-container" },
-                React.createElement("div", { className: "ts-header-profile-img-icon" },
-                    React.createElement(TsIcon_1.TsIcon, { name: "user", size: "16" }))),
-            React.createElement("div", { className: "ts-header-profile-name" },
-                (0, string_utils_1.capitalize)(firstname),
-                " ",
-                lastname.charAt(0).toUpperCase(),
-                "."),
-            children && (React.createElement("div", { className: "ts-header-profile-chevron" },
-                React.createElement(TsIcon_1.TsIcon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "16" })))),
-        isOpen && React.createElement("div", { className: "ts-header-profile-menu" }, children)));
-};
-exports.TsHeaderProfile = TsHeaderProfile;
-//# sourceMappingURL=TsHeaderProfile.js.map

package/lib/layouts/TsHeader/TsHeaderProfile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsHeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderProfile.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AACpD,2DAAwD;AACxD,qEAAgE;AAChE,2DAAsD;AAG/C,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA4B,EAAE,EAAE;IACrF,WAAW;IACX,WAAW;IACX,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEvE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,cAAc;QAClE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B;QACN,6BAAK,SAAS,EAAC,mCAAmC,IAAE,KAAK,CAAO;QAChE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,mBAAmB,uBAkB9B;AAEK,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAA4C,EAAE,EAAE;IAC7G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,IAAA,mCAAe,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAE,GAAG;QACnD,6BAAK,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC;YAC7F,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,6BAAK,SAAS,EAAC,4BAA4B;oBACzC,oBAAC,eAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC5B,CACF;YACN,6BAAK,SAAS,EAAC,wBAAwB;gBACpC,IAAA,yBAAU,EAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEL,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,oBAAC,eAAM,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC9D,CACP,CACG;QAEL,MAAM,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CAC/D,CACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,eAAe,mBA4B1B"}

package/lib/layouts/TsHeader/TsHeaderSearch.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { TsHeaderSearchProps } from './TsHeader.types';
-export declare const TsHeaderSearch: ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }: TsHeaderSearchProps) => React.JSX.Element;

package/lib/layouts/TsHeader/TsHeaderSearch.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TsHeaderSearch = void 0;
-const React = require("react");
-const react_1 = require("react");
-// import { Input } from '../../components/Inputs/Input/Input';
-const TsLoader_1 = require("../../components/TsLoader/TsLoader");
-const use_click_outside_1 = require("../../hooks/use-click-outside");
-const TsHeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }) => {
-    const [searchValue] = (0, react_1.useState)('');
-    const [items, setItems] = (0, react_1.useState)([]);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [showItems, setShowItems] = (0, react_1.useState)(false);
-    const ref = (0, use_click_outside_1.useClickOutside)(() => setShowItems(false));
-    // #######
-    // Helpers
-    const getBeforeMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        return label.substring(0, matchStartIndex);
-    };
-    const getMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        const matchEndIndex = matchStartIndex + searchValue.length;
-        return label.substring(matchStartIndex, matchEndIndex);
-    };
-    const getAfterMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        const matchEndIndex = matchStartIndex + searchValue.length;
-        return label.substring(matchEndIndex);
-    };
-    // ########
-    // Watchers
-    (0, react_1.useEffect)(() => {
-        if (searchValue === '') {
-            setShowItems(false);
-            setItems([]);
-            setIsLoading(false);
-        }
-        else {
-            setShowItems(true);
-            setIsLoading(true);
-            loadItems(searchValue)
-                .then(setItems)
-                .finally(() => setIsLoading(false));
-        }
-    }, [searchValue]);
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "ts-header-search", ref: ref }, showItems && searchValue !== '' && (React.createElement("div", { className: "ts-header-search-items-container" },
-        isLoading && (React.createElement("div", { className: "ts-header-search-loading" },
-            React.createElement(TsLoader_1.TsLoader, { size: "sm" }))),
-        !isLoading && items.length === 0 && React.createElement("div", { className: "ts-header-search-no-items" }, noDataLabel),
-        !isLoading && items.length > 0 && (React.createElement("div", { className: "ts-header-search-items" }, items.map(item => (React.createElement("div", { className: "ts-header-search-item", onClick: () => onChange(getItemValue(item)) },
-            getBeforeMatch(item),
-            React.createElement("span", { className: "ts-header-search-item--match" }, getMatch(item)),
-            getAfterMatch(item))))))))));
-};
-exports.TsHeaderSearch = TsHeaderSearch;
-//# sourceMappingURL=TsHeaderSearch.js.map

package/lib/layouts/TsHeader/TsHeaderSearch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsHeaderSearch.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderSearch.tsx"],"names":[],"mappings":"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"}

package/lib/layouts/TsHeader/__stories__/TsHeader.stories.mdx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsHeader } from '../TsHeader';
-import { TsHeaderProfile, TsHeaderProfileItem } from '../TsHeaderProfile';
-import { TsHeaderSearch } from '../TsHeaderSearch';
-import { TsButton } from '../../../components/TsButton/TsButton';
-
-<Meta title="Layouts/Header" />
-
-export const headerArgTypes = {
-  appName: {
-    control: 'select',
-    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
-    description: 'Icon of the button.',
-  },
-};
-
-export const loadItems = () => {
-  return Promise.resolve([
-    { id: 1, label: 'Item 1' },
-    { id: 2, label: 'Item 2' },
-    { id: 3, label: 'Item 3' },
-    { id: 4, label: 'Item 4' },
-    { id: 5, label: 'Item 5' },
-    { id: 6, label: 'Item 6' },
-    { id: 7, label: 'Item 7' },
-    { id: 8, label: 'Item 8' },
-    { id: 9, label: 'Item 9' },
-  ]);
-};
-
-# Header
-
-The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      actions: (
-        <>
-          <TsButton icon="add" size="lg" variant="shadow" rounded />
-          <TsHeaderProfile firstname="John" lastname="Doe">
-            <TsHeaderProfileItem icon="alert-triangle" label="Contact support" link="" />
-            <TsHeaderProfileItem icon="award" label="Trainings" link="" />
-          </TsHeaderProfile>
-        </>
-      ),
-      appName: 'repairability',
-      search: (
-        <TsHeaderSearch
-          getItemLabel={item => item.label}
-          getItemValue={item => item.id}
-          loadItems={loadItems}
-          noDataLabel="No item found."
-          placeholder="Search something in the application"
-          onChange={() => {}}
-        />
-      ),
-    }}
-    argTypes={headerArgTypes}
-  >
-    {args => <TsHeader {...args} />}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsHeader} />

package/lib/layouts/TsNavigation/TsNavigation.css

@@ -1,72 +0,0 @@
-.ts-navigation {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  padding: 0 24px;
-}
-
-/* ############ */
-/* BREADCRUMB   */
-.ts-breadcrumb {
-  display: flex;
-  align-items: center;
-  padding-right: 20px;
-}
-.ts-breadcrumb-container {
-  display: flex;
-  align-items: center;
-}
-.ts-breadcrumb-item {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  padding: 0 10px;
-  border-radius: 9999px;
-  color: #3643ba;
-}
-.ts-breadcrumb-item--highlight {
-  padding: 0 20px;
-  box-shadow: 0px 6px 6px 0px #00537d1a;
-  background: linear-gradient(270deg, #3643ba 0%, rgba(54, 67, 186, 0.6) 100%);
-  color: #ffffff;
-}
-.ts-breadcrumb-item--link:hover {
-  background: #ebecf7;
-  cursor: pointer;
-}
-.ts-breadcrumb-item--icon {
-  padding-right: 8px;
-}
-
-/* ######### */
-/* DIVIDER   */
-.ts-navigation-divider {
-  flex: 1;
-  height: 2px;
-  background: #ebecf7;
-}
-.ts-breadcrumb-chevron {
-  padding: 0 2px;
-  color: #3643ba;
-}
-
-/* ######### */
-/* ACTIONS   */
-.ts-navigation-actions {
-  /* flex items-center [&>*]:ml-4 */
-  display: flex;
-  align-items: center;
-}
-.ts-navigation-actions > * {
-  margin-left: 16px;
-}
-
-/* ######### */
-/* GLOBALS   */
-* {
-  font-size: 14px;
-  outline: none;
-  box-sizing: border-box;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-    'Helvetica Neue', sans-serif;
-}

package/lib/layouts/TsNavigation/TsNavigation.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { TsNavigationBreadcrumbItemProps, TsNavigationProps } from './TsNavigation.types';
-import './TsNavigation.css';
-export declare const TsNavigationBreadcrumbDivider: () => React.JSX.Element;
-export declare const TsNavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<TsNavigationBreadcrumbItemProps>) => React.JSX.Element;
-export declare const TsNavigation: ({ actions, breadcrumbs }: TsNavigationProps) => React.JSX.Element;

package/lib/layouts/TsNavigation/TsNavigation.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TsNavigation = exports.TsNavigationBreadcrumbItem = exports.TsNavigationBreadcrumbDivider = void 0;
-const React = require("react");
-const TsIcon_1 = require("../../components/TsIcon/TsIcon");
-require("./TsNavigation.css");
-const TsNavigationBreadcrumbDivider = () => {
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "ts-breadcrumb-chevron" },
-        React.createElement(TsIcon_1.TsIcon, { name: "chevron-right" })));
-};
-exports.TsNavigationBreadcrumbDivider = TsNavigationBreadcrumbDivider;
-const TsNavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: `
-        ts-breadcrumb-item
-        ${highlight ? 'ts-breadcrumb-item--highlight' : ''} ${onClick ? 'ts-breadcrumb-item--link' : ''}
-      `, onClick: onClick },
-        icon && (React.createElement("div", { className: "ts-breadcrumb-item--icon" },
-            React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" }))),
-        children));
-};
-exports.TsNavigationBreadcrumbItem = TsNavigationBreadcrumbItem;
-const TsNavigation = ({ actions, breadcrumbs }) => {
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "ts-navigation" },
-        React.createElement("div", { className: "ts-breadcrumb" }, breadcrumbs),
-        React.createElement("div", { className: "ts-navigation-divider" }),
-        React.createElement("div", { className: "ts-navigation-actions" }, actions)));
-};
-exports.TsNavigation = TsNavigation;
-//# sourceMappingURL=TsNavigation.js.map

package/lib/layouts/TsNavigation/TsNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsNavigation.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2DAAwD;AAExD,8BAA4B;AAErB,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,6BAA6B,iCAQxC;AAEK,MAAM,0BAA0B,GAAG,CAAC,EACzC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC4C,EAAE,EAAE;IACvD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;OAChG,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,0BAA0B;YACvC,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,0BAA0B,8BAyBrC;AAEK,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAqB,EAAE,EAAE;IAC1E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC5B,6BAAK,SAAS,EAAC,eAAe,IAAE,WAAW,CAAO;QAClD,6BAAK,SAAS,EAAC,uBAAuB,GAAG;QACzC,6BAAK,SAAS,EAAC,uBAAuB,IAAE,OAAO,CAAO,CAClD,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB"}

package/lib/layouts/TsNavigation/TsNavigation.types.d.ts

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-export type TsNavigationProps = {
-    actions?: ReactElement;
-    breadcrumbs: ReactElement;
-};
-export type TsNavigationBreadcrumbItemProps = {
-    icon?: string;
-    highlight?: boolean;
-    onClick?: () => void;
-};

package/lib/layouts/TsNavigation/TsNavigation.types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=TsNavigation.types.js.map

package/lib/layouts/TsNavigation/TsNavigation.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsNavigation.types.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.types.ts"],"names":[],"mappings":""}

package/lib/layouts/TsNavigation/__stories__/TsNavigation.stories.mdx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsNavigation, TsNavigationBreadcrumbItem, TsNavigationBreadcrumbDivider } from '../TsNavigation';
-import { TsButton } from '../../../components/TsButton/TsButton';
-import { icons } from '../../../components/TsIcon/icons';
-
-<Meta title="Layouts/Navigation" />
-
-# Navigation
-
-Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      actions: (
-        <>
-          <TsButton icon="check" onClick={() => {}}>
-            Action 1
-          </TsButton>
-          <TsButton icon="add" onClick={() => {}}>
-            Action 2
-          </TsButton>
-        </>
-      ),
-      breadcrumbs: (
-        <>
-        <TsNavigationBreadcrumbItem icon="home" onClick={() => {}}>
-          Home
-        </TsNavigationBreadcrumbItem>
-        <TsNavigationBreadcrumbDivider />
-        <TsNavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</TsNavigationBreadcrumbItem>
-        <TsNavigationBreadcrumbDivider />
-        <TsNavigationBreadcrumbItem highlight>Menu Item 2</TsNavigationBreadcrumbItem>
-        </>
-      )
-    }}
-
->
-
-    {args => <TsNavigation {...args} />}
-
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsNavigation} />

package/lib/utils/string.utils.d.ts

@@ -1 +0,0 @@
-export declare const capitalize: (str: string) => string;

package/lib/utils/string.utils.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.capitalize = void 0;
-const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-exports.capitalize = capitalize;
-//# sourceMappingURL=string.utils.js.map

package/lib/utils/string.utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":";;;AAAO,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAAvF,QAAA,UAAU,cAA6E"}

package/src/components/TsDropdown/__stories__/TsDropdown.stories.mdx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsDropdown } from '../TsDropdown';
-import { fruits } from './fruits';
-
-<Meta title="Components/Dropdown" />
-
-export const dropdownArgTypes = {
-  error: {
-    control: 'text',
-    description: 'Error of the dropdown.',
-  },
-  label: {
-    control: 'text',
-    description: 'Label of the dropdown.',
-  },
-  placeholder: {
-    control: 'text',
-    description: 'Placeholder of the dropdown.',
-  },
-  searchPlaceholder: {
-    control: 'text',
-    description: 'Placeholder of the option search (only for searchable dropdowns).',
-  },
-  searchable: {
-    control: 'boolean',
-    description: 'Enable search on dropdown items.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Enable state of the dropdown.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  getOptionLabel: {
-    control: 'function',
-    description: 'The handler called to get the option label',
-  },
-  getOptionValue: {
-    control: 'function',
-    description: 'The handler called to get the option value.',
-  },
-  loadOptions: {
-    control: 'function',
-    description: 'The handler called to fetch all options in async (not available on playground).',
-  },
-  onChange: {
-    control: 'function',
-    description: 'The handler called when clicking on the dropdown option.',
-  },
-};
-
-# Dropdown
-
-Dropdowns show a list of options that can be used to select, filter or sort content.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      error: '',
-      label: 'Label',
-      options: fruits,
-      searchPlaceholder: '',
-      placeholder: 'Select an item',
-      disabled: false,
-      searchable: false,
-      getOptionLabel: function ol(fruit) {
-        return fruit.name;
-      },
-      getOptionValue: function ov(fruit) {
-        return fruit.id;
-      },
-    }}
-    argTypes={dropdownArgTypes}
-  >
-    {args => <TsDropdown {...args}>{args.children}</TsDropdown>}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsDropdown} />

package/src/components/TsDropdown/__stories__/fruits.ts

@@ -1,47 +0,0 @@
-export const fruits = [
-  { name: 'Persimmon', id: 52 },
-  { name: 'Strawberry', id: 3 },
-  { name: 'Banana', id: 1 },
-  { name: 'Tomato', id: 5 },
-  { name: 'Pear', id: 4 },
-  { name: 'Durian', id: 60 },
-  { name: 'Blackberry', id: 64 },
-  { name: 'Lingonberry', id: 65 },
-  { name: 'Kiwi', id: 66 },
-  { name: 'Lychee', id: 67 },
-  { name: 'Pineapple', id: 10 },
-  { name: 'Fig', id: 68 },
-  { name: 'Gooseberry', id: 69 },
-  { name: 'Passionfruit', id: 70 },
-  { name: 'Plum', id: 71 },
-  { name: 'Orange', id: 2 },
-  { name: 'GreenApple', id: 72 },
-  { name: 'Raspberry', id: 23 },
-  { name: 'Watermelon', id: 25 },
-  { name: 'Lemon', id: 26 },
-  { name: 'Mango', id: 27 },
-  { name: 'Blueberry', id: 33 },
-  { name: 'Apple', id: 6 },
-  { name: 'Guava', id: 37 },
-  { name: 'Apricot', id: 35 },
-  { name: 'Papaya', id: 42 },
-  { name: 'Melon', id: 41 },
-  { name: 'Tangerine', id: 77 },
-  { name: 'Pitahaya', id: 78 },
-  { name: 'Lime', id: 44 },
-  { name: 'Pomegranate', id: 79 },
-  { name: 'Dragonfruit', id: 80 },
-  { name: 'Grape', id: 81 },
-  { name: 'Morus', id: 82 },
-  { name: 'Feijoa', id: 76 },
-  { name: 'Avocado', id: 84 },
-  { name: 'Kiwifruit', id: 85 },
-  { name: 'Cranberry', id: 87 },
-  { name: 'Cherry', id: 9 },
-  { name: 'Peach', id: 86 },
-  { name: 'Jackfruit', id: 94 },
-  { name: 'Horned Melon', id: 95 },
-  { name: 'Hazelnut', id: 96 },
-  { name: 'Pomelo', id: 98 },
-  { name: 'Mangosteen', id: 99 },
-];