diff --git a/packages/react/.babelrc b/packages/react/.babelrc deleted file mode 100644 index fbd6da0..0000000 --- a/packages/react/.babelrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-react" - ] -} \ No newline at end of file diff --git a/packages/react/public/index.html b/packages/react/public/index.html deleted file mode 100644 index 432d5b4..0000000 --- a/packages/react/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Document - - -
- - diff --git a/packages/react/src/App.jsx b/packages/react/src/App.jsx deleted file mode 100644 index 0d75dfd..0000000 --- a/packages/react/src/App.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import AddingItem from "./examples/nested/Nested" - -function App() { - return ( -
- -
- ); -} - -export default App; diff --git a/packages/react/src/gridstack/GridstackContainer.jsx b/packages/react/src/GridstackContainer.jsx similarity index 100% rename from packages/react/src/gridstack/GridstackContainer.jsx rename to packages/react/src/GridstackContainer.jsx diff --git a/packages/react/src/gridstack/GridstackItem.jsx b/packages/react/src/GridstackItem.jsx similarity index 100% rename from packages/react/src/gridstack/GridstackItem.jsx rename to packages/react/src/GridstackItem.jsx diff --git a/packages/react/src/gridstack/GridstackSubgrid.jsx b/packages/react/src/GridstackSubgrid.jsx similarity index 100% rename from packages/react/src/gridstack/GridstackSubgrid.jsx rename to packages/react/src/GridstackSubgrid.jsx diff --git a/packages/react/src/gridstack/contexts.js b/packages/react/src/contexts.js similarity index 100% rename from packages/react/src/gridstack/contexts.js rename to packages/react/src/contexts.js diff --git a/packages/react/src/examples/adding-item/AddingItem.jsx b/packages/react/src/examples/adding-item/AddingItem.jsx deleted file mode 100644 index ca9f45e..0000000 --- a/packages/react/src/examples/adding-item/AddingItem.jsx +++ /dev/null @@ -1,87 +0,0 @@ -import React, { Fragment, useState, useRef, useEffect } from "react"; -import { GridstackContainer, GridstackItem } from "../../gridstack"; -import { JsonView, darkStyles } from "react-json-view-lite"; -import "react-json-view-lite/dist/index.css"; - -import { Widget } from "../components/Widget"; - -import "./styles.css"; - -function AddingItems() { - const [layout, setLayout] = useState([ - { - id: "1", - x: 0, - y: 0, - w: 12, - h: 2, - data: { - type: "calendar", - title: "A calendar widget", - data: "10/10/1990", - }, - }, - ]); - - const id = useRef(-1); - - const getNewId = () => { - return id.current--; - }; - - const createNewItem = () => { - const newId = String(getNewId()); - return { - id: newId, - x: 0, - y: 0, - w: 12, - h: 2, - data: { - type: "calendar", - title: "A calendar widget", - data: "10/10/1990", - }, - }; - }; - - const addItem = () => { - const newItem = createNewItem(); - setLayout((prevLayout) => { - return [...prevLayout, newItem]; - }); - }; - - return ( - -
- -
-
-
- - {layout.map((widget) => { - return ( - - - - ); - })} - -
-
- -
-
- - ); -} - -export default AddingItems; diff --git a/packages/react/src/examples/adding-item/styles.css b/packages/react/src/examples/adding-item/styles.css deleted file mode 100644 index bd833ee..0000000 --- a/packages/react/src/examples/adding-item/styles.css +++ /dev/null @@ -1,31 +0,0 @@ -.widget { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100%; -} -.row { - display: flex; - justify-content: space-between; -} -.flex-1 { - width: 70%; - background-color: white; -} -.flex-2 { - width: 30%; - background-color: white; -} - -.title { - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - - -.full-width { - width: 100%; -} diff --git a/packages/react/src/examples/apis/UpdatingDimensions.jsx b/packages/react/src/examples/apis/UpdatingDimensions.jsx deleted file mode 100644 index 32d04d6..0000000 --- a/packages/react/src/examples/apis/UpdatingDimensions.jsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useState, useRef } from "react"; -import { GridstackContainer, GridstackItem } from "../../gridstack"; -import { JsonView, darkStyles } from "react-json-view-lite"; -import "react-json-view-lite/dist/index.css"; -import { Widget } from "../components/Widget"; - -import "./styles.css"; - -function UpdatingDimensions() { - const updateWidth = () => { - gridRef.current.updateItem("1", { w: 2, h: 3 }); - }; - const gridRef = useRef(); - const [layout, setLayout] = useState([ - { - id: "1", - x: 0, - y: 0, - w: 12, - h: 2, - data: { - type: "calendar", - title: "A calendar widget", - data: "10/10/1990", - }, - }, - ]); - return ( -
-
- -
-
-
- - {layout.map((widget) => { - return ( - - - - ); - })} - -
-
- -
-
-
- ); -} - -export default UpdatingDimensions; diff --git a/packages/react/src/examples/apis/styles.css b/packages/react/src/examples/apis/styles.css deleted file mode 100644 index bd833ee..0000000 --- a/packages/react/src/examples/apis/styles.css +++ /dev/null @@ -1,31 +0,0 @@ -.widget { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100%; -} -.row { - display: flex; - justify-content: space-between; -} -.flex-1 { - width: 70%; - background-color: white; -} -.flex-2 { - width: 30%; - background-color: white; -} - -.title { - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - - -.full-width { - width: 100%; -} diff --git a/packages/react/src/examples/components/HtmlInput.jsx b/packages/react/src/examples/components/HtmlInput.jsx deleted file mode 100644 index 979c6f2..0000000 --- a/packages/react/src/examples/components/HtmlInput.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { Fragment, useState } from "react"; - -function HtmlInput(props) { - const { data } = props; - const { type } = data; - const [value, setValue] = useState(data.value); - return ( - -
{type}
-
- { - setValue(e.target.value); - }} - /> -
- - ); -} - -export default HtmlInput; diff --git a/packages/react/src/examples/components/ItemContainer.jsx b/packages/react/src/examples/components/ItemContainer.jsx deleted file mode 100644 index d6639e9..0000000 --- a/packages/react/src/examples/components/ItemContainer.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { Fragment } from "react"; - -function ItemContainer({ children, remove }) { - return ( - -
- -
- {children} - - ); -} - -export default ItemContainer; diff --git a/packages/react/src/examples/components/Widget.jsx b/packages/react/src/examples/components/Widget.jsx deleted file mode 100644 index 0553127..0000000 --- a/packages/react/src/examples/components/Widget.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import style from "./styles.module.css"; - -const Widget = (props) => { - const { data } = props; - return ( -
-
-

{data.title}

-
{data.data}
-
-
- ); -}; - -export { Widget }; diff --git a/packages/react/src/examples/components/styles.module.css b/packages/react/src/examples/components/styles.module.css deleted file mode 100644 index 56c09cc..0000000 --- a/packages/react/src/examples/components/styles.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.widget { - background-color: red; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - text-align: center; -} diff --git a/packages/react/src/examples/drag-and-drop/DragAndDrop.jsx b/packages/react/src/examples/drag-and-drop/DragAndDrop.jsx deleted file mode 100644 index dd6473a..0000000 --- a/packages/react/src/examples/drag-and-drop/DragAndDrop.jsx +++ /dev/null @@ -1,326 +0,0 @@ -import React, { Fragment, useRef, useState } from "react"; -import { JsonView, darkStyles } from "react-json-view-lite"; -import "react-json-view-lite/dist/index.css"; -import { - GridstackContainer, - GridstackItem, - GridstackSubgrid, -} from "../../gridstack"; -import HtmlInput from "../components/HtmlInput"; -import { Widget } from "../components/Widget"; - -const MapWidget = (props) => { - return ; -}; - -const CalendarWidget = (props) => { - return ; -}; - -import "./styles.css"; - -function DragAndDrop() { - const uid = useRef(-1); - const [layout, setLayout] = useState([ - { - id: "1", - x: 0, - y: 6, - w: 9, - h: 2, - data: { - type: "calendar", - title: "A calendar widget", - data: 1685811196713, - }, - }, - { - id: "2", - x: 0, - y: 3, - w: 12, - h: 3, - children: [ - { - id: "3", - x: 1, - y: 0, - w: 9, - h: 1, - data: { - type: "map", - title: "A map widget", - data: "Chennai, Tamil Nadu, India", - }, - }, - { - id: "4", - x: 1, - y: 1, - w: 8, - h: 1, - data: { - type: "map", - title: "A map widget", - data: "Chennai, Tamil Nadu, India", - }, - }, - ], - }, - { - id: "5", - x: 0, - y: 0, - w: 12, - h: 3, - children: [ - { - id: "6", - x: 1, - y: 0, - w: 9, - h: 1, - data: { - type: "map", - title: "A map widget", - data: "Chennai, Tamil Nadu, India", - }, - }, - { - id: "7", - x: 1, - y: 1, - w: 8, - h: 1, - data: { - type: "map", - title: "A map widget", - data: "Chennai, Tamil Nadu, India", - }, - }, - ], - }, - ]); - - const getWidget = ({ type, data, id, gridId } = {}) => { - if (dndItems.some((item) => item.data.type === type)) { - return ; - } else if (type === "calendar") { - return remove(id, gridId)} />; - } else if (type === "map") { - return remove(id, gridId)} />; - } - }; - - const getItem = ({ item, gridId = "master" } = {}) => { - const { - data, - data: { type }, - id, - } = item ?? {}; - const widget = getWidget({ type, data, id, gridId }); - return ( - - {widget} - - ); - }; - - const layoutChanged = () => { - localStorage.setItem("layout", JSON.stringify(layout)); - }; - - const gridsRef = useRef([]); - const createRef = (el, id) => { - gridsRef.current[id] = el; - }; - - const [dndItems] = useState([ - { - id: "1", - data: { - type: "button", - value: "Click me!", - }, - }, - { - id: "2", - data: { - type: "checkbox", - value: "true", - }, - }, - { - id: "3", - data: { - type: "date", - value: "", - }, - }, - { - id: "4", - data: { - type: "email", - value: "shibisuriya@gmail.com", - }, - }, - { - id: "5", - data: { - type: "color", - value: "", - }, - }, - { - id: "6", - data: { - type: "number", - value: "Click me!", - }, - }, - { - id: "7", - data: { - type: "password", - value: "Click me!", - }, - }, - { - id: "8", - data: { - type: "radio", - value: "Click me!", - }, - }, - { - id: "9", - data: { - type: "range", - value: "Click me!", - }, - }, - ]); - - const uidGenerator = () => { - return uid.current--; - }; - return ( - -
-
-

Drag and drop

-

- Drag and drop the droppables into the grid container or drop a grid - item into the trash -

-
-
-
-

Trash

-
-
-
-

Droppables

-
- {dndItems.map((item) => { - return ( -
-
- -
-
- ); - })} -
-
- -
-
- createRef(el, "master")} - setLayout={setLayout} - items={layout} - columns={12} - rowHeight={100} - layoutChanged={layoutChanged} - accept={["gs-subgrid", "gs-widget"]} - dnd={{ - class: "gs-dnd-item", - dndItems: dndItems, - shredder: "#trash", - options: { appendTo: "body", helper: "clone" }, - uidGenerator: uidGenerator, - }} - > - {layout.map((item) => { - if ("children" in item) { - // is a subgrid! - const { children, id: gridId } = item; - return ( - - createRef(el, gridId)} - dnd={{ - class: "gs-dnd-item", - dndItems: dndItems, - shredder: "#trash", - options: { appendTo: "body", helper: "clone" }, - uidGenerator: uidGenerator, - }} - > - {children.map((child) => { - return getItem({ item: child, gridId: gridId }); - })} - - - ); - } else { - return getItem({ item }); - } - })} - -
-
- -
-
- - ); -} - -export default DragAndDrop; diff --git a/packages/react/src/examples/drag-and-drop/styles.css b/packages/react/src/examples/drag-and-drop/styles.css deleted file mode 100644 index df45aaa..0000000 --- a/packages/react/src/examples/drag-and-drop/styles.css +++ /dev/null @@ -1,40 +0,0 @@ -.widget { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100%; -} -.row { - display: flex; -} -.flex-1 { - width: 50%; -} - -.title { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - text-transform: capitalize; -} - -.grid { - display: grid; - grid-template-columns: repeat(5, 0.2fr); - grid-gap: 10px; - padding: 20px; -} - -.html-input { - display: flex; - justify-content: center; - align-items: center; - padding: 10px; -} - -.html-input > input { - width: 100%; - text-align: center; -} diff --git a/packages/react/src/examples/index.js b/packages/react/src/examples/index.js deleted file mode 100644 index 3f168e3..0000000 --- a/packages/react/src/examples/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export { default as Simple } from "./simple/Simple.jsx"; -export { default as Nested } from "./nested/Nested.jsx"; -export { default as DragAndDrop } from "./drag-and-drop/DragAndDrop.jsx"; -export { default as UpdatingDimensions } from "./apis/UpdatingDimensions.jsx"; -export { default as AddingItem } from "./adding-item/AddingItem.jsx"; -export { default as Remove } from "./remove/Remove.jsx"; diff --git a/packages/react/src/examples/nested/Nested.jsx b/packages/react/src/examples/nested/Nested.jsx deleted file mode 100644 index 671ad14..0000000 --- a/packages/react/src/examples/nested/Nested.jsx +++ /dev/null @@ -1,214 +0,0 @@ -import React, { Fragment, useRef, useState } from "react"; -import { JsonView, darkStyles } from "react-json-view-lite"; -import "react-json-view-lite/dist/index.css"; - -import { - GridstackContainer, - GridstackItem, - GridstackSubgrid, -} from "../../gridstack"; - -import "./styles.css"; - -const MapWidget = ({ data }) => { - const { title } = data; - return
{title}
; -}; - -const CalendarWidget = ({ data }) => { - const { title } = data; - return
{title}
; -}; - -function Nested() { - const randomNumber = useRef(-1); - - const getRandomNumber = () => { - return randomNumber.current--; - }; - - const addItem = () => { - const makeItem = () => { - const newId = getRandomNumber(); - return { - id: String(newId), - x: 1, - y: 0, - w: 9, - h: 1, - data: { - type: "map", - title: "A map widget", - data: "Chennai, Tamil Nadu, India", - }, - }; - }; - const newItem = makeItem(); - setLayout((prevLayout) => [...prevLayout, newItem]); - }; - - const toggleGridVisibility = () => { - setShowLayout((s) => !s); - }; - - const [showLayout, setShowLayout] = useState(true); - const [layout, setLayout] = useState([ - { - id: "2", - x: 0, - y: 5, - w: 12, - h: 3, - children: [ - { - id: "3", - x: 1, - y: 0, - w: 9, - h: 1, - data: { - type: "map", - title: "A map widget", - data: "Chennai, Tamil Nadu, India", - }, - }, - { - id: "4", - x: 1, - y: 1, - w: 8, - h: 1, - data: { - type: "map", - title: "A map widget", - data: "Chennai, Tamil Nadu, India", - }, - }, - ], - }, - { - id: "5", - x: 0, - y: 2, - w: 12, - h: 3, - children: [ - { - id: "6", - x: 1, - y: 0, - w: 9, - h: 1, - data: { - type: "map", - title: "A map widget", - data: "Chennai, Tamil Nadu, India", - }, - }, - ], - }, - { - id: "1", - x: 0, - y: 0, - w: 12, - h: 2, - data: { - type: "calendar", - title: "A calendar widget", - data: 1685811196713, - }, - }, - ]); - - const getWidget = ({ type, data, id, gridId } = {}) => { - if (type === "calendar") { - return remove(id, gridId)} />; - } else if (type === "map") { - return remove(id, gridId)} />; - } - }; - - const getItem = ({ item, gridId = "master" } = {}) => { - const { - data, - data: { type }, - id, - } = item ?? {}; - const widget = getWidget({ type, data, id, gridId }); - return ( - - {widget} - - ); - }; - - const [pushTo, setPushTo] = useState("master"); - - - - return ( - - - - {/* */} -
-
- {showLayout && ( - - {layout.map((item) => { - if ("children" in item) { - // is a subgrid! - const { children, id: gridId } = item; - return ( - - - {children.map((child) => { - return getItem({ item: child, gridId: gridId }); - })} - - - ); - } else { - return getItem({ item }); - } - })} - - )} -
-
- -
-
- - ); -} - -export default Nested; diff --git a/packages/react/src/examples/nested/styles.css b/packages/react/src/examples/nested/styles.css deleted file mode 100644 index 994e7f8..0000000 --- a/packages/react/src/examples/nested/styles.css +++ /dev/null @@ -1,35 +0,0 @@ -.row { - display: flex; -} - -.flex-1 { - width: 70% !important; -} -.flex-2 { - width: 30%; -} - -.widget { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - text-transform: capitalize; - color: white; - font-weight: bold; -} - -.map-widget { - background-color: #ef2d56; -} -.calendar-widget { - background-color: #ed7d3a; -} - -.title { - text-align: center; -} - -.grid-stack-nested { - background-color: red; -} diff --git a/packages/react/src/examples/remove/Remove.jsx b/packages/react/src/examples/remove/Remove.jsx deleted file mode 100644 index 1f3d9e2..0000000 --- a/packages/react/src/examples/remove/Remove.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useState, useRef } from "react"; -import { GridstackContainer, GridstackItem } from "../../gridstack"; -import { JsonView, darkStyles } from "react-json-view-lite"; -import "react-json-view-lite/dist/index.css"; -import { Widget } from "../components/Widget"; -import ItemContainer from "../components/ItemContainer"; - -import "./styles.css"; - -function Remove() { - const gridRef = useRef(); - const [layout, setLayout] = useState([ - { - id: "1", - x: 0, - y: 0, - w: 12, - h: 2, - data: { - type: "calendar", - title: "A calendar widget", - data: "10/10/1990", - }, - }, - ]); - - const remove = (id) => { - gridRef.current.remove(id); - }; - - return ( -
-
-
- - {layout.map((widget) => { - return ( - - remove(widget.id)}> - - - - ); - })} - -
-
- -
-
-
- ); -} - -export default Remove; diff --git a/packages/react/src/examples/remove/styles.css b/packages/react/src/examples/remove/styles.css deleted file mode 100644 index bd833ee..0000000 --- a/packages/react/src/examples/remove/styles.css +++ /dev/null @@ -1,31 +0,0 @@ -.widget { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100%; -} -.row { - display: flex; - justify-content: space-between; -} -.flex-1 { - width: 70%; - background-color: white; -} -.flex-2 { - width: 30%; - background-color: white; -} - -.title { - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - - -.full-width { - width: 100%; -} diff --git a/packages/react/src/examples/simple/Simple.jsx b/packages/react/src/examples/simple/Simple.jsx deleted file mode 100644 index 9c137ee..0000000 --- a/packages/react/src/examples/simple/Simple.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useState } from "react"; -import { GridstackContainer, GridstackItem } from "../../gridstack"; -import { JsonView, darkStyles } from "react-json-view-lite"; -import "react-json-view-lite/dist/index.css"; -import { Widget } from "../components/Widget"; - -import "./styles.css"; - -function Simple() { - const [layout, setLayout] = useState([ - { - id: "1", - x: 0, - y: 0, - w: 12, - h: 2, - data: { - type: "calendar", - title: "A calendar widget", - data: "10/10/1990", - }, - }, - ]); - return ( -
-
-
- - {layout.map((widget) => { - return ( - - - - ); - })} - -
-
- -
-
-
- ); -} - -export default Simple; diff --git a/packages/react/src/examples/simple/styles.css b/packages/react/src/examples/simple/styles.css deleted file mode 100644 index bd833ee..0000000 --- a/packages/react/src/examples/simple/styles.css +++ /dev/null @@ -1,31 +0,0 @@ -.widget { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100%; -} -.row { - display: flex; - justify-content: space-between; -} -.flex-1 { - width: 70%; - background-color: white; -} -.flex-2 { - width: 30%; - background-color: white; -} - -.title { - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - - -.full-width { - width: 100%; -} diff --git a/packages/react/src/gridstack/index.js b/packages/react/src/gridstack/index.js deleted file mode 100644 index 4eca1b9..0000000 --- a/packages/react/src/gridstack/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as GridstackSubgrid } from './GridstackSubgrid' -export { default as GridstackContainer } from './GridstackContainer' -export { default as GridstackItem } from './GridstackItem' \ No newline at end of file diff --git a/packages/react/src/index.js b/packages/react/src/index.js index f95cac3..eec96df 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -1,6 +1,4 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App"; +export { default as GridstackSubgrid } from "./GridstackSubgrid"; +export { default as GridstackContainer } from "./GridstackContainer"; +export { default as GridstackItem } from "./GridstackItem"; -const root = ReactDOM.createRoot(document.getElementById("app")); -root.render(); diff --git a/packages/react/src/gridstack/utils/defaultOptions.js b/packages/react/src/utils/defaultOptions.js similarity index 100% rename from packages/react/src/gridstack/utils/defaultOptions.js rename to packages/react/src/utils/defaultOptions.js diff --git a/packages/react/src/gridstack/utils/getGridOptions.js b/packages/react/src/utils/getGridOptions.js similarity index 100% rename from packages/react/src/gridstack/utils/getGridOptions.js rename to packages/react/src/utils/getGridOptions.js diff --git a/packages/react/src/gridstack/utils/getUpdatedLayout.js b/packages/react/src/utils/getUpdatedLayout.js similarity index 100% rename from packages/react/src/gridstack/utils/getUpdatedLayout.js rename to packages/react/src/utils/getUpdatedLayout.js diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js index ccee6fa..88973b6 100644 --- a/packages/react/webpack.config.js +++ b/packages/react/webpack.config.js @@ -13,7 +13,7 @@ module.exports = { writeToDisk: true, }, }, - entry: "./src/gridstack/index.js", + entry: "./src/index.js", externals: { react: "react", "react-dom": "react-dom", @@ -22,10 +22,13 @@ module.exports = { module: { rules: [ { - test: /\.(js|jsx)$/, + test: /\.?js|jsx$/, exclude: /node_modules/, use: { loader: "babel-loader", + options: { + presets: ["@babel/preset-env", "@babel/preset-react"], + }, }, }, {