chore(accordion): refactor storybook (#420)

Author: jzempel

packages/.template/README.md

@@ -18,7 +18,7 @@ Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
 
 ### use{{capitalize component}}
 
-```jsx static
+```jsx
 import { use{{capitalize component}} } from '@zendeskgarden/container-{{lowercase component}}';
 
 const {{capitalize component}} = () => {
@@ -30,7 +30,7 @@ const {{capitalize component}} = () => {
 
 ### {{capitalize component}}Container
 
-```jsx static
+```jsx
 import { {{capitalize component}}Container } from '@zendeskgarden/container-{{lowercase component}}';
 
 <{{capitalize component}}Container>{({ get{{capitalize component}}Props }) => <div {...get{{capitalize component}}Props()} />}</{{capitalize component}}Container>;

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

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

packages/.template/demo/stories/{{capitalize component}}Story.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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, { HTMLAttributes, HTMLProps } from 'react';
+import { Story } from '@storybook/react';
+import {
+  I{{capitalize component}}ContainerProps,
+  IUse{{capitalize component}}Props,
+  IUse{{capitalize component}}ReturnValue,
+  {{capitalize component}}Container,
+  use{{capitalize component}}
+} from '@zendeskgarden/container-{{lowercase component}}';
+
+const Container = ({ label, text }: I{{capitalize component}}ContainerProps & { text: string }) => (
+  <{{capitalize component}}Container>
+    {({ get{{capitalize component}}Props }: IUse{{capitalize component}}ReturnValue) => <div {...get{{capitalize component}}Props({ label })}>{text}</div>}
+  </{{capitalize component}}Container>
+);
+
+const Hook = ({ label, ...props }: IUse{{capitalize component}}Props & HTMLProps<HTMLAttributes<HTMLDivElement>>) => {
+  const { get{{capitalize component}}Props } = use{{capitalize component}}({ label });
+
+  return <div {...get{{capitalize component}}Props()} {...props} />;
+};
+
+interface IArgs extends I{{capitalize component}}ContainerProps {
+  as: 'hook' | 'container';
+  text: string;
+}
+
+export const {{capitalize component}}Story: Story<IArgs> = ({ as, text, ...props }) => {
+  switch (as) {
+    case 'container':
+      return <Container text={text} {...props} />;
+
+    case 'hook':
+    default:
+      return <Hook {...props}>{text}</Hook>;
+  }
+};

packages/.template/demo/{{lowercase component}}.stories.mdx

@@ -0,0 +1,24 @@
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { {{capitalize component}}Container } from '@zendeskgarden/container-{{lowercase component}}';
+import { {{capitalize component}}Story } from './stories/{{capitalize component}}Story';
+
+<Meta title="Packages/{{capitalize component}}" component={ {{capitalize component}}Container } />
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+export const args = { as: 'hook', text: 'Hello world', label: 'test' };
+
+export const argTypes = {
+  as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } },
+  text: { table: { category: 'Story' } }
+};
+
+<Canvas>
+  <Story name="{{capitalize component}}" args={args} argTypes={argTypes}>
+    {args => <{{capitalize component}}Story {...args} />}
+  </Story>
+</Canvas>

packages/.template/src/index.ts

@@ -6,7 +6,9 @@
  */
 
 /* Hooks */
-export { use{{capitalize component}}, IUse{{capitalize component}}Props, IUse{{capitalize component}}ReturnValue } from './use{{capitalize component}}';
+export { use{{capitalize component}} } from './use{{capitalize component}}';
+export type { IUse{{capitalize component}}Props, IUse{{capitalize component}}ReturnValue } from './use{{capitalize component}}';
 
 /* Render-props */
-export { {{capitalize component}}Container, I{{capitalize component}}ContainerProps } from './{{capitalize component}}Container';
+export { {{capitalize component}}Container } from './{{capitalize component}}Container';
+export type { I{{capitalize component}}ContainerProps } from './{{capitalize component}}Container';

packages/.template/tsconfig.build.json

@@ -7,7 +7,6 @@
     "sourceMap": false,
     "noEmit": false,
     "paths": {}
-
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]

packages/.template/{{lowercase component}}.stories.tsx

@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 7276,
-    "minified": 3738,
-    "gzipped": 1460
+    "bundled": 7388,
+    "minified": 3836,
+    "gzipped": 1471
   },
   "index.esm.js": {
-    "bundled": 6666,
-    "minified": 3227,
-    "gzipped": 1345,
+    "bundled": 6738,
+    "minified": 3291,
+    "gzipped": 1356,
     "treeshaked": {
       "rollup": {
-        "code": 146,
+        "code": 161,
         "import_statements": 101
       },
       "webpack": {
-        "code": 3932
+        "code": 3984
       }
     }
   }

packages/accordion/.size-snapshot.json

@@ -14,15 +14,17 @@ npm install @zendeskgarden/container-accordion
 
 ## Usage
 
-For live examples check out our
-[storybook](https://zendeskgarden.github.io/react-containers/?path=/story/accordion-container--useaccordion).
+This container implements the
+[accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) design
+pattern and can be used to build an accordion component. Check out
+[storybook](https://zendeskgarden.github.io/react-containers) for live examples.
 
 ### useAccordion
 
 The `useAccordion` hook manages toggle state and required accessibility
 attributes for a group of sections.
 
-```jsx static
+```jsx
 import { useAccordion } from '@zendeskgarden/container-accordion';
 
 const Accordion = ({ expandable = true, collapsible = true } = {}) => {
@@ -77,7 +79,7 @@ return <Accordion expandable={true} collapsible={true} />;
 
 `AccordionContainer` is a render-prop wrapper for the `useAccordion` hook.
 
-```jsx static
+```jsx
 import { AccordionContainer } from '@zendeskgarden/container-accordion';
 
 const Accordion = ({ expandable = true, collapsible = true } = {}) => (