fix: updated docs

packages/docs/core-concepts/how-it-works.md

@@ -61,7 +61,7 @@ Try resizing / moving the grid item below to observe the model update automatica
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ref, onMounted } from 'vue'
-import {Simple} from '../frameworks/react/examples/simple/Simple.jsx'
+import Simple from '../frameworks/react/examples/simple/Simple.jsx'
 
 const el = ref()
 onMounted(() => {

packages/docs/frameworks/react/how-to/adding-items.md

@@ -45,7 +45,7 @@ Click the `Add item` button to add a new item to the layout.
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ref, onMounted } from 'vue'
-import {AddingItem} from '../examples/adding-item/AddingItem.jsx'
+import AddingItem from '../examples/adding-item/AddingItem.jsx'
 
 const el = ref()
 onMounted(() => {

packages/docs/frameworks/react/how-to/nested.md

@@ -8,7 +8,7 @@ Typical example of a nested grid. You can move items between the master grid and
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ref, onMounted } from 'vue'
-import {Nested} from '@declarative-gridstack/react/examples'
+import Nested from '../examples/nested/Nested.jsx'
 
 const el = ref()
 onMounted(() => {

packages/docs/frameworks/react/how-to/removing-items.md

@@ -44,7 +44,7 @@ return <GridstackContainer ref={gridRef}></GridstackContainer>;
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ref, onMounted } from 'vue'
-import {Remove} from '@declarative-gridstack/react/examples'
+import Remove from '../examples/remove/Remove.jsx'
 
 const el = ref()
 onMounted(() => {

packages/docs/frameworks/react/how-to/simple.md

@@ -8,7 +8,7 @@ A simple grid container
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ref, onMounted } from 'vue'
-import {Simple} from '@declarative-gridstack/react/examples'
+import Simple from '../examples/simple/Simple.jsx'
 
 const el = ref()
 onMounted(() => {

packages/docs/frameworks/react/how-to/using-apis.md

@@ -22,7 +22,7 @@ Press the `Update width` button and see the layout change.
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ref, onMounted } from 'vue'
-import {UpdatingDimensions} from '@declarative-gridstack/react/examples'
+import UpdatingDimensions from '../examples/apis/UpdatingDimensions.jsx'
 
 const el = ref()
 onMounted(() => {

packages/react/package.json

@@ -14,23 +14,15 @@
   },
   "homepage": "https://shibisuriya.github.io/declarative-gridstack/",
   "scripts": {
-    "build": "webpack",
-    "dev": "webpack serve",
-    "postinstall": "pnpm run build"
+    "postinstall": "pnpm run build",
+    "build": "rollup -c"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
-    "babel-loader": "^9.1.3",
-    "css-loader": "^6.8.1",
-    "html-webpack-plugin": "^5.5.3",
+    "@rollup/plugin-babel": "^6.0.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-json-view-lite": "^0.9.7",
-    "style-loader": "^3.3.3",
-    "webpack": "^5.88.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "react-dom": "^18.2.0"
   },
   "files": [
     "./dist"

packages/react/rollup.config.mjs

@@ -0,0 +1,14 @@
+import { babel } from "@rollup/plugin-babel";
+
+export default {
+  input: "src/index.js",
+  output: [
+    {
+      file: "dist/main.js",
+      format: "es",
+      plugins: [{ presets: ["@babel/preset-env"] }],
+    },
+  ],
+  external: ["react", "react-dom", "@declarative-gridstack/core"],
+  plugins: [babel({ presets: ["@babel/preset-react"] })],
+};

packages/react/src/index.js

@@ -1,4 +1,3 @@
-export { default as GridstackSubgrid } from "./GridstackSubgrid";
-export { default as GridstackContainer } from "./GridstackContainer";
-export { default as GridstackItem } from "./GridstackItem";
-
+export { default as GridstackSubgrid } from "./GridstackSubgrid.jsx";
+export { default as GridstackContainer } from "./GridstackContainer.jsx";
+export { default as GridstackItem } from "./GridstackItem.jsx";