add: keyboard navigation of tabs

src/components/ui/Tabs/Tabs.tsx

@@ -1,25 +1,26 @@
 'use client';
 import React, {useState} from 'react';
 
-import TabList from './segments/TabList';
-import TabContent from './segments/TabContent';
-import TabRoot from './segments/TabRoot';
+import TabList from './shards/TabList';
+import TabContent from './shards/TabContent';
+import TabRoot from './shards/TabRoot';
 
-import {Tab} from './types';
+import {TabProps} from './types';
 
 export type TabsProps = {
-    tabs?: Tab[]
+    tabs?: TabProps[]
     props?: Record<string, any>[]
 }
 
 const Tabs = ({tabs = [], ...props}: TabsProps) => {
     // This should be a value <`tabs.value`> that is passed in from the parent component
     const [activeTab, setActiveTab] = useState(tabs[0].value || '');
+    const defaultActiveTab = tabs[0].value || '';
 
     return (
-        <TabRoot {...props} >
-            <TabList activeTab={activeTab} setActiveTab={setActiveTab} tabs={tabs} />
-            <TabContent activeTab={activeTab} tabs={tabs} />
+        <TabRoot tabs={tabs} defaultTab={defaultActiveTab} >
+            <TabList />
+            <TabContent />
         </TabRoot>
     );
 };

src/components/ui/Tabs/context/TabsRootContext.tsx

@@ -0,0 +1,6 @@
+
+import {createContext} from 'react';
+
+const TabsRootContext = createContext(null);
+
+export default TabsRootContext;

src/components/ui/Tabs/segments/TabContent.tsx → src/components/ui/Tabs/shards/TabContent.tsx

@@ -1,8 +1,9 @@
 'use client';
-import React from 'react';
+import React, {useContext} from 'react';
 import {customClassSwitcher} from '~/core';
 import {TabProps} from '../types';
 const COMPONENT_NAME = 'TabContent';
+import TabsRootContext from '../context/TabsRootContext';
 
 
 export type TabContentProps ={
@@ -12,9 +13,12 @@ export type TabContentProps ={
     customRootClass?: string;
 }
 
-const TabContent = ({tabs = [], activeTab, className, customRootClass}: TabContentProps) => {
+const TabContent = ({ className, customRootClass}: TabContentProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
+    const {tabs, activeTab, setActiveTab} = useContext(TabsRootContext);
+
+
     return <div className={`${rootClass} ${className}`}>
         {tabs.map((tab, index) => {
             if (tab.value === activeTab) {

src/components/ui/Tabs/segments/TabList.tsx → src/components/ui/Tabs/shards/TabList.tsx

@@ -1,9 +1,10 @@
 
 'use client';
-import React from 'react';
+import React, {useContext} from 'react';
 import {customClassSwitcher} from '~/core';
 import TabTrigger from './TabTrigger';
 import {TabProps} from '../types';
+import TabsRootContext from '../context/TabsRootContext';
 
 const COMPONENT_NAME = 'TabList';
 
@@ -15,8 +16,9 @@ export type TabListProps = {
     activeTab: TabProps;
 }
 
-const TabList = ({tabs = [], className='', customRootClass='', setActiveTab, activeTab}: TabListProps) => {
+const TabList = ({className='', customRootClass=''}: TabListProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    const {tabs, activeTab, setActiveTab} = useContext(TabsRootContext);
 
     // TODO: in the previous return value of
     // {tabs.map((tab, index) => {

src/components/ui/Tabs/shards/TabRoot.tsx

@@ -0,0 +1,52 @@
+
+'use client';
+import React, {useState} from 'react';
+import {customClassSwitcher} from '~/core';
+
+import TabsRootContext from '../context/TabsRootContext';
+
+import {TabRootProps} from '../types';
+
+const COMPONENT_NAME = 'Tabs';
+
+
+const TabRoot = ({children, defaultTab='', customRootClass, tabs=[], className, color, ...props}: TabRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
+    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0].value || '');
+
+    const nextTab = ()=>{
+        const currentIndex = tabs.findIndex(tab => tab.value === activeTab);
+        const nextIndex = currentIndex + 1;
+        if (nextIndex < tabs.length) {
+            setActiveTab(tabs[nextIndex].value);
+        }
+    }
+
+    const previousTab = ()=>{
+        const currentIndex = tabs.findIndex(tab => tab.value === activeTab);
+        const previousIndex = currentIndex - 1;
+        if (previousIndex >= 0) {
+            setActiveTab(tabs[previousIndex].value);
+        }
+    }
+
+
+    return (
+        <TabsRootContext.Provider value={{
+            activeTab,
+            setActiveTab,
+            nextTab,
+            previousTab,
+            tabs
+        }}>
+            <div className={`${rootClass} ${className}`} data-accent-color={color} {...props} >
+                {children}
+            </div>
+        </TabsRootContext.Provider>
+    );
+};
+
+TabRoot.displayName = COMPONENT_NAME;
+
+export default TabRoot;

src/components/ui/Tabs/shards/TabTrigger.tsx

@@ -0,0 +1,59 @@
+'use client';
+import React, {useContext} from 'react';
+import {customClassSwitcher} from '~/core';
+import {TabProps} from '../types';
+
+import TabsRootContext from '../context/TabsRootContext';
+
+
+const COMPONENT_NAME = 'TabTrigger';
+
+export type TabTriggerProps = {
+    tab: TabProps;
+    setActiveTab: React.Dispatch<Tab>;
+    activeTab: TabProps;
+    className?: string;
+    customRootClass?: string;
+    index: number;
+    props?: Record<string, any>[]
+}
+
+const TabTrigger = ({tab, setActiveTab, activeTab, className, customRootClass, index, ...props}: TabTriggerProps) => {
+
+    // use context
+    const {tabs, previousTab, nextTab} = useContext(TabsRootContext);
+    console.log(tabs);
+
+
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
+    const isActive = activeTab === tab.value;
+
+    const handleClick = (tab: Tab) => {
+        setActiveTab(tab.value);
+    };
+
+    const handleKeyDownEvent = (e: React.KeyboardEvent) => {
+        console.log(e.key);
+        if(e.key=="ArrowLeft"){
+            previousTab();
+        }
+        if(e.key=="ArrowRight"){
+            nextTab();
+        }
+    }
+
+    return (
+            <button
+                    role="tab" key={index} className={`${rootClass} ${isActive?'active':''} ${className}`} {...props} onKeyDown={handleKeyDownEvent} 
+                    onClick={() => handleClick(tab)}>
+                    <span className={`${rootClass}-inner`}>
+                        {tab.label}
+                    </span>
+                </button>
+    );
+};
+
+TabTrigger.displayName = 'TabTrigger';
+
+export default TabTrigger;

src/components/ui/Tabs/types/TabRootProps.tsx

@@ -5,7 +5,7 @@ type TabRootProps = {
     color?: string;
     props?: Record<string, any>[];
     tabs: [];
-    activeTab: any
+    defaultTab: string;
 }
 
 export default TabRootProps;