From 2dfbf6fe0b5e8b3750c5fdf4e3584bdea000fa18 Mon Sep 17 00:00:00 2001
From: yoshi6jp <yoshi6jp@gmail.com>
Date: Wed, 29 Nov 2023 05:19:00 +0900
Subject: [PATCH] fix(Tabs): support v4 (#433)

* fix(Tabs): support v4

* remove comment
---
 .storybook/StoryLayout.tsx |  84 +++++++++++----------
 src/Tabs/RadioTab.tsx      |  58 +++++++++++++++
 src/Tabs/Tab.tsx           |  79 +++++---------------
 src/Tabs/Tabs.stories.tsx  | 146 +++++++++++++++++++++++++++----------
 src/Tabs/Tabs.test.tsx     |  45 ++++++++----
 src/Tabs/Tabs.tsx          |  88 +++++++---------------
 src/Tabs/index.tsx         |   2 +-
 7 files changed, 288 insertions(+), 214 deletions(-)
 create mode 100644 src/Tabs/RadioTab.tsx

diff --git a/.storybook/StoryLayout.tsx b/.storybook/StoryLayout.tsx
index 35ab12b6..159c13a9 100644
--- a/.storybook/StoryLayout.tsx
+++ b/.storybook/StoryLayout.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useEffect, useMemo, useState } from 'react'
-import Highlight, { defaultProps } from "prism-react-renderer"
-import theme from "prism-react-renderer/themes/vsDark"
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import theme from 'prism-react-renderer/themes/vsDark'
 
 import { useGlobalTheme } from './theming'
 
