@siratik/wp-component-library 0.1.1 → 0.1.2

package/components/attributes-panel/index.js

@@ -0,0 +1,324 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { 
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	ComboboxControl,
+	Button 
+} from '@wordpress/components';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Attributes whose value is loaded or followed as a URL.
+ */
+const URL_ATTRIBUTES = [ 'href', 'src', 'xlink:href', 'action', 'formaction', 'poster', 'srcset' ];
+
+/**
+ * Event handler attributes (onclick, onerror, ...) run script, so they are
+ * never offered or accepted.
+ *
+ * @param {string} name Attribute name.
+ * @returns {boolean}
+ */
+export function isUnsafeAttributeName( name ) {
+	return typeof name === 'string' && /^\s*on/i.test( name );
+}
+
+/**
+ * javascript:, vbscript: and data: URLs can run script, so they are rejected
+ * for URL attributes. Whitespace and control characters are ignored when
+ * reading the scheme, as browsers do ("java\tscript:").
+ *
+ * @param {string} name  Attribute name.
+ * @param {string} value Attribute value.
+ * @returns {boolean}
+ */
+export function isUnsafeAttributeValue( name, value ) {
+	if ( typeof name !== 'string' || typeof value !== 'string' ) {
+		return false;
+	}
+	if ( ! URL_ATTRIBUTES.includes( name.trim().toLowerCase() ) ) {
+		return false;
+	}
+	const compact = value.replace( /[\u0000-\u0020]/g, '' ).toLowerCase();
+	return /(^|,)(javascript|vbscript|data):/.test( compact );
+}
+
+/**
+ * AttributesPanel component that uses ToolsPanel and ComboboxControl
+ * to manage block attributes with meta field selection.
+ *
+ * The panel refuses event handler names (on*) and script/data URLs in URL
+ * attributes, but that is only a UI guard: whoever outputs the attributes
+ * must still allowlist names and escape values (esc_attr / esc_url) on render.
+ *
+ * @since 1.0.0
+ *
+ * @param {Object} props Component properties.
+ * @param {Array} props.attributes Array of attribute objects with id, label, and value.
+ * @param {Function} props.onChange Callback when attributes change.
+ * @param {string} props.panelId Unique ID for the tools panel.
+ * @returns {WPElement} AttributesPanel element to render.
+ */
+function AttributesPanel({
+	attributes = [],
+	onChange,
+	panelId = 'attributes-panel',
+}) {
+	const [localAttributes, setLocalAttributes] = useState(attributes);
+
+	// Get available meta fields from the current post type
+	const metaFields = useSelect((select) => {
+		const { getEditedPostAttribute } = select('core/editor');
+		
+		// Try to get meta from editor first
+		const meta = getEditedPostAttribute?.('meta') || {};
+		
+		// Combine meta keys from various sources
+		const metaKeys = new Set();
+		
+		// Add keys from current post meta
+		Object.keys(meta).forEach(key => metaKeys.add(key));
+		
+		// Add common WordPress meta fields
+		const commonMetaFields = [
+			'_thumbnail_id',
+			'_wp_page_template',
+			'_wp_attachment_metadata',
+			'_wp_attached_file',
+			'_edit_lock',
+			'_edit_last',
+		];
+		commonMetaFields.forEach(key => metaKeys.add(key));
+		
+		// Convert to array of options for ComboboxControl
+		return Array.from(metaKeys).map(key => ({
+			value: key,
+			label: key.replace(/_/g, ' ').replace(/^\w/, c => c.toUpperCase()),
+		}));
+	}, []);
+
+	// Create options for ComboboxControl including meta fields and custom values
+	const comboboxOptions = useMemo(() => {
+		const options = [
+			// Default HTML attributes
+			{ value: 'id', label: __('ID', 'wp-component-library') },
+			{ value: 'class', label: __('Class', 'wp-component-library') },
+			{ value: 'style', label: __('Style', 'wp-component-library') },
+			{ value: 'title', label: __('Title', 'wp-component-library') },
+			{ value: 'alt', label: __('Alt Text', 'wp-component-library') },
+			{ value: 'rel', label: __('Rel', 'wp-component-library') },
+			{ value: 'target', label: __('Target', 'wp-component-library') },
+			{ value: 'href', label: __('Href', 'wp-component-library') },
+			{ value: 'src', label: __('Src', 'wp-component-library') },
+			// Data attributes
+			{ value: 'data-id', label: __('Data ID', 'wp-component-library') },
+			{ value: 'data-type', label: __('Data Type', 'wp-component-library') },
+			{ value: 'data-value', label: __('Data Value', 'wp-component-library') },
+			// ARIA attributes
+			{ value: 'aria-label', label: __('ARIA Label', 'wp-component-library') },
+			{ value: 'aria-describedby', label: __('ARIA Described By', 'wp-component-library') },
+			{ value: 'aria-hidden', label: __('ARIA Hidden', 'wp-component-library') },
+			// Meta fields
+			...metaFields.map(field => ({
+				...field,
+				label: `Meta: ${field.label}`,
+			})),
+		];
+		
+		// Add any existing custom attributes that aren't in the default list
+		localAttributes.forEach(attr => {
+			if (!options.find(opt => opt.value === attr.id)) {
+				options.push({
+					value: attr.id,
+					label: attr.label || attr.id,
+				});
+			}
+		});
+		
+		return options;
+	}, [metaFields, localAttributes]);
+
+	// Update local state when props change
+	useEffect(() => {
+		setLocalAttributes(attributes);
+	}, [attributes]);
+
+	const handleAttributeChange = (id, value) => {
+		if ( isUnsafeAttributeValue( id, value ) ) {
+			return;
+		}
+		const updatedAttributes = localAttributes.map((attr) =>
+			attr.id === id ? { ...attr, value } : attr
+		);
+		setLocalAttributes(updatedAttributes);
+		onChange?.(updatedAttributes);
+	};
+
+	const handleAttributeSelect = (id, selectedValue) => {
+		if (!selectedValue) { return; }
+		if ( isUnsafeAttributeName( selectedValue ) ) { return; }
+		
+		// Check if attribute already exists
+		const existingAttr = localAttributes.find(attr => attr.id === id);
+		if (existingAttr) {
+			// Update existing attribute
+			handleAttributeChange(id, selectedValue);
+		} else {
+			// Find the label for this value
+			const option = comboboxOptions.find(opt => opt.value === selectedValue);
+			const label = option?.label || selectedValue;
+			
+			// Update the attribute
+			const updatedAttributes = localAttributes.map(attr => 
+				attr.id === id ? { ...attr, id: selectedValue, label } : attr
+			);
+			setLocalAttributes(updatedAttributes);
+			onChange?.(updatedAttributes);
+		}
+	};
+
+	const addNewAttribute = () => {
+		const newAttribute = {
+			id: `attr-${Date.now()}`,
+			label: '',
+			value: '',
+			isNew: true,
+		};
+		const updatedAttributes = [...localAttributes, newAttribute];
+		setLocalAttributes(updatedAttributes);
+		onChange?.(updatedAttributes);
+	};
+
+	const removeAttribute = (id) => {
+		const updatedAttributes = localAttributes.filter(attr => attr.id !== id);
+		setLocalAttributes(updatedAttributes);
+		onChange?.(updatedAttributes);
+	};
+
+	const resetAll = () => {
+		const resetAttributes = localAttributes.map(attr => ({ ...attr, value: '' }));
+		setLocalAttributes(resetAttributes);
+		onChange?.(resetAttributes);
+	};
+
+	const resetAttribute = (id) => {
+		handleAttributeChange(id, '');
+	};
+
+	return (
+		<ToolsPanel
+			label={__('Attributes', 'wp-component-library')}
+			panelId={panelId}
+			hasInnerWrapper={true}
+			className="attributes-tools-panel"
+			resetAll={resetAll}
+			dropdownMenuProps={{
+				popoverProps: {
+					placement: 'left-start',
+					offset: 10,
+				},
+			}}
+		>
+			{localAttributes.map((attribute) => (
+				<ToolsPanelItem
+					key={attribute.id}
+					hasValue={() => !!attribute.value}
+					label={attribute.label || __('Select attribute', 'wp-component-library')}
+					onDeselect={() => removeAttribute(attribute.id)}
+					resetAllFilter={() => resetAttribute(attribute.id)}
+					panelId={panelId}
+				>
+					<div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end' }}>
+						<div style={{ flex: 1 }}>
+							<ComboboxControl
+								label={attribute.isNew ? __('Attribute', 'wp-component-library') : attribute.label}
+								value={attribute.isNew ? '' : attribute.id}
+								onChange={(value) => handleAttributeSelect(attribute.id, value)}
+								options={comboboxOptions}
+								allowReset={false}
+								placeholder={__('Select or type attribute', 'wp-component-library')}
+							/>
+							{!attribute.isNew && (
+								<ComboboxControl
+									label={__('Value', 'wp-component-library')}
+									value={attribute.value || ''}
+									onChange={(value) => handleAttributeChange(attribute.id, value)}
+									options={[]}
+									allowReset={false}
+									placeholder={__('Enter value', 'wp-component-library')}
+									help={attribute.id.startsWith('meta:') ? __('This will pull from post meta', 'wp-component-library') : null}
+								/>
+							)}
+						</div>
+					</div>
+				</ToolsPanelItem>
+			))}
+			
+			<div style={{ padding: '16px 16px 8px' }}>
+				<Button
+					variant="secondary"
+					size="small"
+					onClick={addNewAttribute}
+					style={{ width: '100%' }}
+				>
+					{__('Add attribute', 'wp-component-library')}
+				</Button>
+			</div>
+		</ToolsPanel>
+	);
+}
+
+/**
+ * Hook to manage attributes state
+ * 
+ * @param {Array} initialAttributes Initial attributes configuration
+ * @returns {Object} Attributes state and handlers
+ */
+export function useAttributes(initialAttributes = []) {
+	const [attributes, setAttributes] = useState(initialAttributes);
+
+	const updateAttribute = (id, value) => {
+		setAttributes((prev) =>
+			prev.map((attr) => (attr.id === id ? { ...attr, value } : attr))
+		);
+	};
+
+	const addAttribute = (label, value = '') => {
+		const newAttribute = {
+			id: `custom-${Date.now()}`,
+			label,
+			value,
+			isCustom: true,
+		};
+		setAttributes((prev) => [...prev, newAttribute]);
+		return newAttribute;
+	};
+
+	const removeAttribute = (id) => {
+		setAttributes((prev) => prev.filter((attr) => attr.id !== id));
+	};
+
+	const resetAttributes = () => {
+		setAttributes((prev) => prev.map((attr) => ({ ...attr, value: '' })));
+	};
+
+	const getAttributeValue = (id) => {
+		return attributes.find((attr) => attr.id === id)?.value || '';
+	};
+
+	return {
+		attributes,
+		setAttributes,
+		updateAttribute,
+		addAttribute,
+		removeAttribute,
+		resetAttributes,
+		getAttributeValue,
+	};
+}
+
+export default AttributesPanel;

