@dragunio/fe-libs 0.1.9 → 0.1.10
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/README.md +44 -0
- package/THIRD_PARTY_NOTICES.md +36 -0
- package/dist/index.d.mts +27 -1
- package/dist/index.d.ts +27 -1
- package/dist/index.js +1342 -0
- package/dist/index.mjs +1343 -0
- package/dist/lost-ORG2SV6N.gif +0 -0
- package/dist/lost-still-KGRGCS37.png +0 -0
- package/dist/styles.css +655 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -247,3 +247,47 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
|
|
|
247
247
|
<Avatar content="Phạm Quốc Bảo" />
|
|
248
248
|
</AvatarGroup>
|
|
249
249
|
```
|
|
250
|
+
|
|
251
|
+
## 404 / NotFound
|
|
252
|
+
|
|
253
|
+
```tsx
|
|
254
|
+
import { NotFound, NotFoundCaveman, NotFoundYeti, NotFoundLost } from '@dragunio/fe-libs';
|
|
255
|
+
import '@dragunio/fe-libs/styles.css';
|
|
256
|
+
|
|
257
|
+
// Randomly selects one of the three designs once per mount.
|
|
258
|
+
<NotFound homeHref="/" homeLabel="Về trang chủ" />
|
|
259
|
+
|
|
260
|
+
// Choose a design, customize copy, or connect your router.
|
|
261
|
+
<NotFound
|
|
262
|
+
variant="bad_dream"
|
|
263
|
+
title="Không tìm thấy trang"
|
|
264
|
+
description="Trang bạn cần có thể đã được chuyển đi."
|
|
265
|
+
onHomeClick={() => navigate('/')}
|
|
266
|
+
/>
|
|
267
|
+
|
|
268
|
+
// Each design is also available independently.
|
|
269
|
+
<NotFoundCaveman />
|
|
270
|
+
<NotFoundYeti animated={false} />
|
|
271
|
+
<NotFoundLost action={null} />
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
`variant` accepts `random` (default), `caveman`, `bad_dream`, or `electric_shock`. Random selection
|
|
275
|
+
stays stable when props change; remount with a new React `key` to draw again (the
|
|
276
|
+
same variant may be picked). Server rendering and the first client render use
|
|
277
|
+
`caveman`; the random choice runs after mounting to avoid hydration mismatches.
|
|
278
|
+
|
|
279
|
+
All four components accept `title` and `description` (`ReactNode`), `homeLabel`
|
|
280
|
+
(default `Go to Home`), `homeHref` (default `/`), `onHomeClick`, `action`, `animated`
|
|
281
|
+
(default `true`), and section HTML attributes. `onHomeClick` replaces default
|
|
282
|
+
navigation. `action` replaces the public home `Button`; `null` hides actions.
|
|
283
|
+
`NotFoundCaveman`, `NotFoundYeti`, and `NotFoundLost` use `NotFoundSceneProps`, which
|
|
284
|
+
omits `variant`.
|
|
285
|
+
|
|
286
|
+
Artwork scales to its container and honors `prefers-reduced-motion`. Disabling
|
|
287
|
+
animation uses a still frame for Lost. The original 1.31 MiB GIF and still PNG
|
|
288
|
+
are bundled beside `styles.css`, with no external image, font, Bootstrap, jQuery,
|
|
289
|
+
or GSAP requests. Yeti preserves the original SVG with a CSS adaptation of its
|
|
290
|
+
flashlight and shivering animation; it does not reproduce GSAP mouth morphing.
|
|
291
|
+
|
|
292
|
+
Try the interactive story at `#/not-found`. Source credits and illustration
|
|
293
|
+
provenance are in [THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md).
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# 404 artwork and source credits
|
|
2
|
+
|
|
3
|
+
The NotFound components adapt these user-selected designs:
|
|
4
|
+
|
|
5
|
+
- **Caveman** — SofiaSergio, “code for fun (day02): 404 error page, Caveman mode - pure CSS”, https://codepen.io/SofiaSergio/pen/RMjyRL. Original HTML and SCSS were converted to React and scoped CSS.
|
|
6
|
+
- **Yeti** — Darin Senneff (dsenneff), “Yeti 404 Page”, https://codepen.io/dsenneff/pen/mjZgmN. Original SVG geometry is retained; IDs are instance-specific and the timeline is adapted to CSS. Original GSAP scripts and plugins are not included.
|
|
7
|
+
- **Lost** — Naved khan (Navedkhan012), “404 page”, https://codepen.io/Navedkhan012/pen/vrWQMY. Source recovered from the attributed export at https://gist.github.com/MbarkT3STO/0c13e9f8d771a22bb1ee69583aa7113e.
|
|
8
|
+
|
|
9
|
+
The Lost design references the illustration at
|
|
10
|
+
https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif.
|
|
11
|
+
That original GIF is bundled as `packages/not-found/src/assets/lost.gif`;
|
|
12
|
+
`lost-still.png` is its first frame for reduced-motion rendering. Illustration
|
|
13
|
+
credit belongs to its original creator; the library does not claim authorship
|
|
14
|
+
of this asset or the designs above.
|
|
15
|
+
|
|
16
|
+
## Adapted CodePen code
|
|
17
|
+
|
|
18
|
+
Copyright (c) SofiaSergio, Darin Senneff, and Naved khan for their respective code.
|
|
19
|
+
|
|
20
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
21
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
22
|
+
in the Software without restriction, including without limitation the rights
|
|
23
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
24
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
25
|
+
furnished to do so, subject to the following conditions:
|
|
26
|
+
|
|
27
|
+
The above copyright notice and this permission notice shall be included in all
|
|
28
|
+
copies or substantial portions of the Software.
|
|
29
|
+
|
|
30
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
31
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
32
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
33
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
34
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
35
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
36
|
+
SOFTWARE.
|
package/dist/index.d.mts
CHANGED
|
@@ -937,4 +937,30 @@ declare function getFilePreviewKind(file: File): FilePreviewKind;
|
|
|
937
937
|
*/
|
|
938
938
|
declare function FilePreview({ open, files, activeIndex, defaultActiveIndex, onActiveIndexChange, onClose, onEscape, onDelete, onDownload, closeOnBackdropClick, closeOnEscape, closeLabel, downloadLabel, deleteLabel, hideDownload, className, 'aria-label': ariaLabel, ...props }: FilePreviewProps): react.ReactPortal | null;
|
|
939
939
|
|
|
940
|
-
|
|
940
|
+
type NotFoundVariant = 'caveman' | 'bad_dream' | 'electric_shock';
|
|
941
|
+
type NotFoundSceneProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
|
|
942
|
+
title?: ReactNode;
|
|
943
|
+
description?: ReactNode;
|
|
944
|
+
/** Custom actions replace the default home button. Pass null to hide actions. */
|
|
945
|
+
action?: ReactNode;
|
|
946
|
+
homeLabel?: string;
|
|
947
|
+
/** Destination used when onHomeClick is omitted. Defaults to /. */
|
|
948
|
+
homeHref?: string;
|
|
949
|
+
onHomeClick?: ButtonProps['onClick'];
|
|
950
|
+
/** Pause all artwork, including the GIF. Reduced-motion preferences always win. */
|
|
951
|
+
animated?: boolean;
|
|
952
|
+
};
|
|
953
|
+
type NotFoundProps = NotFoundSceneProps & {
|
|
954
|
+
/** Random is picked once after mounting; rerenders preserve the selection. */
|
|
955
|
+
variant?: NotFoundVariant | 'random';
|
|
956
|
+
};
|
|
957
|
+
/** Two animated CSS cavemen, adapted from SofiaSergio's CodePen. */
|
|
958
|
+
declare function NotFoundCaveman(props: NotFoundSceneProps): react.JSX.Element;
|
|
959
|
+
/** Yeti and flashlight SVG, adapted from Darin Senneff's CodePen. */
|
|
960
|
+
declare function NotFoundYeti(props: NotFoundSceneProps): react.JSX.Element;
|
|
961
|
+
/** Original lost-caveman illustration from Naved khan's CodePen. */
|
|
962
|
+
declare function NotFoundLost(props: NotFoundSceneProps): react.JSX.Element;
|
|
963
|
+
/** A 404 page with a stable random design, or an explicitly selected variant. */
|
|
964
|
+
declare function NotFound({ variant, ...props }: NotFoundProps): react.JSX.Element;
|
|
965
|
+
|
|
966
|
+
export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };
|
package/dist/index.d.ts
CHANGED
|
@@ -937,4 +937,30 @@ declare function getFilePreviewKind(file: File): FilePreviewKind;
|
|
|
937
937
|
*/
|
|
938
938
|
declare function FilePreview({ open, files, activeIndex, defaultActiveIndex, onActiveIndexChange, onClose, onEscape, onDelete, onDownload, closeOnBackdropClick, closeOnEscape, closeLabel, downloadLabel, deleteLabel, hideDownload, className, 'aria-label': ariaLabel, ...props }: FilePreviewProps): react.ReactPortal | null;
|
|
939
939
|
|
|
940
|
-
|
|
940
|
+
type NotFoundVariant = 'caveman' | 'bad_dream' | 'electric_shock';
|
|
941
|
+
type NotFoundSceneProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
|
|
942
|
+
title?: ReactNode;
|
|
943
|
+
description?: ReactNode;
|
|
944
|
+
/** Custom actions replace the default home button. Pass null to hide actions. */
|
|
945
|
+
action?: ReactNode;
|
|
946
|
+
homeLabel?: string;
|
|
947
|
+
/** Destination used when onHomeClick is omitted. Defaults to /. */
|
|
948
|
+
homeHref?: string;
|
|
949
|
+
onHomeClick?: ButtonProps['onClick'];
|
|
950
|
+
/** Pause all artwork, including the GIF. Reduced-motion preferences always win. */
|
|
951
|
+
animated?: boolean;
|
|
952
|
+
};
|
|
953
|
+
type NotFoundProps = NotFoundSceneProps & {
|
|
954
|
+
/** Random is picked once after mounting; rerenders preserve the selection. */
|
|
955
|
+
variant?: NotFoundVariant | 'random';
|
|
956
|
+
};
|
|
957
|
+
/** Two animated CSS cavemen, adapted from SofiaSergio's CodePen. */
|
|
958
|
+
declare function NotFoundCaveman(props: NotFoundSceneProps): react.JSX.Element;
|
|
959
|
+
/** Yeti and flashlight SVG, adapted from Darin Senneff's CodePen. */
|
|
960
|
+
declare function NotFoundYeti(props: NotFoundSceneProps): react.JSX.Element;
|
|
961
|
+
/** Original lost-caveman illustration from Naved khan's CodePen. */
|
|
962
|
+
declare function NotFoundLost(props: NotFoundSceneProps): react.JSX.Element;
|
|
963
|
+
/** A 404 page with a stable random design, or an explicitly selected variant. */
|
|
964
|
+
declare function NotFound({ variant, ...props }: NotFoundProps): react.JSX.Element;
|
|
965
|
+
|
|
966
|
+
export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };
|