@arpproject/recrate 0.1.2 → 0.1.4

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@arpproject/recrate",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "dist/describo-crate-builder.umd.js",
   "type": "module",
   "exports": {
     ".": {
       "import": "./dist/recrate.es.js",
-      "require": "./dist/recrate.umd.js"
+      "require": "./dist/recrate.umd.js",
+      "default": "./dist/index.d.ts"
     },
     "./style.css": {
-      "import": "./dist/style.css"
+      "import": "./dist/recrate.css"
     }
   },
   "types": "dist/index.d.ts",
@@ -18,6 +19,7 @@
     "@codemirror/lang-javascript": "^6.2.3",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
@@ -31,6 +33,7 @@
     "@mui/material": "^7.1.0",
     "@mui/system": "^7.1.0",
     "@mui/x-date-pickers": "^8.2.0",
+    "@tailwindcss/postcss": "^4.1.16",
     "@terraformer/wkt": "^2.2.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -56,7 +59,7 @@
     "react-i18next": "^12.3.1",
     "react-to-webcomponent": "^2.0.1",
     "react-window": "^2.1.1",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^4.1.16",
     "uuid": "^11.1.0",
     "validate-iri": "^1.0.1",
     "validator": "^13.15.0",
@@ -70,7 +73,6 @@
     "build": "vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "develop": "npm install --legacy-peer-deps && npm run update-dependencies && npm run start:elastic && vite && npm run stop:elastic",
     "update-dependencies": "bash -x ./update-deps.sh",
     "test": "./node_modules/.bin/vitest run",
     "test:watch": "./node_modules/.bin/vitest watch",
@@ -108,7 +110,7 @@
     "@storybook/react": "^8.6.12",
     "@storybook/react-vite": "^8.6.12",
     "@storybook/test": "^8.6.12",
-    "@tailwindcss/postcss7-compat": "^2.2.17",
+    "@tailwindcss/vite": "^4.1.16",
     "@types/chance": "^1.1.6",
     "@types/fs-extra": "^11.0.4",
     "@types/terraformer__wkt": "^2.0.3",
@@ -126,7 +128,7 @@
     "react-dom": "^18.2.0",
     "storybook": "^8.6.12",
     "typescript": "^5.4.3",
-    "vite": "^4.5.14"
+    "vite": "^6.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+     "@tailwindcss/postcss": {},
     autoprefixer: {},
   },
 }

package/src/app/EmbeddedComponent.tsx

