chore(scrollregion): refactor storybook

packages/scrollregion/README.md

@@ -14,19 +14,36 @@ npm install @zendeskgarden/container-scrollregion
 
 ## Usage
 
-For live examples check out [storybook](https://zendeskgarden.github.io/react-containers?path=/story/scrollregion-container--usescrollregion).
+Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
+examples.
 
-A scroll region is an area of the web page that contains scrollable content. The scroll region hook
-allows keyboard users to focus and scroll a scroll region.
+### As a hook
+
+A scroll region is an area of the web page that contains scrollable content. The
+scroll region hook allows keyboard users to focus and scroll the region. A
+scroll region with a dynamic layout should use the `dependency` option. The hook
+re-calculates the tab-index when the `dependency` value changes. If there are
+multiple dependency values, a memoized object can be used as the `dependency`
+value.
+
+```jsx
+import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
+
+const ScrollRegion = () => {
+  const containerRef = useRef();
+  const containerTabIndex = useScrollRegion({ containerRef });
 
-A scroll region with a dynamic layout should use the `dependency` option. The hook re-calculates the
-tab-index when the `dependency` value changes. If there are multiple dependency values, a memoized
-object can be used as the `dependency` value. There is a Storybook demo that shows an example of
-this scenario.
+  return (
+    <div ref={containerRef} tabIndex={containerTabIndex}>
+      <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea.</p>
+    </div>
+  );
+};
+```
 
 ### As a Render Prop Component
 
-```jsx static
+```jsx
 import { ScrollRegionContainer } from '@zendeskgarden/container-scrollregion';
 
 const ScrollRegion = () => {
@@ -43,20 +60,3 @@ const ScrollRegion = () => {
   )
 }
 ```
-
-### As a hook
-
-```jsx static
-import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
-
-const ScrollRegion = () => {
-  const containerRef = useRef();
-  const containerTabIndex = useScrollRegion({ containerRef });
-
-  return (
-    <div ref={containerRef} tabIndex={containerTabIndex}>
-      <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea.</p>
-    </div>
-  );
-};
-```

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

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

packages/scrollregion/demo/scrollregion.stories.mdx

@@ -0,0 +1,31 @@
+import { useRef } from 'react';
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { ScrollRegionContainer } from '@zendeskgarden/container-scrollregion';
+import { ScrollRegionStory } from './stories/ScrollRegionStory';
+import { DEPENDENCY } from './stories/data';
+
+<Meta title="Packages/ScrollRegion" component={ScrollRegionContainer} />
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+<Canvas>
+  <Story
+    name="ScrollRegion"
+    args={{ as: 'hook', height: 100, width: 200, dependency: DEPENDENCY }}
+    argTypes={{
+      containerRef: { control: false },
+      as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } },
+      height: { table: { category: 'Story' } },
+      width: { table: { category: 'Story' } }
+    }}
+  >
+    {args => {
+      const containerRef = useRef();
+      return <ScrollRegionStory {...args} containerRef={containerRef} />;
+    }}
+  </Story>
+</Canvas>

packages/scrollregion/demo/stories/ScrollRegionStory.tsx

@@ -0,0 +1,87 @@
+/**
+ * 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, { forwardRef, HTMLAttributes } from 'react';
+import { Story } from '@storybook/react';
+import {
+  IScrollRegionContainerProps,
+  IUseScrollRegionProps,
+  ScrollRegionContainer,
+  useScrollRegion
+} from '@zendeskgarden/container-scrollregion';
+import classNames from 'classnames';
+
+interface IComponentProps extends HTMLAttributes<HTMLDivElement> {
+  height: number;
+  width: number;
+}
+
+const Component = forwardRef<HTMLDivElement, IComponentProps>(
+  ({ children, height, width, ...props }, ref) => (
+    <div
+      className={classNames(
+        'border',
+        'border-solid',
+        'overflow-scroll',
+        props.tabIndex === 0 ? 'border-blue-600' : 'border-grey-300'
+      )}
+      style={{ height, width }}
+      ref={ref}
+      {...props}
+    >
+      <p className="p-2">{children}</p>
+    </div>
+  )
+);
+
+Component.displayName = 'Component';
+
+interface IProps extends IUseScrollRegionProps<HTMLDivElement> {
+  height: number;
+  width: number;
+}
+
+const Container = ({ containerRef, height, width, ...props }: IProps) => (
+  <ScrollRegionContainer containerRef={containerRef} {...props}>
+    {containerTabIndex => (
+      <Component height={height} width={width} tabIndex={containerTabIndex} ref={containerRef}>
+        {props.dependency}
+      </Component>
+    )}
+  </ScrollRegionContainer>
+);
+
+const Hook = ({ containerRef, height, width, ...props }: IProps) => {
+  const containerTabIndex = useScrollRegion({ containerRef, ...props });
+
+  return (
+    <Component height={height} width={width} tabIndex={containerTabIndex} ref={containerRef}>
+      {props.dependency}
+    </Component>
+  );
+};
+
+interface IArgs extends IScrollRegionContainerProps<HTMLDivElement> {
+  as: 'hook' | 'container';
+  height: number;
+  width: number;
+}
+
+export const ScrollRegionStory: Story<IArgs> = ({ as, ...props }) => {
+  const ScrollRegion = () => {
+    switch (as) {
+      case 'container':
+        return <Container {...props} />;
+
+      case 'hook':
+      default:
+        return <Hook {...props} />;
+    }
+  };
+
+  return <ScrollRegion />;
+};

packages/scrollregion/demo/stories/data.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+
+export const DEPENDENCY =
+  'Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.  Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.';

packages/scrollregion/src/ScrollRegionContainer.tsx

@@ -7,9 +7,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useScrollRegion, IUseScrollRegion } from './useScrollRegion';
+import { useScrollRegion, IUseScrollRegionProps } from './useScrollRegion';
 
-export interface IScrollRegionContainerProps extends IUseScrollRegion {
+export interface IScrollRegionContainerProps<RefType = HTMLElement>
+  extends IUseScrollRegionProps<RefType> {
   /** A render prop function which receives the tab index */
   render?: (tabIndex: number | undefined) => React.ReactNode;
   /** A children render prop function which receives the tab index */

packages/scrollregion/src/index.ts

@@ -6,4 +6,7 @@
  */
 
 export { useScrollRegion } from './useScrollRegion';
+export type { IUseScrollRegionProps } from './useScrollRegion';
+
 export { ScrollRegionContainer } from './ScrollRegionContainer';
+export type { IScrollRegionContainerProps } from './ScrollRegionContainer';