Skip to content

Commit a6e33e5

Browse files
mertsincanmertsincan
committed
refactor: rename ColorPicker with InputColor and update datepicker
1 parent bb56b34 commit a6e33e5

201 files changed

Lines changed: 3445 additions & 2716 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: 178 additions & 44 deletions
Large diffs are not rendered by default.

‎apps/showcase/app/(app)/(landing)/components/cards/design-tool.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22
import { Expand, Eye, Replay } from '@primeicons/react';
3-
import { parseColor } from '@primereact/headless/colorpicker';
4-
import { ColorPicker, type ColorPickerRootChangeEvent } from '@primereact/ui/colorpicker';
3+
import { parseColor } from '@primereact/headless/inputcolor';
4+
import { InputColor, type InputColorRootChangeEvent } from '@primereact/ui/inputcolor';
55
import { IconField } from '@primereact/ui/iconfield';
66
import { InputNumber, type InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
77
import { Popover } from '@primereact/ui/popover';
@@ -113,39 +113,39 @@ export function DesignToolCard({ className, ...props }: React.ComponentProps<'di
113113
</div>
114114

115115
{/* Fill Color */}
116-
<ColorPicker.Root format="hsba" value={color} onValueChange={(e: ColorPickerRootChangeEvent) => setColor(e.value)}>
116+
<InputColor.Root format="hsba" value={color} onValueChange={(e: InputColorRootChangeEvent) => setColor(e.value)}>
117117
<div className="text-xs font-medium text-muted-color">Fill</div>
118118
<div className="flex items-center gap-2">
119119
<Popover.Root>
120120
<Popover.Trigger>
121-
<ColorPicker.Swatch className="w-8! h-8! rounded-lg shrink-0 cursor-pointer">
122-
<ColorPicker.SwatchBackground />
123-
</ColorPicker.Swatch>
121+
<InputColor.Swatch className="w-8! h-8! rounded-lg shrink-0 cursor-pointer">
122+
<InputColor.SwatchBackground />
123+
</InputColor.Swatch>
124124
</Popover.Trigger>
125125
<Popover.Portal>
126126
<Popover.Positioner sideOffset={8} side="bottom" align="start">
127127
<Popover.Popup className="w-64 p-3 space-y-3">
128128
<Popover.Arrow />
129-
<ColorPicker.Area>
130-
<ColorPicker.AreaBackground />
131-
<ColorPicker.AreaThumb />
132-
</ColorPicker.Area>
133-
<ColorPicker.Slider>
134-
<ColorPicker.SliderTrack />
135-
<ColorPicker.SliderThumb />
136-
</ColorPicker.Slider>
137-
<ColorPicker.Slider channel="alpha">
138-
<ColorPicker.TransparencyGrid />
139-
<ColorPicker.SliderTrack />
140-
<ColorPicker.SliderThumb />
141-
</ColorPicker.Slider>
129+
<InputColor.Area>
130+
<InputColor.AreaBackground />
131+
<InputColor.AreaThumb />
132+
</InputColor.Area>
133+
<InputColor.Slider>
134+
<InputColor.SliderTrack />
135+
<InputColor.SliderThumb />
136+
</InputColor.Slider>
137+
<InputColor.Slider channel="alpha">
138+
<InputColor.TransparencyGrid />
139+
<InputColor.SliderTrack />
140+
<InputColor.SliderThumb />
141+
</InputColor.Slider>
142142
</Popover.Popup>
143143
</Popover.Positioner>
144144
</Popover.Portal>
145145
</Popover.Root>
146-
<ColorPicker.Input channel="hex" className="flex-1" />
146+
<InputColor.Input channel="hex" className="flex-1" />
147147
</div>
148-
</ColorPicker.Root>
148+
</InputColor.Root>
149149

150150
{/* Dimensions */}
151151
<div>

‎apps/showcase/app/(app)/(landing)/components/demos/component-cloud.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const rows = [
55
['ConfirmPopup', 'Dock', 'PanelMenu', 'InputGroup', 'ToggleButton', 'FloatLabel', 'MultiStateCheckbox', 'CascadeSelect', 'Mention'],
66
['Galleria', 'TreeSelect', 'InputMask', 'DataTable', 'ConfirmDialog', 'Select', 'MegaMenu', 'Knob', 'OrganizationChart'],
77
['Terminal', 'Button', 'InputText', 'Calendar', 'Tabs', 'Menu', 'SpeedDial', 'Editor', 'Carousel', 'ToggleSwitch'],
8-
['InputOtp', 'Checkbox', 'Chart', 'TreeTable', 'Slider', 'Accordion', 'Skeleton', 'VirtualScroller', 'ColorPicker'],
8+
['InputOtp', 'Checkbox', 'Chart', 'TreeTable', 'Slider', 'Accordion', 'Skeleton', 'VirtualScroller', 'InputColor'],
99
['OverlayBadge', 'AutoComplete', 'FileUpload', 'Stepper', 'Tooltip', 'OrderList', 'PickList', 'ContextMenu', 'ScrollPanel'],
1010
['Paginator', 'Dialog', 'Splitter', 'Drawer', 'Listbox', 'Timeline', 'ProgressBar', 'Image', 'InputGroup'],
1111
['RadioButton', 'DatePicker', 'Popover', 'Tag', 'Toast', 'MultiSelect', 'Password', 'Fieldset', 'DeferredContent'],

‎apps/showcase/app/(app)/(landing)/components/demos/composable-stack.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22
import { themes } from '@/shared/utils/highlight-code';
3-
import { codeToHtml } from 'shiki';
43
import { useEffect, useRef, useState } from 'react';
4+
import { codeToHtml } from 'shiki';
55

66
async function highlightOnce(code: string, ranges: typeof sectionRanges) {
77
let lineNum = 0;
@@ -61,9 +61,13 @@ import { Select } from 'primereact/select';
6161
<Select.Value placeholder="Select a City" />
6262
<Select.Indicator />
6363
</Select.Trigger>
64-
<Select.Popup>
65-
<Select.List />
66-
</Select.Popup>
64+
<Select.Portal>
65+
<Select.Positioner>
66+
<Select.Popup>
67+
<Select.List />
68+
</Select.Popup>
69+
</Select.Positioner>
70+
</Select.Portal>
6771
</Select.Root>`
6872
},
6973
{
@@ -74,13 +78,17 @@ import { Select } from 'primereact/select';
7478
import { Select } from 'primereact/select';
7579
7680
<Select.Root options={cities} optionLabel="name">
77-
<Select.Trigger className="px-3 py-2 rounded-lg border">
81+
<Select.Trigger className="py-2 rounded-lg border">
7882
<Select.Value placeholder="Select a City" />
7983
<Select.Indicator className="text-surface-400" />
8084
</Select.Trigger>
81-
<Select.Popup className="rounded-lg shadow-lg mt-1">
82-
<Select.List />
83-
</Select.Popup>
85+
<Select.Portal>
86+
<Select.Positioner>
87+
<Select.Popup className="rounded-lg shadow-lg">
88+
<Select.List />
89+
</Select.Popup>
90+
</Select.Positioner>
91+
</Select.Portal>
8492
</Select.Root>`
8593
},
8694
{
@@ -163,7 +171,7 @@ export function ComposableStack() {
163171

164172
return (
165173
<div className="flex flex-col flex-1 min-h-0">
166-
<div className="flex items-center gap-1 mb-3 p-1 rounded-xl bg-surface-200/50 dark:bg-surface-800/75 w-fit">
174+
<div className="flex items-center gap-1 mb-2 p-1 rounded-xl bg-surface-200/50 dark:bg-surface-800/75 w-fit">
167175
{layers.map((l) => (
168176
<button
169177
key={l.id}
@@ -182,7 +190,7 @@ export function ComposableStack() {
182190
[data-ready] [data-line] { opacity: 0.3; transition: opacity 200ms ease-in-out; }
183191
${layers.map((l) => `[data-active="${l.id}"] [data-s-${l.id}] { opacity: 1; }`).join('\n ')}
184192
`}</style>
185-
<div className="flex-1 min-h-0 overflow-hidden rounded-xl" data-rehype-pretty-code-figure="">
193+
<div className="flex-1 min-h-0 overflow-hidden rounded-xl m-0!" data-rehype-pretty-code-figure="">
186194
<div ref={wrapperRef} className="relative will-change-transform translate-y-(--stack-offset,0px)">
187195
<div dangerouslySetInnerHTML={{ __html: html }} />
188196
</div>

‎apps/showcase/assets/menu/submenu/menu-styled.data.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ export const styledMenu = [
4747
href: '/docs/styled/components/checkboxgroup'
4848
},
4949
{
50-
name: 'ColorPicker',
51-
href: '/docs/styled/components/colorpicker'
50+
name: 'InputColor',
51+
href: '/docs/styled/components/inputcolor'
5252
},
5353
{
5454
name: 'DatePicker',
@@ -152,6 +152,10 @@ export const styledMenu = [
152152
{
153153
name: 'Data',
154154
children: [
155+
{
156+
name: 'DataTable',
157+
href: '/docs/styled/components/datatable'
158+
},
155159
{
156160
name: 'DataView',
157161
href: '/docs/styled/components/dataview'

‎apps/showcase/assets/menu/submenu/menu-tailwind.data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export const tailwindMenu = [
2525
href: '/docs/tailwind/components/checkboxgroup'
2626
},
2727
{
28-
name: 'ColorPicker',
29-
href: '/docs/tailwind/components/colorpicker'
28+
name: 'InputColor',
29+
href: '/docs/tailwind/components/inputcolor'
3030
},
3131
{
3232
name: 'InputOtp',

‎apps/showcase/demo/styled/colorpicker/controlled-demo.tsx‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎apps/showcase/demo/styled/colorpicker/popover-demo.tsx‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎apps/showcase/demo/styled/colorpicker/vertical-slider-demo.tsx‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎apps/showcase/demo/styled/datepicker/arrow-demo.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use client';
2+
import { ChevronLeft } from '@primeicons/react/chevron-left';
3+
import { ChevronRight } from '@primeicons/react/chevron-right';
4+
import { Button } from '@primereact/ui/button';
5+
import { DatePicker, type DatePickerRootProps, type DatePickerRootValueChangeEvent } from '@primereact/ui/datepicker';
6+
import * as React from 'react';
7+
8+
export default function ArrowDemo() {
9+
const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);
10+
11+
return (
12+
<div className="flex justify-center">
13+
<DatePicker.Root value={date} onValueChange={(event: DatePickerRootValueChangeEvent) => setDate(event.value)} className="w-full md:w-56">
14+
<DatePicker.Input className="w-full" />
15+
<DatePicker.Portal>
16+
<DatePicker.Positioner sideOffset={12}>
17+
<DatePicker.Popup>
18+
<DatePicker.Arrow />
19+
<DatePicker.Calendar>
20+
<DatePicker.Header>
21+
<DatePicker.Prev as={Button} iconOnly variant="text" rounded severity="secondary">
22+
<ChevronLeft />
23+
</DatePicker.Prev>
24+
<DatePicker.Title>
25+
<DatePicker.SelectMonth />
26+
<DatePicker.SelectYear />
27+
<DatePicker.Decade />
28+
</DatePicker.Title>
29+
<DatePicker.Next as={Button} iconOnly variant="text" rounded severity="secondary">
30+
<ChevronRight />
31+
</DatePicker.Next>
32+
</DatePicker.Header>
33+
<DatePicker.Table>
34+
<DatePicker.TableHead />
35+
<DatePicker.TableBody />
36+
<DatePicker.TableBody view="month" />
37+
<DatePicker.TableBody view="year" />
38+
</DatePicker.Table>
39+
</DatePicker.Calendar>
40+
</DatePicker.Popup>
41+
</DatePicker.Positioner>
42+
</DatePicker.Portal>
43+
</DatePicker.Root>
44+
</div>
45+
);
46+
}

0 commit comments

Comments
 (0)