Skip to content

Commit c018bb5

Browse files
tanerengiiintanerengiiin
committed
refactor(tailwind): general review
1 parent d68883d commit c018bb5

270 files changed

Lines changed: 3656 additions & 1199 deletions

File tree

Some content is hidden

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

‎apps/showcase/__store__/index.tsx‎

Lines changed: 238 additions & 8 deletions
Large diffs are not rendered by default.

‎apps/showcase/demo/styled/accordion/with-radiobutton-demo.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function WithRadioButtonDemo() {
3131

3232
return (
3333
<div>
34-
<div className="max-w-md mx-auto w-full">
34+
<div className="max-w-sm mx-auto w-full">
3535
<RadioButtonGroup
3636
className="w-full"
3737
value={selected}
@@ -46,7 +46,7 @@ export default function WithRadioButtonDemo() {
4646
<Accordion.Panel key={item.value} value={item.value} className="last:border-none">
4747
<Accordion.Header
4848
onClick={() => setSelected(item.value)}
49-
className="flex items-center justify-between bg-transparent px-4 py-3"
49+
className="cursor-pointer flex items-center justify-between px-4 py-3 data-closed:text-surface-500 hover:text-surface-900 dark:hover:text-surface-0 data-open:text-surface-900 dark:data-open:text-surface-0"
5050
>
5151
<span className="flex items-center gap-4">
5252
<RadioButton.Root inputId={`radio-${item.value}`} name="price" value={item.value}>
@@ -58,8 +58,8 @@ export default function WithRadioButtonDemo() {
5858
</span>
5959
<span className="font-semibold text-base">{item.price}</span>
6060
</Accordion.Header>
61-
<Accordion.Content className="bg-transparent px-4 leading-6 pl-12.5" pt-inner="bg-transparent">
62-
<p className="text-sm">{item.description}</p>
61+
<Accordion.Content className="p-0!">
62+
<p className="text-surface-500 pl-8.5 pr-2">{item.description}</p>
6363
</Accordion.Content>
6464
</Accordion.Panel>
6565
))}

‎apps/showcase/demo/styled/avatar/size-demo.tsx‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
import { Avatar } from '@primereact/ui/avatar';
22

3-
const SizeDemo = () => {
3+
export default function SizeDemo() {
44
return (
5-
<div className="flex items-center justify-center gap-4">
6-
<Avatar.Root shape="circle" size="normal">
7-
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
8-
<Avatar.Fallback>CC</Avatar.Fallback>
9-
</Avatar.Root>
10-
<Avatar.Root shape="circle" size="large">
11-
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
12-
<Avatar.Fallback>CC</Avatar.Fallback>
13-
</Avatar.Root>
14-
<Avatar.Root shape="circle" size="xlarge">
15-
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
16-
<Avatar.Fallback>CC</Avatar.Fallback>
17-
</Avatar.Root>
5+
<div className="flex flex-col items-center gap-4">
6+
<div className="flex items-center justify-center gap-4">
7+
<Avatar.Root shape="circle" size="normal">
8+
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
9+
<Avatar.Fallback>AB</Avatar.Fallback>
10+
</Avatar.Root>
11+
<Avatar.Root shape="circle" size="large">
12+
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
13+
<Avatar.Fallback>AB</Avatar.Fallback>
14+
</Avatar.Root>
15+
<Avatar.Root shape="circle" size="xlarge">
16+
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
17+
<Avatar.Fallback>AB</Avatar.Fallback>
18+
</Avatar.Root>
19+
</div>
20+
<div className="flex items-center justify-center gap-4">
21+
<Avatar.Root shape="circle" size="normal">
22+
<Avatar.Fallback>AB</Avatar.Fallback>
23+
</Avatar.Root>
24+
<Avatar.Root shape="circle" size="large">
25+
<Avatar.Fallback>AB</Avatar.Fallback>
26+
</Avatar.Root>
27+
<Avatar.Root shape="circle" size="xlarge">
28+
<Avatar.Fallback>AB</Avatar.Fallback>
29+
</Avatar.Root>
30+
</div>
1831
</div>
1932
);
20-
};
21-
22-
export default SizeDemo;
33+
}

‎apps/showcase/demo/tailwind/accordion/controlled-demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22
import { Accordion, AccordionContent, AccordionPanel, AccordionTrigger } from '@/components/ui/accordion';
33
import { Button } from '@/components/ui/button';
4-
import type { AccordionRootValueChangeEvent } from '@primereact/ui/accordion';
4+
import type { AccordionRootValueChangeEvent } from 'primereact/accordion';
55
import { useState } from 'react';
66

77
export default function ControlledDemo() {

‎apps/showcase/demo/tailwind/accordion/preview.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Accordion, AccordionContent, AccordionPanel, AccordionTrigger } from '@/components/ui/accordion';
2+
3+
export default function Preview() {
4+
return (
5+
<Accordion className="max-w-md mx-auto">
6+
<AccordionPanel value="1">
7+
<AccordionTrigger>What is this service about?</AccordionTrigger>
8+
<AccordionContent>
9+
<p>
10+
This service helps you manage your projects more efficiently by offering real-time collaboration, task tracking, and powerful
11+
analytics.
12+
</p>
13+
</AccordionContent>
14+
</AccordionPanel>
15+
<AccordionPanel value="2">
16+
<AccordionTrigger>Is my data secure?</AccordionTrigger>
17+
<AccordionContent>
18+
<p>
19+
Yes. We use end-to-end encryption and follow industry best practices to ensure your data is protected. Your information is
20+
stored on secure servers and regularly backed up.
21+
</p>
22+
</AccordionContent>
23+
</AccordionPanel>
24+
<AccordionPanel value="3">
25+
<AccordionTrigger>Can I upgrade or downgrade my plan later?</AccordionTrigger>
26+
<AccordionContent>
27+
<p>
28+
Absolutely. You can change your subscription plan at any time from your account settings. Changes take effect immediately, and
29+
any billing adjustments are handled automatically.
30+
</p>
31+
</AccordionContent>
32+
</AccordionPanel>
33+
</Accordion>
34+
);
35+
}

‎apps/showcase/demo/tailwind/accordion/with-radiobutton-demo.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { Accordion, AccordionContent, AccordionPanel, AccordionTrigger } from '@/components/ui/accordion';
33
import { Button } from '@/components/ui/button';
44
import { RadioButton, RadioButtonGroup } from '@/components/ui/radiobutton';
5-
import type { AccordionRootValueChangeEvent } from '@primereact/ui/accordion';
6-
import type { RadioButtonGroupValueChangeEvent } from '@primereact/ui/radiobuttongroup';
5+
import type { AccordionRootValueChangeEvent } from 'primereact/accordion';
6+
import type { RadioButtonGroupValueChangeEvent } from 'primereact/radiobuttongroup';
77
import * as React from 'react';
88

99
const items = [
@@ -32,28 +32,27 @@ export default function WithRadioButtonDemo() {
3232

3333
return (
3434
<div>
35-
<div className="max-w-md mx-auto w-full">
36-
<RadioButtonGroup
37-
className="w-full"
38-
value={selected}
39-
onValueChange={(e: RadioButtonGroupValueChangeEvent) => setSelected(e.value as string)}
40-
>
35+
<div className="max-w-sm mx-auto w-full">
36+
<RadioButtonGroup value={selected} onValueChange={(e: RadioButtonGroupValueChangeEvent) => setSelected(e.value as string)}>
4137
<Accordion
4238
value={selected}
4339
onValueChange={(e: AccordionRootValueChangeEvent) => setSelected(e.value as string)}
44-
className="w-full border border-surface-200 dark:border-surface-700 rounded-md divide-y divide-surface-200 dark:divide-surface-700"
40+
className="border border-surface-200 dark:border-surface-700 rounded-md divide-y divide-surface-200 dark:divide-surface-700 overflow-hidden"
4541
>
4642
{items.map((item) => (
47-
<AccordionPanel key={item.value} value={item.value} className="last:border-none">
48-
<AccordionTrigger onClick={() => setSelected(item.value)} className="px-4 py-3">
43+
<AccordionPanel key={item.value} value={item.value} className="last:border-none bg-none">
44+
<AccordionTrigger
45+
onClick={() => setSelected(item.value)}
46+
className="cursor-pointer flex items-center justify-between w-full px-4 py-3 data-closed:text-surface-500 hover:text-surface-900 dark:hover:text-surface-0 data-open:text-surface-900 dark:data-open:text-surface-0 **:data-[scope=accordionindicator]:hidden"
47+
>
4948
<span className="flex items-center gap-4">
50-
<RadioButton inputId={`radio-${item.value}`} name="price" value={item.value} />
49+
<RadioButton inputId={`tw-radio-${item.value}`} name="tw-price" value={item.value} />
5150
<span className="font-semibold text-base">{item.label}</span>
5251
</span>
5352
<span className="font-semibold text-base">{item.price}</span>
5453
</AccordionTrigger>
55-
<AccordionContent className="bg-transparent px-4 leading-6 pl-12.5" pt-inner="bg-transparent">
56-
<p>{item.description}</p>
54+
<AccordionContent className="p-0!">
55+
<p className="text-surface-500 text-base pr-2 pl-8.5">{item.description}</p>
5756
</AccordionContent>
5857
</AccordionPanel>
5958
))}

‎apps/showcase/demo/tailwind/autocomplete/chip-demo.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
'use client';
2-
import { Times } from '@primeicons/react/times';
3-
import { AutoComplete, AutoCompleteEmpty, AutoCompleteInput, AutoCompleteList, AutoCompletePopup, AutoCompletePortal, AutoCompletePositioner, AutoCompleteTrigger } from '@/components/ui/autocomplete';
4-
import type { AutoCompleteCompleteEvent, AutoCompleteInputValueChangeEvent, AutoCompleteRootInstance, AutoCompleteValueChangeEvent } from 'primereact/autocomplete';
2+
import {
3+
AutoComplete,
4+
AutoCompleteEmpty,
5+
AutoCompleteInput,
6+
AutoCompleteList,
7+
AutoCompletePopup,
8+
AutoCompletePortal,
9+
AutoCompletePositioner,
10+
AutoCompleteTrigger
11+
} from '@/components/ui/autocomplete';
512
import { Chip, ChipLabel, ChipRemove } from '@/components/ui/chip';
13+
import { Times } from '@primeicons/react';
14+
import {
15+
AutoCompleteValue,
16+
type AutoCompleteCompleteEvent,
17+
type AutoCompleteInputValueChangeEvent,
18+
type AutoCompleteRootInstance,
19+
type AutoCompleteValueChangeEvent
20+
} from 'primereact/autocomplete';
621
import type { ChipRootRemoveEvent } from 'primereact/chip';
7-
import { AutoCompleteValue } from '@primereact/ui/autocomplete';
822
import * as React from 'react';
923

1024
const allTags = [

‎apps/showcase/demo/tailwind/autocomplete/clear-icon-demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client';
2-
import { Times } from '@primeicons/react/times';
2+
import { Times } from '@primeicons/react';
33
import { AutoComplete, AutoCompleteClear, AutoCompleteEmpty, AutoCompleteInput, AutoCompleteList, AutoCompleteOption, AutoCompletePopup, AutoCompletePortal, AutoCompletePositioner } from '@/components/ui/autocomplete';
44
import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
55
import { IconField, IconFieldInset } from '@/components/ui/iconfield';

‎apps/showcase/demo/tailwind/autocomplete/loading-demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client';
2-
import { Spinner } from '@primeicons/react/spinner';
2+
import { Spinner } from '@primeicons/react';
33
import { AutoComplete, AutoCompleteInput, AutoCompleteList, AutoCompletePopup, AutoCompletePortal, AutoCompletePositioner } from '@/components/ui/autocomplete';
44
import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
55
import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';

‎apps/showcase/demo/tailwind/autocomplete/trigger-demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client';
2-
import { ChevronDown } from '@primeicons/react/chevron-down';
2+
import { ChevronDown } from '@primeicons/react';
33
import { AutoComplete, AutoCompleteInput, AutoCompleteList, AutoCompletePopup, AutoCompletePortal, AutoCompletePositioner, AutoCompleteTrigger } from '@/components/ui/autocomplete';
44
import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
55
import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';

0 commit comments

Comments
 (0)