Improve Flow UI

package.json

@@ -21,7 +21,7 @@
     "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-transform-class-properties": "^7.27.1",
     "@code0-tech/definition-reader": "^0.0.18",
-    "@code0-tech/sagittarius-graphql-types": "^0.0.0-c63274fdd34593b8aa24f9f977659fd3d6270150",
+    "@code0-tech/sagittarius-graphql-types": "^0.0.0-968478cecf351385c6c13c2be8aeae5c45da026c",
     "@dagrejs/dagre": "^2.0.0",
     "@mdx-js/react": "^3.1.1",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -94,7 +94,7 @@
   "types": "dist/index.d.ts",
   "peerDependencies": {
     "@ariakit/react": "^0.4.5",
-    "@code0-tech/sagittarius-graphql-types": "^0.0.0-c63274fdd34593b8aa24f9f977659fd3d6270150",
+    "@code0-tech/sagittarius-graphql-types": "^0.0.0-968478cecf351385c6c13c2be8aeae5c45da026c",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -118,5 +118,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@radix-ui/react-context-menu": "^2.2.16"
   }
 }

src/components/badge/Badge.style.scss

@@ -12,6 +12,12 @@
   height: fit-content;
   vertical-align: middle;
 
+  @if (var(--badge-color)) {
+    background-color: var(--badge-color-background);
+    border: 1px solid var(--badge-color-border);
+    color: var(--badge-color);
+  }
+
   & {
     @include helpers.fontStyle();
     @include helpers.borderRadius()

src/components/badge/Badge.tsx

@@ -3,18 +3,91 @@ import "./Badge.style.scss"
 import {Code0Component, Color} from "../../utils/types";
 import {mergeCode0Props} from "../../utils/utils";
 
-export interface BadgeType extends Code0Component<HTMLSpanElement>{
+export interface BadgeType extends Code0Component<HTMLSpanElement> {
     children: React.ReactNode
-    //defaults to primary
-    color?: Color
+    // defaults to primary
+    color?: Color | string
     border?: boolean
 }
 
+type RGBA = {
+    r: number
+    g: number
+    b: number
+    a: number
+}
+
 export const Badge: React.FC<BadgeType> = (props) => {
-    
+
     const {color = "primary", border = false, children, ...args} = props
-
-    return <span {...mergeCode0Props(`badge badge--${color} ${!border ? "badge--border" : ""}`, args)}>
-        {children}
-    </span>
+
+    return (
+        <span
+            {...mergeCode0Props(
+                `badge badge--${color} ${!border ? "badge--border" : ""}`,
+                {
+                    ...args,
+                    style: {
+                        ...args.style,
+                        "--badge-color-background": mixColorRgb(color, 9),
+                        "--badge-color-border": withAlpha(color, 0.1),
+                        "--badge-color": withAlpha(color, 1),
+                    },
+                }
+            )}
+        >
+            {children}
+        </span>
+    )
+}
+
+/* ===========================
+   Color utilities
+   =========================== */
+
+const clamp01 = (v: number) => Math.min(Math.max(v, 0), 1)
+
+const parseCssColorToRgba = (color: string): RGBA => {
+    if (typeof document === "undefined") {
+        return {r: 0, g: 0, b: 0, a: 1}
+    }
+
+    const el = document.createElement("span")
+    el.style.color = color
+    document.body.appendChild(el)
+
+    const computed = getComputedStyle(el).color
+    document.body.removeChild(el)
+
+    const match = computed.match(
+        /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/
+    )
+
+    if (!match) {
+        return {r: 0, g: 0, b: 0, a: 1}
+    }
+
+    return {
+        r: Math.round(Number(match[1])),
+        g: Math.round(Number(match[2])),
+        b: Math.round(Number(match[3])),
+        a: match[4] !== undefined ? Number(match[4]) : 1,
+    }
+}
+
+const mixColorRgb = (color: string, level: number) => {
+    const w = clamp01(level * 0.1)
+
+    const c1 = parseCssColorToRgba(color)
+    const c2 = parseCssColorToRgba("#030014")
+
+    const mix = (a: number, b: number) =>
+        Math.round(a * (1 - w) + b * w)
+
+    return `rgb(${mix(c1.r, c2.r)}, ${mix(c1.g, c2.g)}, ${mix(c1.b, c2.b)})`
+}
+
+const withAlpha = (color: string, alpha: number) => {
+    const c = parseCssColorToRgba(color)
+    return `rgba(${c.r}, ${c.g}, ${c.b}, ${clamp01(alpha)})`
 }

src/components/button/Button.style.scss

@@ -34,7 +34,7 @@
         }
       }
 