package/components/badge/README.md

@@ -0,0 +1,61 @@
+# Badge Component
+
+A small status indicator component that displays text with semantic colors, based on the WordPress Gutenberg Badge component design.
+
+## Usage
+
+```jsx
+import { Badge } from '@siratik/wp-component-library';
+
+// Basic usage
+<Badge intent="success">Passed</Badge>
+
+// With icon
+<Badge intent="error" showIcon>Critical</Badge>
+
+// Custom icon
+<Badge intent="info" icon={customIcon}>Custom</Badge>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string\|node` | - | Badge text content |
+| `intent` | `string` | `'default'` | Visual intent: `'default'`, `'error'`, `'critical'`, `'warning'`, `'info'`, `'suggestion'`, `'success'`, `'passed'` |
+| `showIcon` | `boolean` | `true` | Whether to show an icon based on intent |
+| `icon` | `Object` | `null` | Custom icon to display (overrides showIcon) |
+| `className` | `string` | `''` | Additional CSS classes |
+
+## Intent Colors
+
+- **error/critical**: Red background with red text
+- **warning**: Yellow background with amber text  
+- **info/suggestion**: Blue background with blue text
+- **success/passed**: Green background with green text
+- **default**: Gray background with dark gray text
+
+## Examples
+
+### Status Indicators
+```jsx
+<Badge intent="success">Active</Badge>
+<Badge intent="error">Failed</Badge>
+<Badge intent="warning">Pending</Badge>
+<Badge intent="info">New</Badge>
+```
+
+### SEO Analysis Results
+```jsx
+<Badge intent="critical">Critical</Badge>
+<Badge intent="warning">Warning</Badge>
+<Badge intent="suggestion">Suggestion</Badge>
+<Badge intent="passed">Passed</Badge>
+```
+
+### With Icons
+```jsx
+<Badge intent="success" showIcon>Complete</Badge>
+<Badge intent="error" showIcon>Error</Badge>
+<Badge intent="info" showIcon>Info</Badge>
+```

