@rokkit/ui 1.0.0-next.100 → 1.0.0-next.107

package/dist/constants.d.ts

@@ -0,0 +1,2 @@
+export const defaultMapping: FieldMapper;
+import { FieldMapper } from '@rokkit/core';

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+export * from "./types.js";
+export { default as Icon } from "./Icon.svelte";
+export { default as Item } from "./Item.svelte";
+export { default as Pill } from "./Pill.svelte";
+export { default as ProgressBar } from "./ProgressBar.svelte";
+export { default as Separator } from "./Separator.svelte";
+export { default as Connector } from "./Connector.svelte";
+export { default as RangeTick } from "./RangeTick.svelte";
+export { default as RangeSlider } from "./RangeSlider.svelte";
+export { default as Node } from "./Node.svelte";
+export { default as Summary } from "./Summary.svelte";
+export { default as BreadCrumbs } from "./BreadCrumbs.svelte";
+export { default as Rating } from "./Rating.svelte";
+export { default as RangeMinMax } from "./RangeMinMax.svelte";
+export { default as Range } from "./Range.svelte";
+export { default as RadioGroup } from "./RadioGroup.svelte";
+export { default as CheckBox } from "./CheckBox.svelte";
+export { default as Calendar } from "./Calendar.svelte";
+export { default as ValidationReport } from "./ValidationReport.svelte";
+export { default as ResponsiveGrid } from "./ResponsiveGrid.svelte";
+export { default as Toggle } from "./Toggle.svelte";
+export { default as Switch } from "./Switch.svelte";
+export { default as List } from "./List.svelte";
+export { default as Accordion } from "./Accordion.svelte";
+export { default as NestedList } from "./NestedList.svelte";
+export { default as Tree } from "./Tree.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as MultiSelect } from "./MultiSelect.svelte";
+export { default as DropDown } from "./DropDown.svelte";
+export { default as Table } from "./TreeTable.svelte";
+export { default as ToggleThemeMode } from "./ToggleThemeMode.svelte";
+export { default as Overlay } from "./Overlay.svelte";
+export { default as Message } from "./Message.svelte";
+export { default as SlidingColumns } from "./SlidingColumns.svelte";
+export { default as InputField } from "./input/InputField.svelte";
+export { default as Form } from "./Form.svelte";
+export { default as FieldLayout } from "./FieldLayout.svelte";
+export { default as DataEditor } from "./DataEditor.svelte";
+export { default as NestedEditor } from "./NestedEditor.svelte";
+export { default as Stepper } from "./Stepper.svelte";
+export { default as ProgressDots } from "./ProgressDots.svelte";

package/dist/input/types.d.ts

@@ -0,0 +1,9 @@
+export namespace types {
+    export let string: any;
+    export let integer: any;
+    export { CheckBox as boolean };
+    export { InputSelect as enum };
+    export let phone: any;
+}
+import CheckBox from '../CheckBox.svelte';
+import InputSelect from './InputSelect.svelte';

package/dist/lib/fields.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Find an attribute in a schema by path
+ * @param {string} scope
+ * @param {import('../types').DataSchema} schema
+ * @returns {import('../types').LayoutSchema}
+ * @throws {Error} Invalid path
+ */
+export function findAttributeByPath(scope: string, schema: import("../types").DataSchema): import("../types").LayoutSchema;
+/**
+ * Get combined schema and layout
+ * @param {*} data
+ * @param {import('../types').DataSchema} schema
+ * @param {import('../types').LayoutSchema} layout
+ * @returns {import('../types').LayoutSchema}
+ */
+export function getSchemaWithLayout(schema: import("../types").DataSchema, layout: import("../types").LayoutSchema): import("../types").LayoutSchema;

package/dist/lib/form.d.ts

