improve storybook

.storybook/main.js

@@ -0,0 +1,29 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.(ts|tsx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    '@storybook/addon-storysource',
+  ],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+        {
+          loader: require.resolve('react-docgen-typescript-loader'),
+        },
+      ],
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    return config;
+  },
+};

example/index.tsx

@@ -8,11 +8,14 @@ const collapseStyles = { background: 'blue', color: 'white' };
 export const Uncontrolled = () => {
   const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
     defaultOpen: true,
+    isOpen: false,
   });
 
   return (
     <div>
-      <button {...getToggleProps()}>{isOpen ? 'Close' : 'Open'}</button>
+      <button {...getToggleProps({ style: { marginRight: 4 } })}>
+        {isOpen ? 'Close' : 'Open'}
+      </button>
       <div
         {...getCollapseProps({
           style: collapseStyles,

package.json

@@ -36,8 +36,12 @@
   "module": "dist/collapse-tsdx.esm.js",
   "devDependencies": {
     "@babel/core": "^7.8.4",
+    "@storybook/addon-a11y": "^5.3.17",
     "@storybook/addon-actions": "^5.3.12",
+    "@storybook/addon-docs": "^5.3.17",
+    "@storybook/addon-info": "^5.3.17",
     "@storybook/addon-links": "^5.3.12",
+    "@storybook/addon-storysource": "^5.3.17",
     "@storybook/addons": "^5.3.12",
     "@storybook/react": "^5.3.12",
     "@testing-library/jest-dom": "^5.1.1",
@@ -54,6 +58,7 @@
     "jest": "^25.1.0",
     "np": "https://github.com/pixelastic/np/tarball/c3ab2e3b053c7da0ce40a572ca1616273ac080f8",
     "react": "^16.12.0",
+    "react-docgen-typescript-loader": "^3.7.1",
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "rogin-scripts": "^0.0.6-development",

stories/components.tsx

@@ -2,31 +2,34 @@ import React from 'react';
 import styled from 'styled-components';
 
 export const Toggle = styled.button`
-  background: #1484e8;
-  box-shadow: -1px 3px 4px #88aed0;
-  border-radius: 8px;
+  background: white;
+  display: inline-block;
+  // box-shadow: -1px 3px 4px #88aed0;
+  box-shadow: 5px 5px 0 black;
+  border: 1px solid black;
+  color: black;
   cursor: pointer;
-  padding: 8px 24px;
+  padding: 12px 24px;
   font-family: Helvetica;
-  color: white;
-  border: 0;
   font-size: 16px;
-  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: all;
+  min-width: 150px;
 
   &:hover,
   &:focus {
-    background: #178ffb;
+    background: rgba(225, 225, 225, 0.8);
   }
   &:active {
-    background: #3782c6;
+    background: black;
+    color: white;
     box-shadow: none;
   }
 `;
 
 export const Content = styled.div`
-  background: #eef0f7;
-  border-radius: 8px;
-  border: 2px solid lightgray;
+  border: 2px solid black;
   color: #212121;
   font-family: Helvetica;
   padding: 12px;
@@ -38,8 +41,13 @@ const CollapseContainer = styled.div`
   margin-top: 8px;
 `;
 
+type CollapseProps = {
+  children: React.ReactNode;
+  style?: {};
+};
+
 export const Collapse = React.forwardRef(
-  (props, ref: React.Ref<HTMLDivElement>) => (
+  (props: CollapseProps, ref?: React.Ref<HTMLDivElement>) => (
     <CollapseContainer {...props} ref={ref}>
       <Content>{props.children}</Content>
     </CollapseContainer>

stories/div.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import useCollapse from '../src';
+import { Toggle, Collapse } from './components';
+
+export const Div = () => {
+  const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
+    defaultOpen: true,
+  });
+
+  return (
+    <div>
+      <Toggle as="div" {...getToggleProps()}>
+        {isOpen ? 'Close' : 'Open'}
+      </Toggle>
+      <Collapse {...getCollapseProps()}>
+        In the morning I walked down the Boulevard to the rue Soufflot for
+        coffee and brioche. It was a fine morning. The horse-chestnut trees in
+        the Luxembourg gardens were in bloom. There was the pleasant
+        early-morning feeling of a hot day. I read the papers with the coffee
+        and then smoked a cigarette. The flower-women were coming up from the
+        market and arranging their daily stock. Students went by going up to the
+        law school, or down to the Sorbonne. The Boulevard was busy with trams
+        and people going to work.
+      </Collapse>
+    </div>
+  );
+};

stories/index.stories.tsx

@@ -1,9 +1,13 @@
+import { withA11y } from '@storybook/addon-a11y';
+
 export default {
   title: 'React-Collapsed',
+  decorators: [withA11y],
 };
 
 export { Uncontrolled } from './uncontrolled';
 export { Controlled } from './controlled';
 export { Nested } from './nested';
 export { CustomTransition } from './custom-transition-styles';
 export { Unmount } from './unmount';
+export { Div } from './div';

stories/nested.tsx

@@ -20,7 +20,7 @@ export function Nested() {
     <React.Fragment>
       <Toggle {...outerToggleProps()}>{outerOpen ? 'Close' : 'Expand'}</Toggle>
       <section {...outerCollapseProps()}>
-        <Collapse>
+        <Collapse style={{ display: 'inline-block' }}>
           <p style={{ margin: 0 }}>
             Friends, Romans, countrymen, lend me your ears;
             <br />