chore: added prettier-plugin-tailwindcss

Author: jerrythomas

.prettierrc

@@ -4,7 +4,7 @@
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "semi": false,
   "overrides": [
     { "files": "*.svelte", "options": { "parser": "svelte", "useTabs": true } },

package.json

@@ -33,7 +33,8 @@
     "lint-staged": "^15.2.10",
     "madge": "^8.0.0",
     "prettier": "3.3.3",
-    "prettier-plugin-svelte": "^3.2.7"
+    "prettier-plugin-svelte": "^3.2.7",
+    "prettier-plugin-tailwindcss": "^0.6.9"
   },
   "lint-staged": {
     "*.{js,svelte}": "eslint --cache --fix",

packages/actions/src/index.js

@@ -7,6 +7,7 @@ export { pannable } from './pannable.svelte'
 export { navigable } from './navigable.svelte'
 export { navigator } from './navigator.svelte'
 export { dismissable } from './dismissable.svelte'
+export { traversable } from './traversable.svelte'
 export { themable } from './themeable'
 export { swipeable } from './swipeable.svelte'
 export { switchable } from './switchable.svelte'

packages/actions/src/switchable.svelte.js

@@ -21,27 +21,29 @@ function getEventHandlers(options, toggle) {
 /**
  * A switchable action that allows the user to cycle through a list of options
  *
- * @param {HTMLElement} node
+ * @param {HTMLElement} root
  * @param {Object}      data
  */
-export function switchable(node, data) {
-	const manager = EventManager(node)
-	let options = data.options
-	let index = 0
-	let value
-
-	const toggle = (increment = 1) => {
-		index = (index + increment) % options.length
-		value = options[index]
-		node.dispatchEvent(new CustomEvent('change', { detail: value }))
+export function switchable(root, data) {
+	const manager = EventManager(root)
+
+	const getToggle = (root, data) => {
+		const toggle = (increment = 1) => {
+			data.index = (data.index + increment) % data.options.length
+			data.value = data.options[data.index]
+			root.dispatchEvent(new CustomEvent('change', { detail: value }))
+		}
+		return toggle
 	}
 
 	$effect(() => {
-		value = data.value === null || data.value === undefined ? data.options[0] : data.value
-		options = data.options
-		index = options.indexOf(value)
+		if (data.value === null || data.value === undefined) {
+			data.value = data.options[0]
+		}
+		// options = data.options
+		data.index = options.indexOf(value)
 
-		const listeners = getEventHandlers(options, toggle)
+		const listeners = getEventHandlers(options, getToggle(root, data))
 		manager.update(listeners, !data.disabled)
 
 		return () => manager.reset()

packages/atoms/src/Connector.svelte

@@ -10,7 +10,7 @@
 	let validatedType = $derived(['last', 'child', 'sibling'].includes(type) ? type : 'empty')
 </script>
 
-<span class="grid grid-rows-2 grid-cols-2 h-full min-w-4 w-4 line-{validatedType}">
+<span class="grid h-full w-4 min-w-4 grid-cols-2 grid-rows-2 line-{validatedType}">
 	{#if validatedType === 'last'}
 		{#if rtl}
 			<i class="border-b border-r"></i>
@@ -20,7 +20,7 @@
 		{/if}
 	{:else if validatedType === 'child'}
 		{#if rtl}
-			<i class="grid row-span-2 grid-rows-2 border-r">
+			<i class="row-span-2 grid grid-rows-2 border-r">
 				<i class="border-b"></i>
 			</i>
 		{:else}

packages/atoms/src/DataList.svelte

@@ -1,5 +1,5 @@
 <script>
-	let { id, items } = $props();
+	let { id, items } = $props()
 </script>
 
 <datalist {id}>

packages/atoms/src/Icon.svelte

@@ -55,7 +55,7 @@
 	let large = $derived(size === 'large' || className.includes('large'))
 </script>
 
-<icon
+<rkt-icon
 	class="flex flex-shrink-0 items-center justify-center {className}"
 	class:small
 	class:medium
@@ -72,4 +72,4 @@
 	onnmouseleave={emitter.nmouseleave}
 >
 	<i class={name} aria-hidden="true"></i>
-</icon>
+</rkt-icon>

packages/atoms/src/ProgressBar.svelte

@@ -1,5 +1,4 @@
 <script>
-	
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} [class]
@@ -10,13 +9,7 @@
 	 */
 
 	/** @type {Props} */
-	let {
-		class: className = '',
-		value = null,
-		max = null,
-		height = '1.5mm',
-		width = 10
-	} = $props();
+	let { class: className = '', value = null, max = null, height = '1.5mm', width = 10 } = $props()
 
 	let indeterminate = $derived(value === null || max === null)
 	let percentage = $derived(indeterminate ? width : value / max)

packages/atoms/src/RangeTick.svelte

@@ -18,13 +18,13 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <tick
-	class="grid grid-cols-2 cursor-pointer select-none"
+	class="grid cursor-pointer select-none grid-cols-2"
 	onclick={handleClick}
 	role="option"
 	aria-selected={selected}
 	tabindex="0"
 >
-	<tick-bar class="col-start-2 h-5px border-l"></tick-bar>
+	<tick-bar class="h-5px col-start-2 border-l"></tick-bar>
 	<p class="col-span-2 flex justify-center">
 		{label}
 	</p>

packages/atoms/src/Slider.svelte

@@ -17,7 +17,7 @@
 	in:slide={{ duration: 50, y: offset }}
 	out:fade={{ duration: 50 }}
 	style:top="{top}px"
-	class="flex flex-col absolute w-full z-10 overflow-scroll {className}"
+	class="absolute z-10 flex w-full flex-col overflow-scroll {className}"
 >
 	{@render children?.()}
 </scroll>

packages/atoms/src/Thumb.svelte

@@ -1,13 +1,6 @@
 <script>
 	import { pannable } from '@rokkit/actions'
-	let {
-		min,
-		max,
-		cx = $bindable(),
-		steps,
-		scale,
-		value = $bindable()
-	} = $props();
+	let { min, max, cx = $bindable(), steps, scale, value = $bindable() } = $props()
 
 	function handlePanMove(event) {
 		let x = cx + event.detail.dx
@@ -50,7 +43,7 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <thumb
-	class="-top-1 absolute box-border h-4 w-4 cursor-pointer"
+	class="absolute -top-1 box-border h-4 w-4 cursor-pointer"
 	style:left="{cx}px"
 	class:sliding
 	tabindex="0"

packages/chart/src/Chart.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { run } from 'svelte/legacy';
+	import { run } from 'svelte/legacy'
 
 	import { setContext } from 'svelte'
 	import { writable } from 'svelte/store'
@@ -8,7 +8,6 @@
 	let config = writable({})
 	setContext('chart', config)
 
-	
 	/**
 	 * @typedef {Object} Props
 	 * @property {any} data
@@ -47,7 +46,7 @@
 		flipCoords = false,
 		spacing = 0.1,
 		children
-	} = $props();
+	} = $props()
 
 	let margin = $derived({
 		left: marginLeft,
@@ -74,14 +73,14 @@
 				spacing
 			})
 		)
-	});
+	})
 </script>
 
 <svg
 	viewBox="0 0 {$config.width} {$config.height}"
 	width={$config.width}
 	height={$config.height}
-	class="w-full h-full chart"
+	class="chart h-full w-full"
 >
 	<rect
 		x="0"

packages/chart/src/Symbol.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { components } from './symbols'
 
-	
 	/**
 	 * @typedef {Object} Props
 	 * @property {number} [x]
@@ -23,12 +22,12 @@
 		name = 'circle',
 		using = components,
 		...rest
-	} = $props();
+	} = $props()
 
 	let component = $derived(using[name] || using.default)
 	let props = $derived(using[name] ? rest : { name, ...rest })
 
-	const SvelteComponent = $derived(component);
+	const SvelteComponent = $derived(component)
 </script>
 
 <SvelteComponent {x} {y} {size} {fill} {stroke} {...props} />

packages/chart/src/Texture.svelte

@@ -19,7 +19,7 @@
 		thickness = 0.5,
 		patternUnits = 'userSpaceOnUse',
 		size = 10
-	} = $props();
+	} = $props()
 </script>
 
 <pattern {id} {patternUnits} width={size} height={size}>

packages/chart/src/elements/Bar.svelte

@@ -24,7 +24,7 @@
 		height = 60,
 		fill,
 		spaceBetween = 5
-	} = $props();
+	} = $props()
 
 	const textHeight = 16
 	const charWidth = 12

packages/chart/src/elements/ColorRamp.svelte

@@ -14,26 +14,24 @@
 	 */
 
 	/** @type {Props} */
-	let {
-		x = 0,
-		y = 0,
-		textSize = 5,
-		height = 10,
-		width = 100,
-		tickCount = 5,
-		scale
-	} = $props();
+	let { x = 0, y = 0, textSize = 5, height = 10, width = 100, tickCount = 5, scale } = $props()
 
-	let scaleTicks = $derived(scaleLinear()
-		.range([x, x + width])
-		.domain(scale.domain()))
+	let scaleTicks = $derived(
+		scaleLinear()
+			.range([x, x + width])
+			.domain(scale.domain())
+	)
 	let scalePercent = $derived(scaleLinear().range([0, 100]).domain(scale.domain()))
-	let ticks = $derived(scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d })))
+	let ticks = $derived(
+		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
+	)
 
-	let colors = $derived(ticks.map(({ value }) => ({
-		color: scale(value),
-		offset: `${scalePercent(value)}%`
-	})))
+	let colors = $derived(
+		ticks.map(({ value }) => ({
+			color: scale(value),
+			offset: `${scalePercent(value)}%`
+		}))
+	)
 	let id = $derived(uniqueId('legend-'))
 </script>
 

packages/chart/src/elements/ContinuousLegend.svelte

@@ -1,6 +1,5 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	
 
 	/**
 	 * @typedef {Object} Props
@@ -24,12 +23,16 @@
 		tickCount = 5,
 		scale,
 		id = 'legend'
-	} = $props();
+	} = $props()
 
-	let scaleTicks = $derived(scaleLinear()
-		.range([x, x + 100])
-		.domain(scale.domain()))
-	let ticks = $derived(scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d })))
+	let scaleTicks = $derived(
+		scaleLinear()
+			.range([x, x + 100])
+			.domain(scale.domain())
+	)
+	let ticks = $derived(
+		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
+	)
 
 	let colors = $derived(scale.range())
 	// $: id = uniqueId('legend-')

packages/chart/src/elements/DefinePatterns.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { uniq } from 'ramda'
 
-	
 	/**
 	 * @typedef {Object} Props
 	 * @property {number} [size]
@@ -10,7 +9,7 @@
 	 */
 
 	/** @type {Props} */
-	let { size = 10, patternUnits = 'userSpaceOnUse', patterns = [] } = $props();
+	let { size = 10, patternUnits = 'userSpaceOnUse', patterns = [] } = $props()
 
 	let names = $derived(uniq(patterns.map(({ id }) => id)))
 </script>

packages/chart/src/elements/DiscreteLegend.svelte

@@ -21,7 +21,7 @@
 		padding = 5,
 		scale,
 		tickCount = 10
-	} = $props();
+	} = $props()
 
 	let sizeWithSpace = $derived(size + space)
 	let ticks = $derived(scale.ticks.apply(scale, [tickCount]))

packages/chart/src/elements/Label.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { run } from 'svelte/legacy';
+	import { run } from 'svelte/legacy'
 
 	/**
 	 * @typedef {Object} Props
@@ -12,19 +12,12 @@
 	 */
 
 	/** @type {Props} */
-	let {
-		x,
-		y,
-		text,
-		angle = 0,
-		small = false,
-		anchor = $bindable('middle')
-	} = $props();
+	let { x, y, text, angle = 0, small = false, anchor = $bindable('middle') } = $props()
 
 	let transform = $derived(`translate(${x},${y}) rotate(${angle})`)
 	run(() => {
 		anchor = ['start', 'middle', 'end'].includes(anchor) ? anchor : 'middle'
-	});
+	})
 </script>
 
 <text class="label" class:small text-anchor={anchor} {transform}>{text}</text>

packages/chart/src/elements/SymbolGrid.svelte

@@ -10,7 +10,7 @@
 	 */
 
 	/** @type {Props} */
-	let { base = 'teal', size = 4, shade = 600 } = $props();
+	let { base = 'teal', size = 4, shade = 600 } = $props()
 
 	let grid = $derived(swatchGrid($swatch.keys.symbol.length, size, 10))
 </script>