Move dashboard Pictor components to sculptor

.env.local

@@ -1,4 +1,4 @@
 EDITION=ce
 SAGITTARIUS_GRAPHQL_URL=http://localhost:3010/graphql
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.0.0-mvp.46
+NEXT_PUBLIC_PICTOR_VERSION=0.0.0-mvp.47

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.0.0-mvp.46",
+    "@code0-tech/pictor": "^0.0.0-mvp.47",
     "date-fns": "^4.1.0",
     "graphql": "^16.12.0",
     "graphql-tag": "^2.12.6",

src/app/(auth)/layout.tsx

@@ -5,8 +5,6 @@ import {
     Col,
     Container,
     ContextStoreProvider,
-    DFullScreen,
-    DUserView,
     Flex, Spacing,
     Text
 } from "@code0-tech/pictor";
@@ -16,14 +14,16 @@ import {GraphqlClient} from "@core/util/graphql-client";
 import Image from "next/image";
 import React from "react";
 import {usePersistentReactiveArrayService} from "@/hooks/usePersistentReactiveArrayService";
+import {UserView} from "@edition/user/services/User.view";
+import {FullScreen} from "@code0-tech/pictor/dist/components/fullscreen/FullScreen";
 
 export default function AuthLayout({children}: Readonly<{ children: React.ReactNode }>) {
 
     const client = useApolloClient()
-    const [store, service] = usePersistentReactiveArrayService<DUserView, UserService>("auth-users", (store) => new UserService(new GraphqlClient(client), store))
+    const [store, service] = usePersistentReactiveArrayService<UserView, UserService>("auth-users", (store) => new UserService(new GraphqlClient(client), store))
 
     return (
-        <DFullScreen>
+        <FullScreen>
             <AuroraBackground/>
             <ContextStoreProvider services={[[store, service]]}>
                 <Container h={"100%"} w={"100%"}>
@@ -61,6 +61,6 @@ export default function AuthLayout({children}: Readonly<{ children: React.ReactN
                 </Flex>
             </div>
 
-        </DFullScreen>
+        </FullScreen>
     );
 }

src/app/(dashboard)/layout.tsx

@@ -5,16 +5,7 @@ import {useApolloClient} from "@apollo/client/react";
 import {
     AuroraBackground,
     ContextStoreProvider,
-    DLayout,
-    DNamespaceMemberView,
-    DNamespaceProjectView,
-    DNamespaceRoleView,
-    DNamespaceView,
-    DOrganizationView,
-    DRuntimeView,
-    DUserView,
-    Flex,
-    useUserSession
+    Flex
 } from "@code0-tech/pictor";
 import {UserService} from "@edition/user/services/User.service";
 import {GraphqlClient} from "@core/util/graphql-client";
@@ -28,6 +19,15 @@ import {ProjectService} from "@edition/project/services/Project.service";
 import {RoleService} from "@edition/role/services/Role.service";
 import Image from "next/image";
 import {Application, ApplicationService} from "@edition/application/services/Application.service";
+import {useUserSession} from "@edition/user/hooks/User.session.hook";
+import {UserView} from "@edition/user/services/User.view";
+import {OrganizationView} from "@edition/organization/services/Organization.view";
+import {MemberView} from "@edition/member/services/Member.view";
+import {NamespaceView} from "@edition/namespace/services/Namespace.view";
+import {RuntimeView} from "@edition/runtime/services/Runtime.view";
+import {ProjectView} from "@edition/project/services/Project.view";
+import {RoleView} from "@edition/role/services/Role.view";
+import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
 
 interface ApplicationLayoutProps {
     children: React.ReactNode
@@ -43,19 +43,19 @@ const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, bar, tab
 
     const graphqlClient = React.useMemo(() => new GraphqlClient(client), [client])
 
-    const user = usePersistentReactiveArrayService<DUserView, UserService>(`dashboard::users::${currentSession?.id}`, (store) => new UserService(graphqlClient, store))
-    const organization = usePersistentReactiveArrayService<DOrganizationView, OrganizationService>(`dashboard::organizations::${currentSession?.id}`, (store) => new OrganizationService(graphqlClient, store))
-    const member = usePersistentReactiveArrayService<DNamespaceMemberView, MemberService>(`dashboard::members::${currentSession?.id}`, (store) => new MemberService(graphqlClient, store))
-    const namespace = usePersistentReactiveArrayService<DNamespaceView, NamespaceService>(`dashboard::namespaces::${currentSession?.id}`, (store) => new NamespaceService(graphqlClient, store))
-    const runtime = usePersistentReactiveArrayService<DRuntimeView, RuntimeService>(`dashboard::global_runtimes::${currentSession?.id}`, (store) => new RuntimeService(graphqlClient, store))
-    const project = usePersistentReactiveArrayService<DNamespaceProjectView, ProjectService>(`dashboard::projects::${currentSession?.id}`, (store) => new ProjectService(graphqlClient, store))
-    const role = usePersistentReactiveArrayService<DNamespaceRoleView, RoleService>(`dashboard::roles::${currentSession?.id}`, (store) => new RoleService(graphqlClient, store))
+    const user = usePersistentReactiveArrayService<UserView, UserService>(`dashboard::users::${currentSession?.id}`, (store) => new UserService(graphqlClient, store))
+    const organization = usePersistentReactiveArrayService<OrganizationView, OrganizationService>(`dashboard::organizations::${currentSession?.id}`, (store) => new OrganizationService(graphqlClient, store))
+    const member = usePersistentReactiveArrayService<MemberView, MemberService>(`dashboard::members::${currentSession?.id}`, (store) => new MemberService(graphqlClient, store))
+    const namespace = usePersistentReactiveArrayService<NamespaceView, NamespaceService>(`dashboard::namespaces::${currentSession?.id}`, (store) => new NamespaceService(graphqlClient, store))
+    const runtime = usePersistentReactiveArrayService<RuntimeView, RuntimeService>(`dashboard::global_runtimes::${currentSession?.id}`, (store) => new RuntimeService(graphqlClient, store))
+    const project = usePersistentReactiveArrayService<ProjectView, ProjectService>(`dashboard::projects::${currentSession?.id}`, (store) => new ProjectService(graphqlClient, store))
+    const role = usePersistentReactiveArrayService<RoleView, RoleService>(`dashboard::roles::${currentSession?.id}`, (store) => new RoleService(graphqlClient, store))
     const application = usePersistentReactiveArrayService<Application, ApplicationService>(`dashboard::application::${currentSession?.id}`, (store) => new ApplicationService(graphqlClient, store))
 
     if (currentSession === null) router.push("/login")
 
     return <ContextStoreProvider services={[user, organization, member, namespace, runtime, project, role, application]}>
-        <DLayout style={{zIndex: 0}} layoutGap={"0"} showLayoutSplitter={false} leftContent={
+        <Layout style={{zIndex: 0}} layoutGap={"0"} showLayoutSplitter={false} leftContent={
             <Flex p={0.7} pt={1} align={"center"} style={{flexDirection: "column", gap: "0.7rem"}}>
                 <div style={{
                     position: "absolute",
@@ -83,12 +83,12 @@ const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, bar, tab
                 {tab}
             </Flex>
         }>
-            <DLayout px={0.7} layoutGap={"0"} topContent={<>{bar}</>}>
-                <DLayout>
+            <Layout px={0.7} layoutGap={"0"} topContent={<>{bar}</>}>
+                <Layout>
                     <>{children}</>
-                </DLayout>
-            </DLayout>
-        </DLayout>
+                </Layout>
+            </Layout>
+        </Layout>
     </ContextStoreProvider>
 }
 

src/app/(flow)/@tab/namespace/[namespaceId]/project/[projectId]/default.tsx

@@ -2,10 +2,9 @@
 
 import {Tab, TabList, TabTrigger} from "@code0-tech/pictor/dist/components/tab/Tab";
 import {Button, Text, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger} from "@code0-tech/pictor";
-import {IconBuilding, IconHome, IconSettings} from "@tabler/icons-react";
+import {IconHome, IconSettings} from "@tabler/icons-react";
 import React from "react";
 import {useParams, usePathname, useRouter} from "next/navigation";
-import {hashToColor} from "@code0-tech/pictor/dist/components/d-flow/DFlow.util";
 
 export default function Page() {
 
@@ -45,7 +44,8 @@ export default function Page() {
             <Tooltip>
                 <TooltipTrigger asChild>
                     <TabTrigger value={"settings"} asChild={true}>
-                        <Button variant={"none"} paddingSize={"xs"} onClick={() => router.push(`/namespace/${namespaceId}/project/${projectId}/settings`)}>
+                        <Button variant={"none"} paddingSize={"xs"}
+                                onClick={() => router.push(`/namespace/${namespaceId}/project/${projectId}/settings`)}>
                             <IconSettings size={16}/>
                         </Button>
                     </TabTrigger>

src/app/(flow)/layout.tsx

@@ -5,19 +5,7 @@ import {useParams, useRouter} from "next/navigation";
 import {
     AuroraBackground,
     ContextStoreProvider,
-    DataTypeView,
-    DLayout,
-    DNamespaceMemberView,
-    DNamespaceProjectView,
-    DNamespaceRoleView,
-    DNamespaceView,
-    DOrganizationView,
-    DRuntimeView,
-    DUserView,
     Flex,
-    FlowTypeView,
-    FunctionDefinitionView,
-    useUserSession
 } from "@code0-tech/pictor";
 import React from "react";
 import {GraphqlClient} from "@core/util/graphql-client";
@@ -33,12 +21,24 @@ import {RoleService} from "@edition/role/services/Role.service";
 import {FlowService} from "@edition/flow/services/Flow.service";
 import {FunctionService} from "@edition/function/services/Function.service";
 import {DatatypeService} from "@edition/datatype/services/Datatype.service";
-import {FlowTypeService} from "@edition/flowtype/services/FlowTypeService";
+import {FlowTypeService} from "@edition/flowtype/services/FlowType.service";
 import {FileTabsView} from "@code0-tech/pictor/dist/components/file-tabs/FileTabs.view";
 import {FileTabsService} from "@code0-tech/pictor/dist/components/file-tabs/FileTabs.service";
 import Image from "next/image";
+import {UserView} from "@edition/user/services/User.view";
+import {OrganizationView} from "@edition/organization/services/Organization.view";
+import {MemberView} from "@edition/member/services/Member.view";
+import {NamespaceView} from "@edition/namespace/services/Namespace.view";
+import {RuntimeView} from "@edition/runtime/services/Runtime.view";
+import {ProjectView} from "@edition/project/services/Project.view";
+import {RoleView} from "@edition/role/services/Role.view";
+import {FunctionView} from "@edition/function/services/Function.view";
+import {DataTypeView} from "@edition/datatype/services/DataType.view";
+import {FlowTypeView} from "@edition/flowtype/services/FlowType.view";
+import {useUserSession} from "@edition/user/hooks/User.session.hook";
+import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
 
-export default function Layout({bar, tab, children}: {
+export default function FlowLayout({bar, tab, children}: {
     bar: React.ReactNode,
     tab: React.ReactNode,
     children: React.ReactNode
@@ -59,15 +59,15 @@ export default function Layout({bar, tab, children}: {
 
     if (currentSession === null) router.push("/login")
 
-    const user = usePersistentReactiveArrayService<DUserView, UserService>(`dashboard::users::${currentSession?.id}`, (store) => new UserService(graphqlClient, store))
-    const organization = usePersistentReactiveArrayService<DOrganizationView, OrganizationService>(`dashboard::organizations::${currentSession?.id}`, (store) => new OrganizationService(graphqlClient, store))
-    const member = usePersistentReactiveArrayService<DNamespaceMemberView, MemberService>(`dashboard::members::${currentSession?.id}`, (store) => new MemberService(graphqlClient, store))
-    const namespace = usePersistentReactiveArrayService<DNamespaceView, NamespaceService>(`dashboard::namespaces::${currentSession?.id}`, (store) => new NamespaceService(graphqlClient, store))
-    const runtime = usePersistentReactiveArrayService<DRuntimeView, RuntimeService>(`dashboard::global_runtimes::${currentSession?.id}`, (store) => new RuntimeService(graphqlClient, store))
-    const project = usePersistentReactiveArrayService<DNamespaceProjectView, ProjectService>(`dashboard::projects::${currentSession?.id}`, (store) => new ProjectService(graphqlClient, store))
-    const role = usePersistentReactiveArrayService<DNamespaceRoleView, RoleService>(`dashboard::roles::${currentSession?.id}`, (store) => new RoleService(graphqlClient, store))
+    const user = usePersistentReactiveArrayService<UserView, UserService>(`dashboard::users::${currentSession?.id}`, (store) => new UserService(graphqlClient, store))
+    const organization = usePersistentReactiveArrayService<OrganizationView, OrganizationService>(`dashboard::organizations::${currentSession?.id}`, (store) => new OrganizationService(graphqlClient, store))
+    const member = usePersistentReactiveArrayService<MemberView, MemberService>(`dashboard::members::${currentSession?.id}`, (store) => new MemberService(graphqlClient, store))
+    const namespace = usePersistentReactiveArrayService<NamespaceView, NamespaceService>(`dashboard::namespaces::${currentSession?.id}`, (store) => new NamespaceService(graphqlClient, store))
+    const runtime = usePersistentReactiveArrayService<RuntimeView, RuntimeService>(`dashboard::global_runtimes::${currentSession?.id}`, (store) => new RuntimeService(graphqlClient, store))
+    const project = usePersistentReactiveArrayService<ProjectView, ProjectService>(`dashboard::projects::${currentSession?.id}`, (store) => new ProjectService(graphqlClient, store))
+    const role = usePersistentReactiveArrayService<RoleView, RoleService>(`dashboard::roles::${currentSession?.id}`, (store) => new RoleService(graphqlClient, store))
     const flow = usePersistentReactiveArrayService<Flow, FlowService>(`dashboard::flows::${currentSession?.id}`, (store) => new FlowService(graphqlClient, store))
-    const functions = usePersistentReactiveArrayService<FunctionDefinitionView, FunctionService>(`dashboard::functions::${currentSession?.id}`, (store) => new FunctionService(graphqlClient, store))
+    const functions = usePersistentReactiveArrayService<FunctionView, FunctionService>(`dashboard::functions::${currentSession?.id}`, (store) => new FunctionService(graphqlClient, store))
     const datatype = usePersistentReactiveArrayService<DataTypeView, DatatypeService>(`dashboard::datatypes::${currentSession?.id}`, (store) => new DatatypeService(graphqlClient, store))
     const flowtype = usePersistentReactiveArrayService<FlowTypeView, FlowTypeService>(`dashboard::flowtypes::${currentSession?.id}`, (store) => new FlowTypeService(graphqlClient, store))
     const file = usePersistentReactiveArrayService<FileTabsView, FileTabsService>(`dashboard::files::${flowId}`, FileTabsService, [])
@@ -86,7 +86,7 @@ export default function Layout({bar, tab, children}: {
 
     return <ContextStoreProvider
         services={[user, organization, member, namespace, runtime, project, role, flow, functions, datatype, flowtype, file]}>
-        <DLayout layoutGap={0} style={{zIndex: 0}} showLayoutSplitter={false} leftContent={
+        <Layout layoutGap={0} style={{zIndex: 0}} showLayoutSplitter={false} leftContent={
             <Flex p={0.7} pt={1} align={"center"} style={{flexDirection: "column", gap: "0.7rem"}}>
                 <div style={{
                     position: "absolute",
@@ -114,13 +114,13 @@ export default function Layout({bar, tab, children}: {
                 {tab}
             </Flex>
         }>
-            <DLayout px={0.7} layoutGap={"0"} topContent={<>{bar}</>}>
-                <DLayout>
+            <Layout px={0.7} layoutGap={"0"} topContent={<>{bar}</>}>
+                <Layout>
                     <>
                         {children}
                     </>
-                </DLayout>
-            </DLayout>
-        </DLayout>
+                </Layout>
+            </Layout>
+        </Layout>
     </ContextStoreProvider>
 }