@touchtech/baselayer-ui 2.5.0 → 2.5.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.
Files changed (127) hide show
  1. package/dist/components/Button/Button.d.ts +22 -0
  2. package/dist/components/Button/__tests__/Button.test.d.ts +1 -0
  3. package/dist/components/Button/index.d.ts +2 -0
  4. package/dist/components/ButtonLink/ButtonLink.d.ts +21 -0
  5. package/dist/components/ButtonLink/__tests__/ButtonLink.test.d.ts +1 -0
  6. package/dist/components/ButtonLink/index.d.ts +1 -0
  7. package/dist/components/ColorPicker/ColorPicker.d.ts +9 -0
  8. package/dist/components/ColorPicker/__tests__/ColorPicker.test.d.ts +1 -0
  9. package/dist/components/ColorPicker/index.d.ts +1 -0
  10. package/dist/components/ColorSwatch/ColorSwatch.d.ts +8 -0
  11. package/dist/components/ColorSwatch/__tests__/ColorSwatch.test.d.ts +1 -0
  12. package/dist/components/ColorSwatch/index.d.ts +1 -0
  13. package/dist/components/ConfirmationModal/ConfirmationModal.d.ts +15 -0
  14. package/dist/components/ConfirmationModal/__tests__/ConfirmationModal.test.d.ts +1 -0
  15. package/dist/components/ConfirmationModal/index.d.ts +1 -0
  16. package/dist/components/FloatingPanel/FloatingPanel.d.ts +13 -0
  17. package/dist/components/FloatingPanel/__tests__/FloatingPanel.test.d.ts +1 -0
  18. package/dist/components/FloatingPanel/index.d.ts +1 -0
  19. package/dist/components/Icon/Icon.d.ts +8 -0
  20. package/dist/components/Icon/__tests__/Icon.test.d.ts +1 -0
  21. package/dist/components/Icon/index.d.ts +1 -0
  22. package/dist/components/IconButton/IconButton.d.ts +17 -0
  23. package/dist/components/IconButton/__tests__/IconButton.test.d.ts +1 -0
  24. package/dist/components/IconButton/index.d.ts +1 -0
  25. package/dist/components/IconButtonLink/IconButtonLink.d.ts +18 -0
  26. package/dist/components/IconButtonLink/__tests__/IconButtonLink.test.d.ts +1 -0
  27. package/dist/components/IconButtonLink/index.d.ts +1 -0
  28. package/dist/components/Image/Image.d.ts +11 -0
  29. package/dist/components/Image/__tests__/Image.test.d.ts +1 -0
  30. package/dist/components/Image/index.d.ts +1 -0
  31. package/dist/components/ListView/ListView.d.ts +8 -0
  32. package/dist/components/ListView/ListViewItem.d.ts +14 -0
  33. package/dist/components/ListView/__tests__/ListView.test.d.ts +1 -0
  34. package/dist/components/ListView/index.d.ts +3 -0
  35. package/dist/components/Menu/Menu.d.ts +14 -0
  36. package/dist/components/Menu/MenuContainer.d.ts +10 -0
  37. package/dist/components/Menu/MenuItem.d.ts +9 -0
  38. package/dist/components/Menu/MenuLinkItem.d.ts +8 -0
  39. package/dist/components/Menu/__tests__/Menu.test.d.ts +1 -0
  40. package/dist/components/Menu/__tests__/MenuLinkItem.test.d.ts +1 -0
  41. package/dist/components/Menu/index.d.ts +4 -0
  42. package/dist/components/Modal/Modal.d.ts +9 -0
  43. package/dist/components/Modal/__tests__/Modal.test.d.ts +1 -0
  44. package/dist/components/Modal/index.d.ts +1 -0
  45. package/dist/components/Overlay/Overlay.d.ts +9 -0
  46. package/dist/components/Overlay/__tests__/Overlay.test.d.ts +1 -0
  47. package/dist/components/Overlay/index.d.ts +1 -0
  48. package/dist/components/TextInput/TextInput.d.ts +16 -0
  49. package/dist/components/TextInput/__tests__/TextInput.test.d.ts +1 -0
  50. package/dist/components/TextInput/index.d.ts +1 -0
  51. package/dist/components/Toast/Toast.d.ts +13 -0
  52. package/dist/components/Toast/ToastContainer.d.ts +6 -0
  53. package/dist/components/Toast/__tests__/Toast.test.d.ts +1 -0
  54. package/dist/components/Toast/__tests__/ToastContainer.test.d.ts +1 -0
  55. package/dist/components/Toast/index.d.ts +2 -0
  56. package/dist/components/Video/Video.d.ts +21 -0
  57. package/dist/components/Video/__tests__/Video.test.d.ts +1 -0
  58. package/dist/components/Video/index.d.ts +1 -0
  59. package/dist/hooks/index.d.ts +2 -0
  60. package/dist/hooks/useOutsideClick.d.ts +4 -0
  61. package/dist/hooks/useToggle.d.ts +5 -0
  62. package/dist/index.d.ts +18 -0
  63. package/dist/types/components/Button/Button.d.ts +22 -0
  64. package/dist/types/components/Button/__tests__/Button.test.d.ts +1 -0
  65. package/dist/types/components/Button/index.d.ts +1 -0
  66. package/dist/types/components/ButtonLink/ButtonLink.d.ts +21 -0
  67. package/dist/types/components/ButtonLink/__tests__/ButtonLink.test.d.ts +1 -0
  68. package/dist/types/components/ButtonLink/index.d.ts +1 -0
  69. package/dist/types/components/ColorPicker/ColorPicker.d.ts +9 -0
  70. package/dist/types/components/ColorPicker/__tests__/ColorPicker.test.d.ts +1 -0
  71. package/dist/types/components/ColorPicker/index.d.ts +1 -0
  72. package/dist/types/components/ColorSwatch/ColorSwatch.d.ts +8 -0
  73. package/dist/types/components/ColorSwatch/__tests__/ColorSwatch.test.d.ts +1 -0
  74. package/dist/types/components/ColorSwatch/index.d.ts +1 -0
  75. package/dist/types/components/ConfirmationModal/ConfirmationModal.d.ts +15 -0
  76. package/dist/types/components/ConfirmationModal/__tests__/ConfirmationModal.test.d.ts +1 -0
  77. package/dist/types/components/ConfirmationModal/index.d.ts +1 -0
  78. package/dist/types/components/FloatingPanel/FloatingPanel.d.ts +13 -0
  79. package/dist/types/components/FloatingPanel/__tests__/FloatingPanel.test.d.ts +1 -0
  80. package/dist/types/components/FloatingPanel/index.d.ts +1 -0
  81. package/dist/types/components/Icon/Icon.d.ts +8 -0
  82. package/dist/types/components/Icon/__tests__/Icon.test.d.ts +1 -0
  83. package/dist/types/components/Icon/index.d.ts +1 -0
  84. package/dist/types/components/IconButton/IconButton.d.ts +17 -0
  85. package/dist/types/components/IconButton/__tests__/IconButton.test.d.ts +1 -0
  86. package/dist/types/components/IconButton/index.d.ts +1 -0
  87. package/dist/types/components/IconButtonLink/IconButtonLink.d.ts +18 -0
  88. package/dist/types/components/IconButtonLink/__tests__/IconButtonLink.test.d.ts +1 -0
  89. package/dist/types/components/IconButtonLink/index.d.ts +1 -0
  90. package/dist/types/components/Image/Image.d.ts +11 -0
  91. package/dist/types/components/Image/__tests__/Image.test.d.ts +1 -0
  92. package/dist/types/components/Image/index.d.ts +1 -0
  93. package/dist/types/components/ListView/ListView.d.ts +8 -0
  94. package/dist/types/components/ListView/ListViewItem.d.ts +14 -0
  95. package/dist/types/components/ListView/__tests__/ListView.test.d.ts +1 -0
  96. package/dist/types/components/ListView/index.d.ts +3 -0
  97. package/dist/types/components/Menu/Menu.d.ts +14 -0
  98. package/dist/types/components/Menu/MenuContainer.d.ts +10 -0
  99. package/dist/types/components/Menu/MenuItem.d.ts +9 -0
  100. package/dist/types/components/Menu/MenuLinkItem.d.ts +8 -0
  101. package/dist/types/components/Menu/__tests__/Menu.test.d.ts +1 -0
  102. package/dist/types/components/Menu/__tests__/MenuLinkItem.test.d.ts +1 -0
  103. package/dist/types/components/Menu/index.d.ts +4 -0
  104. package/dist/types/components/Modal/Modal.d.ts +9 -0
  105. package/dist/types/components/Modal/__tests__/Modal.test.d.ts +1 -0
  106. package/dist/types/components/Modal/index.d.ts +1 -0
  107. package/dist/types/components/Overlay/Overlay.d.ts +9 -0
  108. package/dist/types/components/Overlay/__tests__/Overlay.test.d.ts +1 -0
  109. package/dist/types/components/Overlay/index.d.ts +1 -0
  110. package/dist/types/components/TextInput/TextInput.d.ts +16 -0
  111. package/dist/types/components/TextInput/__tests__/TextInput.test.d.ts +1 -0
  112. package/dist/types/components/TextInput/index.d.ts +1 -0
  113. package/dist/types/components/Toast/Toast.d.ts +13 -0
  114. package/dist/types/components/Toast/ToastContainer.d.ts +6 -0
  115. package/dist/types/components/Toast/__tests__/Toast.test.d.ts +1 -0
  116. package/dist/types/components/Toast/__tests__/ToastContainer.test.d.ts +1 -0
  117. package/dist/types/components/Toast/index.d.ts +2 -0
  118. package/dist/types/components/Video/Video.d.ts +21 -0
  119. package/dist/types/components/Video/__tests__/Video.test.d.ts +1 -0
  120. package/dist/types/components/Video/index.d.ts +1 -0
  121. package/dist/types/hooks/index.d.ts +2 -0
  122. package/dist/types/hooks/useOutsideClick.d.ts +4 -0
  123. package/dist/types/hooks/useToggle.d.ts +5 -0
  124. package/dist/types/index.d.ts +18 -0
  125. package/dist/types/types/index.d.ts +7 -0
  126. package/package.json +2 -1
  127. package/dist/640e1c62fd0dfa7c00a1c8fe0e35c6d1.svg +0 -3
