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

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,30 @@
+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 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";

package/dist/lib/index.d.ts

@@ -0,0 +1 @@
+export { addRootNode } from "./tree";

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/package.json

@@ -1,63 +1,39 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.100",
-  "description": "All UI components",
+  "version": "1.0.0-next.106",
+  "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,78 @@
+<script>
+	import { equals } from 'ramda'
+	import { createEmitter, noop, getKeyFromPath } from '@rokkit/core'
+	import { DataWrapper } from '@rokkit/states'
+	import { navigator } from '@rokkit/actions'
+	import { defaultMapping } from './constants'
+	import Summary from './Summary.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([]),
+		mapping = defaultMapping,
+		autoCloseSiblings = false,
+		multiselect = false,
+		value = $bindable(null),
+		...events
+	} = $props()
+
+	let emitter = $derived(
+		createEmitter(events, ['collapse', 'change', 'expand', 'click', 'select', 'move'])
+	)
+	let wrapper = new DataWrapper(items, mapping, value, { events, multiselect, autoCloseSiblings })
+</script>
+
+{#snippet listItems(items, wrapper, hierarchy = [], onchange = noop)}
+	{@const mapping = wrapper.mapping}
+	{#each items as item, index}
+		{@const Template = mapping.getComponent(item)}
+		{@const path = getKeyFromPath([...hierarchy, index])}
+		{@const props = mapping.getAttribute(item, 'props') || {}}
+		<rk-list-item
+			role="option"
+			data-path={path}
+			aria-selected={wrapper.selected.has(path)}
+			aria-current={equals(wrapper.currentNode, item)}
+		>
+			<Template bind:value={items[index]} {mapping} onchange={events.change} {...props} />
+		</rk-list-item>
+	{/each}
+{/snippet}
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<rk-accordion
+	class={classes}
+	tabindex="0"
+	use:navigator={{ wrapper }}
+	onactivate={() => (value = wrapper.value)}
+>
+	{#each wrapper.data as item, index}
+		{@const hasItems = mapping.hasChildren(item)}
+		{@const id = 'id-' + index}
+
+		<div
+			{id}
+			class="flex flex-col"
+			class:is-expanded={mapping.isExpanded(item)}
+			class:is-selected={equals(item, value)}
+			data-path={index}
+		>
+			<Summary {mapping} bind:value={items[index]} expanded={mapping.isExpanded(item)} />
+			{#if hasItems && mapping.isExpanded(item)}
+				<rk-list role="listbox" tabindex="-1">
+					{@render listItems(item[mapping.fields.children], wrapper, [index], events.change)}
+				</rk-list>
+			{/if}
+		</div>
+	{/each}
+</rk-accordion>

package/src/BreadCrumbs.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { defaultMapping } from './constants'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} [items]
+	 * @property {string} [separator]
+	 * @property {any} [fields]
+	 * @property {any} [using]
+	 */
+
+	/** @type {Props} */
+	let { class: classes = '', items = [], separator = '/', mapping = defaultMapping } = $props()
+</script>
+
+<rk-crumbs class={classes}>
+	{#each items as item, index}
+		{@const Component = mapping.getComponent(item)}
+		{#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}>
+			<Component value={item} {mapping} />
+		</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/CheckBox.svelte

@@ -0,0 +1,56 @@
+<script>
+	import { defaultStateIcons } from '@rokkit/core'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} [id]
+	 * @property {any} name
+	 * @property {boolean} [value]
+	 * @property {boolean} [readOnly]
+	 * @property {any} [stateIcons]
+	 * @property {number} [tabindex]
+	 */
+
+	/** @type {Props} */
+	let {
+		class: classes = '',
+		id = null,
+		name,
+		value = $bindable(false),
+		readOnly = false,
+		stateIcons = defaultStateIcons.checkbox,
+		tabindex = 0
+	} = $props()
+
+	let state = $derived(value === null ? 'unknown' : value ? 'checked' : 'unchecked')
+
+	function toggle(event) {
+		event.preventDefault()
+		event.stopPropagation()
+		value = !value
+	}
+	function handleClick(event) {
+		if (!readOnly) toggle(event)
+	}
+	function handleKeydown(event) {
+		if (readOnly) return
+		if (event.key === 'Enter' || event.key === ' ') toggle(event)
+	}
+</script>
+
+<rk-checkbox
+	{id}
+	class={classes}
+	class:disabled={readOnly}
+	role="checkbox"
+	aria-checked={state}
+	aria-disabled={readOnly}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{tabindex}
+>
+	<input hidden type="checkbox" {name} {readOnly} bind:checked={value} />
+
+	<icon class={stateIcons[state]}></icon>
+</rk-checkbox>

package/src/Connector.svelte

@@ -0,0 +1,39 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('./types.js').ConnectionType} [type]
+	 * @property {boolean} [rtl=false]
+	 */
+
+	/** @type {Props} */
+	let { type = $bindable('empty'), rtl = false } = $props()
+	let validatedType = $derived(['last', 'child', 'sibling'].includes(type) ? type : 'empty')
+</script>
+
+<span
+	class="grid h-full w-4 min-w-4 grid-cols-2 grid-rows-2"
+	class:line-empty={validatedType === 'empty'}
+	class:line-child={validatedType === 'child'}
+	class:line-sibling={validatedType === 'sibling'}
+	class:line-last={validatedType === 'last'}
+>
+	{#if validatedType === 'last'}
+		{#if rtl}
+			<i class="border-b border-r"></i>
+		{:else}
+			<i class="border-r"></i>
+			<i class="border-b"></i>
+		{/if}
+	{:else if validatedType === 'child'}
+		{#if rtl}
+			<i class="row-span-2 grid grid-rows-2 border-r">
+				<i class="border-b"></i>
+			</i>
+		{:else}
+			<i class="col-span-1 row-span-2 border-r"></i>
+			<i class="border-b"></i>
+		{/if}
+	{:else if validatedType === 'sibling'}
+		<i class="row-span-2 border-r"></i>
+	{/if}
+</span>

package/src/Icon.svelte

@@ -0,0 +1,71 @@
+<script>
+	import { createEmitter } from '@rokkit/core'
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} name
+	 * @property {any} [state]
+	 * @property {string} [size]
+	 * @property {string} [role]
+	 * @property {any} [label]
+	 * @property {boolean} [disabled]
+	 * @property {number} [tabindex]
+	 * @property {any} [checked]
+	 * @event {MouseEvent} [onclick]
+	 * @event {CustomEvent} [onchange]
+	 * @event {MouseEvent} [onmouseenter]
+	 * @event {MouseEvent} [onmouseleave]
+	 */
+
+	/** @type {Props} */
+	let {
+		class: classes = '',
+		name,
+		state = null,
+		size = 'base',
+		role = 'img',
+		label = null,
+		disabled = false,
+		tabindex = $bindable(0),
+		checked = $bindable(null),
+		...events
+	} = $props()
+
+	let emitter = $derived(createEmitter(events, ['click', 'change', 'mouseenter', 'mouseleave']))
+	function handleClick(e) {
+		e.preventDefault()
+
+		if (!disabled) {
+			if (role === 'checkbox' || role === 'option') {
+				checked = !checked
+				emitter?.change(checked)
+			}
+			emitter?.click()
+		}
+	}
+
+	let validatedTabindex = $derived(role === 'img' || disabled ? -1 : tabindex)
+	let ariaChecked = $derived(
+		['checkbox', 'option'].includes(role) ? (checked !== null ? checked : false) : null
+	)
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<rk-icon
+	class={classes}
+	class:small={size === 'small'}
+	class:medium={size === 'medium'}
+	class:large={size === 'large'}
+	class:disabled
+	{role}
+	aria-label={label ?? name}
+	aria-checked={ariaChecked}
+	onclick={handleClick}
+	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
+	data-state={state}
+	tabindex={validatedTabindex}
+	onmouseenter={emitter.mouseenter}
+	onnmouseleave={emitter.nmouseleave}
+>
+	<i class={name} aria-hidden="true"></i>
+</rk-icon>

package/src/Item.svelte

@@ -0,0 +1,24 @@
+<script>
+	import Icon from './Icon.svelte'
+	import { FieldMapper } from '@rokkit/core'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string|Object} [value]
+	 * @property {FieldMapper}   [mapping]
+	 */
+
+	/** @type {Props} */
+	let { value, mapping = new FieldMapper() } = $props()
+	let content = $derived(mapping.getText(value))
+	let ariaLabel = $derived(mapping.getLabel(value) ?? content)
+</script>
+
+{#if mapping.hasIcon(value)}
+	<Icon name={mapping.getIcon(value)} label={ariaLabel} />
+{:else if mapping.hasImage(value)}
+	<img src={mapping.getImage(value)} alt={ariaLabel} />
+{/if}
+{#if content}
+	<p>{content}</p>
+{/if}

package/src/Link.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { FieldMapper } from '@rokkit/core'
+	import Item from './Item.svelte'
+	/**
+	 * @typedef {Object} Props
+	 * @property {string}        [class]
+	 * @property {string|Object} [value]
+	 * @property {FieldMapper}   [mapping]
+	 * @property {string}        [href]
+	 * @property {Object}        [rest]
+	 */
+
+	/** @type {Props} */
+	let { class: classes = '', value, mapping = new FieldMapper(), href = '#', ...rest } = $props()
+	let url = $derived(mapping.getAttribute(value, 'url') ?? href)
+	let props = $derived({ ...mapping.getAttribute(value, 'props'), ...rest })
+</script>
+
+<a href={url} class={classes} {...props}>
+	<Item {value} {mapping} />
+</a>

package/src/List.svelte

@@ -0,0 +1,67 @@
+<script>
+	import { createEmitter, noop, getKeyFromPath } from '@rokkit/core'
+	import { equals } from 'ramda'
+	import { defaultMapping } from './constants'
+	// import { listItems } from './snippets.svelte'
+	import { onMount } from 'svelte'
+	import { DataWrapper } from '@rokkit/states'
+	import { navigator } from '@rokkit/actions'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {string} [name]
+	 * @property {any} [items]
+	 * @property {import('@rokkit/core').FieldMapper} [mapping]
+	 * @property {any} [value]
+	 * @property {number} [tabindex]
+	 * @property {any} [hierarchy]
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let {
+		class: classes = '',
+		name = 'list',
+		items = $bindable([]),
+		value = $bindable(null),
+		mapping = defaultMapping,
+		tabindex = 0,
+		hierarchy = [],
+		children,
+		...events
+	} = $props()
+
+	let emitter = createEmitter(events, ['select', 'change', 'move'])
+	let wrapper = new DataWrapper(items, mapping, value, { events: emitter })
+</script>
+
+{#snippet listItems(items, wrapper, hierarchy = [], onchange = noop)}
+	{@const mapping = wrapper.mapping}
+	{#each items as item, index}
+		{@const Template = mapping.getComponent(item)}
+		{@const path = getKeyFromPath([...hierarchy, index])}
+		{@const props = mapping.getAttribute(item, 'props') || {}}
+		<rk-list-item
+			role="option"
+			data-path={path}
+			aria-selected={wrapper.selected.has(path)}
+			aria-current={equals(wrapper.currentNode, item)}
+		>
+			<Template bind:value={items[index]} {mapping} {onchange} {...props} />
+		</rk-list-item>
+	{/each}
+{/snippet}
+
+<rk-list
+	class={classes}
+	role="listbox"
+	aria-label={name}
+	use:navigator={{ wrapper }}
+	{tabindex}
+	onactivate={() => (value = wrapper.value)}
+>
+	{@render children?.()}
+	{@render listItems(wrapper.data, wrapper, hierarchy, emitter.change)}
+	<!-- <ListItems bind:items {mapping} {hierarchy} /> -->
+</rk-list>

package/src/Message.svelte

@@ -0,0 +1,11 @@
+<script>
+	let { text = null, type = 'error', children } = $props()
+</script>
+
+<rk-message class={type}>
+	{#if children}
+		{@render children()}
+	{:else}
+		{text}
+	{/if}
+</rk-message>