feat: Move components to @clayui/core

packages/clay-core/src/alert/Alert.tsx

@@ -0,0 +1,179 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import Icon from '@clayui/icon';
+import Layout from '@clayui/layout';
+import classNames from 'classnames';
+import React, {useEffect, useRef} from 'react';
+
+import {AlertFooter} from './Footer';
+import {ToastContainer} from './ToastContainer';
+import {AlertProps} from './types';
+
+const useAutoClose = (autoClose?: boolean | number, onClose = () => {}) => {
+	const startedTime = useRef<number>(0);
+	const timer = useRef<number | undefined>(undefined);
+	const timeToClose = useRef(autoClose === true ? 10000 : autoClose);
+
+	let pauseTimer = () => {};
+	let startTimer = () => {};
+
+	if (autoClose) {
+		pauseTimer = () => {
+			if (timer.current) {
+				timeToClose.current =
+					(timeToClose.current as number) -
+					(Date.now() - startedTime.current);
+
+				clearTimeout(timer.current);
+
+				timer.current = undefined;
+			}
+		};
+
+		startTimer = () => {
+			startedTime.current = Date.now();
+			timer.current = window.setTimeout(
+				onClose,
+				timeToClose.current as number
+			);
+		};
+	}
+
+	useEffect(() => {
+		if (autoClose) {
+			startTimer();
+
+			return pauseTimer;
+		}
+	}, []);
+
+	return {
+		pauseAutoCloseTimer: pauseTimer,
+		startAutoCloseTimer: startTimer,
+	};
+};
+
+const ICON_MAP = {
+	danger: 'exclamation-full',
+	info: 'info-circle',
+	secondary: 'password-policies',
+	success: 'check-circle-full',
+	warning: 'warning-full',
+};
+
+const VARIANTS = ['inline', 'feedback'];
+
+export function Alert(props: AlertProps): JSX.Element & {
+	Footer: typeof AlertFooter;
+	ToastContainer: typeof ToastContainer;
+};
+
+export function Alert({
+	actions,
+	autoClose,
+	children,
+	className,
+	displayType = 'info',
+	hideCloseIcon = false,
+	onClose,
+	role = 'alert',
+	spritemap,
+	symbol,
+	title,
+	variant,
+	...otherProps
+}: AlertProps) {
+	const {pauseAutoCloseTimer, startAutoCloseTimer} = useAutoClose(
+		autoClose,
+		onClose
+	);
+
+	const ConditionalContainer = ({children}: any) =>
+		variant === 'stripe' ? (
+			<div className="container">{children}</div>
+		) : (
+			<>{children}</>
+		);
+
+	const showDismissible = onClose && !hideCloseIcon;
+
+	const AlertIndicator = () => (
+		<span className="alert-indicator">
+			<Icon
+				spritemap={spritemap}
+				symbol={symbol || ICON_MAP[displayType]}
+			/>
+		</span>
+	);
+
+	return (
+		<div
+			{...otherProps}
+			className={classNames(className, 'alert', {
+				'alert-dismissible': showDismissible,
+				'alert-feedback alert-indicator-start': variant === 'feedback',
+				'alert-fluid': variant === 'stripe',
+				'alert-inline': variant === 'inline',
+				[`alert-${displayType}`]: displayType,
+			})}
+			onMouseOut={startAutoCloseTimer}
+			onMouseOver={pauseAutoCloseTimer}
+		>
+			<ConditionalContainer>
+				<Layout.ContentRow
+					className="alert-autofit-row"
+					role={role as string}
+				>
+					{!VARIANTS.includes(variant as string) && (
+						<Layout.ContentCol>
+							<Layout.ContentSection>
+								<AlertIndicator />
+							</Layout.ContentSection>
+						</Layout.ContentCol>
+					)}
+
+					<Layout.ContentCol expand>
+						<Layout.ContentSection>
+							{VARIANTS.includes(variant as string) && (
+								<AlertIndicator />
+							)}
+
+							{title && <strong className="lead">{title}</strong>}
+
+							{children}
+
+							{variant !== 'inline' && actions && (
+								<AlertFooter>{actions}</AlertFooter>
+							)}
+						</Layout.ContentSection>
+					</Layout.ContentCol>
+
+					{variant === 'inline' && actions && (
+						<Layout.ContentCol>
+							<Layout.ContentSection>
+								{actions}
+							</Layout.ContentSection>
+						</Layout.ContentCol>
+					)}
+				</Layout.ContentRow>
+
+				{showDismissible && (
+					<button
+						aria-label="Close"
+						className="close"
+						onClick={onClose}
+						type="button"
+					>
+						<Icon spritemap={spritemap} symbol="times" />
+					</button>
+				)}
+			</ConditionalContainer>
+		</div>
+	);
+}
+
+Alert.Footer = AlertFooter;
+Alert.ToastContainer = ToastContainer;

