genesys-react-components 0.1.6 → 0.2.0-devengage-1376.132

package/src/index.ts

@@ -0,0 +1,141 @@
+import { GenesysDevIcons } from 'genesys-dev-icons';
+import DxAccordion from './dxaccordion/DxAccordion';
+import DxAccordionGroup from './dxaccordion/DxAccordionGroup';
+import DxButton from './dxbutton/DxButton';
+import DxItemGroup from './dxitemgroup/DxItemGroup';
+import DxCheckbox from './dxitemgroup/DxCheckbox';
+import DxLabel from './dxlabel/DxLabel';
+import DxTabbedContent from './dxtabbedcontent/DxTabbedContent';
+import DxTabPanel from './dxtabbedcontent/DxTabPanel';
+import DxTextbox from './dxtextbox/DxTextbox';
+import DxToggle from './dxtoggle/DxToggle';
+import AlertBlock from './alertblock/AlertBlock';
+import LoadingPlaceholder from './loadingplaceholder/LoadingPlaceholder';
+import Tooltip from './tooltip/Tooltip';
+import CopyButton from './copybutton/CopyButton';
+
+export {
+	DxAccordion,
+	DxAccordionGroup,
+	DxButton,
+	DxItemGroup,
+	DxCheckbox,
+	DxLabel,
+	DxTabbedContent,
+	DxTabPanel,
+	DxTextbox,
+	DxToggle,
+	Tooltip,
+	CopyButton,
+	LoadingPlaceholder,
+	AlertBlock,
+};
+
+export interface StringChangedCallback {
+	(value: string): void;
+}
+
+export interface BooleanChangedCallback {
+	(value?: boolean): void;
+}
+
+export interface CheckedChangedCallback {
+	(checked: boolean): void;
+}
+
+export interface VoidEventCallback {
+	(): void;
+}
+
+// Item in a DxItemGroup
+export interface DxItemGroupItem {
+	label: string;
+	value: string;
+	disabled?: boolean;
+	isSelected?: boolean;
+}
+
+// Item value of a DxItemGroupItem in a DxItemGroup
+export interface DxItemGroupItemValue {
+	item: DxItemGroupItem;
+	isSelected: boolean;
+}
+
+export interface ItemChangedCallback {
+	(item: DxItemGroupItem, isSelected: boolean): void;
+}
+
+export interface ItemGroupChangedCallback {
+	(items: DxItemGroupItemValue[]): void;
+}
+
+export interface DxToggleProps {
+	isTriState?: boolean;
+	initialValue?: boolean;
+	value?: boolean;
+	label?: string;
+	description?: string;
+	trueIcon?: GenesysDevIcons;
+	falseIcon?: GenesysDevIcons;
+	disabled?: boolean;
+	onChange?: BooleanChangedCallback;
+	className?: string;
+}
+
+export type DxTextboxType = 'text' | 'textarea' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';
+
+export interface DxTextboxProps {
+	initialValue?: string;
+	value?: string;
+	inputType?: DxTextboxType;
+	label?: string;
+	description?: string;
+	placeholder?: string;
+	icon?: GenesysDevIcons;
+	clearButton?: boolean;
+	onChange?: StringChangedCallback;
+	changeDebounceMs?: number;
+	inputRef?: React.RefObject<HTMLInputElement>;
+	onFocus?: VoidEventCallback;
+	onBlur?: VoidEventCallback;
+	disabled?: boolean;
+	className?: string;
+	autoFocus?: boolean;
+}
+
+export interface DxAccordionProps {
+	title: React.ReactNode;
+	children: React.ReactNode;
+	showOpen?: boolean;
+	className?: string;
+	expandTrigger?: any;
+	showOpenTrigger?: any;
+	containerId?: string;
+	headingIcon?: any;
+	headingColor?: string;
+}
+
+export interface DxItemGroupProps {
+	title?: string;
+	description?: string;
+	format: DxItemGroupFormat;
+	items: DxItemGroupItem[];
+	disabled?: boolean;
+	className?: string;
+	onItemChanged?: ItemChangedCallback;
+	onItemsChanged?: ItemGroupChangedCallback;
+}
+
+export type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
+
+export interface DxTabbedContentProps {
+	children: React.ReactNode;
+	initialTabId?: number;
+	className?: string;
+}
+
+export interface DxTabPanelProps {
+	title: React.ReactNode;
+	children: React.ReactNode;
+	className?: string;
+}

package/src/loadingplaceholder/LoadingPlaceholder.scss

@@ -0,0 +1,58 @@
+@import '../../utils/theme/variables.scss';
+
+$size: 160px;
+
+.loading-placeholder {
+	position: relative;
+	width: $size;
+	height: $size;
+	margin: 60px auto;
+
+	.text {
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		font-style: normal;
+		font-weight: 300;
+		font-size: 16px;
+		line-height: 20px;
+		color: var($--theme-loadingplaceholder-text-color);
+		position: relative;
+		top: 5px;
+		left: 5px;
+		opacity: 0.5;
+	}
+
+	div {
+		position: absolute;
+		border: 4px solid var($--theme-loadingplaceholder-wave-color);
+		opacity: 1;
+		border-radius: 50%;
+		animation: loading-placeholder 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+	}
+
+	div:nth-child(2) {
+		animation-delay: -0.5s;
+	}
+
+	@keyframes loading-placeholder {
+		0% {
+			top: calc($size / 2);
+			left: calc($size / 2);
+			width: 0;
+			height: 0;
+			opacity: 1;
+		}
+
+		100% {
+			top: 0px;
+			left: 0px;
+			width: $size;
+			height: $size;
+			opacity: 0;
+		}
+	}
+}

