Skip to content

Commit c239312

Browse files
jerrythomasjerrythomas
committed
Added new action that will support keyboard navigation for lists and nested lists
1 parent 9bb3fa8 commit c239312

File tree

129 files changed

+18454
-224
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+18454
-224
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ discard
1616
packages/vector
1717
.vercel
1818
.svelte-kit
19-
favicon_io
19+
favicon_io
20+
vitest*timestamp*

‎package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,9 @@
1414
"prepare": "husky install",
1515
"upgrade": "pnpm clean && pnpm upgrade",
1616
"bump": "bumpp --no-commit --no-push package.json sites/*/package.json",
17-
"bump:next": "bumpp --no-commit --no-push --preid=next package.json sites/*/package.json ",
17+
"bump:next": "bumpp --no-commit --no-push --preid=next package.json sites/*/package.json",
1818
"release": "changeset publish",
19-
"version:next": "pnpm build && changeset pre enter next && changeset",
20-
"release:next": "changeset version && changeset publish && changeset pre exit",
19+
"release:next": "pnpm build && changeset pre enter next && changeset && changeset version && changeset publish && changeset pre exit && pnpm bump:next",
2120
"upgrade:all": "./upgrade.sh && pnpm upgrade",
2221
"coverage:lcov": "pnpm coverage && ./merge-lcov.sh"
2322
},

