restructuring the storybook and add documentation

README.md

@@ -8,11 +8,10 @@ A live demo of the exhibition catalog is available here: [https://slub.github.io
 
 You might want to set your own storage backend(s) within the settings modal.
 
-## Storybook stories
+## Development Documentation
 
-The pure frontend specific component based framework, that sets the base of the exhibition catalog is documented within the Storybook.
-
-You can get a live preview of the current `develop` branch here: [https://slub.github.io/exhibition-live/storybook/](https://slub.github.io/exhibition-live/storybook/)
+Please have a look at the **[Storybook of the EDB Framework](https://slub.github.io/exhibition-live/storybook/)** for an indepth documentation of the frontend components, th cli
+and the overall architecture of the exhibition catalog and the EDB framework.
 
 # Development
 

apps/exhibition-live/components/form/EditExhibitionJSONForm.stories.tsx

@@ -59,6 +59,6 @@ export const SemanticJsonFormExhibition = () => {
   );
 };
 export default {
-  title: "form/exhibition/EditExhibitionJSONForm",
+  title: "ui/form/EditExhibitionJSONForm",
   component: NewSemanticJsonForm,
 };

apps/exhibition-live/components/form/Form.stories.tsx

@@ -2,7 +2,7 @@ import TypedForm from "../content/main/TypedForm";
 import { sladb } from "../config/formConfigs";
 
 export default {
-  title: "forms/Form",
+  title: "ui/form/Examples",
   component: TypedForm,
 };
 

apps/exhibition-live/components/form/deep-graph/DeepGraphToJSONShowcase.stories.tsx

@@ -2,7 +2,7 @@ import DeepGraphToJSONShowcase from "./DeepGraphToJSONShowcase";
 import { Meta, StoryObj } from "@storybook/react";
 
 export default {
-  title: "form/exhibition/DeepGraphToJSONShowcase",
+  title: "architecture/graph-data/DeepGraphToJSONShowcase",
   component: DeepGraphToJSONShowcase,
 } as Meta<typeof DeepGraphToJSONShowcase>;
 

apps/exhibition-live/components/form/lobid/LobidAllPropsTable.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LobidAllPropTable } from "@slub/edb-advanced-components";
 
 export default {
-  title: "presentation/lobid/LobidAllPropsTable",
+  title: "ui/view/LobidAllPropsTable",
   component: LobidAllPropTable,
 };
 

apps/exhibition-live/components/form/lobid/LobidAutocomplete.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import LobidAutocompleteSearch from "./LobidAutocompleteSearch";
 
 export default {
-  title: "form/lobid/LobidAutocomplete",
+  title: "ui/form/LobidAutocomplete",
   component: LobidAutocompleteSearch,
 };
 

apps/exhibition-live/components/form/lobid/LobidSearchTable.stories.tsx

@@ -4,7 +4,7 @@ import LobidSearchTable from "./LobidSearchTable";
 import { sladb } from "../../config/formConfigs";
 
 export default {
-  title: "form/lobid/LobidSearchTable",
+  title: "ui/form/LobidSearchTable",
   component: LobidSearchTable,
 };
 

apps/exhibition-live/components/form/show/EntityDetailCard.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { EntityDetailCard } from "@slub/edb-advanced-components";
 
 export default {
-  title: "presentation/kb/EntityDetailCard",
+  title: "ui/view/EntityDetailCard",
   component: EntityDetailCard,
 } as Meta<typeof EntityDetailCard>;
 

apps/exhibition-live/components/form/wikidata/Wikidata.stories.tsx

@@ -5,7 +5,7 @@ import WikidataThingCard from "./WikidataThingCard";
 import WikidataHumanCard from "./WikidataHumanCard";
 
 export default {
-  title: "form/wikidata/WikidataThingCard",
+  title: "ui/view/WikidataCard",
   component: WikidataThingCard,
 };
 

apps/exhibition-live/components/form/wikidata/WikidataAutocompleteInput.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import WikidataAutocompleteInput from "./WikidataAutocompleteInput";
 
 export default {
-  title: "form/wikidata/WikidataAutoCompleteInput",
+  title: "ui/form/WikidataAutoCompleteInput",
   component: WikidataAutocompleteInput,
 };
 

apps/exhibition-live/components/layout/main-layout/MainLayout.stories.tsx

@@ -7,7 +7,7 @@ import { sladb, slent } from "../../config/formConfigs";
 import { QueryClientProvider, QueryClient } from "@slub/edb-state-hooks";
 
 export default {
-  title: "layout/MainLayout",
+  title: "ui/layout/MainLayout",
   component: MainLayout,
 } as Meta<typeof MainLayout>;
 

apps/exhibition-live/components/renderer/AutocompleteURIFieldRenderer.stories.tsx

@@ -16,7 +16,7 @@ import { useCallback, useState } from "react";
 import AutocompleteURIFieldRenderer from "./AutocompleteURIFieldRenderer";
 
 export default {
-  title: "form/exhibition/AutocompleteURIFieldRenderer",
+  title: "ui/form/renderer/AutocompleteURIFieldRenderer",
   component: AutocompleteURIFieldRenderer,
 };
 

apps/exhibition-live/stories/Development.mdx

@@ -31,43 +31,6 @@ within the `@slub` namespace. It will build all packages in parallel, and contin
 The `apps` directory contains concrete applications that use the EDB Framework. These applications are built using dependencies, from the
 workspace within the `packages` and `manifestations` directory.
 
-### EDB Cli
-
-The EDB Cli is a command-line tool for accessing and mapping data according to the current EDB data model defined by the JSON Schema.
-
-To run the EDB Cli, run the following command:
-
-```bash
-bun run cli
-```
-It will show you the available subcommands and options.
-
-```
-edb-cli <subcommand>
-
-where <subcommand> can be one of:
-
-- list
-- get
-- flatImport - Import of flat table structured documents
-- import - Recursively import data from another data store
-
-For more help, try running `edb-cli <subcommand> --help`
-```
-
-#### Retrieving Data
-
-Use the list or get command to retrieve data from the EDB Cli. The list command will list all documents, while the get command will retrieve a specific data object.
-
-```bash
-bun run cli list Person -n 10
-```
-will list 10 documents of the type `Person`.
-
-```bash
-bun run cli get Person http://ontologies.slub-dresden.de/exhibition/entity#XYZ
-```
-will retrieve the document with the id `http://ontologies.slub-dresden.de/exhibition/entity#XYZ` of the type `Person`.
 
 
 ## Versioning

apps/exhibition-live/stories/DataStore.mdx → apps/exhibition-live/stories/architecture/DataStore.mdx

@@ -1,6 +1,7 @@
 import { Meta } from "@storybook/blocks";
+import {SBMermaid} from "../../.storybook/blocks/SBMermaid";
 
-<Meta title="Data Stores" />
+<Meta title="Architecture/Data Stores" />
 
 # Data Stores
 
@@ -15,6 +16,50 @@ to create the necessary indexes during the bootstrap phase.
   The reference implementation is using the SPARQL query language to provide a RDF based data store, that can be used
 from the client and the server.
 
+Dependending on the DataStore  the overall architecture will look different. A client side approach, that does not require a classical
+Backend will look like the following
+
+<SBMermaid chart={`flowchart LR
+    subgraph Browser
+    Frontend --> ds[/SPARQL-DataStore\\]
+    end
+    ds --> id1[(SPARQL-Database \n e.g. Oxigraph, Allegro, QLever )]`}></SBMermaid>
+
+For testing purpose it can even be a local in memory SPARQL Database (driven by a webworker)
+
+<SBMermaid chart={`flowchart LR
+    subgraph Browser
+    Frontend --> ds[/SPARQL-DataStore \n with local worker config\\] --> id1[(in memory Oxigraph)]
+    end
+    id1 -- export/download --> tr[Triples export.ttl or export.json]`}></SBMermaid>
+
+
+When using the Restful-DataStore within the client and the SPARQL-DataStore within the Backend the chart will
+look like the following:
+
+<SBMermaid chart={`flowchart LR
+    subgraph Browser
+    Frontend --> ds[/RESTfull-DataStore\\]
+    end
+    ds -- REST request --> rh[REST Request Handler]
+    subgraph Server
+      rh --> ds2[/SPARQL-DataStore\\]
+    end
+      ds2 --> id1[(SPARQL-Database)]`}></SBMermaid>
+
+Another example would be Prisma in combination with Postgres:
+
+
+<SBMermaid chart={`flowchart LR
+    subgraph Browser
+    Frontend --> ds[/RESTfull-DataStore\\]
+    end
+    ds -- REST request --> rh[REST Request Handler]
+    subgraph Server
+      rh --> ds2[/Prisma-DataStore\\] --> PrismaORM
+    end
+      PrismaORM --> id1[(Postgres)]`}></SBMermaid>
+
 
 ## SPARQL Data Store
 

apps/exhibition-live/stories/ProblemSolving.mdx → apps/exhibition-live/stories/development/ProblemSolving.mdx

@@ -1,3 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Development/Problem Solving" />
+
 # Problem Solving
 
 This package is dedicated to problems that can occur during development and how to solve them.

apps/exhibition-live/stories/maintenance/Cli.mdx

@@ -0,0 +1,60 @@
+import { Meta } from "@storybook/blocks";
+import {SBMermaid} from "../../.storybook/blocks/SBMermaid";
+
+<Meta title="maintenance/Cli" />
+
+
+# EDB Cli
+
+The EDB Cli is a command-line tool for accessing and mapping data according to the current EDB data model defined by the JSON Schema.
+
+The Cli will use the global configuration provided by the environment (for example `.env` file) to connect to the configured DataStore
+and what model to use.
+
+The CLI also supports a list of Import-DataStores, which can be used to import data from other data sources.
+The data flow looks as follows (in the example a Prisma DataStore is being used) :
+
+
+
+<SBMermaid chart={`flowchart TD
+    subgraph CLI
+      Argument-Parser -- CRUD --> ds2[/Main-DataStore\\] --> PrismaORM
+      ds3[/Import-DataStore 1\\] -- import --> ds2
+      ds4[/Import-DataStore 2\\] -- import --> ds2
+    end
+      CLI -- output --> jsonld[JSON-LD Documents]
+      PrismaORM --> id1[(Postgres)]`}></SBMermaid>
+
+To run the EDB Cli, run the following command:
+
+```bash
+bun run cli
+```
+It will show you the available subcommands and options.
+
+```
+edb-cli <subcommand>
+
+where <subcommand> can be one of:
+
+- list
+- get
+- flatImport - Import of flat table structured documents
+- import - Recursively import data from another data store
+
+For more help, try running `edb-cli <subcommand> --help`
+```
+
+#### Retrieving Data
+
+Use the list or get command to retrieve data from the EDB Cli. The list command will list all documents, while the get command will retrieve a specific data object.
+
+```bash
+bun run cli list Person -n 10
+```
+will list 10 documents of the type `Person`.
+
+```bash
+bun run cli get Person http://ontologies.slub-dresden.de/exhibition/entity#XYZ
+```
+will retrieve the document with the id `http://ontologies.slub-dresden.de/exhibition/entity#XYZ` of the type `Person`.

apps/exhibition-live/stories/maintenance/DataImport.mdx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks";
 <Meta title="maintenance/Import" />
 
 
-#### Importing Data
+# Importing Data from other Data Stores
 
 Two kinds of import commands are available in the EDB Cli. The  `flatImport` command will import flat table structured documents
 for example CSV files  and the `import` command will recursively import data from another data store.

apps/exhibition-live/stories/DataMapping.mdx → apps/exhibition-live/stories/maintenance/DataMapping.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Data Mapping" />
+<Meta title="Maintenance/Data Mapping" />
 
 The typical work with a domain specific database is to map data from a secondary data source into
 the primary datasource, thus making the data available for the specific use case and normalize the

packages/advanced-components/src/search/DiscoverSearchTable.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { DiscoverSearchTable } from "./DiscoverSearchTable";
 
 export default {
-  title: "form/discover/DiscoverSearchTable",
+  title: "ui/form/DiscoverSearchTable",
   component: DiscoverSearchTable,
 };
 

packages/form-renderer/basic-renderer/src/AutoIdentifierRenderer.stories.tsx

@@ -9,7 +9,7 @@ import { useCallback, useState } from "react";
 import { AutoIdentifierRenderer } from "./AutoIdentifierRenderer";
 
 export default {
-  title: "form/exhibition/AutoIdentifierRenderer",
+  title: "ui/form/renderer/AutoIdentifierRenderer",
   component: AutoIdentifierRenderer,
 };
 

packages/form-renderer/basic-renderer/src/special-date/AdbSpecialDate.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { AdbSpecialDateFormGroup } from "./AdbSpecialDateFormGroup";
 
 export default {
-  title: "form/exhibition/AdbSpecialDateFormGroup",
+  title: "ui/form/renderer/AdbSpecialDateFormGroup",
   component: AdbSpecialDateFormGroup,
   argTypes: {
     data: { control: false },

packages/form-renderer/layout-renderer/src/MaterialCustomOnyOfRenderer.stories.tsx

@@ -9,7 +9,7 @@ import { MaterialCustomAnyOfRenderer } from "./MaterialCustomAnyOfRenderer";
 import { materialCustomAnyOfControlTester } from "./materialCustomAnyOfControlTester";
 
 export default {
-  title: "form/exhibition/MaterialCustomAnyOfRenderer",
+  title: "ui/form/renderer/MaterialCustomAnyOfRenderer",
   component: MaterialCustomAnyOfRenderer,
 };
 

packages/form-renderer/linked-data-renderer/src/SemanticJSONFormNoOps.stories.tsx

@@ -9,7 +9,7 @@ const sladb = namespace("http://ontologies.slub-dresden.de/exhibition#");
 const slent = namespace("http://ontologies.slub-dresden.de/exhibition/entity#");
 
 export default {
-  title: "form/exhibition/SemanticJsonFormNoOps",
+  title: "ui/form/SemanticJsonForm",
   component: SemanticJsonFormNoOps,
 } as Meta<typeof SemanticJsonFormNoOps>;
 

packages/form-renderer/markdown-renderer/src/MarkdownTextFieldRenderer.stories.tsx

@@ -10,7 +10,7 @@ import { materialCustomAnyOfControlTester } from "@slub/edb-layout-renderer";
 import { MarkdownTextFieldRenderer } from "./MarkdownTextFieldRenderer";
 
 export default {
-  title: "form/exhibition/MarkdownTextFieldRenderer",
+  title: "ui/form/renderer/MarkdownTextFieldRenderer",
   component: MarkdownTextFieldRenderer,
 };