Re-implement Tabs component using Radix (#1061)

* feat(tabs): re-implement tabs component using radix ui

* feat(tabs): add tabs storybook

* chore(tabs): add index.ts to resolve typecheck failed

* feat(tabs): give Tabs.Trigger's props directly to Button component

* fix(tabs): resolve typecheck error

* feat(tabs): add TabsContent

* feat(tabs): change tabAction element from div to button

* feat(tabs): rename tabs-related components to be singular

* fix(tabs): fix TabsProps to have ReactNode as children

* feat(tabs): add test code for Tabs component

* feat(tabs): export old tabs as LegacyTabs

* chore(changeset): add changeset

* chore(tabs): remove unnecessary font-weight style in TabAction

* feat(tabs): add test code for tab list in regard to a11n

* refactor(tabs): apply style to TabsPrimitive.Root directly

* refactor(tabs): change height in interface to size

* feat(tabs): add html attributes props to TabItem, TabList, and TabAction

* deps(toolbar): add radix-toolbar package

* feat(tabs): add TabItems and TabActions

* feat(tabs): fix test-code as changed Tabs component anatomy and add test code for tabaction(wip)

* fix(tabs): fix use example of tabs component

* fix(tabs): make TabsProps and TabActions extend BezerComponentProps

* docs(tabs): add js-docs for tab components

* fix(tabs): remove DisableProps from TabAction

* feat(tabs): add test code for tab actions

* feat(storybook): add tabs related components as subcomponent in storybook

* fix(tabs): forward ref directly to TabAction component

* feat(tabs): add test code with home and end keyboard

* fix(storybook): fix TabsComposition story to change value with mouse click

* fix(tabs): change TabAction interface to have proper interface depending on href is given or not

* chore(tabs): rename TabActionElement interface as TabActionElementBy

* feat(tabs): add activation animation using css animation

* chore(tabs): remove unnecessary will-change property

* refactor(tabs): css-animation 을 transition 으로 변경

* chore(tabs): fix typo (TabsListContextValue -> TabListContextValue)

* refactor(tabs): use semantic value for tabsize instead of px size

* refactor(tabs): remove unnecessary type assertion with TabAction component

* fix(tabs): add missed ref forwarding

* feat(tabs): add activation mode to props of Tabs component and test code associated with it

* refactor(tabs/style): replace tabsize prop with css variable

* chore(tabitem): remove unncessary will-change property

Author: yangwooseong

.changeset/mean-garlics-speak.md

@@ -0,0 +1,12 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Re-implement `Tabs` component
+
+BREAKING_CHANGES
+
+- The existing `Tabs` is renamed `LegacyTabs` and will be removed from following PR.
+- No longer use selectedOptionIndex in `Tabs`
+- Some props such as `withIndicator`, `optionKey` are removed from `TabItem`
+- Wrap with `TabContent` component for tab panel

packages/bezier-react/package.json

@@ -121,6 +121,8 @@
     "@radix-ui/react-separator": "^1.0.0",
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tabs": "^1.0.1",
+    "@radix-ui/react-toolbar": "^1.0.1",
     "lodash-es": "^4.17.15",
     "react-resize-detector": "^7.1.1",
     "react-textarea-autosize": "^8.3.4",

packages/bezier-react/src/components/Tabs/TabAction/TabAction.styled.ts renamed to packages/bezier-react/src/components/Tabs/LegacyTabs/TabAction/TabAction.styled.ts

@@ -6,7 +6,7 @@ import { get, isNil, noop } from 'lodash-es'
 import { Typography } from 'Foundation'
 import { Text } from 'Components/Text'
 import { IconSize, OpenInNewIcon } from 'Components/Icon'
-import TabsSize from 'Components/Tabs/TabsSize'
+import TabsSize from 'Components/Tabs/LegacyTabs/TabsSize'
 import TabActionProps from './TabAction.types'
 import { Wrapper, Background, LinkIcon } from './TabAction.styled'
 

packages/bezier-react/src/components/Tabs/TabAction/TabAction.tsx renamed to packages/bezier-react/src/components/Tabs/LegacyTabs/TabAction/TabAction.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 /* Internal dependencies */
 import { BezierComponentProps, DisableProps, LinkProps, ChildrenProps } from 'Types/ComponentProps'
-import type TabsOptions from 'Components/Tabs/Tabs.types'
+import type TabsOptions from 'Components/Tabs/LegacyTabs/Tabs.types'
 
 interface TabActionOptions extends ChildrenProps {
   onClick?: React.MouseEventHandler

packages/bezier-react/src/components/Tabs/TabAction/TabAction.types.ts renamed to packages/bezier-react/src/components/Tabs/LegacyTabs/TabAction/TabAction.types.ts

@@ -5,7 +5,7 @@ import { Story, Meta } from '@storybook/react'
 
 /* Internal dependencies */
 import { getObjectFromEnum, getTitle } from 'Utils/storyUtils'
-import TabsSize from 'Components/Tabs/TabsSize'
+import TabsSize from 'Components/Tabs/LegacyTabs/TabsSize'
 import TabItem from './TabItem'
 import TabItemProps from './TabItem.types'
 

packages/bezier-react/src/components/Tabs/TabAction/index.ts renamed to packages/bezier-react/src/components/Tabs/LegacyTabs/TabAction/index.ts

@@ -6,7 +6,7 @@ import { get, noop } from 'lodash-es'
 import { Typography } from 'Foundation'
 import { mergeClassNames } from 'Utils/stringUtils'
 import { Text } from 'Components/Text'
-import TabsSize from 'Components/Tabs/TabsSize'
+import TabsSize from 'Components/Tabs/LegacyTabs/TabsSize'
 import TabItemProps from './TabItem.types'
 import { Wrapper, Background } from './TabItem.styled'