[internal] Add basic list to examples (#1688)
This PR adds a basic list of all examples to the examples site ### Change Type - [x] `internal`
This commit is contained in:
Steve Ruiz
GitHub
parent
090e148552
commit
80595232d2
6 changed files with 173 additions and 25 deletions
|
|
@ -7,7 +7,7 @@ test.describe('Routes', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
test('basic', async ({ page }) => {
|
test('basic', async ({ page }) => {
|
||||||
await page.goto('http://localhost:5420/')
|
await page.goto('http://localhost:5420/develop')
|
||||||
await page.waitForSelector('.tl-canvas')
|
await page.waitForSelector('.tl-canvas')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,12 @@ export default function ScrollExample() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: '120vw',
|
width: '150vw',
|
||||||
height: '150vh',
|
height: '150vh',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
backgroundImage: 'url(https://source.unsplash.com/random/2000x2000)',
|
backgroundColor: '#fff',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ width: '60vw', height: '80vh' }}>
|
<div style={{ width: '60vw', height: '80vh' }}>
|
||||||
|
|
|
||||||
47
apps/examples/src/ExamplesTldrawLogo.tsx
Normal file
47
apps/examples/src/ExamplesTldrawLogo.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
export default function () {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="722"
|
||||||
|
height="184"
|
||||||
|
viewBox="0 0 722 184"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="examples__lockup"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M0 20.2198C0 9.0527 8.67154 0 19.3684 0H164.632C175.328 0 184 9.0527 184 20.2198V163.78C184 174.947 175.328 184 164.632 184H19.3684C8.67154 184 0 174.947 0 163.78V20.2198ZM108.625 52.6242C108.625 57.0709 107.105 60.8439 104.066 63.9432C101.026 67.0424 97.3253 68.5921 92.9639 68.5921C88.4704 68.5921 84.7038 67.0424 81.6641 63.9432C78.6244 60.8439 77.1045 57.0709 77.1045 52.6242C77.1045 48.1774 78.6244 44.4044 81.6641 41.3051C84.7038 38.2059 88.4704 36.6562 92.9639 36.6562C97.3253 36.6562 101.026 38.2059 104.066 41.3051C107.105 44.4044 108.625 48.1774 108.625 52.6242ZM76.9062 108.585C76.9062 104.138 78.4261 100.365 81.4658 97.2657C84.6377 94.0317 88.4704 92.4147 92.9639 92.4147C97.1931 92.4147 100.894 94.0317 104.066 97.2657C107.237 100.365 109.088 103.868 109.616 107.776C110.674 115.053 109.352 122.262 105.651 129.404C102.083 136.545 96.9288 142.003 90.1885 145.776C86.488 147.932 83.4483 147.864 81.0694 145.574C78.8226 143.418 79.4834 140.857 83.0518 137.893C85.0342 136.411 86.6862 134.524 88.0079 132.233C89.3295 129.943 90.1885 127.584 90.585 125.159C90.7172 124.081 90.2546 123.542 89.1973 123.542C86.5541 123.407 83.8447 121.925 81.0694 119.095C78.294 116.265 76.9062 112.762 76.9062 108.585Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M349.15 149C350.25 149 350.8 148.45 350.8 147.35V124.95C350.8 122.741 349.009 120.95 346.8 120.95H343.9C343 120.95 342.3 120.7 341.8 120.2C341.4 119.8 341.2 119.2 341.2 118.4V38.15C341.2 37.05 340.65 36.5 339.55 36.5H314.3C312.091 36.5 310.3 38.2909 310.3 40.5V127.4C310.3 134.6 312.35 140 316.45 143.6C320.55 147.2 325.8 149 332.2 149H349.15Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M297.4 124.8C297.4 122.591 295.609 120.8 293.4 120.8H282.85C279.45 120.8 277.15 120.2 275.95 119C274.45 117.6 273.7 115.35 273.7 112.25V99C273.7 96.7909 275.491 95 277.7 95H293.4C295.609 95 297.4 93.2092 297.4 91V68.6C297.4 67.5 296.85 66.95 295.75 66.95H277.7C275.491 66.95 273.7 65.1591 273.7 62.95V45.65C273.7 44.55 273.15 44 272.05 44H247.7C245.491 44 243.7 45.7909 243.7 48V62.95C243.7 65.1591 241.909 66.95 239.7 66.95H236C233.791 66.95 232 68.7409 232 70.95V93.35C232 94.45 232.55 95 233.65 95H239.7C241.909 95 243.7 96.7909 243.7 99V114.5C243.7 126.1 246.75 134.75 252.85 140.45C258.95 146.15 267.8 149 279.4 149H295.75C296.85 149 297.4 148.45 297.4 147.35V124.8Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M385.241 65.45C389.841 65.45 393.791 66.6 397.091 68.9C400.199 71.0021 402.763 73.7307 404.785 77.0858C405.139 77.6741 405.768 78.05 406.454 78.05C407.497 78.05 408.341 77.2052 408.341 76.1631V40.5C408.341 38.2909 410.132 36.5 412.341 36.5H436.691C437.791 36.5 438.341 37.05 438.341 38.15V145C438.341 147.209 436.551 149 434.341 149H409.991C408.891 149 408.341 148.45 408.341 147.35V138.341C408.341 137.269 407.473 136.4 406.401 136.4C405.741 136.4 405.128 136.738 404.759 137.285C402.205 141.08 399.349 144.185 396.191 146.6C392.791 149.2 388.541 150.5 383.441 150.5C376.541 150.5 371.091 148.15 367.091 143.45C363.091 138.75 361.091 132.45 361.091 124.55V93.05C361.091 84.45 363.141 77.7 367.241 72.8C371.441 67.9 377.441 65.45 385.241 65.45ZM392.741 122C393.841 123.2 395.791 123.8 398.591 123.8C401.42 123.8 403.907 123.458 406.051 122.774C407.495 122.314 408.341 120.893 408.341 119.378V95.6407C408.341 94.3033 407.69 93.0183 406.484 92.4394C405.539 91.9857 404.558 91.6392 403.541 91.4C401.841 90.9 400.191 90.65 398.591 90.65C393.491 90.65 390.941 93.2 390.941 98.3V116.3C390.941 119 391.541 120.9 392.741 122Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M482.325 149C484.534 149 486.325 147.209 486.325 145V102.793C486.325 101.4 487.039 100.083 488.293 99.4756C489.524 98.8794 490.818 98.3876 492.175 98C494.275 97.3 496.625 96.95 499.225 96.95C501.125 96.95 502.925 97.1 504.625 97.4C506.297 97.6787 507.926 98.0437 509.512 98.495C509.753 98.5636 510.002 98.6 510.252 98.6C511.701 98.6 512.875 97.4259 512.875 95.9776V68.6C512.875 67.9 512.625 67.3 512.125 66.8C511.825 66.5 511.275 66.2 510.475 65.9C509.675 65.6 508.475 65.45 506.875 65.45C502.175 65.45 498.425 66.9 495.625 69.8C493.144 72.3728 491.212 76.1275 489.829 81.0641C489.609 81.8457 488.905 82.4 488.094 82.4C487.117 82.4 486.325 81.608 486.325 80.6311V68.6C486.325 67.5 485.775 66.95 484.675 66.95H459.875C457.666 66.95 455.875 68.7409 455.875 70.95V147.35C455.875 148.45 456.425 149 457.525 149H482.325Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M596.651 96.2V120.5C596.651 121.732 597.076 122.538 597.928 122.918C598.168 123.025 598.416 123.118 598.665 123.205C598.944 123.302 599.222 123.35 599.501 123.35H599.701C601.91 123.35 603.701 125.141 603.701 127.35V147.35C603.701 148.45 603.151 149 602.051 149H592.001C587.101 149 582.601 148 578.501 146C574.942 144.22 572.214 141.649 570.317 138.286C569.883 137.515 569.087 137 568.202 137C567.342 137 566.561 137.486 566.133 138.233C564.007 141.945 561.23 144.884 557.801 147.05C554.101 149.35 549.351 150.5 543.551 150.5C536.551 150.5 531.001 148.6 526.901 144.8C522.801 141 520.751 135.85 520.751 129.35V123.5C520.751 116.5 522.801 111 526.901 107C531.101 103 537.001 101 544.601 101H565.601C566.761 101 567.701 100.06 567.701 98.9C567.701 95.4 566.751 93.05 564.851 91.85C563.051 90.55 559.551 89.9 554.351 89.9C545.677 89.9 537.101 91.163 528.621 93.6889C528.376 93.762 528.121 93.8 527.864 93.8C526.421 93.8 525.251 92.6299 525.251 91.1864V71.9C525.251 71.2 525.401 70.7 525.701 70.4C526.401 69.7 528.301 68.95 531.401 68.15C534.601 67.35 538.451 66.65 542.951 66.05C547.551 65.35 552.251 65 557.051 65C570.751 65 580.751 67.5 587.051 72.5C593.451 77.4 596.651 85.3 596.651 96.2ZM553.601 128.9C557.953 128.9 562.014 127.917 565.783 125.951C567.003 125.314 567.701 124.015 567.701 122.638V119.55C567.701 117.341 565.91 115.55 563.701 115.55H553.901C552.201 115.55 550.901 116 550.001 116.9C549.201 117.9 548.801 119.1 548.801 120.5V124.1C548.801 127.3 550.401 128.9 553.601 128.9Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M657.116 66.95C655.25 66.95 653.632 68.2401 653.218 70.0593C651.092 79.3906 649.129 88.1542 647.327 96.35C645.552 104.854 644.213 112.921 643.311 120.552C643.203 121.461 642.434 122.15 641.519 122.15C640.509 122.15 639.698 121.319 639.714 120.309C639.83 112.623 639.518 104.936 638.777 97.25C638.077 88.95 637.177 79.7 636.077 69.5C635.977 68.4 635.777 67.7 635.477 67.4C635.177 67.1 634.727 66.95 634.127 66.95H612.635C610.151 66.95 608.268 69.1898 608.69 71.6373C610.697 83.2749 612.626 94.9125 614.477 106.55C616.677 119.75 618.877 132.45 621.077 144.65C621.42 146.192 621.799 147.294 622.216 147.955C622.344 148.16 622.517 148.333 622.717 148.469C623.235 148.823 623.789 149 624.377 149H651.14C652.959 149 654.549 147.773 655.009 146.013C655.784 143.045 656.473 140.391 657.077 138.05C657.877 134.95 658.577 131.9 659.177 128.9C659.777 125.9 660.377 122.6 660.977 119C661.609 115.659 662.282 111.625 662.996 106.897C663.13 106.009 663.893 105.35 664.792 105.35C665.7 105.35 666.468 106.022 666.589 106.922C667.199 111.442 667.729 115.319 668.177 118.55C668.777 122.05 669.327 125.15 669.827 127.85C670.427 130.45 671.027 133.1 671.627 135.8C672.227 138.4 672.927 141.4 673.727 144.8C674.156 146.256 674.584 147.309 675.012 147.958C675.145 148.16 675.317 148.333 675.517 148.469C676.035 148.823 676.589 149 677.177 149H704.405C706.354 149 708.018 147.597 708.348 145.677L714.677 108.8C716.977 95.4 719.227 82.1 721.427 68.9C721.527 67.6 721.077 66.95 720.077 66.95H697.008C694.948 66.95 693.225 68.514 693.028 70.5639C692.167 79.5263 691.383 88.0217 690.677 96.05C690.028 104.399 689.723 112.489 689.762 120.322C689.767 121.328 688.955 122.15 687.949 122.15C687.026 122.15 686.253 121.455 686.146 120.539C685.238 112.745 683.848 104.732 681.977 96.5C680.077 87.7 677.977 78.4 675.677 68.6C675.377 67.5 674.777 66.95 673.877 66.95H657.116Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
14
apps/examples/src/components/ListLink.tsx
Normal file
14
apps/examples/src/components/ListLink.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
|
export interface ListLinkProps {
|
||||||
|
title: string
|
||||||
|
route: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ListLink({ title, route }: ListLinkProps) {
|
||||||
|
return (
|
||||||
|
<li className="examples__list__item">
|
||||||
|
<Link to={route}>{title}</Link>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -25,6 +25,8 @@ import ExampleScroll from './6-scroll/ScrollExample'
|
||||||
import ExampleMultiple from './7-multiple/MultipleExample'
|
import ExampleMultiple from './7-multiple/MultipleExample'
|
||||||
import ErrorBoundaryExample from './8-error-boundary/ErrorBoundaryExample'
|
import ErrorBoundaryExample from './8-error-boundary/ErrorBoundaryExample'
|
||||||
import HideUiExample from './9-hide-ui/HideUiExample'
|
import HideUiExample from './9-hide-ui/HideUiExample'
|
||||||
|
import ExamplesTldrawLogo from './ExamplesTldrawLogo'
|
||||||
|
import { ListLink } from './components/ListLink'
|
||||||
import EndToEnd from './end-to-end/end-to-end'
|
import EndToEnd from './end-to-end/end-to-end'
|
||||||
import YjsExample from './yjs/YjsExample'
|
import YjsExample from './yjs/YjsExample'
|
||||||
|
|
||||||
|
|
@ -38,89 +40,135 @@ setDefaultUiAssetUrls(assetUrls)
|
||||||
|
|
||||||
type Example = {
|
type Example = {
|
||||||
path: string
|
path: string
|
||||||
|
title?: string
|
||||||
element: JSX.Element
|
element: JSX.Element
|
||||||
}
|
}
|
||||||
|
|
||||||
export const allExamples: Example[] = [
|
export const allExamples: Example[] = [
|
||||||
{
|
{
|
||||||
path: '/',
|
title: 'Basic (development)',
|
||||||
|
path: '/develop',
|
||||||
element: <ExampleBasic />,
|
element: <ExampleBasic />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/scroll',
|
title: 'Editor API',
|
||||||
element: <ExampleScroll />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/multiple',
|
|
||||||
element: <ExampleMultiple />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/api',
|
path: '/api',
|
||||||
element: <ExampleApi />,
|
element: <ExampleApi />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'Multiple editors',
|
||||||
|
path: '/multiple',
|
||||||
|
element: <ExampleMultiple />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Scroll example',
|
||||||
|
path: '/scroll',
|
||||||
|
element: <ExampleScroll />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Custom config',
|
||||||
path: '/custom-config',
|
path: '/custom-config',
|
||||||
element: <CustomConfigExample />,
|
element: <CustomConfigExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/custom-ui',
|
title: 'Sublibraries',
|
||||||
element: <CustomUiExample />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/exploded',
|
path: '/exploded',
|
||||||
element: <ExplodedExample />,
|
element: <ExplodedExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/hide-ui',
|
title: 'Error boundary',
|
||||||
element: <HideUiExample />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/error-boundary',
|
path: '/error-boundary',
|
||||||
element: <ErrorBoundaryExample />,
|
element: <ErrorBoundaryExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'Custom UI',
|
||||||
|
path: '/custom-ui',
|
||||||
|
element: <CustomUiExample />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Hide UI',
|
||||||
|
path: '/hide-ui',
|
||||||
|
element: <HideUiExample />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'UI components',
|
||||||
path: '/custom-components',
|
path: '/custom-components',
|
||||||
element: <CustomComponentsExample />,
|
element: <CustomComponentsExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'UI events',
|
||||||
path: '/ui-events',
|
path: '/ui-events',
|
||||||
element: <UiEventsExample />,
|
element: <UiEventsExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'Store events',
|
||||||
path: '/store-events',
|
path: '/store-events',
|
||||||
element: <StoreEventsExample />,
|
element: <StoreEventsExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'User presence',
|
||||||
path: '/user-presence',
|
path: '/user-presence',
|
||||||
element: <UserPresenceExample />,
|
element: <UserPresenceExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'UI zones',
|
||||||
path: '/zones',
|
path: '/zones',
|
||||||
element: <ZonesExample />,
|
element: <ZonesExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'Persistence',
|
||||||
path: '/persistence',
|
path: '/persistence',
|
||||||
element: <PersistenceExample />,
|
element: <PersistenceExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/end-to-end',
|
title: 'Custom styles',
|
||||||
element: <EndToEnd />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/yjs',
|
path: '/yjs',
|
||||||
element: <YjsExample />,
|
element: <YjsExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'Custom styles',
|
||||||
path: '/custom-styles',
|
path: '/custom-styles',
|
||||||
element: <CustomStylesExample />,
|
element: <CustomStylesExample />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
title: 'Shape meta property',
|
||||||
path: '/shape-meta',
|
path: '/shape-meta',
|
||||||
element: <ShapeMetaExample />,
|
element: <ShapeMetaExample />,
|
||||||
},
|
},
|
||||||
|
// not listed
|
||||||
|
{
|
||||||
|
path: '/end-to-end',
|
||||||
|
element: <EndToEnd />,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createBrowserRouter(allExamples)
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="examples">
|
||||||
|
<div className="examples__header">
|
||||||
|
<ExamplesTldrawLogo />
|
||||||
|
<p>
|
||||||
|
See docs at <a href="https://tldraw.dev">tldraw.dev</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul className="examples__list">
|
||||||
|
{allExamples
|
||||||
|
.filter((example) => example.title)
|
||||||
|
.map((example) => (
|
||||||
|
<ListLink key={example.path} title={example.title!} route={example.path} />
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const router = createBrowserRouter([
|
||||||
|
...allExamples,
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <App />,
|
||||||
|
},
|
||||||
|
])
|
||||||
const rootElement = document.getElementById('root')
|
const rootElement = document.getElementById('root')
|
||||||
const root = createRoot(rootElement!)
|
const root = createRoot(rootElement!)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ body {
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
font-size: 16px;
|
||||||
/* mobile viewport bug fix */
|
/* mobile viewport bug fix */
|
||||||
min-height: -webkit-fill-available;
|
min-height: -webkit-fill-available;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -23,3 +24,41 @@ html,
|
||||||
inset: 0px;
|
inset: 0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.examples {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples__header {
|
||||||
|
width: fit-content;
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples__lockup {
|
||||||
|
height: 56px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples__list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples__list__item {
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin: 0px -12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples__list__item a {
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin: 0px -12px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples__list__item a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue