fix: updated docs

shibisuriya · Jun 1, 2024 · e26f847 · e26f847
1 parent b74158e
commit e26f847
Show file tree

Hide file tree

Showing 90 changed files with 1,171 additions and 661 deletions.
diff --git a/packages/docs/.vitepress/config.mjs b/packages/docs/.vitepress/config.mjs
@@ -3,15 +3,16 @@ import { defineConfig } from "vitepress";
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   srcDir: "./src/docs/",
-  title: "Declarative Gridstack docs",
+  title: "Declarative Gridstack",
   description: "Docs for Declarative Gridstack.",
   logo: "static/images/logo.jpeg",
   cleanUrls: true,
   base: "/declarative-gridstack/",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: "Concepts", link: "/concepts/gridstack-containers" },
+      { text: "Showcase", link: "/showcase/ubuntu-desktop" },
+      { text: "Concepts", link: "/concepts/gridstack-grids" },
       { text: "Guides", link: "/guides/react/simple" },
       { text: "API", link: "/api/react/gridstack-items" },
     ],
@@ -47,8 +48,8 @@ export default defineConfig({
           text: "Concepts",
           items: [
             {
-              text: "Gridstack Containers",
-              link: "/concepts/gridstack-containers",
+              text: "Gridstack Grids",
+              link: "/concepts/gridstack-grids",
             },
             {
               text: "Gridstack Items",
@@ -85,8 +86,19 @@ export default defineConfig({
               text: "React",
               collapsed: false,
               items: [
-                { text: "Adding items", link: "/guides/react/adding-items/" },
-                { text: "CRA (create-react-app)", link: "/guides/react/cra/" },
+                {
+                  text: "Using CRA (Create React App)",
+                  link: "/guides/react/cra",
+                },
+                { text: "Adding items", link: "/guides/react/adding-items" },
+                {
+                  text: "Removing items",
+                  link: "/guides/react/removing-items",
+                },
+                {
+                  text: "Simple",
+                  link: "/guides/react/simple",
+                },
                 {
                   text: "Drag and drop into trash",
                   link: "/guides/react/drag-and-drop-into-trash",
@@ -99,14 +111,6 @@ export default defineConfig({
                   text: "Nested",
                   link: "/guides/react/nested",
                 },
-                {
-                  text: "Removing items",
-                  link: "/guides/react/removing-items",
-                },
-                {
-                  text: "Simple",
-                  link: "/guides/react/simple",
-                },
                 {
                   text: "Using APIs",
                   link: "/guides/react/using-apis",
@@ -116,14 +120,26 @@ export default defineConfig({
             {
               text: "Vue",
               collapsed: true,
-              items: [],
+              items: [
+                {
+                  text: "Nested",
+                  link: "/guides/vue/nested",
+                },
+                {
+                  text: "Using APIs",
+                  link: "/guides/vue/using-apis",
+                },
+              ],
             },
           ],
         },
       ],
     },
     socialLinks: [
-      { icon: "github", link: "https://github.com/vuejs/vitepress" },
+      {
+        icon: "github",
+        link: "https://github.com/shibisuriya/declarative-gridstack",
+      },
     ],
   },
 });
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -11,9 +11,10 @@
   },
   "dependencies": {
     "@declarative-gridstack/react": "workspace:^",
+    "@declarative-gridstack/vue": "workspace:^",
+    "@loadable/component": "^5.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-json-view-lite": "^0.9.7"
+    "react-json-view": "^1.21.3"
   }
 }
-
diff --git a/...mponents/react/adding-item/AddingItem.jsx → .../docs/src/components/react/AddingItem.jsx b/...mponents/react/adding-item/AddingItem.jsx → .../docs/src/components/react/AddingItem.jsx
@@ -3,20 +3,21 @@ import {
   GridstackContainer,
   GridstackItem,
 } from "@declarative-gridstack/react";
-import { JsonView, darkStyles } from "react-json-view-lite";
-import "react-json-view-lite/dist/index.css";
 
-import { Widget } from "../components/Widget";
+import { Widget } from "./components/Widget";
 
 import "./styles.css";
 
+import styles from "./styles.module.css";
+import JsonViewer from "./components/JsonViewer";
+
 function AddingItems() {
   const [layout, setLayout] = useState([
     {
       id: "1",
       x: 0,
       y: 0,
-      w: 12,
+      w: 6,
       h: 2,
       data: {
         type: "calendar",
@@ -36,9 +37,9 @@ function AddingItems() {
     const newId = String(getNewId());
     return {
       id: newId,
-      x: 0,
+      x: newId % 2 === 0 ? 0 : 6,
       y: 0,
-      w: 12,
+      w: 6,
       h: 2,
       data: {
         type: "calendar",
@@ -58,10 +59,12 @@ function AddingItems() {
   return (
     <Fragment>
       <div>
-        <button onClick={addItem}>Add item</button>
+        <button onClick={addItem} className={styles.btn}>
+          Add item
+        </button>
       </div>
       <div className="row">
-        <div className="flex-1">
+        <div className="flex-1 bg">
           <GridstackContainer items={layout} setLayout={setLayout}>
             {layout.map((widget) => {
               return (
@@ -79,9 +82,7 @@ function AddingItems() {
             })}
           </GridstackContainer>
         </div>
-        <div className="flex-2">
-          <JsonView data={layout} style={darkStyles} class="json-viewer" />
-        </div>
+        <JsonViewer json={layout} />
       </div>
     </Fragment>
   );

diff --git a/...nents/react/drag-and-drop/DragAndDrop.jsx → ...docs/src/components/react/DragAndDrop.jsx b/...nents/react/drag-and-drop/DragAndDrop.jsx → ...docs/src/components/react/DragAndDrop.jsx
@@ -1,6 +1,4 @@
 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,
@@ -315,9 +313,6 @@ function DragAndDrop() {
             })}
           </GridstackContainer>
         </div>
-        <div className="flex-1">
-          <JsonView data={layout} style={darkStyles} />
-        </div>
       </div>
     </Fragment>
   );

diff --git a/...cs/src/components/react/nested/Nested.jsx → ...ages/docs/src/components/react/Nested.jsx b/...cs/src/components/react/nested/Nested.jsx → ...ages/docs/src/components/react/Nested.jsx
@@ -1,6 +1,4 @@
 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,
@@ -201,9 +199,6 @@ function Nested() {
             </GridstackContainer>
           )}
         </div>
-        <div className="flex-2">
-          <JsonView data={layout} style={darkStyles} class="json-viewer" />
-        </div>
       </div>
     </Fragment>
   );

diff --git a/...cs/src/components/react/remove/Remove.jsx → ...ages/docs/src/components/react/Remove.jsx b/...cs/src/components/react/remove/Remove.jsx → ...ages/docs/src/components/react/Remove.jsx
@@ -3,10 +3,8 @@ import {
   GridstackContainer,
   GridstackItem,
 } from "@declarative-gridstack/react";
-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 { Widget } from "./components/Widget";
+import ItemContainer from "./components/ItemContainer";
 
 import "./styles.css";
 
@@ -25,6 +23,18 @@ function Remove() {
         data: "10/10/1990",
       },
     },
+    {
+      id: "2",
+      x: 0,
+      y: 0,
+      w: 12,
+      h: 2,
+      data: {
+        type: "calendar",
+        title: "A calendar widget",
+        data: "10/10/1990",
+      },
+    },
   ]);
 
   const remove = (id) => {
@@ -58,9 +68,6 @@ function Remove() {
             })}
           </GridstackContainer>
         </div>
-        <div className="flex-1">
-          <JsonView data={layout} style={darkStyles} class="json-viewer" />
-        </div>
       </div>
     </div>
   );

diff --git a/...cs/src/components/react/simple/Simple.jsx → ...ages/docs/src/components/react/Simple.jsx b/...cs/src/components/react/simple/Simple.jsx → ...ages/docs/src/components/react/Simple.jsx
@@ -3,9 +3,7 @@ import {
   GridstackContainer,
   GridstackItem,
 } from "@declarative-gridstack/react";
-import { JsonView, darkStyles } from "react-json-view-lite";
-import "react-json-view-lite/dist/index.css";
-import { Widget } from "../components/Widget";
+import { Widget } from "./components/Widget.jsx";
 
 import "./styles.css";
 
@@ -15,7 +13,7 @@ function Simple() {
       id: "1",
       x: 0,
       y: 0,
-      w: 12,
+      w: 6,
       h: 2,
       data: {
         type: "calendar",
@@ -27,7 +25,7 @@ function Simple() {
   return (
     <div>
       <div className="row">
-        <div className="flex-1">
+        <div className="flex-1 bg">
           <GridstackContainer items={layout} setLayout={setLayout}>
             {layout.map((widget) => {
               return (
@@ -45,9 +43,6 @@ function Simple() {
             })}
           </GridstackContainer>
         </div>
-        <div className="flex-1">
-          <JsonView data={layout} style={darkStyles} class="json-viewer" />
-        </div>
       </div>
     </div>
   );

diff --git a/...ponents/react/apis/UpdatingDimensions.jsx → ...c/components/react/UpdatingDimensions.jsx b/...ponents/react/apis/UpdatingDimensions.jsx → ...c/components/react/UpdatingDimensions.jsx
@@ -3,9 +3,7 @@ import {
   GridstackContainer,
   GridstackItem,
 } from "@declarative-gridstack/react";
-import { JsonView, darkStyles } from "react-json-view-lite";
-import "react-json-view-lite/dist/index.css";
-import { Widget } from "../components/Widget";
+import { Widget } from "./components/Widget";
 
 import "./styles.css";
 
@@ -56,9 +54,6 @@ function UpdatingDimensions() {
             })}
           </GridstackContainer>
         </div>
-        <div className="flex-1">
-          <JsonView data={layout} style={darkStyles} class="json-viewer" />
-        </div>
       </div>
     </div>
   );

diff --git a/packages/docs/src/components/react/apis/styles.css b/packages/docs/src/components/react/apis/styles.css
diff --git a/packages/docs/src/components/react/components/JsonViewer.jsx b/packages/docs/src/components/react/components/JsonViewer.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import loadable from "@loadable/component";
+const ReactJson = loadable(() => import("react-json-view"));
+
+function JsonViewer(props) {
+  const { json } = props;
+  return (
+    <div className="m-4">
+      <ReactJson
+        src={json}
+        theme={"twilight"}
+        displayDataTypes={false}
+        enableClipboard={false}
+        enableAdd={false}
+        enableEdit={false}
+        displayObjectSize={false}
+        iconStyle={"circle"}
+        indentWidth={5}
+      />
+    </div>
+  );
+}
+
+export default JsonViewer;
diff --git a/packages/docs/src/components/react/components/styles.module.css b/packages/docs/src/components/react/components/styles.module.css
@@ -1,8 +1,14 @@
 .widget {
-  background-color: red;
+  background-color: #b39cd0;
   height: 100%;
   display: flex;
   justify-content: center;
+  color: black;
   align-items: center;
   text-align: center;
+  padding: 10px;
+}
+
+:global(.grid-stack) {
+  background-color: #fbeaff;
 }