@dktunited-techoff/techoff-suite-ui 1.3.0 → 1.4.0

package/esm/components/TsLoader/__stories__/TsLoader.stories.mdx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsLoader } from '../TsLoader';
+
+<Meta title="Components/Loader" />
+
+export const loaderArgTypes = {
+  size: {
+    control: 'inline-radio',
+    options: ['sm', 'md', 'lg'],
+    description: 'Define the size of the loader.',
+    table: { defaultValue: { summary: 'md' } },
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ size: 'md' }} argTypes={loaderArgTypes}>
+    {args => <TsLoader {...args}>{args.children}</TsLoader>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsLoader} />

package/esm/hooks/use-click-outside.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useClickOutside: (callback: () => void) => import("react").RefObject<HTMLDivElement>;

package/esm/hooks/use-click-outside.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+export const useClickOutside = (callback) => {
+    const ref = useRef(null);
+    const handleClickOutside = (event) => {
+        if (ref.current && !ref.current.contains(event.target))
+            callback();
+    };
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, []);
+    return ref;
+};
+//# sourceMappingURL=use-click-outside.js.map

package/esm/hooks/use-click-outside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAAE,QAAQ,EAAE,CAAC;IAC7E,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IACzE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}

package/esm/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components/TsButton/TsButton';
+export * from './components/TsIcon/TsIcon';
+export * from './components/TsLoader/TsLoader';
+export * from './layouts/TsHeader/TsHeader';
+export * from './layouts/TsHeader/TsHeaderProfile';
+export * from './layouts/TsNavigation/TsNavigation';

package/esm/index.js

@@ -0,0 +1,7 @@
+export * from './components/TsButton/TsButton';
+export * from './components/TsIcon/TsIcon';
+export * from './components/TsLoader/TsLoader';
+export * from './layouts/TsHeader/TsHeader';
+export * from './layouts/TsHeader/TsHeaderProfile';
+export * from './layouts/TsNavigation/TsNavigation';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}

package/esm/layouts/TsHeader/TsHeader.css

