Skip to content

Commit 9ec41b9

Browse files
create-signalcreate-signal
committed
added component documentation
1 parent 8d9f528 commit 9ec41b9

20 files changed

Lines changed: 507 additions & 15 deletions

File tree

‎solid-google-maps/src/components/info-window.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export const InfoWindow: ParentComponent<InfoWindowProps> = (p) => {
108108
const openOptions = createMemo<google.maps.InfoWindowOpenOptions>(() => {
109109
if (!map()) return {}
110110

111-
return { map: map(), anchor: anchor() }
111+
return { map: map(), anchor: anchor(), shouldFocus: props.shouldFocus }
112112
})
113113

114114
// ## update options

‎solid-google-maps/src/components/map/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,16 @@ export const ColorScheme = {
3939
DARK: 'DARK',
4040
LIGHT: 'LIGHT',
4141
FOLLOW_SYSTEM: 'FOLLOW_SYSTEM',
42-
}
42+
} as const
43+
4344
export type ColorScheme = (typeof ColorScheme)[keyof typeof ColorScheme]
4445

4546
export const RenderingType = {
4647
VECTOR: 'VECTOR',
4748
RASTER: 'RASTER',
4849
UNINITIALIZED: 'UNINITIALIZED',
49-
}
50+
} as const
51+
5052
export type RenderingType = (typeof RenderingType)[keyof typeof RenderingType]
5153

