@arpproject/recrate 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arpproject/recrate",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "dist/describo-crate-builder.umd.js",
   "type": "module",
   "exports": {
@@ -56,7 +56,8 @@
     "react-i18next": "^12.3.1",
     "react-to-webcomponent": "^2.0.1",
     "react-window": "^2.1.1",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^4.1.16",
+    "@tailwindcss/postcss": "^4.1.16",
     "uuid": "^11.1.0",
     "validate-iri": "^1.0.1",
     "validator": "^13.15.0",
@@ -108,7 +109,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 +127,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/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/tailwind.css

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

package/vite.config.ts

@@ -2,6 +2,7 @@ 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: {
@@ -11,6 +12,7 @@ export default defineConfig({
   // For Describo
   plugins: [
     react(),
+    tailwindcss(),
     dts({
       include: ["src"],
       insertTypesEntry: true, // <== important!