Feat/#395

package.json

@@ -114,5 +114,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0"
   }
 }

src/components/d-flow/suggestions/DFlowSuggestionMenu.stories.tsx

@@ -0,0 +1,54 @@
+import {Meta} from "@storybook/react";
+import React from "react";
+import {DataTypeView} from "../data-type/DFlowDataType.view";
+import {FunctionDefinitionView} from "../function/DFlowFunction.view";
+import {FlowView} from "../DFlow.view";
+import {ContextStoreProvider} from "../../../utils/contextStore";
+import {useReactiveArrayService} from "../../../utils/reactiveArrayService";
+import {DFlowDataTypeReactiveService} from "../data-type/DFlowDataType.service";
+import {DFlowFunctionReactiveService} from "../function/DFlowFunction.service";
+import {DFlowReactiveService} from "../DFlow.service";
+import {DFlowReactiveSuggestionService} from "./DFlowSuggestion.service";
+import {DFlowSuggestion} from "./DFlowSuggestion.view";
+import {useSuggestions} from "./DFlowSuggestion.hook";
+import TextInput from "../../form/TextInput";
+import {DFlowSuggestionMenuFooter} from "./DFlowSuggestionMenuFooter";
+import {toInputSuggestions} from "./DFlowSuggestionMenu.util";
+
+export default {
+    title: "DFlowSuggestionMenuWithInput",
+} as Meta
+
+export const Example = () => {
+
+    const functionsData: FunctionDefinitionView[] = functionData.map((fd) => new FunctionDefinitionView(fd))
+
+    const [dataTypeStore, dataTypeService] = useReactiveArrayService<DataTypeView, DFlowDataTypeReactiveService>(DFlowDataTypeReactiveService)
+    const [functionStore, functionService] = useReactiveArrayService<FunctionDefinitionView, DFlowFunctionReactiveService>(DFlowFunctionReactiveService, functionsData);
+    const [flowStore, flowService] = useReactiveArrayService<FlowView, DFlowReactiveService>(DFlowReactiveService, [new FlowView(flow)]);
+    const [suggestionStore, suggestionService] = useReactiveArrayService<DFlowSuggestion, DFlowReactiveSuggestionService>(DFlowReactiveSuggestionService);
+
+    React.useEffect(() => {
+        dataTypes.forEach(dt => dataTypeService.add(new DataTypeView(dt, dataTypeService)));
+    }, [dataTypeService])
+
+    return <ContextStoreProvider
+        services={[[dataTypeStore, dataTypeService], [functionStore, functionService], [flowStore, flowService], [suggestionStore, suggestionService]]}>
+        {React.useMemo(() => <SuggestionMenu/>, [])}
+    </ContextStoreProvider>
+}
+
+const SuggestionMenu = () => {
+
+    const result = useSuggestions({dataType: {identifier: "NUMBER"}}, [], "some_database_id", 0, [0])
+
+    return <div>
+        <TextInput title={"Text"}
+                   clearable
+                   transformValue={(value) => <span style={{color: "red"}}>{value}</span>}
+                   suggestionsFooter={<DFlowSuggestionMenuFooter/>}
+                   suggestions={toInputSuggestions(result)}
+                   description={"Type what ever text you like"}
+                   placeholder={"code0.tech"}/>
+    </div>
+}

src/components/d-namespace/project/DNamespaceProjectCard.stories.tsx

