Merge pull request #1 from aBgAmeuR:dev

Merge Dev
aBgAmeuR · Jul 4, 2023 · 90b42e8 · 90b42e8
2 parents d0e114f + 29980d7
commit 90b42e8
Show file tree

Hide file tree

Showing 31 changed files with 2,153 additions and 69 deletions.
diff --git a/app/creations/layout.tsx b/app/creations/layout.tsx
@@ -0,0 +1,14 @@
+import { SiteHeader } from "@/components/site-header"
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <SiteHeader />
+      <div className="flex-1">{children}</div>
+    </>
+  )
+}
diff --git a/app/creations/page.tsx b/app/creations/page.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function CreationsPage() {
+  return <h1>Retrouve tous tes diagrammes</h1>;
+}
diff --git a/app/edit/RightSideBar.tsx b/app/edit/RightSideBar.tsx
@@ -0,0 +1,189 @@
+import { Node } from 'reactflow';
+import { useEffect, useState } from 'react';
+import { AttributeProps, MethodProps } from './ClassBlock';
+
+interface RightSidebarProps {
+  node: Node | null;
+  updateNode: (node: Node) => void;
+}
+
+const RightSidebar: React.FC<RightSidebarProps> = ({ node, updateNode }) => {
+  const [name, setName] = useState<string>(node?.data.name || '');
+  const [type, setType] = useState<string>(node?.data.type || '');
+  const [attributes, setAttributes] = useState<AttributeProps[]>(node?.data.attributes || []);
+  const [methods, setMethods] = useState<MethodProps[]>(node?.data.methods || []);
+
+  useEffect(() => {
+    setName(node?.data.name || '');
+    setType(node?.data.type || '');
+    setAttributes(node?.data.attributes || []);
+    setMethods(node?.data.methods || []);
+  }, [node]);
+
+  useEffect(() => {
+    if (node) {
+      updateNode({
+        ...node,
+        data: {
+          ...node.data,
+          name,
+          type,
+          attributes,
+          methods
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [name, type, attributes, methods, updateNode]);
+
+  return (
+    <div id='Sidebar-right'>
+      <div>
+        <label htmlFor="name">Nom</label>
+        <input type="text" name="name" className="name" value={name} onChange={(e) => setName(e.target.value)} />
+
+        <label htmlFor="type">Type</label>
+        <select name="type" className="type" value={type} onChange={(e) => setType(e.target.value)}>
+          <option value="class">Class</option>
+          <option value="interface">Interface</option>
+          <option value="abstract">Abstract</option>
+        </select>
+        <br />
+        <label htmlFor="attributes">Attributs</label>
+        <div className="attributes">
+          {attributes.map((attribute, index) => (
+            <div key={index}>
+              <input type="text" name="name" className="name" value={attribute.name} onChange={(e) => {
+                const newAttributes = [...attributes];
+                newAttributes[index].name = e.target.value;
+                setAttributes(newAttributes);
+              }}
+              />
+              <input type="text" name="type" className="type" value={attribute.type} onChange={(e) => {
+                const newAttributes = [...attributes];
+                newAttributes[index].type = e.target.value;
+                setAttributes(newAttributes);
+              }} />
+              <select name="visibility" className="visibility" value={attribute.visibility} onChange={(e) => {
+                const newAttributes = [...attributes];
+                newAttributes[index].visibility = e.target.value;
+                setAttributes(newAttributes);
+              }}>
+                <option value="public">public</option>
+                <option value="private">private</option>
+                <option value="protected">protected</option>
+              </select>
+              <button onClick={() => {
+                const newAttributes = [...attributes];
+                newAttributes.splice(index, 1);
+                setAttributes(newAttributes);
+              }}>X</button>
+            </div>
+          ))}
+          <button onClick={() => {
+            const newAttributes = [...attributes];
+            newAttributes.push({ name: '', type: '', visibility: 'public' });
+            setAttributes(newAttributes);
+          }
+          } className='btn' >Ajouter</button>
+        </div>
+        <div>
+          <label htmlFor="methods">Methods</label>
+          <div className="methods">
+            {methods.map((method, index) => (
+              <div key={index}>
+                <input
+                  type="text"
+                  name="name"
+                  className="name"
+                  value={method.name}
+                  onChange={(e) => {
+                    const newMethods = [...methods];
+                    newMethods[index].name = e.target.value;
+                    setMethods(newMethods);
+                  }}
+                />
+                <input
+                  type="text"
+                  name="returnType"
+                  className="returnType"
+                  value={method.return}
+                  onChange={(e) => {
+                    const newMethods = [...methods];
+                    newMethods[index].return = e.target.value;
+                    setMethods(newMethods);
+                  }}
+                />
+                <select
+                  name="visibility"
+                  className="visibility"
+                  value={method.visibility}
+                  onChange={(e) => {
+                    const newMethods = [...methods];
+                    newMethods[index].visibility = e.target.value;
+                    setMethods(newMethods);
+                  }}
+                >
+                  <option value="public">public</option>
+                  <option value="private">private</option>
+                  <option value="protected">protected</option>
+                </select>
+                <div>
+                  <label>Parameters</label>
+                  {method.parameters?.map((parameter, parameterIndex) => (
+                    <div key={parameterIndex}>
+                      <input type="text" name="parameterName" className="parameterName" value={parameter.name} onChange={(e) => {
+                        const newMethods = [...methods] || [];
+                        newMethods[index].parameters[parameterIndex].name = e.target.value;
+                        setMethods(newMethods);
+                      }} />
+                      <input type="text" name="parameterType" className="parameterType" value={parameter.type} onChange={(e) => {
+                        const newMethods = [...methods];
+                        newMethods[index].parameters[parameterIndex].type = e.target.value;
+                        setMethods(newMethods);
+                      }} />
+                    </div>
+                  ))}
+                  <button
+                    onClick={() => {
+                      const newMethods = [...methods];
+                      newMethods[index].parameters?.push({
+                        name: "",
+                        type: "",
+                      });
+                      setMethods(newMethods);
+                    }}>Add Parameter</button>
+                </div>
+                <button
+                  onClick={() => {
+                    const newMethods = [...methods];
+                    newMethods.splice(index, 1);
+                    setMethods(newMethods);
+                  }}>X</button>
+              </div>
+            ))}
+            <button
+              onClick={() => {
+                const newMethods = [...methods];
+                newMethods.push({
+                  name: "",
+                  return: "",
+                  visibility: "public",
+                  parameters: [],
+                });
+                setMethods(newMethods);
+              }}
+              className="btn"
+            >
+              Ajouter
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  );
+};
+
+export default RightSidebar;
diff --git a/app/edit/layout.tsx b/app/edit/layout.tsx
@@ -0,0 +1,11 @@
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <div className="flex h-screen w-screen flex-col" suppressHydrationWarning={true} >
+      {children}
+    </div>
+  )
+}
diff --git a/app/edit/page.tsx b/app/edit/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ReactFlowProvider } from "reactflow";
+import { AppBar } from "@/components/Editor/AppBar";
+import { Editor } from "@/components/Editor/Editor";
+
+export default function EditPage() {
+  return (
+    <>
+      <ReactFlowProvider>
+        <AppBar />
+        <Editor />
+      </ReactFlowProvider>   
+    </>
+  )
+}
diff --git a/app/home/layout.tsx b/app/home/layout.tsx
@@ -0,0 +1,14 @@
+import { SiteHeader } from "@/components/site-header"
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <SiteHeader />
+      <div className="flex-1">{children}</div>
+    </>
+  )
+}
diff --git a/app/home/page.tsx b/app/home/page.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function CreationsPage() {
+  return <h1>Accueil</h1>;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -32,7 +32,7 @@ interface RootLayoutProps {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <>
-      <html lang="en" suppressHydrationWarning>
+      <html lang="fr" suppressHydrationWarning>
         {/* eslint-disable-next-line @next/next/no-head-element */}
         <head />
         <body
@@ -43,10 +43,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <div className="relative flex min-h-screen flex-col">
-              <SiteHeader />
-              <div className="flex-1">{children}</div>
+              {/* <SiteHeader /> */}
+              {children}
             </div>
-            <TailwindIndicator />
+            {/* <TailwindIndicator /> */}
           </ThemeProvider>
         </body>
       </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -6,7 +6,7 @@ import { buttonVariants } from "@/components/ui/button"
 export default function IndexPage() {
   return (
     <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
-      <div className="flex max-w-[980px] flex-col items-start gap-2">
+      <div className="flex max-w-[980px] flex-row items-start gap-2">
         {/* <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
           Beautifully designed components <br className="hidden sm:inline" />
           built with Radix UI and Tailwind CSS.
@@ -33,6 +33,13 @@ export default function IndexPage() {
         >
           GitHub
         </Link>
+        <Link
+          rel="noreferrer"
+          href="/edit"
+          className={buttonVariants({ variant: "default" })}
+        >
+            Voir l&rsquo;éditeur
+        </Link>
       </div>
     </section>
   )

diff --git a/app/profil/layout.tsx b/app/profil/layout.tsx
@@ -0,0 +1,14 @@
+import { SiteHeader } from "@/components/site-header"
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <SiteHeader />
+      <div className="flex-1">{children}</div>
+    </>
+  )
+}
diff --git a/app/profil/page.tsx b/app/profil/page.tsx
@@ -0,0 +1,3 @@
+export default function ProfilPage() {
+  return <h1>Ton profil</h1>
+}
diff --git a/components/Editor/AppBar.tsx b/components/Editor/AppBar.tsx
@@ -0,0 +1,23 @@
+import { Save } from "lucide-react";
+import { ThemeToggle } from "../theme-toggle";
+
+export function AppBar() {
+  return (
+    <div className="flex h-14 w-screen flex-row items-center justify-between border-b border-neutral-100 bg-white p-2 px-4 dark:border-white/5 dark:bg-neutral-900">
+      <div className="w-1/3"></div>
+      <div className="flex w-1/3 items-center justify-center">
+        <input
+          className="w-min rounded bg-transparent px-2 py-1 text-center text-sm outline-none duration-100 hover:bg-slate-50 focus:bg-slate-50 focus:outline-none dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"
+          placeholder="project name"
+          defaultValue={"Untitled"}
+        />
+      </div>
+      <div className="flex w-1/3 flex-row items-center justify-end gap-2">
+        <button className="rounded bg-neutral-100 p-2 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400">
+          <Save size={18} strokeWidth={2} />
+        </button>
+        <ThemeToggle />
+      </div>
+    </div>
+  );
+}