@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

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

@@ -1,181 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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']);
-  });
-});

package/packages/recipe-kit-stencil/src/index.html

@@ -1,259 +0,0 @@
-<!doctype html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>recipe-kit-stencil — component gallery</title>
-    <script type="module" src="/build/recipe-kit.esm.js"></script>
-    <script nomodule src="/build/recipe-kit.js"></script>
-    <style>
-      body {
-        margin: 0;
-        padding: 40px 24px 96px;
-        background: var(--rk-bg);
-        color: var(--rk-ink);
-        font-family: var(--rk-font);
-        font-size: 15px;
-      }
-      main {
-        max-width: 960px;
-        margin: 0 auto;
-        display: grid;
-        gap: 44px;
-      }
-      h1 {
-        font-family: var(--rk-font-display);
-        font-size: 2.1rem;
-        margin: 0 0 6px;
-        letter-spacing: -0.02em;
-      }
-      .lede {
-        color: var(--rk-muted);
-        margin: 0;
-        max-width: 60ch;
-        line-height: 1.6;
-      }
-      section h2 {
-        font-size: 0.78rem;
-        text-transform: uppercase;
-        letter-spacing: 0.09em;
-        color: var(--rk-muted);
-        margin: 0 0 14px;
-        padding-bottom: 8px;
-        border-bottom: 1px solid var(--rk-border);
-      }
-      .row {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        align-items: center;
-      }
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-        gap: 18px;
-      }
-      .planner {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-        gap: 12px;
-      }
-      button.demo {
-        font: inherit;
-        font-weight: 600;
-        padding: 9px 16px;
-        border-radius: 999px;
-        border: 1px solid var(--rk-border);
-        background: var(--rk-surface);
-        color: var(--rk-ink);
-        cursor: pointer;
-      }
-      #log {
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        font-size: 12px;
-        background: var(--rk-ink);
-        color: #d8f5c8;
-        padding: 14px 16px;
-        border-radius: 12px;
-        max-height: 180px;
-        overflow: auto;
-        white-space: pre-wrap;
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <main>
-      <header>
-        <h1>recipe-kit-stencil</h1>
-        <p class="lede">
-          A framework-agnostic web component library built with StencilJS. Every event below is logged at the bottom of the page — the same events the
-          SvelteKit application listens for.
-        </p>
-      </header>
-
-      <section>
-        <h2>rk-search-bar</h2>
-        <rk-search-bar hint="Debounced at 350&thinsp;ms. Press Escape to clear.">
-          <rk-badge slot="actions" tone="accent">beta</rk-badge>
-        </rk-search-bar>
-      </section>
-
-      <section>
-        <h2>rk-chip &amp; rk-segmented-control</h2>
-        <div class="row">
-          <rk-chip label="Seafood" value="Seafood" count="18"><span>🐟</span></rk-chip>
-          <rk-chip label="Dessert" value="Dessert" selected tone="primary"></rk-chip>
-          <rk-chip label="Vegan" value="Vegan" tone="accent" selected></rk-chip>
-          <rk-chip label="Italian" value="Italian" dismissible></rk-chip>
-        </div>
-        <br />
-        <rk-segmented-control id="segments" label="Sort recipes"></rk-segmented-control>
-      </section>
-
-      <section>
-        <h2>rk-badge &amp; rk-rating</h2>
-        <div class="row">
-          <rk-badge>neutral</rk-badge>
-          <rk-badge tone="primary" variant="solid">primary solid</rk-badge>
-          <rk-badge tone="accent" variant="outline">accent outline</rk-badge>
-          <rk-badge tone="success" small>30 min</rk-badge>
-          <rk-rating value="4" show-value count="128"></rk-rating>
-          <rk-rating value="3.5" readonly show-value></rk-rating>
-        </div>
-      </section>
-
-      <section>
-        <h2>rk-recipe-card</h2>
-        <div class="grid">
-          <rk-recipe-card
-            recipe-id="52772"
-            name="Teriyaki Chicken Casserole"
-            image="https://www.themealdb.com/images/media/meals/wvpsxx1468256321.jpg"
-            category="Chicken"
-            area="Japanese"
-            minutes="45"
-            servings="4"
-            href="#52772"
-          >
-            <rk-badge tone="accent" small>weeknight</rk-badge>
-            <button class="demo" slot="actions">Add to plan</button>
-          </rk-recipe-card>
-
-          <rk-recipe-card
-            recipe-id="local-1"
-            name="Grandma's Sunday Ragù"
-            category="Pasta"
-            area="Italian"
-            minutes="180"
-            origin="custom"
-            favorite
-          >
-            <rk-badge tone="warning" small>slow cook</rk-badge>
-          </rk-recipe-card>
-
-          <rk-recipe-card
-            recipe-id="52959"
-            name="Baked Salmon with Fennel &amp; Tomatoes"
-            image="https://www.themealdb.com/images/media/meals/1548772327.jpg"
-            category="Seafood"
-            area="British"
-            minutes="30"
-            compact
-          ></rk-recipe-card>
-        </div>
-      </section>
-
-      <section>
-        <h2>rk-meal-slot</h2>
-        <div class="planner">
-          <rk-meal-slot day="monday" meal-type="breakfast" meal-label="Breakfast"></rk-meal-slot>
-          <rk-meal-slot
-            day="monday"
-            meal-type="dinner"
-            meal-label="Dinner"
-            recipe-id="52772"
-            recipe-name="Teriyaki Chicken Casserole"
-            recipe-image="https://www.themealdb.com/images/media/meals/wvpsxx1468256321.jpg"
-          ></rk-meal-slot>
-          <rk-meal-slot day="tuesday" meal-type="lunch" meal-label="Lunch"></rk-meal-slot>
-        </div>
-      </section>
-
-      <section>
-        <h2>rk-tag-input</h2>
-        <rk-tag-input id="tags" label="Recipe tags" max-tags="6"></rk-tag-input>
-      </section>
-
-      <section>
-        <h2>rk-modal</h2>
-        <button class="demo" id="open-modal">Open dialog</button>
-        <rk-modal id="modal" heading="Delete this recipe?" subheading="This cannot be undone.">
-          <p style="margin: 0">Removing “Grandma's Sunday Ragù” also removes it from every day of your weekly plan.</p>
-          <button class="demo" slot="footer" id="cancel-modal">Cancel</button>
-          <button class="demo" slot="footer" style="background: var(--rk-danger); border-color: var(--rk-danger); color: #fff">Delete</button>
-        </rk-modal>
-      </section>
-
-      <section>
-        <h2>rk-empty-state</h2>
-        <rk-empty-state icon="🔍" heading="No recipes matched “quinoa risotto”" message="Try a broader search term, or clear the active filters.">
-          <button class="demo">Clear filters</button>
-        </rk-empty-state>
-      </section>
-
-      <section>
-        <h2>Event log</h2>
-        <pre id="log">Interact with the components above…</pre>
-      </section>
-    </main>
-
-    <script type="module">
-      const log = document.getElementById('log');
-      let lines = [];
-      const record = (event) => {
-        lines.unshift(`${event.type} → ${JSON.stringify(event.detail)}`);
-        log.textContent = lines.slice(0, 40).join('\n');
-      };
-
-      const events = [
-        'rkSearch', 'rkClear', 'rkChipToggle', 'rkChipDismiss', 'rkSegmentChange', 'rkRatingChange',
-        'rkCardSelect', 'rkFavoriteToggle', 'rkMealAdd', 'rkMealSwap', 'rkMealRemove', 'rkMealOpen',
-        'rkMealDrop', 'rkTagsChange', 'rkModalClose',
-      ];
-      events.forEach((name) => document.addEventListener(name, record));
-
-      // Array-valued properties are assigned as DOM properties, never attributes.
-      customElements.whenDefined('rk-segmented-control').then(() => {
-        const segments = document.getElementById('segments');
-        segments.options = [
-          { label: 'Relevance', value: 'relevance' },
-          { label: 'A–Z', value: 'az' },
-          { label: 'Quickest', value: 'time', count: 12 },
-          { label: 'Unavailable', value: 'x', disabled: true },
-        ];
-        segments.value = 'relevance';
-        segments.addEventListener('rkSegmentChange', (event) => (segments.value = event.detail));
-      });
-
-      customElements.whenDefined('rk-tag-input').then(() => {
-        const tags = document.getElementById('tags');
-        tags.values = ['comfort food', 'one pot'];
-      });
-
-      // Favorite state is owned by the host app, exactly as in SvelteKit.
-      document.addEventListener('rkFavoriteToggle', (event) => {
-        event.target.favorite = event.detail.favorite;
-      });
-
-      document.addEventListener('rkChipToggle', (event) => {
-        event.target.selected = event.detail.selected;
-      });
-
-      const modal = document.getElementById('modal');
-      document.getElementById('open-modal').addEventListener('click', () => (modal.open = true));
-      document.getElementById('cancel-modal').addEventListener('click', () => (modal.open = false));
-      modal.addEventListener('rkModalClose', () => (modal.open = false));
-    </script>
-  </body>
-</html>