package/components/badge/index.js

@@ -0,0 +1,105 @@
+/**
+ * Badge Component
+ *
+ * A small status indicator that displays text with semantic colors and icons.
+ * Matches WordPress Gutenberg Badge component design exactly.
+ *
+ * @package WPComponentLibrary
+ */
+
+import styled from "@emotion/styled";
+import { Icon } from "@wordpress/components";
+import { caution, check, info } from "@wordpress/icons";
+import { getBadgeIntentColors } from "../../constants/statusColors";
+
+// Badge container with intent-based styling - matches Gutenberg exactly
+const BadgeContainer = styled.span`
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 8px;
+    height: 24px;
+    border-radius: 2px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 24px;
+    white-space: nowrap;
+
+    // Intent-based color schemes matching Gutenberg Badge
+    ${(props) => {
+        const { background, color } = getBadgeIntentColors(props.intent);
+
+        return `
+			background-color: ${background};
+			color: ${color};
+		`;
+    }}
+
+    // Icon styling to match text color
+	svg {
+        fill: currentColor;
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+    }
+`;
+
+/**
+ * Badge Component
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.children - Badge text content
+ * @param {string} props.intent - Visual intent: 'default', 'error', 'critical', 'warning', 'info', 'suggestion', 'success', 'passed'
+ * @param {boolean} props.showIcon - Whether to show an icon (default: true)
+ * @param {Object} props.icon - Custom icon to display (overrides default icon)
+ * @param {string} props.className - Additional CSS classes
+ * @param {Object} props...otherProps - Any other props to pass to the container
+ *
+ * @returns {JSX.Element} Badge component
+ */
+export function Badge({
+    children,
+    intent = "default",
+    showIcon = true,
+    icon = null,
+    className = "",
+    ...otherProps
+}) {
+    // Determine icon based on intent - matches Gutenberg icons
+    const getIntentIcon = () => {
+        if (icon) { return icon; }
+        if (!showIcon) { return null; }
+
+        switch (intent) {
+            case "error":
+            case "critical":
+                return caution;
+            case "warning":
+                return caution;
+            case "info":
+            case "suggestion":
+                return info;
+            case "success":
+            case "passed":
+                return check;
+            default:
+                return info;
+        }
+    };
+
+    const intentIcon = getIntentIcon();
+
+    return (
+        <BadgeContainer
+            intent={intent}
+            className={`wp-component-library-badge ${className}`}
+            {...otherProps}
+        >
+            {intentIcon && <Icon icon={intentIcon} size={16} />}
+            {children}
+        </BadgeContainer>
+    );
+}
+
+// Export as default and named export for flexibility
+export default Badge;

