chore(schedule): refactor storybook

packages/schedule/README.md

@@ -14,21 +14,14 @@ npm install @zendeskgarden/container-schedule
 
 ## Usage
 
-For live examples check out our [storybook](https://zendeskgarden.github.io/react-containers?path=/story/schedule-container--useschedule).
-
-### As a Render Prop Component
-
-```jsx static
-import { ScheduleContainer } from '@zendeskgarden/container-schedule';
-
-<ScheduleContainer duration={1000} delayMS={0}>
-  {elapsed => <p>Percentage: {(elapsed * 100).toFixed(0)}%</p>}
-</ScheduleContainer>;
-```
+Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
+examples.
 
 ### As a hook
 
-```jsx static
+The `useSchedule` hook implements a schedule (timer) and communicates when it has elapsed.
+
+```jsx
 import { useSchedule } from '@zendeskgarden/container-schedule';
 
 const Animation = () => {
@@ -38,6 +31,16 @@ const Animation = () => {
 };
 ```
 
+### As a Render Prop Component
+
+```jsx
+import { ScheduleContainer } from '@zendeskgarden/container-schedule';
+
+<ScheduleContainer duration={1000} delayMS={0}>
+  {elapsed => <p>Percentage: {(elapsed * 100).toFixed(0)}%</p>}
+</ScheduleContainer>;
+```
+
 ## Info
 
 See [react-loaders][loaders link] component as a non-trivial use of this.

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

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

packages/schedule/demo/schedule.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { ScheduleContainer } from '@zendeskgarden/container-schedule';
+import { ScheduleStory } from './stories/ScheduleStory';
+
+<Meta title="Packages/Schedule" component={ScheduleContainer} />
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+<Canvas>
+  <Story
+    name="Schedule"
+    args={{ as: 'hook', delayMS: 750, duration: 1250, loop: true }}
+    argTypes={{
+      as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } }
+    }}
+  >
+    {args => <ScheduleStory {...args} />}
+  </Story>
+</Canvas>

packages/schedule/demo/stories/ScheduleStory.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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 from 'react';
+import { Story } from '@storybook/react';
+import {
+  IScheduleContainerProps,
+  IUseScheduleProps,
+  IUseScheduleReturnValue,
+  ScheduleContainer,
+  useSchedule
+} from '@zendeskgarden/container-schedule';
+
+interface IComponentProps extends IUseScheduleReturnValue {
+  duration?: IUseScheduleProps['duration'];
+  loop?: IUseScheduleProps['loop'];
+}
+
+const Component = ({ delayMS, delayComplete, elapsed, loop, duration = 1250 }: IComponentProps) => (
+  <div>
+    <label>
+      <span>
+        Schedule {delayMS / 1000}s delay followed by {duration / 1000}s{' '}
+        {loop ? 'looped' : 'elapsed'} progress
+      </span>
+      <progress className="block w-full" value={delayComplete ? elapsed : undefined} />
+    </label>
+  </div>
+);
+
+const Container = ({ loop, ...props }: IScheduleContainerProps) => (
+  <ScheduleContainer loop={loop} {...props}>
+    {containerProps => <Component {...containerProps} loop={loop} />}
+  </ScheduleContainer>
+);
+
+const Hook = (props: IUseScheduleProps) => {
+  const hookProps = useSchedule(props);
+
+  return <Component {...hookProps} {...props} />;
+};
+
+interface IArgs extends IScheduleContainerProps {
+  as: 'hook' | 'container';
+}
+
+export const ScheduleStory: Story<IArgs> = ({ as, ...props }) => {
+  const Schedule = () => {
+    switch (as) {
+      case 'container':
+        return <Container {...props} />;
+
+      case 'hook':
+      default:
+        return <Hook {...props} />;
+    }
+  };
+
+  return <Schedule />;
+};