feat: added select-autocomplete & debounce

client/package.json

@@ -25,6 +25,7 @@
     "@react-oauth/google": "^0.11.1",
     "@storybook/addon-styling": "^1.3.6",
     "@tanstack/react-query": "beta",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
@@ -33,6 +34,7 @@
     "clsx": "^2.0.0",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
+    "lodash.debounce": "^4.0.8",
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -44,7 +46,7 @@
     "react-tooltip": "^5.21.3",
     "sass": "^1.64.2",
     "sonner": "^1.0.3",
-    "teameights-types": "^1.0.1",
+    "teameights-types": "^1.0.4",
     "tsparticles": "^2.12.0",
     "typescript": "5.1.6",
     "yarn": "^1.22.19"

client/src/app/page.tsx

@@ -7,6 +7,7 @@ import { IUserRequest } from 'teameights-types';
 import { NewtonsCradle, RaceBy, Ring } from '@uiball/loaders';
 import { toast } from 'sonner';
 import { useState } from 'react';
+import { SelectAutocomplete } from '@/shared/ui/select/ui/select-autocomplete/select-autocomplete';
 
 export default function Home() {
   const width = useGetScreenWidth();
@@ -58,6 +59,8 @@ export default function Home() {
       <Drawer open={open} onClose={() => setOpen(false)}>
         <button onClick={() => setOpen(false)}>close</button>
       </Drawer>
+
+      <SelectAutocomplete />
     </>
   );
 }

client/src/shared/assets/icons/index.ts

@@ -9,6 +9,7 @@ export { WarningCircle } from './warning-circle';
 export { X } from './x';
 export { Cookie } from './cookie';
 export { Crown } from './crown';
+export { Search } from './search';
 export { ArrowLeft } from './arrows';
 export { CaretUp, CaretDown } from './caret';
 export { LogoBig } from './logo';

client/src/shared/assets/icons/search.tsx

@@ -0,0 +1,15 @@
+import { FC, SVGProps } from 'react';
+export const Search: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='20'
+      height='20'
+      fill='#5bd424'
+      viewBox='0 0 256 256'
+      {...props}
+    >
+      <path d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'></path>
+    </svg>
+  );
+};

client/src/shared/lib/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useClickOutside } from './use-click-outside/use-click-outside';
 export { useGetScreenWidth } from './use-get-screen-width/use-get-screen-width';
+export { useDebounce } from './use-debounce/use-debounce';

client/src/shared/lib/hooks/use-debounce/use-debounce.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebounced(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debounced;
+}

client/src/shared/ui/select/lib/select-autocomplete-styles.tsx

@@ -0,0 +1,96 @@
+import { CSSObjectWithLabel, OptionProps, StylesConfig } from 'react-select';
+import { OptionType } from '@/shared/ui/select/ui/select-autocomplete/select-autocomplete';
+
+const _colors = {
+  grey: {
+    normal: '#8f9094',
+    dark: '#2f3239',
+    medium: '#434752',
+  },
+  green: {
+    bright: '#5bd424',
+    dark: '#064006',
+    active: '#1c8111',
+  },
+  white: '#fff',
+  red: '#d42422',
+};
+
+const _regularOption = (
+  styles: CSSObjectWithLabel,
+  { isFocused, isSelected }: OptionProps<OptionType>
+) => ({
+  ...styles,
+  cursor: 'pointer',
+  padding: '4px 8px 4px 16px',
+  background:
+    isFocused && !isSelected ? _colors.green.dark : isSelected ? _colors.green.active : undefined,
+
+  ':active': {
+    background: _colors.green.dark,
+  },
+});
+
+export const selectAutocompleteStyles = (): StylesConfig<OptionType> => {
+  return {
+    control: styles => ({
+      ...styles,
+      outline: 'none',
+      border: `1px solid ${_colors.grey.normal}`,
+      borderRadius: 10,
+      width: '100%',
+      overflow: 'hidden',
+      background: 'inherit',
+      cursor: 'text',
+      padding: '9px 12px',
+      fontSize: '100%',
+      // This line disable the blue border
+      boxShadow: 'none',
+      '&:active': { boxShadow: 'none' },
+      '&:focus': { boxShadow: 'none' },
+      '&:focus-within': { boxShadow: 'none' },
+      '&:hover': { boxShadow: 'none' },
+      caretColor: _colors.green.bright,
+    }),
+    placeholder: styles => ({ ...styles, margin: 0, color: _colors.grey.normal }),
+    valueContainer: styles => ({
+      ...styles,
+      padding: 0,
+      margin: 0,
+    }),
+    singleValue: styles => ({
+      ...styles,
+      color: _colors.white,
+      padding: 0,
+      margin: 0,
+    }),
+    clearIndicator: styles => ({
+      ...styles,
+      padding: 0,
+      cursor: 'pointer',
+    }),
+    input: styles => ({
+      ...styles,
+      color: _colors.white,
+      padding: 0,
+      margin: 0,
+    }),
+    menu: () => ({
+      padding: 0,
+      margin: 0,
+      background: 'transparent',
+      paddingTop: '8px',
+      maxHeight: '300px',
+    }),
+    menuList: styles => ({
+      ...styles,
+      padding: '8px 0px',
+      margin: 0,
+      borderRadius: '5px',
+      overflowY: 'auto',
+      boxShadow: '0 4px 24px 0 rgb(17 20 27 / 25%)',
+      background: _colors.grey.dark,
+    }),
+    option: (styles, props) => _regularOption(styles, props),
+  };
+};

