Add a description addon to storybook (#2518)

Author: snowystinger

.storybook/custom-addons/descriptions/register.js

@@ -0,0 +1,28 @@
+
+import { addons, types } from '@storybook/addons';
+import { AddonPanel } from '@storybook/components';
+import React from 'react';
+import { useParameter } from '@storybook/api';
+
+const ADDON_ID = 'descriptionAddon';
+const PANEL_ID = `${ADDON_ID}/panel`;
+
+const PARAM_KEY = 'description';
+
+const MyPanel = () => {
+  const value = useParameter(PARAM_KEY, null);
+  const item = value ? value.data : 'No description for this story.';
+  return <div style={{margin: '15px'}}>{item}</div>;
+};
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Description',
+    render: ({ active, key }) => (
+      <AddonPanel active={active} key={key}>
+        <MyPanel />
+      </AddonPanel>
+    ),
+  });
+});

.storybook/main.js

@@ -10,6 +10,7 @@ module.exports = {
     '@storybook/addon-knobs',
     'storybook-dark-mode',
     './custom-addons/provider/register',
+    './custom-addons/descriptions/register',
     './theme.register'
   ],
   typescript: {

package.json

@@ -78,10 +78,13 @@
     "@parcel/transformer-svg-react": "nightly",
     "@spectrum-css/component-builder": "^1.0.0",
     "@spectrum-css/vars": "^2.3.0",
+    "@storybook/addons": "^6.1.10",
     "@storybook/addon-a11y": "^6.1.10",
     "@storybook/addon-actions": "^6.1.10",
     "@storybook/addon-knobs": "^6.1.10",
     "@storybook/addon-links": "^6.1.10",
+    "@storybook/api": "^6.1.10",
+    "@storybook/components": "^6.1.10",
     "@storybook/react": "^6.1.10",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",

packages/@react-aria/focus/stories/FocusScope.stories.tsx

@@ -23,7 +23,12 @@ interface StoryProps {
 
 const meta: Meta<StoryProps> = {
   title: 'FocusScope',
-  component: FocusScope
+  component: FocusScope,
+  parameters: {
+    description: {
+      data: 'Should not be able to click or navigate back into inputs from previous "dialogs".'
+    }
+  }
 };
 
 export default meta;

packages/@react-aria/selection/stories/useSelectableList.stories.tsx

@@ -119,7 +119,7 @@ storiesOf('useSelectableList', module)
     <SelectableList isSubUlRelativelyPositioned={false} isUlRelativelyPositioned={false}>
       {options}
     </SelectableList>
-  ))
+  ), {description: {data: 'Built to test if focusing an element scrolls into view.'}})
   .add('Static ul, relative sub ul', () => (
     <SelectableList isSubUlRelativelyPositioned isUlRelativelyPositioned={false}>
       {options}