@@ -0,0 +1,95 @@
+export namespace messages {
+    let required: string;
+    let email: string;
+    let url: string;
+    let color: string;
+    let number: string;
+    let min: string;
+    let max: string;
+    let pattern: string;
+    let exclusiveMin: string;
+    let exclusiveMax: string;
+    let minLength: string;
+    let maxLength: string;
+    let minItems: string;
+    let maxItems: string;
+    let uniqueItems: string;
+    let contains: string;
+    let exclude: string;
+    let integer: string;
+}
+export namespace dataTypes {
+    export namespace integer_1 {
+        let editor: string;
+        namespace props {
+            let type: string;
+            let step: number;
+        }
+        let availableProps: string[];
+    }
+    export { integer_1 as integer };
+    export namespace number_1 {
+        let editor_1: string;
+        export { editor_1 as editor };
+        export namespace props_1 {
+            let type_1: string;
+            export { type_1 as type };
+            let step_1: number;
+            export { step_1 as step };
+        }
+        export { props_1 as props };
+        let availableProps_1: string[];
+        export { availableProps_1 as availableProps };
+    }
+    export { number_1 as number };
+    export namespace range {
+        let editor_2: string;
+        export { editor_2 as editor };
+        export namespace props_2 {
+            let type_2: string;
+            export { type_2 as type };
+        }
+        export { props_2 as props };
+    }
+    export let string: {
+        default: string;
+        text: string;
+        password: string;
+        email: string;
+        url: string;
+        tel: string;
+        date: string;
+        'datetime-local': string;
+        time: string;
+        week: string;
+        month: string;
+        file: string;
+        hidden: string;
+        color: string;
+        colorpicker: string;
+    };
+    export namespace _enum {
+        let _default: string;
+        export { _default as default };
+        export let select: string;
+        export let radio: string;
+    }
+    export { _enum as enum };
+    export namespace boolean {
+        let _default_1: string;
+        export { _default_1 as default };
+        export let checkbox: string;
+        let _switch: string;
+        export { _switch as switch };
+        let radio_1: string;
+        export { radio_1 as radio };
+    }
+    export namespace array {
+        let _default_2: string;
+        export { _default_2 as default };
+    }
+    export namespace object {
+        let _default_3: string;
+        export { _default_3 as default };
+    }
+}

package/dist/lib/index.d.ts

@@ -0,0 +1,6 @@
+export { addRootNode } from "./tree";
+export { deriveSchemaFromValue } from "./schema";
+export { deriveLayoutFromValue } from "./layout";
+export { messages, dataTypes } from "./form";
+export { getSchemaWithLayout, findAttributeByPath } from "./fields";
+export { deriveNestedSchema, flattenAttributes, flattenObject, flattenElement, generateIndex, generateTreeTable } from "./nested";

package/dist/lib/layout.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Derives a layout from a given value.
+ * @param {any} value
+ * @param {string} scope
+ * @returns {import('../types').DataLayout}
+ */
+export function deriveLayoutFromValue(value: any, scope?: string): import("../types").DataLayout;

package/dist/lib/nested.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Flattens an object into a flat object
+ *
+ * @param {Object} input - The object to flatten
+ * @param {String} scope - The scope of the object
+ */
+export function flattenObject(input: Object, scope?: string): any;
+/**
+ * Flattens an object into an array of key-value pairs
+ *
+ * @param {Object} input - The object to flatten
+ * @param {String} scope - The scope of the object
+ */
+export function flattenAttributes(input: Object, scope?: string): {
+    key: string;
+    value: any;
+    type: string;
+    scope: string;
+}[];
+/**
+ * Derives a nested schema from an object
+ *
+ * @param {Object} input - The object to derive the schema from
+ * @param {String} scope - The scope of the object
+ * @returns {Object} The derived schema
+ */
+export function deriveNestedSchema(input: Object, scope?: string): Object;
+/**
+ * Flattens an element into a flat object
+ *
+ * @param {Object} element - The element to flatten
+ */
+export function flattenElement(element: Object): any;
+/**
+ * Generates an index array referencing the input data
+ *
+ * @param {Object} data - The flat object to index
+ * @param {String} key - The key to use as index
+ */
+export function generateIndex(data: Object, key?: string): any;
+/**
+ * Generates a tree table from the input data
+ *
+ * @param {Object} data - The data to generate the tree table from
+ * @param {String} key - The key to use as index
+ * @param {Boolean} ellipsis - Whether to truncate the value
+ */
+export function generateTreeTable(data: Object, key?: string, ellipsis?: boolean): any;