@@ -0,0 +1,22 @@
1
+ import React, { ReactNode } from "react";
2
+ import { Size } from "../../types";
3
+ export declare type ButtonProps = {
4
+ children: ReactNode;
5
+ className?: string;
6
+ disabled?: boolean;
7
+ inverted?: boolean;
8
+ rounded?: boolean;
9
+ noShadow?: boolean;
10
+ noPadding?: boolean;
11
+ noBorder?: boolean;
12
+ transparent?: boolean;
13
+ stretchHorizontally?: boolean;
14
+ stretchVertically?: boolean;
15
+ onClick?: (event: React.SyntheticEvent) => void;
16
+ size?: Size;
17
+ type?: "submit" | "reset" | "button";
18
+ align?: "left" | "center";
19
+ offsetSides?: Array<"left" | "right">;
20
+ };
21
+ declare function Button({ children, className, onClick, disabled, inverted, rounded, noShadow, noPadding, noBorder, transparent, stretchHorizontally, stretchVertically, offsetSides, align, size, type, }: ButtonProps): JSX.Element;
22
+ export default Button;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ export { default as Button } from "./Button";
2
+ export * from "./Button";
@@ -0,0 +1,21 @@
1
+ import { ReactNode, ReactType } from "react";
2
+ import { Size } from "../../types";
3
+ declare type OffsetSide = "left" | "right";
4
+ declare type ButtonLinkProps = {
5
+ as?: ReactType;
6
+ children: ReactNode;
7
+ className?: string;
8
+ inverted?: boolean;
9
+ rounded?: boolean;
10
+ transparent?: boolean;
11
+ noShadow?: boolean;
12
+ noPadding?: boolean;
13
+ noBorder?: boolean;
14
+ stretchHorizontally?: boolean;
15
+ stretchVertically?: boolean;
16
+ size?: Size;
17
+ offsetSides?: Array<OffsetSide>;
18
+ align?: "left" | "center";
19
+ } | any;
20
+ declare function ButtonLink({ as: Component, children, className, size, inverted, rounded, transparent, noShadow, noPadding, noBorder, stretchHorizontally, stretchVertically, offsetSides, align, ...props }: ButtonLinkProps): JSX.Element;
21
+ export default ButtonLink;
@@ -0,0 +1 @@
1
+ export { default as ButtonLink } from "./ButtonLink";
@@ -0,0 +1,9 @@
1
+ import { Color } from "../../types";
2
+ declare type ColorPickerProps = {
3
+ direction?: "horizontal" | "vertical";
4
+ colors: Color[];
5
+ onSelect: (color: Color) => void;
6
+ selectedColor?: Color;
7
+ };
8
+ declare function ColorPicker({ colors, onSelect, selectedColor, direction }: ColorPickerProps): JSX.Element;
9
+ export default ColorPicker;
@@ -0,0 +1 @@
1
+ export { default as ColorPicker } from "./ColorPicker";
@@ -0,0 +1,8 @@
1
+ import { Color } from "../../types";
2
+ declare type ColorSwatchProps = {
3
+ color: Color;
4
+ isSelected?: boolean;
5
+ onClick: () => void;
6
+ };
7
+ declare function ColorSwatch({ color, onClick, isSelected }: ColorSwatchProps): JSX.Element;
8
+ export default ColorSwatch;
@@ -0,0 +1 @@
1
+ export { default as ColorSwatch } from "./ColorSwatch";
@@ -0,0 +1,15 @@
1
+ import { ReactElement, ReactNode } from "react";
2
+ declare type ConfirmationModalProps = {
3
+ buttonsLeft?: ReactElement[];
4
+ buttonsRight?: ReactElement[];
5
+ children: ReactNode;
6
+ header: string;
7
+ isOpen: boolean;
8
+ noPadding?: boolean;
9
+ onClose?: () => void;
10
+ };
11
+ declare function ConfirmationModal({ children, header, isOpen, buttonsLeft, buttonsRight, onClose, noPadding, }: ConfirmationModalProps): JSX.Element;
12
+ declare namespace ConfirmationModal {
13
+ var displayName: string;
14
+ }
15
+ export default ConfirmationModal;
@@ -0,0 +1 @@
1
+ export { default as ConfirmationModal } from "./ConfirmationModal";
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from "react";
2
+ declare type Placement = {
3
+ horizontal: "right" | "rightEdge" | "rightOnEdge" | "left" | "leftEdge" | "leftOnEdge" | "leftOnEdge" | "center";
4
+ vertical: "top" | "topEdge" | "bottom" | "bottomEdge" | "bottomOnEdge" | "center";
5
+ parent: "viewport" | "container";
6
+ };
7
+ declare type FloatingPanelProps = {
8
+ children: ReactNode;
9
+ layout?: "column" | "row";
10
+ placement?: Placement;
11
+ };
12
+ declare function FloatingPanel({ children, layout, placement }: FloatingPanelProps): JSX.Element;
13
+ export default FloatingPanel;
@@ -0,0 +1 @@
1
+ export { default as FloatingPanel } from "./FloatingPanel";
@@ -0,0 +1,8 @@
1
+ declare type IconProps = {
2
+ src: string;
3
+ alt?: string;
4
+ size?: "small" | "medium" | "large";
5
+ inverted?: boolean;
6
+ };
7
+ declare function Icon({ src, alt, size, inverted }: IconProps): JSX.Element;
8
+ export default Icon;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export { default as Icon } from "./Icon";
@@ -0,0 +1,17 @@
1
+ declare type IconButtonProps = {
2
+ className?: string;
3
+ src: string;
4
+ alt: string;
5
+ disabled?: boolean;
6
+ inverted?: boolean;
7
+ noShadow?: boolean;
8
+ noBorder?: boolean;
9
+ transparent?: boolean;
10
+ rounded?: boolean;
11
+ onClick?: () => void;
12
+ size?: "small" | "medium" | "large";
13
+ type?: "submit" | "reset" | "button";
14
+ offsetSides?: Array<"top" | "right" | "bottom" | "left">;
15
+ };
16
+ declare function IconButton({ className, src, alt, offsetSides, onClick, disabled, inverted, noShadow, noBorder, transparent, rounded, size, type, }: IconButtonProps): JSX.Element;
17
+ export default IconButton;
@@ -0,0 +1 @@
1
+ export { default as IconButton } from "./IconButton";
@@ -0,0 +1,18 @@
1
+ import { ReactType } from "react";
2
+ import { Size } from "../../types";
3
+ declare type OffsetSide = "top" | "right" | "bottom" | "left";
4
+ declare type IconButtonLinkProps = {
5
+ as?: ReactType;
6
+ src: string;
7
+ alt: string;
8
+ className?: string;
9
+ inverted?: boolean;
10
+ rounded?: boolean;
11
+ transparent?: boolean;
12
+ noShadow?: boolean;
13
+ noBorder?: boolean;
14
+ size?: Size;
15
+ offsetSides?: Array<OffsetSide>;
16
+ } | any;
17
+ declare function IconButtonLink({ as: Component, className, src, alt, inverted, noShadow, noBorder, transparent, rounded, offsetSides, size, ...props }: IconButtonLinkProps): JSX.Element;
18
+ export default IconButtonLink;
@@ -0,0 +1 @@
1
+ export { default as IconButtonLink } from "./IconButtonLink";
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ declare type ImageProps = {
3
+ src: string;
4
+ alt?: string;
5
+ srcWidth?: number;
6
+ srcHeight?: number;
7
+ children?: React.ReactNode;
8
+ layout?: "cover" | "contain" | "stretchHorizontally" | "stretchVertically";
9
+ };
10
+ declare function Image({ src, alt, srcWidth, srcHeight, children, layout }: ImageProps): JSX.Element;
11
+ export default Image;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export { default as Image } from "./Image";
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from "react";
2
+ declare type ListViewProps = {
3
+ children: ReactNode;
4
+ className?: string;
5
+ header?: string;
6
+ };
7
+ declare function ListView({ children, className, header }: ListViewProps): JSX.Element;
8
+ export default ListView;
@@ -0,0 +1,14 @@
1
+ import { ReactNode } from "react";
2
+ import { Size } from "../../types";
3
+ declare type ListViewItemProps = {
4
+ children: ReactNode;
5
+ active?: boolean;
6
+ disabled?: boolean;
7
+ transparent?: boolean;
8
+ noPadding?: boolean;
9
+ size?: Size;
10
+ align?: "left" | "center";
11
+ onClick?: () => void;
12
+ };
13
+ declare function ListViewItem({ children, active, disabled, transparent, noPadding, size, align, onClick, }: ListViewItemProps): JSX.Element;
14
+ export default ListViewItem;
@@ -0,0 +1,3 @@
1
+ export { default as ListView } from "./ListView";
2
+ export { default as ListViewItem } from "./ListViewItem";
3
+ export { default as ListViewLinkItem } from "./ListViewLinkItem";
@@ -0,0 +1,14 @@
1
+ import { ReactNode } from "react";
2
+ declare type Placement = {
3
+ horizontal: "right" | "left";
4
+ vertical: "top" | "bottom";
5
+ };
6
+ declare type MenuProps = {
7
+ children: ReactNode;
8
+ className?: string;
9
+ isOpen?: boolean;
10
+ header?: string;
11
+ placement?: Placement;
12
+ };
13
+ declare function Menu({ children, className, isOpen, placement, header }: MenuProps): JSX.Element;
14
+ export default Menu;
@@ -0,0 +1,10 @@
1
+ import React, { ReactNode } from "react";
2
+ declare type MenuContainerProps = {
3
+ children: ReactNode;
4
+ className?: string;
5
+ ref?: () => void | {
6
+ current: any;
7
+ };
8
+ };
9
+ declare const _default: React.ForwardRefExoticComponent<Pick<MenuContainerProps, "children" | "className"> & React.RefAttributes<unknown>>;
10
+ export default _default;
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from "react";
2
+ declare type MenuItemProps = {
3
+ children: ReactNode;
4
+ className?: string;
5
+ isActive?: boolean;
6
+ onClick?: () => void;
7
+ };
8
+ declare function MenuItem({ children, className, onClick, isActive }: MenuItemProps): JSX.Element;
9
+ export default MenuItem;
@@ -0,0 +1,8 @@
1
+ import { ReactNode, ReactType } from "react";
2
+ declare type MenuLinkItemProps = {
3
+ as: ReactType;
4
+ children: ReactNode;
5
+ className: string;
6
+ } | any;
7
+ declare function MenuLinkItem({ as: Component, children, className, ...props }: MenuLinkItemProps): JSX.Element;
8
+ export default MenuLinkItem;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,4 @@
1
+ export { default as Menu } from "./Menu";
2
+ export { default as MenuContainer } from "./MenuContainer";
3
+ export { default as MenuItem } from "./MenuItem";
4
+ export { default as MenuLinkItem } from "./MenuLinkItem";
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from "react";
2
+ declare type ModalProps = {
3
+ children: ReactNode;
4
+ isOpen: boolean;
5
+ onClose?: () => void;
6
+ button?: ReactNode;
7
+ };
8
+ declare function Modal({ children, isOpen, button, onClose }: ModalProps): JSX.Element;
9
+ export default Modal;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export { default as Modal } from "./Modal";
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from "react";
2
+ declare type OverlayProps = {
3
+ children: ReactNode;
4
+ transparent?: boolean;
5
+ isFixed?: boolean;
6
+ onClick?: () => void;
7
+ };
8
+ declare function Overlay({ children, transparent, isFixed, onClick }: OverlayProps): JSX.Element;
9
+ export default Overlay;
@@ -0,0 +1 @@
1
+ export { default as Overlay } from "./Overlay";
@@ -0,0 +1,16 @@
1
+ import { Size, TextInputType } from "../../types";
2
+ declare type TextInputProps = {
3
+ label: string;
4
+ onChange?: (value: string) => void;
5
+ placeholder?: string;
6
+ value?: string;
7
+ name?: string;
8
+ type?: TextInputType;
9
+ size?: Size;
10
+ autoFocus?: boolean;
11
+ inputRef?: () => void | {
12
+ current: any;
13
+ };
14
+ };
15
+ declare function TextInput({ label, onChange, placeholder, value, name, inputRef, size, autoFocus, type, }: TextInputProps): JSX.Element;
16
+ export default TextInput;
@@ -0,0 +1 @@
1
+ export { default as TextInput } from "./TextInput";
@@ -0,0 +1,13 @@
1
+ import { ReactNode, ReactNodeArray } from "react";
2
+ declare type ImageType = {
3
+ src: string;
4
+ alt: string;
5
+ };
6
+ declare type ToastProps = {
7
+ children: ReactNode;
8
+ buttons: ReactNodeArray;
9
+ image?: ImageType;
10
+ onClick?: () => void;
11
+ };
12
+ declare function Toast({ children, image, buttons, onClick }: ToastProps): JSX.Element;
13
+ export default Toast;
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from "react";
2
+ declare type ToastContainerProps = {
3
+ children?: ReactNode;
4
+ };
5
+ declare function ToastContainer({ children }: ToastContainerProps): JSX.Element;
6
+ export default ToastContainer;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ export { default as Toast } from "./Toast";
2
+ export { default as ToastContainer } from "./ToastContainer";
@@ -0,0 +1,21 @@
1
+ import { ReactNode } from "react";
2
+ /**
3
+ * There is a known issue in React in regards to the 'muted' property which causes the warning:
4
+ * "Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering."
5
+ *
6
+ * https://github.com/facebook/react/issues/10389
7
+ * https://github.com/facebook/react/issues/6544
8
+ * https://github.com/testing-library/react-testing-library/issues/470
9
+ */
10
+ declare type Layout = "cover" | "contain" | "stretchHorizontally" | "stretchVertically";
11
+ declare type VideoProps = {
12
+ src: string;
13
+ type: string;
14
+ layout?: Layout;
15
+ autoPlay?: boolean;
16
+ loop?: boolean;
17
+ muted?: boolean;
18
+ children?: ReactNode;
19
+ };
20
+ declare function Video({ src, type, children, muted, loop, autoPlay, layout }: VideoProps): JSX.Element;
21
+ export default Video;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export { default as Video } from "./Video";
@@ -0,0 +1,2 @@
1
+ export { default as useToggle } from "./useToggle";
2
+ export { default as useOutsideClick } from "./useOutsideClick";
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ declare type Callback = (event: Event) => void;
3
+ export default function useOutsideClick(callback: Callback): import("react").MutableRefObject<HTMLElement>;
4
+ export {};
@@ -0,0 +1,5 @@
1
+ export default function useToggle(initialState?: boolean): (boolean | {
2
+ (): void;
3
+ on(): void;
4
+ off(): void;
5
+ })[];
@@ -0,0 +1,18 @@
1
+ export * from "./components/Button";
2
+ export * from "./components/ButtonLink";
3
+ export * from "./components/ColorPicker";
4
+ export * from "./components/ColorSwatch";
5
+ export * from "./components/ConfirmationModal";
6
+ export * from "./components/FloatingPanel";
7
+ export * from "./components/Icon";
8
+ export * from "./components/IconButton";
9
+ export * from "./components/IconButtonLink";
10
+ export * from "./components/Image";
11
+ export * from "./components/ListView";
12
+ export * from "./components/Menu";
13
+ export * from "./components/Modal";
14
+ export * from "./components/Overlay";
15
+ export * from "./components/TextInput";
16
+ export * from "./components/Toast";
17
+ export * from "./components/Video";
18
+ export * from "./hooks";
@@ -0,0 +1,22 @@
1
+ import React, { ReactNode } from "react";
2
+ import { Size } from "../../types";
3
+ declare type ButtonProps = {
4
+ children: ReactNode;
5
+ className?: string;
6
+ disabled?: boolean;
7
+ inverted?: boolean;
8
+ rounded?: boolean;
9
+ noShadow?: boolean;
10
+ noPadding?: boolean;
11
+ noBorder?: boolean;
12
+ transparent?: boolean;
13
+ stretchHorizontally?: boolean;
14
+ stretchVertically?: boolean;
15
+ onClick?: (event: React.SyntheticEvent) => void;
16
+ size?: Size;
17
+ type?: "submit" | "reset" | "button";
18
+ align?: "left" | "center";
19
+ offsetSides?: Array<"left" | "right">;
20
+ };
21
+ declare function Button({ children, className, onClick, disabled, inverted, rounded, noShadow, noPadding, noBorder, transparent, stretchHorizontally, stretchVertically, offsetSides, align, size, type, }: ButtonProps): JSX.Element;
22
+ export default Button;
@@ -0,0 +1 @@
1
+ export { default as Button } from "./Button";
@@ -0,0 +1,21 @@
1
+ import { ReactNode, ReactType } from "react";
2
+ import { Size } from "../../types";
3
+ declare type OffsetSide = "left" | "right";
4
+ declare type ButtonLinkProps = {
5
+ as?: ReactType;
6
+ children: ReactNode;
7
+ className?: string;
8
+ inverted?: boolean;
9
+ rounded?: boolean;
10
+ transparent?: boolean;
11
+ noShadow?: boolean;
12
+ noPadding?: boolean;
13
+ noBorder?: boolean;
14
+ stretchHorizontally?: boolean;
15
+ stretchVertically?: boolean;
16
+ size?: Size;
17
+ offsetSides?: Array<OffsetSide>;
18
+ align?: "left" | "center";
19
+ } | any;
20
+ declare function ButtonLink({ as: Component, children, className, size, inverted, rounded, transparent, noShadow, noPadding, noBorder, stretchHorizontally, stretchVertically, offsetSides, align, ...props }: ButtonLinkProps): JSX.Element;
21
+ export default ButtonLink;
@@ -0,0 +1 @@
1
+ export { default as ButtonLink } from "./ButtonLink";
@@ -0,0 +1,9 @@
1
+ import { Color } from "../../types";
2
+ declare type ColorPickerProps = {
3
+ direction?: "horizontal" | "vertical";
4
+ colors: Color[];
5
+ onSelect: (color: Color) => void;
6
+ selectedColor?: Color;
7
+ };
8
+ declare function ColorPicker({ colors, onSelect, selectedColor, direction }: ColorPickerProps): JSX.Element;
9
+ export default ColorPicker;
@@ -0,0 +1 @@
1
+ export { default as ColorPicker } from "./ColorPicker";
@@ -0,0 +1,8 @@
1
+ import { Color } from "../../types";
2
+ declare type ColorSwatchProps = {
3
+ color: Color;
4
+ isSelected?: boolean;
5
+ onClick: () => void;
6
+ };
7
+ declare function ColorSwatch({ color, onClick, isSelected }: ColorSwatchProps): JSX.Element;
8
+ export default ColorSwatch;
@@ -0,0 +1 @@
1
+ export { default as ColorSwatch } from "./ColorSwatch";
@@ -0,0 +1,15 @@
1
+ import { ReactElement, ReactNode } from "react";
2
+ declare type ConfirmationModalProps = {
3
+ buttonsLeft?: ReactElement[];
4
+ buttonsRight?: ReactElement[];
5
+ children: ReactNode;
6
+ header: string;
7
+ isOpen: boolean;
8
+ noPadding?: boolean;
9
+ onClose?: () => void;
10
+ };
11
+ declare function ConfirmationModal({ children, header, isOpen, buttonsLeft, buttonsRight, onClose, noPadding, }: ConfirmationModalProps): JSX.Element;
12
+ declare namespace ConfirmationModal {
13
+ var displayName: string;
14
+ }
15
+ export default ConfirmationModal;
@@ -0,0 +1 @@
1
+ export { default as ConfirmationModal } from "./ConfirmationModal";
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from "react";
2
+ declare type Placement = {
3
+ horizontal: "right" | "rightEdge" | "rightOnEdge" | "left" | "leftEdge" | "leftOnEdge" | "leftOnEdge" | "center";
4
+ vertical: "top" | "topEdge" | "bottom" | "bottomEdge" | "bottomOnEdge" | "center";
5
+ parent: "viewport" | "container";
6
+ };
7
+ declare type FloatingPanelProps = {
8
+ children: ReactNode;
9
+ layout?: "column" | "row";
10
+ placement?: Placement;
11
+ };
12
+ declare function FloatingPanel({ children, layout, placement }: FloatingPanelProps): JSX.Element;
13
+ export default FloatingPanel;
@@ -0,0 +1 @@
1
+ export { default as FloatingPanel } from "./FloatingPanel";
@@ -0,0 +1,8 @@
1
+ declare type IconProps = {
2
+ src: string;
3
+ alt?: string;
4
+ size?: "small" | "medium" | "large";
5
+ inverted?: boolean;
6
+ };
7
+ declare function Icon({ src, alt, size, inverted }: IconProps): JSX.Element;
8
+ export default Icon;
@@ -0,0 +1 @@
1
+ export { default as Icon } from "./Icon";
@@ -0,0 +1,17 @@
1
+ declare type IconButtonProps = {
2
+ className?: string;
3
+ src: string;
4
+ alt: string;
5
+ disabled?: boolean;
6
+ inverted?: boolean;
7
+ noShadow?: boolean;
8
+ noBorder?: boolean;
9
+ transparent?: boolean;
10
+ rounded?: boolean;
11
+ onClick?: () => void;
12
+ size?: "small" | "medium" | "large";
13
+ type?: "submit" | "reset" | "button";
14
+ offsetSides?: Array<"top" | "right" | "bottom" | "left">;
15
+ };
16
+ declare function IconButton({ className, src, alt, offsetSides, onClick, disabled, inverted, noShadow, noBorder, transparent, rounded, size, type, }: IconButtonProps): JSX.Element;
17
+ export default IconButton;
@@ -0,0 +1 @@
1
+ export { default as IconButton } from "./IconButton";
@@ -0,0 +1,18 @@
1
+ import { ReactType } from "react";
2
+ import { Size } from "../../types";
3
+ declare type OffsetSide = "top" | "right" | "bottom" | "left";
4
+ declare type IconButtonLinkProps = {
5
+ as?: ReactType;
6
+ src: string;
7
+ alt: string;
8
+ className?: string;
9
+ inverted?: boolean;
10
+ rounded?: boolean;
11
+ transparent?: boolean;
12
+ noShadow?: boolean;
13
+ noBorder?: boolean;
14
+ size?: Size;
15
+ offsetSides?: Array<OffsetSide>;
16
+ } | any;
17
+ declare function IconButtonLink({ as: Component, className, src, alt, inverted, noShadow, noBorder, transparent, rounded, offsetSides, size, ...props }: IconButtonLinkProps): JSX.Element;
18
+ export default IconButtonLink;
@@ -0,0 +1 @@
1
+ export { default as IconButtonLink } from "./IconButtonLink";
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ declare type ImageProps = {
3
+ src: string;
4
+ alt?: string;
5
+ srcWidth?: number;
6
+ srcHeight?: number;
7
+ children?: React.ReactNode;
8
+ layout?: "cover" | "contain" | "stretchHorizontally" | "stretchVertically";
9
+ };
10
+ declare function Image({ src, alt, srcWidth, srcHeight, children, layout }: ImageProps): JSX.Element;
11
+ export default Image;
@@ -0,0 +1 @@
1
+ export { default as Image } from "./Image";
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from "react";
2
+ declare type ListViewProps = {
3
+ children: ReactNode;
4
+ className?: string;
5
+ header?: string;
6
+ };
7
+ declare function ListView({ children, className, header }: ListViewProps): JSX.Element;
8
+ export default ListView;
@@ -0,0 +1,14 @@
1
+ import { ReactNode } from "react";
2
+ import { Size } from "../../types";
3
+ declare type ListViewItemProps = {
4
+ children: ReactNode;
5
+ active?: boolean;
6
+ disabled?: boolean;
7
+ transparent?: boolean;
8
+ noPadding?: boolean;
9
+ size?: Size;
10
+ align?: "left" | "center";
11
+ onClick?: () => void;
12
+ };
13
+ declare function ListViewItem({ children, active, disabled, transparent, noPadding, size, align, onClick, }: ListViewItemProps): JSX.Element;
14
+ export default ListViewItem;
@@ -0,0 +1,3 @@
1
+ export { default as ListView } from "./ListView";
2
+ export { default as ListViewItem } from "./ListViewItem";
3
+ export { default as ListViewLinkItem } from "./ListViewLinkItem";
@@ -0,0 +1,14 @@
1
+ import { ReactNode } from "react";
2
+ declare type Placement = {
3
+ horizontal: "right" | "left";
4
+ vertical: "top" | "bottom";
5
+ };
6
+ declare type MenuProps = {
7
+ children: ReactNode;
8
+ className?: string;
9
+ isOpen?: boolean;
10
+ header?: string;
11
+ placement?: Placement;
12
+ };
13
+ declare function Menu({ children, className, isOpen, placement, header }: MenuProps): JSX.Element;
14
+ export default Menu;
@@ -0,0 +1,10 @@
1
+ import React, { ReactNode } from "react";
2
+ declare type MenuContainerProps = {
3
+ children: ReactNode;
4
+ className?: string;
5
+ ref?: () => void | {
6
+ current: any;
7
+ };
8
+ };
9
+ declare const _default: React.ForwardRefExoticComponent<Pick<MenuContainerProps, "children" | "className"> & React.RefAttributes<unknown>>;
10
+ export default _default;
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from "react";
2
+ declare type MenuItemProps = {
3
+ children: ReactNode;
4
+ className?: string;
5
+ isActive?: boolean;
6
+ onClick?: () => void;
7
+ };
8
+ declare function MenuItem({ children, className, onClick, isActive }: MenuItemProps): JSX.Element;
9
+ export default MenuItem;
@@ -0,0 +1,8 @@
1
+ import { ReactNode, ReactType } from "react";
2
+ declare type MenuLinkItemProps = {
3
+ as: ReactType;
4
+ children: ReactNode;
5
+ className: string;
6
+ } | any;
7
+ declare function MenuLinkItem({ as: Component, children, className, ...props }: MenuLinkItemProps): JSX.Element;
8
+ export default MenuLinkItem;
@@ -0,0 +1,4 @@
1
+ export { default as Menu } from "./Menu";
2
+ export { default as MenuContainer } from "./MenuContainer";
3
+ export { default as MenuItem } from "./MenuItem";
4
+ export { default as MenuLinkItem } from "./MenuLinkItem";
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from "react";
2
+ declare type ModalProps = {
3
+ children: ReactNode;
4
+ isOpen: boolean;
5
+ onClose?: () => void;
6
+ button?: ReactNode;
7
+ };
8
+ declare function Modal({ children, isOpen, button, onClose }: ModalProps): JSX.Element;
9
+ export default Modal;
@@ -0,0 +1 @@
1
+ export { default as Modal } from "./Modal";
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from "react";
2
+ declare type OverlayProps = {
3
+ children: ReactNode;
4
+ transparent?: boolean;
5
+ isFixed?: boolean;
6
+ onClick?: () => void;
7
+ };
8
+ declare function Overlay({ children, transparent, isFixed, onClick }: OverlayProps): JSX.Element;
9
+ export default Overlay;
@@ -0,0 +1 @@
1
+ export { default as Overlay } from "./Overlay";
@@ -0,0 +1,16 @@
1
+ import { Size, TextInputType } from "../../types";
2
+ declare type TextInputProps = {
3
+ label: string;
4
+ onChange?: (value: string) => void;
5
+ placeholder?: string;
6
+ value?: string;
7
+ name?: string;
8
+ type?: TextInputType;
9
+ size?: Size;
10
+ autoFocus?: boolean;
11
+ inputRef?: () => void | {
12
+ current: any;
13
+ };
14
+ };
15
+ declare function TextInput({ label, onChange, placeholder, value, name, inputRef, size, autoFocus, type, }: TextInputProps): JSX.Element;
16
+ export default TextInput;
@@ -0,0 +1 @@
1
+ export { default as TextInput } from "./TextInput";
@@ -0,0 +1,13 @@
1
+ import { ReactNode, ReactNodeArray } from "react";
2
+ declare type ImageType = {
3
+ src: string;
4
+ alt: string;
5
+ };
6
+ declare type ToastProps = {
7
+ children: ReactNode;
8
+ buttons: ReactNodeArray;
9
+ image?: ImageType;
10
+ onClick?: () => void;
11
+ };
12
+ declare function Toast({ children, image, buttons, onClick }: ToastProps): JSX.Element;
13
+ export default Toast;
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from "react";
2
+ declare type ToastContainerProps = {
3
+ children?: ReactNode;
4
+ };
5
+ declare function ToastContainer({ children }: ToastContainerProps): JSX.Element;
6
+ export default ToastContainer;
@@ -0,0 +1,2 @@
1
+ export { default as Toast } from "./Toast";
2
+ export { default as ToastContainer } from "./ToastContainer";
@@ -0,0 +1,21 @@
1
+ import { ReactNode } from "react";
2
+ /**
3
+ * There is a known issue in React in regards to the 'muted' property which causes the warning:
4
+ * "Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering."
5
+ *
6
+ * https://github.com/facebook/react/issues/10389
7
+ * https://github.com/facebook/react/issues/6544
8
+ * https://github.com/testing-library/react-testing-library/issues/470
9
+ */
10
+ declare type Layout = "cover" | "contain" | "stretchHorizontally" | "stretchVertically";
11
+ declare type VideoProps = {
12
+ src: string;
13
+ type: string;
14
+ layout?: Layout;
15
+ autoPlay?: boolean;
16
+ loop?: boolean;
17
+ muted?: boolean;
18
+ children?: ReactNode;
19
+ };
20
+ declare function Video({ src, type, children, muted, loop, autoPlay, layout }: VideoProps): JSX.Element;
21
+ export default Video;
@@ -0,0 +1 @@
1
+ export { default as Video } from "./Video";
@@ -0,0 +1,2 @@
1
+ export { default as useToggle } from "./useToggle";
2
+ export { default as useOutsideClick } from "./useOutsideClick";
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ declare type Callback = (event: Event) => void;
3
+ export default function useOutsideClick(callback: Callback): import("react").MutableRefObject<HTMLElement>;
4
+ export {};
@@ -0,0 +1,5 @@
1
+ export default function useToggle(initialState?: boolean): (boolean | {
2
+ (): void;
3
+ on(): void;
4
+ off(): void;
5
+ })[];
@@ -0,0 +1,18 @@
1
+ export * from "./components/Button";
2
+ export * from "./components/ButtonLink";
3
+ export * from "./components/ColorPicker";
4
+ export * from "./components/ColorSwatch";
5
+ export * from "./components/ConfirmationModal";
6
+ export * from "./components/FloatingPanel";
7
+ export * from "./components/Icon";
8
+ export * from "./components/IconButton";
9
+ export * from "./components/IconButtonLink";
10
+ export * from "./components/Image";
11
+ export * from "./components/ListView";
12
+ export * from "./components/Menu";
13
+ export * from "./components/Modal";
14
+ export * from "./components/Overlay";
15
+ export * from "./components/TextInput";
16
+ export * from "./components/Toast";
17
+ export * from "./components/Video";
18
+ export * from "./hooks";
@@ -0,0 +1,7 @@
1
+ export declare type Size = "small" | "medium" | "large";
2
+ export declare type TextInputType = "text" | "password" | "email";
3
+ export declare type Color = {
4
+ hexCode: string;
5
+ key: string;
6
+ label: string;
7
+ };
package/package.json CHANGED
@@ -1,8 +1,9 @@
1
1
  {
2
2
  "name": "@touchtech/baselayer-ui",
3
- "version": "2.5.0",
3
+ "version": "2.5.1",
4
4
  "description": "React UI component library",
5
5
  "main": "dist/bundle.js",
6
+ "types": "dist/index.d.ts",
6
7
  "scripts": {
7
8
  "start": "start-storybook",
8
9
  "eslint": "eslint --ignore-path .gitignore",
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="1932" height="1254" viewBox="0 0 1932 1254">
2
- <path d="M547,564 L2172,564 C2207,564 2236,592 2236,627 C2236,662 2207,691 2172,691 L547,691 L1003,1146 C1028,1171 1028,1211 1003,1236 C978,1260 938,1260 913,1236 L304,627 L913,18 C938,-6 978,-6 1003,18 C1028,43 1028,83 1003,108 L547,564 Z" transform="translate(-304)"/>
3
- </svg>