Fix up key warning in addons panel

cc @ndelangen -- not sure if this was what you had in mind?

addons/a11y/src/register.js

@@ -16,6 +16,6 @@ addons.register(ADDON_ID, api => {
     type: types.PANEL,
     title: 'Accessibility',
     // eslint-disable-next-line react/prop-types
-    render: ({ active }) => <Panel api={api} active={active} />,
+    render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
   });
 });

addons/actions/src/manager.js

@@ -9,7 +9,9 @@ export function register() {
     addons.addPanel(PANEL_ID, {
       title: 'Action Logger',
       // eslint-disable-next-line react/prop-types
-      render: ({ active }) => <ActionLogger channel={channel} api={api} active={active} />,
+      render: ({ active, key }) => (
+        <ActionLogger key={key} channel={channel} api={api} active={active} />
+      ),
     });
   });
 }

addons/cssresources/src/register.js

@@ -11,6 +11,8 @@ addons.register(ADDON_ID, api => {
     type: types.PANEL,
     title: 'CSS resources',
     // eslint-disable-next-line react/prop-types
-    render: ({ active }) => <CssResourcePanel channel={channel} api={api} active={active} />,
+    render: ({ active, key }) => (
+      <CssResourcePanel key={key} channel={channel} api={api} active={active} />
+    ),
   });
 });

addons/events/src/manager.js

@@ -10,7 +10,7 @@ export function register() {
     addons.addPanel(PANEL_ID, {
       title: 'Events',
       // eslint-disable-next-line react/prop-types
-      render: ({ active }) => <Panel channel={channel} active={active} />,
+      render: ({ active, key }) => <Panel key={key} channel={channel} active={active} />,
     });
   });
 }

addons/jest/src/register.js

@@ -11,6 +11,6 @@ addons.register(ADDON_ID, api => {
   addons.addPanel(PANEL_ID, {
     title: 'tests',
     // eslint-disable-next-line react/prop-types
-    render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
+    render: ({ active, key }) => <Panel key={key} channel={channel} api={api} active={active} />,
   });
 });

addons/knobs/src/register.js

@@ -8,6 +8,6 @@ addons.register(ADDON_ID, api => {
   addons.addPanel(PANEL_ID, {
     title: 'Knobs',
     // eslint-disable-next-line react/prop-types
-    render: ({ active }) => <Panel channel={channel} api={api} key="knobs-panel" active={active} />,
+    render: ({ active, key }) => <Panel channel={channel} api={api} key={key} active={active} />,
   });
 });

addons/ondevice-knobs/src/index.js

@@ -8,7 +8,7 @@ export function register() {
     addons.addPanel('RNKNOBS', {
       title: 'Knobs',
       // eslint-disable-next-line react/prop-types
-      render: ({ active }) => <Panel channel={channel} active={active} />,
+      render: ({ active, key }) => <Panel key={key} channel={channel} active={active} />,
     });
   });
 }

addons/ondevice-notes/src/register.js

@@ -60,6 +60,6 @@ addons.register('storybook/notes', api => {
   addons.addPanel('storybook/notes/panel', {
     title: 'Notes',
     // eslint-disable-next-line react/prop-types
-    render: ({ active }) => <Notes channel={channel} api={api} active={active} />,
+    render: ({ active, key }) => <Notes key={key} channel={channel} api={api} active={active} />,
   });
 });

addons/storysource/src/manager.js

@@ -9,7 +9,9 @@ export function register() {
     addons.addPanel(PANEL_ID, {
       title: 'Story',
       // eslint-disable-next-line react/prop-types
-      render: ({ active }) => <StoryPanel channel={channel} api={api} active={active} />,
+      render: ({ active, key }) => (
+        <StoryPanel key={key} channel={channel} api={api} active={active} />
+      ),
     });
   });
 }

docs/src/pages/addons/writing-addons/index.md

@@ -46,12 +46,11 @@ import { storiesOf } from '@storybook/react';
 
 import Button from './Button';
 
-storiesOf('Button', module)
-  .add('with text', () => <Button>Hello Button</Button>, {
-    myAddon: {
-      data: 'this data is passed to the addon'
-    },
-  });
+storiesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {
+  myAddon: {
+    data: 'this data is passed to the addon',
+  },
+});
 ```
 
 ### Add a panel
@@ -98,9 +97,9 @@ class MyPanel extends React.Component {
   render() {
     const { value } = this.state;
     const { active } = this.props;
-    return active ? (<div>{value}</div>) : null;
+    return active ? <div>{value}</div> : null;
   }
-};
+}
 
 addons.register(ADDON_ID, api => {
   const render = ({ active }) => <Panel api={api} active={active} />;
@@ -196,7 +195,7 @@ class MyPanel extends React.Component {
   render() {
     const { active } = this.props;
 
-    return active ? <div></div> : null;
+    return active ? <div /> : null;
   }
 }
 
@@ -205,7 +204,7 @@ addons.register('MYADDON', api => {
   // Also need to set a unique name to the panel.
   addons.addPanel('MYADDON/panel', {
     title: 'My Addon',
-    render: ({ active }) => <MyPanel api={api} active={active} />,
+    render: ({ active, key }) => <MyPanel key={key} api={api} active={active} />,
   });
 });
 ```
@@ -214,7 +213,7 @@ It will register our addon and add a panel. In this case, the panel represents a
 That component has access to the storybook API.
 
 Then it will listen for events. You can listen for core storybook events, event by other addons or custom events created by `index.js`.
- Have a look at the above annotated code.
+Have a look at the above annotated code.
 
 > In this example, we are only sending messages from the Preview Area to the Manager App (our panel). But we can do it the other way around as well.
 

lib/components/src/tabs/tabs.js

@@ -183,8 +183,8 @@ export const Tabs = React.memo(
             typeof content === 'function'
               ? content
               : // eslint-disable-next-line react/prop-types
-                ({ active }) => (
-                  <VisuallyHidden active={active} role="tabpanel">
+                ({ active, key }) => (
+                  <VisuallyHidden key={key} active={active} role="tabpanel">
                     {content}
                   </VisuallyHidden>
                 ),