‎packages/chart/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,10 @@
4141
"d3-array": "^3.2.2",
4242
"d3-collection": "^1.0.7",
4343
"d3-scale": "^4.0.2",
44-
"ramda": "^0.28.0"
44+
"d3-shape": "^3.2.0",
45+
"date-fns": "^2.29.3",
46+
"ramda": "^0.28.0",
47+
"yootils": "^0.3.1"
4548
},
4649
"files": [
4750
"src/**/*.js",

‎packages/chart/src/chart/Grid.svelte

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script>
2+
import { getContext } from 'svelte'
3+
4+
export let opacity = 1
5+
export let hideVertical = false
6+
export let hideHorizontal = false
7+
let chart = getContext('chart')
8+
9+
$: opacityV = hideVertical ? 0 : opacity
10+
$: opacityH = hideHorizontal ? 0 : opacity
11+
$: xRange = $chart.axis.x.scale.range()
12+
$: yRange = $chart.axis.y.scale.range()
13+
</script>
14+
15+
<g class="grid">
16+
{#each $chart.axis.x.ticks as tick}
17+
<line
18+
x1={tick.position}
19+
x2={tick.position}
20+
y1={yRange[0]}
21+
y2={yRange[1]}
22+
opacity={opacityV}
23+
/>
24+
{/each}
25+
{#each $chart.axis.y.ticks as tick}
26+
<line
27+
y1={tick.position}
28+
y2={tick.position}
29+
x1={xRange[0]}
30+
x2={xRange[1]}
31+
opacity={opacityH}
32+
/>
33+
{/each}
34+
</g>

‎packages/chart/src/chart/Legend.svelte

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
export let title
3+
export let items = []
4+
</script>
5+
6+
<ul class="flex flex-col">
7+
<p>{title}</p>
8+
{#each items as item}
9+
<li class="flex flex-row gap-5">
10+
<svg width="42" height="42" viewBox="0 0 42 42">
11+
<rect width="42" height="42" fill={item.fillUrl || item.fill} />
12+
</svg>
13+
<p class="flex flex-grow">{item.label}</p>
14+
</li>
15+
{/each}
16+
</ul>

‎packages/chart/src/chart/PatternDefs.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import Texture from './Texture.svelte'
3+
const size = 10
4+
5+
export let thickness = 0.5
6+
export let patterns
7+
</script>
8+
9+
<defs>
10+
{#each patterns as pattern}
11+
<Texture {...pattern} {thickness} {size} />
12+
{/each}
13+
</defs>

‎packages/chart/src/chart/Swatch.svelte

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script>
2+
import { createEventDispatcher } from 'svelte'
3+
4+
import { swatch } from '../lib/utils'
5+
import { clamp } from 'yootils'
6+
import Symbol from './Symbol.svelte'
7+
import PatternDefs from './PatternDefs.svelte'
8+
9+
const dispatch = createEventDispatcher()
10+
11+
export let label
12+
export let size = 30
13+
export let items = []
14+
export let type = 'square'
15+
export let pad = 10
16+
export let columns
17+
export let rows
18+
export let limit
19+
export let start = 0
20+
export let autoscale = false
21+
export let interactive = false
22+
export let activeIndex = -1
23+
24+
function fill(item) {
25+
return item.fillUrl || item.fill || item
26+
}
27+
28+
function stroke(item) {
29+
return item.stroke || item
30+
}
31+
32+
function swapType(inputType) {
33+
return inputType === 'square'
34+
? 'circle'
35+
: inputType === 'circle'
36+
? 'square'
37+
: type
38+
}
39+
40+
function click(index) {
41+
if (interactive) {
42+
activeIndex = start + index
43+
dispatch('click', { index: activeIndex, item: items[activeIndex] })
44+
}
45+
}
46+
47+
function forwardEvent(event, index) {
48+
if (interactive)
49+
dispatch(event, {
50+
index: start + index,
51+
item: items[start + index]
52+
})
53+
}
54+
55+
$: grid = swatch(limit || items.length, size, pad, columns, rows)
56+
$: data = grid.data.map((item, i) => ({
57+
...item,
58+
type: i == activeIndex ? swapType(type) : type
59+
}))
60+
$: start = clamp(start, 0, items.length - (limit || 0))
61+
</script>
62+
63+
<div class="flex flex-col leading-loose">
64+
{#if label}
65+
<span class="py-2">{label}</span>
66+
{/if}
67+
<svg
68+
viewBox="0 0 {grid.width} {grid.height}"
69+
width="100%"
70+
class="cursor-pointer"
71+
>
72+
{#if label}
73+
<title>A swatch with label {label}</title>
74+
{/if}
75+
76+
{#each data as { cx, cy, r, type }, i}
77+
<Symbol
78+
x={cx}
79+
y={cy}
80+
{size}
81+
fill={fill(items[i + start])}
82+
stroke={stroke(items[i + start])}
83+
shape={items[i + start].shape || type}
84+
thickness={i + start == activeIndex ? 2 : 0.5}
85+
on:click={click(i + start)}
86+
on:mouseover={forwardEvent('mouseover', i + start)}
87+
on:mouseleave={forwardEvent('mouseleave', i + start)}
88+
on:focus={forwardEvent('focus', i + start)}
89+
/>
90+
{/each}
91+
<PatternDefs patterns={items} />
92+
</svg>
93+
</div>

‎packages/chart/src/chart/SwatchButton.svelte

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script>
2+
import TexturedShape from './TexturedShape.svelte'
3+
4+
export let pattern
5+
export let shape = 'circle'
6+
// export let type
7+
export let fill
8+
export let stroke
9+
export let isCurrent = false
10+
11+
const size = 40
12+
</script>
13+
14+
<button
15+
class="bg-gray-100 rounded shadow-md w-10 h-10 p-1 flex items-center justify-center hover:bg-primary-300"
16+
class:isCurrent
17+
on:click
18+
on:mouseover
19+
on:mouseleave
20+
on:focus
21+
>
22+
<TexturedShape {pattern} {fill} {stroke} {shape} {size} />
23+
</button>
24+
25+
<style>
26+
.isCurrent {
27+
@apply bg-primary-200;
28+
}
29+
</style>

‎packages/chart/src/chart/SwatchGrid.svelte

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script>
2+
import SwatchButton from './SwatchButton.svelte'
3+
4+
export let columns
5+
export let rows
6+
export let items
7+
let grid
8+
9+
function toGrid(columns, rows, patterns) {
10+
const count = patterns.length
11+
if (columns > 0) {
12+
rows = Math.ceil(count / columns)
13+
} else if (rows > 0) {
14+
columns = Math.ceil(count / rows)
15+
} else {
16+
columns = Math.ceil(Math.sqrt(count))
17+
rows = Math.ceil(count / columns)
18+
}
19+
const grid = [...Array(rows).keys()].map((row) =>
20+
[...Array(columns).keys()]
21+
.filter((column) => row * columns + column < count)
22+
.map((column) => ({
23+
item: patterns[row * columns + column],
24+
isCurrent: false,
25+
}))
26+
)
27+
return grid
28+
}
29+
let previous
30+
function handleClick(row, column) {
31+
console.log(row, column, grid)
32+
if (previous) {
33+
grid[previous.row][previous.column].isCurrent = false
34+
}
35+
grid[row][column].isCurrent = true
36+
previous = { row, column }
37+
}
38+
$: grid = toGrid(columns, rows, items)
39+
$: console.log(grid)
40+
</script>
41+
42+
<row class="flex flex-col gap-2">
43+
{#each grid as items, row}
44+
<div class="flex flex-row gap-2">
45+
{#each items as { item, isCurrent }, column}
46+
<SwatchButton
47+
shape="shurikan"
48+
pattern={item}
49+
on:click={() => handleClick(row, column)}
50+
{isCurrent}
51+
/>
52+
{/each}
53+
</div>
54+
{/each}
55+
</row>

‎packages/chart/src/chart/Symbol.svelte

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script>
2+
import { namedShapes } from '../components/lib/shape'
3+
4+
export let x = 0
5+
export let y = 0
6+
export let size = 10
7+
export let fill = 'none'
8+
export let stroke = 'currentColor'
9+
export let thickness = 0.5
10+
11+
export let name = null
12+
export let shape = null
13+
14+
$: x = x - size / 2
15+
$: y = y - size / 2
16+
17+
$: d =
18+
typeof shape === 'function'
19+
? shape(size)
20+
: (shape || name) in namedShapes
21+
? namedShapes[shape || name](size)
22+
: namedShapes.circle(size)
23+
</script>
24+
25+
<!-- svelte-ignore a11y-click-events-have-key-events -->
26+
<path
27+
{d}
28+
{fill}
29+
{stroke}
30+
transform="translate({x},{y})"
31+
stroke-width={thickness}
32+
fill-rule="evenodd"
33+
on:click
34+
on:mouseover
35+
on:mouseleave
36+
on:focus
37+
/>

‎packages/chart/src/chart/Texture.svelte

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
export let id
3+
export let fill
4+
export let path
5+
export let contrast
6+
export let thickness = 0.5
7+
export let patternUnits = 'userSpaceOnUse'
8+
export let size = 10
9+
</script>
10+
11+
<pattern {id} {patternUnits} width={size} height={size}>
12+
<rect width={size} height={size} {fill} />
13+
{#if path}
14+
<path d={path} fill="none" stroke={contrast} stroke-width={thickness} />
15+
{/if}
16+
</pattern>

‎packages/chart/src/chart/TexturedShape.svelte

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script>
2+
import Symbol from './Symbol.svelte'
3+
import Texture from './Texture.svelte'
4+
5+
export let pattern
6+
export let shape = 'circle'
7+
export let fill
8+
export let stroke
9+
10+
const size = 40
11+
</script>
12+
13+
<svg viewBox="0 0 {size} {size}">
14+
<Symbol
15+
x={size / 2}
16+
y={size / 2}
17+
{size}
18+
fill={pattern.fillUrl || fill}
19+
{stroke}
20+
{shape}
21+
/>
22+
{#if pattern}
23+
<defs>
24+
<Texture {...pattern} />
25+
</defs>
26+
{/if}
27+
</svg>

0 commit comments

Comments
 (0)