package/dist/lib/schema.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Derives a schema from a given value.
+ *
+ * @param {any} data
+ * @returns {import('../types').DataSchema}
+ */
+export function deriveSchemaFromValue(data: any): import("../types").DataSchema;

package/dist/lib/select.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Get the optimal position for the list based on anchor and viewport dimensions.
+ *
+ * @param {HTMLElement} anchor - The anchor element to position the list relative to.
+ * @param {HTMLElement} viewport - The viewport element that determines the position.
+ * @returns {string} - A string with CSS position properties and values.
+ */
+export function getListPosition(anchor: HTMLElement, viewport: HTMLElement): string;

package/dist/lib/tree.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Adds a root node to the items array converting it into a nested tree with one root node
+ *
+ * @param {Array<Object>} items
+ * @param {string} root
+ * @param {import('@rokkit/core').FieldMapping} fields
+ * @returns
+ */
+export function addRootNode(items: Array<Object>, root?: string, mapping?: import("@rokkit/core").FieldMapper): Object[];

package/dist/types.d.ts

@@ -0,0 +1,5 @@
+export type NodeStateIcons = {
+    opened: string;
+    closed: string;
+};
+export type ConnectionType = "empty" | "last" | "child" | "sibling";

package/dist/wrappers/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Wrapper } from "./Wrapper.svelte";
+export { default as Section } from "./Section.svelte";
+export { default as Category } from "./Category.svelte";

package/package.json

@@ -1,63 +1,39 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.100",
-  "description": "All UI components",
+  "version": "1.0.0-next.107",
+  "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
-  "main": "index.js",
   "module": "src/index.js",
-  "types": "dist/index.d.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@testing-library/svelte": "^5.2.1",
-    "@vitest/coverage-v8": "^2.1.1",
-    "@vitest/ui": "~2.1.1",
-    "jsdom": "^25.0.0",
-    "svelte": "^4.2.19",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.6",
-    "vitest": "~2.1.1",
-    "shared-config": "1.0.0-next.100",
-    "validators": "1.0.0-next.100"
+  "scripts": {
+    "prepublishOnly": "tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "bun clean && bun prepublishOnly"
   },
   "files": [
     "src/**/*.js",
     "src/**/*.svelte",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "dist/**/*.d.ts"
   ],
   "exports": {
     "./src": "./src",
-    "./wrappers": "./src/wrappers/index.js",
     "./package.json": "./package.json",
+    "./utils": "./src/lib/index.js",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./src/index.js",
-      "svelte": "./src/index.js"
+      "import": "./src/index.js"
     }
   },
   "dependencies": {
-    "ramda": "^0.30.1",
-    "@rokkit/actions": "1.0.0-next.100",
-    "@rokkit/atoms": "1.0.0-next.100",
-    "@rokkit/core": "1.0.0-next.100",
-    "@rokkit/molecules": "1.0.0-next.100",
-    "@rokkit/layout": "1.0.0-next.100",
-    "@rokkit/organisms": "1.0.0-next.100"
-  },
-  "scripts": {
-    "format": "prettier --write .",
-    "lint": "eslint --fix .",
-    "test:ct": "playwright test -c playwright-ct.config.ts",
-    "test:ci": "vitest run",
-    "test:ui": "vitest --ui",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "latest": "pnpm upgrade --latest && pnpm test:ci",
-    "release": "pnpm publish --access public"
+    "@rokkit/actions": "latest",
+    "@rokkit/core": "latest",
+    "@rokkit/states": "latest",
+    "d3-scale": "^4.0.2",
+    "date-fns": "^4.1.0",
+    "ramda": "^0.30.1"
   }
-}
+}

package/src/Accordion.svelte

