chore: storybook demo cleanup (#444)

zendeskgarden · Mar 31, 2022 · b5c5971 · b5c5971
1 parent b2c8d23
commit b5c5971
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 78 deletions.
diff --git a/packages/accordion/demo/stories/AccordionStory.tsx b/packages/accordion/demo/stories/AccordionStory.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { Story } from '@storybook/react';
 import {
   AccordionContainer,
+  IAccordionContainerProps,
   IUseAccordionProps,
   IUseAccordionReturnValue,
   useAccordion
@@ -80,7 +81,7 @@ const Hook = ({ sections, ...props }: IProps) => {
   return <Component sections={sections} {...hookProps} />;
 };
 
-interface IArgs extends IUseAccordionProps {
+interface IArgs extends IAccordionContainerProps {
   as: 'hook' | 'container';
   sections: number;
 }

diff --git a/packages/buttongroup/demo/stories/ButtonGroupStory.tsx b/packages/buttongroup/demo/stories/ButtonGroupStory.tsx
@@ -16,58 +16,55 @@ import {
   UseButtonGroupReturnValue
 } from '@zendeskgarden/container-buttongroup';
 
-interface IComponentProps extends UseButtonGroupReturnValue<any> {
-  buttons: Record<string, RefObject<any>>;
+interface IComponentProps extends UseButtonGroupReturnValue<string> {
+  buttons: RefObject<HTMLButtonElement>[];
 }
 
 const Component = ({ getGroupProps, getButtonProps, selectedItem, buttons }: IComponentProps) => (
   <div {...getGroupProps()}>
-    {Object.keys(buttons).map((key, index) => (
+    {buttons.map((button, index) => (
       <button
-        key={key}
+        key={index}
         className={classNames('border', 'px-2', 'py-1', 'rounded-none', {
-          'bg-blue-300': key === selectedItem
+          'bg-blue-300': index.toString() === selectedItem
         })}
         type="button"
-        {...getButtonProps({ item: key, focusRef: buttons[key] })}
+        {...getButtonProps({ item: index.toString(), focusRef: button })}
       >{`Button ${index + 1}`}</button>
     ))}
   </div>
 );
 
-interface IProps extends IUseButtonGroupProps<any> {
-  buttons: Record<string, RefObject<any>>;
+interface IProps extends IUseButtonGroupProps<string> {
+  buttonRefs: RefObject<HTMLButtonElement>[];
 }
 
-const Container = ({ buttons, ...props }: IProps) => (
+const Container = ({ buttonRefs, ...props }: IProps) => (
   <ButtonGroupContainer {...props}>
-    {containerProps => <Component buttons={buttons} {...containerProps} />}
+    {containerProps => <Component buttons={buttonRefs} {...containerProps} />}
   </ButtonGroupContainer>
 );
 
-const Hook = ({ buttons, ...props }: IProps) => {
+const Hook = ({ buttonRefs, ...props }: IProps) => {
   const hookProps = useButtonGroup(props);
 
-  return <Component buttons={buttons} {...hookProps} />;
+  return <Component buttons={buttonRefs} {...hookProps} />;
 };
 
-interface IArgs extends IButtonGroupContainerProps<any> {
+interface IArgs extends IButtonGroupContainerProps<string> {
   as: 'hook' | 'container';
   buttons: number;
 }
 
 export const ButtonGroupStory: Story<IArgs> = ({ as, buttons, ...props }: IArgs) => {
-  const _buttons = Array.from({ length: buttons }, (_, index) => index).reduce(
-    (previous, current) => ({ ...previous, [current]: createRef() }),
-    {}
-  );
+  const buttonRefs = Array.from({ length: buttons }, () => createRef<HTMLButtonElement>());
 
   switch (as) {
     case 'container':
-      return <Container buttons={_buttons} {...props} />;
+      return <Container buttonRefs={buttonRefs} {...props} />;
 
     case 'hook':
     default:
-      return <Hook buttons={_buttons} {...props} />;
+      return <Hook buttonRefs={buttonRefs} {...props} />;
   }
 };
diff --git a/packages/focusvisible/demo/stories/FocusVisibleStory.tsx b/packages/focusvisible/demo/stories/FocusVisibleStory.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { forwardRef, RefObject } from 'react';
+import React, { forwardRef } from 'react';
 import { Story } from '@storybook/react';
 import { createGlobalStyle } from 'styled-components';
 import { PALETTE } from '@zendeskgarden/react-theming';
@@ -36,7 +36,7 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-const Component = forwardRef<HTMLDivElement, any>((_, ref) => (
+const Component = forwardRef<HTMLDivElement, unknown>((_, ref) => (
   <>
     <GlobalStyle />
     <div ref={ref}>
@@ -67,21 +67,18 @@ const Component = forwardRef<HTMLDivElement, any>((_, ref) => (
 
 Component.displayName = 'Component';
 
-const Container = () => (
-  <FocusVisibleContainer>{({ ref }) => <Component ref={ref} />}</FocusVisibleContainer>
+const Container = (props: IFocusVisibleContainerProps) => (
+  <FocusVisibleContainer {...props}>{({ ref }) => <Component ref={ref} />}</FocusVisibleContainer>
 );
 
-const Hook = ({ scope, ...props }: IUseFocusVisibleProps) => {
+const Hook = ({ scope, ...props }: IUseFocusVisibleProps<HTMLDivElement>) => {
   useFocusVisible({ scope, ...props });
 
-  const ref = scope as RefObject<HTMLDivElement>;
-
-  return <Component {...props} ref={ref} />;
+  return <Component ref={scope} />;
 };
 
-interface IArgs extends IFocusVisibleContainerProps {
+interface IArgs extends IUseFocusVisibleProps<HTMLDivElement> {
   as: 'hook' | 'container';
-  scope: RefObject<HTMLElement>;
 }
 
 export const FocusVisibleStory: Story<IArgs> = ({ as, ...props }) => {

diff --git a/packages/focusvisible/src/useFocusVisible.ts b/packages/focusvisible/src/useFocusVisible.ts
@@ -28,9 +28,9 @@ const INPUT_TYPES_WHITE_LIST: Record<string, boolean> = {
   'datetime-local': true
 };
 
-export interface IUseFocusVisibleProps {
+export interface IUseFocusVisibleProps<RefType = HTMLElement> {
   /** A ref pointing to the scope which contains focus visible elements */
-  scope: React.RefObject<HTMLElement | null>;
+  scope: React.RefObject<RefType>;
   /** A relative document */
   relativeDocument?: any;
   /** A class name applied to the element with `:focus-visible` behavior */

diff --git a/packages/modal/demo/stories/ModalStory.tsx b/packages/modal/demo/stories/ModalStory.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { forwardRef, HTMLAttributes, RefObject } from 'react';
+import React, { forwardRef, HTMLAttributes } from 'react';
 import { Story } from '@storybook/react';
 import {
   IModalContainerProps,
@@ -17,7 +17,7 @@ import {
 
 interface IComponentProps extends IUseModalReturnValue {
   isOpen: boolean;
-  onOpen: HTMLAttributes<HTMLElement>['onClick'];
+  onOpen: HTMLAttributes<HTMLButtonElement>['onClick'];
 }
 
 const Component = forwardRef<HTMLDivElement, IComponentProps>(
@@ -79,41 +79,29 @@ const Component = forwardRef<HTMLDivElement, IComponentProps>(
 
 Component.displayName = 'Component';
 
-interface IProps extends IUseModalProps {
+interface IProps extends IUseModalProps<HTMLDivElement> {
   isOpen: boolean;
-  onOpen: HTMLAttributes<HTMLElement>['onClick'];
+  onOpen: HTMLAttributes<HTMLButtonElement>['onClick'];
 }
 
 const Container = ({ isOpen, onOpen, modalRef, ...props }: IProps) => (
   <ModalContainer modalRef={modalRef} {...props}>
     {containerProps => (
-      <Component
-        isOpen={isOpen}
-        onOpen={onOpen}
-        {...containerProps}
-        ref={modalRef as RefObject<HTMLDivElement>}
-      />
+      <Component isOpen={isOpen} onOpen={onOpen} {...containerProps} ref={modalRef} />
     )}
   </ModalContainer>
 );
 
 const Hook = ({ isOpen, onOpen, modalRef, ...props }: IProps) => {
   const hookProps = useModal({ modalRef, ...props });
 
-  return (
-    <Component
-      isOpen={isOpen}
-      onOpen={onOpen}
-      {...hookProps}
-      ref={modalRef as RefObject<HTMLDivElement>}
-    />
-  );
+  return <Component isOpen={isOpen} onOpen={onOpen} {...hookProps} ref={modalRef} />;
 };
 
-interface IArgs extends IModalContainerProps {
+interface IArgs extends IModalContainerProps<HTMLDivElement> {
   as: 'hook' | 'container';
   isOpen: boolean;
-  onOpen: HTMLAttributes<HTMLElement>['onClick'];
+  onOpen: HTMLAttributes<HTMLButtonElement>['onClick'];
 }
 
 export const ModalStory: Story<IArgs> = ({ as, ...props }) => {

diff --git a/packages/modal/src/ModalContainer.tsx b/packages/modal/src/ModalContainer.tsx
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 
 import { useModal, IUseModalProps, IUseModalReturnValue } from './useModal';
 
-export interface IModalContainerProps extends IUseModalProps {
+export interface IModalContainerProps<RefType = HTMLElement> extends IUseModalProps<RefType> {
   /** A render prop function */
   render?: (options: IUseModalReturnValue) => React.ReactNode;
   /** A children render prop function */

diff --git a/packages/modal/src/useModal.ts b/packages/modal/src/useModal.ts
@@ -10,11 +10,11 @@ import { useUIDSeed } from 'react-uid';
 import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
 import { useFocusJail } from '@zendeskgarden/container-focusjail';
 
-export interface IUseModalProps {
+export interface IUseModalProps<RefType = HTMLElement> {
   /** A callback when a close action has been completed */
   onClose?: (event: KeyboardEvent | MouseEvent) => void;
   /** A ref pointing to a DOM element which contains the modal content */
-  modalRef: React.RefObject<HTMLElement>;
+  modalRef: React.RefObject<RefType>;
   /** An ID that is applied to modal elements */
   id?: string;
   /** Determines if the modal's focus jail container should focus on mount */

diff --git a/packages/pagination/demo/stories/PaginationStory.tsx b/packages/pagination/demo/stories/PaginationStory.tsx
@@ -9,14 +9,15 @@ import React, { createRef, RefObject, useRef } from 'react';
 import { Story } from '@storybook/react';
 import {
   IPaginationContainerProps,
+  IUsePaginationProps,
   IUsePaginationReturnValue,
   PaginationContainer,
   usePagination
 } from '@zendeskgarden/container-pagination';
 import classNames from 'classnames';
 
-interface IComponentProps extends IUsePaginationReturnValue<any> {
-  pages: Record<string, RefObject<any>>;
+interface IComponentProps extends IUsePaginationReturnValue<string> {
+  pages: RefObject<HTMLLIElement>[];
 }
 
 const Component = ({
@@ -30,27 +31,26 @@ const Component = ({
   const previousRef = useRef();
   const nextRef = useRef();
   const className = 'border border-solid cursor-pointer px-3 py-1 select-none';
-  const keys = Object.keys(pages);
 
   return (
     <nav aria-label="pagination">
       <ul className="flex" {...getContainerProps()}>
         <li
-          className={classNames(className, { 'text-grey-400': selectedItem === keys[0] })}
+          className={classNames(className, { 'text-grey-400': selectedItem === '0' })}
           {...getPreviousPageProps({ item: 'prev', focusRef: previousRef })}
         >
           &lt;
         </li>
-        {keys.map((key, index) => {
-          const current = key === selectedItem;
+        {pages.map((page, index) => {
+          const current = index.toString() === selectedItem;
 
           return (
             <li
-              key={key}
+              key={index}
               className={classNames(className, { 'bg-blue-300': current })}
               {...getPageProps({
-                item: key,
-                focusRef: pages[key],
+                item: index.toString(),
+                focusRef: page,
                 page: index + 1,
                 current
               })}
@@ -61,7 +61,7 @@ const Component = ({
         })}
         <li
           className={classNames(className, {
-            'text-grey-400': selectedItem === keys[keys.length - 1]
+            'text-grey-400': selectedItem === (pages.length - 1).toString()
           })}
           {...getNextPageProps({ item: 'next', focusRef: nextRef })}
         >
@@ -72,39 +72,36 @@ const Component = ({
   );
 };
 
-interface IProps extends IPaginationContainerProps<any> {
-  pages: Record<string, RefObject<any>>;
+interface IProps extends IUsePaginationProps<string> {
+  pageRefs: RefObject<HTMLLIElement>[];
 }
 
-const Container = ({ pages, ...props }: IProps) => (
+const Container = ({ pageRefs, ...props }: IProps) => (
   <PaginationContainer {...props}>
-    {containerProps => <Component pages={pages} {...containerProps} />}
+    {containerProps => <Component pages={pageRefs} {...containerProps} />}
   </PaginationContainer>
 );
 
-const Hook = ({ pages, ...props }: IProps) => {
+const Hook = ({ pageRefs, ...props }: IProps) => {
   const hookProps = usePagination(props);
 
-  return <Component pages={pages} {...hookProps} />;
+  return <Component pages={pageRefs} {...hookProps} />;
 };
 
-interface IArgs extends IPaginationContainerProps<any> {
+interface IArgs extends IPaginationContainerProps<string> {
   as: 'hook' | 'container';
   pages: number;
 }
 
 export const PaginationStory: Story<IArgs> = ({ as, pages, ...props }) => {
-  const _pages = Array.from({ length: pages }, (_, index) => index).reduce(
-    (previous, current) => ({ ...previous, [current]: createRef() }),
-    {}
-  );
+  const pageRefs = Array.from({ length: pages }, () => createRef<HTMLLIElement>());
 
   switch (as) {
     case 'container':
-      return <Container pages={_pages} {...props} />;
+      return <Container pageRefs={pageRefs} {...props} />;
 
     case 'hook':
     default:
-      return <Hook pages={_pages} {...props} />;
+      return <Hook pageRefs={pageRefs} {...props} />;
   }
 };