@rokkit/core 1.0.0-next.11

package/src/constants.js

@@ -0,0 +1,149 @@
+export const defaultIcons = [
+	'accordion-opened',
+	'accordion-closed',
+	'action-remove',
+	'action-add',
+	'action-clear',
+	'action-search',
+	'action-close',
+	'action-close-filled',
+	'node-opened',
+	'node-closed',
+	'selector-opened',
+	'selector-closed',
+	'checkbox-checked',
+	'checkbox-unchecked',
+	'checkbox-unknown',
+	'rating-filled',
+	'rating-empty',
+	'radio-off',
+	'radio-on',
+	'mode-dark',
+	'mode-light',
+	'navigate-left',
+	'navigate-right',
+	'navigate-up',
+	'navigate-down'
+]
+
+// export const defaultIcons = [
+// 	'accordion-opened',
+// 	'accordion-closed',
+// 	'action-remove',
+// 	'action-add',
+// 	'action-clear',
+// 	'action-search',
+// 	'action-close',
+// 	'node-opened',
+// 	'node-closed',
+// 	'checkbox-checked',
+// 	'checkbox-unchecked',
+// 	'checkbox-unknown',
+// 	'rating-filled',
+// 	'rating-empty',
+// 	'rating-half',
+// 	'radio-off',
+// 	'radio-on',
+// 	'folder-closed',
+// 	'folder-opened',
+// 	'navigate-up',
+// 	'navigate-down',
+// 	'navigate-left',
+// 	'navigate-right',
+// 	'selector-closed',
+// 	'selector-opened',
+// 	'mode-dark',
+// 	'mode-light'
+// ]
+
+export const defaultOptions = {
+	id: 'id',
+	label: 'label',
+	value: 'value',
+	checked: 'checked'
+}
+
+/**
+ * Structure to map custom fields for rendering
+ *
+ * @typedef FieldMapping
+ * @property {string} [id='id']              - Unique id for the item
+ * @property {string} [text='text']          - Attribute to identify the text to render
+ * @property {string} [url='url']            - Attribute to identify a URL
+ * @property {string} [icon='icon']          - Attribute to identify an icon class to render
+ * @property {string} [image='image']        - Attribute to identify an image to render
+ * @property {string} [children='children']  - Attribute to identify children of the current item
+ * @property {string} [summary='summary']
+ * @property {string} [notes='notes']
+ * @property {string} [props='props']
+ * @property {string} [isOpen='_open']       - Attribute to identify if the current item is open
+ * @property {string} [isDeleted='_deleted'] - Attribute to identify if the current item is deleted
+ * @property {FieldMapping} [fields]         - Field mapping to be used on children in the next level
+ */
+export const defaultFields = {
+	id: 'id',
+	url: 'url',
+	text: 'text',
+	children: 'data',
+	icon: 'icon',
+	image: 'image',
+	component: 'component',
+	summary: 'summary',
+	notes: 'notes',
+	props: 'props',
+	target: 'target',
+	isOpen: '_open',
+	isDeleted: '_deleted'
+}
+
+export const defaultKeyMap = {
+	ArrowRight: 'open',
+	ArrowLeft: 'close',
+	ArrowDown: 'down',
+	ArrowUp: 'up',
+	Enter: 'select',
+	Escape: 'deselect'
+}
+
+export function stateIconsFromNames(icons) {
+	return icons
+		.map((k) => [...k.split('-')])
+		.reduce(
+			(acc, parts) => ({
+				...acc,
+				[parts[0]]: { ...acc[parts[0]], [parts[1]]: parts.join('-') }
+			}),
+			{}
+		)
+}
+
+export const defaultStateIcons = stateIconsFromNames(defaultIcons)
+// export const defaultStateIcons = {
+// 	accordion: {
+// 		opened: 'accordion-opened',
+// 		closed: 'accordion-closed'
+// 	},
+// 	item: {
+// 		remove: 'item-remove',
+// 		add: 'item-add',
+// 		clear: 'item-clear',
+// 		search: 'item-search'
+// 	},
+// 	node: {
+// 		opened: 'node-opened',
+// 		closed: 'node-closed'
+// 	},
+// 	list: {
+// 		selector: 'list-selector'
+// 	},
+// 	checkbox: {
+// 		checked: 'checkbox-checked',
+// 		unchecked: 'checkbox-unchecked',
+// 		unknown: 'checkbox-unknown'
+// 	},
+// 	rating: { filled: 'rating-filled', empty: 'rating-empty' },
+// 	radio: {
+// 		off: 'radio-off',
+// 		on: 'radio-on'
+// 	}
+// }

