Skip to content

Commit 5d6f4fb

Browse files
maiieulmaiieul
authored
Merge pull request #741 from maiieul/replace-styled-imports-to->/components/ui
styled kit to dot notation
2 parents 21fbd13 + f9a8390 commit 5d6f4fb

File tree

87 files changed

+789
-788
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+789
-788
lines changed

‎apps/website/src/components/code-copy/code-copy.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { PropsOf, component$, useSignal } from '@builder.io/qwik';
2-
import { Button } from '@qwik-ui/styled';
2+
import { Button } from '~/components/ui';
33
import { cn } from '@qwik-ui/utils';
44
import copy from 'clipboard-copy';
55

‎apps/website/src/components/component-status-badge/component-status-badge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { component$ } from '@builder.io/qwik';
2-
import { Badge } from '@qwik-ui/styled';
2+
import { Badge } from '~/components/ui';
33
import { ComponentStatus } from '~/_state/component-status.type';
44

55
export interface StatusBadgeProps {

‎apps/website/src/components/copy-css-config/copy-css-config.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { component$, useSignal } from '@builder.io/qwik';
22
import { Modal } from '@qwik-ui/headless';
3-
import { Button } from '@qwik-ui/styled';
3+
import { Button } from '~/components/ui';
44
import { extractThemeCSS } from '@qwik-ui/utils';
55
import { LuX } from '@qwikest/icons/lucide';
66
import { useTheme } from 'qwik-themes';

‎apps/website/src/components/make-it-yours/make-it-yours.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
useStyles$,
88
} from '@builder.io/qwik';
99
import { Modal } from '@qwik-ui/headless';
10-
import { Button } from '@qwik-ui/styled';
10+
import { Button } from '~/components/ui';
1111
import {
1212
ThemeBaseColor,
1313
ThemeBorderRadius,
@@ -141,7 +141,7 @@ export default component$<PropsOf<typeof Button>>(() => {
141141
showSig.value = true;
142142
}}
143143
>
144-
<LuSlidersHorizontal class={cn('h-4 w-4 sm:mr-3')} />
144+
<LuSlidersHorizontal class={cn('h-4 w-4 sm:mr-2')} />
145145
<span class={cn('hidden', 'sm:block')}>Make it yours</span>
146146
</Button>
147147
<Modal.Panel class="make-it-yours fixed bottom-[50%] right-0 top-[50%] mr-0 h-screen max-w-sm rounded-l-base border-y border-l bg-background px-4 py-8 text-foreground shadow-md sm:w-full">

‎apps/website/src/components/status-banner/status-banner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
2-
import { Badge } from '@qwik-ui/styled';
2+
import { Badge } from '~/components/ui';
33
import { cn } from '@qwik-ui/utils';
44
import { ComponentStatus } from '~/_state/component-status.type';
55
import { getVariantByStatus } from '../component-status-badge/component-status-badge';

‎apps/website/src/components/ui/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from '@qwik-ui/styled';

‎apps/website/src/routes/docs/headless/introduction/index.mdx

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@ title: Qwik UI | Introduction
33
---
44

55
import headlessHero from '/public/images/qwik-ui-headless-hero.webp';
6-
import {
7-
AccordionRoot,
8-
AccordionItem,
9-
AccordionTrigger,
10-
AccordionContent,
11-
} from '@qwik-ui/styled';
6+
import { Accordion } from '@qwik-ui/styled';
127

138
# Headless kit
149

@@ -91,41 +86,41 @@ One of the benefits of Qwik is its ability to create performant applications wit
9186

9287
## FAQ
9388

94-
<AccordionRoot>
95-
<AccordionItem>
96-
<AccordionTrigger>
89+
<Accordion.Root>
90+
<Accordion.Item>
91+
<Accordion.Trigger>
9792
What kind of support or resources are available if I encounter issues with Qwik UI?
98-
</AccordionTrigger>
99-
<AccordionContent>
93+
</Accordion.Trigger>
94+
<Accordion.Content>
10095
If you stumble into any problems, [create an
10196
issue](https://github.com/qwikifiers/qwik-ui/issues) on the Qwik UI repository. We
10297
also have a [discord community](https://discord.gg/PVWUUejrez) with a Qwik UI
10398
channel where you can raise any concerns, propose ideas, or chat all things Qwik UI
10499
😊
105-
</AccordionContent>
106-
</AccordionItem>
107-
<AccordionItem>
108-
<AccordionTrigger>How can I contribute to the project?</AccordionTrigger>
109-
<AccordionContent>
100+
</Accordion.Content>
101+
</Accordion.Item>
102+
<Accordion.Item>
103+
<Accordion.Trigger>How can I contribute to the project?</Accordion.Trigger>
104+
<Accordion.Content>
110105
We provide a [contributing](/docs/headless/contributing) guide to help get familiar
111106
with the repository. Additionally, we offer a quick start [setup
112107
guide](https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md) and a
113108
section dedicated to advanced resources below the Components navigation.
114-
</AccordionContent>
115-
</AccordionItem>
116-
<AccordionItem>
117-
<AccordionTrigger>
109+
</Accordion.Content>
110+
</Accordion.Item>
111+
<Accordion.Item>
112+
<Accordion.Trigger>
118113
How can I migrate my existing application to use Qwik UI?
119-
</AccordionTrigger>
120-
<AccordionContent>
114+
</Accordion.Trigger>
115+
<Accordion.Content>
121116
If you're using `Qwik-React`, `Qwik-Angular`, `@qwikdev/astro`, we suggest
122117
incrementally adding Qwik UI components to your application. Qwik, built as a
123118
microfrontend, allows you to incrementally integrate Qwik UI components into your
124119
existing application. This approach reduces migration risk and complexity, letting
125120
you leverage Qwik UI's benefits at your own pace.
126-
</AccordionContent>
127-
</AccordionItem>
128-
</AccordionRoot>
121+
</Accordion.Content>
122+
</Accordion.Item>
123+
</Accordion.Root>
129124

130125
## Credits
131126

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

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
11
import { component$ } from '@builder.io/qwik';
2-
import {
3-
AccordionRoot,
4-
AccordionContent,
5-
AccordionItem,
6-
AccordionTrigger,
7-
} from '@qwik-ui/styled';
2+
import { Accordion } from '~/components/ui';
83

94
export default component$(() => {
105
return (
11-
<AccordionRoot behavior="single" collapsible class="w-full">
12-
<AccordionItem id="item-1">
13-
<AccordionTrigger>Is it accessible?</AccordionTrigger>
14-
<AccordionContent>
6+
<Accordion.Root behavior="single" collapsible class="w-full">
7+
<Accordion.Item id="item-1">
8+
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
9+
<Accordion.Content>
1510
Yes. It adheres to the WAI-ARIA design pattern.
16-
</AccordionContent>
17-
</AccordionItem>
18-
<AccordionItem id="item-2">
19-
<AccordionTrigger>Is it styled?</AccordionTrigger>
20-
<AccordionContent>
11+
</Accordion.Content>
12+
</Accordion.Item>
13+
<Accordion.Item id="item-2">
14+
<Accordion.Trigger>Is it styled?</Accordion.Trigger>
15+
<Accordion.Content>
2116
Yes. It comes with default styles that matches the other components&apos;
2217
aesthetic.
23-
</AccordionContent>
24-
</AccordionItem>
25-
<AccordionItem id="item-3">
26-
<AccordionTrigger>Is it animated?</AccordionTrigger>
27-
<AccordionContent>
18+
</Accordion.Content>
19+
</Accordion.Item>
20+
<Accordion.Item id="item-3">
21+
<Accordion.Trigger>Is it animated?</Accordion.Trigger>
22+
<Accordion.Content>
2823
Yes. It's animated by default, but you can disable it if you prefer.
29-
</AccordionContent>
30-
</AccordionItem>
31-
</AccordionRoot>
24+
</Accordion.Content>
25+
</Accordion.Item>
26+
</Accordion.Root>
3227
);
3328
});

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

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,33 +23,33 @@ qwik-ui add accordion
2323
```tsx
2424
import { component$, Slot, PropsOf } from '@builder.io/qwik';
2525

26-
import { Accordion } from '@qwik-ui/headless';
26+
import { Accordion as HeadlessAccordion } from '@qwik-ui/headless';
2727
import { cn } from '@qwik-ui/utils';
2828

2929
import { LuChevronDown } from '@qwikest/icons/lucide';
3030

31-
export const AccordionRoot = component$<PropsOf<typeof Accordion.Root>>((props) => (
32-
<Accordion.Root animated {...props}>
31+
const Root = component$<PropsOf<typeof HeadlessAccordion.Root>>((props) => (
32+
<HeadlessAccordion.Root animated {...props}>
3333
<Slot />
34-
</Accordion.Root>
34+
</HeadlessAccordion.Root>
3535
));
3636

37-
export const AccordionItem = component$<PropsOf<typeof Accordion.Item>>((props) => {
37+
const Item = component$<PropsOf<typeof HeadlessAccordion.Item>>((props) => {
3838
return (
39-
<Accordion.Item {...props} class={cn('border-b', props.class)}>
39+
<HeadlessAccordion.Item {...props} class={cn('border-b', props.class)}>
4040
<Slot />
41-
</Accordion.Item>
41+
</HeadlessAccordion.Item>
4242
);
4343
});
4444

45-
export const AccordionTrigger = component$<
46-
PropsOf<typeof Accordion.Trigger> & {
47-
header?: PropsOf<typeof Accordion.Header>['as'];
45+
const Trigger = component$<
46+
PropsOf<typeof HeadlessAccordion.Trigger> & {
47+
header?: PropsOf<typeof HeadlessAccordion.Header>['as'];
4848
}
4949
>(({ header = 'h3', ...props }) => {
5050
return (
51-
<Accordion.Header as={header} class="flex">
52-
<Accordion.Trigger
51+
<HeadlessAccordion.Header as={header} class="flex">
52+
<HeadlessAccordion.Trigger
5353
{...props}
5454
class={cn(
5555
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
@@ -58,14 +58,14 @@ export const AccordionTrigger = component$<
5858
>
5959
<Slot />
6060
<LuChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
61-
</Accordion.Trigger>
62-
</Accordion.Header>
61+
</HeadlessAccordion.Trigger>
62+
</HeadlessAccordion.Header>
6363
);
6464
});
6565

66-
export const AccordionContent = component$<PropsOf<typeof Accordion.Content>>((props) => {
66+
const Content = component$<PropsOf<typeof HeadlessAccordion.Content>>((props) => {
6767
return (
68-
<Accordion.Content
68+
<HeadlessAccordion.Content
6969
{...props}
7070
class={cn(
7171
'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
@@ -75,9 +75,16 @@ export const AccordionContent = component$<PropsOf<typeof Accordion.Content>>((p
7575
<div class="pb-4 pt-0">
7676
<Slot />
7777
</div>
78-
</Accordion.Content>
78+
</HeadlessAccordion.Content>
7979
);
8080
});
81+
82+
export const Accordion = {
83+
Root,
84+
Item,
85+
Trigger,
86+
Content,
87+
};
8188
```
8289

8390
### 2. Update your 'tailwind.config.cjs'
@@ -101,19 +108,14 @@ module.exports = {
101108
## Usage
102109

103110
```tsx
104-
import {
105-
Accordion,
106-
AccordionContent,
107-
AccordionItem,
108-
AccordionTrigger,
109-
} from '@/components/ui/accordion';
111+
import { Accordion } from '~/components/ui';
110112
```
111113

112114
```tsx
113-
<Accordion behavior="single" collapsible class="w-full">
114-
<AccordionItem id="item-1">
115-
<AccordionTrigger>Is it accessible?</AccordionTrigger>
116-
<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
117-
</AccordionItem>
118-
</Accordion>
115+
<Accordion.Root behavior="single" collapsible class="w-full">
116+
<Accordion.Item id="item-1">
117+
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
118+
<Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
119+
</Accordion.Item>
120+
</Accordion.Root>
119121
```

‎apps/website/src/routes/docs/styled/alert/examples/alert.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { component$ } from '@builder.io/qwik';
2-
import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
2+
import { Alert } from '~/components/ui';
33
import { LuAlertTriangle } from '@qwikest/icons/lucide';
44

55
export default component$(() => {
66
return (
7-
<Alert look="alert">
7+
<Alert.Root look="alert">
88
<LuAlertTriangle class="h-4 w-4" />
9-
<AlertTitle>Error</AlertTitle>
10-
<AlertDescription>Your session has expired. Please log in again.</AlertDescription>
11-
</Alert>
9+
<Alert.Title>Error</Alert.Title>
10+
<Alert.Description>
11+
Your session has expired. Please log in again.
12+
</Alert.Description>
13+
</Alert.Root>
1214
);
1315
});

0 commit comments

Comments
 (0)