move to docs package

.gitignore

@@ -4,3 +4,4 @@ dist
 dist-ssr
 *.local
 tags
+yarn-error.log

package.json

@@ -2,23 +2,8 @@
   "name": "schlechtenburg",
   "version": "0.0.0",
   "license": "GPL-3.0-or-later",
-  "scripts": {
-    "dev": "concurrently 'vuedx-typecheck --no-pretty --watch ./src' 'vite'",
-    "build": "vuedx-typecheck --no-pretty ./src && vite build"
-  },
-  "dependencies": {
-    "lodash-es": "^4.17.21",
-    "vue": "^3.0.7"
-  },
+  "scripts": {},
   "devDependencies": {
-    "@vitejs/plugin-vue-jsx": "^1.1.2",
-    "@vue/compiler-sfc": "^3.0.7",
-    "@vuedx/typecheck": "^0.6.3",
-    "@vuedx/typescript-plugin-vue": "^0.6.3",
-    "concurrently": "^6.0.0",
-    "lerna": "^3.22.1",
-    "sass": "^1.32.8",
-    "typescript": "^4.2.3",
-    "vite": "^2.0.5"
+    "lerna": "^3.22.1"
   }
 }

packages/core/lib/components/Block.tsx

@@ -8,15 +8,11 @@ import {
 } from 'vue';
 import { BlockData } from '../types';
 import { SbMode } from '../mode';
-import { useResizeObserver, SymBlockDimensions } from '../use-resize-observer';
-import { useActivation } from '../use-activation';
 import { useBlockTree } from '../use-block-tree';
 import { useDynamicBlocks } from '../use-dynamic-blocks';
 
 import SbMissingBlock from './MissingBlock';
 
