@flipdish/ui-library 0.41.2 → 0.42.0

package/dist/native/components/molecules/Tags/index.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Check, X, User01 } from '@flipdish/ui-icons';
+import { Dot } from '../../atoms/Dot/index.js';
+import { cx } from '../../../utilities/cx/index.js';
+import { useTestIdPrefix, slugifyTestId, useResolvedTestId, TestIdProvider, joinTestId } from '../../../utilities/testIdUtils/index.js';
+import { createContext, useContext, useState } from 'react';
+import { Text, View, Pressable, Image } from 'react-native';
+import { styles } from './Tags.styles.js';
+
+/** Grows the close target outward only — a left slop would cover the end of the label. */
+const CLOSE_HIT_SLOP = { top: 8, bottom: 8, right: 8 };
+const TagGroupContext = createContext({
+    selectionMode: 'none',
+    size: 'sm',
+    selectedKeys: new Set(),
+    toggle: () => undefined,
+});
+/**
+ * Small round avatar at the start of a native `Tag`. Same fallback behaviour as web;
+ * contrast border uses a `border` rather than CSS `outline`.
+ *
+ * @summary small round avatar for a tag (React Native)
+ */
+const TagAvatar = ({ src, alt, contrastBorder = true, className }) => {
+    const [isFailed, setIsFailed] = useState(false);
+    const size = styles.native.avatarSize;
+    return (jsx(View, { className: cx(styles.avatar, contrastBorder && 'border border-black/16', className), style: { width: size, height: size, borderRadius: size / 2 }, children: src && !isFailed ? (jsx(Image, { source: { uri: src }, accessibilityLabel: alt, onError: () => setIsFailed(true), style: { width: size, height: size, borderRadius: size / 2 } })) : (jsx(User01, { size: styles.native.avatarIconSize, color: styles.native.closeIconColor })) }));
+};
+const toKeySet = (keys) => new Set(keys ?? []);
+/**
+ * React Native `TagGroup` — display-only, single-select, multi-select and removable
+ * tags built from `View` / `Pressable` instead of react-aria. Keyboard Backspace/Delete
+ * removal (`onRemove`) and `dotClassName` are web-only; use `onClose` per tag and
+ * `dotColor` for status-dot colour.
+ *
+ * @summary group of tags for filtering, selection or categorisation (React Native)
+ */
+const TagGroup = ({ label, selectionMode = 'none', size = 'sm', selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, children, className, 'data-testid': dataTestId, }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'tag-group', rootName: 'tag-group' });
+    const [uncontrolledKeys, setUncontrolledKeys] = useState(() => toKeySet(defaultSelectedKeys));
+    const selectedKeys = selectedKeysProp !== undefined ? toKeySet(selectedKeysProp) : uncontrolledKeys;
+    const toggle = (id) => {
+        if (selectionMode === 'none')
+            return;
+        const next = new Set(selectedKeys);
+        if (selectionMode === 'single') {
+            if (next.has(id) && next.size === 1)
+                return;
+            next.clear();
+            next.add(id);
+        }
+        else if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
+        if (selectedKeysProp === undefined)
+            setUncontrolledKeys(next);
+        onSelectionChange?.(next);
+    };
+    return (jsx(TagGroupContext.Provider, { value: { selectionMode, size, selectedKeys, toggle }, children: jsx(TestIdProvider, { value: rootTestId, children: jsx(View, { testID: rootTestId, accessibilityLabel: label, className: className, children: children }) }) }));
+};
+/** Horizontal wrapping row of tags inside a `TagGroup`. */
+const TagList = ({ children, className }) => jsx(View, { className: cx('flex flex-row flex-wrap gap-2', className), children: children });
+// Check icon is authored at 24px; web's 14px viewBox used stroke 2 → 24/7 for equivalent weight.
+const CHECK_STROKE = 24 / 7;
+/**
+ * React Native `Tag` — optional avatar or status dot, count, selection checkbox and
+ * remove button. Selection and close use `Pressable`; label colour is a light-mode hex
+ * because `Text` ignores `className` under the current `react-native-css` preview.
+ *
+ * @summary single tag with optional adornments and selection (React Native)
+ */
+const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotColor = 'fg-success-secondary', isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
+    const context = useContext(TagGroupContext);
+    const prefix = useTestIdPrefix();
+    const idPart = slugifyTestId(String(id));
+    const tagTestId = dataTestId ?? (prefix ? joinTestId(prefix, `tag-${idPart}`) : undefined);
+    const closeTestId = tagTestId ? `${tagTestId}-close` : undefined;
+    const isSelected = context.selectedKeys.has(id);
+    const inSelectionGroup = context.selectionMode !== 'none';
+    const sizeStyles = styles.sizes[context.size];
+    const [closePressed, setClosePressed] = useState(false);
+    const leadingContent = avatarSrc ? (jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsx(Dot, { color: dotColor, size: "sm" })) : null;
+    const labelNode = typeof children === 'string' || typeof children === 'number' ? (jsx(Text, { style: { color: styles.native.labelColor, fontWeight: '500', ...styles.native.labelText[context.size] }, children: children })) : (children);
+    const body = (jsxs(Fragment, { children: [jsxs(View, { className: cx('flex flex-row items-center gap-1', sizeStyles.content), children: [context.selectionMode !== 'none' && (jsx(View, { className: cx('items-center justify-center rounded border border-primary bg-primary', styles.checkbox[context.size].root, isSelected && 'border-brand-solid bg-brand-solid', isDisabled && 'opacity-50', isDisabled && !isSelected && 'bg-tertiary'), children: isSelected ? (jsx(Check, { size: styles.native.checkIconSize[context.size], color: styles.native.checkColor, strokeWidth: CHECK_STROKE })) : null })), leadingContent, labelNode, typeof count === 'number' && (jsx(View, { className: cx(styles.count, sizeStyles.count), children: jsx(Text, { style: { color: styles.native.labelColor, fontWeight: '500', ...styles.native.countText[context.size] }, children: count }) }))] }), onClose && (jsx(Pressable, { testID: closeTestId, accessibilityRole: "button", accessibilityLabel: "Remove this tag", disabled: isDisabled, hitSlop: CLOSE_HIT_SLOP, onPress: () => onClose(String(id)), onPressIn: () => setClosePressed(true), onPressOut: () => setClosePressed(false), className: cx('items-center justify-center rounded-[3px]', styles.close[context.size].root, closePressed && 'bg-primary_hover'), children: jsx(X, { size: styles.native.closeIconSize[context.size], color: closePressed ? styles.native.closeIconColorPressed : styles.native.closeIconColor, strokeWidth: styles.native.closeIconStroke[context.size] }) }))] }));
+    const rootClassName = cx(styles.rootNative, sizeStyles.root.base, avatarSrc && sizeStyles.root.withAvatar, onClose && sizeStyles.root.withClose, dot && sizeStyles.root.withDot, typeof count === 'number' && sizeStyles.root.withCount, inSelectionGroup && sizeStyles.root.withCheckbox, className);
+    // Keep Pressable (with `disabled`) for any selectable group so a disabled+selected tag
+    // still exposes checkbox role and checked state; plain View only when display-only.
+    if (inSelectionGroup) {
+        return (jsx(Pressable, { testID: tagTestId, disabled: isDisabled, onPress: () => context.toggle(id), accessibilityRole: "checkbox", accessibilityState: { checked: isSelected, disabled: Boolean(isDisabled) }, className: rootClassName, children: body }));
+    }
+    return (jsx(View, { testID: tagTestId, accessibilityState: { disabled: Boolean(isDisabled) }, className: rootClassName, children: body }));
+};
+
+export { Tag, TagAvatar, TagGroup, TagList };
+//# sourceMappingURL=index.js.map

package/dist/native/components/molecules/Tags/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/molecules/Tags/index.native.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment","XClose"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.41.2",
+  "version": "0.42.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "imports": {
@@ -230,7 +230,7 @@
     "@storybook/addon-a11y": "^10.5.8",
     "@storybook/addon-docs": "^10.5.8",
     "@storybook/addon-mcp": "^0.7.0",
-    "@storybook/addon-vitest": "10.6.2",
+    "@storybook/addon-vitest": "10.6.3",
     "@storybook/react-vite": "^10.5.8",
     "@tailwindcss/vite": "^4.3.1",
     "@testing-library/jest-dom": "^6.9.1",