client/src/shared/ui/select/ui/select-autocomplete/clear-indicator/clear-indicator.tsx

@@ -0,0 +1,17 @@
+import { ClearIndicatorProps } from 'react-select';
+import { X } from '@/shared/assets';
+import { CSSProperties } from 'react';
+import { OptionType } from '../select-autocomplete';
+
+export const ClearIndicator = (props: ClearIndicatorProps<OptionType>) => {
+  const {
+    children = <X />,
+    getStyles,
+    innerProps: { ref, ...restInnerProps },
+  } = props;
+  return (
+    <div {...restInnerProps} ref={ref} style={getStyles('clearIndicator', props) as CSSProperties}>
+      {children}
+    </div>
+  );
+};

client/src/shared/ui/select/ui/select-autocomplete/clear-indicator/index.ts

@@ -0,0 +1 @@
+export { ClearIndicator } from './clear-indicator';

client/src/shared/ui/select/ui/select-autocomplete/control/control.module.scss

@@ -0,0 +1,5 @@
+.iconWrapper {
+  margin-right: 8px;
+  width: 20px;
+  height: 20px
+}

client/src/shared/ui/select/ui/select-autocomplete/control/control.tsx

@@ -0,0 +1,13 @@
+import { components, ControlProps } from 'react-select';
+import { Search } from '@/shared/assets';
+import { OptionType } from '../select-autocomplete';
+import styles from './control.module.scss';
+
+export const Control = ({ children, ...props }: ControlProps<OptionType>) => (
+  <components.Control {...props}>
+    <div className={styles.iconWrapper}>
+      <Search />
+    </div>
+    {children}
+  </components.Control>
+);

client/src/shared/ui/select/ui/select-autocomplete/control/index.ts

@@ -0,0 +1 @@
+export { Control } from './control';

client/src/shared/ui/select/ui/select-autocomplete/option/index.ts

@@ -0,0 +1 @@
+export { Option } from './option';

client/src/shared/ui/select/ui/select-autocomplete/option/option.tsx

@@ -0,0 +1,15 @@
+import { components, OptionProps } from 'react-select';
+import { OptionType } from '../select-autocomplete';
+import { Flex } from '@/shared/ui';
+import styles from '../select-autocomplete.module.scss';
+
+export const Option = (props: OptionProps<OptionType>) => {
+  return (
+    <components.Option {...props}>
+      <Flex align='center' gap={8}>
+        <img src={props.data.image} className={styles.image} alt='image' />
+        {props.data.label}
+      </Flex>
+    </components.Option>
+  );
+};

client/src/shared/ui/select/ui/select-autocomplete/select-autocomplete.module.scss

@@ -0,0 +1,7 @@
+.image {
+  width: 24px;
+  height: 24px;
+  border-radius: 50px;
+  object-fit: cover;
+  user-select: none;
+}

client/src/shared/ui/select/ui/select-autocomplete/select-autocomplete.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/react';
+import { SelectAutocomplete } from '@/shared/ui/select/ui/select-autocomplete/select-autocomplete';
+
+const meta: Meta<typeof SelectAutocomplete> = {
+  title: 'shared/Fields/Select-Autocomplete',
+  component: SelectAutocomplete,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export const Select_default = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 30,
+        width: '300px',
+        minHeight: '400px',
+      }}
+    >
+      <div style={{ display: 'flex', gap: 5, flexDirection: 'column' }}>
+        <p>For unauthenticated requests, the rate limit allows for up to 60 requests per hour.</p>
+        <SelectAutocomplete name='concentration' />
+      </div>
+    </div>
+    // )
+  );
+};
+
+export default meta;