@diwauhris/ui 1.7.18 → 1.7.19
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/lib/assets/ui.css +18 -0
- package/lib/index.cjs +152 -0
- package/lib/index.mjs +102 -1
- package/lib/types/ui-library/gallery/application-error/ApplicationError.d.ts +96 -0
- package/lib/types/ui-library/gallery/forbidden-error/ForbiddenError.d.ts +39 -0
- package/lib/types/ui-library/gallery/not-found-error/NotFoundError.d.ts +39 -0
- package/lib/types/ui-library/index.d.ts +6 -0
- package/package.json +1 -1
package/lib/assets/ui.css
CHANGED
|
@@ -809,6 +809,10 @@
|
|
|
809
809
|
max-height: 6rem;
|
|
810
810
|
}
|
|
811
811
|
|
|
812
|
+
.max-h-48 {
|
|
813
|
+
max-height: 12rem;
|
|
814
|
+
}
|
|
815
|
+
|
|
812
816
|
.max-h-60 {
|
|
813
817
|
max-height: 15rem;
|
|
814
818
|
}
|
|
@@ -2899,6 +2903,10 @@
|
|
|
2899
2903
|
background-color: rgb(255 255 255 / 0.75);
|
|
2900
2904
|
}
|
|
2901
2905
|
|
|
2906
|
+
.bg-white\/95 {
|
|
2907
|
+
background-color: rgb(255 255 255 / 0.95);
|
|
2908
|
+
}
|
|
2909
|
+
|
|
2902
2910
|
.bg-gradient-to-r {
|
|
2903
2911
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
2904
2912
|
}
|
|
@@ -3701,6 +3709,11 @@
|
|
|
3701
3709
|
color: rgb(234 88 12 / var(--tw-text-opacity, 1));
|
|
3702
3710
|
}
|
|
3703
3711
|
|
|
3712
|
+
.text-rose-300 {
|
|
3713
|
+
--tw-text-opacity: 1;
|
|
3714
|
+
color: rgb(253 164 175 / var(--tw-text-opacity, 1));
|
|
3715
|
+
}
|
|
3716
|
+
|
|
3704
3717
|
.text-rose-300\/60 {
|
|
3705
3718
|
color: rgb(253 164 175 / 0.6);
|
|
3706
3719
|
}
|
|
@@ -4121,6 +4134,11 @@
|
|
|
4121
4134
|
--tw-ring-offset-width: 2px;
|
|
4122
4135
|
}
|
|
4123
4136
|
|
|
4137
|
+
.blur {
|
|
4138
|
+
--tw-blur: blur(8px);
|
|
4139
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
4140
|
+
}
|
|
4141
|
+
|
|
4124
4142
|
.drop-shadow {
|
|
4125
4143
|
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
|
|
4126
4144
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
package/lib/index.cjs
CHANGED
|
@@ -4618,6 +4618,154 @@ function StatusPage({ eyebrow, title, description, code, icon, primaryAction, se
|
|
|
4618
4618
|
});
|
|
4619
4619
|
}
|
|
4620
4620
|
//#endregion
|
|
4621
|
+
//#region src/ui-library/gallery/not-found-error/NotFoundError.tsx
|
|
4622
|
+
/**
|
|
4623
|
+
* NotFoundError — Design System Component
|
|
4624
|
+
*
|
|
4625
|
+
* Full-page 404 Not Found screen. Composes StatusPage internally using the
|
|
4626
|
+
* `notFound` preset. Navigation is the consumer's responsibility — wire it
|
|
4627
|
+
* via `primaryAction.onClick` and `secondaryAction.onClick`.
|
|
4628
|
+
*
|
|
4629
|
+
* No routing imports. Works with any router (React Router, Next.js, window.location).
|
|
4630
|
+
*
|
|
4631
|
+
* Usage:
|
|
4632
|
+
* import { NotFoundError } from '@diwauhris/ui';
|
|
4633
|
+
* import { useNavigate } from 'react-router-dom';
|
|
4634
|
+
*
|
|
4635
|
+
* function NotFoundPage() {
|
|
4636
|
+
* const navigate = useNavigate();
|
|
4637
|
+
* return (
|
|
4638
|
+
* <NotFoundError
|
|
4639
|
+
* primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
|
|
4640
|
+
* secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
|
|
4641
|
+
* />
|
|
4642
|
+
* );
|
|
4643
|
+
* }
|
|
4644
|
+
*/
|
|
4645
|
+
function NotFoundError({ primaryAction, secondaryAction, className }) {
|
|
4646
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
|
|
4647
|
+
...STATUS_PAGE_PRESETS.notFound,
|
|
4648
|
+
primaryAction,
|
|
4649
|
+
secondaryAction,
|
|
4650
|
+
className
|
|
4651
|
+
});
|
|
4652
|
+
}
|
|
4653
|
+
//#endregion
|
|
4654
|
+
//#region src/ui-library/gallery/forbidden-error/ForbiddenError.tsx
|
|
4655
|
+
/**
|
|
4656
|
+
* ForbiddenError — Design System Component
|
|
4657
|
+
*
|
|
4658
|
+
* Full-page 403 Access Restricted screen. Composes StatusPage internally
|
|
4659
|
+
* using the `forbidden` preset. Navigation is the consumer's responsibility
|
|
4660
|
+
* — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
|
|
4661
|
+
*
|
|
4662
|
+
* No routing imports. Works with any router (React Router, Next.js, window.location).
|
|
4663
|
+
*
|
|
4664
|
+
* Usage:
|
|
4665
|
+
* import { ForbiddenError } from '@diwauhris/ui';
|
|
4666
|
+
* import { useNavigate } from 'react-router-dom';
|
|
4667
|
+
*
|
|
4668
|
+
* function ForbiddenPage() {
|
|
4669
|
+
* const navigate = useNavigate();
|
|
4670
|
+
* return (
|
|
4671
|
+
* <ForbiddenError
|
|
4672
|
+
* primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
|
|
4673
|
+
* secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
|
|
4674
|
+
* />
|
|
4675
|
+
* );
|
|
4676
|
+
* }
|
|
4677
|
+
*/
|
|
4678
|
+
function ForbiddenError({ primaryAction, secondaryAction, className }) {
|
|
4679
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
|
|
4680
|
+
...STATUS_PAGE_PRESETS.forbidden,
|
|
4681
|
+
primaryAction,
|
|
4682
|
+
secondaryAction,
|
|
4683
|
+
className
|
|
4684
|
+
});
|
|
4685
|
+
}
|
|
4686
|
+
//#endregion
|
|
4687
|
+
//#region src/ui-library/gallery/application-error/ApplicationError.tsx
|
|
4688
|
+
/**
|
|
4689
|
+
* ApplicationError — Design System Component
|
|
4690
|
+
*
|
|
4691
|
+
* Full-page 500 / unexpected error screen. Composes StatusPage internally
|
|
4692
|
+
* using the `serverError` preset. Includes a dev-only collapsible details
|
|
4693
|
+
* panel (error message, stack trace, component stack) rendered only when
|
|
4694
|
+
* `import.meta.env.DEV && error !== undefined`.
|
|
4695
|
+
*
|
|
4696
|
+
* Navigation is the consumer's responsibility — wire onRetry and onDashboard.
|
|
4697
|
+
*
|
|
4698
|
+
* Two exports:
|
|
4699
|
+
*
|
|
4700
|
+
* ApplicationError — primary component. Consumer provides both callbacks.
|
|
4701
|
+
* Used as React Router `errorElement` (pair with useRouteError + useNavigate).
|
|
4702
|
+
*
|
|
4703
|
+
* ApplicationErrorFallback — convenience wrapper for ErrorBoundary usage.
|
|
4704
|
+
* Accepts onReset (maps to onRetry) and uses window.location.href for
|
|
4705
|
+
* dashboard navigation when outside router context.
|
|
4706
|
+
*
|
|
4707
|
+
* No routing imports in this file. Works with any router.
|
|
4708
|
+
*
|
|
4709
|
+
* Usage (router errorElement):
|
|
4710
|
+
* import { ApplicationError } from '@diwauhris/ui';
|
|
4711
|
+
* import { useRouteError, useNavigate } from 'react-router-dom';
|
|
4712
|
+
*
|
|
4713
|
+
* export function ErrorPage() {
|
|
4714
|
+
* const error = useRouteError();
|
|
4715
|
+
* const navigate = useNavigate();
|
|
4716
|
+
* return (
|
|
4717
|
+
* <ApplicationError
|
|
4718
|
+
* error={error}
|
|
4719
|
+
* onRetry={() => navigate(0)}
|
|
4720
|
+
* onDashboard={() => navigate('/dashboard')}
|
|
4721
|
+
* />
|
|
4722
|
+
* );
|
|
4723
|
+
* }
|
|
4724
|
+
*
|
|
4725
|
+
* Usage (ErrorBoundary fallback):
|
|
4726
|
+
* import { ApplicationErrorFallback } from '@diwauhris/ui';
|
|
4727
|
+
*
|
|
4728
|
+
* <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => (
|
|
4729
|
+
* <ApplicationErrorFallback
|
|
4730
|
+
* error={error}
|
|
4731
|
+
* onReset={resetErrorBoundary}
|
|
4732
|
+
* />
|
|
4733
|
+
* )} />
|
|
4734
|
+
*/
|
|
4735
|
+
function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className }) {
|
|
4736
|
+
const showDevDetails = false;
|
|
4737
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
4738
|
+
className,
|
|
4739
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPage, {
|
|
4740
|
+
...STATUS_PAGE_PRESETS.serverError,
|
|
4741
|
+
primaryAction: {
|
|
4742
|
+
label: "Try Again",
|
|
4743
|
+
onClick: onRetry
|
|
4744
|
+
},
|
|
4745
|
+
secondaryAction: {
|
|
4746
|
+
label: "Go to Dashboard",
|
|
4747
|
+
onClick: onDashboard
|
|
4748
|
+
}
|
|
4749
|
+
}), showDevDetails]
|
|
4750
|
+
});
|
|
4751
|
+
}
|
|
4752
|
+
/**
|
|
4753
|
+
* Convenience wrapper for use with class-based ErrorBoundary components.
|
|
4754
|
+
* Outside router context — uses window.location.href for dashboard navigation.
|
|
4755
|
+
* Maps `onReset` to ApplicationError's `onRetry`.
|
|
4756
|
+
*/
|
|
4757
|
+
function ApplicationErrorFallback({ error, componentStack, errorId, onReset }) {
|
|
4758
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApplicationError, {
|
|
4759
|
+
error,
|
|
4760
|
+
componentStack,
|
|
4761
|
+
errorId,
|
|
4762
|
+
onRetry: onReset,
|
|
4763
|
+
onDashboard: () => {
|
|
4764
|
+
window.location.href = "/dashboard";
|
|
4765
|
+
}
|
|
4766
|
+
});
|
|
4767
|
+
}
|
|
4768
|
+
//#endregion
|
|
4621
4769
|
//#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
|
|
4622
4770
|
function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
|
|
4623
4771
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
|
|
@@ -8608,6 +8756,8 @@ exports.AccordionItem = AccordionItem;
|
|
|
8608
8756
|
exports.AccordionTrigger = AccordionTrigger;
|
|
8609
8757
|
exports.ActivityFeed = ActivityFeed;
|
|
8610
8758
|
exports.Alert = Alert;
|
|
8759
|
+
exports.ApplicationError = ApplicationError;
|
|
8760
|
+
exports.ApplicationErrorFallback = ApplicationErrorFallback;
|
|
8611
8761
|
exports.ApprovalTimeline = ApprovalTimeline;
|
|
8612
8762
|
exports.AreaChart = AreaChart;
|
|
8613
8763
|
exports.Avatar = Avatar;
|
|
@@ -8645,6 +8795,7 @@ exports.FieldContext = FieldContext;
|
|
|
8645
8795
|
exports.FieldInput = FieldInput;
|
|
8646
8796
|
exports.FileUpload = FileUpload;
|
|
8647
8797
|
exports.FilterChip = FilterChip;
|
|
8798
|
+
exports.ForbiddenError = ForbiddenError;
|
|
8648
8799
|
exports.Heatmap = Heatmap;
|
|
8649
8800
|
exports.IconButton = IconButton;
|
|
8650
8801
|
exports.Input = Input;
|
|
@@ -8654,6 +8805,7 @@ exports.LineChart = LineChart;
|
|
|
8654
8805
|
exports.MaskedValue = MaskedValue;
|
|
8655
8806
|
exports.Menu = Menu;
|
|
8656
8807
|
exports.Modal = Modal;
|
|
8808
|
+
exports.NotFoundError = NotFoundError;
|
|
8657
8809
|
exports.OrgChart = OrgChart;
|
|
8658
8810
|
exports.OrgUnitTree = OrgUnitTree;
|
|
8659
8811
|
exports.OtpInput = OtpInput;
|
package/lib/index.mjs
CHANGED
|
@@ -4594,6 +4594,107 @@ function StatusPage({ eyebrow, title, description, code, icon, primaryAction, se
|
|
|
4594
4594
|
});
|
|
4595
4595
|
}
|
|
4596
4596
|
//#endregion
|
|
4597
|
+
//#region src/ui-library/gallery/not-found-error/NotFoundError.tsx
|
|
4598
|
+
/**
|
|
4599
|
+
* NotFoundError — Design System Component
|
|
4600
|
+
*
|
|
4601
|
+
* Full-page 404 Not Found screen. Composes StatusPage internally using the
|
|
4602
|
+
* `notFound` preset. Navigation is the consumer's responsibility — wire it
|
|
4603
|
+
* via `primaryAction.onClick` and `secondaryAction.onClick`.
|
|
4604
|
+
*
|
|
4605
|
+
* No routing imports. Works with any router (React Router, Next.js, window.location).
|
|
4606
|
+
*
|
|
4607
|
+
* Usage:
|
|
4608
|
+
* import { NotFoundError } from '@diwauhris/ui';
|
|
4609
|
+
* import { useNavigate } from 'react-router-dom';
|
|
4610
|
+
*
|
|
4611
|
+
* function NotFoundPage() {
|
|
4612
|
+
* const navigate = useNavigate();
|
|
4613
|
+
* return (
|
|
4614
|
+
* <NotFoundError
|
|
4615
|
+
* primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
|
|
4616
|
+
* secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
|
|
4617
|
+
* />
|
|
4618
|
+
* );
|
|
4619
|
+
* }
|
|
4620
|
+
*/
|
|
4621
|
+
function NotFoundError({ primaryAction, secondaryAction, className }) {
|
|
4622
|
+
return /* @__PURE__ */ jsx(StatusPage, {
|
|
4623
|
+
...STATUS_PAGE_PRESETS.notFound,
|
|
4624
|
+
primaryAction,
|
|
4625
|
+
secondaryAction,
|
|
4626
|
+
className
|
|
4627
|
+
});
|
|
4628
|
+
}
|
|
4629
|
+
//#endregion
|
|
4630
|
+
//#region src/ui-library/gallery/forbidden-error/ForbiddenError.tsx
|
|
4631
|
+
/**
|
|
4632
|
+
* ForbiddenError — Design System Component
|
|
4633
|
+
*
|
|
4634
|
+
* Full-page 403 Access Restricted screen. Composes StatusPage internally
|
|
4635
|
+
* using the `forbidden` preset. Navigation is the consumer's responsibility
|
|
4636
|
+
* — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
|
|
4637
|
+
*
|
|
4638
|
+
* No routing imports. Works with any router (React Router, Next.js, window.location).
|
|
4639
|
+
*
|
|
4640
|
+
* Usage:
|
|
4641
|
+
* import { ForbiddenError } from '@diwauhris/ui';
|
|
4642
|
+
* import { useNavigate } from 'react-router-dom';
|
|
4643
|
+
*
|
|
4644
|
+
* function ForbiddenPage() {
|
|
4645
|
+
* const navigate = useNavigate();
|
|
4646
|
+
* return (
|
|
4647
|
+
* <ForbiddenError
|
|
4648
|
+
* primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
|
|
4649
|
+
* secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
|
|
4650
|
+
* />
|
|
4651
|
+
* );
|
|
4652
|
+
* }
|
|
4653
|
+
*/
|
|
4654
|
+
function ForbiddenError({ primaryAction, secondaryAction, className }) {
|
|
4655
|
+
return /* @__PURE__ */ jsx(StatusPage, {
|
|
4656
|
+
...STATUS_PAGE_PRESETS.forbidden,
|
|
4657
|
+
primaryAction,
|
|
4658
|
+
secondaryAction,
|
|
4659
|
+
className
|
|
4660
|
+
});
|
|
4661
|
+
}
|
|
4662
|
+
//#endregion
|
|
4663
|
+
//#region src/ui-library/gallery/application-error/ApplicationError.tsx
|
|
4664
|
+
function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className }) {
|
|
4665
|
+
const showDevDetails = false;
|
|
4666
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
4667
|
+
className,
|
|
4668
|
+
children: [/* @__PURE__ */ jsx(StatusPage, {
|
|
4669
|
+
...STATUS_PAGE_PRESETS.serverError,
|
|
4670
|
+
primaryAction: {
|
|
4671
|
+
label: "Try Again",
|
|
4672
|
+
onClick: onRetry
|
|
4673
|
+
},
|
|
4674
|
+
secondaryAction: {
|
|
4675
|
+
label: "Go to Dashboard",
|
|
4676
|
+
onClick: onDashboard
|
|
4677
|
+
}
|
|
4678
|
+
}), showDevDetails]
|
|
4679
|
+
});
|
|
4680
|
+
}
|
|
4681
|
+
/**
|
|
4682
|
+
* Convenience wrapper for use with class-based ErrorBoundary components.
|
|
4683
|
+
* Outside router context — uses window.location.href for dashboard navigation.
|
|
4684
|
+
* Maps `onReset` to ApplicationError's `onRetry`.
|
|
4685
|
+
*/
|
|
4686
|
+
function ApplicationErrorFallback({ error, componentStack, errorId, onReset }) {
|
|
4687
|
+
return /* @__PURE__ */ jsx(ApplicationError, {
|
|
4688
|
+
error,
|
|
4689
|
+
componentStack,
|
|
4690
|
+
errorId,
|
|
4691
|
+
onRetry: onReset,
|
|
4692
|
+
onDashboard: () => {
|
|
4693
|
+
window.location.href = "/dashboard";
|
|
4694
|
+
}
|
|
4695
|
+
});
|
|
4696
|
+
}
|
|
4697
|
+
//#endregion
|
|
4597
4698
|
//#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
|
|
4598
4699
|
function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
|
|
4599
4700
|
return /* @__PURE__ */ jsxs("article", {
|
|
@@ -8578,4 +8679,4 @@ var shadow = {
|
|
|
8578
8679
|
overlay: "shadow-xl"
|
|
8579
8680
|
};
|
|
8580
8681
|
//#endregion
|
|
8581
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, AreaChart, Avatar, Badge, BarChart, BarList, Breadcrumb, Button, CHART_PALETTE, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, ColumnManager, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, IsoCubeBlock, Kanban, LineChart, MaskedValue, Menu, Modal, OrgChart, OrgUnitTree, OtpInput, PafTemplate, PageHeader, Pagination, PayslipTemplate, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, ReportTemplate, STATUS_PAGE_PRESETS, Search, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, StatusPage, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, TimekeepingTemplate, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, applyColumnOrder, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };
|
|
8682
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApplicationError, ApplicationErrorFallback, ApprovalTimeline, AreaChart, Avatar, Badge, BarChart, BarList, Breadcrumb, Button, CHART_PALETTE, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, ColumnManager, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, ForbiddenError, Heatmap, IconButton, Input, IsoCubeBlock, Kanban, LineChart, MaskedValue, Menu, Modal, NotFoundError, OrgChart, OrgUnitTree, OtpInput, PafTemplate, PageHeader, Pagination, PayslipTemplate, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, ReportTemplate, STATUS_PAGE_PRESETS, Search, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, StatusPage, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, TimekeepingTemplate, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, applyColumnOrder, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ApplicationError — Design System Component
|
|
3
|
+
*
|
|
4
|
+
* Full-page 500 / unexpected error screen. Composes StatusPage internally
|
|
5
|
+
* using the `serverError` preset. Includes a dev-only collapsible details
|
|
6
|
+
* panel (error message, stack trace, component stack) rendered only when
|
|
7
|
+
* `import.meta.env.DEV && error !== undefined`.
|
|
8
|
+
*
|
|
9
|
+
* Navigation is the consumer's responsibility — wire onRetry and onDashboard.
|
|
10
|
+
*
|
|
11
|
+
* Two exports:
|
|
12
|
+
*
|
|
13
|
+
* ApplicationError — primary component. Consumer provides both callbacks.
|
|
14
|
+
* Used as React Router `errorElement` (pair with useRouteError + useNavigate).
|
|
15
|
+
*
|
|
16
|
+
* ApplicationErrorFallback — convenience wrapper for ErrorBoundary usage.
|
|
17
|
+
* Accepts onReset (maps to onRetry) and uses window.location.href for
|
|
18
|
+
* dashboard navigation when outside router context.
|
|
19
|
+
*
|
|
20
|
+
* No routing imports in this file. Works with any router.
|
|
21
|
+
*
|
|
22
|
+
* Usage (router errorElement):
|
|
23
|
+
* import { ApplicationError } from '@diwauhris/ui';
|
|
24
|
+
* import { useRouteError, useNavigate } from 'react-router-dom';
|
|
25
|
+
*
|
|
26
|
+
* export function ErrorPage() {
|
|
27
|
+
* const error = useRouteError();
|
|
28
|
+
* const navigate = useNavigate();
|
|
29
|
+
* return (
|
|
30
|
+
* <ApplicationError
|
|
31
|
+
* error={error}
|
|
32
|
+
* onRetry={() => navigate(0)}
|
|
33
|
+
* onDashboard={() => navigate('/dashboard')}
|
|
34
|
+
* />
|
|
35
|
+
* );
|
|
36
|
+
* }
|
|
37
|
+
*
|
|
38
|
+
* Usage (ErrorBoundary fallback):
|
|
39
|
+
* import { ApplicationErrorFallback } from '@diwauhris/ui';
|
|
40
|
+
*
|
|
41
|
+
* <ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => (
|
|
42
|
+
* <ApplicationErrorFallback
|
|
43
|
+
* error={error}
|
|
44
|
+
* onReset={resetErrorBoundary}
|
|
45
|
+
* />
|
|
46
|
+
* )} />
|
|
47
|
+
*/
|
|
48
|
+
export interface ApplicationErrorProps {
|
|
49
|
+
/**
|
|
50
|
+
* The caught error object.
|
|
51
|
+
* Used to extract message and stack in the dev-only details panel.
|
|
52
|
+
* Pass the value from useRouteError() or ErrorBoundary's error prop.
|
|
53
|
+
*/
|
|
54
|
+
error?: unknown;
|
|
55
|
+
/**
|
|
56
|
+
* React component stack from ErrorInfo.componentStack.
|
|
57
|
+
* Shown in the dev panel when provided. Optional.
|
|
58
|
+
*/
|
|
59
|
+
componentStack?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Short error ID for support correlation (e.g. "ERR-A1B2C").
|
|
62
|
+
* Rendered below the action buttons when provided.
|
|
63
|
+
*/
|
|
64
|
+
errorId?: string;
|
|
65
|
+
/**
|
|
66
|
+
* "Try Again" callback.
|
|
67
|
+
* Router usage: () => navigate(0)
|
|
68
|
+
* Boundary usage: onReset / resetErrorBoundary
|
|
69
|
+
*/
|
|
70
|
+
onRetry: () => void;
|
|
71
|
+
/**
|
|
72
|
+
* "Go to Dashboard" callback.
|
|
73
|
+
* Router usage: () => navigate('/dashboard')
|
|
74
|
+
* Boundary usage: () => { window.location.href = '/dashboard'; }
|
|
75
|
+
*/
|
|
76
|
+
onDashboard: () => void;
|
|
77
|
+
/** Additional class on the root wrapper. */
|
|
78
|
+
className?: string;
|
|
79
|
+
}
|
|
80
|
+
export interface ApplicationErrorFallbackProps {
|
|
81
|
+
/** The caught error object passed by the ErrorBoundary. */
|
|
82
|
+
error?: unknown;
|
|
83
|
+
/** React component stack from ErrorInfo.componentStack. */
|
|
84
|
+
componentStack?: string;
|
|
85
|
+
/** Short error ID for support correlation. */
|
|
86
|
+
errorId?: string;
|
|
87
|
+
/** Called when the user clicks "Try Again". Maps to onRetry. */
|
|
88
|
+
onReset: () => void;
|
|
89
|
+
}
|
|
90
|
+
export declare function ApplicationError({ error, componentStack, errorId, onRetry, onDashboard, className, }: ApplicationErrorProps): import("react").JSX.Element;
|
|
91
|
+
/**
|
|
92
|
+
* Convenience wrapper for use with class-based ErrorBoundary components.
|
|
93
|
+
* Outside router context — uses window.location.href for dashboard navigation.
|
|
94
|
+
* Maps `onReset` to ApplicationError's `onRetry`.
|
|
95
|
+
*/
|
|
96
|
+
export declare function ApplicationErrorFallback({ error, componentStack, errorId, onReset, }: ApplicationErrorFallbackProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ForbiddenError — Design System Component
|
|
3
|
+
*
|
|
4
|
+
* Full-page 403 Access Restricted screen. Composes StatusPage internally
|
|
5
|
+
* using the `forbidden` preset. Navigation is the consumer's responsibility
|
|
6
|
+
* — wire it via `primaryAction.onClick` and `secondaryAction.onClick`.
|
|
7
|
+
*
|
|
8
|
+
* No routing imports. Works with any router (React Router, Next.js, window.location).
|
|
9
|
+
*
|
|
10
|
+
* Usage:
|
|
11
|
+
* import { ForbiddenError } from '@diwauhris/ui';
|
|
12
|
+
* import { useNavigate } from 'react-router-dom';
|
|
13
|
+
*
|
|
14
|
+
* function ForbiddenPage() {
|
|
15
|
+
* const navigate = useNavigate();
|
|
16
|
+
* return (
|
|
17
|
+
* <ForbiddenError
|
|
18
|
+
* primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
|
|
19
|
+
* secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
|
|
20
|
+
* />
|
|
21
|
+
* );
|
|
22
|
+
* }
|
|
23
|
+
*/
|
|
24
|
+
import type { StatusPageAction } from '../status-page/StatusPage';
|
|
25
|
+
export interface ForbiddenErrorProps {
|
|
26
|
+
/**
|
|
27
|
+
* Primary action button.
|
|
28
|
+
* Typically "Go to Dashboard" with onClick: () => navigate('/dashboard').
|
|
29
|
+
*/
|
|
30
|
+
primaryAction: StatusPageAction;
|
|
31
|
+
/**
|
|
32
|
+
* Optional secondary action button.
|
|
33
|
+
* Typically "Go Back" with onClick: () => navigate(-1).
|
|
34
|
+
*/
|
|
35
|
+
secondaryAction?: StatusPageAction;
|
|
36
|
+
/** Additional class on the root wrapper. */
|
|
37
|
+
className?: string;
|
|
38
|
+
}
|
|
39
|
+
export declare function ForbiddenError({ primaryAction, secondaryAction, className, }: ForbiddenErrorProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* NotFoundError — Design System Component
|
|
3
|
+
*
|
|
4
|
+
* Full-page 404 Not Found screen. Composes StatusPage internally using the
|
|
5
|
+
* `notFound` preset. Navigation is the consumer's responsibility — wire it
|
|
6
|
+
* via `primaryAction.onClick` and `secondaryAction.onClick`.
|
|
7
|
+
*
|
|
8
|
+
* No routing imports. Works with any router (React Router, Next.js, window.location).
|
|
9
|
+
*
|
|
10
|
+
* Usage:
|
|
11
|
+
* import { NotFoundError } from '@diwauhris/ui';
|
|
12
|
+
* import { useNavigate } from 'react-router-dom';
|
|
13
|
+
*
|
|
14
|
+
* function NotFoundPage() {
|
|
15
|
+
* const navigate = useNavigate();
|
|
16
|
+
* return (
|
|
17
|
+
* <NotFoundError
|
|
18
|
+
* primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
|
|
19
|
+
* secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
|
|
20
|
+
* />
|
|
21
|
+
* );
|
|
22
|
+
* }
|
|
23
|
+
*/
|
|
24
|
+
import type { StatusPageAction } from '../status-page/StatusPage';
|
|
25
|
+
export interface NotFoundErrorProps {
|
|
26
|
+
/**
|
|
27
|
+
* Primary action button.
|
|
28
|
+
* Typically "Go to Dashboard" with onClick: () => navigate('/dashboard').
|
|
29
|
+
*/
|
|
30
|
+
primaryAction: StatusPageAction;
|
|
31
|
+
/**
|
|
32
|
+
* Optional secondary action button.
|
|
33
|
+
* Typically "Go Back" with onClick: () => navigate(-1).
|
|
34
|
+
*/
|
|
35
|
+
secondaryAction?: StatusPageAction;
|
|
36
|
+
/** Additional class on the root wrapper. */
|
|
37
|
+
className?: string;
|
|
38
|
+
}
|
|
39
|
+
export declare function NotFoundError({ primaryAction, secondaryAction, className, }: NotFoundErrorProps): import("react").JSX.Element;
|
|
@@ -110,6 +110,12 @@ export { EmptyState } from './gallery/empty-state/EmptyState';
|
|
|
110
110
|
export type { EmptyStateProps } from './gallery/empty-state/EmptyState';
|
|
111
111
|
export { StatusPage, STATUS_PAGE_PRESETS } from './gallery/status-page/StatusPage';
|
|
112
112
|
export type { StatusPageProps, StatusPageAction } from './gallery/status-page/StatusPage';
|
|
113
|
+
export { NotFoundError } from './gallery/not-found-error/NotFoundError';
|
|
114
|
+
export type { NotFoundErrorProps } from './gallery/not-found-error/NotFoundError';
|
|
115
|
+
export { ForbiddenError } from './gallery/forbidden-error/ForbiddenError';
|
|
116
|
+
export type { ForbiddenErrorProps } from './gallery/forbidden-error/ForbiddenError';
|
|
117
|
+
export { ApplicationError, ApplicationErrorFallback } from './gallery/application-error/ApplicationError';
|
|
118
|
+
export type { ApplicationErrorProps, ApplicationErrorFallbackProps } from './gallery/application-error/ApplicationError';
|
|
113
119
|
export { EmployeeCard } from './gallery/employee-card/EmployeeCard';
|
|
114
120
|
export type { EmployeeCardProps, EmployeeCardMeta } from './gallery/employee-card/EmployeeCard';
|
|
115
121
|
export { TreeView } from './gallery/tree-view/TreeView';
|