@@ -221,13 +221,13 @@ const EmbeddedComponent: React.FC = () => {
   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">
+        <div className="flex flex-row gap-x-2">
           <Select
             size='middle'
             value={data.select.crate || undefined}
             onChange={handleCrateChange}
             placeholder="Select a crate"
-            style={{ width: '100%' }}
+            style={{ width: '100%', minWidth: '190px' }}
           >
             {data.crates.map((crate) => (
               <Select.Option key={crate.name} value={crate.name}>
@@ -241,7 +241,7 @@ const EmbeddedComponent: React.FC = () => {
             value={data.select.profile || undefined}
             onChange={handleProfileChange}
             placeholder="Select a profile"
-            style={{ width: '100%' }}
+            style={{ width: '100%', minWidth: '190px' }}
           >
             {data.profiles.map((profile) => (
               <Select.Option key={profile.name} value={profile.name}>

package/src/crate-builder/RenderEntity/ItemLink.tsx

@@ -18,7 +18,7 @@ export const ItemLink: React.FC<ItemLinkProps> = ({ entity, onLoadEntity, classN
   };
 
   return (
-    <div className={`flex flex-col w-full ${className || ''}`} onClick={handleLoadEntity}>
+    <div className={`flex flex-col m-4 w-full ${className || ''}`} onClick={handleLoadEntity}>
       <Typography.Text type="secondary" style={{ fontSize: '0.75rem' }} className="pb-1 mb-1 border-b border-black/20">
         {decodeURIComponent(entity['@id'])}
       </Typography.Text>

package/src/crate-builder/RenderEntity/RenderControls.tsx

@@ -130,9 +130,9 @@ const RenderControls: React.FC<RenderControlsProps> = ({
   };
 
   return (
-    <Flex className="flex-row space-x-1">
+    <Flex className="flex-row gap-x-1">
       {/* Navigation Controls */}
-      <Flex className="flex-row space-x-1">
+      <Flex className="flex-row gap-x-1">
         <Button
           onClick={handleBack}
           type="primary"

package/src/crate-builder/RenderEntity/RenderLinkedItem.tsx

@@ -81,7 +81,7 @@ const RenderLinkedItem: React.FC<RenderLinkedItemProps> = ({
     <Flex className="describo-render-item-link py-1 rounded hover:rounded-r-none">
       <Flex
         vertical
-        style={{ margin: entity?.associations?.length ? 8 : 0 }}
+        style={{ margin: entity?.associations?.length ? 8 : 2 }}
       >
         <Card
           style={{

package/src/crate-builder/RenderEntity/RenderReverseConnections.tsx

@@ -104,7 +104,7 @@ const RenderReverseConnections: React.FC<RenderReverseConnectionsProps> = ({
         <Typography.Text className="text-lg mb-2">{t("links_to_this_entity")}</Typography.Text>
         <div className="flex-grow" />
       </div>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Pagination
           current={currentPage}
           total={connections.total}
@@ -131,7 +131,7 @@ const RenderReverseConnections: React.FC<RenderReverseConnectionsProps> = ({
               hoverable
             >
               <Card.Meta
-                className="describo-render-item-link"
+                className="describo-render-item-link m-2"
                 title={
                   <RenderItemLink
                     entity={entity}

package/src/crate-builder/Shell.tsx

@@ -22,6 +22,12 @@ import isFunction from "lodash/isFunction";
 import { CrateManagerType, ProfileManagerType, UnverifiedCrate } from "./types"; // Add appropriate types
 import { propertyDefinitions } from "./property-definitions";
 import { Lookup } from "./RenderEntity/auto-complete.lib";
+import { App as AntApp, ConfigProvider } from 'antd';
+import { createScopedCache } from './emotionCache';
+import { CacheProvider } from "@emotion/react";
+
+const antdCache = createScopedCache('recrate');
+
 
 export interface DescriboCrateBuilderProps {
   crate?: CrateManagerType["crate"];
@@ -300,23 +306,31 @@ export function DescriboCrateBuilder(props: DescriboCrateBuilderProps): JSX.Elem
   };
 
   return (
-    <ProfileManagerContext.Provider value={pm}>
-      <CrateManagerContext.Provider value={cm}>
-        <LookupsContext.Provider value={lookups}>
-          {ready && !error && contextEntity && (
-            <RenderEntity
-              ref={renderEntityRef}
-              entity={contextEntity}
-              onLoadEntity={handleSetCurrentEntity}
-              onSaveCrate={saveCrate}
-              onSaveEntityTemplate={saveEntityAsTemplate}
-              onWarning={handleWarning}
-              onError={handleError}
-            />
-          )}
-        </LookupsContext.Provider>
-      </CrateManagerContext.Provider>
-    </ProfileManagerContext.Provider>
+    <div className="recrate">
+      <CacheProvider value={antdCache}>
+        <ConfigProvider>
+          <AntApp className="recrate-ant">
+            <ProfileManagerContext.Provider value={pm}>
+              <CrateManagerContext.Provider value={cm}>
+                <LookupsContext.Provider value={lookups}>
+                  {ready && !error && contextEntity && (
+                    <RenderEntity
+                      ref={renderEntityRef}
+                      entity={contextEntity}
+                      onLoadEntity={handleSetCurrentEntity}
+                      onSaveCrate={saveCrate}
+                      onSaveEntityTemplate={saveEntityAsTemplate}
+                      onWarning={handleWarning}
+                      onError={handleError}
+                    />
+                  )}
+                </LookupsContext.Provider>
+              </CrateManagerContext.Provider>
+            </ProfileManagerContext.Provider>
+          </AntApp>
+        </ConfigProvider>
+      </CacheProvider>
+    </div>
   );
 };
 

package/src/crate-builder/emotionCache.ts

@@ -0,0 +1,8 @@
+import createCache from '@emotion/cache';
+
+export function createScopedCache(scope: string) {
+  return createCache({
+    key: scope,
+    container: document.querySelector(`style[data-emotion-${scope}]`) || undefined,
+  });
+}

package/src/crate-builder/primitives/Number.tsx

@@ -124,7 +124,7 @@ const NumberComponent: React.FC<NumberProps> = ({
 
   return (
     <div className="flex flex-col w-full describo-property-type-number">
-      <div className="flex flex-row space-x-2">
+      <div className="flex flex-row gap-x-2">
         <Input
           size='middle'
           type="number"

package/src/crate-builder/primitives/Select.tsx

@@ -82,19 +82,18 @@ const SelectComponent: React.FC<SelectProps> = ({
     return (
       <div className="flex flex-col w-full describo-property-type-select">
         <Checkbox.Group
-          className="block"
+          className="flex flex-col gap-1"
           value={isArray(internalValue) ? internalValue : []}
           onChange={(checkedValues) => save(checkedValues as string[])}
         >
           {definition.values.map((value, idx) => (
-            <div key={idx} className="flex flex-col">
-              <Checkbox value={value}>
-                {value}
-              </Checkbox>
-            </div>
+            <Checkbox key={idx} value={value} className="block">
+              {value}
+            </Checkbox>
           ))}
         </Checkbox.Group>
       </div>
+
     );
   }
 

package/src/crate-builder/primitives/Text.tsx

@@ -151,7 +151,7 @@ const Text: React.FC<TextProps> = ({
 
   return (
     <div className="flex flex-col w-full space-y-2 describo-property-type-text">
-      <div className="flex flex-row space-x-2">
+      <div className="flex flex-row gap-x-2">
         {type !== 'textarea' ? (
           <Input
             size='middle'

package/src/crate-builder/primitives/Url.tsx

@@ -46,7 +46,7 @@ const Url: React.FC<UrlProps> = ({
 
   return (
     <div className="flex flex-col describo-property-type-url">
-      <div className="flex flex-row flex-grow space-x-2">
+      <div className="flex flex-row flex-grow gap-x-2">
         <Input
           size='middle'
           value={internalValue}

package/src/crate-builder/recrate.css

@@ -0,0 +1,3 @@
+.recrate {
+  all: revert-layer; /* neutralizes global resets before applying your own */
+}

package/src/crate-builder/tailwind.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 /* a {
     @apply text-blue-600 text-lg tracking-wide;

package/src/index.ts

@@ -1,9 +1,11 @@
 import "./crate-builder/component.css";
 import "./crate-builder/tailwind.css";
+import "./crate-builder/recrate.css";
 //import { DescriboCrateBuilder, DescriboCrateBuilderProps } from "./crate-builder/Shell";
 
 //export default { DescriboCrateBuilder };
 export type { JSONObject } from "./types";
+export type { DescriboCrateBuilderProps } from "./types";
 
 import { DescriboCrateBuilder } from "./crate-builder/Shell";
 export { DescriboCrateBuilder };

package/tailwind.config.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   content: [
+    "./index.html",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {

package/vite.config.ts

@@ -2,15 +2,17 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import * as path from 'path';
 import dts from 'vite-plugin-dts';
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   server: {
     host: "0.0.0.0",
-    port: 3000,
+    port: 9000,
   },
   // For Describo
   plugins: [
     react(),
+    tailwindcss(),
     dts({
       include: ["src"],
       insertTypesEntry: true, // <== important!
@@ -37,5 +39,8 @@ export default defineConfig({
       }
     },
   },
+  css: {
+    postcss: './postcss.config.js',
+  }
 
 })