runeforge 0.0.1 → 0.0.3

package/README.md

@@ -12,6 +12,47 @@ A SvelteKit toolkit that forges forms, tables, actions, and CRUD workflows from
 
 ---
 
+## Table of Contents
+
+- [Runeforge](#runeforge)
+  - [Table of Contents](#table-of-contents)
+  - [Introduction](#introduction)
+  - [Requirements](#requirements)
+  - [Key Features](#key-features)
+  - [Installation](#installation)
+  - [Basic Usage](#basic-usage)
+    - [1. Define your interface and metadata](#1-define-your-interface-and-metadata)
+    - [2. Create the model](#2-create-the-model)
+    - [3. Set up the server](#3-set-up-the-server)
+    - [4. Add the page component](#4-add-the-page-component)
+  - [Components](#components)
+    - [GenericCRUD](#genericcrud)
+    - [PaginatedTable](#paginatedtable)
+    - [Form Components](#form-components)
+    - [Shared Components](#shared-components)
+  - [Formatters](#formatters)
+    - [`formatBoolean`](#formatboolean)
+    - [`formatDatetime`](#formatdatetime)
+    - [`formatTruncateTextUpTo`](#formattruncatetextupto)
+    - [`formatInstance`](#formatinstance)
+  - [Custom Cell Components](#custom-cell-components)
+    - [Example: avatar column](#example-avatar-column)
+    - [Example: icon column](#example-icon-column)
+  - [Internationalization](#internationalization)
+    - [Switch to English](#switch-to-english)
+    - [Override individual strings](#override-individual-strings)
+    - [Full `RuneforgeStrings` reference](#full-runeforgestrings-reference)
+    - [Bundled locales](#bundled-locales)
+  - [Icon System](#icon-system)
+  - [Running Tests](#running-tests)
+    - [Unit Tests](#unit-tests)
+    - [End-to-End Tests](#end-to-end-tests)
+    - [Run All Tests](#run-all-tests)
+  - [Development](#development)
+  - [License](#license)
+
+---
+
 ## Introduction
 
 Runeforge provides a set of composable, metadata-driven components for building data-heavy interfaces in SvelteKit. It handles the repetitive parts of CRUD UIs — listing records, creating and editing forms, sorting and filtering tables — through a declarative API built on top of [DaisyUI](https://daisyui.com/) and [Tailwind CSS](https://tailwindcss.com/).
@@ -486,8 +527,7 @@ Runeforge ships with a default icon set. To use Bootstrap Icons instead:
 
 ```svelte
 <script>
-  import { setIconSet } from 'runeforge';
-  import bootstrapIcons from 'runeforge/icons/bootstrap';
+  import { setIconSet, bootstrapIcons } from 'runeforge';
 
   setIconSet(bootstrapIcons);
 </script>

package/dist/components/IconRenderer.svelte

@@ -12,11 +12,11 @@
   } = $props();
 
   const icons = $derived(getIconSet());
-  const IconComponent = $derived(icons?.renderByName ?? null);
+  const IconComponent = $derived(icons?.getByName?.(name) ?? null);
 </script>
 
 {#if IconComponent}
-  <IconComponent {name} {size} class={className} />
+  <IconComponent {size} class={className} />
 {:else}
   <span class={className} title={name}></span>
 {/if}

package/dist/components/Modal.svelte

@@ -13,7 +13,7 @@
   } = $props();
 </script>
 
-<div class="modal modal-open" role="dialog" aria-modal="true">
+<dialog class="modal" open>
   <div class="modal-box">
     <div class="flex items-center justify-between gap-4">
       <h3 class="text-lg font-bold">{title}</h3>
@@ -35,13 +35,8 @@
   </div>
 
   {#if onClose}
-    <div
-      class="modal-backdrop"
-      aria-label="Cerrar"
-      role="button"
-      tabindex="0"
-      onclick={onClose}
-      onkeydown={(e) => e.key === 'Enter' && onClose?.()}
-    ></div>
+    <div class="modal-backdrop">
+      <button onclick={onClose} aria-label="Cerrar"></button>
+    </div>
   {/if}
-</div>
+</dialog>

package/dist/components/common/Header.svelte

@@ -17,13 +17,13 @@
 </script>
 
 <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-  <div class="flex flex-col gap-1">
+  <div class="flex flex-col gap-1 flex-1">
     <h1>{title}</h1>
     <Breadcrumbs items={breadcrumbs} {admin} />
   </div>
 
   {#if buttons}
-    <div class="flex items-center gap-2 pt-1">
+    <div class="flex shrink-0 items-center gap-2 sm:pt-1">
       {@render buttons()}
     </div>
   {/if}

package/dist/components/crud/Field.svelte

@@ -43,7 +43,7 @@
 <div class="flex flex-col gap-1">
   {#if field.type === 'file'}
     <div class="flex justify-center">
-      <Avatar src={preview} text={avatarInitials} alt={labelText} class="w-32 rounded-full" textClass="text-3xl" />
+      <Avatar src={preview} text={avatarInitials} alt={labelText} class="w-20 rounded-full" textClass="text-xl" />
     </div>
   {/if}
 
@@ -59,25 +59,20 @@
       type="checkbox"
       id={field.attribute}
       {name}
-      class="toggle"
+      class="toggle toggle-primary"
       checked={!!saved}
       disabled={readonly}
     />
   {:else if field.type === 'file'}
     {#if !readonly}
-      <fieldset class="fieldset w-full p-0">
-        <input
-          type="file"
-          id={field.attribute}
-          {name}
-          class="file-input w-full"
-          class:file-input-error={!!error}
-          onchange={onFileChange}
-        />
-        {#if field.placeholder}
-          <Label text={field.placeholder} for={field.attribute} class="label" />
-        {/if}
-      </fieldset>
+      <input
+        type="file"
+        id={field.attribute}
+        {name}
+        class="file-input file-input-bordered w-full"
+        class:file-input-error={!!error}
+        onchange={onFileChange}
+      />
     {/if}
     <!-- read-only file value is shown as the avatar above -->
   {:else if field.type === 'select'}
@@ -121,14 +116,14 @@
     {/if}
   {:else if field.type === 'textarea'}
     {#if readonly}
-      <textarea id={field.attribute} class="textarea textarea-bordered w-full" value={displayValue} disabled></textarea>
+      <textarea id={field.attribute} class="textarea textarea-bordered bg-base-100 w-full" value={displayValue} disabled></textarea>
     {:else}
       <textarea
         id={field.attribute}
         {name}
         placeholder={field.placeholder ?? ''}
         bind:value={record[field.attribute]}
-        class="textarea textarea-bordered w-full"
+        class="textarea textarea-bordered bg-base-100 w-full"
         class:textarea-error={!!error}
       ></textarea>
     {/if}

package/dist/components/navigation/Breadcrumbs.svelte

@@ -34,7 +34,7 @@
               {@const ItemIcon = item.icon}
               <ItemIcon class="size-4" />
             {/if}
-            <span class={item.prominent ? '' : 'hidden sm:inline'}>{item.label}</span>
+            <span>{item.label}</span>
           </a>
         {:else}
           <span class="inline-flex items-center gap-2">
@@ -42,7 +42,7 @@
               {@const ItemIcon = item.icon}
               <ItemIcon class="size-4" />
             {/if}
-            <span class={item.prominent ? '' : 'hidden sm:inline'}>{item.label}</span>
+            <span>{item.label}</span>
           </span>
         {/if}
       </li>

package/dist/icons/sets/bootstrap.js

@@ -9,7 +9,8 @@
  *   import { bootstrapIconSet } from 'runeforge/icons/sets/bootstrap';
  *   setIconSet(bootstrapIconSet);
  */
-import { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, } from 'svelte-bootstrap-icons';
+import * as Icons from 'svelte-bootstrap-icons';
+const { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, } = Icons;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function asIcon(c) { return c; }
 export const bootstrapIconSet = {
@@ -26,4 +27,6 @@ export const bootstrapIconSet = {
     folder: asIcon(Folder),
     passwordShow: asIcon(Eye),
     passwordHide: asIcon(EyeSlash),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getByName: (name) => asIcon(Icons[name]) ?? null,
 };

package/dist/icons/types.d.ts

@@ -3,11 +3,6 @@ export type IconComponent = Component<{
     size?: string | number;
     class?: string;
 }>;
-export type IconByNameComponent = Component<{
-    name: string;
-    size?: string | number;
-    class?: string;
-}>;
 export interface CRUDIconSet {
     sortNone: IconComponent;
     sortAsc: IconComponent;
@@ -22,5 +17,5 @@ export interface CRUDIconSet {
     folder: IconComponent;
     passwordShow: IconComponent;
     passwordHide: IconComponent;
-    renderByName?: IconByNameComponent;
+    getByName?: (name: string) => IconComponent | null;
 }

package/dist/index.d.ts

@@ -3,9 +3,10 @@ export { AttributeType } from './types/attribute.js';
 export type { AttributeMetadata, InterfaceMetadata, SelectOption, OptionsResolver, FormatterResolver } from './types/attribute.js';
 export type { CellProps, CellComponent, CellFormatter, SortDirection, IndexedRow, DistinctEntry } from './types/table.js';
 export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomAction, RowAction } from './types/crud.js';
-export type { CRUDIconSet, IconComponent, IconByNameComponent } from './icons/types.js';
+export type { CRUDIconSet, IconComponent } from './icons/types.js';
 export { setIconSet, getIconSet } from './icons/context.js';
 export { defaultIconSet } from './icons/sets/default.js';
+export { bootstrapIconSet } from './icons/sets/bootstrap.js';
 export type { RuneforgeStrings } from './i18n/types.js';
 export { setStrings, getStrings } from './i18n/context.js';
 export { es } from './i18n/es.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { AttributeType } from './types/attribute.js';
 export { setIconSet, getIconSet } from './icons/context.js';
 export { defaultIconSet } from './icons/sets/default.js';
+export { bootstrapIconSet } from './icons/sets/bootstrap.js';
 export { setStrings, getStrings } from './i18n/context.js';
 export { es } from './i18n/es.js';
 export { en } from './i18n/en.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "runeforge",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
 	"license": "MIT",
 	"author": "Ezequiel Puerta",
@@ -48,9 +48,9 @@
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",
+		"daisyui": "^5.0.0",
 		"svelte": "^5.0.0",
-		"tailwindcss": "^4.0.0",
-		"daisyui": "^5.0.0"
+		"tailwindcss": "^4.0.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
@@ -59,7 +59,9 @@
 		"@sveltejs/kit": "^2.63.0",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tailwindcss/vite": "^4.3.1",
 		"@types/node": "^22",
+		"daisyui": "^5.5.23",
 		"eslint": "^10.4.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.19.0",
@@ -70,13 +72,10 @@
 		"svelte": "^5.56.1",
 		"svelte-bootstrap-icons": "^3.3.0",
 		"svelte-check": "^4.6.0",
+		"tailwindcss": "^4.3.1",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.60.1",
 		"vite": "^8.0.16",
-		"@tailwindcss/vite": "^4.3.1",
-		"daisyui": "^5.5.23",
-		"tailwindcss": "^4.3.1",
 		"vitest": "^4.1.8"
-	},
-	"dependencies": {}
+	}
 }

package/dist/icons/bootstrapIconSet.d.ts

@@ -1 +0,0 @@
-export { bootstrapIconSet } from './sets/bootstrap.js';

package/dist/icons/bootstrapIconSet.js

@@ -1 +0,0 @@
-export { bootstrapIconSet } from './sets/bootstrap.js';

package/dist/icons/defaultIconSet.d.ts

@@ -1 +0,0 @@
-export { defaultIconSet } from './sets/default.js';

package/dist/icons/defaultIconSet.js

@@ -1 +0,0 @@
-export { defaultIconSet } from './sets/default.js';