chore(pagination): refactor storybook

packages/pagination/README.md

@@ -14,14 +14,15 @@ npm install @zendeskgarden/container-pagination
 
 ## Usage
 
-For live examples check out our [storybook](https://zendeskgarden.github.io/react-containers).
+Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
+examples.
 
 ### usePagination
 
 The `usePagination` hook is wrapper on top of the `useSelection` hook with
 specific prop getters for pagination.
 
-```jsx static
+```jsx
 import { createRef, useRef } from 'react';
 import { usePagination } from '@zendeskgarden/container-pagination';
 
@@ -97,7 +98,7 @@ const Pagination = () => {
 
 ### PaginationContainer
 
-```jsx static
+```jsx
 import { createRef, useRef } from 'react';
 import { PaginationContainer } from '@zendeskgarden/container-pagination';
 

packages/pagination/demo/#readme.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta, Description } from '@storybook/addon-docs';
+import README from '../README.md';
+
+<Meta title="Packages/Pagination/README" />
+
+<Description>{README}</Description>

packages/pagination/demo/pagination.stories.mdx

@@ -0,0 +1,44 @@
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { useArgs } from '@storybook/client-api';
+import { PaginationContainer } from '@zendeskgarden/container-pagination';
+import { PaginationStory } from './stories/PaginationStory';
+
+<Meta title="Packages/Pagination" component={PaginationContainer} />
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+<Canvas>
+  <Story
+    name="Pagination"
+    args={{ as: 'hook', pages: 7, selectedItem: '0' }}
+    argTypes={{
+      as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } },
+      pages: { control: { type: 'range', min: 1, max: 10 }, table: { category: 'Story' } }
+    }}
+  >
+    {args => {
+      const updateArgs = useArgs()[1];
+      const handleSelect = selectedItem => {
+        if (selectedItem === 'next') {
+          const currentPage = parseInt(args['selectedItem']);
+          if (currentPage < args.pages - 1) {
+            updateArgs({ selectedItem: (currentPage + 1).toString() });
+          }
+        } else if (selectedItem === 'prev') {
+          const currentPage = parseInt(args['selectedItem']);
+          if (currentPage > 0) {
+            updateArgs({ selectedItem: (currentPage - 1).toString() });
+          }
+        } else {
+          updateArgs({ selectedItem });
+        }
+      };
+      const handleFocus = focusedItem => updateArgs({ focusedItem });
+      return <PaginationStory {...args} onSelect={handleSelect} onFocus={handleFocus} />;
+    }}
+  </Story>
+</Canvas>

packages/pagination/demo/stories/PaginationStory.tsx

@@ -0,0 +1,110 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { createRef, RefObject, useRef } from 'react';
+import { Story } from '@storybook/react';
+import {
+  IPaginationContainerProps,
+  IUsePaginationReturnValue,
+  PaginationContainer,
+  usePagination
+} from '@zendeskgarden/container-pagination';
+import classNames from 'classnames';
+
+interface IComponentProps extends IUsePaginationReturnValue<any> {
+  pages: Record<string, RefObject<any>>;
+}
+
+const Component = ({
+  pages,
+  getContainerProps,
+  getPreviousPageProps,
+  getPageProps,
+  getNextPageProps,
+  selectedItem
+}: IComponentProps) => {
+  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] })}
+          {...getPreviousPageProps({ item: 'prev', focusRef: previousRef })}
+        >
+          &lt;
+        </li>
+        {keys.map((key, index) => {
+          const current = key === selectedItem;
+
+          return (
+            <li
+              key={key}
+              className={classNames(className, { 'bg-blue-300': current })}
+              {...getPageProps({
+                item: key,
+                focusRef: pages[key],
+                page: index + 1,
+                current
+              })}
+            >
+              {index + 1}
+            </li>
+          );
+        })}
+        <li
+          className={classNames(className, {
+            'text-grey-400': selectedItem === keys[keys.length - 1]
+          })}
+          {...getNextPageProps({ item: 'next', focusRef: nextRef })}
+        >
+          &gt;
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+interface IProps extends IPaginationContainerProps<any> {
+  pages: Record<string, RefObject<any>>;
+}
+
+const Container = ({ pages, ...props }: IProps) => (
+  <PaginationContainer {...props}>
+    {containerProps => <Component pages={pages} {...containerProps} />}
+  </PaginationContainer>
+);
+
+const Hook = ({ pages, ...props }: IProps) => {
+  const hookProps = usePagination(props);
+
+  return <Component pages={pages} {...hookProps} />;
+};
+
+interface IArgs extends IPaginationContainerProps<any> {
+  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() }),
+    {}
+  );
+
+  switch (as) {
+    case 'container':
+      return <Container pages={_pages} {...props} />;
+
+    case 'hook':
+    default:
+      return <Hook pages={_pages} {...props} />;
+  }
+};

packages/pagination/src/index.ts

@@ -6,13 +6,14 @@
  */
 
 /* Hooks */
-export {
-  usePagination,
+export { usePagination } from './usePagination';
+export type {
   IUsePaginationProps,
   IUsePaginationReturnValue,
   IGetContainerProps,
   IGetPageProps
 } from './usePagination';
 
 /* Render-props */
-export { PaginationContainer, IPaginationContainerProps } from './PaginationContainer';
+export { PaginationContainer } from './PaginationContainer';
+export type { IPaginationContainerProps } from './PaginationContainer';