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

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} />