5254
/**

‎website/src/components/examples-nav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import { IconArrowRight } from './icons'
99
const examples = [
1010
{
1111
name: 'SolidGuessr',
12-
href: '/examples/solidguessr',
12+
href: '/experiments/solidguessr',
1313
code: 'https://github.com/create-signal/solid-google-maps/blob/main/website/src/examples/solidguessr.tsx',
1414
},
1515
{
1616
name: 'Country Quiz',
17-
href: '/examples/quiz',
17+
href: '/experiments/quiz',
1818
code: 'https://github.com/create-signal/solid-google-maps/blob/main/website/src/examples/quiz.tsx',
1919
},
2020
]

‎website/src/components/mdx-components.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Callout } from './ui/callout'
88
import { CopyButton } from './copy-button'
99
import { ComponentSource } from './component-source'
1010
import { ComponentPreview } from './component-preview'
11+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table'
1112

1213
export const MDXComponents = {
1314
h1: (props: ComponentProps<'h1'>) => {
@@ -85,6 +86,24 @@ export const MDXComponents = {
8586
</div>
8687
)
8788
},
89+
table: (props: ComponentProps<'table'>) => {
90+
return <Table {...props} />
91+
},
92+
thead: (props: ComponentProps<'thead'>) => {
93+
return <TableHeader {...props} />
94+
},
95+
tbody: (props: ComponentProps<'tbody'>) => {
96+
return <TableBody {...props} />
97+
},
98+
tr: (props: ComponentProps<'tr'>) => {
99+
return <TableRow {...props} />
100+
},
101+
th: (props: ComponentProps<'th'>) => {
102+
return <TableHead {...props} />
103+
},
104+
td: (props: ComponentProps<'td'>) => {
105+
return <TableCell {...props} />
106+
},
88107
Step: (props: ComponentProps<'h3'>) => (
89108
<h3 class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight" {...props} />
90109
),

‎website/src/components/navbar.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,31 @@ export default function Navbar() {
2626
href="/docs/introduction"
2727
class={cn(
2828
'transition-colors hover:text-foreground/80',
29-
pathname().startsWith('/docs') && !pathname().startsWith('/docs/components')
29+
pathname().startsWith('/docs') && !pathname().startsWith('/docs/examples')
3030
? 'text-foreground'
3131
: 'text-foreground/80',
3232
)}
3333
>
3434
Docs
3535
</A>
3636
<A
37-
href="/examples/solidguessr"
37+
href="/docs/examples/basic-map"
3838
class={cn(
3939
'transition-colors hover:text-foreground/80',
40-
pathname().startsWith('/docs/components') ? 'text-foreground' : 'text-foreground/80',
40+
pathname().startsWith('/docs/examples') ? 'text-foreground' : 'text-foreground/80',
4141
)}
4242
>
4343
Examples
4444
</A>
45+
<A
46+
href="/experiments/solidguessr"
47+
class={cn(
48+
'transition-colors hover:text-foreground/80',
49+
pathname().startsWith('/experiments') ? 'text-foreground' : 'text-foreground/80',
50+
)}
51+
>
52+
Experiments
53+
</A>
4554
</nav>
4655
</div>
4756
<div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">

‎website/src/components/ui/table.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import type { Component, ComponentProps } from 'solid-js'
2+
import { splitProps } from 'solid-js'
3+
4+
import { cn } from '~/lib/utils'
5+
6+
const Table: Component<ComponentProps<'table'>> = (props) => {
7+
const [local, others] = splitProps(props, ['class'])
8+
return (
9+
<div class="relative w-full overflow-auto">
10+
<table class={cn('w-full caption-bottom text-sm', local.class)} {...others} />
11+
</div>
12+
)
13+
}
14+
15+
const TableHeader: Component<ComponentProps<'thead'>> = (props) => {
16+
const [local, others] = splitProps(props, ['class'])
17+
return <thead class={cn('[&_tr]:border-b', local.class)} {...others} />
18+
}
19+
20+
const TableBody: Component<ComponentProps<'tbody'>> = (props) => {
21+
const [local, others] = splitProps(props, ['class'])
22+
return <tbody class={cn('[&_tr:last-child]:border-0', local.class)} {...others} />
23+
}
24+
25+
const TableFooter: Component<ComponentProps<'tfoot'>> = (props) => {
26+
const [local, others] = splitProps(props, ['class'])
27+
return <tfoot class={cn('bg-primary font-medium text-primary-foreground', local.class)} {...others} />
28+
}
29+
30+
const TableRow: Component<ComponentProps<'tr'>> = (props) => {
31+
const [local, others] = splitProps(props, ['class'])
32+
return (
33+
<tr
34+
class={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', local.class)}
35+
{...others}
36+
/>
37+
)
38+
}
39+
40+
const TableHead: Component<ComponentProps<'th'>> = (props) => {
41+
const [local, others] = splitProps(props, ['class'])
42+
return (
43+
<th
44+
class={cn(
45+
'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
46+
local.class,
47+
)}
48+
{...others}
49+
/>
50+
)
51+
}
52+
53+
const TableCell: Component<ComponentProps<'td'>> = (props) => {
54+
const [local, others] = splitProps(props, ['class'])
55+
return <td class={cn('p-2 align-top [&:has([role=checkbox])]:pr-0', local.class)} {...others} />
56+
}
57+
58+
const TableCaption: Component<ComponentProps<'caption'>> = (props) => {
59+
const [local, others] = splitProps(props, ['class'])
60+
return <caption class={cn('mt-4 text-sm text-muted-foreground', local.class)} {...others} />
61+
}
62+
63+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

‎website/src/config/docs.ts‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ export const docsConfig: Config = {
2323
},
2424
{
2525
title: 'Examples',
26-
href: '/examples/solidguessr',
26+
href: '/docs/examples/basic-map',
27+
},
28+
{
29+
title: 'Experiments',
30+
href: '/experiments/solidguessr',
2731
},
2832
],
2933
sidebarNav: [
@@ -45,7 +49,32 @@ export const docsConfig: Config = {
4549
],
4650
},
4751
{
48-
title: 'Usage',
52+
title: 'Components',
53+
items: [
54+
{
55+
title: 'APIProvider',
56+
href: '/docs/components/api-provider',
57+
},
58+
{
59+
title: 'Map',
60+
href: '/docs/components/map',
61+
},
62+
{
63+
title: 'AdvancedMarker',
64+
href: '/docs/components/advanced-marker',
65+
},
66+
{
67+
title: 'InfoWindow',
68+
href: '/docs/components/info-window',
69+
},
70+
{
71+
title: 'Pin',
72+
href: '/docs/components/pin',
73+
},
74+
],
75+
},
76+
{
77+
title: 'Examples',
4978
items: [
5079
{
5180
title: 'Basic Map',
@@ -90,15 +119,15 @@ export const docsConfig: Config = {
90119
],
91120
},
92121
{
93-
title: 'Examples',
122+
title: 'Experiments',
94123
items: [
95124
{
96125
title: 'SolidGuessr',
97-
href: '/examples/solidguessr',
126+
href: '/experiments/solidguessr',
98127
},
99128
{
100129
title: 'Country Quiz',
101-
href: '/examples/quiz',
130+
href: '/experiments/quiz',
102131
},
103132
],
104133
},

‎website/src/examples/advanced-marker-interaction.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@ export const AdvancedMarkerWithRef = (
191191
<AdvancedMarker
192192
{...props}
193193
onClick={(e) => {
194+
e.stop()
194195
if (marker()) {
195196
props.onMarkerClick(marker()!)
196197
}

‎website/src/examples/custom-map-controls.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const CustomControlMap = () => {
4040
onZoomChanged={(ev) => setZoom(ev.detail.zoom)}
4141
gestureHandling={'greedy'}
4242
disableDefaultUI={true}
43+
renderingType="VECTOR"
4344
/>
4445
<div class="absolute top-4 right-4 p-4 flex flex-col gap-4">
4546
<div class="grid grid-cols-2 rounded-full shadow-lg rotate-45">
@@ -56,7 +57,7 @@ const CustomControlMap = () => {
5657
<ArrowDownRightIcon class="-translate-x-1 -translate-y-1 group-hover/button:translate-x-0 group-hover/button:translate-y-0 transition-transform" />
5758
</PanButton>
5859
</div>
59-
<Slider minValue={0} maxValue={18} step={1} value={[zoom()]} onChange={(value) => setZoom(value[0])}>
60+
<Slider minValue={0} maxValue={18} step={0.01} value={[zoom()]} onChange={(value) => setZoom(value[0])}>
6061
<SliderTrack>
6162
<SliderFill />
6263
<SliderThumb />

‎website/src/routes/(app)/components.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { RouteProps } from '@solidjs/router'
2+
import { MDXProvider } from 'solid-mdx'
3+
4+
import { MDXComponents } from '~/components/mdx-components'
5+
import Sidebar from '~/components/sidebar'
6+
import { TableOfContents } from '~/components/toc'
7+
8+
import '~/styles/mdx.css'
9+
10+
export default function ComponentsLayout(props: RouteProps<string>) {
11+
return (
12+
<div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
13+
<Sidebar />
14+
<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_250px]">
15+
<div class="mx-auto w-full min-w-0">
16+
<MDXProvider components={MDXComponents}>
17+
<article>{props.children}</article>
18+
</MDXProvider>
19+
</div>
20+
<div class="hidden text-sm xl:block">
21+
<TableOfContents />
22+
</div>
23+
</main>
24+
</div>
25+
)
26+
}

0 commit comments

Comments
 (0)