package/components/block-appender/README.md

@@ -0,0 +1,158 @@
+# Block Appender Components
+
+A collection of customizable block appender components for different contexts in the WordPress block editor. These components provide consistent UI for adding new blocks while adapting to their specific use cases.
+
+## Components
+
+### CustomBlockAppender
+Standard block appender with tooltip for general use.
+
+### CustomInspectorAppender
+Block appender styled for inspector panels with secondary button styling.
+
+### CustomColumnAppender
+Column-specific appender with wrapper div for layout containers.
+
+### CustomInlineAppender
+Context-aware appender that only displays when its parent block is selected.
+
+## Usage
+
+```jsx
+import { 
+    CustomBlockAppender, 
+    CustomInspectorAppender,
+    CustomColumnAppender,
+    CustomInlineAppender 
+} from '@siratik/wp-component-library/components/block-appender';
+
+// Standard block appender
+<CustomBlockAppender
+    rootClientId={clientId}
+    appenderTitle="Add Content Block"
+    appenderLabel="Click to add a new content block"
+    appenderClassModifier="content"
+/>
+
+// Inspector panel appender
+<CustomInspectorAppender
+    rootClientId={clientId}
+    appenderTitle="Add Setting Block"
+    appenderLabel="Add a configuration block"
+/>
+
+// Column layout appender
+<CustomColumnAppender
+    rootClientId={columnId}
+    appenderTitle="Add Column Content"
+/>
+
+// Inline context-aware appender
+<CustomInlineAppender
+    clientId={parentBlockId}
+    rootClientId={parentBlockId}
+    label="Add Paragraph"
+    blockName="core/paragraph"
+/>
+```
+
+## Common Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `rootClientId` | `string` | Required | Parent block ID for insertion context |
+| `appenderTitle` | `string` | - | Display text for the appender button |
+| `appenderLabel` | `string` | - | Accessibility label for screen readers |
+| `appenderClassModifier` | `string` | - | CSS class modifier for custom styling |
+
+## CustomInlineAppender Specific Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `clientId` | `string` | Required | Block ID to monitor for selection state |
+| `label` | `string` | `"Add Block"` | Button label text |
+| `blockName` | `string` | `"core/paragraph"` | Default block type to insert |
+
+## Features
+
+### Quick Insert Mode
+All appenders use WordPress's quick insert mode for faster block addition.
+
+### Context-Aware Visibility
+CustomInlineAppender automatically shows/hides based on parent block selection state.
+
+### Consistent Styling
+Each appender type has appropriate styling for its context:
+- Standard: Primary button with tooltip
+- Inspector: Secondary button for panel integration
+- Column: Wrapped for layout containers
+- Inline: Minimal styling for inline contexts
+
+### Accessibility
+- Proper ARIA labels for screen readers
+- Keyboard navigation support
+- Tooltip hints for standard appender
+
+## CSS Classes
+
+Generated classes follow the pattern:
+- Base: `custom-appender`
+- With modifier: `custom-appender custom-appender--{modifier}`
+- Inspector: `custom-inspector-appender`
+- Column: `custom-column-appender`
+- Inline: `wp-block-appender` (uses core styling)
+
+## Examples
+
+### Adding to a Custom Container Block
+```jsx
+function ContainerEdit({ clientId }) {
+    return (
+        <div className="container-content">
+            <InnerBlocks />
+            <CustomBlockAppender
+                rootClientId={clientId}
+                appenderTitle="Add Container Item"
+                appenderClassModifier="container"
+            />
+        </div>
+    );
+}
+```
+
+### Inspector Panel Integration
+```jsx
+<InspectorControls>
+    <PanelBody title="Content Blocks">
+        <p>Add configuration blocks below:</p>
+        <CustomInspectorAppender
+            rootClientId={clientId}
+            appenderTitle="Add Config"
+        />
+    </PanelBody>
+</InspectorControls>
+```
+
+### Inline Editing Experience
+```jsx
+function InlineEditor({ clientId, isSelected }) {
+    return (
+        <div className="inline-content">
+            <InnerBlocks />
+            <CustomInlineAppender
+                clientId={clientId}
+                rootClientId={clientId}
+                label="Add Text"
+                blockName="core/paragraph"
+            />
+        </div>
+    );
+}
+```
+
+## Notes
+
+- All appenders integrate with WordPress's Inserter component
+- The quick inserter mode provides faster access to commonly used blocks
+- CustomInlineAppender uses block editor selection state for smart visibility
+- Appenders respect block insertion rules and allowed blocks