-import './Block.scss';
-
 export const SbBlock = defineComponent({
   name: 'sb-block',
 
@@ -40,17 +36,7 @@ export const SbBlock = defineComponent({
   setup(props, context) {
     const el: Ref<null|HTMLElement> = ref(null);
     const { mode, getBlock } = useDynamicBlocks();
-    const {
-      isActive,
-      activate,
-    } = useActivation(props.block.id);
-    const classes = computed(() => ({
-      'sb-block': true,
-      'sb-block_active': isActive.value,
-    }));
-
-    const { triggerSizeCalculation } = useResizeObserver(el, SymBlockDimensions);
-    watch(() => props.block.data, triggerSizeCalculation);
+    const classes = computed(() => ({ 'sb-block': true }));
 
     const { register } = useBlockTree();
     register(props.block);
@@ -88,8 +74,6 @@ export const SbBlock = defineComponent({
         ref={el}
         class={classes.value}
       >
-        <div class="sb-block__edit-cover"></div>
-        {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
         <BlockComponent
           data={props.block.data}
           blockId={props.block.id}
@@ -103,7 +87,6 @@ export const SbBlock = defineComponent({
           {...{
             onClick: ($event: MouseEvent) => {
               $event.stopPropagation();
-              activate();
             },
             ...context.attrs,
           }}

packages/core/lib/components/Main.tsx

@@ -21,14 +21,9 @@ import {
   SymBlockTreeUnregister,
 } from '../use-block-tree';
 import { SymEditorDimensions, useResizeObserver } from '../use-resize-observer';
-import { SymActiveBlock } from '../use-activation';
 
-import { SbMainMenu } from './MainMenu';
-import { SbBlockToolbar } from './BlockToolbar';
 import { SbBlock } from './Block';
 
-import './Main.scss';
-
 export const SbMain = defineComponent({
   name: 'sb-main',
 
@@ -60,9 +55,6 @@ export const SbMain = defineComponent({
     const mode = ref(props.mode);
     provide(Mode, mode);
 
-    const activeBlock = ref(null);
-    provide(SymActiveBlock, activeBlock);
-
     const blockTree: Ref<TreeNode|null> = ref(null);
     provide(SymBlockTree, blockTree);
     provide(SymBlockTreeRegister, (block: TreeNode) => { blockTree.value = block; });
@@ -82,14 +74,6 @@ export const SbMain = defineComponent({
         class="sb-main"
         ref={el}
       >
-        {
-          mode.value === SbMode.Edit
-          ? <>
-            <SbMainMenu block={props.block} />
-            <SbBlockToolbar />
-          </>
-          : null
-        }
         <SbBlock
           block={props.block}
           onUpdate={props.onUpdate}

packages/docs/.gitignore

@@ -0,0 +1 @@
+/dist

packages/docs/README.md

@@ -0,0 +1,11 @@
+# `@schlechtenburg/docs`
+
+> TODO: description
+
+## Usage
+
+```
+const docs = require('@schlechtenburg/docs');
+
+// TODO: DEMONSTRATE API
+```

packages/docs/__tests__/docs.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const docs = require('..');
+
+describe('@schlechtenburg/docs', () => {
+    it('needs tests');
+});

packages/docs/index.html

@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
+  <script type="module" src="/lib/main.ts"></script>
 </body>
 </html>

packages/docs/lib/App.tsx

@@ -0,0 +1,41 @@
+import {
+  onBeforeMount,
+  defineComponent,
+  reactive,
+} from 'vue';
+
+import { SbMain, BlockData, SbMode } from '@schlechtenburg/core';
+
+export default defineComponent({
+  name: 'App',
+
+  setup() {
+    const block: BlockData<any> = reactive({
+      name: 'none',
+      id: '0',
+      data: null,
+    });
+
+    onBeforeMount(async () => {
+      const res = await fetch('./initial-data.json');
+      const data = await res.json();
+      block.name = data.name;
+      block.id = data.id;
+      block.data = data.data;
+    });
+
+    return () => {
+      return <div id="app">
+        <SbMain
+          block={block}
+          onUpdate={(newBlock: BlockData<any>) => {
+            block.data = newBlock.data;
+          }}
+          customBlocks={[ ]}
+          key="edit"
+          mode={SbMode.Edit}
+        />
+      </div>;
+    };
+  },
+});

packages/docs/lib/docs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = docs;
+
+function docs() {
+    // TODO
+}

packages/docs/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@schlechtenburg/docs",
+  "version": "0.0.0",
+  "description": "> TODO: description",
+  "author": "Benjamin Bädorf <hello@benjaminbaedorf.eu>",
+  "homepage": "",
+  "license": "GPL-3.0-or-later",
+  "main": "lib/index.ts",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
+  },
+  "scripts": {
+    "dev": "concurrently 'vuedx-typecheck --no-pretty --watch ./lib' 'vite'",
+    "build": "vuedx-typecheck --no-pretty ./lib && vite build"
+  },
+  "dependencies": {
+    "@schlechtenburg/core": "^0.0.0",
+    "@schlechtenburg/heading": "^0.0.0",
+    "@schlechtenburg/image": "^0.0.0",
+    "@schlechtenburg/layout": "^0.0.0",
+    "@schlechtenburg/paragraph": "^0.0.0",
+    "lodash-es": "^4.17.21",
+    "vue": "^3.0.7"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue-jsx": "^1.1.2",
+    "@vue/compiler-sfc": "^3.0.7",
+    "@vuedx/typecheck": "^0.6.3",
+    "@vuedx/typescript-plugin-vue": "^0.6.3",
+    "concurrently": "^6.0.0",
+    "sass": "^1.32.8",
+    "typescript": "^4.2.3",
+    "vite": "^2.0.5"
+  }
+}

packages/docs/vite.config.js

@@ -0,0 +1,26 @@
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+export default {
+  base: './',
+  resolve: {
+    alias: {
+      '@schlechtenburg/core': '../core/lib/index.ts',
+      '@schlechtenburg/paragraph': '../paragraph/lib/index.ts',
+      '@schlechtenburg/heading': '../heading/lib/index.ts',
+      '@schlechtenburg/image': '../image/lib/index.ts',
+      '@schlechtenburg/layout': '../layout/lib/index.ts',
+    },
+  },
+  plugins: [
+    vueJsx({}),
+  ],
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment',
+  },
+  build: {
+    minify: false,
+    sourcemap: true,
+    outDir: 'dist',
+  },
+};

src/App.tsx

@@ -1,87 +0,0 @@
-import {
-  onBeforeMount,
-  computed,
-  defineComponent,
-  reactive,
-  ref,
-} from 'vue';
-
-import { SbMain, BlockData, SbMode } from '../packages/core/lib';
-
-import SbLayout from '../packages/layout/lib';
-import SbHeading from '../packages/heading/lib';
-import SbParagraph from '../packages/paragraph/lib';
-import SbImage from '../packages/image/lib';
-
-import './App.scss';
-
-export default defineComponent({
-  name: 'App',
-
-  setup() {
-    const activeTab = ref('edit');
-    const block: BlockData<any> = reactive({
-      name: 'none',
-      id: '0',
-      data: null,
-    });
-
-    onBeforeMount(async () => {
-      const res = await fetch('./initial-data.json');
-      const data = await res.json();
-      block.name = data.name;
-      block.id = data.id;
-      block.data = data.data;
-    });
-
-    const displayedElement = computed(() => {
-      switch (activeTab.value) {
-        case SbMode.Edit:
-          return <SbMain
-            block={block}
-            onUpdate={(newBlock: BlockData<any>) => {
-              block.data = newBlock.data;
-            }}
-            customBlocks={[
-              SbLayout,
-              SbHeading,
-              SbImage,
-              SbParagraph,
-            ]}
-            key="edit"
-            mode={SbMode.Edit}
-          />;
-        case SbMode.Display:
-          return <SbMain
-            block={block}
-            customBlocks={[
-              SbLayout,
-              SbHeading,
-              SbImage,
-              SbParagraph,
-            ]}
-            key="display"
-            mode={SbMode.Display}
-          />;
-        case 'data':
-          return <pre><code>{ JSON.stringify(block, null, 2) }</code></pre>;
-      }
-    });
-
-    return () => {
-      return <div id="app">
-        <select
-          value={activeTab.value}
-          onChange={($event: Event) => {
-            activeTab.value = ($event.target as HTMLSelectElement).value;
-          }}
-        >
-          <option>edit</option>
-          <option>display</option>
-          <option>data</option>
-        </select>
-        {displayedElement.value}
-      </div>;
-    };
-  },
-});

vite.config.js

@@ -1,17 +0,0 @@
-import vueJsx from '@vitejs/plugin-vue-jsx';
-
-export default {
-  base: './',
-  plugins: [
-    vueJsx({}),
-  ],
-  esbuild: {
-    jsxFactory: 'h',
-    jsxFragment: 'Fragment',
-  },
-  build: {
-    minify: false,
-    sourcemap: true,
-    outDir: 'dist',
-  },
-};