accomadesc 0.3.42 → 0.4.0

package/README.md

@@ -1,64 +1,160 @@
-# asc (Accomade Svelte Components)
+# accomadesc (Accomade Svelte Components)
 
-This project is a collection of Svelte 5 components used throughout the different products and websites that are made with https://accoma.de.
+A collection of Svelte 5 components used throughout Accomade products and websites. Provides reusable UI components for accommodation listings including calendars, pricing displays, photo galleries, booking forms, and more.
 
+## Installation
 
+```bash
+npm install accomadesc
+```
 
-# INITIAL README - create-svelte
+Peer dependencies (must be installed separately):
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+```bash
+npm install svelte @sveltejs/kit
+```
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+## Quick Start
+
+```svelte
+<script>
+  import { Button, AccoCard } from 'accomadesc';
+
+  const card = {
+    id: '1',
+    kind: 'acco-card',
+    content: {
+      title: 'Beach House',
+      photos: [{ url: '/house.jpg', alt: 'Beach house' }],
+      prices: { from: 150, to: 300, currency: 'EUR' },
+      amenities: ['wifi', 'parking'],
+      url: '/beach-house',
+    },
+  };
+</script>
+
+<AccoCard {...card} />
+<Button variant="primary">Book Now</Button>
+```
 
-## Creating a project
+## Block System
 
-If you're seeing this, you've probably already done this step. Congrats!
+The library uses a block-based content system. Each block has:
 
-```bash
-# create a new project in the current directory
-npx sv create
+- `id: string` - Unique identifier
+- `kind: string` - Block type discriminator
+- `content: T` - Block-specific content
+
+Use type guards for type narrowing:
 
-# create a new project in my-app
-npx sv create my-app
+```typescript
+import { isBookingRequest, type AccoBlock } from 'accomadesc';
+
+function processBlock(block: AccoBlock) {
+  if (isBookingRequest(block)) {
+    // TypeScript knows block is BookingRequest
+  }
+}
 ```
 
-## Developing
+## Core Components
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+### Basic UI
 
-```bash
-npm run dev
+- `Button` - Multi-variant button component
+- `TextInput` - Form text input with validation
+- `Icon` - SVG icon renderer
+- `Avatar` - User avatar display
+- `Spinner` - Loading indicator
+- `Notes` - Annotations and notes
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+### Content Display
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+- `AccoCard` - Accommodation summary card
+- `AccoDescription` - Property description
+- `AmenitiesCore` - Amenities display
+- `Photo` / `PhotoGallery` - Image handling
+- `Section` / `Text` - Content sections
+- `LeafletMap` - Location map
+- `Weather` - Weather information
 
-## Building
+### Booking & Calendar
 
-To build your library:
+- `Calendar` - Availability calendar
+- `CalendarGrid` - Grid-based calendar view
+- `CalendarRows` - Row-based calendar view
+- `CalendarAvailable` - Availability summary
+- `BookingRequest` - Booking request form
+- `ContactForm` - Contact form
 
-```bash
-npm run package
-```
+### Pricing
 
-To create a production version of your showcase app:
+- `Pricing` - Detailed pricing table
+- `PricingShort` - Compact pricing display
 
-```bash
-npm run build
+### Layout
+
+- `PageComponent` - Full page wrapper
+- `PageHeader` / `PageFooter` - Page sections
+- `MainNav` / `NavItem` - Navigation
+
+## Internationalization
+
+Components accept i18n functions as props:
+
+```svelte
+<script>
+  import { BookingRequest } from 'accomadesc';
+
+  let props = {
+    translateFunc: (key: string) => translations[key],
+    formatMoneyFunc: (amount: number, currency: string) =>
+      new Intl.NumberFormat().format(amount) + ' ' + currency,
+    formatDateFunc: (date: Date) => date.toLocaleDateString(),
+  };
+</script>
+
+<BookingRequest {...props} />
 ```
 
-You can preview the production build with `npm run preview`.
+## State Management
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+Use `SiteState` for application state:
 
-## Publishing
+```typescript
+import { SiteState } from 'accomadesc';
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+const site = new SiteState({
+  lang: 'en',
+  siteConfig: { ... },
+  translateFunc: (key) => ...,
+  formatMoneyFunc: (amount, currency) => ...,
+  formatDateFunc: (date) => ...,
+});
+```
 
-To publish your library to [npm](https://www.npmjs.com):
+## Development
 
 ```bash
