[improvement] repo shuffle (#214)

* move folders out of packages

* Remove custom yarn stuff, remove duplicate readme

* Remove stitches config

* Add README script.

* bump deps

* Fix script

* Update package.json

.yarnrc

@@ -1,5 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-yarn-path ".yarn/releases/yarn-1.19.0.cjs"

README.md

@@ -1,61 +1,147 @@
-# tldraw
+# @tldraw/tldraw
 
-A tiny little drawing app.
+> `This library is not yet released and these docs are partially out of date!`
 
-Visit [tldraw.com](https://tldraw.com/).
+This package contains the [tldraw](https://tldraw.com) editor as a standalone React component.
 
-## Author
+## Installation
 
-- [steveruizok](https://twitter.com/steveruizok)
-- ...and more!
+```bash
+npm i @tldraw/tldraw
+```
 
-## Support
+or
 
-To support this project (and gain access to the project while it is in development) you can [sponsor the author](https://github.com/sponsors/steveruizok) on GitHub. Thanks!
+```bash
+yarn add @tldraw/tldraw
+```
+
+## Usage
+
+Import the `TLDraw` React component and use it in your app.
+
+```tsx
+import { TLDraw } from '@tldraw/tldraw'
+
+function App() {
+  return <TLDraw />
+}
+```
 
 ## Documentation
 
-In progress! Check the README files in [packages/core](packages/core/README.md) and [packages/tldraw](packages/tldraw/README.md).
+### `TLDraw`
 
-## Examples
+The `TLDraw` React component is the [tldraw](https://tldraw.com) editor exported as a standalone component. You can control the editor through props, or through the `TLDrawState`'s imperative API.
 
-- [@tldraw/core example](https://codesandbox.io/s/tldraw-core-example-88c74)
-- [@tldraw/tldraw example](https://codesandbox.io/s/tldraw-example-n539u)
+| Prop            | Type                            | Description                                                                                                                                                             |
+| --------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`            | `string`                        | (optional) An id under which to persist the component's state.                                                                                                          |
+| `document`      | `TLDrawDocument`                | (optional) An initial [`TLDrawDocument`](#tldrawdocument) object.                                                                                                       |
+| `currentPageId` | `string`                        | (optional) A current page id, referencing the `TLDrawDocument` object provided via the `document` prop.                                                                 |
+| `onMount`       | `(TLDrawState) => void`         | (optional) A callback function that will be called when the editor first mounts, receiving the current `TLDrawState`.                                                   |
+| `onChange`      | `(TLDrawState, string) => void` | (optional) A callback function that will be called whenever the `TLDrawState` updates. The update will include the current `TLDrawState` and the reason for the change. |
 
-## Local Development
+### `TLDrawDocument`
 
-### The tldraw packages
+A `TLDrawDocument` is an object with three properties:
 
-To work on the packages (@tldraw/core or @tldraw/tldraw), you'll want to run the (extremely fast) dev server.
+- `id` - A unique ID for this document
+- `pages` - A table of `TLPage` objects
+- `pageStates` - A table of `TLPageState` objects
 
-1. Download or clone the repository.
+```ts
+const tldocument: TLDrawDocument = {
+  id: 'doc',
+  pages: {
+    page1: {
+      id: 'page1',
+      shapes: {},
+      bindings: {},
+    },
+  },
+  pageStates: {
+    page1: {
+      id: 'page1',
+      selectedIds: [],
+      currentParentId: 'page1',
+      camera: {
+        point: [0, 0],
+        zoom: 1,
+      },
+    },
+  },
+}
+```
 
-   ```bash
-   git clone https://github.com/tldraw/tldraw.git
-   ```
+**Important:** In the `pages` object, each `TLPage` object must be keyed under its `id` property. Likewise, each `TLPageState` object must be keyed under its `id`. In addition, each `TLPageState` object must have an `id` that matches its corresponding page.
 
-2. Install dependencies.
+In the example above, the page above with the id `page1`is at `tldocument.pages["page1"]`. Its corresponding page state has the same id (`page1`) and is at `tldocument.pageStates["page1"]`.
 
-   ```bash
-   yarn
-   ```
+### Shapes
 
-3. Start the development server.
+Your `TLPage` objects may include shapes: objects that fit one of the `TLDrawShape` interfaces listed below. All `TLDrawShapes` extends a common interface:
 
-   ```bash
-   yarn start
-   ```
+| Property              | Type         | Description                                                     |
+| --------------------- | ------------ | --------------------------------------------------------------- |
+| `id`                  | `string`     | A unique ID for the shape.                                      |
+| `name`                | `string`     | The shape's name.                                               |
+| `type`                | `string`     | The shape's type.                                               |
+| `parentId`            | `string`     | The ID of the shape's parent (a shape or its page).             |
+| `childIndex`          | `number`     | The shape's order within its parent's children, indexed from 1. |
+| `point`               | `number[]`   | The `[x, y]` position of the shape.                             |
+| `rotation`            | `number[]`   | (optional) The shape's rotation in radians.                     |
+| `children`            | `string[]`   | (optional) The shape's child shape ids.                         |
+| `handles`             | `TLHandle{}` | (optional) A table of `TLHandle` objects.                       |
+| `isLocked`            | `boolean`    | True if the shape is locked.                                    |
+| `isHidden`            | `boolean`    | True if the shape is hidden.                                    |
+| `isEditing`           | `boolean`    | True if the shape is currently editing.                         |
+| `isGenerated`         | `boolean`    | True if the shape is generated.                                 |
+| `isAspectRatioLocked` | `boolean`    | True if the shape's aspect ratio is locked.                     |
 
-4. Open the local site at `https://localhost:5000`.
+> **Important:** In order for re-ordering to work correctly, a shape's `childIndex` values _must_ start from 1, not 0. The page or parent shape's "bottom-most" child should have a `childIndex` of 1.
 
-### The tldraw app
+The `ShapeStyle` object is a common style API for all shapes.
 
-To work on the app itself (that embeds @tldraw/tldraw), run the Next.js app. This won't directly respond to changes to packages, so for concurrent package dev work be sure to use the package dev server instead. (This is being worked on.)
+| Property   | Type         | Description                             |
+| ---------- | ------------ | --------------------------------------- |
+| `size`     | `SizeStyle`  | The size of the shape's stroke.         |
+| `dash`     | `DashStyle`  | The style of the shape's stroke.        |
+| `color`    | `ColorStyle` | The shape's color.                      |
+| `isFilled` | `boolean`    | (optional) True if the shape is filled. |
 
-1. Start the development server.
+#### Draw
 
-   ```bash
-   yarn start:www
-   ```
+| Property | Type         | Description                               |
+| -------- | ------------ | ----------------------------------------- |
+| `points` | `number[][]` | An array of points as `[x, y, pressure]`. |
 
-2. Open the local site at `https://localhost:3000`.
+##### Rectangle
+
+| Property | Type       | Description                             |
+| -------- | ---------- | --------------------------------------- |
+| `size`   | `number[]` | The `[width, height]` of the rectangle. |
+
+#### Ellipse
+
+| Property | Type       | Description                         |
+| -------- | ---------- | ----------------------------------- |
+| `radius` | `number[]` | The `[x, y]` radius of the ellipse. |
+
+#### Arrow
+
+| Property  | Type     | Description                                                             |
+| --------- | -------- | ----------------------------------------------------------------------- |
+| `handles` | `object` | An object with three `TLHandle` properties: `start`, `end`, and `bend`. |
+
+#### Text
+
+| Property | Type     | Description               |
+| -------- | -------- | ------------------------- |
+| `text`   | `string` | The shape's text content. |
+
+## Development
+
+### Running unit tests
+
+Run `nx test tldraw` to execute the unit tests via [Jest](https://jestjs.io).

dev/package.json

@@ -19,10 +19,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@liveblocks/client": "^0.12.0",
-    "@liveblocks/react": "^0.12.0",
+    "@liveblocks/client": "^0.12.1",
+    "@liveblocks/react": "^0.12.1",
     "@tldraw/tldraw": "^0.0.133",
-    "idb": "^6.1.2",
     "react": ">=16.8",
     "react-dom": "^16.8 || ^17.0",
     "react-router": "^5.2.1",

dev/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../tsconfig.base.json",
   "include": ["src"],
   "exclude": ["node_modules", "dist", "docs"],
   "compilerOptions": {
@@ -9,12 +9,12 @@
     "emitDeclarationOnly": false,
     "paths": {
       "+*": ["./*"],
-      "@tldraw/tldraw": ["../tldraw"]
+      "@tldraw/tldraw": ["../packages/tldraw"]
     }
   },
   "references": [
     {
-      "path": "../tldraw"
+      "path": "../packages/tldraw"
     }
   ],
   "typedocOptions": {

package.json

@@ -1,8 +1,8 @@
 {
   "name": "tldraw",
   "private": true,
-  "author": "@steveruizok",
   "description": "A tiny little drawing app.",
+  "author": "@steveruizok",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tldraw/tldraw.git"
@@ -10,16 +10,16 @@
   "license": "MIT",
   "workspaces": [
     "packages/tldraw",
-    "packages/dev",
-    "packages/www"
+    "dev",
+    "www"
   ],
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watchAll",
     "lerna": "lerna",
     "start": "lerna run start:pre && lerna run start --stream --parallel",
-    "start:www": "yarn build:packages && lerna run start --parallel & cd packages/www && yarn dev",
-    "build": "yarn build:packages && cd packages/www && yarn build",
+    "start:www": "yarn build:packages && lerna run start --parallel & cd www && yarn dev",
+    "build": "yarn build:packages && cd www && yarn build",
     "build:packages": "cd packages/tldraw && yarn build",
     "publish:patch": "yarn build:packages && lerna publish patch",
     "docs": "lerna run docs",
@@ -45,7 +45,9 @@
     "typedoc": "^0.22.3",
     "typescript": "^4.4.2"
   },
-  "dependencies": {},
+  "dependencies": {
+    "www": "0.0.133"
+  },
   "prettier": {
     "trailingComma": "es5",
     "singleQuote": true,

packages/tldraw/README.md

@@ -1,147 +0,0 @@
-# @tldraw/tldraw
-
-> `This library is not yet released and these docs are partially out of date!`
-
-This package contains the [tldraw](https://tldraw.com) editor as a standalone React component.
-
-## Installation
-
-```bash
-npm i @tldraw/tldraw
-```
-
-or
-
-```bash
-yarn add @tldraw/tldraw
-```
-
-## Usage
-
-Import the `TLDraw` React component and use it in your app.
-
-```tsx
-import { TLDraw } from '@tldraw/tldraw'
-
-function App() {
-  return <TLDraw />
-}
-```
-
-## Documentation
-
-### `TLDraw`
-
-The `TLDraw` React component is the [tldraw](https://tldraw.com) editor exported as a standalone component. You can control the editor through props, or through the `TLDrawState`'s imperative API.
-
-| Prop            | Type                            | Description                                                                                                                                                             |
-| --------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`            | `string`                        | (optional) An id under which to persist the component's state.                                                                                                          |
-| `document`      | `TLDrawDocument`                | (optional) An initial [`TLDrawDocument`](#tldrawdocument) object.                                                                                                       |
-| `currentPageId` | `string`                        | (optional) A current page id, referencing the `TLDrawDocument` object provided via the `document` prop.                                                                 |
-| `onMount`       | `(TLDrawState) => void`         | (optional) A callback function that will be called when the editor first mounts, receiving the current `TLDrawState`.                                                   |
-| `onChange`      | `(TLDrawState, string) => void` | (optional) A callback function that will be called whenever the `TLDrawState` updates. The update will include the current `TLDrawState` and the reason for the change. |
-
-### `TLDrawDocument`
-
-A `TLDrawDocument` is an object with three properties:
-
-- `id` - A unique ID for this document
-- `pages` - A table of `TLPage` objects
-- `pageStates` - A table of `TLPageState` objects
-
-```ts
-const tldocument: TLDrawDocument = {
-  id: 'doc',
-  pages: {
-    page1: {
-      id: 'page1',
-      shapes: {},
-      bindings: {},
-    },
-  },
-  pageStates: {
-    page1: {
-      id: 'page1',
-      selectedIds: [],
-      currentParentId: 'page1',
-      camera: {
-        point: [0, 0],
-        zoom: 1,
-      },
-    },
-  },
-}
-```
-
-**Important:** In the `pages` object, each `TLPage` object must be keyed under its `id` property. Likewise, each `TLPageState` object must be keyed under its `id`. In addition, each `TLPageState` object must have an `id` that matches its corresponding page.
-
-In the example above, the page above with the id `page1`is at `tldocument.pages["page1"]`. Its corresponding page state has the same id (`page1`) and is at `tldocument.pageStates["page1"]`.
-
-### Shapes
-
-Your `TLPage` objects may include shapes: objects that fit one of the `TLDrawShape` interfaces listed below. All `TLDrawShapes` extends a common interface:
-
-| Property              | Type         | Description                                                     |
-| --------------------- | ------------ | --------------------------------------------------------------- |
-| `id`                  | `string`     | A unique ID for the shape.                                      |
-| `name`                | `string`     | The shape's name.                                               |
-| `type`                | `string`     | The shape's type.                                               |
-| `parentId`            | `string`     | The ID of the shape's parent (a shape or its page).             |
-| `childIndex`          | `number`     | The shape's order within its parent's children, indexed from 1. |
-| `point`               | `number[]`   | The `[x, y]` position of the shape.                             |
-| `rotation`            | `number[]`   | (optional) The shape's rotation in radians.                     |
-| `children`            | `string[]`   | (optional) The shape's child shape ids.                         |
-| `handles`             | `TLHandle{}` | (optional) A table of `TLHandle` objects.                       |
-| `isLocked`            | `boolean`    | True if the shape is locked.                                    |
-| `isHidden`            | `boolean`    | True if the shape is hidden.                                    |
-| `isEditing`           | `boolean`    | True if the shape is currently editing.                         |
-| `isGenerated`         | `boolean`    | True if the shape is generated.                                 |
-| `isAspectRatioLocked` | `boolean`    | True if the shape's aspect ratio is locked.                     |
-
-> **Important:** In order for re-ordering to work correctly, a shape's `childIndex` values _must_ start from 1, not 0. The page or parent shape's "bottom-most" child should have a `childIndex` of 1.
-
-The `ShapeStyle` object is a common style API for all shapes.
-
-| Property   | Type         | Description                             |
-| ---------- | ------------ | --------------------------------------- |
-| `size`     | `SizeStyle`  | The size of the shape's stroke.         |
-| `dash`     | `DashStyle`  | The style of the shape's stroke.        |
-| `color`    | `ColorStyle` | The shape's color.                      |
-| `isFilled` | `boolean`    | (optional) True if the shape is filled. |
-
-#### Draw
-
-| Property | Type         | Description                               |
-| -------- | ------------ | ----------------------------------------- |
-| `points` | `number[][]` | An array of points as `[x, y, pressure]`. |
-
-##### Rectangle
-
-| Property | Type       | Description                             |
-| -------- | ---------- | --------------------------------------- |
-| `size`   | `number[]` | The `[width, height]` of the rectangle. |
-
-#### Ellipse
-
-| Property | Type       | Description                         |
-| -------- | ---------- | ----------------------------------- |
-| `radius` | `number[]` | The `[x, y]` radius of the ellipse. |
-
-#### Arrow
-
-| Property  | Type     | Description                                                             |
-| --------- | -------- | ----------------------------------------------------------------------- |
-| `handles` | `object` | An object with three `TLHandle` properties: `start`, `end`, and `bend`. |
-
-#### Text
-
-| Property | Type     | Description               |
-| -------- | -------- | ------------------------- |
-| `text`   | `string` | The shape's text content. |
-
-## Development
-
-### Running unit tests
-
-Run `nx test tldraw` to execute the unit tests via [Jest](https://jestjs.io).

packages/tldraw/package.json

@@ -20,7 +20,7 @@
   "typings": "./dist/types/index.d.ts",
   "scripts": {
     "start": "node scripts/dev & yarn types:dev",
-    "build": "node scripts/build && yarn types:build",
+    "build": "node scripts/build && yarn types:build && node scripts/copy-readme",
     "types:pre": "tsc",
     "types:dev": "tsc -w",
     "types:build": "tsc -p tsconfig.build.json && tsconfig-replace-paths -p tsconfig.build.json",
@@ -47,7 +47,6 @@
     "@radix-ui/react-radio-group": "^0.1.1",
     "@radix-ui/react-tooltip": "^0.1.1",
     "@stitches/core": "^1.2.5",
-    "@stitches/react": "^1.0.0",
     "@tldraw/core": "^0.1.13",
     "@tldraw/intersect": "^0.1.3",
     "@tldraw/vec": "^0.1.3",

packages/tldraw/scripts/copy-readme.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+const fs = require('fs')
+
+const filesToCopy = ['README.md', 'card-repo.png']
+
+filesToCopy.forEach((file) => {
+  fs.copyFile(`../../${file}`, `./dist/${file}`, (err) => {
+    if (err) throw err
+  })
+})

packages/tldraw/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["src", "src/test/old-doc.json"],
+  "include": ["src"],
   "exclude": ["node_modules", "dist", "docs"],
   "compilerOptions": {
     "resolveJsonModule": true,

www/tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -20,27 +16,17 @@
     "baseUrl": ".",
     "rootDir": ".",
     "paths": {
-      "-*": [
-        "./*"
-      ],
-      "@tldraw/tldraw": [
-        "../tldraw"
-      ]
+      "-*": ["./*"],
+      "@tldraw/tldraw": ["../packages/tldraw"]
     },
     "incremental": true,
     "resolveJsonModule": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
   "references": [
     {
-      "path": "../tldraw"
+      "path": "../packages/tldraw"
     }
   ]
 }