@@ -0,0 +1,61 @@
+import {Meta, StoryObj} from "@storybook/react";
+import React from "react";
+import DNamespaceProjectCard from "./DNamespaceProjectCard"
+import {ContextStoreProvider} from "../../../utils/contextStore"
+import {useReactiveArrayService} from "../../../utils/reactiveArrayService"
+import {DNamespaceProjectView} from "./DNamespaceProject.view"
+import {DNamespaceProjectReactiveService} from "./DNamespaceProject.service"
+import {
+    NamespacesProjectsAssignRuntimesInput,
+    NamespacesProjectsCreateInput, NamespacesProjectsDeleteInput
+} from "@code0-tech/sagittarius-graphql-types"
+
+const meta: Meta = {
+    title: "DNamespaceProjectCard",
+    component: DNamespaceProjectCard
+}
+
+export default meta
+
+type DNamespaceProjectCardStory = StoryObj<typeof DNamespaceProjectCard>;
+
+export class DNamespaceProjectReactiveServiceExtended extends DNamespaceProjectReactiveService {
+    projectAssignRuntimes(payload: NamespacesProjectsAssignRuntimesInput): DNamespaceProjectView | undefined {
+        throw new Error("Method not implemented.");
+    }
+    projectsCreate(payload: NamespacesProjectsCreateInput): DNamespaceProjectView | undefined {
+        throw new Error("Method not implemented.");
+    }
+    projectsDelete(payload: NamespacesProjectsDeleteInput): void {
+        throw new Error("Method not implemented.");
+    }
+
+}
+
+export const DNamespaceProjectCardExample: DNamespaceProjectCardStory = {
+    render: (props) => {
+
+        const [projectStore, projectService] = useReactiveArrayService<DNamespaceProjectView, DNamespaceProjectReactiveServiceExtended>(DNamespaceProjectReactiveServiceExtended, [{
+            id: "gid://sagittarius/NamespaceProject/1",
+            name: "Example Project",
+            description: "This is an example project description.",
+            createdAt: new Date().toString(),
+            updatedAt: new Date().toString(),
+            namespace: {
+                id: "gid://sagittarius/Namespace/1"
+            },
+            flow: undefined,
+            flows: undefined,
+            primaryRuntime: undefined,
+            runtimes: undefined
+        }])
+
+        return (
+            <ContextStoreProvider services={[[projectStore, projectService]]}>
+                {React.useMemo(() => {
+                    return <DNamespaceProjectCard projectId={"gid://sagittarius/NamespaceProject/1"}/>
+                }, [])}
+            </ContextStoreProvider>
+        )
+    }
+}

