@touchtech/baselayer-ui 2.6.1 → 2.6.3-alpha

package/README.md

@@ -1,79 +1,79 @@
-# Baselayer UI - React Component Library
-
-https://baselayer-ui.touchtech.com
-
-## Included Hooks
-- useOutsideClick
-- useToggle
-
-## Development
-
-Run `npm install` to install the project dependencies. Since this library is used by multiple Digital Showroom projects it's important that we create
-a global [link](https://docs.npmjs.com/cli/link) so we can use this local copy in the other projects during development. Run `npm link` to do so.
-
-Run `npm start` to open our [Storybook](https://storybook.js.org).
-
-### Testing
-
-We test our components using [Jest](http://jestjs.io) and [React Testing Library](https://github.com/testing-library/react-testing-library). Tests are placed in the `__tests__` directory in the same directory as the component.
-
-```
-src/
-├── Button
-│   ├── Button.js
-│   ├── Button.module.css
-│   ├── Button.stories.js
-│   ├── __tests__
-│   │   └── Button.test.js
-│   └── index.js
-└── index.js
-
-2 directories, 6 files
-```
-
-You can execute `npm run test` or `npm test` as a shorthand to run all tests. Running `npm test` every time you change a file gets old pretty fast. Thankfully we can mitigate that by entering watch mode.
-
-- `npm test -- --watch`
-
-### Linting & Formatting
-
-We lint our code using [ESlint](https://eslint.org). For your convinience there are a few [npm scripts](https://docs.npmjs.com/misc/scripts) available.
-
-- `npm run lint` - Run the linter over the entire codebase and report problems.
-- `npm run lint-fix` - Run the linter over the entire codebase and automatically fix problems.
-
-[ESlint](https://eslint.org) also have editor integrations, see [editors](https://eslint.org/docs/user-guide/integrations#editors) for instructions on how to set up your editor.
-
-We format our code using [Prettier](https://prettier.io). For your convinience there are a few [npm scripts](https://docs.npmjs.com/misc/scripts) available.
-
-- `npm run format` - Run the formatter over the entire codebase and report any formatting issues.
-- `npm run format-fix` - Run the formatter over the entire codebase and automatically format the code.
-
-[Prettier](https://prettier.io) also have editor integrations, see [editors](https://prettier.io/docs/en/editors.html) for instructions on how to setup your editor.
-
-Since linting and formatting is such a common task, you can execute `npm run check` to check for both linting problems and formatting issues simultaneously. Execute `npm run fix` to automatically fix both.
-
-### CSS
-
-Each component can have a related CSS file. The CSS file should end with the extension `.module.css` and is treated as a [CSS Module](https://github.com/css-modules/css-modules). Whenever a `.module.css` file is imported, its definitions
-are only available locally to the component importing it. When referencing class names from a CSS Module use camelCase. E.g., `.button-small` becomes `buttonSmall`.
-
-**Example**
-
-```css
-/* Button.module.css */
-.button-small {
-}
-```
-
-```javascript
-// Button.js
-import React from "react";
-import styles from "./Button.module.css";
-
-function Button({ children }) {
-  return <button className={styles.buttonSmall}>{children}</button>;
-}
-
-export default Button;
-```
+# Baselayer UI - React Component Library
+
+https://baselayer-ui.touchtech.com
+
+## Included Hooks
+- useOutsideClick
+- useToggle
+
+## Development
+
+Run `npm install` to install the project dependencies. Since this library is used by multiple Digital Showroom projects it's important that we create
+a global [link](https://docs.npmjs.com/cli/link) so we can use this local copy in the other projects during development. Run `npm link` to do so.
+
+Run `npm start` to open our [Storybook](https://storybook.js.org).
+
+### Testing
+
+We test our components using [Jest](http://jestjs.io) and [React Testing Library](https://github.com/testing-library/react-testing-library). Tests are placed in the `__tests__` directory in the same directory as the component.
+
+```
+src/
+├── Button
+│   ├── Button.js
+│   ├── Button.module.css
+│   ├── Button.stories.js
+│   ├── __tests__
+│   │   └── Button.test.js
+│   └── index.js
+└── index.js
+
+2 directories, 6 files
+```
+
+You can execute `npm run test` or `npm test` as a shorthand to run all tests. Running `npm test` every time you change a file gets old pretty fast. Thankfully we can mitigate that by entering watch mode.
+
+- `npm test -- --watch`
+
+### Linting & Formatting
+
+We lint our code using [ESlint](https://eslint.org). For your convinience there are a few [npm scripts](https://docs.npmjs.com/misc/scripts) available.
+
+- `npm run lint` - Run the linter over the entire codebase and report problems.
+- `npm run lint-fix` - Run the linter over the entire codebase and automatically fix problems.
+
+[ESlint](https://eslint.org) also have editor integrations, see [editors](https://eslint.org/docs/user-guide/integrations#editors) for instructions on how to set up your editor.
+
+We format our code using [Prettier](https://prettier.io). For your convinience there are a few [npm scripts](https://docs.npmjs.com/misc/scripts) available.
+
+- `npm run format` - Run the formatter over the entire codebase and report any formatting issues.
+- `npm run format-fix` - Run the formatter over the entire codebase and automatically format the code.
+
+[Prettier](https://prettier.io) also have editor integrations, see [editors](https://prettier.io/docs/en/editors.html) for instructions on how to setup your editor.
+
+Since linting and formatting is such a common task, you can execute `npm run check` to check for both linting problems and formatting issues simultaneously. Execute `npm run fix` to automatically fix both.
+
+### CSS
+
+Each component can have a related CSS file. The CSS file should end with the extension `.module.css` and is treated as a [CSS Module](https://github.com/css-modules/css-modules). Whenever a `.module.css` file is imported, its definitions
+are only available locally to the component importing it. When referencing class names from a CSS Module use camelCase. E.g., `.button-small` becomes `buttonSmall`.
+
+**Example**
+
+```css
+/* Button.module.css */
+.button-small {
+}
+```
+
+```javascript
+// Button.js
+import React from "react";
+import styles from "./Button.module.css";
+
+function Button({ children }) {
+  return <button className={styles.buttonSmall}>{children}</button>;
+}
+
+export default Button;
+```

package/dist/components/Button/Button.d.ts

@@ -1,22 +1,22 @@
-import React, { ReactNode } from "react";
-import { Size } from "../../types";
-declare type ButtonProps = {
-    children: ReactNode;
-    className?: string;
-    disabled?: boolean;
-    inverted?: boolean;
-    rounded?: boolean;
-    noShadow?: boolean;
-    noPadding?: boolean;
-    noBorder?: boolean;
-    transparent?: boolean;
-    stretchHorizontally?: boolean;
-    stretchVertically?: boolean;
-    onClick?: (event: React.SyntheticEvent) => void;
-    size?: Size;
-    type?: "submit" | "reset" | "button";
-    align?: "left" | "center";
-    offsetSides?: Array<"left" | "right">;
-};
-declare function Button({ children, className, onClick, disabled, inverted, rounded, noShadow, noPadding, noBorder, transparent, stretchHorizontally, stretchVertically, offsetSides, align, size, type, }: ButtonProps): JSX.Element;
-export default Button;
+import React, { ReactNode } from "react";
+import { Size } from "../../types";
+declare type ButtonProps = {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    inverted?: boolean;
+    rounded?: boolean;
+    noShadow?: boolean;
+    noPadding?: boolean;
+    noBorder?: boolean;
+    transparent?: boolean;
+    stretchHorizontally?: boolean;
+    stretchVertically?: boolean;
+    onClick?: (event: React.SyntheticEvent) => void;
+    size?: Size;
+    type?: "submit" | "reset" | "button";
+    align?: "left" | "center";
+    offsetSides?: Array<"left" | "right">;
+};
+declare function Button({ children, className, onClick, disabled, inverted, rounded, noShadow, noPadding, noBorder, transparent, stretchHorizontally, stretchVertically, offsetSides, align, size, type, }: ButtonProps): JSX.Element;
+export default Button;

package/dist/components/Button/__tests__/Button.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/Button/index.d.ts

@@ -1 +1 @@
-export { default as Button } from "./Button";
+export { default as Button } from "./Button";

package/dist/components/ButtonLink/ButtonLink.d.ts

@@ -1,21 +1,21 @@
-import { ReactNode, ReactType } from "react";
-import { Size } from "../../types";
-declare type OffsetSide = "left" | "right";
-declare type ButtonLinkProps = {
-    as?: ReactType;
-    children: ReactNode;
-    className?: string;
-    inverted?: boolean;
-    rounded?: boolean;
-    transparent?: boolean;
-    noShadow?: boolean;
-    noPadding?: boolean;
-    noBorder?: boolean;
-    stretchHorizontally?: boolean;
-    stretchVertically?: boolean;
-    size?: Size;
-    offsetSides?: Array<OffsetSide>;
-    align?: "left" | "center";
-} | any;
-declare function ButtonLink({ as: Component, children, className, size, inverted, rounded, transparent, noShadow, noPadding, noBorder, stretchHorizontally, stretchVertically, offsetSides, align, ...props }: ButtonLinkProps): JSX.Element;
-export default ButtonLink;
+import { ReactNode, ReactType } from "react";
+import { Size } from "../../types";
+declare type OffsetSide = "left" | "right";
+declare type ButtonLinkProps = {
+    as?: ReactType;
+    children: ReactNode;
+    className?: string;
+    inverted?: boolean;
+    rounded?: boolean;
+    transparent?: boolean;
+    noShadow?: boolean;
+    noPadding?: boolean;
+    noBorder?: boolean;
+    stretchHorizontally?: boolean;
+    stretchVertically?: boolean;
+    size?: Size;
+    offsetSides?: Array<OffsetSide>;
+    align?: "left" | "center";
+} | any;
+declare function ButtonLink({ as: Component, children, className, size, inverted, rounded, transparent, noShadow, noPadding, noBorder, stretchHorizontally, stretchVertically, offsetSides, align, ...props }: ButtonLinkProps): JSX.Element;
+export default ButtonLink;

package/dist/components/ButtonLink/__tests__/ButtonLink.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/ButtonLink/index.d.ts

@@ -1 +1 @@
-export { default as ButtonLink } from "./ButtonLink";
+export { default as ButtonLink } from "./ButtonLink";

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { Color } from "../../types";
-declare type ColorPickerProps = {
-    direction?: "horizontal" | "vertical";
-    colors: Color[];
-    onSelect: (color: Color) => void;
-    selectedColor?: Color;
-};
-declare function ColorPicker({ colors, onSelect, selectedColor, direction }: ColorPickerProps): JSX.Element;
-export default ColorPicker;
+import { Color } from "../../types";
+declare type ColorPickerProps = {
+    direction?: "horizontal" | "vertical";
+    colors: Color[];
+    onSelect: (color: Color) => void;
+    selectedColor?: Color;
+};
+declare function ColorPicker({ colors, onSelect, selectedColor, direction }: ColorPickerProps): JSX.Element;
+export default ColorPicker;

package/dist/components/ColorPicker/__tests__/ColorPicker.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/ColorPicker/index.d.ts

@@ -1 +1 @@
-export { default as ColorPicker } from "./ColorPicker";
+export { default as ColorPicker } from "./ColorPicker";

package/dist/components/ColorSwatch/ColorSwatch.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { Color } from "../../types";
-declare type ColorSwatchProps = {
-    color: Color;
-    isSelected?: boolean;
-    onClick: () => void;
-};
-declare function ColorSwatch({ color, onClick, isSelected }: ColorSwatchProps): JSX.Element;
-export default ColorSwatch;
+import { Color } from "../../types";
+declare type ColorSwatchProps = {
+    color: Color;
+    isSelected?: boolean;
+    onClick: () => void;
+};
+declare function ColorSwatch({ color, onClick, isSelected }: ColorSwatchProps): JSX.Element;
+export default ColorSwatch;

package/dist/components/ColorSwatch/__tests__/ColorSwatch.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/ColorSwatch/index.d.ts

@@ -1 +1 @@
-export { default as ColorSwatch } from "./ColorSwatch";
+export { default as ColorSwatch } from "./ColorSwatch";

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -1,15 +1,15 @@
-import { ReactElement, ReactNode } from "react";
-declare type ConfirmationModalProps = {
-    buttonsLeft?: ReactElement[];
-    buttonsRight?: ReactElement[];
-    children?: ReactNode;
-    header: string;
-    isOpen: boolean;
-    noPadding?: boolean;
-    onClose?: () => void;
-};
-declare function ConfirmationModal({ children, header, isOpen, buttonsLeft, buttonsRight, onClose, noPadding, }: ConfirmationModalProps): JSX.Element;
-declare namespace ConfirmationModal {
-    var displayName: string;
-}
-export default ConfirmationModal;
+import { ReactElement, ReactNode } from "react";
+declare type ConfirmationModalProps = {
+    buttonsLeft?: ReactElement[];
+    buttonsRight?: ReactElement[];
+    children?: ReactNode;
+    header: string;
+    isOpen: boolean;
+    noPadding?: boolean;
+    onClose?: () => void;
+};
+declare function ConfirmationModal({ children, header, isOpen, buttonsLeft, buttonsRight, onClose, noPadding, }: ConfirmationModalProps): JSX.Element;
+declare namespace ConfirmationModal {
+    var displayName: string;
+}
+export default ConfirmationModal;

package/dist/components/ConfirmationModal/__tests__/ConfirmationModal.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/ConfirmationModal/index.d.ts

@@ -1 +1 @@
-export { default as ConfirmationModal } from "./ConfirmationModal";
+export { default as ConfirmationModal } from "./ConfirmationModal";

package/dist/components/FloatingPanel/FloatingPanel.d.ts

@@ -1,13 +1,13 @@
-import { ReactNode } from "react";
-declare type Placement = {
-    horizontal: "right" | "rightEdge" | "rightOnEdge" | "left" | "leftEdge" | "leftOnEdge" | "leftOnEdge" | "center";
-    vertical: "top" | "topEdge" | "bottom" | "bottomEdge" | "bottomOnEdge" | "center";
-    parent: "viewport" | "container";
-};
-declare type FloatingPanelProps = {
-    children: ReactNode;
-    layout?: "column" | "row";
-    placement?: Placement;
-};
-declare function FloatingPanel({ children, layout, placement }: FloatingPanelProps): JSX.Element;
-export default FloatingPanel;
+import { ReactNode } from "react";
+declare type Placement = {
+    horizontal: "right" | "rightEdge" | "rightOnEdge" | "left" | "leftEdge" | "leftOnEdge" | "leftOnEdge" | "center";
+    vertical: "top" | "topEdge" | "bottom" | "bottomEdge" | "bottomOnEdge" | "center";
+    parent: "viewport" | "container";
+};
+declare type FloatingPanelProps = {
+    children: ReactNode;
+    layout?: "column" | "row";
+    placement?: Placement;
+};
+declare function FloatingPanel({ children, layout, placement }: FloatingPanelProps): JSX.Element;
+export default FloatingPanel;

package/dist/components/FloatingPanel/__tests__/FloatingPanel.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/FloatingPanel/index.d.ts

@@ -1 +1 @@
-export { default as FloatingPanel } from "./FloatingPanel";
+export { default as FloatingPanel } from "./FloatingPanel";

package/dist/components/Icon/Icon.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-declare type IconProps = {
-    src: string;
-    alt?: string;
-    size?: "small" | "medium" | "large";
-    inverted?: boolean;
-};
-declare function Icon({ src, alt, size, inverted }: IconProps): JSX.Element;
-export default Icon;
+declare type IconProps = {
+    src: string;
+    alt?: string;
+    size?: "small" | "medium" | "large";
+    inverted?: boolean;
+};
+declare function Icon({ src, alt, size, inverted }: IconProps): JSX.Element;
+export default Icon;

package/dist/components/Icon/__tests__/Icon.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/Icon/index.d.ts

@@ -1 +1 @@
-export { default as Icon } from "./Icon";
+export { default as Icon } from "./Icon";

package/dist/components/IconButton/IconButton.d.ts

@@ -1,18 +1,17 @@
-/// <reference types="react" />
-declare type IconButtonProps = {
-    className?: string;
-    src: string;
-    alt: string;
-    disabled?: boolean;
-    inverted?: boolean;
-    noShadow?: boolean;
-    noBorder?: boolean;
-    transparent?: boolean;
-    rounded?: boolean;
-    onClick?: () => void;
-    size?: "small" | "medium" | "large";
-    type?: "submit" | "reset" | "button";
-    offsetSides?: Array<"top" | "right" | "bottom" | "left">;
-};
-declare function IconButton({ className, src, alt, offsetSides, onClick, disabled, inverted, noShadow, noBorder, transparent, rounded, size, type, }: IconButtonProps): JSX.Element;
-export default IconButton;
+declare type IconButtonProps = {
+    className?: string;
+    src: string;
+    alt: string;
+    disabled?: boolean;
+    inverted?: boolean;
+    noShadow?: boolean;
+    noBorder?: boolean;
+    transparent?: boolean;
+    rounded?: boolean;
+    onClick?: () => void;
+    size?: "small" | "medium" | "large";
+    type?: "submit" | "reset" | "button";
+    offsetSides?: Array<"top" | "right" | "bottom" | "left">;
+};
+declare function IconButton({ className, src, alt, offsetSides, onClick, disabled, inverted, noShadow, noBorder, transparent, rounded, size, type, }: IconButtonProps): JSX.Element;
+export default IconButton;

package/dist/components/IconButton/__tests__/IconButton.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/IconButton/index.d.ts

@@ -1 +1 @@
-export { default as IconButton } from "./IconButton";
+export { default as IconButton } from "./IconButton";

package/dist/components/IconButtonLink/IconButtonLink.d.ts

@@ -1,18 +1,18 @@
-import { ReactType } from "react";
-import { Size } from "../../types";
-declare type OffsetSide = "top" | "right" | "bottom" | "left";
-declare type IconButtonLinkProps = {
-    as?: ReactType;
-    src: string;
-    alt: string;
-    className?: string;
-    inverted?: boolean;
-    rounded?: boolean;
-    transparent?: boolean;
-    noShadow?: boolean;
-    noBorder?: boolean;
-    size?: Size;
-    offsetSides?: Array<OffsetSide>;
-} | any;
-declare function IconButtonLink({ as: Component, className, src, alt, inverted, noShadow, noBorder, transparent, rounded, offsetSides, size, ...props }: IconButtonLinkProps): JSX.Element;
-export default IconButtonLink;
+import { ReactType } from "react";
+import { Size } from "../../types";
+declare type OffsetSide = "top" | "right" | "bottom" | "left";
+declare type IconButtonLinkProps = {
+    as?: ReactType;
+    src: string;
+    alt: string;
+    className?: string;
+    inverted?: boolean;
+    rounded?: boolean;
+    transparent?: boolean;
+    noShadow?: boolean;
+    noBorder?: boolean;
+    size?: Size;
+    offsetSides?: Array<OffsetSide>;
+} | any;
+declare function IconButtonLink({ as: Component, className, src, alt, inverted, noShadow, noBorder, transparent, rounded, offsetSides, size, ...props }: IconButtonLinkProps): JSX.Element;
+export default IconButtonLink;

package/dist/components/IconButtonLink/__tests__/IconButtonLink.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/IconButtonLink/index.d.ts

@@ -1 +1 @@
-export { default as IconButtonLink } from "./IconButtonLink";
+export { default as IconButtonLink } from "./IconButtonLink";

package/dist/components/Image/Image.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
-export declare const emptyImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-declare type ImageProps = {
-    src: string;
-    alt?: string;
-    srcWidth?: number;
-    srcHeight?: number;
-    children?: React.ReactNode;
-    animation?: "fadeIn" | "scaleUp";
-    layout?: "cover" | "contain" | "stretchHorizontally" | "stretchVertically";
-};
-declare function ImageComponent({ src, alt, srcWidth, srcHeight, children, animation, layout, }: ImageProps): JSX.Element;
-export default ImageComponent;
+import React from "react";
+export declare const emptyImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+declare type ImageProps = {
+    src: string;
+    alt?: string;
+    srcWidth?: number;
+    srcHeight?: number;
+    children?: React.ReactNode;
+    animation?: "fadeIn" | "scaleUp";
+    layout?: "cover" | "contain" | "stretchHorizontally" | "stretchVertically";
+};
+declare function ImageComponent({ src, alt, srcWidth, srcHeight, children, animation, layout, }: ImageProps): JSX.Element;
+export default ImageComponent;

package/dist/components/Image/__tests__/Image.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/Image/index.d.ts

@@ -1 +1 @@
-export { default as Image } from "./Image";
+export { default as Image } from "./Image";

package/dist/components/Label/Label.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-declare type TextInputProps = {
-    value: string;
-};
-declare function TextInput({ value }: TextInputProps): JSX.Element;
-export default TextInput;
+declare type TextInputProps = {
+    value: string;
+};
+declare function TextInput({ value }: TextInputProps): JSX.Element;
+export default TextInput;

package/dist/components/Label/__tests/Label.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/Label/index.d.ts

@@ -1 +1 @@
-export { default as Label } from "./Label";
+export { default as Label } from "./Label";

package/dist/components/ListView/ListView.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
-declare type ListViewProps = {
-    children: ReactNode;
-    className?: string;
-    header?: string;
-};
-declare function ListView({ children, className, header }: ListViewProps): JSX.Element;
-export default ListView;
+import { ReactNode } from "react";
+declare type ListViewProps = {
+    children: ReactNode;
+    className?: string;
+    header?: string;
+};
+declare function ListView({ children, className, header }: ListViewProps): JSX.Element;
+export default ListView;

package/dist/components/ListView/ListViewItem.d.ts

@@ -1,14 +1,14 @@
-import { ReactNode } from "react";
-import { Size } from "../../types";
-declare type ListViewItemProps = {
-    children: ReactNode;
-    active?: boolean;
-    disabled?: boolean;
-    transparent?: boolean;
-    noPadding?: boolean;
-    size?: Size;
-    align?: "left" | "center";
-    onClick?: () => void;
-};
-declare function ListViewItem({ children, active, disabled, transparent, noPadding, size, align, onClick, }: ListViewItemProps): JSX.Element;
-export default ListViewItem;
+import { ReactNode } from "react";
+import { Size } from "../../types";
+declare type ListViewItemProps = {
+    children: ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    transparent?: boolean;
+    noPadding?: boolean;
+    size?: Size;
+    align?: "left" | "center";
+    onClick?: () => void;
+};
+declare function ListViewItem({ children, active, disabled, transparent, noPadding, size, align, onClick, }: ListViewItemProps): JSX.Element;
+export default ListViewItem;

package/dist/components/ListView/__tests__/ListView.test.d.ts

@@ -1 +1 @@
-export {};
+export {};