@salesforce/webapp-template-feature-react-authentication-experimental 1.102.1 → 1.103.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CHANGELOG.md +16 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/package.json +2 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/badge.tsx +48 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/breadcrumb.tsx +109 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/calendar.tsx +232 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/checkbox.tsx +32 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/collapsible.tsx +33 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/datePicker.tsx +127 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/popover.tsx +89 -0
- package/dist/force-app/main/default/webapplications/feature-react-authentication/tsconfig.tsbuildinfo +1 -1
- package/dist/package.json +1 -1
- package/package.json +2 -2
- /package/dist/force-app/main/default/webapplications/feature-react-authentication/{src/components.json → components.json} +0 -0
package/dist/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.103.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.103.0...v1.103.1) (2026-03-16)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [1.103.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.102.1...v1.103.0) (2026-03-16)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [1.102.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.102.0...v1.102.1) (2026-03-16)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
package/dist/force-app/main/default/webapplications/feature-react-authentication/package.json
CHANGED
|
@@ -27,9 +27,11 @@
|
|
|
27
27
|
"@tanstack/react-form": "^1.28.5",
|
|
28
28
|
"class-variance-authority": "^0.7.1",
|
|
29
29
|
"clsx": "^2.1.1",
|
|
30
|
+
"date-fns": "^4.1.0",
|
|
30
31
|
"lucide-react": "^0.562.0",
|
|
31
32
|
"radix-ui": "^1.4.3",
|
|
32
33
|
"react": "^19.2.0",
|
|
34
|
+
"react-day-picker": "^9.14.0",
|
|
33
35
|
"react-dom": "^19.2.0",
|
|
34
36
|
"react-router": "^7.10.1",
|
|
35
37
|
"shadcn": "^3.8.5",
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { Slot } from 'radix-ui';
|
|
4
|
+
|
|
5
|
+
import { cn } from '@/lib/utils';
|
|
6
|
+
|
|
7
|
+
const badgeVariants = cva(
|
|
8
|
+
'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
|
|
13
|
+
secondary:
|
|
14
|
+
'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
|
|
15
|
+
destructive:
|
|
16
|
+
'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
|
|
17
|
+
outline:
|
|
18
|
+
'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
|
|
19
|
+
ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
|
|
20
|
+
link: 'text-primary underline-offset-4 [a&]:hover:underline',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
defaultVariants: {
|
|
24
|
+
variant: 'default',
|
|
25
|
+
},
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
function Badge({
|
|
30
|
+
className,
|
|
31
|
+
variant = 'default',
|
|
32
|
+
asChild = false,
|
|
33
|
+
...props
|
|
34
|
+
}: React.ComponentProps<'span'> &
|
|
35
|
+
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
|
36
|
+
const Comp = asChild ? Slot.Root : 'span';
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<Comp
|
|
40
|
+
data-slot="badge"
|
|
41
|
+
data-variant={variant}
|
|
42
|
+
className={cn(badgeVariants({ variant }), className)}
|
|
43
|
+
{...props}
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ChevronRight, MoreHorizontal } from 'lucide-react';
|
|
3
|
+
import { Slot } from 'radix-ui';
|
|
4
|
+
|
|
5
|
+
import { cn } from '@/lib/utils';
|
|
6
|
+
|
|
7
|
+
function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
|
|
8
|
+
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
|
|
12
|
+
return (
|
|
13
|
+
<ol
|
|
14
|
+
data-slot="breadcrumb-list"
|
|
15
|
+
className={cn(
|
|
16
|
+
'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5',
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
|
|
25
|
+
return (
|
|
26
|
+
<li
|
|
27
|
+
data-slot="breadcrumb-item"
|
|
28
|
+
className={cn('inline-flex items-center gap-1.5', className)}
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function BreadcrumbLink({
|
|
35
|
+
asChild,
|
|
36
|
+
className,
|
|
37
|
+
...props
|
|
38
|
+
}: React.ComponentProps<'a'> & {
|
|
39
|
+
asChild?: boolean;
|
|
40
|
+
}) {
|
|
41
|
+
const Comp = asChild ? Slot.Root : 'a';
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<Comp
|
|
45
|
+
data-slot="breadcrumb-link"
|
|
46
|
+
className={cn('transition-colors hover:text-foreground', className)}
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
|
|
53
|
+
return (
|
|
54
|
+
<span
|
|
55
|
+
data-slot="breadcrumb-page"
|
|
56
|
+
role="link"
|
|
57
|
+
aria-disabled="true"
|
|
58
|
+
aria-current="page"
|
|
59
|
+
className={cn('font-normal text-foreground', className)}
|
|
60
|
+
{...props}
|
|
61
|
+
/>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function BreadcrumbSeparator({
|
|
66
|
+
children,
|
|
67
|
+
className,
|
|
68
|
+
...props
|
|
69
|
+
}: React.ComponentProps<'li'>) {
|
|
70
|
+
return (
|
|
71
|
+
<li
|
|
72
|
+
data-slot="breadcrumb-separator"
|
|
73
|
+
role="presentation"
|
|
74
|
+
aria-hidden="true"
|
|
75
|
+
className={cn('[&>svg]:size-3.5', className)}
|
|
76
|
+
{...props}
|
|
77
|
+
>
|
|
78
|
+
{children ?? <ChevronRight />}
|
|
79
|
+
</li>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function BreadcrumbEllipsis({
|
|
84
|
+
className,
|
|
85
|
+
...props
|
|
86
|
+
}: React.ComponentProps<'span'>) {
|
|
87
|
+
return (
|
|
88
|
+
<span
|
|
89
|
+
data-slot="breadcrumb-ellipsis"
|
|
90
|
+
role="presentation"
|
|
91
|
+
aria-hidden="true"
|
|
92
|
+
className={cn('flex size-9 items-center justify-center', className)}
|
|
93
|
+
{...props}
|
|
94
|
+
>
|
|
95
|
+
<MoreHorizontal className="size-4" />
|
|
96
|
+
<span className="sr-only">More</span>
|
|
97
|
+
</span>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export {
|
|
102
|
+
Breadcrumb,
|
|
103
|
+
BreadcrumbList,
|
|
104
|
+
BreadcrumbItem,
|
|
105
|
+
BreadcrumbLink,
|
|
106
|
+
BreadcrumbPage,
|
|
107
|
+
BreadcrumbSeparator,
|
|
108
|
+
BreadcrumbEllipsis,
|
|
109
|
+
};
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import {
|
|
5
|
+
DayPicker,
|
|
6
|
+
getDefaultClassNames,
|
|
7
|
+
type DayButton,
|
|
8
|
+
type Locale,
|
|
9
|
+
} from 'react-day-picker';
|
|
10
|
+
|
|
11
|
+
import { cn } from '@/lib/utils';
|
|
12
|
+
import { Button, buttonVariants } from '@/components/ui/button';
|
|
13
|
+
import {
|
|
14
|
+
ChevronLeftIcon,
|
|
15
|
+
ChevronRightIcon,
|
|
16
|
+
ChevronDownIcon,
|
|
17
|
+
} from 'lucide-react';
|
|
18
|
+
|
|
19
|
+
function Calendar({
|
|
20
|
+
className,
|
|
21
|
+
classNames,
|
|
22
|
+
showOutsideDays = true,
|
|
23
|
+
captionLayout = 'label',
|
|
24
|
+
buttonVariant = 'ghost',
|
|
25
|
+
locale,
|
|
26
|
+
formatters,
|
|
27
|
+
components,
|
|
28
|
+
...props
|
|
29
|
+
}: React.ComponentProps<typeof DayPicker> & {
|
|
30
|
+
buttonVariant?: React.ComponentProps<typeof Button>['variant'];
|
|
31
|
+
}) {
|
|
32
|
+
const defaultClassNames = getDefaultClassNames();
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<DayPicker
|
|
36
|
+
showOutsideDays={showOutsideDays}
|
|
37
|
+
className={cn(
|
|
38
|
+
'p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
|
|
39
|
+
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
|
40
|
+
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
|
41
|
+
className
|
|
42
|
+
)}
|
|
43
|
+
captionLayout={captionLayout}
|
|
44
|
+
locale={locale}
|
|
45
|
+
formatters={{
|
|
46
|
+
formatMonthDropdown: date =>
|
|
47
|
+
date.toLocaleString(locale?.code, { month: 'short' }),
|
|
48
|
+
...formatters,
|
|
49
|
+
}}
|
|
50
|
+
classNames={{
|
|
51
|
+
root: cn('w-fit', defaultClassNames.root),
|
|
52
|
+
months: cn(
|
|
53
|
+
'relative flex flex-col gap-4 md:flex-row',
|
|
54
|
+
defaultClassNames.months
|
|
55
|
+
),
|
|
56
|
+
month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
|
|
57
|
+
nav: cn(
|
|
58
|
+
'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
|
|
59
|
+
defaultClassNames.nav
|
|
60
|
+
),
|
|
61
|
+
button_previous: cn(
|
|
62
|
+
buttonVariants({ variant: buttonVariant }),
|
|
63
|
+
'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
|
|
64
|
+
defaultClassNames.button_previous
|
|
65
|
+
),
|
|
66
|
+
button_next: cn(
|
|
67
|
+
buttonVariants({ variant: buttonVariant }),
|
|
68
|
+
'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
|
|
69
|
+
defaultClassNames.button_next
|
|
70
|
+
),
|
|
71
|
+
month_caption: cn(
|
|
72
|
+
'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
|
|
73
|
+
defaultClassNames.month_caption
|
|
74
|
+
),
|
|
75
|
+
dropdowns: cn(
|
|
76
|
+
'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
|
|
77
|
+
defaultClassNames.dropdowns
|
|
78
|
+
),
|
|
79
|
+
dropdown_root: cn(
|
|
80
|
+
'cn-calendar-dropdown-root relative rounded-(--cell-radius)',
|
|
81
|
+
defaultClassNames.dropdown_root
|
|
82
|
+
),
|
|
83
|
+
dropdown: cn(
|
|
84
|
+
'absolute inset-0 bg-popover opacity-0',
|
|
85
|
+
defaultClassNames.dropdown
|
|
86
|
+
),
|
|
87
|
+
caption_label: cn(
|
|
88
|
+
'font-medium select-none',
|
|
89
|
+
captionLayout === 'label'
|
|
90
|
+
? 'text-sm'
|
|
91
|
+
: 'cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
|
|
92
|
+
defaultClassNames.caption_label
|
|
93
|
+
),
|
|
94
|
+
table: 'w-full border-collapse',
|
|
95
|
+
weekdays: cn('flex', defaultClassNames.weekdays),
|
|
96
|
+
weekday: cn(
|
|
97
|
+
'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
|
|
98
|
+
defaultClassNames.weekday
|
|
99
|
+
),
|
|
100
|
+
week: cn('mt-2 flex w-full', defaultClassNames.week),
|
|
101
|
+
week_number_header: cn(
|
|
102
|
+
'w-(--cell-size) select-none',
|
|
103
|
+
defaultClassNames.week_number_header
|
|
104
|
+
),
|
|
105
|
+
week_number: cn(
|
|
106
|
+
'text-[0.8rem] text-muted-foreground select-none',
|
|
107
|
+
defaultClassNames.week_number
|
|
108
|
+
),
|
|
109
|
+
day: cn(
|
|
110
|
+
'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
|
|
111
|
+
props.showWeekNumber
|
|
112
|
+
? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
|
|
113
|
+
: '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
|
|
114
|
+
defaultClassNames.day
|
|
115
|
+
),
|
|
116
|
+
range_start: cn(
|
|
117
|
+
'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
|
|
118
|
+
defaultClassNames.range_start
|
|
119
|
+
),
|
|
120
|
+
range_middle: cn('rounded-none', defaultClassNames.range_middle),
|
|
121
|
+
range_end: cn(
|
|
122
|
+
'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
|
|
123
|
+
defaultClassNames.range_end
|
|
124
|
+
),
|
|
125
|
+
today: cn(
|
|
126
|
+
'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',
|
|
127
|
+
defaultClassNames.today
|
|
128
|
+
),
|
|
129
|
+
outside: cn(
|
|
130
|
+
'text-muted-foreground aria-selected:text-muted-foreground',
|
|
131
|
+
defaultClassNames.outside
|
|
132
|
+
),
|
|
133
|
+
disabled: cn(
|
|
134
|
+
'text-muted-foreground opacity-50',
|
|
135
|
+
defaultClassNames.disabled
|
|
136
|
+
),
|
|
137
|
+
hidden: cn('invisible', defaultClassNames.hidden),
|
|
138
|
+
...classNames,
|
|
139
|
+
}}
|
|
140
|
+
components={{
|
|
141
|
+
Root: ({ className, rootRef, ...props }) => {
|
|
142
|
+
return (
|
|
143
|
+
<div
|
|
144
|
+
data-slot="calendar"
|
|
145
|
+
ref={rootRef}
|
|
146
|
+
className={cn(className)}
|
|
147
|
+
{...props}
|
|
148
|
+
/>
|
|
149
|
+
);
|
|
150
|
+
},
|
|
151
|
+
Chevron: ({ className, orientation, ...props }) => {
|
|
152
|
+
if (orientation === 'left') {
|
|
153
|
+
return (
|
|
154
|
+
<ChevronLeftIcon
|
|
155
|
+
className={cn('cn-rtl-flip size-4', className)}
|
|
156
|
+
{...props}
|
|
157
|
+
/>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
if (orientation === 'right') {
|
|
162
|
+
return (
|
|
163
|
+
<ChevronRightIcon
|
|
164
|
+
className={cn('cn-rtl-flip size-4', className)}
|
|
165
|
+
{...props}
|
|
166
|
+
/>
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<ChevronDownIcon className={cn('size-4', className)} {...props} />
|
|
172
|
+
);
|
|
173
|
+
},
|
|
174
|
+
DayButton: ({ ...props }) => (
|
|
175
|
+
<CalendarDayButton locale={locale} {...props} />
|
|
176
|
+
),
|
|
177
|
+
WeekNumber: ({ children, ...props }) => {
|
|
178
|
+
return (
|
|
179
|
+
<td {...props}>
|
|
180
|
+
<div className="flex size-(--cell-size) items-center justify-center text-center">
|
|
181
|
+
{children}
|
|
182
|
+
</div>
|
|
183
|
+
</td>
|
|
184
|
+
);
|
|
185
|
+
},
|
|
186
|
+
...components,
|
|
187
|
+
}}
|
|
188
|
+
{...props}
|
|
189
|
+
/>
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
function CalendarDayButton({
|
|
194
|
+
className,
|
|
195
|
+
day,
|
|
196
|
+
modifiers,
|
|
197
|
+
locale,
|
|
198
|
+
...props
|
|
199
|
+
}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
|
|
200
|
+
const defaultClassNames = getDefaultClassNames();
|
|
201
|
+
|
|
202
|
+
const ref = React.useRef<HTMLButtonElement>(null);
|
|
203
|
+
React.useEffect(() => {
|
|
204
|
+
if (modifiers.focused) ref.current?.focus();
|
|
205
|
+
}, [modifiers.focused]);
|
|
206
|
+
|
|
207
|
+
return (
|
|
208
|
+
<Button
|
|
209
|
+
ref={ref}
|
|
210
|
+
variant="ghost"
|
|
211
|
+
size="icon"
|
|
212
|
+
data-day={day.date.toLocaleDateString(locale?.code)}
|
|
213
|
+
data-selected-single={
|
|
214
|
+
modifiers.selected &&
|
|
215
|
+
!modifiers.range_start &&
|
|
216
|
+
!modifiers.range_end &&
|
|
217
|
+
!modifiers.range_middle
|
|
218
|
+
}
|
|
219
|
+
data-range-start={modifiers.range_start}
|
|
220
|
+
data-range-end={modifiers.range_end}
|
|
221
|
+
data-range-middle={modifiers.range_middle}
|
|
222
|
+
className={cn(
|
|
223
|
+
'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',
|
|
224
|
+
defaultClassNames.day,
|
|
225
|
+
className
|
|
226
|
+
)}
|
|
227
|
+
{...props}
|
|
228
|
+
/>
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
export { Calendar, CalendarDayButton };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Checkbox as CheckboxPrimitive } from 'radix-ui';
|
|
5
|
+
|
|
6
|
+
import { cn } from '@/lib/utils';
|
|
7
|
+
import { CheckIcon } from 'lucide-react';
|
|
8
|
+
|
|
9
|
+
function Checkbox({
|
|
10
|
+
className,
|
|
11
|
+
...props
|
|
12
|
+
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
|
13
|
+
return (
|
|
14
|
+
<CheckboxPrimitive.Root
|
|
15
|
+
data-slot="checkbox"
|
|
16
|
+
className={cn(
|
|
17
|
+
'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...props}
|
|
21
|
+
>
|
|
22
|
+
<CheckboxPrimitive.Indicator
|
|
23
|
+
data-slot="checkbox-indicator"
|
|
24
|
+
className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
|
|
25
|
+
>
|
|
26
|
+
<CheckIcon />
|
|
27
|
+
</CheckboxPrimitive.Indicator>
|
|
28
|
+
</CheckboxPrimitive.Root>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { Checkbox };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
|
|
4
|
+
|
|
5
|
+
function Collapsible({
|
|
6
|
+
...props
|
|
7
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
|
8
|
+
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
function CollapsibleTrigger({
|
|
12
|
+
...props
|
|
13
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
|
14
|
+
return (
|
|
15
|
+
<CollapsiblePrimitive.CollapsibleTrigger
|
|
16
|
+
data-slot="collapsible-trigger"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function CollapsibleContent({
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
|
25
|
+
return (
|
|
26
|
+
<CollapsiblePrimitive.CollapsibleContent
|
|
27
|
+
data-slot="collapsible-content"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { format } from 'date-fns';
|
|
5
|
+
import { Calendar as CalendarIcon } from 'lucide-react';
|
|
6
|
+
|
|
7
|
+
import type { DateRange, DayPickerProps } from 'react-day-picker';
|
|
8
|
+
|
|
9
|
+
import { cn } from '@/lib/utils';
|
|
10
|
+
import { Button } from '@/components/ui/button';
|
|
11
|
+
import { Calendar } from '@/components/ui/calendar';
|
|
12
|
+
import {
|
|
13
|
+
Popover,
|
|
14
|
+
PopoverContent,
|
|
15
|
+
PopoverTrigger,
|
|
16
|
+
} from '@/components/ui/popover';
|
|
17
|
+
|
|
18
|
+
function DatePicker({ ...props }: React.ComponentProps<typeof Popover>) {
|
|
19
|
+
return <Popover data-slot="date-picker" {...props} />;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function DatePickerTrigger({
|
|
23
|
+
className,
|
|
24
|
+
children,
|
|
25
|
+
date,
|
|
26
|
+
placeholder = 'Pick a date',
|
|
27
|
+
dateFormat = 'PPP',
|
|
28
|
+
...props
|
|
29
|
+
}: React.ComponentProps<typeof Button> & {
|
|
30
|
+
date?: Date;
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
dateFormat?: string;
|
|
33
|
+
}) {
|
|
34
|
+
return (
|
|
35
|
+
<PopoverTrigger asChild>
|
|
36
|
+
<Button
|
|
37
|
+
variant="outline"
|
|
38
|
+
data-slot="date-picker-trigger"
|
|
39
|
+
data-empty={!date}
|
|
40
|
+
className={cn(
|
|
41
|
+
'w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
|
|
42
|
+
className
|
|
43
|
+
)}
|
|
44
|
+
{...props}
|
|
45
|
+
>
|
|
46
|
+
{children ?? (
|
|
47
|
+
<>
|
|
48
|
+
<CalendarIcon />
|
|
49
|
+
{date ? format(date, dateFormat) : <span>{placeholder}</span>}
|
|
50
|
+
</>
|
|
51
|
+
)}
|
|
52
|
+
</Button>
|
|
53
|
+
</PopoverTrigger>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function DatePickerContent({
|
|
58
|
+
className,
|
|
59
|
+
...props
|
|
60
|
+
}: React.ComponentProps<typeof PopoverContent>) {
|
|
61
|
+
return (
|
|
62
|
+
<PopoverContent
|
|
63
|
+
data-slot="date-picker-content"
|
|
64
|
+
className={cn('w-auto p-0', className)}
|
|
65
|
+
{...props}
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function DatePickerRangeTrigger({
|
|
71
|
+
className,
|
|
72
|
+
children,
|
|
73
|
+
dateRange,
|
|
74
|
+
placeholder = 'Pick a date',
|
|
75
|
+
dateFormat = 'LLL dd, y',
|
|
76
|
+
...props
|
|
77
|
+
}: React.ComponentProps<typeof Button> & {
|
|
78
|
+
dateRange?: DateRange;
|
|
79
|
+
placeholder?: string;
|
|
80
|
+
dateFormat?: string;
|
|
81
|
+
}) {
|
|
82
|
+
const hasDate = dateRange?.from != null;
|
|
83
|
+
return (
|
|
84
|
+
<PopoverTrigger asChild>
|
|
85
|
+
<Button
|
|
86
|
+
variant="outline"
|
|
87
|
+
data-slot="date-picker-range-trigger"
|
|
88
|
+
data-empty={!hasDate}
|
|
89
|
+
className={cn(
|
|
90
|
+
'justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
|
|
91
|
+
className
|
|
92
|
+
)}
|
|
93
|
+
{...props}
|
|
94
|
+
>
|
|
95
|
+
{children ?? (
|
|
96
|
+
<>
|
|
97
|
+
<CalendarIcon />
|
|
98
|
+
{dateRange?.from ? (
|
|
99
|
+
dateRange.to ? (
|
|
100
|
+
<>
|
|
101
|
+
{format(dateRange.from, dateFormat)} –{' '}
|
|
102
|
+
{format(dateRange.to, dateFormat)}
|
|
103
|
+
</>
|
|
104
|
+
) : (
|
|
105
|
+
format(dateRange.from, dateFormat)
|
|
106
|
+
)
|
|
107
|
+
) : (
|
|
108
|
+
<span>{placeholder}</span>
|
|
109
|
+
)}
|
|
110
|
+
</>
|
|
111
|
+
)}
|
|
112
|
+
</Button>
|
|
113
|
+
</PopoverTrigger>
|
|
114
|
+
);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
function DatePickerCalendar(props: DayPickerProps) {
|
|
118
|
+
return <Calendar data-slot="date-picker-calendar" {...props} />;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
export {
|
|
122
|
+
DatePicker,
|
|
123
|
+
DatePickerTrigger,
|
|
124
|
+
DatePickerRangeTrigger,
|
|
125
|
+
DatePickerContent,
|
|
126
|
+
DatePickerCalendar,
|
|
127
|
+
};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Popover as PopoverPrimitive } from 'radix-ui';
|
|
5
|
+
|
|
6
|
+
import { cn } from '@/lib/utils';
|
|
7
|
+
|
|
8
|
+
function Popover({
|
|
9
|
+
...props
|
|
10
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
|
11
|
+
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function PopoverTrigger({
|
|
15
|
+
...props
|
|
16
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
|
17
|
+
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function PopoverContent({
|
|
21
|
+
className,
|
|
22
|
+
align = 'center',
|
|
23
|
+
sideOffset = 4,
|
|
24
|
+
...props
|
|
25
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
|
26
|
+
return (
|
|
27
|
+
<PopoverPrimitive.Portal>
|
|
28
|
+
<PopoverPrimitive.Content
|
|
29
|
+
data-slot="popover-content"
|
|
30
|
+
align={align}
|
|
31
|
+
sideOffset={sideOffset}
|
|
32
|
+
className={cn(
|
|
33
|
+
'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden',
|
|
34
|
+
className
|
|
35
|
+
)}
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
</PopoverPrimitive.Portal>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function PopoverAnchor({
|
|
43
|
+
...props
|
|
44
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
|
45
|
+
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
49
|
+
return (
|
|
50
|
+
<div
|
|
51
|
+
data-slot="popover-header"
|
|
52
|
+
className={cn('flex flex-col gap-0.5 text-sm', className)}
|
|
53
|
+
{...props}
|
|
54
|
+
/>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
|
|
59
|
+
return (
|
|
60
|
+
<div
|
|
61
|
+
data-slot="popover-title"
|
|
62
|
+
className={cn('font-medium', className)}
|
|
63
|
+
{...props}
|
|
64
|
+
/>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function PopoverDescription({
|
|
69
|
+
className,
|
|
70
|
+
...props
|
|
71
|
+
}: React.ComponentProps<'p'>) {
|
|
72
|
+
return (
|
|
73
|
+
<p
|
|
74
|
+
data-slot="popover-description"
|
|
75
|
+
className={cn('text-muted-foreground', className)}
|
|
76
|
+
{...props}
|
|
77
|
+
/>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export {
|
|
82
|
+
Popover,
|
|
83
|
+
PopoverAnchor,
|
|
84
|
+
PopoverContent,
|
|
85
|
+
PopoverDescription,
|
|
86
|
+
PopoverHeader,
|
|
87
|
+
PopoverTitle,
|
|
88
|
+
PopoverTrigger,
|
|
89
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"root":["./src/app.tsx","./src/appLayout.tsx","./src/navigationMenu.tsx","./src/router-utils.tsx","./src/routes.tsx","./src/components/alerts/status-alert.tsx","./src/components/layouts/card-layout.tsx","./src/components/ui/alert.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/dialog.tsx","./src/components/ui/field.tsx","./src/components/ui/index.ts","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/pagination.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/spinner.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/features/authentication/authHelpers.ts","./src/features/authentication/authenticationConfig.ts","./src/features/authentication/api/userProfileApi.ts","./src/features/authentication/context/AuthContext.tsx","./src/features/authentication/footers/footer-link.tsx","./src/features/authentication/forms/auth-form.tsx","./src/features/authentication/forms/submit-button.tsx","./src/features/authentication/hooks/form.tsx","./src/features/authentication/hooks/useCountdownTimer.ts","./src/features/authentication/hooks/useRetryWithBackoff.ts","./src/features/authentication/layout/card-skeleton.tsx","./src/features/authentication/layout/centered-page-layout.tsx","./src/features/authentication/layouts/AuthAppLayout.tsx","./src/features/authentication/layouts/authenticationRouteLayout.tsx","./src/features/authentication/layouts/privateRouteLayout.tsx","./src/features/authentication/pages/ChangePassword.tsx","./src/features/authentication/pages/ForgotPassword.tsx","./src/features/authentication/pages/Login.tsx","./src/features/authentication/pages/Profile.tsx","./src/features/authentication/pages/Register.tsx","./src/features/authentication/pages/ResetPassword.tsx","./src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx","./src/features/authentication/sessionTimeout/sessionTimeService.ts","./src/features/authentication/sessionTimeout/sessionTimeoutConfig.ts","./src/features/authentication/utils/helpers.ts","./src/lib/utils.ts","./src/pages/Home.tsx","./src/pages/NotFound.tsx","./vite-env.d.ts","./vitest-env.d.ts"],"version":"5.9.3"}
|
|
1
|
+
{"root":["./src/app.tsx","./src/appLayout.tsx","./src/navigationMenu.tsx","./src/router-utils.tsx","./src/routes.tsx","./src/components/alerts/status-alert.tsx","./src/components/layouts/card-layout.tsx","./src/components/ui/alert.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/datePicker.tsx","./src/components/ui/dialog.tsx","./src/components/ui/field.tsx","./src/components/ui/index.ts","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/pagination.tsx","./src/components/ui/popover.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/spinner.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/features/authentication/authHelpers.ts","./src/features/authentication/authenticationConfig.ts","./src/features/authentication/api/userProfileApi.ts","./src/features/authentication/context/AuthContext.tsx","./src/features/authentication/footers/footer-link.tsx","./src/features/authentication/forms/auth-form.tsx","./src/features/authentication/forms/submit-button.tsx","./src/features/authentication/hooks/form.tsx","./src/features/authentication/hooks/useCountdownTimer.ts","./src/features/authentication/hooks/useRetryWithBackoff.ts","./src/features/authentication/layout/card-skeleton.tsx","./src/features/authentication/layout/centered-page-layout.tsx","./src/features/authentication/layouts/AuthAppLayout.tsx","./src/features/authentication/layouts/authenticationRouteLayout.tsx","./src/features/authentication/layouts/privateRouteLayout.tsx","./src/features/authentication/pages/ChangePassword.tsx","./src/features/authentication/pages/ForgotPassword.tsx","./src/features/authentication/pages/Login.tsx","./src/features/authentication/pages/Profile.tsx","./src/features/authentication/pages/Register.tsx","./src/features/authentication/pages/ResetPassword.tsx","./src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx","./src/features/authentication/sessionTimeout/sessionTimeService.ts","./src/features/authentication/sessionTimeout/sessionTimeoutConfig.ts","./src/features/authentication/utils/helpers.ts","./src/lib/utils.ts","./src/pages/Home.tsx","./src/pages/NotFound.tsx","./vite-env.d.ts","./vitest-env.d.ts"],"version":"5.9.3"}
|
package/dist/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforce/webapp-template-feature-react-authentication-experimental",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.103.1",
|
|
4
4
|
"description": "Authentication feature for web applications",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"clean": "rm -rf dist"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@salesforce/webapp-experimental": "^1.
|
|
19
|
+
"@salesforce/webapp-experimental": "^1.103.1",
|
|
20
20
|
"@tanstack/react-form": "^1.27.7",
|
|
21
21
|
"@types/react": "^19.2.7",
|
|
22
22
|
"@types/react-dom": "^19.2.3",
|