packages/clay-core/src/alert/Footer.tsx

@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+export const AlertFooter = ({
+	children,
+	className,
+	...otherProps
+}: React.HTMLAttributes<HTMLDivElement>) => {
+	return (
+		<div className={classNames(className, 'alert-footer')} {...otherProps}>
+			{children}
+		</div>
+	);
+};

packages/clay-core/src/alert/ToastContainer.tsx

@@ -0,0 +1,31 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+import {AlertProps} from './types';
+
+export type Props = React.HTMLAttributes<HTMLDivElement> & {
+	/**
+	 * Children of the ToastContainer must be a ClayAlert
+	 */
+	children?:
+		| React.ReactElement<AlertProps>
+		| Array<React.ReactElement<AlertProps>>;
+};
+
+export const ToastContainer = ({children, className, ...otherProps}: Props) => {
+	return (
+		<div
+			{...otherProps}
+			className={classNames(className, 'alert-container container')}
+		>
+			<div className="alert-notifications alert-notifications-fixed">
+				{children}
+			</div>
+		</div>
+	);
+};

packages/clay-core/src/alert/index.ts

@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: © 2024 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export * from './Alert';

packages/clay-core/src/alert/types.ts

@@ -0,0 +1,66 @@
+/**
+ * SPDX-FileCopyrightText: © 2024 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export type DisplayType =
+	| 'danger'
+	| 'info'
+	| 'secondary'
+	| 'success'
+	| 'warning';
+
+export type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> & {
+	/**
+	 * A React Component to render the alert actions.
+	 */
+	actions?: React.ReactNode;
+
+	/**
+	 * Flag to indicate alert should automatically call `onClose`. It also
+	 * accepts a duration (in ms) which indicates how long to wait. If `true`
+	 * is passed in, the timeout will be 10000ms.
+	 */
+	autoClose?: boolean | number;
+
+	/**
+	 * Callback function for when the 'x' is clicked.
+	 */
+	onClose?: () => void;
+
+	/**
+	 * The alert role is for important, and usually time-sensitive, information.
+	 */
+	role?: string | null;
+
+	/**
+	 * Determines the style of the alert.
+	 */
+	displayType?: DisplayType;
+
+	/**
+	 * Flag to indicate if close icon should be show. This prop is used in
+	 * conjunction with the `onClose`prop;
+	 */
+	hideCloseIcon?: boolean;
+
+	/**
+	 * Path to the spritemap that Icon should use when referencing symbols.
+	 */
+	spritemap?: string;
+
+	/**
+	 * The icon's symbol name in the spritemap.
+	 */
+	symbol?: string;
+
+	/**
+	 * The summary of the Alert, often is something like 'Error' or 'Info'.
+	 */
+	title?: string;
+
+	/**
+	 * Determines the variant of the alert.
+	 */
+	variant?: 'feedback' | 'stripe' | 'inline';
+};

packages/clay-core/src/badge/Badge.tsx

@@ -0,0 +1,84 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+type DisplayType =
+	| 'primary'
+	| 'secondary'
+	| 'info'
+	| 'danger'
+	| 'success'
+	| 'warning'
+	| 'beta'
+	| 'beta-dark';
+
+export type Props = React.HTMLAttributes<HTMLSpanElement> & {
+	/**
+	 * Flag to indicate if the badge should use the clay-dark variant.
+	 */
+	dark?: boolean;
+
+	/**
+	 * Determines the color of the badge.
+	 * The values `beta` and `beta-dark` are deprecated since v3.100.0 - use
+	 * `translucent` and `dark` instead.
+	 */
+	displayType?: DisplayType;
+
+	/**
+	 * Info that is shown inside of the badge itself.
+	 */
+	label?: string | number;
+
+	/**
+	 * Flag to indicate if the badge should use the translucent variant.
+	 */
+	translucent?: boolean;
+};
+
+export const Badge = React.forwardRef<HTMLSpanElement, Props>(
+	(
+		{
+			className,
+			dark,
+			displayType = 'primary',
+			label,
+			translucent,
+			...otherProps
+		},
+		ref
+	) => {
+		if (displayType === 'beta') {
+			displayType = 'info';
+			translucent = true;
+		} else if (displayType === 'beta-dark') {
+			dark = true;
+			displayType = 'info';
+			translucent = true;
+		}
+
+		return (
+			<span
+				{...otherProps}
+				className={classNames(
+					'badge',
+					`badge-${displayType}`,
+					className,
+					{
+						'badge-translucent': translucent,
+						'clay-dark': dark,
+					}
+				)}
+				ref={ref}
+			>
+				<span className="badge-item badge-item-expand">{label}</span>
+			</span>
+		);
+	}
+);
+
+Badge.displayName = 'ClayBadge';

packages/clay-core/src/badge/index.ts

@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: © 2024 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export * from './Badge';