-      &:active, &:focus, &[aria-selected=true] {
+      &:active, &:focus, &[aria-selected=true], &[data-state=open] {
         @if ($color == variables.$primary) {
           border-color: rgba(variables.$secondary, 0.2);
         } @else {
@@ -51,7 +51,7 @@
         background: helpers.backgroundColor($color, 1.5);
       }
 
-      &:active, &:focus, &[aria-selected=true] {
+      &:active, &:focus, &[aria-selected=true], &[data-state=open] {
         background: helpers.backgroundColor($color, 2);
       }
     }

src/components/context-menu/ContextMenu.stories.tsx

@@ -0,0 +1,9 @@
+import {ContextMenu} from "./ContextMenu";
+import {Meta} from "@storybook/react-vite";
+
+const meta: Meta<typeof ContextMenu> = {
+    title: 'Components/ContextMenu',
+    component: ContextMenu,
+}
+
+export default meta

src/components/context-menu/ContextMenu.style.scss

@@ -0,0 +1,70 @@
+@use "../../styles/helpers";
+@use "../../styles/box";
+@use "../../styles/variables";
+
+.context-menu {
+
+  &__content, &__sub-content {
+    padding: variables.$xxs;
+    position: relative;
+    box-sizing: border-box;
+    z-index: 999;
+
+    & {
+      @include helpers.borderRadius();
+    }
+  }
+
+  &__label {
+    text-transform: uppercase;
+    font-size: variables.$xs;
+    display: flex;
+    gap: variables.$xxs;
+    align-items: center;
+    padding: variables.$xxs variables.$xs;
+    color: helpers.color();
+
+    & {
+      @include helpers.fontStyle();
+    }
+  }
+
+  &__item, &__sub-trigger {
+    border-radius: variables.$borderRadius - variables.$xxs;
+    padding: variables.$xxs variables.$xs;
+    gap: variables.$xs;
+    cursor: pointer;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: variables.$sm;
+
+    & {
+      @include box.box(variables.$primary, variables.$white, variables.$primary);
+      @include helpers.noFocusStyle();
+      @include helpers.fontStyle();
+      @include helpers.disabled();
+      border: none;
+    }
+
+    &:focus, &[data-focus=true] {
+      @include box.box(variables.$white, variables.$white, variables.$white);
+      border: none;
+      width: 100%;
+    }
+  }
+
+  &__separator {
+    border: none;
+    margin: variables.$xxs 0;
+    color: rgba(white, .1);
+    height: 1px;
+    background-color: rgba(white, .1);
+  }
+}
+
+@each $name, $color in variables.$colors {
+  .context-menu__content--#{$name}, .context-menu__sub-content--#{$name} {
+    @include box.box($color);
+  }
+}

src/components/context-menu/ContextMenu.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import React from "react";
+import {Code0ComponentProps, Color, mergeCode0Props} from "../../utils";
+import * as Radix from "@radix-ui/react-context-menu";
+import "./ContextMenu.style.scss"
+import {Card} from "../card/Card";
+import {Flex} from "../flex/Flex";
+import {Badge} from "../badge/Badge";
+import {IconArrowDown, IconArrowUp, IconCornerDownLeft} from "@tabler/icons-react";
+import {Spacing} from "../spacing/Spacing";
+
+export type ContextMenuProps = Code0ComponentProps & Radix.ContextMenuProps
+export type ContextMenuTriggerProps = Code0ComponentProps & Radix.ContextMenuTriggerProps
+export type ContextMenuPortalProps = Code0ComponentProps & Radix.ContextMenuPortalProps
+export type ContextMenuContentProps = Code0ComponentProps & Radix.ContextMenuContentProps & {
+    color?: Color
+}
+export type ContextMenuLabelProps = Code0ComponentProps & Radix.ContextMenuLabelProps
+export type ContextMenuItemProps = Code0ComponentProps & Radix.ContextMenuItemProps
+export type ContextMenuGroupProps = Code0ComponentProps & Radix.ContextMenuGroupProps
+export type ContextMenuSubProps = Code0ComponentProps & Radix.ContextMenuSubProps
+export type ContextMenuSubTriggerProps = Code0ComponentProps & Radix.ContextMenuSubTriggerProps
+export type ContextMenuSubContentProps = Code0ComponentProps & Radix.ContextMenuSubContentProps & {
+    color?: Color
+}
+export type ContextMenuSeparatorProps = Code0ComponentProps & Radix.ContextMenuSeparatorProps
+export type ContextMenuArrowProps = Code0ComponentProps & Radix.ContextMenuArrowProps
+
+export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
+    return <Radix.ContextMenu {...mergeCode0Props(`context-menu`, props) as ContextMenuProps}/>
+}
+
+export const ContextMenuTrigger: React.FC<ContextMenuTriggerProps> = (props) => {
+    return <Radix.ContextMenuTrigger {...mergeCode0Props("context-menu__trigger", props) as ContextMenuTriggerProps}/>
+}
+
+export const ContextMenuPortal: React.FC<ContextMenuPortalProps> = (props) => {
+    return <Radix.ContextMenuPortal {...mergeCode0Props("context-menu__portal", props) as ContextMenuPortalProps}/>
+}
+
+export const ContextMenuContent: React.FC<ContextMenuContentProps> = (props) => {
+    return <Radix.ContextMenuContent
+        align={props.align} {...mergeCode0Props(`context-menu__content context-menu__content--${props.color ?? "secondary"}`, props) as ContextMenuContentProps}>
+        <Card paddingSize={"xxs"} mt={-0.35} mx={-0.35} style={{borderWidth: "2px"}}>
+            {props.children}
+        </Card>
+        <ContextMenuLabel>
+            <Flex style={{gap: ".35rem"}}>
+                <Flex align={"center"} style={{gap: "0.35rem"}}>
+                    <Flex>
+                        <Badge border><IconArrowUp size={12}/></Badge>
+                        <Badge border><IconArrowDown size={12}/></Badge>
+                    </Flex>
+                    move
+                </Flex>
+                <Spacing spacing={"xxs"}/>
+                <Flex align={"center"} style={{gap: ".35rem"}}>
+                    <Badge border><IconCornerDownLeft size={12}/></Badge>
+                    select
+                </Flex>
+            </Flex>
+        </ContextMenuLabel>
+    </Radix.ContextMenuContent>
+}
+
+export const ContextMenuLabel: React.FC<ContextMenuLabelProps> = (props) => {
+    return <Radix.ContextMenuLabel {...mergeCode0Props("context-menu__label", props) as ContextMenuLabelProps}/>
+}
+
+export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
+    return <Radix.ContextMenuItem {...mergeCode0Props("context-menu__item", props) as ContextMenuItemProps}/>
+}
+
+export const ContextMenuGroup: React.FC<ContextMenuGroupProps> = (props) => {
+    return <Radix.ContextMenuGroup {...mergeCode0Props("context-menu__group", props) as ContextMenuGroupProps}/>
+}
+
+export const ContextMenuSub: React.FC<ContextMenuSubProps> = (props) => {
+    return <Radix.ContextMenuSub {...mergeCode0Props("context-menu__sub", props) as ContextMenuSubProps}/>
+}
+
+export const ContextMenuSubTrigger: React.FC<ContextMenuSubTriggerProps> = (props) => {
+    return <Radix.ContextMenuSubTrigger {...mergeCode0Props("context-menu__sub-trigger", props) as ContextMenuSubTriggerProps}/>
+}
+
+export const ContextMenuSubContent: React.FC<ContextMenuSubContentProps> = (props) => {
+    return <Radix.ContextMenuSubContent {...mergeCode0Props(`context-menu__sub-content context-menu__sub-content--${props.color ?? "secondary"}`, props) as ContextMenuSubContentProps}>
+        <Card paddingSize={"xxs"} mt={-0.35} mx={-0.35} style={{borderWidth: "2px"}}>
+            {props.children}
+        </Card>
+        <ContextMenuLabel>
+            <Flex style={{gap: ".35rem"}}>
+                <Flex align={"center"} style={{gap: "0.35rem"}}>
+                    <Flex>
+                        <Badge border><IconArrowUp size={12}/></Badge>
+                        <Badge border><IconArrowDown size={12}/></Badge>
+                    </Flex>
+                    move
+                </Flex>
+                <Spacing spacing={"xxs"}/>
+                <Flex align={"center"} style={{gap: ".35rem"}}>
+                    <Badge border><IconCornerDownLeft size={12}/></Badge>
+                    select
+                </Flex>
+            </Flex>
+        </ContextMenuLabel>
+    </Radix.ContextMenuSubContent>
+}
+
+export const ContextMenuSeparator: React.FC<ContextMenuSeparatorProps> = (props) => {
+    return <Radix.ContextMenuSeparator {...mergeCode0Props("context-menu__separator", props) as ContextMenuSeparatorProps}/>
+}
+
+export const ContextMenuArrow: React.FC<ContextMenuArrowProps> = (props) => {
+    return <Radix.ContextMenuArrow {...mergeCode0Props("context-menu__arrow", props) as ContextMenuArrowProps}/>
+}

src/components/d-application/DApplication.service.ts

@@ -0,0 +1,12 @@
+import {ReactiveArrayService} from "../../utils";
+import type {
+    Application,
+    ApplicationSettingsUpdateInput,
+    ApplicationSettingsUpdatePayload
+} from "@code0-tech/sagittarius-graphql-types";
+
+export abstract class DApplicationService extends ReactiveArrayService<Application> {
+
+    abstract settingsUpdate(payload: ApplicationSettingsUpdateInput): Promise<ApplicationSettingsUpdatePayload | undefined>;
+
+}