@arpproject/recrate 0.1.2

package/src/app/EmbeddedComponent.tsx

@@ -0,0 +1,432 @@
+import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react';
+import DescriboCrateBuilder from '../crate-builder/Shell';
+import { Lookup } from './lookup';
+import { Select, Button, Switch, Form, Space } from 'antd';
+import "./override-styles.css"
+
+// Import example crates
+import emptyCrate from '../examples/item/empty/ro-crate-metadata.json';
+import complexCollectionCrate from '../examples/item/complex-collection/ro-crate-metadata.json';
+import complexItemCrate from '../examples/item/complex-item/ro-crate-metadata.json';
+import largeCrate from '../examples/item/large-crate/ro-crate-metadata.json';
+import bigCollectionCrate from '../examples/item/ridiculously-big-collection/ro-crate-metadata.json';
+import relationshipActionCrate from '../examples/item/item-with-relationship-and-action/ro-crate-metadata.json';
+import multipleTypesCrate from '../examples/item/multiple-types/ro-crate-metadata.json';
+import crateFile9 from "../examples/item/crate-with-language.json";
+
+// Import example profiles
+import primitiveProfile from '../examples/profile/profile-with-all-primitives.json';
+import primitiveGroupsProfile from '../examples/profile/profile-with-all-primitives-and-groups.json';
+import multipleTypesProfile from '../examples/profile/profile-to-test-multiple-types.json';
+import resolveProfile from '../examples/profile/profile-with-resolve.json';
+import nyingarnProfile from '../examples/profile/nyingarn-item-profile.json';
+import vocabularyProfile from '../examples/profile/vocabulary-creation-profile.json';
+import constraintsProfile from '../examples/profile/profile-with-constraints.json';
+import inverseAssociationsProfile from '../examples/profile/profile-to-test-inverse-associations.json';
+import profile11 from "../examples/profile/aroma.profile.json";
+import profile12 from "../examples/profile/aroma.complex.profile.json";
+import { minWidth } from '@mui/system';
+
+// Define types for our examples
+interface CrateExample {
+  name: string;
+  value: any;
+}
+
+interface ProfileExample {
+  name: string;
+  value: any;
+}
+
+interface LanguageOption {
+  name: string;
+  value: string;
+}
+
+const EmbeddedComponent: React.FC = () => {
+  // Create a ref to access the Shell component methods
+  const shellComponentRef = useRef<any>(null);
+
+  // Define state
+  const [data, setData] = useState({
+    loading: false,
+    select: {
+      crate: '' as string | undefined,
+      profile: '' as string | undefined,
+    },
+    readonly: false,
+    crates: [
+      { name: "Empty", value: emptyCrate },
+      { name: "Complex Collection", value: complexCollectionCrate },
+      { name: "Complex Item", value: complexItemCrate },
+      { name: "Large Crate", value: largeCrate },
+      { name: "Big Collection", value: bigCollectionCrate },
+      { name: "Item with Relationship", value: relationshipActionCrate },
+      { name: "Multiple Types", value: multipleTypesCrate },
+      { name: "Crate with language", value: crateFile9 }
+    ] as CrateExample[],
+    profiles: [
+      { name: primitiveProfile.metadata.name, value: primitiveProfile },
+      { name: primitiveGroupsProfile.metadata.name, value: primitiveGroupsProfile },
+      { name: multipleTypesProfile.metadata.name, value: multipleTypesProfile },
+      { name: resolveProfile.metadata.name, value: resolveProfile },
+      { name: nyingarnProfile.metadata.name, value: nyingarnProfile },
+      { name: vocabularyProfile.metadata.name, value: vocabularyProfile },
+      { name: constraintsProfile.metadata.name, value: constraintsProfile },
+      { name: inverseAssociationsProfile.metadata.name, value: inverseAssociationsProfile },
+      { name: profile11.metadata.name, value: profile11 },
+      { name: profile12.metadata.name, value: profile12 }
+    ] as ProfileExample[],
+    languages: [
+      { name: "English", value: "en" },
+      { name: "Magyar", value: "hu" },
+    ] as LanguageOption[],
+    selectedCrate: undefined as any,
+    selectedProfile: undefined as any,
+    configuration: {
+      language: "en",
+      enableContextEditor: true,
+      enableCratePreview: true,
+      enableBrowseEntities: true,
+      enableTemplateSave: true,
+      enableReverseLinkBrowser: false,
+      enableUrlMarkup: true,
+      purgeUnlinkedEntities: true,
+      enableEntityTimestamps: false,
+      readonly: false,
+      tabLocation: "left" as "left" | "top" | "right" | "bottom",
+      showControls: true,
+    },
+  });
+
+  // Setup the lookup service
+  const lookup = new Lookup();
+
+  // Functions
+  const setCrate = (name: string | undefined) => {
+    const crate = name ? data.crates.filter((c) => c.name === name)[0]?.value : undefined;
+    setData(prev => ({
+      ...prev,
+      selectedCrate: crate,
+      select: {
+        ...prev.select,
+        crate: name
+      }
+    }));
+  };
+
+  const setProfile = (name: string | undefined) => {
+    const profile = name ? data.profiles.filter((p) => p.name === name)[0]?.value : undefined;
+    setData(prev => ({
+      ...prev,
+      selectedProfile: profile,
+      select: {
+        ...prev.select,
+        profile: name
+      }
+    }));
+    //console.log("Profile changed to: ", name, profile);
+  };
+
+  const handleCrateChange = (value: string) => {
+    //console.log("Crate changed to: ", event.target.value);
+    setCrate(value);
+  };
+
+  const handleProfileChange = (value: string) => {
+    setProfile(value);
+  };
+
+  const handleConfigChange = (key: string, value: any) => {
+    //console.log("Config changed to: ", key, value);
+    setData(prev => ({
+      ...prev,
+      configuration: {
+        ...prev.configuration,
+        [key]: value
+      }
+    }));
+  };
+
+  // Button action handlers
+  const add = () => {
+    if (!shellComponentRef.current) return;
+
+    // Get crate manager from the shell component
+    const shell = shellComponentRef.current;
+    const cm = shell.cm;
+
+    if (!cm) return;
+
+    cm.setProperty({ id: "./", property: "author", value: 1 });
+    cm.setProperty({ id: "./", property: "babies", value: 1 });
+    const e = cm.addEntity({ "@id": "#person", "@type": "Person", name: "a person" });
+    cm.linkEntity({
+      id: "./",
+      property: "contributor",
+      value: { "@id": e["@id"] },
+    });
+
+    // Call shell's refresh method
+    if (typeof shell.refresh === 'function') {
+      shell.refresh();
+    }
+  };
+
+  const setTab = () => {
+    if (!shellComponentRef.current) return;
+    const shell = shellComponentRef.current;
+
+    if (typeof shell.setTab === 'function') {
+      shell.setTab("numbers");
+    }
+  };
+
+  const setEntity = () => {
+    if (!shellComponentRef.current) return;
+    const shell = shellComponentRef.current;
+
+    if (typeof shell.setCurrentEntity === 'function') {
+      shell.setCurrentEntity({ id: "#person" });
+    }
+  };
+
+  const toggleReverseLinkBrowser = () => {
+    if (!shellComponentRef.current) return;
+    const shell = shellComponentRef.current;
+
+    if (typeof shell.toggleReverseLinkBrowser === 'function') {
+      shell.toggleReverseLinkBrowser();
+    }
+  };
+
+  const back = () => {
+    if (!shellComponentRef.current) return;
+    const shell = shellComponentRef.current;
+
+    if (shell.state?.editorState?.back) {
+      shell.state.editorState.back();
+    }
+  };
+
+  const forward = () => {
+    if (!shellComponentRef.current) return;
+    const shell = shellComponentRef.current;
+
+    if (shell.state?.editorState?.forward) {
+      shell.state.editorState.forward();
+    }
+  };
+
+  return (
+    <div className="flex flex-row space-x-2 w-screen">
+      <div className="flex flex-col space-y-2 w-4/6">
+        <div className="flex flex-row space-x-2">
+          <Select
+            size='middle'
+            value={data.select.crate || undefined}
+            onChange={handleCrateChange}
+            placeholder="Select a crate"
+            style={{ width: '100%' }}
+          >
+            {data.crates.map((crate) => (
+              <Select.Option key={crate.name} value={crate.name}>
+                {crate.name}
+              </Select.Option>
+            ))}
+          </Select>
+
+          <Select
+            size='middle'
+            value={data.select.profile || undefined}
+            onChange={handleProfileChange}
+            placeholder="Select a profile"
+            style={{ width: '100%' }}
+          >
+            {data.profiles.map((profile) => (
+              <Select.Option key={profile.name} value={profile.name}>
+                {profile.name}
+              </Select.Option>
+            ))}
+          </Select>
+
+          <Button
+            type="default"
+            size='middle'
+            onClick={add}
+            style={{
+              whiteSpace: 'nowrap',
+              minWidth: 'fit-content'
+            }}>Add</Button>
+          <Button
+            type="default"
+            size='middle'
+            onClick={setTab}
+            style={{
+              whiteSpace: 'nowrap',
+              minWidth: 'fit-content'
+            }}>Set Tab</Button>
+          <Button
+            type="default"
+            size='middle'
+            onClick={setEntity}
+            style={{
+              whiteSpace: 'nowrap',
+              minWidth: 'fit-content'
+            }}>Set Entity</Button>
+          <Button
+            type="default"
+            size='middle'
+            onClick={toggleReverseLinkBrowser}
+            style={{
+              whiteSpace: 'nowrap',
+              minWidth: 'fit-content'
+            }}>Toggle Links</Button>
+          <Button
+            type="default"
+            size='middle'
+            onClick={back}
+            style={{
+              whiteSpace: 'nowrap',
+              minWidth: 'fit-content'
+            }}>{"<"}</Button>
+          <Button
+            type="default"
+            size='middle'
+            onClick={forward}
+            style={{
+              whiteSpace: 'nowrap',
+              minWidth: 'fit-content'
+            }}>{">"}</Button>
+        </div>
+
+        <div className="mt-2">
+          {data.selectedCrate && (
+            <DescriboCrateBuilder
+              crate={data.selectedCrate}
+              profile={data.selectedProfile}
+              lookup={lookup}
+              readonly={data.configuration.readonly}
+              enableContextEditor={data.configuration.enableContextEditor}
+              enableCratePreview={data.configuration.enableCratePreview}
+              enableBrowseEntities={data.configuration.enableBrowseEntities}
+              enableTemplateSave={data.configuration.enableTemplateSave}
+              enableEntityTimestamps={data.configuration.enableEntityTimestamps}
+              enableReverseLinkBrowser={data.configuration.enableReverseLinkBrowser}
+              purgeUnlinkedEntities={data.configuration.purgeUnlinkedEntities}
+              enableUrlMarkup={data.configuration.enableUrlMarkup}
+              webComponent={false}
+              language={data.configuration.language}
+              tabLocation={data.configuration.tabLocation}
+              showControls={data.configuration.showControls}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-col w-2/6 p-8 border-slate-200 border-2">
+        <div className="mb-4">Component Controls</div>
+        <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
+          <Form.Item label="Language">
+            <Select
+              value={data.configuration.language}
+              onChange={(value) => handleConfigChange("language", value)}
+              style={{ width: '100%' }}
+            >
+              {data.languages.map((lang) => (
+                <Select.Option key={lang.value} value={lang.value}>
+                  {lang.name}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Form.Item label="Tab Location">
+            <Select
+              value={data.configuration.tabLocation}
+              onChange={(value) => handleConfigChange("tabLocation", value)}
+              style={{ width: '100%' }}
+            >
+              <Select.Option value="left">Tabs: left</Select.Option>
+              <Select.Option value="top">Tabs: top</Select.Option>
+              <Select.Option value="right">Tabs: right</Select.Option>
+              <Select.Option value="bottom">Tabs: bottom</Select.Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item label="Set to readonly">
+            <Switch
+              checked={data.configuration.readonly}
+              onChange={(checked) => handleConfigChange('readonly', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Enable component controls">
+            <Switch
+              checked={data.configuration.showControls}
+              onChange={(checked) => handleConfigChange('showControls', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Enable Context Editor">
+            <Switch
+              checked={data.configuration.enableContextEditor}
+              onChange={(checked) => handleConfigChange('enableContextEditor', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Enable Crate Preview">
+            <Switch
+              checked={data.configuration.enableCratePreview}
+              onChange={(checked) => handleConfigChange('enableCratePreview', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Enable Browse Entities">
+            <Switch
+              checked={data.configuration.enableBrowseEntities}
+              onChange={(checked) => handleConfigChange('enableBrowseEntities', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Enable Reverse Link Browser">
+            <Switch
+              checked={data.configuration.enableReverseLinkBrowser}
+              onChange={(checked) => handleConfigChange('enableReverseLinkBrowser', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Enable Template Save">
+            <Switch
+              checked={data.configuration.enableTemplateSave}
+              onChange={(checked) => handleConfigChange('enableTemplateSave', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Enable URL Markup">
+            <Switch
+              checked={data.configuration.enableUrlMarkup}
+              onChange={(checked) => handleConfigChange('enableUrlMarkup', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Purge Unlinked Entities">
+            <Switch
+              checked={data.configuration.purgeUnlinkedEntities}
+              onChange={(checked) => handleConfigChange('purgeUnlinkedEntities', checked)}
+            />
+          </Form.Item>
+
+          <Form.Item label="Enable Entity Timestamps">
+            <Switch
+              checked={data.configuration.enableEntityTimestamps}
+              onChange={(checked) => handleConfigChange('enableEntityTimestamps', checked)}
+            />
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default EmbeddedComponent;

package/src/app/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <link rel="icon" href="favicon.ico" />
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+    <body>
+        <noscript>
+            <strong
+                >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly
+                without JavaScript enabled. Please enable it to continue.</strong
+            >
+        </noscript>
+        <div id="app"></div>
+        <!-- built files will be auto injected -->
+    </body>
+</html>

package/src/app/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '../crate-builder/component.css';
+import '../crate-builder/tailwind.css';
+import App from './App';
+import { I18nextProvider } from 'react-i18next';
+import i18next from '../crate-builder/i18n';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <I18nextProvider i18n={i18next}>
+      <App />
+    </I18nextProvider>
+  </React.StrictMode>
+);
+

package/src/app/lookup.ts

@@ -0,0 +1,141 @@
+export class Lookup {
+  constructor() {}
+  /**
+   * This method is used to lookup entities created by users and saved for their
+   *  own personal use. How you implement that, if you do at all, is up to you.
+   *  In desktop for example, when the user saves a template, that entity gets stored
+   *  in their local database.
+   *
+   * @param {Object} params
+   * @param {Array | String} params.type: the type array or type string of the entity being looked up
+   * @param {String} params.queryString: the query string typed in by the user
+   * @param {Number} params.limit=5: the number of matches to return - default = 5
+   *
+   * @returns {Object} { documents: [...]} - Object with documents array
+   */
+  async entityTemplates({ type = undefined, queryString = undefined, limit = 5 }) {
+      // code to lookup entity templates in *YOUR* system
+      //
+      // type: the @type of template to lookup
+      // queryString: what the user is looking for. You probably want to look in the
+      //   @id and name fields at least
+      // limit: number of matches to return
+      //
+      // return array of json-ld objects matching the query:
+      // ---------------------------------------------------
+      // let documents = [{json-ld object}, {json-ld object}, ...]
+      // return { documents }
+      return { documents: [] };
+  }
+
+  /**
+   *
+   * This method is used to lookup data packs. Data packs are JSON-LD snippets that
+   *  have been created by an expert/s and can be trusted as being valid and correct.
+   *
+   * @param {Object} params
+   * @param {Object} params.elasticQuery: a query object to be used against an elastic search server
+   * @param {Array | String} params.type: the type array or type string of the entity being looked up
+   * @param {String} params.queryString: the query string typed in by the user
+   * @param {Array | String} params.fields: the fields to search against in the data pack json objects
+   * @param {Array | String} params.datapack: the datapack or packs with the data to be used for this entity type
+   * @param {Number} params.limit=10: the number of matches to return - default = 10
+   *
+   * @returns {Object} { documents: [...]} - Object with documents array
+   */
+  async dataPacks({
+      elasticQuery = undefined,
+      type = undefined,
+      queryString = undefined,
+      fields = undefined,
+      datapacks = undefined,
+      limit = 10,
+  }) {
+      if (elasticQuery) {
+          // query: the elastic query to perform
+          //
+          // The crate builder component will pass a fully formed elastic search query to this method
+          // It's up to you to get it to the elastic search server. In this example
+          //   it's hardcoded in the _execute method
+          const documents = await this._execute({ query: elasticQuery, indexPath: "data" });
+          return { documents };
+      } else {
+          // do the lookup yourself in whatever way you want
+          //
+          // the value of 'datapack' will be whatever the profile author defined so
+          //  that's your datasource. How you implement that lookup is totally
+          //  up to you.
+          //
+          // return array of json-ld objects matching the query:
+          // ---------------------------------------------------
+          // let documents = [{json-ld object}, {json-ld object}, ...]
+          // return { documents }
+          return { documents: [] };
+      }
+  }
+
+  /**
+   * This method is used to lookup user created entities in, for example, a repository. Imagine
+   *  a user creates an entity of type Country that overlaps with a Country in the data pack (same @id for both).
+   *  The user created Country may not be correct but if it has the same @id and is stored
+   *  in the same index, it will overrwrite the datapack version which is valid and correct.
+   *
+   * So, by separating out general entity lookups from data packs, you can store data in a way
+   *  where user created stuff doesn't trample known good content.
+   *
+   * @param {Object} params
+   * @param {Object} params.elasticQuery: a query object to be used against an elastic search server
+   * @param {Array | String} params.type: the type array or type string of the entity being looked up
+   * @param {String} params.queryString: the query string typed in by the user
+   * @param {Array | String} params.fields: the fields to search against in the data pack json objects
+   * @param {Array | String} params.datapack: the datapack or packs with the data to be used for this entity type
+   * @param {Number} params.limit=10: the number of matches to return - default = 10
+   * @returns {Object} { documents: [...]} - Object with documents array
+   *
+   * @returns
+   */
+  async entities({
+      elasticQuery = undefined,
+      type = undefined,
+      queryString = undefined,
+      fields = undefined,
+      limit = 10,
+  }) {
+      if (elasticQuery) {
+          // query: the elastic query to perform
+          //
+          // The crate builder component will pass a fully formed elastic search query to this method
+          // It's up to you to get it to the elastic search server. In this example
+          //   it's hardcoded in the _execute method
+          const documents = await this._execute({ query: elasticQuery, indexPath: "entities" });
+          return { documents };
+      } else {
+          // do the lookup yourself in whatever way you want
+          //
+          // return array of json-ld objects matching the query:
+          // ---------------------------------------------------
+          // let documents = [{json-ld object}, {json-ld object}, ...]
+          return { documents: [] };
+      }
+  }
+
+  /** private method */
+  async _execute({ query, indexPath }: { query: Record<string, any>; indexPath: string }) {
+      let response = await fetch(`http://localhost:9200/${indexPath}/_search`, {
+          method: "POST",
+          headers: {
+              "Content-Type": "application/json",
+          },
+          body: JSON.stringify(query),
+      });
+      let status = response.status;
+      response = await response.json();
+      if (status !== 200) {
+          return response;
+      }
+      // const total = response.hits.total.value;
+      const documents = (response as any).hits.hits.map((doc: { _source: any }) => ({ ...doc._source }));
+      // return { total, documents };
+      return documents;
+  }
+}