-npm publish
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm run dev
+
+# Run tests
+pnpm run test
+
+# Type check
+pnpm run check
+
+# Format code
+pnpm run format
+
+# Build library
+pnpm run package
 ```
+
+## License
+
+MIT

package/dist/AccoCard.svelte

@@ -21,7 +21,7 @@
   let translatedSlug = $derived(translateFunc && slug ? translateFunc(slug) : '');
 </script>
 
-<div class="accocard-wrapper">
+<div class="accocard-wrapper" data-testid="accocard-wrapper">
   <div class="title-with-slug">
     <h2>{displayName}</h2>
     {#if slug}

package/dist/CalendarAvailable.svelte

@@ -20,7 +20,7 @@
     DateTime.utc().set({ day: 31, month: 12 }).plus({ years: maxFutureYears }),
   );
 
-  const formatAvailability = (from: DateTime | null, forDays: number): string => {
+  const formatAvailability = (from: DateTime | null | undefined, forDays: number): string => {
     if (!formatFunc || !formatDateFunc) return '';
     if (from == null) {
       const formattedFutureDate = formatDateFunc(maxFutureDate);

package/dist/MainNav.svelte

@@ -21,11 +21,10 @@
 
   const pathForLang = (lang: string) => {
     const pathElements = currentPath.split('/');
-    //initial slash results in empty string real first element
     if (pathElements.length == 1) return `/${lang}`;
 
     const firstElement = pathElements[1];
-    if (supportedLangs?.includes(firstElement)) {
+    if (firstElement && supportedLangs?.includes(firstElement)) {
       return ['', lang, ...pathElements.slice(2)].join('/');
     } else {
       return ['', lang, ...pathElements.slice(1)].join('/');

package/dist/PageComponent.svelte

@@ -53,11 +53,10 @@
   let currentPath = $derived(page.url.pathname);
   const pathForLang = (lang: string) => {
     const pathElements = currentPath.split('/');
-    //initial slash results in empty string real first element
     if (pathElements.length == 1) return `/${lang}`;
 
     const firstElement = pathElements[1];
-    if (supportedLangs?.includes(firstElement)) {
+    if (firstElement && supportedLangs?.includes(firstElement)) {
       return ['', lang, ...pathElements.slice(2)].join('/');
     } else {
       return ['', lang, ...pathElements.slice(1)].join('/');

package/dist/PhotoGallery.svelte

@@ -23,7 +23,11 @@
   );
 
   let zoomed: number | null = $state(0);
-  let zoomedPhoto: Photo | null = $derived(zoomed != null ? photos[zoomed] : null);
+  let zoomedPhoto: Photo | null = $derived.by(() => {
+    if (zoomed === null) return null;
+    const photo = photos[zoomed];
+    return photo ?? null;
+  });
 
   const zoom = (i: number) => {
     zoomed = i;

package/dist/Pricing.svelte

@@ -155,42 +155,20 @@
     return result;
   };
 
-  const colOutputRange = (range: PricingRange, col: PricingColumn): string => {
-    let result = '';
-    if (!formatDateFunc || !translateFunc || !formatMoneyFunc || !formatFunc) return result;
-
-    const entry = range.entry;
-    switch (col) {
-      case 'timeRange':
-        result = formatRangeCol(range);
-        break;
-      case 'firstNight':
-        result = formatFirstNightPriceCol(entry);
-        break;
-      case 'eachNight':
-        result = formatEachNightCol(entry);
-        break;
-      case 'extraPerson':
-        result = formatExtraPersonCol(entry);
-        break;
-      case 'minNumNights':
-        result = formatMinNightsCol(entry);
-        break;
-      case 'peopleNum':
-        result = formatPeopleNum(entry);
-        break;
-    }
-    return result;
+  const isStaticRange = (range: PricingRange | StaticPricingRange): range is StaticPricingRange => {
+    return (
+      'from' in range && 'to' in range && typeof range.from === 'object' && 'month' in range.from
+    );
   };
 
-  const colOutputStaticRange = (range: StaticPricingRange, col: PricingColumn): string => {
+  const colOutput = (range: PricingRange | StaticPricingRange, col: PricingColumn): string => {
     let result = '';
     if (!formatDateFunc || !translateFunc || !formatMoneyFunc || !formatFunc) return result;
 
     const entry = range.entry;
     switch (col) {
       case 'timeRange':
-        result = formatStaticRangeCol(range);
+        result = isStaticRange(range) ? formatStaticRangeCol(range) : formatRangeCol(range);
         break;
       case 'firstNight':
         result = formatFirstNightPriceCol(entry);
@@ -235,6 +213,79 @@
   </thead>
 {/snippet}
 
+{#snippet pricingTable(data: PricingRange[] | StaticPricingRange[])}
+  {#if w > 799}
+    <table class="pricing-table">
+      {@render wideTableHead()}
+      <tbody>
+        {#each data as e}
+          <tr>
+            {#each columns as h}
+              <td style={colCellStyle[h]}>
+                {@html colOutput(e, h)}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {:else if w > 400 && w < 800}
+    <table class="pricing-table">
+      {#each data as e}
+        <thead>
+          <tr>
+            <th colspan="2" scope="col">
+              {@html colOutput(e, 'timeRange')}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each columns as h}
+            {#if h !== 'timeRange'}
+              <tr>
+                <th scope="row">
+                  {@html translateFunc ? translateFunc(h) : ''}:
+                </th>
+                <td>
+                  {@html colOutput(e, h)}
+                </td></tr
+              >
+            {/if}
+          {/each}
+        </tbody>
+      {/each}
+    </table>
+  {:else}
+    <table class="pricing-table">
+      {#each data as e}
+        <thead>
+          <tr>
+            <th scope="col" class="main-header">
+              {@html colOutput(e, 'timeRange')}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each columns as h}
+            {#if h !== 'timeRange'}
+              <tr>
+                <th scope="row">
+                  {@html translateFunc ? translateFunc(h) : h}:
+                </th>
+              </tr>
+              <tr>
+                <td>
+                  {@html colOutput(e, h)}
+                </td>
+              </tr>
+            {/if}
+          {/each}
+        </tbody>
+      {/each}
+    </table>
+  {/if}
+{/snippet}
+
 {#key currentLang}
   <figure bind:clientWidth={w} class="pricing-wrapper">
     {#if global}
@@ -281,148 +332,10 @@
       </table>
     {/if}
     {#if staticRanges.length > 0}
-      {#if w > 799}
-        <table class="pricing-table">
-          {@render wideTableHead()}
-          <tbody>
-            {#each staticRanges as e}
-              <tr>
-                {#each columns as h}
-                  <td style={colCellStyle[h]}>
-                    {@html colOutputStaticRange(e, h)}
-                  </td>
-                {/each}
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      {:else if w > 400 && w < 800}
-        <table class="pricing-table">
-          {#each staticRanges as e}
-            <thead>
-              <tr>
-                <th colspan="2" scope="col">
-                  {@html colOutputStaticRange(e, 'timeRange')}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each columns as h}
-                {#if h !== 'timeRange'}
-                  <tr>
-                    <th scope="row">
-                      {@html translateFunc ? translateFunc(h) : ''}:
-                    </th>
-                    <td>
-                      {@html colOutputStaticRange(e, h)}
-                    </td></tr
-                  >
-                {/if}
-              {/each}
-            </tbody>
-          {/each}
-        </table>
-      {:else}
-        <table class="pricing-table">
-          {#each staticRanges as e}
-            <thead>
-              <tr>
-                <th scope="col" class="main-header">
-                  {@html colOutputStaticRange(e, 'timeRange')}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each columns as h}
-                {#if h !== 'timeRange'}
-                  <tr>
-                    <th scope="row">
-                      {@html translateFunc ? translateFunc(h) : h}:
-                    </th>
-                  </tr>
-                  <tr>
-                    <td>
-                      {@html colOutputStaticRange(e, h)}
-                    </td>
-                  </tr>
-                {/if}
-              {/each}
-            </tbody>
-          {/each}
-        </table>
-      {/if}
+      {@render pricingTable(staticRanges)}
     {/if}
     {#if filteredRanges.length > 0}
-      {#if w > 799}
-        <table class="pricing-table">
-          {@render wideTableHead()}
-          <tbody>
-            {#each filteredRanges as e}
-              <tr>
-                {#each columns as h}
-                  <td style={colCellStyle[h]}>
-                    {@html colOutputRange(e, h)}
-                  </td>
-                {/each}
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      {:else if w > 400 && w < 800}
-        <table class="pricing-table">
-          {#each filteredRanges as e}
-            <thead>
-              <tr>
-                <th colspan="2" scope="col">
-                  {@html colOutputRange(e, 'timeRange')}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each columns as h}
-                {#if h !== 'timeRange'}
-                  <tr>
-                    <th scope="row">
-                      {@html translateFunc ? translateFunc(h) : ''}:
-                    </th>
-                    <td>
-                      {@html colOutputRange(e, h)}
-                    </td></tr
-                  >
-                {/if}
-              {/each}
-            </tbody>
-          {/each}
-        </table>
-      {:else}
-        <table class="pricing-table">
-          {#each filteredRanges as e}
-            <thead>
-              <tr>
-                <th scope="col" class="main-header">
-                  {@html colOutputRange(e, 'timeRange')}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each columns as h}
-                {#if h !== 'timeRange'}
-                  <tr>
-                    <th scope="row">
-                      {@html translateFunc ? translateFunc(h) : h}:
-                    </th>
-                  </tr>
-                  <tr>
-                    <td>
-                      {@html colOutputRange(e, h)}
-                    </td>
-                  </tr>
-                {/if}
-              {/each}
-            </tbody>
-          {/each}
-        </table>
-      {/if}
+      {@render pricingTable(filteredRanges)}
     {/if}
 
     {#if footnote}

package/dist/SiteState.svelte.d.ts

@@ -25,7 +25,7 @@ export declare class SiteState implements I18nFacade {
     constructor(getSiteConfig: () => SiteConfig, lang: string | undefined);
     updateCurrentLang: (lang: string) => string;
     translateFunc: (ref: string) => string;
-    formatFunc: (ref: string, props: Record<string, any>) => string;
+    formatFunc: (ref: string, props: Record<string, unknown>) => string;
     formatDateFunc: (d: DateTime | string) => string;
     translateWithLangFunc: (ref: string, lang: string) => string;
 }

package/dist/SiteState.svelte.js

@@ -12,7 +12,6 @@ export class SiteState {
             return s;
         }, {});
     }
-    ;
     get cookieTranslations() {
         return Object.entries(this.fullTranslations).reduce((s, e) => {
             s[e[0]] = e[1].cookies;
@@ -39,10 +38,10 @@ export class SiteState {
         return this.siteTranslations;
     }
     get calendarTranslation() {
-        return this.calendarTranslations[this.currentLang];
+        return this.calendarTranslations[this.currentLang] ?? {};
     }
     get cookieTranslation() {
-        return this.cookieTranslations[this.currentLang];
+        return this.cookieTranslations[this.currentLang] ?? {};
     }
     get formats() {
         return this._getSiteConfigFn().lang.formats;
@@ -63,12 +62,20 @@ export class SiteState {
         if (!ref)
             return '[UNDEF]';
         const current = this.translations[this.currentLang];
-        if (!current[ref])
+        if (!current)
             return '';
-        return this.translations[this.currentLang][ref];
+        const value = current[ref];
+        if (!value)
+            return '';
+        return value;
     };
     formatFunc = (ref, props) => {
-        const fString = this.formats[this.currentLang][ref];
+        const langFormats = this.formats[this.currentLang];
+        if (!langFormats) {
+            console.warn(`[Missing format language: ${this.currentLang}]`);
+            return '[UNDEF]';
+        }
+        const fString = langFormats[ref];
         if (!fString) {
             console.warn(`[Missing formatFunc: ${ref}]`);
             return '[UNDEF]';
@@ -78,10 +85,13 @@ export class SiteState {
     };
     formatDateFunc = (d) => {
         if (!d)
-            return this.translateFunc("invalid");
+            return this.translateFunc('invalid');
         const formatSpecs = this.formats[this.currentLang];
+        if (!formatSpecs) {
+            return this.translateFunc('invalid');
+        }
         let f = 'yyyy-MM-dd';
-        if (formatSpecs?.dateFormat) {
+        if (formatSpecs.dateFormat) {
             f = formatSpecs.dateFormat;
         }
         let date;
@@ -89,17 +99,15 @@ export class SiteState {
             date = DateTime.fromISO(d);
         else
             date = d;
-        // if d was invalid to begin with or 
-        // translformation from ISO didn't yield a valid DateTime object
-        if (date.isValid)
-            return this.translateFunc("invalid");
+        if (!date.isValid)
+            return this.translateFunc('invalid');
         return date.setLocale(formatSpecs.locale).toFormat(f);
     };
     translateWithLangFunc = (ref, lang) => {
         const translation = this.translations[lang];
         if (!translation) {
             console.error(`[Tried to access unknown translation: ${lang}]`);
-            return "[UNDEF]";
+            return '[UNDEF]';
         }
         const res = translation[ref];
         if (res === undefined) {