@dktunited-techoff/techoff-suite-ui 1.7.11 → 1.8.0

package/package.json

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

package/src/components/{TsDropdown → TsDropdowns/TsDropdown}/TsDropdown.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { TsDropdownProps } from './TsDropdown.types';
-import { TsIcon } from '../TsIcon/TsIcon';
-import { TsInput } from '../TsInput/TsInput/TsInput';
-import { useClickOutside } from '../../hooks/use-click-outside';
-import { TsLoader } from '../TsLoader/TsLoader';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInput } from '../../TsInput/TsInput/TsInput';
+import { useClickOutside } from '../../../hooks/use-click-outside';
+import { TsLoader } from '../../TsLoader/TsLoader';
 import './TsDropdown.css';
 
-export const TsDropdown = <T extends unknown>({
+export const TsDropdown = <T,>({
   containerRef,
   error,
   label,

package/{lib/components → src/components/TsDropdowns}/TsDropdown/__stories__/TsDropdown.stories.mdx

@@ -3,7 +3,7 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
 import { TsDropdown } from '../TsDropdown';
 import { fruits } from './fruits';
 
-<Meta title="Components/Dropdown" />
+<Meta title="Components/Dropdowns/Dropdown" />
 
 export const dropdownArgTypes = {
   error: {

package/src/components/{TsDropdown/TsDropdown.css → TsDropdowns/TsDropdownFilter/TsDropdownFilter.css}

@@ -1,72 +1,37 @@
 .ts-dropdown-container {
   position: relative;
-  width: 100%;
 }
 .ts-dropdown-input {
   display: flex;
-  align-items: center;
-  width: 100%;
   height: 32px;
-  padding-left: 10px;
-  border: 1px solid #949494;
+  padding-left: 16px;
+  padding-right: 12px;
+  background: #e1e3f5;
+  color: #3643ba;
   cursor: pointer;
 }
-.ts-dropdown-input--disabled {
-  background: #fafafa;
-  cursor: not-allowed;
+.ts-dropdown-input:hover {
+  background: #d7daf1;
 }
-.ts-dropdown-input--placeholder {
-  flex: 1;
-  color: #7a7a7a;
-  font-weight: 400;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ts-dropdown-input--value {
-  flex: 1;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.ts-dropdown-label {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  margin-right: 2px;
 }
 .ts-dropdown-input--chevron {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
   height: 32px;
 }
-.ts-dropdown-input.ts-dropdown-container--error {
-  border: 1px solid #e3262f;
-}
-.ts-dropdown-error {
-  display: flex;
-  margin-top: 4px;
-  color: #e3262f;
-}
-.ts-dropdown-error--icon {
-  margin-right: 4px;
-}
-.ts-dropdown-error--label {
-  font-size: 12px;
-  font-weight: 500;
-}
-/* ####### */
-/* LABEL   */
-.ts-dropdown-label {
-  padding-bottom: 6px;
-}
-/* ###### */
-/* MENU   */
 .ts-dropdown-menu-container {
   position: absolute;
-  top: 60px;
+  top: calc(100% + 8px);
   display: flex;
   flex-direction: column;
-  width: 100%;
-  min-width: 220px;
-  max-height: 250px;
+  width: 320px;
+  max-height: 200px;
   padding: 12px;
   box-shadow: 0px 8px 9px 0px #1010101a;
   background: #ffffff;
@@ -75,26 +40,30 @@
 }
 .ts-dropdown-search {
   padding-bottom: 12px;
-  margin-bottom: 12px;
   border-bottom: 1px solid #d9dde1;
 }
-.ts-dropdown-menu {
-  overflow: auto;
-}
 .ts-dropdown-menu-loader {
   display: flex;
+  align-items: center;
   justify-content: center;
+  padding-top: 12px;
 }
 .ts-dropdown-menu-error-text {
   display: flex;
+  align-items: center;
   justify-content: center;
-  color: #7a7a7a;
+  padding-top: 12px;
+  color: #687787;
   font-style: italic;
 }
+.ts-dropdown-menu {
+  padding-top: 12px;
+  overflow: auto;
+}
 .ts-dropdown-menu-item {
   display: flex;
   align-items: center;
-  height: 36px;
+  height: 32px;
   padding: 0 12px;
   cursor: pointer;
 }

package/src/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useClickOutside } from '../../../hooks/use-click-outside';
+import { capitalize } from '../../../utils/string.utils';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInput } from '../../TsInput/TsInput/TsInput';
+import { TsLoader } from '../../TsLoader/TsLoader';
+import { TsDropdownFilterProps } from './TsDropdownFilter.types';
+import './TsDropdownFilter.css';
+
+export const TsDropdownFilter = <T,>({
+  label,
+  searchPlaceholder,
+  loadOptions,
+  getOptionLabel,
+  getOptionValue,
+  onChange,
+}: TsDropdownFilterProps<T>) => {
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [items, setItems] = useState<T[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const ref = useClickOutside(() => setShowDropdown(false));
+
+  // ########
+  // Fetchers
+  const fetchAllItems = () => {
+    return loadOptions(searchValue)
+      .then(setItems)
+      .catch(() => {}); // TODO: Manage fetch ERRORS (Show an error message : 'An error occured, please retry later' or something else)
+  };
+
+  // ########
+  // Handlers
+  const handleSelectItem = (value: T) => {
+    onChange(value);
+    setShowDropdown(false);
+  };
+
+  // ########
+  // Watchers
+  useEffect(() => {
+    if (!showDropdown) setSearchValue('');
+  }, [showDropdown]);
+  useEffect(() => {
+    setLoading(true);
+
+    if (!searchValue) {
+      fetchAllItems().finally(() => setLoading(false));
+    } else {
+      const timeOutId = setTimeout(() => {
+        fetchAllItems().finally(() => setLoading(false));
+      }, 500);
+      return () => clearTimeout(timeOutId);
+    }
+  }, [searchValue]);
+
+  // #########
+  // Rendering
+  return (
+    <div className="ts-dropdown-container" ref={ref}>
+      <div className="ts-dropdown-input" onClick={() => setShowDropdown(!showDropdown)}>
+        <div className="ts-dropdown-label">{label}</div>
+        <div className="ts-dropdown-input--chevron">
+          <TsIcon name={showDropdown ? 'chevron-up' : 'chevron-down'} />
+        </div>
+      </div>
+
+      {showDropdown && (
+        <div className="ts-dropdown-menu-container">
+          <div className="ts-dropdown-search">
+            <TsInput
+              icon="search"
+              placeholder={searchPlaceholder}
+              value={searchValue}
+              autoFocus
+              onChange={setSearchValue}
+            />
+          </div>
+
+          {loading && (
+            <div className="ts-dropdown-menu-loader">
+              <TsLoader size="sm" />
+            </div>
+          )}
+          {!loading && items.length === 0 && <div className="ts-dropdown-menu-error-text">Nothing found.</div>}
+          {!loading && items.length > 0 && (
+            <div className="ts-dropdown-menu">
+              {items.map(item => (
+                <div
+                  key={getOptionValue(item)}
+                  className="ts-dropdown-menu-item"
+                  onClick={() => handleSelectItem(item)}
+                >
+                  {capitalize(getOptionLabel(item))}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.ts

@@ -0,0 +1,8 @@
+export type TsDropdownFilterProps<T> = {
+  label: string;
+  searchPlaceholder?: string;
+  loadOptions: (query?: string) => Promise<T[]>;
+  getOptionLabel: (item: T) => string;
+  getOptionValue: (item: T) => string;
+  onChange: (item: T) => void;
+};

package/{esm/components/TsDropdown → src/components/TsDropdowns/TsDropdownFilter}/__stories__/TsDropdown.stories.mdx

@@ -1,37 +1,19 @@
 import React from 'react';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsDropdown } from '../TsDropdown';
+import { TsDropdownFilter } from '../TsDropdownFilter';
 import { fruits } from './fruits';
 
-<Meta title="Components/Dropdown" />
+<Meta title="Components/Dropdowns/Dropdown filter" />
 
 export const dropdownArgTypes = {
-  error: {
-    control: 'text',
-    description: 'Error of the dropdown.',
-  },
   label: {
     control: 'text',
     description: 'Label of the dropdown.',
   },
-  placeholder: {
-    control: 'text',
-    description: 'Placeholder of the dropdown.',
-  },
   searchPlaceholder: {
     control: 'text',
     description: 'Placeholder of the option search (only for searchable dropdowns).',
   },
-  searchable: {
-    control: 'boolean',
-    description: 'Enable search on dropdown items.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Enable state of the dropdown.',
-    table: { defaultValue: { summary: 'false' } },
-  },
   getOptionLabel: {
     control: 'function',
     description: 'The handler called to get the option label',
@@ -50,9 +32,9 @@ export const dropdownArgTypes = {
   },
 };
 
-# Dropdown
+# Dropdown filter
 
-Dropdowns show a list of options that can be used to select, filter or sort content.
+Dropdowns specific to filter a search on page contents.
 
 ## Overview
 
@@ -60,13 +42,15 @@ Dropdowns show a list of options that can be used to select, filter or sort cont
   <Story
     name="Overview"
     args={{
-      error: '',
       label: 'Label',
-      options: fruits,
       searchPlaceholder: '',
-      placeholder: 'Select an item',
-      disabled: false,
-      searchable: false,
+      loadOptions: function ol(search) {
+        return Promise.resolve(
+          fruits.filter(function om(fruit) {
+            return fruit.name.includes(search);
+          }),
+        );
+      },
       getOptionLabel: function ol(fruit) {
         return fruit.name;
       },
@@ -76,10 +60,10 @@ Dropdowns show a list of options that can be used to select, filter or sort cont
     }}
     argTypes={dropdownArgTypes}
   >
-    {args => <TsDropdown {...args}>{args.children}</TsDropdown>}
+    {args => <TsDropdownFilter {...args}>{args.children}</TsDropdownFilter>}
   </Story>
 </Canvas>
 
 ## Props
 
-<ArgsTable story="Overview" of={TsDropdown} />
+<ArgsTable story="Overview" of={TsDropdownFilter} />

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './components/TsButton/TsButton';
 export * from './components/TsCheckbox/TsCheckbox';
-export * from './components/TsDropdown/TsDropdown';
+export * from './components/TsDropdowns/TsDropdown/TsDropdown';
+export * from './components/TsDropdowns/TsDropdownFilter/TsDropdownFilter';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';

package/esm/components/TsButton/TsButton.css

@@ -1,121 +0,0 @@
-.ts-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 16px;
-  cursor: pointer;
-  transition: all ease 0.3s;
-}
-.ts-button > div {
-  margin-right: 8px;
-}
-.ts-button > div:last-child {
-  margin-right: 0px;
-}
-button:disabled {
-  cursor: not-allowed;
-}
-/* ####### */
-/* BLOCK   */
-.ts-button--block {
-  width: 100%;
-}
-/* ####### */
-/* SIZES   */
-.ts-button--md {
-  height: 32px;
-  padding: 0 14px;
-}
-.ts-button--md.ts-button--icon-only {
-  width: 32px;
-  padding: 0;
-}
-.ts-button--lg {
-  height: 40px;
-  padding: 0 16px;
-}
-.ts-button--lg.ts-button--icon-only {
-  width: 40px;
-  padding: 0;
-}
-/* ########## */
-/* VARIANTS   */
-.ts-button--primary:not(:disabled) {
-  background: #3643ba;
-  color: #ffffff;
-}
-.ts-button--primary:not(:disabled):hover {
-  background: #2e3998;
-}
-.ts-button--primary:not(:disabled):active {
-  background: #272f76;
-}
-.ts-button--primary:disabled {
-  background: #3643ba61;
-  color: #ffffff;
-}
-.ts-button--secondary:not(:disabled) {
-  background: #ebecf7;
-  color: #3643ba;
-}
-.ts-button--secondary:not(:disabled):hover {
-  background: #e3e3f4;
-}
-.ts-button--secondary:not(:disabled):active {
-  background: #d7daf1;
-}
-.ts-button--secondary:disabled {
-  background: #3643ba0d;
-  color: #3643ba80;
-}
-.ts-button--success:not(:disabled) {
-  background: #02be8a;
-  color: #ffffff;
-}
-.ts-button--success:not(:disabled):hover {
-  background: #029e73;
-}
-.ts-button--success:not(:disabled):active {
-  background: #017f5c;
-}
-.ts-button--success:disabled {
-  background: #02be8a61;
-  color: #ffffff;
-}
-.ts-button--ghost:not(:disabled) {
-  background: #ffffff;
-  color: #3643ba;
-}
-.ts-button--ghost:not(:disabled):hover {
-  background: #ebecf7;
-}
-.ts-button--ghost:not(:disabled):active {
-  background: #e3e3f4;
-}
-.ts-button--ghost:disabled {
-  background: #ffffff61;
-  color: #1d1d1b61;
-}
-.ts-button--shadow {
-  box-shadow: 0px 12px 12px 0px #00537d1a;
-  background: #ffffff;
-  color: #4e5d6b;
-}
-/* ######### */
-/* ROUNDED   */
-.ts-button--rounded {
-  border-radius: 9999px;
-}
-
-/* ######### */
-/* 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/esm/components/TsButton/TsButton.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { TsButtonProps } from './TsButton.types';
-import './TsButton.css';
-export declare const TsButton: ({ children, icon, iconDirection, size, variant, block, rounded, ...props }: PropsWithChildren<TsButtonProps>) => React.JSX.Element;

package/esm/components/TsButton/TsButton.js

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

package/esm/components/TsButton/TsButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsButton/TsButton.types.d.ts

@@ -1,9 +0,0 @@
-import { ButtonHTMLAttributes } from 'react';
-export type TsButtonProps = {
-    icon?: string;
-    iconDirection?: 'left' | 'right';
-    size?: 'md' | 'lg';
-    variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
-    block?: boolean;
-    rounded?: boolean;
-} & ButtonHTMLAttributes<HTMLButtonElement>;

package/esm/components/TsButton/TsButton.types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=TsButton.types.js.map

package/esm/components/TsButton/TsButton.types.js.map

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

package/esm/components/TsButton/__stories__/TsButton.stories.mdx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { TsButton } from '../TsButton';
-import { icons } from '../../TsIcon/icons';
-
-<Meta title="Components/Button" />
-
-export const buttonArgTypes = {
-  children: {
-    control: 'text',
-    description: 'Child of the button.',
-  },
-  icon: {
-    control: 'select',
-    options: Object.keys(icons),
-    description: 'Icon of the button.',
-  },
-  iconDirection: {
-    control: 'inline-radio',
-    options: ['left', 'right'],
-    description: 'Define the direction of the icon.',
-    table: { defaultValue: { summary: 'left' } },
-  },
-  size: {
-    control: 'inline-radio',
-    options: ['md', 'lg'],
-    description: 'Define the size of the button.',
-    table: { defaultValue: { summary: 'md' } },
-  },
-  variant: {
-    control: 'inline-radio',
-    options: ['primary', 'secondary', 'success', 'ghost', 'shadow'],
-    description: "Variant of the button defining it's color and outline.",
-    table: { defaultValue: { summary: 'primary' } },
-  },
-  block: {
-    control: 'boolean',
-    description: 'Define if the button is full width',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Define if the button is disabled',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  rounded: {
-    control: 'boolean',
-    description: 'Define if the button has its corner full rounded',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  onClick: {
-    control: 'function',
-    description: 'The handler called when clicking on the button (not available on playground).',
-  },
-};
-
-# Button
-
-Buttons express what action will occur when the users clicks. Buttons are used to initialize an action, either in the background or foreground of an experience.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      children: 'Button',
-      iconDirection: 'left',
-      size: 'md',
-      variant: 'primary',
-      block: false,
-      disabled: false,
-      rounded: false,
-      onClick: () => {},
-    }}
-    argTypes={buttonArgTypes}
-  >
-    {args => <TsButton {...args}>{args.children}</TsButton>}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={TsButton} />