feat(badge): migrate from individual repo

src/badge/editor.scss

@@ -0,0 +1,8 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+.block-editor-format-toolbar__lubus-badge-popover > div {
+	padding: 12px;
+}

src/badge/index.js

@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+import { Popover, MenuItem, MenuItemsChoice } from '@wordpress/components';
+import {
+	slice,
+	applyFormat,
+	removeFormat,
+	useAnchorRef,
+	getTextContent,
+	getActiveFormat,
+	registerFormatType,
+} from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import './style.scss';
+
+const name = 'lubus/badge';
+const title = 'Badge';
+const presets = [
+	'gray',
+	'red',
+	'yellow',
+	'green',
+	'blue',
+	'indigo',
+	'purple',
+	'pink',
+];
+
+/**
+ * Icon
+ */
+function formatIcon() {
+	return (
+		<Icon
+			icon={
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+					<defs />
+					<path fill="none" d="M0 0h24v24H0z" />
+					<path d="M17 10.43V2H7v8.43c0 .35.18.68.49.86l4.18 2.51-.99 2.34-3.41.29 2.59 2.24L9.07 22 12 20.23 14.93 22l-.78-3.33 2.59-2.24-3.41-.29-.99-2.34 4.18-2.51c.3-.18.48-.5.48-.86zm-6 .64l-2-1.2V4h2v7.07zm4-1.2l-2 1.2V4h2v5.87z" />
+				</svg>
+			}
+		/>
+	);
+}
+
+/**
+ * InlineUI
+ */
+function InlineUI( {
+	value,
+	onChange,
+	onClose,
+	activeAttributes,
+	contentRef,
+} ) {
+	const anchorRef = useAnchorRef( {
+		ref: contentRef,
+		value,
+		settings: {
+			title,
+		},
+	} );
+
+	const text = getTextContent( slice( value ) );
+
+	const presetChoices = presets.map( ( preset ) => {
+		const choice = {
+			value: `has-badge-${ preset }`,
+			label: (
+				<span className={ `has-badge has-badge-${ preset }` }>
+					{ text || 'badge' }
+				</span>
+			),
+		};
+
+		return choice;
+	} );
+
+	console.log( activeAttributes.class );
+
+	function onSetPreset( preset ) {
+		if ( 'none' === preset ) {
+			onChange( removeFormat( value, name ) );
+		} else {
+			onChange(
+				applyFormat( value, {
+					type: name,
+					attributes: {
+						class: preset,
+					},
+				} )
+			);
+		}
+
+		onClose(); // Close InlineUI
+	}
+
+	return (
+		<Popover
+			position="bottom center"
+			anchorRef={ anchorRef }
+			className="block-editor-format-toolbar__lubus-badge-popover"
+			onClose={ onClose }
+		>
+			<MenuItem onClick={ () => onSetPreset( 'none' ) }>
+				<span className="has-badge">none</span>
+			</MenuItem>
+			<MenuItemsChoice
+				choices={ presetChoices }
+				value={ activeAttributes.class }
+				onSelect={ ( preset ) => onSetPreset( preset ) }
+			/>
+		</Popover>
+	);
+}
+
+/**
+ *  Format edit
+ */
+function EditButton( props ) {
+	const { value, onChange, onFocus, isActive, contentRef, activeAttributes } =
+		props;
+
+	const [ isSettingOpen, setIsSettingOpen ] = useState( false );
+
+	function openSettings() {
+		setIsSettingOpen( true );
+	}
+
+	function closeSettings() {
+		setIsSettingOpen( false );
+	}
+
+	return (
+		<>
+			<RichTextToolbarButton
+				icon={ formatIcon }
+				title={ title }
+				onClick={ openSettings }
+				isActive={ isActive }
+			/>
+
+			{ isSettingOpen && (
+				<InlineUI
+					value={ value }
+					onChange={ onChange }
+					onClose={ closeSettings }
+					activeAttributes={ activeAttributes }
+					contentRef={ contentRef }
+				/>
+			) }
+		</>
+	);
+}
+
+/**
+ * Register Richtext Color Format.
+ */
+registerFormatType( name, {
+	title,
+	tagName: 'span',
+	className: 'has-badge',
+	edit: EditButton,
+	attributes: {
+		style: 'style',
+	},
+} );

src/badge/style.scss

@@ -0,0 +1,50 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+.has-badge {
+	padding: 2px 10px;
+	border-radius: 4px;
+
+	&.has-badge-gray {
+		background-color: #F3F4F6;
+		color: #1F2A37;
+	}
+
+	&.has-badge-red {
+		background-color: #FDE2E1;
+		color: #991B1C;
+	}
+
+	&.has-badge-yellow {
+		background-color: #FEF3C7;
+		color: #93410F;
+	}
+
+	&.has-badge-green {
+		background-color: #D1FAE4;
+		color: #076046;
+	}
+
+	&.has-badge-blue {
+		background-color: #DBEAFE;
+		color: #1E40AF;
+	}
+
+	&.has-badge-indigo {
+		background-color: #E0E8FF;
+		color: #3830A3;
+	}
+
+	&.has-badge-purple {
+		background-color: #ECE9FD;
+		color: #5B23B6;
+	}
+
+	&.has-badge-pink {
+		background-color: #FBE7F2;
+		color: #9E174D;
+	}
+}

src/index.js

@@ -3,5 +3,6 @@
  */
 import './marker';
 import './infotip';
+import './badge';
 import './font-size';
 import './clear-formats';