package/src/index.js

@@ -0,0 +1,27 @@
+export * from './constants'
+export * from './items'
+
+export { default as Icon } from './Icon.svelte'
+// export { default as List } from './List-Discard.svelte'
+export { default as Tree } from './Tree.svelte'
+export { default as Accordion } from './Accordion.svelte'
+export { default as List } from './List.svelte'
+export { default as Searchable } from './Searchable.svelte'
+export { default as Scrollable } from './Scrollable.svelte'
+export { default as NestedList } from './NestedList.svelte'
+export { default as Tabs } from './Tabs.svelte'
+
+export { default as Alerts } from './Alerts.svelte'
+export { default as Slider } from './Slider.svelte'
+export { default as DropDown } from './DropDown.svelte'
+export { default as DropSearch } from './DropSearch.svelte'
+export { default as SpinList } from './SpinList.svelte'
+
+export { default as Sidebar } from './Sidebar.svelte'
+export { default as SplitPane } from './SplitPane.svelte'
+export { default as Splitter } from './Splitter.svelte'
+export { default as SplitView } from './SplitView.svelte'
+export { default as Overlay } from './Overlay.svelte'
+
+export { default as PageNavigator } from './PageNavigator.svelte'
+export { default as ResponsiveGrid } from './ResponsiveGrid.svelte'

package/src/items/Collapsible.svelte

