@ssejal8/recipe-ui-kit 0.1.0

package/packages/recipe-kit-stencil/src/components/rk-tag-input/rk-tag-input.css

@@ -0,0 +1,146 @@
+:host {
+  display: block;
+  font-family: var(--rk-font);
+  font-size: var(--rk-font-size, 15px);
+  color: var(--rk-ink, #211a16);
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 7px;
+  font-size: 0.88em;
+  font-weight: 600;
+  color: var(--rk-ink-2, #52443c);
+  cursor: text;
+}
+
+.counter {
+  font-size: 0.88em;
+  font-weight: 500;
+  color: var(--rk-muted, #857166);
+  font-variant-numeric: tabular-nums;
+}
+
+.shell {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  min-height: 46px;
+  background: var(--rk-surface, #fff);
+  border: 1px solid var(--rk-border, #ecdfd4);
+  border-radius: var(--rk-radius, 14px);
+  cursor: text;
+  transition: border-color var(--rk-transition), box-shadow var(--rk-transition);
+}
+
+.shell:focus-within {
+  border-color: var(--rk-primary, #d94f1b);
+  box-shadow: var(--rk-focus-ring);
+}
+
+.shell.has-error {
+  border-color: var(--rk-danger, #c2410c);
+}
+
+.shell.has-error:focus-within {
+  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.24);
+}
+
+.shell.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: var(--rk-surface-2, #fdf5ef);
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 4px 4px 11px;
+  border-radius: var(--rk-radius-pill, 999px);
+  background: var(--rk-primary-soft, #fdeee6);
+  color: var(--rk-primary-strong, #b23c11);
+  font-size: 0.85em;
+  font-weight: 600;
+  max-width: 100%;
+}
+
+.tag-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 19px;
+  height: 19px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: background var(--rk-transition), opacity var(--rk-transition);
+}
+
+.tag-remove:hover:not(:disabled) {
+  opacity: 1;
+  background: rgba(178, 60, 17, 0.16);
+}
+
+.tag-remove:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.tag-remove:disabled {
+  cursor: not-allowed;
+}
+
+.tag-remove svg {
+  width: 10px;
+  height: 10px;
+}
+
+.entry {
+  flex: 1 1 120px;
+  min-width: 110px;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  padding: 5px 2px;
+}
+
+.entry::placeholder {
+  color: var(--rk-muted, #857166);
+}
+
+.entry:disabled {
+  cursor: not-allowed;
+}
+
+.error {
+  margin: 7px 0 0;
+  font-size: 0.84em;
+  color: var(--rk-danger, #c2410c);
+  font-weight: 550;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shell,
+  .tag-remove {
+    transition: none;
+  }
+}

package/packages/recipe-kit-stencil/src/components/rk-tag-input/rk-tag-input.tsx

@@ -0,0 +1,181 @@
+import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';
+
+/**
+ * A tag / token editor used for recipe tags and free-form ingredient lists.
+ *
+ * `values` is an array property — the SvelteKit app assigns it as a DOM
+ * property. A JSON-encoded or comma-separated string attribute also works.
+ */
+@Component({
+  tag: 'rk-tag-input',
+  styleUrl: 'rk-tag-input.css',
+  shadow: true,
+})
+export class RkTagInput {
+  /** Current tags. Array, JSON string, or comma-separated string. */
+  @Prop() values: string[] | string = [];
+
+  /** Placeholder for the entry field. */
+  @Prop() placeholder = 'Add a tag and press Enter';
+
+  /** Visible field label. */
+  @Prop() label?: string;
+
+  /** Maximum number of tags. `0` means unlimited. */
+  @Prop() maxTags = 0;
+
+  /** Prevent editing. */
+  @Prop() disabled = false;
+
+  /** Validation message rendered under the field. */
+  @Prop() error?: string;
+
+  /** Emitted with the full, updated list whenever tags change. */
+  @Event({ eventName: 'rkTagsChange' }) rkTagsChange!: EventEmitter<string[]>;
+
+  @State() private draft = '';
+  @State() private tags: string[] = [];
+
+  private inputEl?: HTMLInputElement;
+
+  @Watch('values')
+  protected onValuesChange() {
+    this.syncTags();
+  }
+
+  componentWillLoad() {
+    this.syncTags();
+  }
+
+  private syncTags() {
+    const incoming = this.values;
+    if (Array.isArray(incoming)) {
+      this.tags = incoming.filter(tag => typeof tag === 'string');
+      return;
+    }
+    if (typeof incoming === 'string' && incoming.trim()) {
+      const trimmed = incoming.trim();
+      if (trimmed.startsWith('[')) {
+        try {
+          const decoded = JSON.parse(trimmed);
+          this.tags = Array.isArray(decoded) ? decoded.map(String) : [];
+          return;
+        } catch {
+          /* fall through to comma parsing */
+        }
+      }
+      this.tags = trimmed
+        .split(',')
+        .map(tag => tag.trim())
+        .filter(Boolean);
+      return;
+    }
+    this.tags = [];
+  }
+
+  private get atCapacity() {
+    return this.maxTags > 0 && this.tags.length >= this.maxTags;
+  }
+
+  private commit(next: string[]) {
+    this.tags = next;
+    this.rkTagsChange.emit([...next]);
+  }
+
+  private addDraft() {
+    const candidates = this.draft
+      .split(',')
+      .map(tag => tag.trim())
+      .filter(Boolean);
+    if (candidates.length === 0) return;
+
+    const next = [...this.tags];
+    for (const candidate of candidates) {
+      if (this.maxTags > 0 && next.length >= this.maxTags) break;
+      // Case-insensitive de-duplication keeps "Vegan" and "vegan" from coexisting.
+      if (next.some(tag => tag.toLowerCase() === candidate.toLowerCase())) continue;
+      next.push(candidate);
+    }
+
+    this.draft = '';
+    if (next.length !== this.tags.length) this.commit(next);
+  }
+
+  private removeAt(index: number) {
+    this.commit(this.tags.filter((_, position) => position !== index));
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ',') {
+      event.preventDefault();
+      this.addDraft();
+    } else if (event.key === 'Backspace' && this.draft === '' && this.tags.length > 0) {
+      event.preventDefault();
+      this.removeAt(this.tags.length - 1);
+    }
+  };
+
+  render() {
+    return (
+      <Host>
+        {this.label && (
+          <label class="label" part="label" onClick={() => this.inputEl?.focus()}>
+            {this.label}
+            {this.maxTags > 0 && (
+              <span class="counter">
+                {this.tags.length}/{this.maxTags}
+              </span>
+            )}
+          </label>
+        )}
+
+        <div
+          class={{ shell: true, 'is-disabled': this.disabled, 'has-error': !!this.error }}
+          part="shell"
+          onClick={() => !this.disabled && this.inputEl?.focus()}
+        >
+          {this.tags.map((tag, index) => (
+            <span class="tag" part="tag" key={`${tag}-${index}`}>
+              <span class="tag-text">{tag}</span>
+              <button
+                class="tag-remove"
+                type="button"
+                aria-label={`Remove ${tag}`}
+                disabled={this.disabled}
+                onClick={event => {
+                  event.stopPropagation();
+                  this.removeAt(index);
+                }}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true">
+                  <path d="M6 6l12 12M18 6 6 18" />
+                </svg>
+              </button>
+            </span>
+          ))}
+
+          <input
+            ref={el => (this.inputEl = el)}
+            class="entry"
+            part="input"
+            type="text"
+            value={this.draft}
+            placeholder={this.tags.length === 0 ? this.placeholder : this.atCapacity ? '' : 'Add another…'}
+            aria-label={this.label ?? 'Add a tag'}
+            disabled={this.disabled || this.atCapacity}
+            autocomplete="off"
+            onInput={event => (this.draft = (event.target as HTMLInputElement).value)}
+            onKeyDown={this.handleKeyDown}
+            onBlur={() => this.addDraft()}
+          />
+        </div>
+
+        {this.error && (
+          <p class="error" part="error" role="alert">
+            {this.error}
+          </p>
+        )}
+      </Host>
+    );
+  }
+}

package/packages/recipe-kit-stencil/src/components/rk-tag-input/test/rk-tag-input.spec.tsx

@@ -0,0 +1,76 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { RkTagInput } from '../rk-tag-input';
+
+describe('rk-tag-input', () => {
+  async function setup(html = `<rk-tag-input></rk-tag-input>`) {
+    const page = await newSpecPage({ components: [RkTagInput], html });
+    const input = page.root.shadowRoot.querySelector('input') as HTMLInputElement;
+    const onChange = jest.fn();
+    page.root.addEventListener('rkTagsChange', onChange);
+    return { page, input, onChange };
+  }
+
+  async function enter(page: Awaited<ReturnType<typeof newSpecPage>>, input: HTMLInputElement, value: string) {
+    input.value = value;
+    input.dispatchEvent(new Event('input'));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    await page.waitForChanges();
+  }
+
+  it('adds a tag on Enter and emits the whole list', async () => {
+    const { page, input, onChange } = await setup();
+
+    await enter(page, input, 'vegan');
+    expect(onChange.mock.calls[0][0].detail).toEqual(['vegan']);
+
+    await enter(page, input, 'one pot');
+    expect(onChange.mock.calls[1][0].detail).toEqual(['vegan', 'one pot']);
+  });
+
+  it('splits a comma-separated entry into several tags', async () => {
+    const { page, input, onChange } = await setup();
+
+    await enter(page, input, 'quick, easy, spicy');
+    expect(onChange.mock.calls[0][0].detail).toEqual(['quick', 'easy', 'spicy']);
+  });
+
+  it('rejects case-insensitive duplicates', async () => {
+    const { page, input, onChange } = await setup();
+
+    await enter(page, input, 'Vegan');
+    await enter(page, input, 'vegan');
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(page.root.shadowRoot.querySelectorAll('.tag')).toHaveLength(1);
+  });
+
+  it('stops accepting tags at maxTags', async () => {
+    const { page, input, onChange } = await setup(`<rk-tag-input max-tags="2"></rk-tag-input>`);
+
+    await enter(page, input, 'a');
+    await enter(page, input, 'b');
+    expect(onChange).toHaveBeenCalledTimes(2);
+
+    expect(input.disabled).toBe(true);
+    expect(page.root.shadowRoot.querySelectorAll('.tag')).toHaveLength(2);
+  });
+
+  it('accepts a JSON string attribute as a fallback for the array property', async () => {
+    const page = await newSpecPage({
+      components: [RkTagInput],
+      html: `<rk-tag-input values='["comfort food","one pot"]'></rk-tag-input>`,
+    });
+
+    const labels = Array.from(page.root.shadowRoot.querySelectorAll('.tag-text')).map(node => node.textContent);
+    expect(labels).toEqual(['comfort food', 'one pot']);
+  });
+
+  it('removes the last tag on Backspace when the field is empty', async () => {
+    const { page, input, onChange } = await setup(`<rk-tag-input values='["a","b"]'></rk-tag-input>`);
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
+    await page.waitForChanges();
+
+    expect(onChange.mock.calls[0][0].detail).toEqual(['a']);
+  });
+});