Merge branch 'main' of https://github.com/gridaco/designto-code into support-text-shadow

Author: You-J

.gitmodules

@@ -13,3 +13,6 @@
 [submodule "ui/editor-ui"]
 	path = ui/editor-ui
 	url = https://github.com/bridgedxyz/reflect-editor-ui
+[submodule "editor-packages/base-sdk"]
+	path = editor-packages/base-sdk
+	url = https://github.com/gridaco/base-sdk

.vscode/settings.json

@@ -11,6 +11,7 @@
     "**/node_modules": true,
     "**/bower_components": true,
     "**/*.code-search": true,
-    "yarn.lock": true
+    "**/yarn.lock": true,
+    "**/.next": true
   }
 }

editor-packages/README.md

@@ -0,0 +1,5 @@
+# A Live session listener app
+
+## From assistant
+
+## .env setup

editor-packages/base-sdk

@@ -0,0 +1,3 @@
+export function connect() {
+  throw "";
+}

editor-packages/editor-live-session/README.md

@@ -0,0 +1,9 @@
+{
+    "name": "@editor-app/live-session",
+    "version": "0.0.0",
+    "private": false,
+    "main": "index.ts",
+    "dependencies": {
+        "pusher-js": "^7.0.3"
+    }
+}

editor-packages/editor-live-session/index.ts

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-2018 Samuel Reed
+Copyright (c) 2021 Grida Inc, softmarshmallow
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

editor-packages/editor-live-session/package.json

@@ -0,0 +1,107 @@
+# PIP - Picture in picture
+
+Picture in picture mode of preview inside the viewport for viewing UI Previews in more ux friendly way.
+
+# Resizable-PIP
+
+A resizable picture-in-picture component for React.
+
+```js
+<ResizablePIP>
+  <div>I can be resized and moved around!</div>
+</ResizablePIP>
+```
+
+![](ResizablePIP.gif)
+
+### Installing
+
+```bash
+$ yarn add @code-editor/preview-pip
+```
+
+### Usage
+
+This package has two major exports:
+
+- [`<ResizablePIP>`](/lib/resizable-pip.tsx): A simple PIP component that can be resized and moved around.
+- [`<PIP>`](/lib/pip.tsx): A simple PIP component that does not receive props and cannot be resized. Used as a base for the ResizablePIP component.
+
+## `<ResizablePIP>`
+
+A `<ResizablePIP>` element wraps an existing element and extends it with the ability to be resized and moved around, above all content in the app.
+
+### ResizablePIP Usage
+
+View the [source](/src/lib/components/ResizablePIP.jsx) for more.
+
+```js
+import { ResizablePIP } from "@code-editor/preview-pip";
+
+function App() {
+  return (
+    <div>
+      <ResizablePIP
+        width={500}
+        heigt={500}
+        minConstraints={[300, 300]}
+        maxConstraints={[800, 800]}
+      >
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </ResizablePIP>
+    </div>
+  );
+}
+
+export default App;
+```
+
+#### `<ResizablePIP>` Props:
+
+```ts
+
+//
+// Props:
+//
+{
+// Specifies initial PIP window width.
+// Example: 600
+// Default value: 500
+width: number,
+
+// Specifies initial PIP window height.
+// Example: 600
+// Default value: 500
+height: number,
+
+// Specifies the minimum size possible for the PIP window (width, height).
+// Example: [100, 100]
+// Default value: [300, 300]
+minConstraints: [number, number]
+
+// Specifies the maximum size possible for the PIP window (width, height).
+// Example: [900, 900]
+// Default value: [800, 800]
+maxConstraints: [number, number]
+}
+```
+
+## References
+
+https://www.w3.org/TR/picture-in-picture/
+
+## Disclaimer
+
+The origin source was forked from - https://github.com/itielMaimon/resizable-pip under MIT License
+
+### License
+
+MIT

editor-packages/editor-preview-pip/LICENSE

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/env",
+      {
+        targets: {
+          edge: "17",
+          firefox: "60",
+          chrome: "67",
+          safari: "11.1",
+        },
+        useBuiltIns: "usage",
+        corejs: "3.6.5",
+      },
+    ],
+    "@babel/preset-react",
+  ],
+};