Add Card component to Tabs

.changeset/wet-dragons-swim.md

@@ -0,0 +1,5 @@
+---
+'@propeldata/ui-kit': patch
+---
+
+Added Card component to Tabs

packages/ui-kit/package.json

@@ -63,6 +63,7 @@
     "@types/ora": "^3.2.0",
     "@types/react": "latest",
     "@types/react-dom": "latest",
+    "@types/style-inject": "^0.3.5",
     "@types/testing-library__jest-dom": "^5.14.7",
     "axios": "^1.6.2",
     "jest": "^27.5.1",

packages/ui-kit/src/components/Card/Card.tsx

@@ -15,7 +15,12 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ children, cla
   useSetupTheme({ componentContainer, ...themeSettings })
 
   return (
-    <div ref={setRef} className={classnames(componentStyles.rootCard, className)} {...parsedProps} data-testid="card">
+    <div
+      ref={setRef}
+      className={classnames(componentStyles.rootCard, className, 'propel-Card')}
+      {...parsedProps}
+      data-testid="card"
+    >
       {children}
     </div>
   )

packages/ui-kit/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Tabs } from './Tabs'
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  tags: ['devOnly']
+}
+
+export default meta
+type Story = StoryObj<typeof Tabs>
+
+export const Default: Story = {
+  render: () => (
+    <Tabs.Root style={{ width: '100%' }}>
+      <Tabs.List>
+        <Tabs.Trigger value="account">Account</Tabs.Trigger>
+        <Tabs.Trigger value="password">Password</Tabs.Trigger>
+        <Tabs.Trigger value="team">Team</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="account">Make changes to your account here. Click save when you&apos;re done.</Tabs.Content>
+      <Tabs.Content value="password">Change your password here. After saving, you&apos;ll be logged out.</Tabs.Content>
+      <Tabs.Content value="team">Manage your team here. Add, remove, or edit team members here.</Tabs.Content>
+    </Tabs.Root>
+  )
+}
+
+export const Cards: Story = {
+  render: () => (
+    <Tabs.Root>
+      <Tabs.List>
+        <Tabs.Card value="account" style={{ cursor: 'pointer', width: '100%' }}>
+          Account
+        </Tabs.Card>
+        <Tabs.Card value="password" style={{ cursor: 'pointer', width: '100%' }}>
+          Password
+        </Tabs.Card>
+        <Tabs.Card value="team" style={{ cursor: 'pointer', width: '100%' }}>
+          Team
+        </Tabs.Card>
+      </Tabs.List>
+      <Tabs.Content value="account">Make changes to your account here. Click save when you&apos;re done.</Tabs.Content>
+      <Tabs.Content value="password">Change your password here. After saving, you&apos;ll be logged out.</Tabs.Content>
+      <Tabs.Content value="team">Manage your team here. Add, remove, or edit team members here.</Tabs.Content>
+    </Tabs.Root>
+  )
+}

packages/ui-kit/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,45 @@
+// This component is set as a server component
+
+import React from 'react'
 import { Tabs as TabsBase } from '@radix-ui/themes'
+import { Card as CardBase } from '../Card'
 import '@radix-ui/themes/styles.css'
+import { TabsCSS } from './TabsCSS'
+
+type TabsBase = typeof TabsBase
+
+interface Tabs extends Omit<TabsBase, 'List' | 'Root'> {
+  Root: typeof Root
+  Card: typeof Card
+  List: typeof List
+}
+
+const Root = ({ children, ...props }: React.ComponentProps<typeof TabsBase.Root>) => {
+  return (
+    <>
+      <TabsBase.Root {...props}>{children}</TabsBase.Root>
+      <TabsCSS />
+    </>
+  )
+}
+
+const List = ({ children, ...props }: React.ComponentProps<typeof TabsBase.List>) => {
+  return <TabsBase.List {...props}>{children}</TabsBase.List>
+}
+
+const Card = ({ children, ...props }: React.ComponentProps<typeof TabsBase.Trigger>) => (
+  <TabsBase.Trigger {...props}>
+    <CardBase style={props.style} className={props.className}>
+      {children}
+    </CardBase>
+  </TabsBase.Trigger>
+)
+
+const Tabs: Tabs = {
+  ...TabsBase,
+  Root,
+  Card,
+  List
+}
 
-export const Tabs = TabsBase
+export { Tabs }

packages/ui-kit/src/components/Tabs/TabsCSS.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import styleInject from 'style-inject'
+
+export const TabsCSS = () => {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      styleInject(`.rt-BaseTabList:has(.propel-Card) {
+  all: unset;
+  width: 100%;
+}
+
+.rt-BaseTabList:has(.propel-Card) .rt-TabsTrigger {
+  all: unset !important;
+  display: block !important;
+  box-sizing: border-box;
+  inline-size: 100% !important;
+  position: relative !important;
+  border-radius: var(--propel-radius-5);
+}
+
+.rt-BaseTabList:has(.propel-Card) .rt-TabsTrigger::before {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  border-radius: var(--propel-radius-5);
+  z-index: 1;
+}
+
+.rt-BaseTabList:has(.propel-Card) .rt-TabsTrigger > .rt-TabsTriggerInner {
+  all: unset !important;
+  display: block !important;
+}
+
+.rt-BaseTabList:has(.propel-Card) .rt-TabsTrigger > .rt-TabsTriggerInnerHidden {
+  display: none;
+}
+      `)
+    }
+  }, [])
+
+  return <></>
+}

yarn.lock

@@ -5703,6 +5703,7 @@ __metadata:
     "@types/ora": ^3.2.0
     "@types/react": latest
     "@types/react-dom": latest
+    "@types/style-inject": ^0.3.5
     "@types/testing-library__jest-dom": ^5.14.7
     axios: ^1.6.2
     chart.js: ^4.1.2
@@ -10288,6 +10289,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/style-inject@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@types/style-inject@npm:0.3.5::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2F%40types%2Fstyle-inject%2F-%2Fstyle-inject-0.3.5.tgz"
+  checksum: 615b3e58f8f91a53b4fcf7fab813f72c00181b205b8ac048e259010b5f55e70a41755b9491e0d0971fddea6bd7bef3aba0f16e9d1dfceb454d247a0555345cab
+  languageName: node
+  linkType: hard
+
 "@types/testing-library__jest-dom@npm:^5.14.7, @types/testing-library__jest-dom@npm:^5.9.1":
   version: 5.14.9
   resolution: "@types/testing-library__jest-dom@npm:5.14.9::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2F%40types%2Ftesting-library__jest-dom%2F-%2Ftesting-library__jest-dom-5.14.9.tgz"