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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/{Button/Button.css → TsButton/TsButton.css}

@@ -1,4 +1,4 @@
-.button {
+.ts-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9,74 +9,74 @@
   cursor: pointer;
   transition: all ease 0.3s;
 }
-.button > div {
+.ts-button > div {
   margin-right: 8px;
 }
-.button > div:last-child {
+.ts-button > div:last-child {
   margin-right: 0px;
 }
 /* ####### */
 /* BLOCK   */
-.button--block {
+.ts-button--block {
   width: 100%;
 }
 /* ####### */
 /* SIZES   */
-.button--md {
+.ts-button--md {
   height: 32px;
   padding: 0 14px;
 }
-.button--md.button--icon-only {
+.ts-button--md.ts-button--icon-only {
   width: 32px;
   padding: 0;
 }
-.button--lg {
+.ts-button--lg {
   height: 40px;
   padding: 0 16px;
 }
-.button--lg.button--icon-only {
+.ts-button--lg.ts-button--icon-only {
   width: 40px;
   padding: 0;
 }
 /* ########## */
 /* VARIANTS   */
-.button--primary {
+.ts-button--primary {
   background: #3643ba;
   color: #ffffff;
 }
-/* .button--primary:hover {
+/* .ts-button--primary:hover {
   background: #00689d;
 } */
-.button--secondary {
+.ts-button--secondary {
   background: #ebecf7;
   color: #3643ba;
 }
-/* .button--secondary:hover {
+/* .ts-button--secondary:hover {
   background: #bedeef;
 } */
-.button--success {
+.ts-button--success {
   background: #02be8a;
   color: #ffffff;
 }
-.button--success:hover {
+.ts-button--success:hover {
   background: #029e73;
   color: #ffffff;
 }
-.button--ghost {
+.ts-button--ghost {
   background: #ffffff;
   color: #1d1d1b;
 }
-.button--ghost:hover {
+.ts-button--ghost:hover {
   background: #ebecf7;
 }
-.button--shadow {
+.ts-button--shadow {
   box-shadow: 0px 12px 12px 0px #00537d1a;
   background: #ffffff;
   color: #4e5d6b;
 }
 /* ######### */
 /* ROUNDED   */
-.button--rounded {
+.ts-button--rounded {
   border-radius: 9999px;
 }
 

package/src/components/TsButton/TsButton.tsx

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

package/src/components/{Button/Button.types.ts → TsButton/TsButton.types.ts}

@@ -1,4 +1,4 @@
-export type ButtonProps = {
+export type TsButtonProps = {
   icon?: string;
   iconDirection?: 'left' | 'right';
   size?: 'md' | 'lg';

package/src/components/{Button/__stories__/Button.stories.mdx → TsButton/__stories__/TsButton.stories.mdx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Button } from '../Button';
-import { icons } from '../../Icon/icons';
+import { TsButton } from '../TsButton';
+import { icons } from '../../TsIcon/icons';
 
 <Meta title="Components/Button" />
 
@@ -65,10 +65,10 @@ Buttons express what action will occur when the users clicks. Buttons are used t
     }}
     argTypes={buttonArgTypes}
   >
-    {args => <Button {...args}>{args.children}</Button>}
+    {args => <TsButton {...args}>{args.children}</TsButton>}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={Button} />
+<ArgsTable story="Overview" of={TsButton} />

package/src/components/{Icon/Icon.css → TsIcon/TsIcon.css}

@@ -1,16 +1,16 @@
-.icon--16 {
+.ts-icon--16 {
   width: 16px;
   height: 16px;
 }
-.icon--20 {
+.ts-icon--20 {
   width: 20px;
   height: 20px;
 }
-.icon--24 {
+.ts-icon--24 {
   width: 24px;
   height: 24px;
 }
-.icon svg {
+.ts-icon svg {
   width: 100%;
   height: 100%;
 }

package/src/components/TsIcon/TsIcon.tsx

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

package/src/components/TsIcon/TsIcon.types.ts

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

package/src/components/{Icon/__stories__/Icon.stories.mdx → TsIcon/__stories__/TsIcon.stories.mdx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Icon } from '../Icon';
+import { TsIcon } from '../TsIcon';
 import { icons } from '../icons';
 
 <Meta title="Guidelines/Iconography" />
@@ -65,13 +65,13 @@ Icons are visual symbols used to represent ideas, objects or actions. They commu
 
 <Canvas>
   <Story name="Overview" args={{ name: 'heart', size: '20' }} argTypes={iconArgTypes}>
-    {args => <Icon {...args} />}
+    {args => <TsIcon {...args} />}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={Icon} />
+<ArgsTable story="Overview" of={TsIcon} />
 
 ## Icons
 
@@ -81,7 +81,7 @@ Icons are visual symbols used to represent ideas, objects or actions. They commu
     .map(icon => (
       <div className="icon-container" key={icon}>
         <div className="icon">
-          <Icon name={icon} />
+          <TsIcon name={icon} />
         </div>
         <div className="icon-label">{icon}</div>
       </div>

package/src/components/{Loader/Loader.css → TsLoader/TsLoader.css}

@@ -7,7 +7,7 @@
   }
 }
 
-.loader {
+.ts-loader {
   border: 2px solid;
   border-color: #3643ba transparent;
   border-radius: 50%;
@@ -18,15 +18,15 @@
 
 /* ####### */
 /* SIZES   */
-.loader--sm {
+.ts-loader--sm {
   width: 24px;
   height: 24px;
 }
-.loader--md {
+.ts-loader--md {
   width: 32px;
   height: 32px;
 }
-.loader--lg {
+.ts-loader--lg {
   width: 44px;
   height: 44px;
 }

package/src/components/TsLoader/TsLoader.tsx

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

package/src/components/TsLoader/TsLoader.types.ts

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

package/src/components/{Loader/__stories__/Loader.stories.mdx → TsLoader/__stories__/TsLoader.stories.mdx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Loader } from '../Loader';
+import { TsLoader } from '../TsLoader';
 
 <Meta title="Components/Loader" />
 
@@ -21,10 +21,10 @@ Loader express to user that an action is occuring.
 
 <Canvas>
   <Story name="Overview" args={{ size: 'md' }} argTypes={loaderArgTypes}>
-    {args => <Loader {...args}>{args.children}</Loader>}
+    {args => <TsLoader {...args}>{args.children}</TsLoader>}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={Loader} />
+<ArgsTable story="Overview" of={TsLoader} />

package/src/index.ts

@@ -1,11 +1,6 @@
-export * from './components/Button/Button';
-export * from './components/Checkbox/Checkbox';
-export * from './components/Icon/Icon';
-export * from './components/Inputs/BooleanInput/BooleanInput';
-export * from './components/Inputs/Input/Input';
-export * from './components/Loader/Loader';
-export * from './components/Select/Select';
-export * from './layouts/Header/Header';
-export * from './layouts/Header/HeaderProfile';
-export * from './layouts/Header/HeaderSearch';
-export * from './layouts/Navigation/Navigation';
+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/src/layouts/{Header/Header.css → TsHeader/TsHeader.css}

@@ -17,31 +17,31 @@ header {
   height: 64px;
   padding: 0 24px;
 }
-.header-aside {
+.ts-header-aside {
   display: flex;
   align-items: center;
   flex: 1;
   height: 100%;
 }
-.header-right-side {
+.ts-header-right-side {
   justify-content: flex-end;
 }
-.header-search-bar {
+.ts-header-search-bar {
   display: flex;
   align-items: center;
   width: 400px;
   height: 100%;
 }
-.header-actions {
+.ts-header-actions {
   display: flex;
 }
-.header-actions > * {
+.ts-header-actions > * {
   margin-left: 12px;
 }
 
 /* ################ */
 /* HEADER TECHOFF   */
-.header-techoff {
+.ts-header-techoff {
   display: flex;
   height: 18px;
   margin-left: 4px;
@@ -49,10 +49,10 @@ header {
 
 /* ################ */
 /* HEADER PROFILE   */
-.header-profile-container {
+.ts-header-profile-container {
   position: relative;
 }
-.header-profile-dropdown {
+.ts-header-profile-dropdown {
   display: flex;
   height: 40px;
   border-radius: 9999px;
@@ -61,13 +61,13 @@ header {
   background-color: #ffffff;
   cursor: pointer;
 }
-.header-profile-img-container {
+.ts-header-profile-img-container {
   width: 40px;
   height: 40px;
   padding: 4px;
   border-radius: 9999px;
 }
-.header-profile-img-icon {
+.ts-header-profile-img-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -76,14 +76,14 @@ header {
   border-radius: 9999px;
   background-color: rgb(229, 229, 229);
 }
-.header-profile-name {
+.ts-header-profile-name {
   display: flex;
   flex: 1;
   align-items: center;
   padding-left: 4px;
   padding-right: 16px;
 }
-.header-profile-chevron {
+.ts-header-profile-chevron {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -91,7 +91,7 @@ header {
   padding-right: 14px;
   border-radius: 9999px;
 }
-.header-profile-menu {
+.ts-header-profile-menu {
   position: absolute;
   right: 0;
   top: 48px;
@@ -102,35 +102,35 @@ header {
   background-color: #ffffff;
   z-index: 10;
 }
-.header-profile-menu-item {
+.ts-header-profile-menu-item {
   display: flex;
   align-items: center;
   height: 36px;
   border-radius: 6px;
   cursor: pointer;
 }
-.header-profile-menu-item:hover {
+.ts-header-profile-menu-item:hover {
   background-color: #e7f3f9;
 }
-.header-profile-menu-item-icon {
+.ts-header-profile-menu-item-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
 }
-.header-profile-menu-item-label {
+.ts-header-profile-menu-item-label {
   flex: 1;
   padding: 0 2px;
 }
 
 /* ############### */
 /* HEADER SEARCH   */
-.header-search {
+.ts-header-search {
   position: relative;
   width: 100%;
 }
-.header-search-items-container {
+.ts-header-search-items-container {
   position: absolute;
   top: calc(100% + 4px);
   width: 100%;
@@ -141,13 +141,13 @@ header {
   overflow-y: auto;
   z-index: 100;
 }
-.header-search-loading {
+.ts-header-search-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 40px;
 }
-.header-search-no-items {
+.ts-header-search-no-items {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -155,10 +155,10 @@ header {
   color: #8c96a2;
   font-style: italic;
 }
-.header-search-items {
+.ts-header-search-items {
   padding: 8px;
 }
-.header-search-item {
+.ts-header-search-item {
   display: flex;
   align-items: center;
   height: 32px;
@@ -166,10 +166,10 @@ header {
   border-radius: 4px;
   cursor: pointer;
 }
-.header-search-item:hover {
+.ts-header-search-item:hover {
   background: #e7f3f9;
 }
-.header-search-item--match {
+.ts-header-search-item--match {
   background: #cce5f2;
   color: #007dbc;
   font-weight: 700;

package/src/layouts/TsHeader/TsHeader.tsx

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

package/src/layouts/{Header/Header.types.ts → TsHeader/TsHeader.types.ts}

@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 
-export type HeaderProps = {
+export type TsHeaderProps = {
   actions: ReactElement;
   appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
   search?: ReactElement;
 };
-export type HeaderProfileItemProps = { icon: string; label: string; link: string };
-export type HeaderProfileProps = { firstname: string; lastname: string };
-export type HeaderSearchProps = {
+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[]>;

package/src/layouts/TsHeader/TsHeaderProfile.tsx

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

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

@@ -1,18 +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) => {
+}: TsHeaderSearchProps) => {
   const [searchValue, setSearchValue] = useState<string>('');
   const [items, setItems] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -58,7 +58,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 +72,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>
               ))}