@dktunited-techoff/techoff-suite-ui 1.2.0 → 1.3.1

package/src/layouts/{Header/HeaderSearch.tsx → TsHeader/TsHeaderSearch.tsx}

@@ -1,19 +1,18 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 // import { Input } from '../../components/Inputs/Input/Input';
-import { Loader } from '../../components/Loader/Loader';
+import { TsLoader } from '../../components/TsLoader/TsLoader';
 import { useClickOutside } from '../../hooks/use-click-outside';
-import { HeaderSearchProps } from './Header.types';
+import { TsHeaderSearchProps } from './TsHeader.types';
 
-export const HeaderSearch = ({
+export const TsHeaderSearch = ({
   getItemLabel,
   getItemValue,
   loadItems,
   noDataLabel,
-  placeholder,
   onChange,
-}: HeaderSearchProps) => {
-  const [searchValue, setSearchValue] = useState<string>('');
+}: TsHeaderSearchProps) => {
+  const [searchValue] = useState<string>('');
   const [items, setItems] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [showItems, setShowItems] = useState<boolean>(false);
@@ -58,7 +57,7 @@ export const HeaderSearch = ({
   // #########
   // Rendering
   return (
-    <div className="header-search" ref={ref}>
+    <div className="ts-header-search" ref={ref}>
       {/* <Input
         placeholder={placeholder}
         icon="search"
@@ -72,19 +71,19 @@ export const HeaderSearch = ({
       /> */}
 
       {showItems && searchValue !== '' && (
-        <div className="header-search-items-container">
+        <div className="ts-header-search-items-container">
           {isLoading && (
-            <div className="header-search-loading">
-              <Loader size="sm" />
+            <div className="ts-header-search-loading">
+              <TsLoader size="sm" />
             </div>
           )}
-          {!isLoading && items.length === 0 && <div className="header-search-no-items">{noDataLabel}</div>}
+          {!isLoading && items.length === 0 && <div className="ts-header-search-no-items">{noDataLabel}</div>}
           {!isLoading && items.length > 0 && (
-            <div className="header-search-items">
+            <div className="ts-header-search-items">
               {items.map(item => (
-                <div className="header-search-item" onClick={() => onChange(getItemValue(item))}>
+                <div className="ts-header-search-item" onClick={() => onChange(getItemValue(item))}>
                   {getBeforeMatch(item)}
-                  <span className="header-search-item--match">{getMatch(item)}</span>
+                  <span className="ts-header-search-item--match">{getMatch(item)}</span>
                   {getAfterMatch(item)}
                 </div>
               ))}

package/src/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/src/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/src/layouts/TsNavigation/TsNavigation.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsIcon } from '../../components/TsIcon/TsIcon';
+import { TsNavigationBreadcrumbItemProps, TsNavigationProps } from './TsNavigation.types';
+import './TsNavigation.css';
+
+export const TsNavigationBreadcrumbDivider = () => {
+  // #########
+  // Rendering
+  return (
+    <div className="ts-breadcrumb-chevron">
+      <TsIcon name="chevron-right" />
+    </div>
+  );
+};
+
+export const TsNavigationBreadcrumbItem = ({
+  children,
+  icon,
+  highlight,
+  onClick,
+}: PropsWithChildren<TsNavigationBreadcrumbItemProps>) => {
+  // #########
+  // Rendering
+  return (
+    <div
+      className={`
+        ts-breadcrumb-item
+        ${highlight ? 'ts-breadcrumb-item--highlight' : ''} ${onClick ? 'ts-breadcrumb-item--link' : ''}
+      `}
+      onClick={onClick}
+    >
+      {icon && (
+        <div className="ts-breadcrumb-item--icon">
+          <TsIcon name={icon} size="16" />
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+};
+
+export const TsNavigation = ({ actions, breadcrumbs }: TsNavigationProps) => {
+  // #########
+  // Rendering
+  return (
+    <div className="ts-navigation">
+      <div className="ts-breadcrumb">{breadcrumbs}</div>
+      <div className="ts-navigation-divider" />
+      <div className="ts-navigation-actions">{actions}</div>
+    </div>
+  );
+};

package/src/layouts/TsNavigation/TsNavigation.types.ts

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

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

@@ -0,0 +1,51 @@
+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/src/components/Button/Button.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { Icon } from '../Icon/Icon';
-import { ButtonProps } from './Button.types';
-import './Button.css';
-
-export const Button = ({
-  children,
-  icon,
-  iconDirection = 'left',
-  size = 'md',
-  variant = 'primary',
-  block,
-  rounded,
-  onClick,
-}: PropsWithChildren<ButtonProps>) => {
-  // #########
-  // Rendering
-  return (
-    <button
-      className={`
-        button button--${size} button--${variant}
-        ${block ? 'button--block' : ''}
-        ${rounded ? 'button--rounded' : ''}
-        ${icon && !children ? 'button--icon-only' : ''}
-      `}
-      onClick={onClick}
-    >
-      {icon && iconDirection === 'left' && <Icon name={icon} size="16" />}
-      {children && <div>{children}</div>}
-      {icon && iconDirection === 'right' && <Icon name={icon} size="16" />}
-    </button>
-  );
-};

package/src/components/Icon/Icon.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { IconProps } from './Icon.types';
-import { icons } from './icons';
-import './Icon.css';
-
-export const Icon = ({ name, size = '20' }: IconProps) => {
-  const icon = icons[name];
-
-  // #########
-  // Rendering
-  if (!icon) return <></>;
-  return <div className={`icon icon--${size}`} dangerouslySetInnerHTML={{ __html: icon }} />;
-};

package/src/components/Icon/Icon.types.ts

@@ -1 +0,0 @@
-export type IconProps = { name: string; size?: '16' | '20' | '24' };

package/src/components/Loader/Loader.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { LoaderProps } from './Loader.types';
-import './Loader.css';
-
-export const Loader = ({ size = 'md' }: LoaderProps) => {
-  return <div className={`loader loader--${size}`} />;
-};

package/src/components/Loader/Loader.types.ts

@@ -1 +0,0 @@
-export type LoaderProps = { size?: 'sm' | 'md' | 'lg' };

package/src/layouts/Header/Header.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { icons } from '../../components/Icon/icons';
-import { HeaderProps } from './Header.types';
-import './Header.css';
-
-export const Header = ({ actions, appName, search }: HeaderProps) => {
-  // #########
-  // Rendering
-  return (
-    <header>
-      <div className="header-aside">
-        <div className="header-techoff" dangerouslySetInnerHTML={{ __html: icons[`header-${appName}`] }} />
-      </div>
-      {/* {search && <div className="header-search-bar">{search}</div>} */}
-      <div className="header-aside header-right-side">
-        <div className="header-actions">{actions}</div>
-      </div>
-    </header>
-  );
-};

package/src/layouts/Header/HeaderProfile.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren, useState } from 'react';
-import { Icon } from '../../components/Icon/Icon';
-import { useClickOutside } from '../../hooks/use-click-outside';
-import { capitalize } from '../../utils/string.utils';
-import { HeaderProfileItemProps, HeaderProfileProps } from './Header.types';
-
-export const HeaderProfileItem = ({ icon, label, link }: HeaderProfileItemProps) => {
-  // ########
-  // Handlers
-  const handleNavigate = () => window.open(link, '_blank', 'noreferrer');
-
-  // #########
-  // Rendering
-  return (
-    <div className="header-profile-menu-item" onClick={handleNavigate}>
-      <div className="header-profile-menu-item-icon">
-        <Icon name={icon} size="16" />
-      </div>
-      <div className="header-profile-menu-item-label">{label}</div>
-      <div className="header-profile-menu-item-icon">
-        <Icon name="external-link" size="16" />
-      </div>
-    </div>
-  );
-};
-
-export const HeaderProfile = ({ children, firstname, lastname }: HeaderProfileProps & PropsWithChildren) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const ref = useClickOutside(() => setIsOpen(false));
-
-  // #########
-  // Rendering
-  return (
-    <div className="header-profile-container" ref={ref}>
-      <div className="header-profile-dropdown" onClick={() => children && setIsOpen(prev => !prev)}>
-        <div className="header-profile-img-container">
-          <div className="header-profile-img-icon">
-            <Icon name="user" size="16" />
-          </div>
-        </div>
-        <div className="header-profile-name">
-          {capitalize(firstname)} {lastname.charAt(0).toUpperCase()}.
-        </div>
-
-        {children && (
-          <div className="header-profile-chevron">
-            <Icon name={isOpen ? 'chevron-up' : 'chevron-down'} size="16" />
-          </div>
-        )}
-      </div>
-
-      {isOpen && <div className="header-profile-menu">{children}</div>}
-    </div>
-  );
-};

package/src/layouts/Navigation/Navigation.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { Icon } from '../../components/Icon/Icon';
-import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
-import './Navigation.css';
-
-export const NavigationBreadcrumbDivider = () => {
-  // #########
-  // Rendering
-  return (
-    <div className="breadcrumb-chevron">
-      <Icon name="chevron-right" />
-    </div>
-  );
-};
-
-export const NavigationBreadcrumbItem = ({
-  children,
-  icon,
-  highlight,
-  onClick,
-}: PropsWithChildren<NavigationBreadcrumbItemProps>) => {
-  // #########
-  // Rendering
-  return (
-    <div
-      className={`
-        breadcrumb-item
-        ${highlight ? 'breadcrumb-item--highlight' : ''} ${onClick ? 'breadcrumb-item--link' : ''}
-      `}
-      onClick={onClick}
-    >
-      {icon && (
-        <div className="breadcrumb-item--icon">
-          <Icon name={icon} size="16" />
-        </div>
-      )}
-
-      {children}
-    </div>
-  );
-};
-
-export const Navigation = ({ actions, breadcrumbs }: NavigationProps) => {
-  // #########
-  // Rendering
-  return (
-    <div className="navigation">
-      <div className="breadcrumb">{breadcrumbs}</div>
-      <div className="navigation-divider" />
-      <div className="navigation-actions">{actions}</div>
-    </div>
-  );
-};

package/src/layouts/Navigation/Navigation.types.ts

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

package/src/layouts/Navigation/__stories__/Navigation.stories.mdx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
-import { Button } from '../../../components/Button/Button';
-import { icons } from '../../../components/Icon/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: (
-        <>
-          <Button icon="check" onClick={() => {}}>
-            Action 1
-          </Button>
-          <Button icon="add" onClick={() => {}}>
-            Action 2
-          </Button>
-        </>
-      ),
-      breadcrumbs: (
-        <>
-        <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
-          Home
-        </NavigationBreadcrumbItem>
-        <NavigationBreadcrumbDivider />
-        <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
-        <NavigationBreadcrumbDivider />
-        <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
-        </>
-      )
-    }}
-
->
-
-    {args => <Navigation {...args} />}
-
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={Navigation} />