feat: added a suite of tab components (unstyled)

src/components/Tabs/Bar.js

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const Bar = ({ children }) => (
-  <div style={{ border: '1px solid red' }}>{children}</div>
+  <div style={{ border: '1px solid red' }}>
+    {React.Children.map(children, (child, index) =>
+      React.cloneElement(child, { ...child.props, index })
+    )}
+  </div>
 );
 
 Bar.propTypes = {

src/components/Tabs/BarItem.js

@@ -1,15 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const BarItem = ({ children, count, disabled }) => (
-  <div>
-    <span>{children}</span>
-    {count && <span>{count}</span>}
-  </div>
-);
+import useTabs from './useTabs';
+
+const BarItem = ({ index, children, id, count, disabled }) => {
+  const [currentTab, setCurrentTab] = useTabs();
+
+  const isSelected =
+    id === currentTab || (currentTab === undefined && index === 0);
+
+  return (
+    <div
+      onClick={() => !disabled && setCurrentTab(id)}
+      style={{ textDecoration: disabled ? 'line-through' : 'normal' }}
+    >
+      {isSelected && <span>+</span>}
+      <span>{children}</span>
+      {count && <span>{count}</span>}
+    </div>
+  );
+};
 
 BarItem.propTypes = {
+  index: PropTypes.number.isRequired,
   children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
   count: PropTypes.number,
   disabled: PropTypes.bool,
 };

src/components/Tabs/Page.js

@@ -1,10 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Page = ({ children }) => <div>{children}</div>;
+import useTabs from './useTabs';
+
+const Page = ({ index, children, id }) => {
+  const [currentTab] = useTabs();
+
+  const isSelected =
+    id === currentTab || (currentTab === undefined && index === 0);
+
+  if (!isSelected) return null;
+
+  return <div>{children}</div>;
+};
 
 Page.propTypes = {
+  index: PropTypes.number.isRequired,
   children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 export default Page;

src/components/Tabs/Pages.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const Pages = ({ children }) =>
   React.Children.map(children, (child, index) =>
-    React.cloneElement(child, { index })
+    React.cloneElement(child, { ...child.props, index })
   );
 
 Pages.propTypes = {

src/components/Tabs/Tabs.js

@@ -5,10 +5,11 @@ import TabsContext from './Context';
 
 import Bar from './Bar';
 import BarItem from './BarItem';
+import Pages from './Pages';
 import Page from './Page';
 
 const Tabs = ({ children }) => {
-  const tabState = useState(0);
+  const tabState = useState(undefined);
 
   return (
     <TabsContext.Provider value={tabState}>{children}</TabsContext.Provider>
@@ -21,6 +22,7 @@ Tabs.propTypes = {
 
 Tabs.Bar = Bar;
 Tabs.BarItem = BarItem;
+Tabs.Pages = Pages;
 Tabs.Page = Page;
 
 export default Tabs;

src/pages/tabtest.js

@@ -4,19 +4,25 @@ import Tabs from '../components/Tabs';
 const TabTest = () => (
   <Tabs>
     <Tabs.Bar>
-      <Tabs.BarItem>Overview</Tabs.BarItem>
-      <Tabs.BarItem count={12}>Dashboards</Tabs.BarItem>
-      <Tabs.BarItem count={4}>Alerts</Tabs.BarItem>
-      <Tabs.BarItem count={0} disabled>
+      <Tabs.BarItem id="overview">Overview</Tabs.BarItem>
+      <Tabs.BarItem id="dashboards" count={12}>
+        Dashboards
+      </Tabs.BarItem>
+      <Tabs.BarItem id="alerts" count={4}>
+        Alerts
+      </Tabs.BarItem>
+      <Tabs.BarItem id="synthetics" count={0} disabled>
         Synthetics checks
       </Tabs.BarItem>
     </Tabs.Bar>
 
-    <Tabs.Page>This is the page for overview</Tabs.Page>
+    <Tabs.Pages>
+      <Tabs.Page id="overview">This is the page for overview</Tabs.Page>
 
-    <Tabs.Page>This is the page for dashboards..</Tabs.Page>
+      <Tabs.Page id="dashboards">This is the page for dashboards..</Tabs.Page>
 
-    <Tabs.Page>This is the page for aLeRtS</Tabs.Page>
+      <Tabs.Page id="alerts">This is the page for aLeRtS</Tabs.Page>
+    </Tabs.Pages>
   </Tabs>
 );