Skip to content

Commit 5b27879

Browse files
maiieulmaiieul
committed
refactor(styled tabs): to dot notation
1 parent bf9e9f0 commit 5b27879

File tree

3 files changed

+86
-86
lines changed

3 files changed

+86
-86
lines changed

‎apps/website/src/routes/docs/styled/tabs/examples/hero.tsx

Lines changed: 33 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,22 @@
11
import { component$ } from '@builder.io/qwik';
2-
import {
3-
Button,
4-
Card,
5-
CardContent,
6-
CardDescription,
7-
CardFooter,
8-
CardHeader,
9-
CardTitle,
10-
Input,
11-
Label,
12-
TabsRoot,
13-
TabsList,
14-
TabsPanel,
15-
Tab,
16-
} from '@qwik-ui/styled';
2+
import { Button, Card, Input, Label, Tabs } from '@qwik-ui/styled';
173

184
export default component$(() => {
195
return (
20-
<TabsRoot class="max-w-[400px]">
21-
<TabsList class="grid w-full grid-cols-2">
22-
<Tab>Account</Tab>
23-
<Tab>Password</Tab>
24-
</TabsList>
25-
<TabsPanel>
26-
<Card>
27-
<CardHeader>
28-
<CardTitle>Account</CardTitle>
29-
<CardDescription>
6+
<Tabs.Root class="max-w-[400px]">
7+
<Tabs.List class="grid w-full grid-cols-2">
8+
<Tabs.Tab>Account</Tabs.Tab>
9+
<Tabs.Tab>Password</Tabs.Tab>
10+
</Tabs.List>
11+
<Tabs.Panel>
12+
<Card.Root>
13+
<Card.Header>
14+
<Card.Title>Account</Card.Title>
15+
<Card.Description>
3016
Make changes to your account here. Click save when you're done.
31-
</CardDescription>
32-
</CardHeader>
33-
<CardContent class="space-y-2">
17+
</Card.Description>
18+
</Card.Header>
19+
<Card.Content class="space-y-2">
3420
<div class="space-y-1">
3521
<Label for="name">Name</Label>
3622
<Input id="name" value="Pedro Duarte" />
@@ -39,21 +25,21 @@ export default component$(() => {
3925
<Label for="username">Username</Label>
4026
<Input id="username" value="~peduarte" />
4127
</div>
42-
</CardContent>
43-
<CardFooter>
28+
</Card.Content>
29+
<Card.Footer>
4430
<Button>Save changes</Button>
45-
</CardFooter>
46-
</Card>
47-
</TabsPanel>
48-
<TabsPanel>
49-
<Card>
50-
<CardHeader>
51-
<CardTitle>Password</CardTitle>
52-
<CardDescription>
31+
</Card.Footer>
32+
</Card.Root>
33+
</Tabs.Panel>
34+
<Tabs.Panel>
35+
<Card.Root>
36+
<Card.Header>
37+
<Card.Title>Password</Card.Title>
38+
<Card.Description>
5339
Change your password here. After saving, you'll be logged out.
54-
</CardDescription>
55-
</CardHeader>
56-
<CardContent class="space-y-2">
40+
</Card.Description>
41+
</Card.Header>
42+
<Card.Content class="space-y-2">
5743
<div class="space-y-1">
5844
<Label for="current">Current password</Label>
5945
<Input id="current" type="password" />
@@ -62,12 +48,12 @@ export default component$(() => {
6248
<Label for="new">New password</Label>
6349
<Input id="new" type="password" />
6450
</div>
65-
</CardContent>
66-
<CardFooter>
51+
</Card.Content>
52+
<Card.Footer>
6753
<Button>Save password</Button>
68-
</CardFooter>
69-
</Card>
70-
</TabsPanel>
71-
</TabsRoot>
54+
</Card.Footer>
55+
</Card.Root>
56+
</Tabs.Panel>
57+
</Tabs.Root>
7258
);
7359
});

‎apps/website/src/routes/docs/styled/tabs/index.mdx

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,76 +22,83 @@ qwik-ui add tabs
2222

2323
```tsx
2424
import { Slot, component$, PropsOf } from '@builder.io/qwik';
25-
import { Tabs as QwikUITabs } from '@qwik-ui/headless';
25+
import { Tabs as HeadlessTabs } from '@qwik-ui/headless';
2626
import { cn } from '@qwik-ui/utils';
2727

28-
export const TabsRoot = (props: PropsOf<typeof QwikUITabs.Root>) => (
29-
<QwikUITabs.Root
28+
const Root = (props: PropsOf<typeof HeadlessTabs.Root>) => (
29+
<HeadlessTabs.Root
3030
{...props}
31-
tabListComponent={TabsList}
31+
tabListComponent={List}
3232
tabComponent={Tab}
33-
tabPanelComponent={TabsPanel}
33+
tabPanelComponent={Panel}
3434
/>
3535
);
3636

37-
export const TabsList = component$<PropsOf<typeof QwikUITabs.List>>((props) => {
37+
const List = component$<PropsOf<typeof HeadlessTabs.List>>((props) => {
3838
return (
39-
<QwikUITabs.List
39+
<HeadlessTabs.List
4040
{...props}
4141
class={cn(
4242
'inline-flex items-center justify-center rounded-lg border-base bg-muted p-1 text-muted-foreground shadow-sm',
4343
props.class,
4444
)}
4545
>
4646
<Slot />
47-
</QwikUITabs.List>
47+
</HeadlessTabs.List>
4848
);
4949
});
5050

51-
export const Tab = component$<PropsOf<typeof QwikUITabs.Tab>>((props) => {
51+
const Tab = component$<PropsOf<typeof HeadlessTabs.Tab>>((props) => {
5252
return (
53-
<QwikUITabs.Tab
53+
<HeadlessTabs.Tab
5454
{...props}
5555
class={cn(
5656
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:shadow-inner',
5757
props.class,
5858
)}
5959
>
6060
<Slot />
61-
</QwikUITabs.Tab>
61+
</HeadlessTabs.Tab>
6262
);
6363
});
6464

65-
export const TabsPanel = component$<PropsOf<typeof QwikUITabs.Panel>>((props) => {
65+
const Panel = component$<PropsOf<typeof HeadlessTabs.Panel>>((props) => {
6666
return (
67-
<QwikUITabs.Panel
67+
<HeadlessTabs.Panel
6868
{...props}
6969
class={cn(
7070
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
7171
props.class,
7272
)}
7373
>
7474
<Slot />
75-
</QwikUITabs.Panel>
75+
</HeadlessTabs.Panel>
7676
);
7777
});
78+
79+
export const Tabs = {
80+
Root,
81+
List,
82+
Tab,
83+
Panel,
84+
};
7885
```
7986

8087
## Usage
8188

8289
```tsx
83-
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/styled';
90+
import { Tabs } from '~/components/ui';
8491
```
8592

8693
```tsx
87-
<Tabs>
88-
<TabList>
89-
<Tab>Tab 1</Tab>
90-
<Tab>Tab 2</Tab>
91-
<Tab>Tab 3</Tab>
92-
</TabList>
93-
<TabPanel>Panel 1</TabPanel>
94-
<TabPanel>Panel 2</TabPanel>
95-
<TabPanel>Panel 3</TabPanel>
96-
</Tabs>
94+
<Tabs.Root>
95+
<Tabs.List>
96+
<Tabs.Tab>Tab 1</Tabs.Tab>
97+
<Tabs.Tab>Tab 2</Tabs.Tab>
98+
<Tabs.Tab>Tab 3</Tabs.Tab>
99+
</Tabs.List>
100+
<Tabs.Panel>Panel 1</Tabs.Panel>
101+
<Tabs.Panel>Panel 2</Tabs.Panel>
102+
<Tabs.Panel>Panel 3</Tabs.Panel>
103+
</Tabs.Root>
97104
```

‎packages/kit-styled/src/components/tabs/tabs.tsx

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,61 @@
11
import { Slot, component$, PropsOf } from '@builder.io/qwik';
2-
import { Tabs as QwikUITabs } from '@qwik-ui/headless';
2+
import { Tabs as HeadlessTabs } from '@qwik-ui/headless';
33
import { cn } from '@qwik-ui/utils';
44

5-
export const TabsRoot = (props: PropsOf<typeof QwikUITabs.Root>) => (
6-
<QwikUITabs.Root
5+
const Root = (props: PropsOf<typeof HeadlessTabs.Root>) => (
6+
<HeadlessTabs.Root
77
{...props}
8-
tabListComponent={TabsList}
8+
tabListComponent={List}
99
tabComponent={Tab}
10-
tabPanelComponent={TabsPanel}
10+
tabPanelComponent={Panel}
1111
/>
1212
);
1313

14-
export const TabsList = component$<PropsOf<typeof QwikUITabs.List>>((props) => {
14+
const List = component$<PropsOf<typeof HeadlessTabs.List>>((props) => {
1515
return (
16-
<QwikUITabs.List
16+
<HeadlessTabs.List
1717
{...props}
1818
class={cn(
1919
'inline-flex items-center justify-center rounded-lg border-base bg-muted p-1 text-muted-foreground shadow-sm',
2020
props.class,
2121
)}
2222
>
2323
<Slot />
24-
</QwikUITabs.List>
24+
</HeadlessTabs.List>
2525
);
2626
});
2727

28-
export const Tab = component$<PropsOf<typeof QwikUITabs.Tab>>((props) => {
28+
const Tab = component$<PropsOf<typeof HeadlessTabs.Tab>>((props) => {
2929
return (
30-
<QwikUITabs.Tab
30+
<HeadlessTabs.Tab
3131
{...props}
3232
class={cn(
3333
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:border-base data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:shadow-inner',
3434
props.class,
3535
)}
3636
>
3737
<Slot />
38-
</QwikUITabs.Tab>
38+
</HeadlessTabs.Tab>
3939
);
4040
});
4141

42-
export const TabsPanel = component$<PropsOf<typeof QwikUITabs.Panel>>((props) => {
42+
const Panel = component$<PropsOf<typeof HeadlessTabs.Panel>>((props) => {
4343
return (
44-
<QwikUITabs.Panel
44+
<HeadlessTabs.Panel
4545
{...props}
4646
class={cn(
4747
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
4848
props.class,
4949
)}
5050
>
5151
<Slot />
52-
</QwikUITabs.Panel>
52+
</HeadlessTabs.Panel>
5353
);
5454
});
55+
56+
export const Tabs = {
57+
Root,
58+
List,
59+
Tab,
60+
Panel,
61+
};

0 commit comments

Comments
 (0)