From 7f22183e248b796fca50c2332cc8578bcd5e8041 Mon Sep 17 00:00:00 2001
From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Date: Wed, 10 Jan 2024 14:33:13 +0000
Subject: [PATCH] Annotate exploded example (#2413)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Alters the exploded example so that it imports all the default
components and annotates with an explanation.

I felt like the purpose of the exploded example was to show everything
so that users could see what was available for them to customise. I
think this is a step further in that direction.

I found it tricky to work around the double meaning of components here,
I think that needs looking at. Components is a prop on the TldrawEditor,
but it also means something in React. Makes explaining certain things
difficult, e.g :

"Here we've passed the default components object to the TldrawEditor
component. Along
with default tools and shapeutils, You could input your own custom
shapes/tools here.
For help creating your own shapes/tools check out the custom config
example.

We also set the initial state to 'select' and render the UI, context
menu and canvas
components. You could add your own custom components here, omit these
ones, and/or
change the initial state of the application to whatever you want. "

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds annotation to exploded example
- imports all default components instead of just a few
---
 .../src/examples/exploded/ExplodedExample.tsx | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/apps/examples/src/examples/exploded/ExplodedExample.tsx b/apps/examples/src/examples/exploded/ExplodedExample.tsx
index a6e81af09..09c6e3d87 100644
--- a/apps/examples/src/examples/exploded/ExplodedExample.tsx
+++ b/apps/examples/src/examples/exploded/ExplodedExample.tsx
@@ -14,6 +14,9 @@ import {
 } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 
+// There's a guide at the bottom of this file!
+
+// [1]
 const defaultComponents = {
 	Scribble: TldrawScribble,
 	CollaboratorScribble: TldrawScribble,
@@ -23,6 +26,7 @@ const defaultComponents = {
 	HoveredShapeIndicator: TldrawHoveredShapeIndicator,
 }
 
+//[2]
 export default function ExplodedExample() {
 	return (
 		<div className="tldraw__editor">
@@ -42,3 +46,26 @@ export default function ExplodedExample() {
 		</div>
 	)
 }
+
+/* 
+The tldraw library is built from many sublibraries. This example shows how to 
+build the tldraw component from its subcomponents for max customisation. You 
+can edit, omit or add to these subcomponents to create your app.
+
+[1]
+Here we've imported some components from the tldraw library which we will later
+pass to the TldrawEditor component. These components are not part of the more 
+minimal defaults, so we need to import them separately. For help creating your
+own components to pass into the components prop check out the custom components 
+example.
+
+[2]
+Here we've passed the default components object to the TldrawEditor component. Along
+with default tools and shapeutils, You could input your own custom shapes/tools here. 
+For help creating your own shapes/tools check out the custom config example.
+
+We also set the initial state to 'select' and render the UI, context menu and canvas
+components. You could add your own custom components here, omit these ones, and/or 
+change the initial state of the application to whatever you want. 
+
+*/