refactor stories and hooks

Author: based-ghost

__stories__/helpers/components/OptionsCountButton.tsx

@@ -10,7 +10,8 @@ type OptionsCountButtonProps = Readonly<{
 }>;
 
 const StyledButton = styled(Button)<{ isActive?: boolean }>`
-  width: 6.25rem;
+  width: 6rem;
+  min-width: 6rem !important;
   transition: none;
 
   ${({ isActive }) =>

__stories__/helpers/utils/index.ts

@@ -1,5 +1,13 @@
 import type { Option } from '../../types';
 
+export const numberWithCommas = (value: number): string => {
+  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
+export const getRandomInt = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
 export const stringifyJavaScriptObj = (data: any = {}): string => {
   return JSON.stringify(data, null, 2).replace(/"(\w+)"\s*:/g, '$1:');
 };
@@ -22,27 +30,21 @@ export const createSelectOptions = (optionCount: number): Option[] => {
   return results;
 };
 
-export const createAsyncOptions = (
-  optionCount: number,
-  lblSuffix: string
-): Option[] => {
-  const options = createSelectOptions(optionCount);
+export const createThemeOptions = (ThemeEnum: any): Option[] => {
+  return Object.keys(ThemeEnum).map((key) => ({
+    value: ThemeEnum[key],
+    label: ThemeEnum[key]
+  }));
+};
 
+export const createAsyncOptions = (optionCount: number, lblSuffix: string): Option[] => {
+  const options = createSelectOptions(optionCount);
   return options.map(({ value, label }: Option) => ({
     value,
     label: `${label} - ${lblSuffix}`
   }));
 };
 
-export const createThemeOptions = (ThemeEnum: any): Option[] => {
-  const keys = Object.keys(ThemeEnum);
-
-  return keys.map((key) => ({
-    value: ThemeEnum[key],
-    label: ThemeEnum[key]
-  }));
-};
-
 export const hexToRgba = (hex: string, alpha: number = 1): string => {
   const hexReplacer: string = hex.replace(
     /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
@@ -54,7 +56,4 @@ export const hexToRgba = (hex: string, alpha: number = 1): string => {
   const rgbaParts: number[] = [...rgbParts, alphaValid];
 
   return `rgba(${rgbaParts.join(',')})`;
-};
-
-export const numberWithCommas = (value: number): string => value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-export const getRandomInt = (min: number, max: number): number => Math.floor(Math.random() * (max - min + 1)) + min;
+};

__stories__/index.stories.tsx

@@ -292,11 +292,6 @@ export const Styling = () => {
   const [themeConfig, setThemeConfig] = useState<Theme | undefined>(undefined);
   const [selectedOption, setSelectedOption] = useCallbackState<SelectedOption | null>(null);
 
-  const selectWrapperStyle = { marginTop: '1rem' };
-  const noteStyle = { fontSize: 'inherit', fontWeight: 700 };
-  const noteCodeStyle = { fontWeight: 500 };
-  const menuItemSize = selectedOption?.value === ThemeEnum.LARGE_TEXT ? 44 : 35;
-
   const memoizedMarkupNode = useMemo(() => (
     <CodeMarkup
       language='markup'
@@ -308,10 +303,15 @@ export const Styling = () => {
   useEffect(() => {
     if (selectedOption) {
       const { value } = selectedOption;
-      setThemeConfig(ThemeConfigMap[value as string | number]);
+      setThemeConfig(ThemeConfigMap[value!]);
     }
   }, [selectedOption]);
 
+  const noteCodeStyle = { fontWeight: 500 };
+  const selectWrapperStyle = { marginTop: '1rem' };
+  const noteStyle = { fontSize: 'inherit', fontWeight: 700 };
+  const menuItemSize = selectedOption?.value === ThemeEnum.LARGE_TEXT ? 44 : 35;
+
   return (
     <Container>
       <Title>Styling</Title>
@@ -590,7 +590,7 @@ export const Methods = () => {
             <Button onClick={blurSelect}>Blur</Button>
             <Button onClick={toggleMenuOpen}>Open Menu</Button>
             <Button onClick={clearValue}>Clear Value</Button>
-            <Button onClick={updateSelectedOption}>Set Value (1st Option)</Button>
+            <Button onClick={updateSelectedOption}>Set Value</Button>
           </Buttons>
         </CardHeader>
         <CardBody>
@@ -699,10 +699,10 @@ export const Filtering = () => {
 };
 
 export const Virtualization = () => {
-  const optionCountList = useMemo<number[]>(() => [100, 1000, 10000, 25000, 50000, 100000], []);
-  const selectRef = useRef<SelectRef | null>(null);
-  const [options, setOptions] = useState<Option[]>([]);
+  const optionCountList = useMemo(() => [100, 1000, 10000, 25000, 50000, 100000], []);
   const [optionsCount, setOptionsCount] = useState(optionCountList[0]);
+  const [options, setOptions] = useState<Option[]>([]);
+  const selectRef = useRef<SelectRef | null>(null);
 
   useUpdateEffect(() => {
     selectRef.current?.clearValue();
@@ -789,19 +789,19 @@ export const Virtualization = () => {
 
 export const Advanced = () => {
   const getOptionValue = useCallback(({ id }: PackageOption): number => id, []);
-  const getIsOptionDisabled = useCallback((opt: PackageOption): boolean => opt.name === PACKAGE_OPTIONS[3].name, []);
+  const getIsOptionDisabled = useCallback(({ name }: PackageOption): boolean => name === PACKAGE_OPTIONS[3].name, []);
 
   const renderOptionLabel = useCallback(
-    (opt: PackageOption) => (
+    (option: PackageOption) => (
       <OptionContainer>
         <ReactSvg
           {...REACT_SVG_PROPS}
-          isDisabled={getIsOptionDisabled(opt)}
+          isDisabled={getIsOptionDisabled(option)}
         >
           <path {...REACT_SVG_PATH_PROPS} />
           <circle {...REACT_SVG_CIRCLE_PROPS} />
         </ReactSvg>
-        <OptionName>{opt.name}</OptionName>
+        <OptionName>{option.name}</OptionName>
       </OptionContainer>
     ),
     [getIsOptionDisabled]
@@ -878,19 +878,18 @@ export const Advanced = () => {
 };
 
 export const Portaling = () => {
-  const menuPortalElId = 'menu-portal-test';
+  const portalId = 'menu-portal-test';
   const options = useMemo<Option[]>(() => createSelectOptions(3), []);
 
   const [menuOpen, setMenuOpen] = useState(false);
-  const [menuPortalTarget, setMenuPortalTarget] = useState<Element | undefined>(undefined);
-
+  const [menuPortalTarget, setMenuPortalTarget] = useState<Element | undefined>();
   const onMenuOpen = useCallback(() => setMenuOpen(true), []);
   const onMenuClose = useCallback(() => setMenuOpen(false), []);
 
   useEffect(() => {
-    const portalEl = document.getElementById(menuPortalElId) as HTMLElement;
+    const portalEl = document.getElementById(portalId) as HTMLElement;
     setMenuPortalTarget(portalEl);
-  }, [menuPortalElId]);
+  }, [portalId]);
 
   return (
     <Container>
@@ -908,10 +907,10 @@ export const Portaling = () => {
         <CardHeader>
           <Label>Menu component portaled to an element below this text.</Label>
           <MenuPortalElement
+            id={portalId}
             menuOpen={menuOpen}
-            id={menuPortalElId}
           >
-            <span>Portal {'<'}div /{'>'}</span>
+            <span>portal {'<'}div /{'>'}</span>
           </MenuPortalElement>
         </CardHeader>
         <CardBody>
@@ -935,15 +934,13 @@ export const Async = () => {
   const selectRef = useRef<SelectRef | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [options, setOptions] = useState<Option[]>(() => createAsyncOptions(5, 'Initial'));
-
   const onInputChange = useCallback(() => setIsLoading(true), []);
 
   const onSearchChange = useCallback(
     async (value: string = 'Initial') => {
       try {
         await mockHttpRequest();
-        const count = getRandomInt(1, 5);
-        const nextOptions = createAsyncOptions(count, `Search text: ${value}`);
+        const nextOptions = createAsyncOptions(getRandomInt(1, 5), `Search text: ${value}`);
         selectRef.current?.clearValue();
         setOptions(nextOptions);
         setIsLoading(false);

src/Select.tsx

@@ -531,13 +531,12 @@ const Select = forwardRef<SelectRef, SelectProps>((
   const handleOnKeyDown = (e: KeyboardEvent<HTMLElement>): void => {
     if (isDisabled) return;
 
-    const { key, shiftKey, defaultPrevented } = e;
-    if (onKeyDown) {
-      onKeyDown(e, inputValue, focusedOption);
-      if (defaultPrevented) return;
+    if (isFunction(onKeyDown)) {
+      onKeyDown(e.key, inputValue, focusedOption);
+      if (e.defaultPrevented) return;
     }
 
-    switch (key) {
+    switch (e.key) {
       case 'ArrowDown': {
         menuOpen ? focusOptionOnArrowKey(OptionIndexEnum.DOWN) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
         break;
@@ -549,7 +548,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
       case 'ArrowLeft':
       case 'ArrowRight': {
         if (!isMulti || inputValue || renderMultiOptions) return;
-        focusValueOnArrowKey(key);
+        focusValueOnArrowKey(e.key);
         break;
       }
       case 'PageUp': {
@@ -589,7 +588,9 @@ const Select = forwardRef<SelectRef, SelectProps>((
         break;
       }
       case 'Tab': {
-        if (shiftKey || !menuOpen || !tabSelectsOption || !focusedOption.data) return;
+        if (e.shiftKey || !menuOpen || !tabSelectsOption || !focusedOption.data) {
+          return;
+        }
         selectOptionFromFocused();
         break;
       }

src/hooks/useLatestRef.ts

@@ -6,9 +6,9 @@ import { useRef, type MutableRefObject } from "react"
  * @param value the value to persist
  */
 const useLatestRef = <T>(value: T): MutableRefObject<T> => {
-  const ref = useRef<T>();
+  const ref = useRef<T>(value);
   ref.current = value;
-  return ref as MutableRefObject<T>;
+  return ref;
 };
 
 export default useLatestRef;

src/hooks/useMenuOptions.ts

@@ -58,8 +58,8 @@ const useMenuOptions = (
         : menuOption;
     };
 
-    return options.reduce((acc: MenuOption[], option: OptionData) => {
-      const menuOption = parseMenuOption(option);
+    return options.reduce((acc: MenuOption[], data: OptionData) => {
+      const menuOption = parseMenuOption(data);
       menuOption && acc.push(menuOption);
       return acc;
     }, []);

src/utils/menu.ts

@@ -38,13 +38,14 @@ function isDocumentElement(el: HTMLElement | typeof window): boolean {
  */
 function getScrollParent(el: HTMLElement): HTMLElement {
   let style = getComputedStyle(el);
-  const isParentAbs = style.position === 'absolute';
-  const overflowRegExp = /(auto|scroll)/;
 
   if (style.position === 'fixed') {
     return document.documentElement;
   }
 
+  const overflowRegExp = /(auto|scroll)/;
+  const isParentAbs = style.position === 'absolute';
+
   for (let parent: HTMLElement | null = el; (parent = parent?.parentElement);) {
     style = getComputedStyle(parent);
     if (
@@ -96,9 +97,7 @@ export const calculateMenuTop = (
   const controlHeight = controlEl?.getBoundingClientRect().height ?? 0;
   const menuHeightCalc = menuHeight > 0 ? menuHeight : (menuEl?.getBoundingClientRect().height ?? 0);
   const basePx = -Math.abs(menuHeightCalc + controlHeight);
-  const adjustPx = marginBottom + marginTop;
-
-  return `calc(${basePx}px + ${adjustPx}px)`;
+  return `calc(${basePx}px + ${marginBottom + marginTop}px)`;
 };
 
 export const menuFitsBelowControl = (el: HTMLElement | null): boolean => {