@@ -0,0 +1,186 @@
+@font-face {
+  font-family: 'Montserrat-Medium';
+  src: url('../../assets/fonts/Montserrat-Medium.ttf');
+}
+@font-face {
+  font-family: 'Roboto-Light';
+  src: url('../../assets/fonts/Roboto-Light.ttf');
+}
+
+/* ######## */
+/* HEADER   */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 64px;
+  padding: 0 24px;
+}
+.ts-header-aside {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+}
+.ts-header-right-side {
+  justify-content: flex-end;
+}
+.ts-header-search-bar {
+  display: flex;
+  align-items: center;
+  width: 400px;
+  height: 100%;
+}
+.ts-header-actions {
+  display: flex;
+}
+.ts-header-actions > * {
+  margin-left: 12px;
+}
+
+/* ################ */
+/* HEADER TECHOFF   */
+.ts-header-techoff {
+  display: flex;
+  height: 18px;
+  margin-left: 4px;
+}
+
+/* ################ */
+/* HEADER PROFILE   */
+.ts-header-profile-container {
+  position: relative;
+}
+.ts-header-profile-dropdown {
+  display: flex;
+  height: 40px;
+  border-radius: 9999px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  color: #4e5d6b;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.ts-header-profile-img-container {
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  border-radius: 9999px;
+}
+.ts-header-profile-img-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  background-color: rgb(229, 229, 229);
+}
+.ts-header-profile-name {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 16px;
+}
+.ts-header-profile-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding-right: 14px;
+  border-radius: 9999px;
+}
+.ts-header-profile-menu {
+  position: absolute;
+  right: 0;
+  top: 48px;
+  width: 288px;
+  padding: 4px;
+  border-radius: 8px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background-color: #ffffff;
+  z-index: 10;
+}
+.ts-header-profile-menu-item {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.ts-header-profile-menu-item:hover {
+  background-color: #e7f3f9;
+}
+.ts-header-profile-menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+.ts-header-profile-menu-item-label {
+  flex: 1;
+  padding: 0 2px;
+}
+
+/* ############### */
+/* HEADER SEARCH   */
+.ts-header-search {
+  position: relative;
+  width: 100%;
+}
+.ts-header-search-items-container {
+  position: absolute;
+  top: calc(100% + 4px);
+  width: 100%;
+  max-height: 200px;
+  border-radius: 8px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background-color: white;
+  overflow-y: auto;
+  z-index: 100;
+}
+.ts-header-search-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+}
+.ts-header-search-no-items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  color: #8c96a2;
+  font-style: italic;
+}
+.ts-header-search-items {
+  padding: 8px;
+}
+.ts-header-search-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ts-header-search-item:hover {
+  background: #e7f3f9;
+}
+.ts-header-search-item--match {
+  background: #cce5f2;
+  color: #007dbc;
+  font-weight: 700;
+}
+
+/* ######### */
+/* 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/esm/layouts/TsHeader/TsHeader.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsHeaderProps } from './TsHeader.types';
+import './TsHeader.css';
+export declare const TsHeader: ({ actions, appName }: TsHeaderProps) => React.JSX.Element;

package/esm/layouts/TsHeader/TsHeader.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { icons } from '../../components/TsIcon/icons';
+import './TsHeader.css';
+export const TsHeader = ({ actions, appName }) => {
+    // #########
+    // Rendering
+    return (React.createElement("header", null,
+        React.createElement("div", { className: "ts-header-aside" },
+            React.createElement("div", { className: "ts-header-techoff", dangerouslySetInnerHTML: { __html: icons[`header-${appName}`] } })),
+        React.createElement("div", { className: "ts-header-aside ts-header-right-side" },
+            React.createElement("div", { className: "ts-header-actions" }, actions))));
+};
+//# sourceMappingURL=TsHeader.js.map

package/esm/layouts/TsHeader/TsHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAiB,EAAE,EAAE;IAC9D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,6BAAK,SAAS,EAAC,mBAAmB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAClG;QAEN,6BAAK,SAAS,EAAC,sCAAsC;YACnD,6BAAK,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAO,CAC9C,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,23 @@
+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/esm/layouts/TsHeader/TsHeader.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsHeader.types.js.map

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

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

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

@@ -0,0 +1,5 @@
+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/esm/layouts/TsHeader/TsHeaderProfile.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { TsIcon } from '../../components/TsIcon/TsIcon';
+import { useClickOutside } from '../../hooks/use-click-outside';
+import { capitalize } from '../../utils/string.utils';
+export 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, { 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, { name: "external-link", size: "16" }))));
+};
+export const TsHeaderProfile = ({ children, firstname, lastname }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = 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, { name: "user", size: "16" }))),
+            React.createElement("div", { className: "ts-header-profile-name" },
+                capitalize(firstname),
+                " ",
+                lastname.charAt(0).toUpperCase(),
+                "."),
+            children && (React.createElement("div", { className: "ts-header-profile-chevron" },
+                React.createElement(TsIcon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "16" })))),
+        isOpen && React.createElement("div", { className: "ts-header-profile-menu" }, children)));
+};
+//# sourceMappingURL=TsHeaderProfile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderProfile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,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,MAAM,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,MAAM,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAA4C,EAAE,EAAE;IAC7G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,eAAe,CAAC,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,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC5B,CACF;YACN,6BAAK,SAAS,EAAC,wBAAwB;gBACpC,UAAU,CAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEL,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,oBAAC,MAAM,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"}

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

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

package/esm/layouts/TsHeader/TsHeaderSearch.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+// import { Input } from '../../components/Inputs/Input/Input';
+import { TsLoader } from '../../components/TsLoader/TsLoader';
+import { useClickOutside } from '../../hooks/use-click-outside';
+export const TsHeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }) => {
+    const [searchValue] = useState('');
+    const [items, setItems] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [showItems, setShowItems] = useState(false);
+    const ref = 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
+    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, { 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))))))))));
+};
+//# sourceMappingURL=TsHeaderSearch.js.map

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

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

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

@@ -0,0 +1,71 @@
+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/esm/layouts/TsNavigation/TsNavigation.css

@@ -0,0 +1,74 @@
+.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-chevron {
+  padding: 0 8px;
+  color: #3643ba;
+}
+.ts-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  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 {
+  cursor: pointer;
+}
+.ts-breadcrumb-item--link:hover {
+  text-decoration: underline;
+}
+.ts-breadcrumb-item--icon {
+  padding-right: 8px;
+}
+
+/* ######### */
+/* DIVIDER   */
+.ts-navigation-divider {
+  flex: 1;
+  height: 1px;
+  margin: 4px 0;
+  background: #ebecf7;
+}
+
+/* ######### */
+/* 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/esm/layouts/TsNavigation/TsNavigation.d.ts

@@ -0,0 +1,7 @@
+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/esm/layouts/TsNavigation/TsNavigation.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TsIcon } from '../../components/TsIcon/TsIcon';
+import './TsNavigation.css';
+export const TsNavigationBreadcrumbDivider = () => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-breadcrumb-chevron" },
+        React.createElement(TsIcon, { name: "chevron-right" })));
+};
+export 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, { name: icon, size: "16" }))),
+        children));
+};
+export 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)));
+};
+//# sourceMappingURL=TsNavigation.js.map

package/esm/layouts/TsNavigation/TsNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsNavigation.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAExD,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,MAAM,IAAC,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,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,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,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"}

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

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

package/esm/layouts/TsNavigation/TsNavigation.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsNavigation.types.js.map

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

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