@@ -17,28 +17,33 @@ type Props = {
 }
 
 const StoryLayout = ({ children, title, description, source }: Props) => {
-  const [tab, setTab] = useState('preview')
   const globalTheme = useGlobalTheme()
 
   useEffect(() => {
-    document.getElementsByTagName('html')[0].setAttribute('data-theme', globalTheme)
+    document
+      .getElementsByTagName('html')[0]
+      .setAttribute('data-theme', globalTheme)
   }, [globalTheme])
 
-  const Code = () => useMemo(() => (
-    <Highlight {...defaultProps} theme={theme} code={source} language="jsx">
-      {({ tokens, getLineProps, getTokenProps }) => (
-        <pre slot="html">
-          {tokens.map((line, i) => (
-            <div {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span {...getTokenProps({ token, key })} />
+  const Code = () =>
+    useMemo(
+      () => (
+        <Highlight {...defaultProps} theme={theme} code={source} language="jsx">
+          {({ tokens, getLineProps, getTokenProps }) => (
+            <pre slot="html">
+              {tokens.map((line, i) => (
+                <div {...getLineProps({ line, key: i })}>
+                  {line.map((token, key) => (
+                    <span {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
               ))}
-            </div>
-          ))}
-        </pre>
-      )}
-    </Highlight>
-  ), [theme, source])
+            </pre>
+          )}
+        </Highlight>
+      ),
+      [theme, source]
+    )
 
   return (
     <Theme dataTheme={globalTheme} className="w-full h-screen p-8 bg-base-100">
@@ -53,7 +58,7 @@ const StoryLayout = ({ children, title, description, source }: Props) => {
         <p className="text-base-content">{description}</p>
         <div className="my-4">
           {/* Mobile view */}
-          <div className='block sm:hidden'>
+          <div className="block sm:hidden">
             {children}
             <CodeMockup className="w-full mb-8 mt-3">
               <Code />
@@ -61,23 +66,16 @@ const StoryLayout = ({ children, title, description, source }: Props) => {
           </div>
 
           {/* Desktop view */}
-          <div className='hidden sm:grid'>
-            <Tabs
-              className='z-10 -mb-px'
-              variant='lifted'
-              value={tab}
-              onChange={(tab) => setTab(tab === 'fullWidthClick' ? 'html' : tab)}
-            >
-              <Tabs.Tab value="preview" className="[--tab-bg:hsl(var(--b2))]">
-                Preview
-              </Tabs.Tab> 
-              <Tabs.Tab value="html" className={tab === 'html' ? "[--tab-bg:hsl(var(--n))] [--tab-border-color:hsl(var(--n))] [--tab-color:hsl(var(--nc))]" : ""}>
-                HTML
-              </Tabs.Tab> 
-              <Tabs.Tab value="fullWidthClick" className="mr-6 flex-1 cursor-default [--tab-border-color:transparent]" /> 
-            </Tabs>
-            <div className='rounded-b-box rounded-tr-box relative overflow-x-auto'>
-              {tab === 'preview' ? (
+          <div className="hidden sm:grid">
+            <Tabs className="z-10 -mb-px" variant="lifted">
+              <Tabs.RadioTab
+                name="content"
+                label="Preview"
+                defaultChecked={true}
+                className="checked:[--tab-bg:var(--fallback-b1,oklch(var(--b1)))] checked:!border-base-300  
+                          [--tab-border-color:transparent]"
+                contentClassName="overflow-x-auto"
+              >
                 <div
                   className="preview border-base-300 bg-base-100 rounded-se-box rounded-b-box
                             flex min-h-[6rem] min-w-[18rem] flex-wrap items-center justify-center gap-2
@@ -85,12 +83,20 @@ const StoryLayout = ({ children, title, description, source }: Props) => {
                 >
                   {children}
                 </div>
-              ) : (
+              </Tabs.RadioTab>
+              <Tabs.RadioTab
+                name="content"
+                label="HTML"
+                className="[--tab-border-color:transparent] [--tab-bg:var(--fallback-n,oklch(var(--n)))] 
+                checked:[--tab-color:var(--fallback-nc,oklch(var(--nc)))]
+                checked:[--tab-border-color:var(--fallback-n,oklch(var(--n)))]"
+                contentClassName="overflow-x-auto"
+              >
                 <CodeMockup className="w-full mb-8">
                   <Code />
                 </CodeMockup>
-              )}
-            </div>
+              </Tabs.RadioTab>
+            </Tabs>
           </div>
         </div>
       </div>
diff --git a/src/Tabs/RadioTab.tsx b/src/Tabs/RadioTab.tsx
new file mode 100644
index 00000000..06a2b299
--- /dev/null
+++ b/src/Tabs/RadioTab.tsx
@@ -0,0 +1,58 @@
+import React, { forwardRef, ReactNode } from 'react'
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export type RadioTabProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> & {
+  active?: boolean
+  disabled?: boolean
+  label: string
+  name: string
+  contentClassName?: string
+}
+
+const RadioTab = forwardRef<HTMLInputElement, RadioTabProps>(
+  (
+    {
+      children,
+      className,
+      active,
+      label,
+      disabled,
+      name,
+      contentClassName,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    const classes = twMerge(
+      'tab',
+      className,
+      clsx({
+        'tab-active': active,
+        'tab-disabled': disabled,
+      })
+    )
+    const contentClasses = twMerge('tab-content', contentClassName)
+
+    return (
+      <>
+        <input
+          className={classes}
+          role="tab"
+          type="radio"
+          name={name}
+          disabled={disabled}
+          aria-label={label}
+          {...props}
+          ref={ref}
+        />
+        <div className={contentClasses}>{children}</div>
+      </>
+    )
+  }
+)
+
+export default RadioTab
diff --git a/src/Tabs/Tab.tsx b/src/Tabs/Tab.tsx
index 6a572764..6646f864 100644
--- a/src/Tabs/Tab.tsx
+++ b/src/Tabs/Tab.tsx
@@ -1,67 +1,28 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-import { ComponentSize } from '../types'
-
-export type TabProps<T> = Omit<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  'onClick'
-> & {
-  value: T
-  activeValue?: T
-  onClick?: (value: T) => void
-  size?: ComponentSize
-  variant?: 'boxed' | 'bordered' | 'lifted'
+export type TabProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  active?: boolean
   disabled?: boolean
 }
 
-const TabInner = <T extends string | number | undefined>(
-  {
-    children,
-    value,
-    activeValue,
-    onClick,
-    size,
-    variant,
-    disabled,
-    className,
-    style,
-    ...props
-  }: TabProps<T>,
-  ref?: React.ForwardedRef<T>
-): JSX.Element => {
-  const classes = twMerge(
-    'tab',
-    className,
-    clsx({
-      'tab-active': value != null && value === activeValue,
-      'tab-disabled': disabled,
-      'tab-lg': size === 'lg',
-      'tab-md': size === 'md',
-      'tab-sm': size === 'sm',
-      'tab-xs': size === 'xs',
-      'tab-bordered': variant === 'bordered',
-      'tab-lifted': variant === 'lifted',
-    })
-  )
-
-  return (
-    <a
-      role="tab"
-      {...props}
-      className={classes}
-      style={style}
-      onClick={() => onClick && onClick(value)}
-    >
-      {children}
-    </a>
-  )
-}
-
-// Make forwardRef work with generic component
-const Tab = React.forwardRef(TabInner) as <T>(
-  props: TabProps<T> & { ref?: React.ForwardedRef<HTMLAnchorElement> }
-) => ReturnType<typeof TabInner>
+const Tab = forwardRef<HTMLAnchorElement, TabProps>(
+  ({ children, className, active, disabled, ...props }, ref): JSX.Element => {
+    const classes = twMerge(
+      'tab',
+      className,
+      clsx({
+        'tab-active': active,
+        'tab-disabled': disabled,
+      })
+    )
+    return (
+      <a role="tab" {...props} ref={ref} className={classes}>
+        {children}
+      </a>
+    )
+  }
+)
 
 export default Tab
diff --git a/src/Tabs/Tabs.stories.tsx b/src/Tabs/Tabs.stories.tsx
index 137acf60..9522a830 100644
--- a/src/Tabs/Tabs.stories.tsx
+++ b/src/Tabs/Tabs.stories.tsx
@@ -3,66 +3,132 @@ import { StoryFn as Story, Meta } from '@storybook/react'
 
 import Tabs, { TabsProps } from '.'
 
-const { Tab } = Tabs
+const { Tab, RadioTab } = Tabs
 
-export default {
+const meta: Meta<TabsProps> = {
   title: 'Navigation/Tabs',
   component: Tabs,
-  parameters: {
-    controls: { exclude: ['ref'] },
-  },
-  args: {
-    value: 1,
-  },
-} as Meta
+}
 
-const Template: Story<TabsProps<number>> = (args) => {
-  const [tabValue, setTabValue] = React.useState(0)
+export default meta
+
+const Template: Story<TabsProps> = (args) => {
   return (
-    <Tabs {...args} value={tabValue} onChange={setTabValue}>
-      <Tab value={0}>Tab 1</Tab>
-      <Tab value={1}>Tab 2</Tab>
-      <Tab value={2}>Tab 3</Tab>
+    <Tabs {...args}>
+      <Tab>Tab 1</Tab>
+      <Tab active={true}>Tab 2</Tab>
+      <Tab>Tab 3</Tab>
     </Tabs>
   )
 }
 
-export const Default = Template.bind({})
-Default.args = {}
-
-export const Bordered = Template.bind({})
-Bordered.args = { variant: 'bordered' }
-
-export const Lifted = Template.bind({})
-Lifted.args = { variant: 'lifted' }
+export const Default: Story<TabsProps> = Template.bind({})
+export const Bordered: Story<TabsProps> = Template.bind({})
+Bordered.args = {
+  variant: 'bordered',
+}
+export const Lifted: Story<TabsProps> = Template.bind({})
+Lifted.args = {
+  variant: 'lifted',
+}
 
-export const Boxed = Template.bind({})
-Boxed.args = { boxed: true }
+export const Boxed: Story<TabsProps> = Template.bind({})
+Boxed.args = {
+  variant: 'boxed',
+}
 
-export const Sizes: Story<TabsProps<number>> = ({ size, ...args }) => {
+export const Sizes: Story<TabsProps> = ({ size, ...args }) => {
   return (
-    <div className="flex flex-col gap-6 items-center">
+    <div className="flex flex-col items-center gap-6">
+      {/*xs*/}
       <Tabs {...args} size="xs">
-        <Tab value={0}>Tiny</Tab>
-        <Tab value={1}>Tiny</Tab>
-        <Tab value={2}>Tiny</Tab>
+        <Tab>Tiny</Tab>
+        <Tab active={true}>Tiny</Tab>
+        <Tab>Tiny</Tab>
       </Tabs>
+      {/*sm*/}
       <Tabs {...args} size="sm">
-        <Tab value={0}>Small</Tab>
-        <Tab value={1}>Small</Tab>
-        <Tab value={2}>Small</Tab>
+        <Tab>Small</Tab>
+        <Tab active={true}>Small</Tab>
+        <Tab>Small</Tab>
       </Tabs>
+      {/*md*/}
       <Tabs {...args} size="md">
-        <Tab value={0}>Normal</Tab>
-        <Tab value={1}>Normal</Tab>
-        <Tab value={2}>Normal</Tab>
+        <Tab>Normal</Tab>
+        <Tab active={true}>Normal</Tab>
+        <Tab>Normal</Tab>
       </Tabs>
+      {/*lg*/}
       <Tabs {...args} size="lg">
-        <Tab value={0}>Large</Tab>
-        <Tab value={1}>Large</Tab>
-        <Tab value={2}>Large</Tab>
+        <Tab>Large</Tab>
+        <Tab active={true}>Large</Tab>
+        <Tab>Large</Tab>
       </Tabs>
     </div>
   )
 }
-Sizes.args = { variant: 'lifted' }
+Sizes.argTypes = {
+  size: {
+    control: false,
+  },
+}
+Sizes.args = {
+  variant: 'lifted',
+}
+
+export const RadioTabBordered: Story<TabsProps> = (args) => {
+  return (
+    <Tabs {...args}>
+      <RadioTab name="my_tabs_1" label="Tab 1" contentClassName="p-10">
+        Tab content 1
+      </RadioTab>
+      <RadioTab
+        name="my_tabs_1"
+        label="Tab 2"
+        contentClassName="p-10"
+        defaultChecked={true}
+      >
+        Tab content 2
+      </RadioTab>
+      <RadioTab name="my_tabs_1" label="Tab 3" contentClassName="p-10">
+        Tab content 3
+      </RadioTab>
+    </Tabs>
+  )
+}
+RadioTabBordered.args = {
+  variant: 'bordered',
+}
+
+export const RadioTabLifted: Story<TabsProps> = (args) => {
+  return (
+    <Tabs {...args}>
+      <RadioTab
+        name="my_tabs_2"
+        label="Tab 1"
+        contentClassName="bg-base-100 border-base-300 rounded-box p-6"
+      >
+        Tab content 1
+      </RadioTab>
+      <RadioTab
+        name="my_tabs_2"
+        label="Tab 2"
+        contentClassName="bg-base-100 border-base-300 rounded-box p-6"
+        defaultChecked={true}
+      >
+        Tab content 2
+      </RadioTab>
+      <RadioTab
+        name="my_tabs_2"
+        label="Tab 3"
+        contentClassName="bg-base-100 border-base-300 rounded-box p-6"
+      >
+        Tab content 3
+      </RadioTab>
+    </Tabs>
+  )
+}
+RadioTabLifted.args = {
+  className: 'w-full my-10 lg:mx-10',
+  variant: 'lifted',
+}
diff --git a/src/Tabs/Tabs.test.tsx b/src/Tabs/Tabs.test.tsx
index 78f6df69..09337c0c 100644
--- a/src/Tabs/Tabs.test.tsx
+++ b/src/Tabs/Tabs.test.tsx
@@ -6,14 +6,14 @@ import Tabs from './'
 describe('Tabs', () => {
   const tabLabel1 = 'one'
   const tabLabel2 = 'two'
-  const tabValue1 = 1
-  const tabValue2 = 2
+  const tabContent1 = 'content one'
+  const tabContent2 = 'content two'
 
   it('Should render tabs', () => {
     render(
       <Tabs>
-        <Tabs.Tab value={tabValue1}>{tabLabel1}</Tabs.Tab>
-        <Tabs.Tab value={tabValue2}>{tabLabel2}</Tabs.Tab>
+        <Tabs.Tab>{tabLabel1}</Tabs.Tab>
+        <Tabs.Tab>{tabLabel2}</Tabs.Tab>
       </Tabs>
     )
     expect(screen.getByRole('tablist')).toBeInTheDocument()
@@ -22,25 +22,40 @@ describe('Tabs', () => {
   it('Should render tab labels', () => {
     render(
       <Tabs>
-        <Tabs.Tab value={tabValue1}>{tabLabel1}</Tabs.Tab>
-        <Tabs.Tab value={tabValue2}>{tabLabel2}</Tabs.Tab>
+        <Tabs.Tab>{tabLabel1}</Tabs.Tab>
+        <Tabs.Tab>{tabLabel2}</Tabs.Tab>
       </Tabs>
     )
     expect(screen.getByText(tabLabel1)).toBeInTheDocument()
     expect(screen.getByText(tabLabel2)).toBeInTheDocument()
   })
 
-  it('Should call handler on tab click', async () => {
-    const mockHandler = jest.fn()
+  it('Should render radio tabs', () => {
     render(
-      <Tabs onChange={mockHandler}>
-        <Tabs.Tab value={tabValue1}>{tabLabel1}</Tabs.Tab>
-        <Tabs.Tab value={tabValue2}>{tabLabel2}</Tabs.Tab>
+      <Tabs>
+        <Tabs.RadioTab name="tab" label={tabLabel1}>
+          {tabContent1}
+        </Tabs.RadioTab>
+        <Tabs.RadioTab name="tab" label={tabLabel2} defaultChecked={true}>
+          {tabContent2}
+        </Tabs.RadioTab>
+      </Tabs>
+    )
+    expect(screen.getByRole('tablist')).toBeInTheDocument()
+  })
+
+  it('Should render tab content', () => {
+    render(
+      <Tabs>
+        <Tabs.RadioTab name="tab" label={tabLabel1}>
+          {tabContent1}
+        </Tabs.RadioTab>
+        <Tabs.RadioTab name="tab" label={tabLabel2} defaultChecked={true}>
+          {tabContent2}
+        </Tabs.RadioTab>
       </Tabs>
     )
-    const tab = screen.getByText(tabLabel1)
-    await userEvent.click(tab)
-    expect(mockHandler).toHaveBeenCalled()
-    expect(mockHandler).toBeCalledWith(tabValue1)
+    expect(screen.getByText(tabContent1)).toBeInTheDocument()
+    expect(screen.getByText(tabContent2)).toBeInTheDocument()
   })
 })
diff --git a/src/Tabs/Tabs.tsx b/src/Tabs/Tabs.tsx
index 5aa5f44b..1bcaffb5 100644
--- a/src/Tabs/Tabs.tsx
+++ b/src/Tabs/Tabs.tsx
@@ -1,72 +1,40 @@
-import React, { cloneElement, ReactElement } from 'react'
+import React, { cloneElement, forwardRef, ReactElement } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 import { IComponentBaseProps, ComponentSize } from '../types'
 
-import Tab, { TabProps } from './Tab'
+import Tab from './Tab'
+import RadioTab from './RadioTab'
 
-export type TabsProps<T> = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'onChange'
-> &
+export type TabsProps = React.HTMLAttributes<HTMLDivElement> &
   IComponentBaseProps & {
-    children: ReactElement<TabProps<T>>[]
-    value?: T
-    onChange?: (value: T) => void
-    variant?: 'bordered' | 'lifted'
+    variant?: 'bordered' | 'lifted' | 'boxed'
     size?: ComponentSize
-    boxed?: boolean
   }
 
-const TabsInner = <T extends string | number | undefined>(
-  {
-    children,
-    value,
-    onChange,
-    variant,
-    size,
-    boxed,
-    dataTheme,
-    className,
-    ...props
-  }: TabsProps<T>,
-  ref?: React.ForwardedRef<T>
-): JSX.Element => {
-  const classes = twMerge(
-    'tabs',
-    className,
-    clsx({
-      'tabs-boxed': boxed,
-    })
-  )
+const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ children, className, variant, size }, ref): JSX.Element => {
+    const classes = twMerge(
+      'tabs',
+      className,
+      clsx({
+        'tabs-boxed': variant === 'boxed',
+        'tabs-bordered': variant === 'bordered',
+        'tabs-lifted': variant === 'lifted',
+        'tabs-lg': size === 'lg',
+        'tabs-md': size === 'md',
+        'tabs-sm': size === 'sm',
+        'tabs-xs': size === 'xs',
+      })
+    )
 
-  return (
-    <div
-      ref={ref as React.ForwardedRef<HTMLDivElement>}
-      role="tablist"
-      {...props}
-      data-theme={dataTheme}
-      className={classes}
-    >
-      {children.map((child, index) => {
-        return cloneElement(child, {
-          key: child.props.value,
-          variant,
-          size,
-          activeValue: value,
-          onClick: (value: T) => {
-            onChange && onChange(value)
-          },
-        })
-      })}
-    </div>
-  )
-}
-
-// Make forwardRef work with generic component
-const Tabs = React.forwardRef(TabsInner) as <T>(
-  props: TabsProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }
-) => ReturnType<typeof TabsInner>
+    return (
+      <div role="tablist" className={classes} ref={ref}>
+        {children}
+      </div>
+    )
+  }
+)
 
-export default Object.assign(Tabs, { Tab })
+export default Object.assign(Tabs, { Tab, RadioTab })
diff --git a/src/Tabs/index.tsx b/src/Tabs/index.tsx
index 5c5d81a8..3e0577be 100644
--- a/src/Tabs/index.tsx
+++ b/src/Tabs/index.tsx
@@ -1,3 +1,3 @@
 import Tabs, { TabsProps as TTabsProps } from './Tabs'
-export type TabsProps<T> = TTabsProps<T>
+export type TabsProps = TTabsProps
 export default Tabs