@siratik/wp-component-library 0.1.1 → 0.1.2

package/components/segmented-bar/README.md

@@ -0,0 +1,30 @@
+# SegmentedBar Component
+
+A row of equal segments, one per item, each in a status color. Use it for "3 of 4 on" summaries where each part matters, not just the total.
+
+## Usage
+
+```jsx
+import { SegmentedBar } from '@siratik/wp-component-library';
+
+<SegmentedBar
+	label="Firewall: 3 of 4 on"
+	segments={ [
+		{ key: 'waf', intent: 'success' },
+		{ key: 'exploits', intent: 'success' },
+		{ key: 'xmlrpc', intent: 'warning' },
+		{ key: 'bots', intent: 'success' },
+	] }
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `segments` | `Array<{key: string, intent: string}>` | - | One segment each, in order. `intent` is `'success'`, `'warning'`, `'error'`, `'info'` or `'default'` (neutral gray) |
+| `label` | `string` | - | Accessible summary. The bar is announced as an image with this label |
+| `height` | `number` | `6` | Segment height in px |
+| `className` | `string` | `''` | Additional CSS classes |
+
+Colors come from the shared status palette (`statusColor`), so they match `Badge` and the score charts.

package/components/segmented-bar/index.js

@@ -0,0 +1,68 @@
+/**
+ * SegmentedBar Component
+ *
+ * A row of equal segments, one per item, each in a status color — for
+ * "3 of 4 on" style summaries where every part matters, not just the total.
+ *
+ * @package WPComponentLibrary
+ */
+
+import styled from "@emotion/styled";
+import { statusColor } from "../../constants/statusColors";
+
+const Track = styled.div`
+    display: flex;
+    gap: 6px;
+    width: 100%;
+`;
+
+const Segment = styled.span`
+    flex: 1;
+    height: ${({ $height }) => $height}px;
+    border-radius: ${({ $height }) => $height / 2}px;
+    background: ${({ $color }) => $color};
+`;
+
+const NEUTRAL = "var(--wpds-color-background-surface-neutral-weak, #f0f0f0)";
+
+/**
+ * Color for a segment intent.
+ *
+ * @param {string} intent 'success', 'warning', 'error', 'info' or 'default'.
+ * @return {string} CSS color.
+ */
+function segmentColor(intent) {
+    return ["success", "warning", "error", "info"].includes(intent)
+        ? statusColor(intent, "fill")
+        : NEUTRAL;
+}
+
+/**
+ * SegmentedBar Component
+ *
+ * @param {Object}                                  props
+ * @param {Array<{key: string, intent: string}>}    props.segments    One segment each, in order.
+ * @param {string}                                  props.label       Accessible summary, e.g. "Firewall: 3 of 4 on".
+ * @param {number}                                  [props.height=6]  Segment height in px.
+ * @param {string}                                  [props.className] Additional CSS classes.
+ * @return {JSX.Element} Segmented bar.
+ */
+export function SegmentedBar({ segments, label, height = 6, className = "" }) {
+    return (
+        <Track
+            role="img"
+            aria-label={label}
+            className={`siratik-segmented-bar ${className}`.trim()}
+        >
+            {segments.map((segment) => (
+                <Segment
+                    key={segment.key}
+                    $height={height}
+                    $color={segmentColor(segment.intent)}
+                />
+            ))}
+        </Track>
+    );
+}
+
+export default SegmentedBar;

package/components/sortable-select/README.md

@@ -0,0 +1,153 @@
+# SortableSelect Component
+
+A flexible component that combines react-select with drag-and-drop sorting capabilities using dnd-kit. The selected tokens/pills within the react-select component itself are sortable via drag and drop. Perfect for creating searchable, sortable lists of posts, terms, users, or any custom data.
+
+## Installation
+
+This component's dependencies are included with the component library. No additional installation is required.
+
+### Dependencies Included:
+- react-select (for the select functionality)
+- @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, @dnd-kit/modifiers (for drag and drop)
+
+**Note about @emotion warnings:** You may see console warnings about multiple instances of @emotion/react. These warnings are harmless and occur because react-select bundles @emotion. The component will function correctly despite these warnings.
+
+## Basic Usage
+
+```jsx
+import { SortableSelect } from '@siratik/wp-component-library';
+import { useState } from '@wordpress/element';
+
+function MyComponent() {
+    const [selected, setSelected] = useState([]);
+    
+    return (
+        <SortableSelect
+            value={selected}
+            onChange={setSelected}
+            options={[
+                { value: '1', label: 'Option 1' },
+                { value: '2', label: 'Option 2' },
+                { value: '3', label: 'Option 3' },
+            ]}
+            placeholder="Select options..."
+        />
+    );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Array` | `[]` | Currently selected items |
+| `onChange` | `Function` | required | Callback when selection or order changes |
+| `options` | `Array` | - | Static options for sync mode |
+| `loadOptions` | `Function` | - | Async function to load options |
+| `getOptionLabel` | `Function` | `(option) => option.label \|\| option.name \|\| option.title` | Extract display label |
+| `getOptionValue` | `Function` | `(option) => option.value \|\| option.id` | Extract unique value |
+| `renderOption` | `Function` | - | Custom option renderer |
+| `placeholder` | `string` | `"Search and select..."` | Placeholder text |
+| `isMulti` | `boolean` | `true` | Enable multi-select |
+| `isClearable` | `boolean` | `true` | Show clear button |
+| `isSearchable` | `boolean` | `true` | Enable search |
+| `isDisabled` | `boolean` | `false` | Disable component |
+| `className` | `string` | `""` | Additional CSS classes |
+| `maxItems` | `number` | - | Maximum selectable items |
+| `filterOption` | `Function` | - | Custom filter function |
+
+## Advanced Examples
+
+### Async Post Search
+
+```jsx
+import { SortableSelect } from '@siratik/wp-component-library';
+import apiFetch from '@wordpress/api-fetch';
+
+function PostSelector() {
+    const [selectedPosts, setSelectedPosts] = useState([]);
+    
+    const searchPosts = async (inputValue) => {
+        const response = await apiFetch({
+            path: `/wp/v2/posts?search=${inputValue}&per_page=20`,
+        });
+        return response;
+    };
+    
+    return (
+        <SortableSelect
+            value={selectedPosts}
+            onChange={setSelectedPosts}
+            loadOptions={searchPosts}
+            getOptionLabel={(post) => post.title.rendered}
+            getOptionValue={(post) => post.id}
+            placeholder="Search posts..."
+        />
+    );
+}
+```
+
+### Custom Rendering
+
+```jsx
+<SortableSelect
+    value={selectedUsers}
+    onChange={setSelectedUsers}
+    loadOptions={searchUsers}
+    renderOption={(user) => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <img 
+                src={user.avatar_urls['48']} 
+                alt={user.name}
+                style={{ width: '24px', height: '24px', borderRadius: '50%' }}
+            />
+            <div>
+                <div>{user.name}</div>
+                <small style={{ color: '#666' }}>{user.email}</small>
+            </div>
+        </div>
+    )}
+/>
+```
+
+### Variable Tags with Categories
+
+```jsx
+const variableTags = [
+    { value: '{{site_name}}', label: 'Site Name', category: 'Site' },
+    { value: '{{post_title}}', label: 'Post Title', category: 'Post' },
+    { value: '{{author_name}}', label: 'Author Name', category: 'Author' },
+];
+
+<SortableSelect
+    value={selectedTags}
+    onChange={setSelectedTags}
+    options={variableTags}
+    renderOption={(option) => (
+        <div>
+            <strong>{option.label}</strong>
+            <code style={{ marginLeft: '8px' }}>{option.value}</code>
+        </div>
+    )}
+/>
+```
+
+## Styling
+
+The component includes default styles and supports dark mode. You can customize the appearance using the provided CSS classes:
+
+- `.sortable-select` - Main container
+- `.sortable-select__control` - React-select control
+- `.sortable-select__multi-value` - Individual token/pill
+- `.sortable-select__drag-handle` - Drag handle icon within tokens
+- `.sortable-select__multi-value__label` - Token label text
+- `.sortable-select__multi-value__remove` - Token remove button
+
+## Accessibility
+
+The component includes proper ARIA labels and keyboard support:
+- Arrow keys to navigate options
+- Enter to select
+- Tab to move between elements
+- Drag tokens to reorder them within the select component
+- The drag handle appears on hover for better UX

package/components/sortable-select/custom-sortable-token.js

@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from "@wordpress/components";
+import { closeSmall } from "@wordpress/icons";
+
+/**
+ * External dependencies
+ */
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import styled from '@emotion/styled';
+
+// Styled components
+const StyledToken = styled.span`
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	padding: 0 2px 0 6px;
+	height: 24px;
+	background: #ddd;
+	border-radius: 2px;
+	font-size: 13px;
+	cursor: grab;
+	position: relative;
+
+	&.is-dragging {
+		opacity: 0.5;
+		cursor: grabbing;
+		z-index: 1000;
+	}
+
+	&.is-plain-text {
+		background: transparent;
+		border-radius: 0;
+		padding: 0;
+		cursor: move;
+
+		.sortable-select__token-text {
+			font-weight: normal;
+		}
+	}
+
+	&.is-variable {
+		background: #e0e0e0;
+		border: 1px solid #ccc;
+		font-family: monospace;
+		font-size: 12px;
+	}
+`;
+
+const StyledTokenText = styled.span`
+	max-width: 200px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;
+
+const StyledTokenRemove = styled(Button)`
+	padding: 0;
+	height: 18px;
+	width: 18px;
+	min-width: 18px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+
+	// Override WordPress button styles
+	&.components-button.has-icon {
+		padding: 0;
+		width: 24px;
+		min-width: 24px;
+	}
+`;
+
+/**
+ * CustomSortableToken Component
+ *
+ * A draggable token for the custom sortable select implementation.
+ */
+export default function CustomSortableToken({
+	id,
+	value,
+	onRemove,
+	disabled = false,
+	isPlainText = false,
+	isVariable = false,
+}) {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({
+		id,
+		disabled,
+	});
+
+	const style = {
+		transform: CSS.Translate.toString(transform),
+		transition,
+	};
+
+	return (
+		<StyledToken
+			ref={setNodeRef}
+			style={style}
+			className={`${isDragging ? "is-dragging" : ""} ${isPlainText ? "is-plain-text" : ""} ${isVariable ? "is-variable" : ""}`}
+			{...attributes}
+			{...listeners}
+		>
+			<StyledTokenText>{value}</StyledTokenText>
+			<StyledTokenRemove
+				icon={closeSmall}
+				label="Remove"
+				onClick={(e) => {
+					e.stopPropagation();
+					onRemove();
+				}}
+				disabled={disabled}
+				size="small"
+			/>
+		</StyledToken>
+	);
+}