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

package/lib/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/lib/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/lib/layouts/TsNavigation/TsNavigation.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsNavigation = exports.TsNavigationBreadcrumbItem = exports.TsNavigationBreadcrumbDivider = void 0;
+const React = require("react");
+const TsIcon_1 = require("../../components/TsIcon/TsIcon");
+require("./TsNavigation.css");
+const TsNavigationBreadcrumbDivider = () => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-breadcrumb-chevron" },
+        React.createElement(TsIcon_1.TsIcon, { name: "chevron-right" })));
+};
+exports.TsNavigationBreadcrumbDivider = TsNavigationBreadcrumbDivider;
+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_1.TsIcon, { name: icon, size: "16" }))),
+        children));
+};
+exports.TsNavigationBreadcrumbItem = TsNavigationBreadcrumbItem;
+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)));
+};
+exports.TsNavigation = TsNavigation;
+//# sourceMappingURL=TsNavigation.js.map

package/lib/layouts/TsNavigation/TsNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsNavigation.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2DAAwD;AAExD,8BAA4B;AAErB,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,6BAA6B,iCAQxC;AAEK,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,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,0BAA0B,8BAyBrC;AAEK,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;AAVW,QAAA,YAAY,gBAUvB"}

package/lib/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/lib/layouts/TsNavigation/TsNavigation.types.js

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

package/lib/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":""}

package/lib/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/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": "1.3.0",
+  "version": "1.4.0",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/TsInput/TsInput/TsInput.css

@@ -0,0 +1,43 @@
+.ts-input {
+  position: relative;
+  width: 100%;
+  height: 32px;
+}
+input {
+  width: 100%;
+  height: 100%;
+  padding: 0 10px;
+  border: 1px solid #949494;
+  font-weight: 600;
+}
+input::placeholder {
+  font-weight: 400;
+}
+input:focus {
+  border: 1.5px solid #3643ba;
+}
+.ts-input--padding-1 input {
+  padding: 0 30px 0 10px;
+}
+.ts-input-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  color: #949494;
+}
+
+/* ######### */
+/* 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/components/TsInput/TsInput/TsInput.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInputProps } from './TsInput.types';
+import './TsInput.css';
+
+export const TsInput = ({ icon, value, onChange, ...props }: TsInputProps) => {
+  // #########
+  // Rendering
+  return (
+    <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+      <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
+      {icon && (
+        <div className="ts-input-icon">
+          <TsIcon name={icon} size="16" />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/TsInput/TsInput/TsInput.types.tsx

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+
+export type TsInputProps = {
+  icon?: string;
+  onChange: (value: string) => void;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsInput } from '../TsInput';
+import { icons } from '../../../TsIcon/icons';
+
+<Meta title="Components/Input" />
+
+export const inputArgTypes = {
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder of the button.',
+  },
+};
+
+# Input
+
+Input allows the user to enter content and data when the expected user input is a single line of text.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ onChange: () => {} }} argTypes={inputArgTypes}>
+    {args => <TsInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsInput} />

package/src/layouts/TsHeader/TsHeaderSearch.tsx

@@ -10,10 +10,9 @@ export const TsHeaderSearch = ({
   getItemValue,
   loadItems,
   noDataLabel,
-  placeholder,
   onChange,
 }: TsHeaderSearchProps) => {
-  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchValue] = useState<string>('');
   const [items, setItems] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [showItems, setShowItems] = useState<boolean>(false);