@rokkit/core 1.0.0-next.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Jerry Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Core Components

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@rokkit/core",
+  "version": "1.0.0-next.11",
+  "description": "Core components, actions and stores for svelte apps.",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "main": "index.js",
+  "svelte": "src/index.js",
+  "module": "src/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "prettier": "@jerrythomas/prettier-config",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@jerrythomas/eslint-config-svelte": "^1.0.2",
+    "@jerrythomas/prettier-config": "^1.0.0",
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@testing-library/svelte": "^3.2.2",
+    "@vitest/coverage-istanbul": "^0.28.5",
+    "@vitest/ui": "~0.12.10",
+    "eslint": "^7.32.0",
+    "jsdom": "^19.0.0",
+    "svelte": "^3.55.1",
+    "typescript": "^4.9.5",
+    "validators": "latest",
+    "vite": "^4.1.1",
+    "vitest": "~0.19.1",
+    "shared-config": "1.0.0"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "!src/mocks",
+    "!src/**/*.spec.js"
+  ],
+  "exports": {
+    "./src": "./src",
+    "./package.json": "./package.json",
+    "./stores": "./src/stores/index.js",
+    "./actions": "./src/actions/index.js",
+    "./constants": "./src/constants.js",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.js"
+    }
+  },
+  "scripts": {
+    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
+    "format": "prettier --write --plugin-search-dir=. .",
+    "test:ct": "playwright test -c playwright.config.js",
+    "test:ci": "vitest run",
+    "test:ui": "vitest --ui",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "upgrade": "pnpm upgrade"
+  }
+}