package/src/loadingplaceholder/LoadingPlaceholder.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './LoadingPlaceholder.scss';
+
+interface IProps {
+	text?: string;
+}
+
+export default function LoadingPlaceholder(props: IProps) {
+	return (
+		<div className="loading-placeholder">
+			<span className="text">{props.text || 'Loading'}</span>
+			<div></div>
+			<div></div>
+		</div>
+	);
+}

package/src/tooltip/Tooltip.scss

@@ -0,0 +1,108 @@
+/* Custom properties */
+:root {
+	--tooltip-text-color: white;
+	--tooltip-background-color: black;
+	--tooltip-margin: 10px;
+	--tooltip-arrow-size: 6px;
+}
+
+/* Wrapping */
+.tooltip-container {
+	display: inline-block;
+	position: relative;
+	line-height: 0;
+
+	/* Absolute positioning */
+	.tooltip-tip {
+		position: absolute;
+		border-radius: 4px;
+		left: 50%;
+		transform: translateX(-50%);
+		padding: 6px;
+		color: var(--tooltip-text-color);
+		background: var(--tooltip-background-color);
+		font-size: 14px;
+		line-height: 1;
+		z-index: 10000;
+		max-width: 300px;
+		width: max-content;
+		opacity: 0;
+		visibility: hidden;
+		transition: visibility 1.1s ease-out, opacity 1s ease-out;
+
+		&.visible {
+			opacity: 1;
+			visibility: visible;
+			transition: visibility 0s, opacity 0.1s ease-in;
+		}
+
+		/* CSS border triangles */
+		&::before {
+			content: ' ';
+			left: 50%;
+			border: solid transparent;
+			height: 0;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+			border-width: var(--tooltip-arrow-size);
+			margin-left: calc(var(--tooltip-arrow-size) * -1);
+		}
+
+		/* Absolute positioning */
+		&.top {
+			// top: calc(var(--tooltip-margin) * -1);
+			bottom: 130%;
+
+			/* CSS border triangles */
+			&::before {
+				top: 100%;
+				border-top-color: var(--tooltip-background-color);
+			}
+		}
+
+		/* Absolute positioning */
+		&.right {
+			left: calc(100% + var(--tooltip-margin));
+			top: 50%;
+			transform: translateX(0) translateY(-50%);
+
+			/* CSS border triangles */
+			&::before {
+				left: calc(var(--tooltip-arrow-size) * -1);
+				top: 50%;
+				transform: translateX(0) translateY(-50%);
+				border-right-color: var(--tooltip-background-color);
+			}
+		}
+
+		/* Absolute positioning */
+		&.bottom {
+			// bottom: calc(var(--tooltip-margin) * -1);
+			top: 110%;
+
+			/* CSS border triangles */
+			&::before {
+				bottom: 100%;
+				border-bottom-color: var(--tooltip-background-color);
+			}
+		}
+
+		/* Absolute positioning */
+		&.left {
+			left: auto;
+			right: calc(100% + var(--tooltip-margin));
+			top: 50%;
+			transform: translateX(0) translateY(-50%);
+
+			/* CSS border triangles */
+			&::before {
+				left: auto;
+				right: calc(var(--tooltip-arrow-size) * -2);
+				top: 50%;
+				transform: translateX(0) translateY(-50%);
+				border-left-color: var(--tooltip-background-color);
+			}
+		}
+	}
+}

package/src/tooltip/Tooltip.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+
+import './Tooltip.scss';
+
+interface IProps {
+	text: string;
+	position?: 'top' | 'right' | 'bottom' | 'left';
+	children?: ReactNode;
+	className?: string;
+	// Setting this to any value enables manual control
+	isShowing?: boolean;
+}
+
+// Inspired by https://paladini.dev/posts/how-to-make-an-extremely-reusable-tooltip-component-with-react--and-nothing-else/
+export default function Tooltip(props: IProps) {
+	const [isShowing, setIsShowing] = useState(false);
+	const timeout = useRef<NodeJS.Timeout | undefined>();
+
+	useEffect(() => {
+		if (props.isShowing === undefined) return;
+		setIsShowing(props.isShowing === true);
+	}, [props.isShowing]);
+
+	const showTip = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+		// Ignore mouse events from the tooltip itself
+		if ((e.target as HTMLDivElement).className.includes('tooltip-tip')) return;
+		// Ignore mouse events when manually controlled
+		if (props.isShowing !== undefined) return;
+		timeout.current = setTimeout(() => {
+			setIsShowing(true);
+		}, 100);
+	};
+
+	const hideTip = () => {
+		if (props.isShowing !== undefined) return;
+		if (timeout.current) clearInterval(timeout.current);
+		setIsShowing(false);
+	};
+
+	return (
+		<div className={`tooltip-container ${props.className || ''}`} onMouseEnter={showTip} onMouseLeave={hideTip}>
+			{props.children}
+			<div className={`tooltip-tip ${props.position || 'top'}${isShowing ? ' visible' : ''}`}>{props.text}</div>
+		</div>
+	);
+}