organized

src/lib/beanbagdb/BeanBagDB.stories.svelte

@@ -0,0 +1,32 @@
+<script context="module">
+  import {Story} from '@storybook/addon-svelte-csf'
+import RecordSearch from './RecordSearch.svelte';
+import Record from './Record.svelte';
+import { getNewDB } from "./db.js";
+  export const meta = {
+    title : "BeanBagDB",
+  }
+
+  let data = {}, schema = {}; // Initialize schema and data with default values
+
+  // Load schema asynchronously
+  (async () => {
+    let BBDB = getNewDB({
+      "name": "test_story",
+      "encryption_key": "qwerty3232323233uiop123456"
+    });
+    await BBDB.ready();
+    let sample = await BBDB.get("schema", { name: "schema" });
+    schema = sample;
+    console.log(schema);
+  })();
+</script>
+
+<Story name="Record Search 1">
+  <RecordSearch></RecordSearch>
+</Story>
+
+
+<Story name="Schema record">
+  <Record {schema} {data}></Record>
+</Story>

src/lib/beanbagdb/BeanBagDB.svelte

@@ -0,0 +1 @@
+This is just a place holder component

src/lib/beanbagdb_records/Record.stories.svelte → src/lib/beanbagdb/Record.stories.svelte

@@ -1,7 +1,7 @@
 <script context="module">
   import { Story } from '@storybook/addon-svelte-csf';
   import Record from './Record.svelte';
-  import { getNewDB } from "../db.js";
+  import { getNewDB } from "./db.js";
 
   export const meta = {
     title: "Record",
@@ -23,6 +23,6 @@
   })();
 </script>
 
-<Story name="Basic">
+<Story name="Schema record1">
   <Record {schema} {data}></Record>
 </Story>

src/lib/beanbagdb_records/Record.svelte → src/lib/beanbagdb/Record.svelte

@@ -2,12 +2,12 @@
   import "bootstrap/dist/css/bootstrap.min.css";
   import "$lib/default.style.css"
   import { onMount } from "svelte";
-  import KeyRecord from "./KeyRecord.svelte";
-  import MediaRecord from "./MediaRecord.svelte";
-  import RecordMetadata from "./RecordMetadata.svelte";
-  import SchemaRecord from "./SchemaRecord.svelte";
-  import SettingRecord from "./SettingRecord.svelte";
-  import JsonEditor from "$lib/JsonEditor.svelte";
+  import KeyRecord from "../beanbagdb_records/KeyRecord.svelte";
+  import MediaRecord from "../beanbagdb_records/MediaRecord.svelte";
+  import RecordMetadata from "../beanbagdb_records/RecordMetadata.svelte";
+  import SchemaRecord from "../beanbagdb_records/SchemaRecord.svelte";
+  import SettingRecord from "../beanbagdb_records/SettingRecord.svelte";
+  import JsonEditor from "$lib/utils/JsonEditor.svelte";
   export let data;
   export let schema = {};
   let Loaded = false;

src/lib/beanbagdb_records/MediaRecord.svelte

@@ -1 +0,0 @@
-Media record 

src/lib/beanbagdb_records/SchemaEditor.svelte

@@ -1,7 +1,7 @@
 <script>
-  import SimpleEditor from "$lib/SimpleEditor.svelte";
+  import SimpleEditor from "$lib/utils/SimpleEditor.svelte";
   import { onMount } from "svelte";
-  import JsonEditor from "$lib/JsonEditor.svelte";
+  import JsonEditor from "$lib/utils/JsonEditor.svelte";
   
   export let schema_object = {};
   let isValidJson = false;

src/lib/beanbagdb_records/SchemaRecord.svelte

@@ -1,14 +1,13 @@
 <script>
   import "bootstrap/dist/css/bootstrap.min.css";
   import { onMount } from "svelte";
-  import JsonEditor from "$lib/JsonEditor.svelte";
+  import JsonEditor from "$lib/utils/JsonEditor.svelte";
   import SchemaEditor from "./SchemaEditor.svelte";
   export let data;
   export let schema = {};
   let Loaded = false;
   let Error = "";
