adding ribbon and fix components display name

Author: dev-javascript

example/stories/Readme.md

@@ -6,33 +6,11 @@ import useDynTabs from 'react-dyn-tabs';
 import MoreButtonPlugin from 'react-dyn-tabs/plugins/moreButtonPlugin';
 
 const initialOptions = {
-  tabs: [
-    {
-      id: '1',
-      title: 'tab 1',
-      panelComponent: (porps) => <p> panel 1 </p>,
-    },
-    {
-      id: '2',
-      title: 'tab 2',
-      panelComponent: (porps) => <p> panel 2 </p>,
-    },
-    {
-      id: '3',
-      title: 'tab 3',
-      panelComponent: (porps) => <p> panel 3 </p>,
-    },
-    {
-      id: '4',
-      title: 'tab 4',
-      panelComponent: (porps) => <p> panel 4 </p>,
-    },
-    {
-      id: '5',
-      title: 'tab 5',
-      panelComponent: (porps) => <p> panel 5 </p>,
-    },
-  ],
+  tabs: Array.from({length: 20}).map((value, i) => ({
+    id: `${i + 1}`,
+    title: `tab ${i + 1}`,
+    panelComponent: <p> {`panel ${i + 1}`} </p>,
+  })),
   selectedTabID: '2',
 };
 
@@ -45,18 +23,5 @@ function App() {
     </div>
   );
 }
-function App2() {
-  const [TabList, PanelList] = useDynTabs(initialOptions);
-  return (
-    <div>
-      <TabList></TabList>
-      <PanelList></PanelList>
-    </div>
-  );
-}
-
-<>
-  <App />
-  <App2 />
-</>;
+<App />;
 ```

example/stories/minimal-usage/minimal-usage.jsx

@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+import useDynTabs from 'react-dyn-tabs';
+
+const initialOptions = {
+  tabs: [
+    {
+      id: '1',
+      title: 'tab1',
+      panelComponent: (porps) => <p> panel 1 </p>,
+    },
+    {
+      id: '2',
+      title: 'tab2',
+      panelComponent: (porps) => <p> panel 2 </p>,
+    },
+  ],
+  selectedTabID: '1',
+};
+
+function App() {
+  const [TabList, PanelList, ready] = useDynTabs(initialOptions);
+  const addTab3 = function () {
+    ready((instance) => {
+      // open tab 3
+      instance.open({id: '3', title: 'Tab 3', panelComponent: (porps) => <p> panel 3 </p>}).then(() => {
+        console.log('tab 3 is open');
+      });
+      // switch to tab 3
+      instance.select('3').then(() => {
+        console.log('tab 3 is selected');
+      });
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={addTab3}>Add tab 3</button>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+<App />;
+```

example/stories/responsive/README.md

@@ -3,20 +3,37 @@ const {version} = require('./package');
 const path = require('path');
 
 module.exports = {
-  title: 'React Dyn Tabs',
+  title: 'react-dyn-tabs',
   getComponentPathLine(componentPath) {
     return ``;
   },
   components: 'example/stories/**/*.{jsx,js,tsx}',
   moduleAliases: {
     'react-dyn-tabs': path.resolve(__dirname, './'),
   },
+  ribbon: {
+    // Link to open on the ribbon click (required)
+    url: 'https://github.com/dev-javascript/react-dyn-tabs',
+    // Text to show on the ribbon (optional)
+    text: 'Fork me on GitHub',
+  },
   // assetsDir: "example/stories/assets",
   sections: [
     {
-      name: 'Examples',
+      name: 'Minimal Usage',
       content: 'example/stories/minimal-usage/README.md',
-      components: 'example/stories/**/*.jsx',
+      sectionDepth: 1,
+    },
+    {
+      name: 'Simple Manipulation',
+      content: 'example/stories/simple-manipulation/README.md',
+      //components: 'example/stories/**/*.jsx',
+      sectionDepth: 1,
+    },
+    {
+      name: 'Responsive',
+      content: 'example/stories/responsive/README.md',
+      //components: 'example/stories/**/*.jsx',
       sectionDepth: 1,
     },
   ],