return source

.github/workflows/main.yml

@@ -0,0 +1,26 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Build
+        run: yarn build

.gitignore

@@ -0,0 +1,5 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist

CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

README.md

@@ -0,0 +1,24 @@
+# Scenify SDK
+
+_Warning: this project is not production ready, API might change without notice._
+
+Scenify SDK is available on npm as @scenify/sdk. This single package contains all components required to build a design editor.
+
+```sh
+# using yarn
+yarn add @scenify/sdk
+
+# using npm
+npm install @scenify/sdk
+```
+
+**View full documentation and examples on [Scenify SDK Docs](https://docs.scenify.dev)**
+
+## Join us on Discord
+
+<p>
+    <a href="https://discord.gg/HqyXEhkXNZ">
+        <img src="https://discordapp.com/api/guilds/898955692491309126/widget.png?style=banner2" alt="Discord Banner 2"/>
+    </a>
+</p>
+<!-- 177d8013c568c4d17f43a4909fdb32469a86f20b -->

docs/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+.DS_Store
+yarn-error.log
+dist
+examples
+packages

docs/.prettierignore

@@ -0,0 +1,2 @@
+.next
+node_modules

docs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Shu Ding
+
+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.

docs/README.md

@@ -0,0 +1,8 @@
+# [Scenify](https://github.com/scenify/scenify-sdk)
+
+_Warning: this project is a work in progress, API might change without notice._
+
+
+**Scenify**  is a [fabric.js](https://nextjs.org)  based SDK  that will help you build canvas-like editors for several business use cases.
+
+![](/public/preview.png)

docs/next.config.js

@@ -0,0 +1,2 @@
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+module.exports = withNextra()

docs/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "nextra",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  },
+  "author": "Shu Ding",
+  "license": "MIT",
+  "dependencies": {
+    "next": "^10.0.8-canary.9",
+    "nextra": "^0.4.1",
+    "nextra-theme-docs": "^1.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "prettier": "^2.0.5"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  }
+}

docs/pages/_app.js

@@ -0,0 +1,5 @@
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

docs/pages/design.mdx

@@ -0,0 +1,55 @@
+import Image from 'next/image'
+import Bleed from 'nextra-theme-docs/bleed'
+
+# Design
+
+### Installation
+
+Scenify SDK is available on npm as @scenify/sdk. This single package contains all components required to build a design editor.
+
+```sh
+# using yarn
+yarn add @scenify/sdk
+
+# using npm
+npm install @scenify/sdk
+```
+
+### Integration
+
+In order to use Scenify SDK, you need to do a small setup and wrap the root of your application with EditorProvider:
+
+```tsx
+import { EditorProvider } from '@scenify/sdk'
+import YourAPP from './App'
+
+export default function App() {
+  return <EditorProvider>Other components</EditorProvider>
+}
+```
+
+Then, you can use Editor component in any part of your application.
+
+```tsx
+import Editor from '@scenify/sdk'
+
+const editorConfig = {
+  clipToFrame: true,
+  scrollLimit: 0,
+}
+
+export default function MyEditor() {
+  return (
+    <div style={{ display: 'flex', flex: 1 }}>
+      <Editor config={editorConfig} />
+    </div>
+  )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout emoji="👽️">
+  It is recommended to wrap the Editor component inside a flexible container. It
+  will allow the Editor component to detect resize changes.
+</Callout>

docs/pages/events.mdx

@@ -0,0 +1,55 @@
+import Image from 'next/image'
+import Bleed from 'nextra-theme-docs/bleed'
+
+# Events
+
+### Installation
+
+Scenify SDK is available on npm as @scenify/sdk. This single package contains all components required to build a design editor.
+
+```sh
+# using yarn
+yarn add @scenify/sdk
+
+# using npm
+npm install @scenify/sdk
+```
+
+### Integration
+
+In order to use Scenify SDK, you need to do a small setup and wrap the root of your application with EditorProvider:
+
+```tsx
+import { EditorProvider } from '@scenify/sdk'
+import YourAPP from './App'
+
+export default function App() {
+  return <EditorProvider>Other components</EditorProvider>
+}
+```
+
+Then, you can use Editor component in any part of your application.
+
+```tsx
+import Editor from '@scenify/sdk'
+
+const editorConfig = {
+  clipToFrame: true,
+  scrollLimit: 0,
+}
+
+export default function MyEditor() {
+  return (
+    <div style={{ display: 'flex', flex: 1 }}>
+      <Editor config={editorConfig} />
+    </div>
+  )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout emoji="👽️">
+  It is recommended to wrap the Editor component inside a flexible container. It
+  will allow the Editor component to detect resize changes.
+</Callout>

docs/pages/history.mdx

@@ -0,0 +1,55 @@
+import Image from 'next/image'
+import Bleed from 'nextra-theme-docs/bleed'
+
+# History
+
+### Installation
+
+Scenify SDK is available on npm as @scenify/sdk. This single package contains all components required to build a design editor.
+
+```sh
+# using yarn
+yarn add @scenify/sdk
+
+# using npm
+npm install @scenify/sdk
+```
+
+### Integration
+
+In order to use Scenify SDK, you need to do a small setup and wrap the root of your application with EditorProvider:
+
+```tsx
+import { EditorProvider } from '@scenify/sdk'
+import YourAPP from './App'
+
+export default function App() {
+  return <EditorProvider>Other components</EditorProvider>
+}
+```
+
+Then, you can use Editor component in any part of your application.
+
+```tsx
+import Editor from '@scenify/sdk'
+
+const editorConfig = {
+  clipToFrame: true,
+  scrollLimit: 0,
+}
+
+export default function MyEditor() {
+  return (
+    <div style={{ display: 'flex', flex: 1 }}>
+      <Editor config={editorConfig} />
+    </div>
+  )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout emoji="👽️">
+  It is recommended to wrap the Editor component inside a flexible container. It
+  will allow the Editor component to detect resize changes.
+</Callout>

docs/pages/hooks/meta.json

@@ -0,0 +1,4 @@
+{
+  "useEditor": "useEditor",
+  "useActiveObject": "useActiveObject"
+}

docs/pages/hooks/useActiveObject.mdx

@@ -0,0 +1,18 @@
+# useActiveObject
+
+Will receive the selecte object
+
+### Usage
+
+```tsx
+import { useActiveObject } from '@scenify/sdk'
+
+export default function App() {
+  const activeObject = useActiveObject()
+
+  useEffect(() => {
+    console.log(activeObject)
+  }, [activeObject])
+  return <>...</>
+}
+```