feat(tabs): implement <Tabs> and <StatefulTabs> components

Author: assisrafael

src/index.js

@@ -1,2 +1,3 @@
 export * from './forms';
 export * from './table';
+export * from './tabs';

src/tabs/StatefulTabs.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs } from './Tabs';
+
+export function StatefulTabs({ activeTab: _, tabs, ...props }) {
+  const { getSelected, select } = useTabs(tabs);
+
+  return <Tabs tabs={tabs} {...props} activeTab={getSelected()} onSelect={select} />;
+}
+
+StatefulTabs.propTypes = {
+  activeTab: PropTypes.any,
+  tabs: PropTypes.arrayOf(PropTypes.object),
+};
+
+function useTabs(tabs) {
+  const [activeTab, setActiveTab] = useState(0);
+
+  return {
+    getSelected() {
+      return activeTab;
+    },
+    select(index) {
+      if (index >= tabs.length) {
+        throw new Error('Invalid tab');
+      }
+
+      setActiveTab(index);
+    },
+  };
+}

src/tabs/TabContent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function TabContent({ isActive, content }) {
+  return (
+    <div
+      className={`tab-pane fade ${isActive ? 'show active' : ''}`}
+      // id="home"
+      role="tabpanel"
+      // aria-labelledby="home-tab"
+    >
+      {content}
+    </div>
+  );
+}
+
+TabContent.propTypes = {
+  isActive: PropTypes.bool,
+  content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+};

src/tabs/TabHeader.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function TabHeader({ index, isActive, title, onSelect }) {
+  return (
+    <li className="nav-item">
+      <a
+        className={`nav-link ${isActive ? 'active' : ''}`}
+        // id="home-tab"
+        data-toggle="tab"
+        href=""
+        // href="#home"
+        onClick={safeClick(onSelect, index)}
+        role="tab"
+        // aria-controls="home"
+        aria-selected={isActive}
+      >
+        {title}
+      </a>
+    </li>
+  );
+}
+
+TabHeader.propTypes = {
+  index: PropTypes.number,
+  isActive: PropTypes.bool,
+  title: PropTypes.string,
+  onSelect: PropTypes.func,
+};
+
+function safeClick(callback, index) {
+  return (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    callback(index);
+  };
+}

src/tabs/Tabs.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TabHeader } from './TabHeader';
+import { TabContent } from './TabContent';
+
+export function Tabs({ vertical, tabs, activeTab, onlyRenderActiveTab, bordered, onSelect }) {
+  if (activeTab >= tabs.length) {
+    console.warn('Invalid tab selected:', activeTab);
+  }
+
+  return (
+    <div className={`custom-tabs-container ${vertical ? 'd-flex' : ''}`}>
+      <div className="tabs-navigation">
+        <ul className={`nav ${vertical ? 'nav-pills flex-column' : 'nav-tabs'}`} id="myTab" role="tablist">
+          {tabs.map((tab, tabIndex) => (
+            <TabHeader
+              key={tabIndex}
+              index={tabIndex}
+              isActive={tabIndex === activeTab}
+              title={tab.title}
+              onSelect={onSelect}
+            />
+          ))}
+        </ul>
+      </div>
+
+      <div
+        className={`tab-content ${
+          vertical ? 'flex-fill ml-3' : `${bordered ? 'border-left border-right border-bottom p-2' : 'py-2'}`
+        }`}
+        // id="myTabContent"
+      >
+        {onlyRenderActiveTab ? (
+          <TabContent isActive={true} content={tabs[activeTab] && tabs[activeTab].content} />
+        ) : (
+          tabs.map((tab, tabIndex) => (
+            <TabContent key={tabIndex} isActive={tabIndex === activeTab} content={tab.content} />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+Tabs.defaultProps = {
+  vertical: false,
+  bordered: false,
+  activeTab: 0,
+  onlyRenderActiveTab: false,
+  onSelect: () => {},
+};
+
+Tabs.propTypes = {
+  vertical: PropTypes.bool,
+  tabs: PropTypes.arrayOf(PropTypes.object),
+  activeTab: PropTypes.number,
+  onlyRenderActiveTab: PropTypes.bool,
+  bordered: PropTypes.bool,
+};

src/tabs/index.js

@@ -0,0 +1,4 @@
+export * from './StatefulTabs';
+export * from './TabContent';
+export * from './TabHeader';
+export * from './Tabs';