@@ -0,0 +1,102 @@
+<script>
+	import { equals } from 'ramda'
+	import { createEmitter, noop, getKeyFromPath, getSnippet } from '@rokkit/core'
+	import { NestedProxy } from '@rokkit/states'
+	import { navigator } from '@rokkit/actions'
+	import Summary from './Summary.svelte'
+	import Item from './Item.svelte'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} [items]
+	 * @property {import('@rokkit/core').FieldMapper} [mapping]
+	 * @property {boolean} [autoCloseSiblings]
+	 * @property {boolean} [multiselect]
+	 * @property {any} [value]
+	 */
+
+	/** @type {Props} */
+	let {
+		class: classes = '',
+		items = $bindable([]),
+		value = $bindable(null),
+		fields,
+		autoCloseSiblings = false,
+		multiselect = false,
+		header = null,
+		footer = null,
+		empty = null,
+		stub = null,
+		extra,
+		...events
+	} = $props()
+
+	let emitter = $derived(
+		createEmitter(events, ['collapse', 'change', 'expand', 'click', 'select', 'move'])
+	)
+	let wrapper = new NestedProxy(items, value, fields, { events, multiselect, autoCloseSiblings })
+</script>
+
+{#snippet listItems(nodes, onchange = noop)}
+	{#each nodes as node}
+		{@const template = getSnippet(extra, node.get('component')) ?? stub}
+		{@const path = getKeyFromPath(node.path)}
+		{@const props = node.get('props') || {}}
+		<rk-list-item
+			role="option"
+			data-path={path}
+			aria-selected={node.selected}
+			aria-current={node.focused}
+		>
+			{#if template}
+				{@render template(node, props, onchange)}
+			{:else}
+				<Item value={node.value} fields={node.fields} />
+			{/if}
+		</rk-list-item>
+	{/each}
+{/snippet}
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<rk-accordion
+	class={classes}
+	tabindex="0"
+	use:navigator={{ wrapper }}
+	onactivate={() => (value = wrapper.value)}
+>
+	{#if header}
+		<rk-header>{@render header()}</rk-header>
+	{/if}
+	{#if wrapper.nodes.length === 0}
+		<rk-list-item role="presentation">
+			{#if empty}
+				{@render empty()}
+			{:else}
+				No items found.
+			{/if}
+		</rk-list-item>
+	{/if}
+	{#each wrapper.nodes as node, index}
+		<div
+			class="flex flex-col"
+			class:is-expanded={node.expanded}
+			class:is-selected={node.selected}
+			data-path={index}
+		>
+			<Summary
+				bind:value={wrapper.nodes[index].value}
+				fields={node.fields}
+				expanded={node.expanded}
+				hasChildren={node.hasChildren()}
+			/>
+			{#if node.expanded}
+				<rk-list role="listbox" tabindex="-1">
+					{@render listItems(node.children, events.change)}
+				</rk-list>
+			{/if}
+		</div>
+	{/each}
+	{#if footer}
+		<rk-footer>{@render footer()}</rk-footer>
+	{/if}
+</rk-accordion>

package/src/BreadCrumbs.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { getSnippet } from '@rokkit/core'
+	import Item from './Item.svelte'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} [items]
+	 * @property {string} [separator]
+	 * @property {any} [fields]
+	 * @property {any} [crumb]
+	 */
+
+	/** @type {Props} */
+	let { class: classes = '', items = [], separator = '/', fields, crumb } = $props()
+</script>
+
+<rk-crumbs class={classes}>
+	{#each items as item, index}
+		{#if index > 0}
+			<span>
+				{#if separator.length === 1}
+					{separator}
+				{:else}
+					<icon class={separator}></icon>
+				{/if}
+			</span>
+		{/if}
+		<rk-crumb class:is-selected={index === items.length - 1}>
+			{#if crumb}
+				{@render crumb(item, fields)}
+			{:else}
+				<Item value={item} {fields} />
+			{/if}
+		</rk-crumb>
+	{/each}
+</rk-crumbs>

package/src/Calendar.svelte

@@ -0,0 +1,93 @@
+<script>
+	import { format, isSameDay, addMonths } from 'date-fns'
+	import { weekdays, getCalendarDays } from '@rokkit/core'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} [value]
+	 * @property {any} [holidays]
+	 * @property {boolean} [fixed]
+	 */
+
+	/** @type {Props} */
+	let { value = $bindable(new Date()), holidays = [], fixed = true } = $props()
+
+	function handleChange(event) {
+		value = new Date(event.target.value, value.getMonth(), value.getDate())
+	}
+	function nextMonth() {
+		value = addMonths(value, 1)
+	}
+	function previousMonth() {
+		value = addMonths(value, -1)
+	}
+
+	let year = $derived(value.getFullYear())
+	let days = $derived(getCalendarDays(value, holidays, fixed))
+</script>
+
+<calendar class="mx-auto flex select-none flex-col items-center">
+	<month-year class="flex h-10 w-full flex-row items-center">
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<square
+			class="cursor-pointer select-none"
+			onclick={previousMonth}
+			role="option"
+			aria-selected={false}
+			tabindex="0"
+		>
+			<icon class="chevron-left"></icon>
+		</square>
+		<span class="gap-1px flex flex-grow items-center justify-center">
+			<p>{format(value, 'MMMM')}</p>
+			<input
+				type="number"
+				value={year}
+				class="flex w-14 flex-grow-0 border-none bg-transparent"
+				onchange={handleChange}
+			/>
+		</span>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<square
+			class="cursor-pointer select-none"
+			onclick={nextMonth}
+			role="option"
+			aria-selected={false}
+			tabindex="0"
+		>
+			<icon class="chevron-right"></icon>
+		</square>
+	</month-year>
+	<cal-body class="flex w-full cursor-pointer flex-col p-1">
+		<days-of-week class="grid grid-cols-7">
+			{#each weekdays as day, index}
+				<p class:weekend={index % 6 === 0}>
+					{day.slice(0, 1)}
+				</p>
+			{/each}
+		</days-of-week>
+		<days-of-month class="grid grid-cols-7 grid-rows-5">
+			{#each days as { day, offset, date, weekend }}
+				{@const start = offset > 0 ? offset : 'auto'}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<day-of-month
+					class:weekend
+					style:grid-column-start={start}
+					onclick={() => (value = date)}
+					role="option"
+					aria-selected={isSameDay(date, value)}
+					tabindex="0"
+				>
+					{day}
+				</day-of-month>
+			{/each}
+		</days-of-month>
+	</cal-body>
+</calendar>
+
+<style>
+	days-of-week p,
+	day-of-month {
+		@apply flex items-center justify-center;
+	}
+</style>

package/src/Carousel.svelte

@@ -0,0 +1,49 @@
+<script>
+	let className = ''
+	export { className as class }
+	export let items = []
+	export let value
+	let currentIndex = 0
+
+	function handleKey(e, index) {
+		const prevIndex = currentIndex
+		if (['Enter', ' '].includes(e.key)) {
+			currentIndex = index
+		} else {
+			if (e.key === 'ArrowRight') {
+				currentIndex = currentIndex === items.length - 1 ? 0 : currentIndex + 1
+			} else if (e.key === 'ArrowLeft') {
+				currentIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1
+			}
+		}
+		if (currentIndex !== prevIndex) {
+			e.preventDefault()
+			e.stopPropagation()
+		}
+	}
+	$: value = items[currentIndex]
+</script>
+
+{#if items.length === 0}
+	<p>No items to display</p>
+{:else}
+	<carousel class="flex w-full flex-col gap-3 {className}">
+		<slide class="flex flex-col">
+			<img src={value.src} alt={value.alt} />
+			<p>{value.text}</p>
+		</slide>
+		<dot-nav role="radiogroup">
+			{#each items as item, index}
+				<dot
+					role="radio"
+					aria-checked={currentIndex === index}
+					aria-label={`Slide ${index + 1}`}
+					on:click={() => (currentIndex = index)}
+					on:keydown={(e) => handleKey(e, index)}
+					tabindex={0}
+				>
+				</dot>
+			{/each}
+		</dot-nav>
+	</carousel>
+{/if}