@dktunited-techoff/techoff-suite-ui 0.9.3 → 0.9.5

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

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

package/lib/layouts/Header/HeaderProfile.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { HeaderProfileProps } from './Header.types';
+export declare const HeaderProfile: ({ firstname, lastname, supportLink }: HeaderProfileProps) => React.JSX.Element;

package/lib/layouts/Header/HeaderProfile.js

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

package/lib/layouts/Header/HeaderProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderProfile.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAiC;AACjC,qDAAkD;AAClD,qEAAgE;AAChE,2DAAsD;AAG/C,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAsB,EAAE,EAAE;IACxF,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,WAAW;IACX,WAAW;IACX,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEjF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B,EAAC,GAAG,EAAE,GAAG;QAChD,6BAAK,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,gBAAgB;YAChE,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,6BAAK,SAAS,EAAC,yBAAyB;oBACtC,oBAAC,WAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC1B,CACF;YACN,6BAAK,SAAS,EAAC,qBAAqB;gBACjC,IAAA,yBAAU,EAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEN,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,WAAI,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5D,CACF;QAEL,MAAM,IAAI,CACT,6BAAK,SAAS,EAAC,qBAAqB;YAClC,6BAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,iBAAiB;gBAClE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,WAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;gBACN,6BAAK,SAAS,EAAC,gCAAgC,sBAAsB;gBACrE,6BAAK,SAAS,EAAC,+BAA+B;oBAC5C,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,CACF,CACF,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA3CW,QAAA,aAAa,iBA2CxB"}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Header } from '../Header';
+import { HeaderProfile } from '../HeaderProfile';
+import { Button } from '../../../components/Button/Button';
+
+<Meta title="Layouts/Header" />
+
+export const headerArgTypes = {
+  appName: {
+    control: 'select',
+    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
+    description: 'Icon of the button.',
+  },
+};
+
+# 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: [
+        <Button icon="add" size="lg" variant="shadow" rounded />,
+        <HeaderProfile firstname="John" lastname="Doe" />,
+      ],
+      appName: 'repairability',
+    }}
+    argTypes={headerArgTypes}
+  >
+    {args => <Header {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Header} />

package/lib/layouts/Navigation/Navigation.css

@@ -0,0 +1,74 @@
+.navigation {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 24px;
+}
+
+/* ############ */
+/* BREADCRUMB   */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+}
+.breadcrumb-container {
+  display: flex;
+  align-items: center;
+}
+.breadcrumb-chevron {
+  padding: 0 8px;
+  color: #00689d;
+}
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-radius: 9999px;
+  color: #00689d;
+}
+.breadcrumb-item--highlight {
+  padding: 0 20px;
+  box-shadow: 0px 6px 6px 0px #00537d1a;
+  background: linear-gradient(270.22deg, #007dbc 43.94%, #7ebee0 114.83%);
+  color: #ffffff;
+}
+.breadcrumb-item--link {
+  cursor: pointer;
+}
+.breadcrumb-item--link:hover {
+  text-decoration: underline;
+}
+.breadcrumb-item--icon {
+  padding-right: 8px;
+}
+
+/* ######### */
+/* DIVIDER   */
+.navigation-divider {
+  flex: 1;
+  height: 1px;
+  margin: 4px 0;
+  background: #bedeef;
+}
+
+/* ######### */
+/* ACTIONS   */
+.navigation-actions {
+  /* flex items-center [&>*]:ml-4 */
+  display: flex;
+  align-items: center;
+}
+.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/Navigation/Navigation.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
+import './Navigation.css';
+export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
+export declare const Navigation: ({ actions, breadcrumbs }: NavigationProps) => React.JSX.Element;

package/lib/layouts/Navigation/Navigation.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = exports.NavigationBreadcrumbItem = void 0;
+const React = require("react");
+const react_1 = require("react");
+const Icon_1 = require("../../components/Icon/Icon");
+require("./Navigation.css");
+const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `
+        breadcrumb-item
+        ${highlight ? 'breadcrumb-item--highlight' : ''} ${onClick ? 'breadcrumb-item--link' : ''}
+      `, onClick: onClick },
+        icon && (React.createElement("div", { className: "breadcrumb-item--icon" },
+            React.createElement(Icon_1.Icon, { name: icon, size: "16" }))),
+        children));
+};
+exports.NavigationBreadcrumbItem = NavigationBreadcrumbItem;
+const Navigation = ({ actions, breadcrumbs }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "navigation" },
+        React.createElement("div", { className: "breadcrumb" }, breadcrumbs.map((breadcrumb, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
+            breadcrumb,
+            index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
+                React.createElement(Icon_1.Icon, { name: "chevron-right" }))))))),
+        React.createElement("div", { className: "navigation-divider" }),
+        React.createElement("div", { className: "navigation-actions" }, actions?.map((action, index) => (0, react_1.cloneElement)(action, { key: index, ...action.props })))));
+};
+exports.Navigation = Navigation;
+//# sourceMappingURL=Navigation.js.map

package/lib/layouts/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAwD;AACxD,qDAAkD;AAElD,4BAA0B;AAEnB,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CACnF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,UAAU,cAwBrB"}

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

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

package/lib/layouts/Navigation/Navigation.types.js

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

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

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

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Navigation, NavigationBreadcrumbItem } 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>,
+        <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>,
+        <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
+      ]
+    }}
+
+>
+
+    {args => <Navigation {...args} />}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Navigation} />

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

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

package/lib/utils/string.utils.js

@@ -0,0 +1,6 @@
+"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

@@ -0,0 +1 @@
+{"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/package.json

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

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/Icon/Icon';
 export * from './components/Inputs/BooleanInput/BooleanInput';
 export * from './components/Inputs/TextInput/TextInput';
 export * from './components/Loader/Loader';
+export * from './components/Select/Select';
 export * from './layouts/Header/Header';
 export * from './layouts/Header/HeaderProfile';
 export * from './layouts/Navigation/Navigation';

package/src/layouts/Navigation/Navigation.tsx

@@ -51,7 +51,7 @@ export const Navigation = ({ actions, breadcrumbs }: NavigationProps) => {
       </div>
       <div className="navigation-divider" />
       <div className="navigation-actions">
-        {actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))}
+        {actions?.map((action, index) => cloneElement(action, { key: index, ...action.props }))}
       </div>
     </div>
   );