feat: Add SelectableList component (no-changelog)

packages/design-system/src/components/N8nPillList/PillList.stories.ts

@@ -0,0 +1,41 @@
+import type { StoryFn } from '@storybook/vue3';
+
+import N8nPillList from './PillList.vue';
+
+export default {
+	title: 'Modules/PillList',
+	component: N8nPillList,
+	argTypes: {},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args: { ...args, modelValue: undefined }, model: args.modelValue }),
+	props: Object.keys(argTypes),
+	// Generics make this difficult to type
+	components: N8nPillList as never,
+	template: '<n8n-pill-list v-bind="args" v-model="model" />',
+});
+
+export const PillList = Template.bind({});
+PillList.args = {
+	modelValue: {
+		propC: 'propC pre-existing initial value',
+	},
+	inputs: [
+		{
+			name: 'propA',
+			initialValue: false,
+		},
+		{
+			name: 'propB',
+			initialValue: 0,
+		},
+		{
+			name: 'propC',
+			initialValue: 'propC default',
+		},
+	],
+};

packages/design-system/src/components/N8nPillList/PillList.test.ts

@@ -0,0 +1,101 @@
+import { fireEvent, render } from '@testing-library/vue';
+
+import N8nPillList from './PillList.vue';
+
+describe('N8nPillList', () => {
+	it('renders when empty', () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {},
+				inputs: [],
+			},
+		});
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it('renders one clickable element that can be added and removed', async () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {},
+				inputs: [{ name: 'propA', initialValue: '' }],
+			},
+		});
+
+		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
+
+		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propA'));
+
+		expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
+	});
+
+	it('renders multiple elements with some pre-selected', () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {
+					propC: false,
+					propA: 'propA value',
+				},
+				inputs: [
+					{ name: 'propA', initialValue: '' },
+					{ name: 'propB', initialValue: 3 },
+					{ name: 'propC', initialValue: true },
+					{ name: 'propD', initialValue: true },
+				],
+			},
+		});
+
+		expect(wrapper.queryByTestId('pill-list-pill-propA')).not.toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-pill-propC')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propA')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propB')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propC')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propD')).toBeInTheDocument();
+
+		// This asserts order - specifically that propA appears before propC
+		expect(
+			wrapper
+				.getByTestId('pill-list-slot-propA')
+				.compareDocumentPosition(wrapper.getByTestId('pill-list-slot-propC')),
+		).toEqual(2);
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it('renders disabled collection and clicks do not modify', async () => {
+		const wrapper = render(N8nPillList, {
+			props: {
+				modelValue: {
+					propB: 'propB value',
+				},
+				disabled: true,
+				inputs: [
+					{ name: 'propA', initialValue: '' },
+					{ name: 'propB', initialValue: '' },
+					{ name: 'propC', initialValue: '' },
+				],
+			},
+		});
+
+		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-slot-propB')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-pill-propB')).not.toBeInTheDocument();
+		expect(wrapper.getByTestId('pill-list-pill-propC')).toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('pill-list-pill-propA'));
+
+		expect(wrapper.getByTestId('pill-list-pill-propA')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-slot-propA')).not.toBeInTheDocument();
+
+		await fireEvent.click(wrapper.getByTestId('pill-list-remove-slot-propB'));
+
+		expect(wrapper.getByTestId('pill-list-slot-propB')).toBeInTheDocument();
+		expect(wrapper.queryByTestId('pill-list-pill-propB')).not.toBeInTheDocument();
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

packages/design-system/src/components/N8nPillList/PillList.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts" generic="Value, Item extends { name: string; initialValue: Value }">
+import { computed } from 'vue';
+
+defineSlots<{
+	displayItem: (props: Item) => unknown;
+}>();
+
+type PillListProps = {
+	inputs: Item[];
+	disabled?: boolean;
+};
+
+const props = withDefaults(defineProps<PillListProps>(), {
+	inputs: () => [],
+	disabled: false,
+});
+
+// Record<inputs[k].name, initialValue>
+// Note that only the keys will stay up to date to reflect selected keys
+// Whereas the values will not automatically update if the related slot value is updated
+const selectedItems = defineModel<Record<string, Value>>({ required: true });
+
+const inputMap = computed(() => Object.fromEntries(props.inputs.map((x) => [x.name, x] as const)));
+
+const visiblePills = computed(() => {
+	return props.inputs.filter((pill) => !selectedItems.value.hasOwnProperty(pill.name));
+});
+
+const sortedSelectedItems = computed(() => {
+	return [
+		...Object.entries(selectedItems.value).map(([name, initialValue]) => ({
+			...inputMap.value[name],
+			initialValue,
+		})),
+	].sort((a, b) => (a.name[0] < b.name[0] ? -1 : 1));
+});
+
+function addToSelectedItems(name: string) {
+	selectedItems.value[name] = inputMap.value[name].initialValue;
+}
+
+function removeFromSelectedItems(name: string) {
+	delete selectedItems.value[name];
+}
+</script>
+
+<template>
+	<div>
+		<div :class="$style.pillContainer">
+			<span
+				v-for="item in [...visiblePills].sort((a, b) => (a.name < b.name ? -1 : 1))"
+				:key="item.name"
+				:class="$style.pillCell"
+				:data-test-id="`pill-list-pill-${item.name}`"
+				@click="!props.disabled && addToSelectedItems(item.name)"
+			>
+				+ Add a {{ item.name }}
+			</span>
+		</div>
+		<div
+			v-for="item in sortedSelectedItems"
+			:key="item.name"
+			:class="$style.slotComboContainer"
+			:data-test-id="`pill-list-slot-${item.name}`"
+		>
+			<N8nIcon
+				:class="$style.slotRemoveIcon"
+				size="xsmall"
+				:icon="disabled ? 'none' : 'trash'"
+				:data-test-id="`pill-list-remove-slot-${item.name}`"
+				@click="!disabled && removeFromSelectedItems(item.name)"
+			/>
+			<div :class="$style.slotContainer">
+				<slot name="displayItem" v-bind="item"
+					>Empty slot with v-bind: {{ JSON.stringify(item) }}</slot
+				>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.slotComboContainer {
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	gap: var(--spacing-2xs);
+}
+
+.slotContainer {
+	flex-grow: 1;
+}
+
+.pillContainer {
+	width: 100%;
+	flex-wrap: wrap;
+	display: flex;
+}
+.pillCell {
+	display: flex;
+	margin-right: var(--spacing-3xs);
+
+	min-width: max-content;
+	border-radius: var(--border-radius-base);
+	font-size: small;
+	background-color: var(--color-ndv-background);
+	color: var(--text-color-dark);
+
+	cursor: pointer;
+
+	:hover {
+		color: var(--color-primary);
+	}
+}
+
+.slotRemoveIcon {
+	color: var(--color-text-light);
+	height: 10px;
+	width: 10px;
+	margin-top: 3px;
+
+	:hover {
+		cursor: pointer;
+	}
+}
+</style>

packages/design-system/src/components/N8nPillList/__snapshots__/PillList.test.ts.snap

@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`N8nPillList > renders disabled collection and clicks do not modify 1`] = `
+"<div>
+  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propA"> + Add a propA</span><span class="pillCell" data-test-id="pill-list-pill-propC"> + Add a propC</span></div>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propB"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propB"><!----></span>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propB","initialValue":"propB value"}</div>
+  </div>
+</div>"
+`;
+
+exports[`N8nPillList > renders multiple elements with some pre-selected 1`] = `
+"<div>
+  <div class="pillContainer"><span class="pillCell" data-test-id="pill-list-pill-propB"> + Add a propB</span><span class="pillCell" data-test-id="pill-list-pill-propD"> + Add a propD</span></div>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propC"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propC"><!----></span>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propC","initialValue":false}</div>
+  </div>
+  <div class="slotComboContainer" data-test-id="pill-list-slot-propA"><span class="n8n-text compact size-xsmall regular n8n-icon slotRemoveIcon slotRemoveIcon n8n-icon slotRemoveIcon slotRemoveIcon" data-test-id="pill-list-remove-slot-propA"><!----></span>
+    <div class="slotContainer">Empty slot with v-bind: {"name":"propA","initialValue":"propA value"}</div>
+  </div>
+</div>"
+`;
+
+exports[`N8nPillList > renders when empty 1`] = `
+"<div>
+  <div class="pillContainer"></div>
+</div>"
+`;

packages/design-system/src/components/N8nPillList/index.ts

@@ -0,0 +1,3 @@
+import N8nPillList from './PillList.vue';
+
+export default N8nPillList;

packages/design-system/src/components/index.ts

@@ -33,6 +33,7 @@ export { default as N8nNodeCreatorNode } from './N8nNodeCreatorNode';
 export { default as N8nNodeIcon } from './N8nNodeIcon';
 export { default as N8nNotice } from './N8nNotice';
 export { default as N8nOption } from './N8nOption';
+export { default as N8nPillList } from './N8nPillList';
 export { default as N8nPopover } from './N8nPopover';
 export { default as N8nPulse } from './N8nPulse';
 export { default as N8nRadioButtons } from './N8nRadioButtons';