src/components/d-namespace/project/DNamespaceProjectCard.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import React from "react"
+import {Code0Component} from "../../../utils/types"
+import {
+    NamespacesProjectsAssignRuntimesInput,
+    NamespacesProjectsCreateInput, NamespacesProjectsDeleteInput,
+    Scalars
+} from "@code0-tech/sagittarius-graphql-types"
+import {Card} from "../../../index"
+import Text from "../../text/Text"
+import {IconBox} from "@tabler/icons-react"
+import Row from "../../row/Row"
+import Col from "../../col/Col"
+import {format} from "date-fns"
+import {useService, useStore} from "../../../utils/contextStore"
+import {DNamespaceProjectReactiveService} from "./DNamespaceProject.service"
+import {DNamespaceProjectView} from "./DNamespaceProject.view"
+
+export interface DNamespaceProjectCardProps extends Code0Component<HTMLDivElement> {
+    projectId: Scalars['NamespaceProjectID']['output']
+}
+
+const DNamespaceProjectCard: React.FC<DNamespaceProjectCardProps> = props => {
+    const projectStore = useStore(DNamespaceProjectReactiveService)
+    const projectService = useService(DNamespaceProjectReactiveService)
+
+    const project = projectService.findById(props.projectId)
+
+    return React.useMemo(() => {
+        return (
+            <Card style={{ padding: "16px"}} width={"100%"}>
+                <Row style={{ alignItems: "center" }}>
+                    <IconBox size={52}/>
+                    <Col style={{minWidth: 0, flex: 1}}>
+                        <Text size={"lg"} hierarchy={"primary"} style={{overflow: "hidden", display: "block", marginBottom: ".25rem", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
+                            {project?.name}
+                        </Text>
+                        <Text size={"md"} hierarchy={"secondary"} style={{overflow: "hidden", display: "block", marginBottom: ".25rem", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
+                            {project?.description}
+                        </Text>
+                        <Text size={"sm"} hierarchy={"tertiary"} style={{display: "block", marginTop: ".75rem"}}>
+                            {format(new Date(project?.updatedAt ?? ""), "dd/MM/yyyy HH:mm")}
+                        </Text>
+                    </Col>
+                </Row>
+            </Card>
+        )
+    }, [projectStore])
+}
+
+export default DNamespaceProjectCard

src/components/d-namespace/project/DNamespaceProjectMenu.stories.tsx

@@ -0,0 +1,81 @@
+import {Meta, StoryObj} from "@storybook/react"
+import DNamespaceProjectMenu from "./DNamespaceProjectMenu"
+import {DNamespaceProjectReactiveService} from "./DNamespaceProject.service"
+import {
+    NamespacesProjectsAssignRuntimesInput,
+    NamespacesProjectsCreateInput, NamespacesProjectsDeleteInput
+} from "@code0-tech/sagittarius-graphql-types"
+import {DNamespaceProjectView} from "./DNamespaceProject.view"
+import {ContextStoreProvider} from "../../../utils/contextStore"
+import React from "react"
+import {useReactiveArrayService} from "../../../utils/reactiveArrayService"
+
+const meta: Meta = {
+    title: "DNamespaceProjectMenu",
+    component: DNamespaceProjectMenu
+}
+
+export default meta
+
+type DNamespaceProjectMenuStory = StoryObj<typeof DNamespaceProjectMenu>;
+
+export class DNamespaceProjectReactiveServiceExtended extends DNamespaceProjectReactiveService {
+    projectAssignRuntimes(payload: NamespacesProjectsAssignRuntimesInput): DNamespaceProjectView | undefined {
+        throw new Error("Method not implemented.");
+    }
+    projectsCreate(payload: NamespacesProjectsCreateInput): DNamespaceProjectView | undefined {
+        throw new Error("Method not implemented.");
+    }
+    projectsDelete(payload: NamespacesProjectsDeleteInput): void {
+        throw new Error("Method not implemented.");
+    }
+
+}
+
+export const DProjectMenuExample: DNamespaceProjectMenuStory = {
+    render: (props) => {
+
+        const [projectStore, projectService] = useReactiveArrayService<DNamespaceProjectView, DNamespaceProjectReactiveServiceExtended>(DNamespaceProjectReactiveServiceExtended, [
+        {
+            id: "gid://sagittarius/NamespaceProject/1",
+            name: "Example Project",
+            description: "This is an example project description.",
+            createdAt: new Date().toString(),
+            updatedAt: new Date().toString(),
+            namespace: {
+                id: "gid://sagittarius/Namespace/1"
+            },
+            flow: undefined,
+            flows: undefined,
+            primaryRuntime: undefined,
+            runtimes: undefined
+        },
+        {
+            id: "gid://sagittarius/NamespaceProject/2",
+            name: "Another Project",
+            description: "This is another project description.",
+            createdAt: new Date().toString(),
+            updatedAt: new Date().toString(),
+            namespace: {
+                id: "gid://sagittarius/Namespace/1"
+            },
+            flow: undefined,
+            flows: undefined,
+            primaryRuntime: undefined,
+            runtimes: undefined
+        }])
+
+        return (
+            <ContextStoreProvider services={[[projectStore, projectService]]}>
+                {React.useMemo(() => {
+                    return (
+                        <DNamespaceProjectMenu
+                            projectId={"gid://sagittarius/NamespaceProject/1"}
+                            onProjectSelect={props.onProjectSelect}
+                        />
+                    )
+                }, [])}
+            </ContextStoreProvider>
+        )
+    }
+}

src/components/d-namespace/project/DNamespaceProjectMenu.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import React from "react"
+import {Menu, MenuContent, MenuItem, MenuPortal, MenuProps, MenuTrigger} from "../../menu/Menu"
+import {DNamespaceProjectView} from "./DNamespaceProject.view"
+import {DNamespaceProjectReactiveService} from "./DNamespaceProject.service"
+import {useService} from "../../../utils/contextStore"
+import {Scalars} from "@code0-tech/sagittarius-graphql-types"
+import Button from "../../button/Button"
+
+export interface DNamespaceProjectMenuProps extends MenuProps {
+    projectId: Scalars['NamespaceProjectID']['output']
+    onProjectSelect: (payload: DNamespaceProjectView) => void
+}
+
+const DNamespaceProjectMenu: React.FC<DNamespaceProjectMenuProps> = props => {
+    const projectService = useService(DNamespaceProjectReactiveService)
+    const projectStore = useService(DNamespaceProjectReactiveService)
+    const currentProject = projectService.findById(props.projectId)
+
+    return React.useMemo(() => {
+        return (
+            <Menu {...props}>
+                <MenuTrigger asChild>
+                    <Button variant={"none"} style={{background: "transparent"}}>
+                        {currentProject?.name}
+                    </Button>
+                </MenuTrigger>
+                <MenuPortal>
+                    <MenuContent side={"bottom"} align={"start"} sideOffset={0}>
+                    {projectService.values().map((project) => (
+                        <MenuItem
+                            key={project.id}
+                            onSelect={() => props.onProjectSelect(project)}
+                        >
+                            {project.name}
+                        </MenuItem>
+                    ))}
+                    </MenuContent>
+                </MenuPortal>
+            </Menu>
+        )
+    }, [projectStore])
+}
+
+export default DNamespaceProjectMenu

src/components/d-organization/DOrganizationCard.stories.tsx

@@ -0,0 +1,56 @@
+import {Meta, StoryObj} from "@storybook/react"
+import React from "react"
+import DOrganizationCard from "./DOrganizationCard"
+import {ContextStoreProvider} from "../../utils/contextStore"
+import {useReactiveArrayService} from "../../utils/reactiveArrayService"
+import {DOrganizationView} from "./DOrganizationView"
+import {DOrganizationReactiveService} from "./DOrganizationService"
+import { OrganizationsCreateInput, OrganizationsDeleteInput, OrganizationsUpdateInput } from "@code0-tech/sagittarius-graphql-types"
+
+const meta: Meta = {
+    title: "DOrganizationCard",
+    component: DOrganizationCard
+}
+
+export default meta
+
+type DOrganizationCardStory = StoryObj<typeof DOrganizationCard>;
+
+class DOrganizationReactiveServiceExtended extends DOrganizationReactiveService {
+    organizationCreate(payload: OrganizationsCreateInput): DOrganizationView | undefined {
+        throw new Error("Method not implemented.");
+    }
+    organizationDelete(payload: OrganizationsDeleteInput): void {
+        throw new Error("Method not implemented.");
+    }
+    organizationUpdate(payload: OrganizationsUpdateInput): DOrganizationView | undefined {
+        throw new Error("Method not implemented.");
+    }
+
+}
+
+export const DOrganizationCardExample: DOrganizationCardStory = {
+    render: (props) => {
+
+        const [organizationStore, organizationService] = useReactiveArrayService<DOrganizationView, DOrganizationReactiveServiceExtended>(DOrganizationReactiveServiceExtended, [{
+            id: "gid://sagittarius/Organization/1",
+            name: "Example Organization",
+            namespace: {
+                id: "gid://sagittarius/Namespace/1",
+                projects: {
+                  count: 5
+                }
+            },
+            createdAt: new Date().toString(),
+            updatedAt: new Date().toString()
+        }])
+
+        return (
+            <ContextStoreProvider services={[[organizationStore, organizationService]]}>
+                {React.useMemo(() => {
+                    return <DOrganizationCard organizationId={"gid://sagittarius/Organization/1"}/>
+                }, [])}
+            </ContextStoreProvider>
+        )
+    }
+}