-  let system_schemas = {
-  }
+  let system_schemas = {}
   const load_record = () => {
     console.log("Loading record...");
     Error = "";

src/lib/index.js

@@ -3,9 +3,9 @@
 // Export each component individually as named exports
 
 
-export {default as Workspace} from "./WorkSpace.svelte"
+export {default as Workspace} from "./ui/WorkSpace.svelte"
 
-export {default as Record} from "./beanbagdb_records/Record.svelte"
+export {default as Record} from "./beanbagdb/Record.svelte"
 export {default as RecordSearch} from "./beanbagdb/RecordSearch.svelte"
 export {default as Schema} from "./beanbagdb/Schema.svelte"
 

src/lib/WorkSpace.svelte → src/lib/ui/WorkSpace.svelte

@@ -2,12 +2,12 @@
   import 'bootstrap/dist/css/bootstrap.min.css';
   import { onMount } from "svelte";
   import {BeanBagDB} from "beanbagdb"
-  import {getNewDB} from "./db.js"
+  import {getNewDB} from "../beanbagdb/db.js"
 
-  import HelpDoc from "./helppage/HelpDoc.svelte";
-  import RecordSearch from "./beanbagdb/RecordSearch.svelte";
-  import Record from "./beanbagdb_records/Record.svelte";
-  import DbSetting from './beanbagdb_settings/DBSetting.svelte';
+  import HelpDoc from "../helppage/HelpDoc.svelte";
+  import RecordSearch from "../beanbagdb/RecordSearch.svelte";
+  import Record from "../beanbagdb/Record.svelte";
+  import DbSetting from '../beanbagdb_settings/DBSetting.svelte';
 
   export let db ;
   export let BBDB;

src/lib/utils/Utilities.stories.svelte

@@ -0,0 +1,91 @@
+<script context="module">
+  // import {Story} from '@storybook/addon-svelte-csf'
+  import ImageEditor from './ImageEditor.svelte';
+  import JsonEditor from './JsonEditor.svelte';
+
+  export const meta = {
+    title : "Utility Components",
+    //component : ImageEditor
+  }
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+  let test_image = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/irp/wAAAABJRU5ErkJggg==`
+
+
+  let data = {
+    "name":"John Doe",
+    "city":"Erlangen",
+    "country":"Germany",
+    "age":100,
+    "is_alien":true
+  }
+
+  let schema = {
+    title:"Living being",
+    properties : {
+      "name":{
+        "type":"string"
+      },
+      "city":{
+        "type":"string"
+      },
+      "country":{
+        "type":"string"
+      },
+      "age":{
+        type:"number"
+      },
+      "is_alien":{
+        type:"boolean"
+      }
+    
+    }
+  }
+
+  let obj_obj = {
+  "type": "object",
+  "patternProperties": {
+    "^.*$": {
+      "type": "object",
+      "properties": {
+        "text": {
+          "type": "string"
+        }
+      },
+      "required": ["text"]
+    }
+  },
+  "additionalProperties": true
+}
+
+
+</script>
+
+
+<Story name="JSONSchema Editor - missing schema">
+  <JsonEditor data={data}></JsonEditor>
+</Story>
+
+<Story name="JSONSchema Editor - missing data">
+  Shows a blank form based on the schema : 
+  <JsonEditor schema={schema}></JsonEditor>
+</Story>
+
+<Story name="JSONSchema Editor - Simple">
+  <JsonEditor data={data} schema={schema}></JsonEditor>
+</Story>
+
+<Story name="JSONSchema Editor -  Object of object">
+  <JsonEditor data={{"t":{"text":"hahaha"}}}  schema={obj_obj}></JsonEditor>
+</Story>
+
+
+<Story name="Image Editor 1">
+  <ImageEditor bind:base64Image={test_image} />
+  <code>
+    {test_image}
+  </code>
+</Story>
+

src/routes/+page.svelte

@@ -1,4 +1,4 @@
 <script>
-import WorkSpace from "$lib/WorkSpace.stories.svelte";
+import WorkSpace from "$lib/ui/WorkSpace.stories.svelte";
 </script>
 <WorkSpace></WorkSpace>