package/packages/recipe-kit-stencil/stencil.config.ts

@@ -1,41 +0,0 @@
-import { Config } from '@stencil/core';
-
-export const config: Config = {
-  namespace: 'recipe-kit',
-  globalStyle: 'src/global/rk-global.css',
-  sourceMap: true,
-  buildEs5: false,
-  extras: {
-    enableImportInjection: true,
-  },
-  outputTargets: [
-    // Lazy-loaded distribution + `loader/` entry point. This is what the
-    // SvelteKit app consumes from npm via `recipe-kit-stencil/loader`.
-    {
-      type: 'dist',
-      esmLoaderPath: '../loader',
-      isPrimaryPackageOutputTarget: true,
-      copy: [{ src: 'global/rk-global.css', dest: 'rk-global.css', warn: true }],
-    },
-    // Standalone custom elements, for consumers that want to import a single
-    // component and define it themselves (tree-shakeable).
-    {
-      type: 'dist-custom-elements',
-      customElementsExportBehavior: 'auto-define-custom-elements',
-      externalRuntime: false,
-      generateTypeDeclarations: true,
-    },
-    {
-      type: 'docs-readme',
-      footer: '*Built with [StencilJS](https://stenciljs.com/)*',
-    },
-    {
-      type: 'www',
-      serviceWorker: null,
-    },
-  ],
-  testing: {
-    browserHeadless: 'shell',
-  },
-  validatePrimaryPackageOutputTarget: true,
-};

package/packages/recipe-kit-stencil/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "allowUnreachableCode": false,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "lib": ["dom", "es2020"],
-    "moduleResolution": "bundler",
-    "module": "esnext",
-    "target": "es2020",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "sourceMap": true,
-    "strictNullChecks": false,
-    "strictPropertyInitialization": false,
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
-    "esModuleInterop": true,
-    "skipLibCheck": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "loader", "www"]
-}