package/src/Accordion.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	import { defaultFields } from './constants'
+	import { Text, Summary } from './items'
+	import List from './List.svelte'
+	import { navigator } from './actions/navigator'
+
+	const dispatch = createEventDispatcher()
+	let className = ''
+	export { className as class }
+	export let items = []
+	export let fields = {}
+	export let using = {}
+	export let autoClose = false
+	export let value = null
+	let cursor = []
+
+	$: fields = { ...defaultFields, ...fields }
+	$: using = { default: Text, ...using }
+
+	function handle(event) {
+		// console.log(event.type, event.detail)
+		value = event.detail.node
+		cursor = event.detail.path
+		if (['collapse', 'expand'].includes(event.type)) {
+			if (autoClose) {
+				items.map((x) => {
+					if (x !== value && x[fields.isOpen]) {
+						x[fields.isOpen] = false
+					}
+				})
+			}
+			items = items
+		}
+		dispatch(event.type, event.detail)
+	}
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<accordion
+	class="flex flex-col w-full select-none {className}"
+	tabindex="0"
+	use:navigator={{
+		items,
+		fields,
+		enabled: true,
+		indices: cursor
+	}}
+	on:select={handle}
+	on:move={handle}
+	on:expand={handle}
+	on:collapse={handle}
+>
+	{#each items as item, index}
+		{@const hasItems =
+			item[fields.children] && item[fields.children].length > 0}
+		{@const itemFields = { ...fields, ...(fields.fields ?? fields) }}
+
+		<div
+			id={'id-' + index}
+			class="flex flex-col"
+			class:is-expanded={item[fields.isOpen]}
+			class:is-selected={item === value}
+			data-path={index}
+		>
+			<Summary {fields} {using} bind:content={item} />
+			{#if hasItems && item[fields.isOpen]}
+				<List
+					bind:items={item[fields.children]}
+					bind:value
+					fields={itemFields}
+					{using}
+					on:select
+					hierarchy={[index]}
+					tabindex="-1"
+				/>
+			{/if}
+		</div>
+	{/each}
+</accordion>

package/src/Alerts.svelte

@@ -0,0 +1,39 @@
+<script>
+	import { fade } from 'svelte/transition'
+	import { flip } from 'svelte/animate'
+	import { alerts } from './stores'
+	import { dismissable } from './actions'
+
+	function dismissAll() {
+		unreadAlerts.map((alert) => (alert.dismissed = true))
+		alerts.set([...$alerts])
+	}
+
+	function dismiss(alert) {
+		alert.dismissed = true
+		alerts.set([...$alerts])
+	}
+
+	$: unreadAlerts = $alerts.filter((x) => x.dismissed)
+</script>
+
+{#if unreadAlerts.length > 0}
+	<alert-list
+		class="flex flex-col gap-2 absolute z-10"
+		use:dismissable
+		on:dismiss={dismissAll}
+	>
+		{#each unreadAlerts as alert (alert.id)}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<alert
+				class={alert.type}
+				on:click|stopPropagation={dismiss(alert)}
+				animate:flip
+				in:fade
+				out:fade
+			>
+				{alert.message}
+			</alert>
+		{/each}
+	</alert-list>
+{/if}

package/src/DropDown.svelte

@@ -0,0 +1,79 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	import { dismissable } from './actions'
+	import { defaultFields, defaultStateIcons } from './constants.js'
+
+	import Icon from './Icon.svelte'
+	import Text from './items/Text.svelte'
+	import List from './List.svelte'
+
+	const dispatch = createEventDispatcher()
+
+	let className = ''
+	export { className as class }
+	export let items = []
+	export let fields = defaultFields
+	export let using = { default: Text }
+	export let value = null
+	export let title
+	export let icon
+	export let small = false
+
+	$: using = { default: Text, ...using }
+	$: fields = { ...defaultFields, ...fields }
+
+	let offsetTop = 0
+	let open = false
+	let icons = defaultStateIcons.selector
+
+	function handleSelect(event) {
+		open = false
+		dispatch('change', event.detail)
+	}
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<drop-down
+	class="flex w-full relative cursor-pointer select-none dropdown {className}"
+	class:open
+	tabindex="0"
+	aria-haspopup="true"
+	aria-controls="menu"
+	use:dismissable
+	on:blur={() => (open = false)}
+	on:dismiss={() => (open = false)}
+>
+	<button
+		on:click|stopPropagation={() => (open = !open)}
+		class="flex"
+		bind:clientHeight={offsetTop}
+		tabindex="-1"
+	>
+		{#if icon}
+			<Icon name={icon} />
+		{/if}
+		{#if !small && title}
+			<p>{title}</p>
+		{/if}
+		{#if open}
+			<icon class={icons.opened} />
+		{:else}
+			<icon class={icons.closed} />
+		{/if}
+	</button>
+	{#if open}
+		<div
+			class="flex flex-col absolute z-10 h-fit w-full menu"
+			style:top="{offsetTop}px"
+		>
+			<List
+				{items}
+				{fields}
+				{using}
+				bind:value
+				on:select={handleSelect}
+				tabindex="-1"
+			/>
+		</div>
+	{/if}
+</drop-down>

package/src/DropSearch.svelte

@@ -0,0 +1,67 @@
+<script>
+	import { defaultFields } from './constants.js'
+	import List from './List.svelte'
+	import Slider from './Slider.svelte'
+	import { Text } from './items'
+
+	export let data
+	export let value = null
+	export let fields = defaultFields
+	export let using = { default: Text }
+
+	$: using = { default: Text, ...using }
+	$: fields = { ...defaultFields, ...fields }
+
+	let opened = false
+	let search
+	let searchBox
+
+	// on search change filter list
+	function handleSelect(event) {
+		console.log('selected', event)
+		value = event.detail
+		search = event.detail[fields.text]
+	}
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+	class="flex flex-col outline-none w-full h-12 relative dropdown"
+	tabindex={0}
+>
+	<div class="flex flex-shrink-0 h-12 items-center pl-4 selected-item">
+		<span class="flex flex-grow">
+			<input
+				type="text"
+				class="p-0 border-none bg-transparent w-full"
+				bind:value={search}
+				bind:this={searchBox}
+				on:focus={() => {
+					opened = true
+					searchBox.select()
+				}}
+				on:blur={() => {
+					opened = false
+				}}
+			/>
+		</span>
+		{#if opened}
+			<icon class="selector-opened" />
+		{:else}
+			<icon class="selector-closed" />
+		{/if}
+	</div>
+
+	{#if opened}
+		<Slider>
+			<List
+				bind:items={data}
+				bind:value
+				{fields}
+				{using}
+				on:select={handleSelect}
+				on:change
+			/>
+		</Slider>
+	{/if}
+</div>

package/src/Icon.svelte

@@ -0,0 +1,15 @@
+<script>
+	let className = ''
+	export { className as class }
+
+	export let name = ''
+	let h
+</script>
+
+<square-icon
+	class="flex flex-col flex-shrink-0 h-full items-center justify-center {className}"
+	bind:clientHeight={h}
+	style:width="{h}px"
+>
+	<icon class={name} aria-hidden="true" />
+</square-icon>

package/src/List-Discard.svelte

@@ -0,0 +1,48 @@
+<script>
+	import ListActions from './ListActions.svelte'
+	import ListItems from './List.svelte'
+
+	let className = 'list'
+	export { className as class }
+	export let items = []
+	export let fields = {}
+	export let using = {}
+	export let value = null
+	export let searchable = false
+	export let editable = false
+
+	let search
+	let filtered
+
+	function addItem() {
+		items = [...items, {}]
+		value = items[items.length - 1]
+	}
+	function deleteSelection() {
+		if (value) value.isDeleted = true
+	}
+	function clearSelection() {
+		value = null
+	}
+
+	$: filtered =
+		searchable && search && search.length
+			? items.filter((item) => item[fields.text].includes(search))
+			: items
+</script>
+
+<list class="flex flex-col w-full {className}">
+	{#if searchable || editable}
+		<ListActions
+			bind:search
+			{searchable}
+			{editable}
+			on:delete={deleteSelection}
+			on:clear={clearSelection}
+			on:add={addItem}
+		/>
+	{/if}
+	<scroll class="flex flex-col h-full overflow-scroll">
+		<ListItems bind:items={filtered} {fields} {using} bind:value on:select />
+	</scroll>
+</list>

package/src/List.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { navigator } from './actions'
+	import { createEventDispatcher } from 'svelte'
+	import { defaultFields } from './constants'
+	import { Text } from './items'
+
+	const dispatch = createEventDispatcher()
+
+	let className = 'list'
+	export { className as class }
+	export let items = []
+	export let fields = {}
+	export let using = {}
+	export let value = null
+	export let tabindex = 0
+	export let hierarchy = []
+	let cursor = []
+
+	function handleNav(event) {
+		value = event.detail.node
+		cursor = event.detail.path
+
+		dispatch('select', { item: value, indices: cursor })
+	}
+
+	$: fields = { ...defaultFields, ...fields }
+	$: using = { default: Text, ...using }
+	$: filtered = items.filter((item) => !item[fields.isDeleted])
+</script>
+
+<list
+	class="flex flex-col w-full flex-shrink-0 select-none {className}"
+	role="listbox"
+	use:navigator={{
+		items,
+		fields,
+		enabled: hierarchy.length == 0,
+		indices: cursor
+	}}
+	on:move={handleNav}
+	on:select={handleNav}
+	{tabindex}
+>
+	<slot />
+	{#each filtered as item, index}
+		{@const component = item[fields.component]
+			? using[item[fields.component]] || using.default
+			: using.default}
+		{@const path = [...hierarchy, index].join(',')}
+		<item
+			class="flex flex-shrink-0 flex-grow-0 items-center cursor-pointer w-full gap-2 select-none item"
+			role="option"
+			aria-selected={value === item}
+			class:is-selected={value === item}
+			data-path={path}
+		>
+			<svelte:component
+				this={component}
+				bind:content={item}
+				{fields}
+				on:change
+			/>
+		</item>
+	{/each}
+</list>

package/src/ListActions.svelte

@@ -0,0 +1,35 @@
+<script>
+	// import Icon from '../layout/Icon.svelte'
+	import { createEventDispatcher } from 'svelte'
+	import { defaultStateIcons } from './constants'
+
+	const dispatch = createEventDispatcher()
+
+	export let search
+	export let searchable = true
+	export let editable = false
+
+	const actionIcons = defaultStateIcons.action
+</script>
+
+<toolbar class="flex flex-row w-full items-center">
+	{#if searchable}
+		<search class="flex flex-row flex-grow">
+			<icon class={actionIcons.search} />
+			<input
+				type="search"
+				bind:value={search}
+				class="rounded-r-full px-3 leading-loose"
+				placeholder="search"
+			/>
+		</search>
+	{/if}
+	{#if editable}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<icon class={actionIcons.clear} on:click={() => dispatch('clear')} />
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<icon class={actionIcons.remove} on:click={() => dispatch('remove')} />
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<icon class={actionIcons.add} on:click={() => dispatch('add')} />
+	{/if}
+</toolbar>

package/src/NestedList.svelte

@@ -0,0 +1,87 @@
+<script>
+	import { Node, Text } from './items'
+	import { defaultFields } from './constants'
+	import { createEventDispatcher } from 'svelte'
+	import { navigator } from './actions/navigator'
+
+	const dispatch = createEventDispatcher()
+
+	export let items = []
+	export let fields = defaultFields
+	export let using = {}
+	export let types = []
+	export let value = null
+	export let linesVisible = true
+	export let rtl = false
+	export let hierarchy = []
+
+	let indices = []
+
+	function handle(event) {
+		value = event.detail.node
+		indices = event.detail.path
+		if (['collapse', 'expand'].includes(event.type)) {
+			items = items
+		}
+		dispatch(event.type, value)
+	}
+	// function handleExpand(event) {
+	// 	value = event.detail.node
+	// 	indices = event.detail.path
+	// 	items = items // tell svelte data has changed
+	// 	dispatch('expand', value)
+	// }
+	// function handleCollapse(event) {
+	// 	// console.log(event)
+	// 	value = event.detail.node
+	// 	indices = event.detail.path
+	// 	items = items // tell svelte data has changed
+	// 	dispatch('collapse', value)
+	// }
+	$: using = { default: Text, ...using }
+	$: fields = { ...defaultFields, ...fields }
+	$: nodeTypes = items.map((_, index) =>
+		index === items.length - 1 ? 'last' : 'middle'
+	)
+</script>
+
+<nested-list
+	class="flex flex-col w-full"
+	role="listbox"
+	class:rtl
+	tabindex={hierarchy.length == 0 ? 0 : -1}
+	use:navigator={{ items, fields, indices, enabled: hierarchy.length == 0 }}
+	on:select={handle}
+	on:move={handle}
+	on:expand={handle}
+	on:collapse={handle}
+>
+	{#each items as content, index}
+		{@const type = nodeTypes[index] === 'middle' ? 'line' : 'empty'}
+		{@const hasChildren = fields.children in content}
+		{@const connectors = types.slice(0, -1)}
+		{@const path = [...hierarchy, index]}
+
+		<Node
+			bind:content
+			{fields}
+			{using}
+			types={[...connectors, nodeTypes[index]]}
+			{linesVisible}
+			{rtl}
+			{path}
+			selected={value === content}
+		/>
+		{#if hasChildren && content[fields.isOpen]}
+			<svelte:self
+				items={content[fields.children]}
+				bind:value
+				{fields}
+				{using}
+				types={[...connectors, type, nodeTypes[index]]}
+				{linesVisible}
+				hierarchy={path}
+			/>
+		{/if}
+	{/each}
+</nested-list>

package/src/Overlay.svelte

@@ -0,0 +1,4 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<overlay class="absolute h-screen w-screen left-0 top-0" on:click>
+	<slot />
+</overlay>