@@ -0,0 +1,51 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	import { defaultFields } from '../constants'
+
+	const dispatch = createEventDispatcher()
+
+	export let content
+	export let fields = {}
+
+	$: fields = { ...defaultFields, ...fields }
+	$: hasItems = content[fields.children] && content[fields.children].length > 0
+
+	function toggle() {
+		if (hasItems) {
+			content.isOpen = !content.isOpen
+		}
+		dispatch('toggle', content)
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<collapsible
+	class="flex flex-row flex-shrink-0 items-center w-full leading-loose cursor-pointer"
+	class:expanded={content.isOpen}
+	on:click={toggle}
+>
+	{#if content[fields.image]}
+		<img
+			class="h-8 w-8 rounded-full"
+			alt={content[fields.text]}
+			src={content[fields.image]}
+		/>
+	{/if}
+	{#if content[fields.icon]}
+		<icon class={content[fields.icon]} />
+	{/if}
+	{#if content[fields.url]}
+		<a href={content[fields.url]} class="flex flex-grow">
+			{content[fields.text]}
+		</a>
+	{:else}
+		<p class="flex flex-grow">{content[fields.text]}</p>
+	{/if}
+	{#if hasItems}
+		{#if content.isOpen}
+			<icon class="sm accordion-opened" aria-label="expand" />
+		{:else}
+			<icon class="sm accordion-closed" aria-label="collapse" />
+		{/if}
+	{/if}
+</collapsible>

package/src/items/Connector.svelte

@@ -0,0 +1,26 @@
+<script>
+	export let type
+	export let rtl = false
+</script>
+
+<span class="grid grid-rows-2 grid-cols-2 h-full w-4">
+	{#if type === 'last'}
+		{#if rtl}
+			<i class="border-b border-r" />
+		{:else}
+			<i class="border-r" />
+			<i class="border-b" />
+		{/if}
+	{:else if type === 'middle'}
+		{#if rtl}
+			<i class="border-r grid grid-rows-2 row-span-2">
+				<i class="border-b" />
+			</i>
+		{:else}
+			<i class="border-r col-span-1 row-span-2" />
+			<i class="border-b" />
+		{/if}
+	{:else if type === 'line'}
+		<i class="border-r row-span-2" />
+	{/if}
+</span>

package/src/items/Link.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Text from './Text.svelte'
+	import { defaultFields } from '../constants'
+
+	export let content
+	export let fields = defaultFields
+
+	$: target = fields.target ? content[fields.target] : ''
+</script>
+
+<a
+	class="flex flex-row flex-grow gap-2 items-center content"
+	href={content[fields.url]}
+	{target}
+>
+	<Text {content} {fields} />
+</a>

package/src/items/Node.svelte

@@ -0,0 +1,52 @@
+<script>
+	import Connector from './Connector.svelte'
+	import { defaultFields, defaultStateIcons } from '../constants'
+	import { createEventDispatcher } from 'svelte'
+
+	const dispatch = createEventDispatcher()
+	export let content
+	export let fields = defaultFields
+	export let types = []
+	export let stateIcons = defaultStateIcons.node
+	export let linesVisible = true
+	export let selected = false
+	export let using = {}
+	export let rtl = false
+	export let path = []
+
+	$: hasChildren = fields.children in content
+	$: state =
+		hasChildren && content[fields.isOpen]
+			? { icon: stateIcons.opened, label: 'collapse' }
+			: { icon: stateIcons.closed, label: 'expand' }
+	$: component = content[fields.component]
+		? using[content[fields.component]] || using.default
+		: using.default
+
+	// function toggle() {
+	// 	if (hasChildren) content[fields.isOpen] = !content[fields.isOpen]
+	// 	dispatch('select', content)
+	// }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<node
+	id={'id-' + path.join('-')}
+	class="flex flex-row h-8 gap-2 leading-loose items-center cursor-pointer select-none"
+	class:is-selected={selected}
+	aria-selected={selected}
+	role="option"
+	data-path={path.join(',')}
+>
+	{#each types.slice(1) as type}
+		<Connector type={linesVisible ? type : 'empty'} />
+	{/each}
+
+	{#if hasChildren}
+		<span class="flex flex-col w-4 h-full items-center justify-center">
+			<icon class={state.icon} aria-label={state.label} tabindex="-1" />
+		</span>
+	{/if}
+
+	<svelte:component this={component} bind:content />
+</node>

package/src/items/Pill.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	import { defaultStateIcons } from '../constants'
+
+	const dispatch = createEventDispatcher()
+
+	export let item
+	export let fields
+
+	function handleClick() {
+		dispatch('remove', item)
+	}
+</script>
+
+<pill class="flex flex-row items-center">
+	{item[fields.text]}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<icon class={defaultStateIcons.item.remove} on:click={handleClick} />
+</pill>

package/src/items/Separator.svelte

@@ -0,0 +1 @@
+<span class="my-4 flex flex-grow separator" />

package/src/items/Summary.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { defaultFields } from '../constants'
+	import Text from './Text.svelte'
+
+	export let content
+	export let fields = {}
+	export let using = {}
+
+	$: fields = { ...defaultFields, ...fields }
+	$: using = { default: Text, ...using }
+	$: hasItems = content[fields.children] && content[fields.children].length > 0
+	$: component = using[content[fields.component] ?? 'default']
+</script>
+
+<summary
+	class="flex flex-row flex-shrink-0 items-center w-full cursor-pointer"
+	tabindex="-1"
+>
+	<svelte:component this={component} bind:content {fields} />
+	{#if hasItems}
+		{#if content[fields.isOpen]}
+			<icon class="sm accordion-opened" aria-label="expand" />
+		{:else}
+			<icon class="sm accordion-closed" aria-label="collapse" />
+		{/if}
+	{/if}
+</summary>

package/src/items/Text.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { defaultFields } from '../constants'
+
+	export let content
+	export let fields = defaultFields
+
+	$: isObject = typeof content == 'object'
+	$: text = isObject ? content[fields.text] : content
+</script>
+
+{#if isObject && content[fields.image]}
+	<img
+		class="h-8 w-8 rounded-full object-cover"
+		alt={content[fields.text]}
+		src={content[fields.image]}
+	/>
+{/if}
+{#if isObject && content[fields.icon]}
+	<icon class={content[fields.icon]} />
+{/if}
+<p class="flex flex-grow">{text}</p>

package/src/items/index.js

@@ -0,0 +1,8 @@
+export { default as Text } from './Text.svelte'
+export { default as Link } from './Link.svelte'
+export { default as Node } from './Node.svelte'
+export { default as Pill } from './Pill.svelte'
+export { default as Collapsible } from './Collapsible.svelte'
+export { default as Connector } from './Connector.svelte'
+export { default as Separator } from './Separator.svelte'
+export { default as Summary } from './Summary.svelte'

package/src/list.js

@@ -0,0 +1,14 @@
+export function getComponent(item, fields) {
+	if (item && typeof item === 'object') {
+		return item[fields.component] || fields.default
+	}
+	return fields.default
+}
+
+// update position based on externally supplied value
+export function updateCursor(cursor, value, items) {
+	if (cursor.length > 0 && value != items[cursor[0]]) {
+		let index = items.findIndex((x) => x == value)
+		cursor = index > -1 ? [index] : []
+	}
+}

package/src/mocks/Custom.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { defaultFields } from '../../src/constants'
+	export let content
+	export let fields = defaultFields
+</script>
+
+<span>{content[fields.text]}</span>

package/src/mocks/index.js

@@ -0,0 +1,10 @@
+import { vi } from 'vitest'
+
+export function createEvent(x, y) {
+	return {
+		clientX: x,
+		clientY: y,
+		stopPropagation: vi.fn(),
+		preventDefault: vi.fn()
+	}
+}

package/src/stores/alerts.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export const alerts = writable([])

package/src/stores/index.js

@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store'
+// export * from './alerts'
+export { theme } from './theme'
+export const alerts = writable([])
+
+// export const theme = writable({ name: 'rokkit', mode: 'dark' })

package/src/stores/persist.js

@@ -0,0 +1,63 @@
+export const PARSE_ERROR_MESSAGE =
+	'Unable to parse value from local storage for key: '
+
+if (typeof window === 'undefined') {
+	global.localStorage = {
+		getItem: () => '{}',
+		setItem: () => {}
+	}
+}
+export function persistable(key, store) {
+	let value
+	const storageEventListener = (event) => {
+		if (event.key === key) {
+			event.stopPropagation()
+			event.preventDefault()
+			try {
+				const newValue = JSON.parse(event.newValue)
+				set(newValue)
+			} catch (e) {
+				console.error(PARSE_ERROR_MESSAGE, key)
+			}
+		}
+	}
+
+	try {
+		value = JSON.parse(localStorage.getItem(key))
+		// console.log(value)
+		store.set(value)
+	} catch {
+		console.error(PARSE_ERROR_MESSAGE, key)
+	}
+
+	const set = (newValue) => {
+		if (value !== newValue) {
+			value = newValue
+			localStorage.setItem(key, JSON.stringify(value))
+			store.set(value)
+		}
+	}
+
+	const update = (fn) => {
+		store.update((currentValue) => {
+			const value = fn(currentValue)
+			localStorage.setItem(key, JSON.stringify(value))
+			return value
+		})
+	}
+
+	if (typeof window !== 'undefined') {
+		window.addEventListener('storage', storageEventListener)
+	}
+
+	return {
+		subscribe: store.subscribe,
+		set,
+		update,
+		destroy() {
+			if (typeof window !== 'undefined') {
+				window.removeEventListener('storage', storageEventListener)
+			}
+		}
+	}
+}

package/src/stores/theme.js

@@ -0,0 +1,34 @@
+import { writable } from 'svelte/store'
+import { persistable } from './persist'
+
+const THEME_STORE_KEY = 'app-theme'
+
+/**
+ * @typedef {Object} Theme
+ * @property {string} name
+ * @property {string} mode
+ */
+
+/**
+ * Custom store that takes an object with two properties, name and mode.
+ * @returns {import('svelte/store').Writable<Theme>}
+ */
+export function ThemeStore() {
+	const store = writable({ name: 'rokkit', mode: 'dark' })
+
+	const set = (value) => {
+		const { name, mode } = value ?? {}
+		if (typeof name === 'string' && typeof mode === 'string') {
+			store.set(value)
+		} else if (value) {
+			console.error('Both "name" and "mode" must be strings', value)
+		}
+	}
+
+	return {
+		...store,
+		set
+	}
+}
+
+export const theme = persistable(THEME_STORE_KEY, ThemeStore())