Skip to content

Commit 19c8f5e

Browse files
nicosammitonicosammito
authored
Merge pull request #555 from code0-tech/feat/#538
Improve Flow UI
2 parents d8e9c4b + 0016da9 commit 19c8f5e

File tree

105 files changed

+3234
-2539
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

105 files changed

+3234
-2539
lines changed

‎package-lock.json‎

Lines changed: 37 additions & 47 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@babel/plugin-proposal-decorators": "^7.28.0",
2222
"@babel/plugin-transform-class-properties": "^7.27.1",
2323
"@code0-tech/definition-reader": "^0.0.18",
24-
"@code0-tech/sagittarius-graphql-types": "^0.0.0-c63274fdd34593b8aa24f9f977659fd3d6270150",
24+
"@code0-tech/sagittarius-graphql-types": "^0.0.0-968478cecf351385c6c13c2be8aeae5c45da026c",
2525
"@dagrejs/dagre": "^2.0.0",
2626
"@mdx-js/react": "^3.1.1",
2727
"@radix-ui/react-checkbox": "^1.3.3",
@@ -94,7 +94,7 @@
9494
"types": "dist/index.d.ts",
9595
"peerDependencies": {
9696
"@ariakit/react": "^0.4.5",
97-
"@code0-tech/sagittarius-graphql-types": "^0.0.0-c63274fdd34593b8aa24f9f977659fd3d6270150",
97+
"@code0-tech/sagittarius-graphql-types": "^0.0.0-968478cecf351385c6c13c2be8aeae5c45da026c",
9898
"@radix-ui/react-checkbox": "^1.3.2",
9999
"@radix-ui/react-dialog": "^1.1.14",
100100
"@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -118,5 +118,8 @@
118118
},
119119
"publishConfig": {
120120
"access": "public"
121+
},
122+
"dependencies": {
123+
"@radix-ui/react-context-menu": "^2.2.16"
121124
}
122125
}

‎src/components/badge/Badge.style.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
height: fit-content;
1313
vertical-align: middle;
1414

15+
@if (var(--badge-color)) {
16+
background-color: var(--badge-color-background);
17+
border: 1px solid var(--badge-color-border);
18+
color: var(--badge-color);
19+
}
20+
1521
& {
1622
@include helpers.fontStyle();
1723
@include helpers.borderRadius()

‎src/components/badge/Badge.tsx‎

Lines changed: 81 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,91 @@ import "./Badge.style.scss"
33
import {Code0Component, Color} from "../../utils/types";
44
import {mergeCode0Props} from "../../utils/utils";
55

6-
export interface BadgeType extends Code0Component<HTMLSpanElement>{
6+
export interface BadgeType extends Code0Component<HTMLSpanElement> {
77
children: React.ReactNode
8-
//defaults to primary
9-
color?: Color
8+
// defaults to primary
9+
color?: Color | string
1010
border?: boolean
1111
}
1212

13+
type RGBA = {
14+
r: number
15+
g: number
16+
b: number
17+
a: number
18+
}
19+
1320
export const Badge: React.FC<BadgeType> = (props) => {
14-
21+
1522
const {color = "primary", border = false, children, ...args} = props
16-
17-
return <span {...mergeCode0Props(`badge badge--${color} ${!border ? "badge--border" : ""}`, args)}>
18-
{children}
19-
</span>
23+
24+
return (
25+
<span
26+
{...mergeCode0Props(
27+
`badge badge--${color} ${!border ? "badge--border" : ""}`,
28+
{
29+
...args,
30+
style: {
31+
...args.style,
32+
"--badge-color-background": mixColorRgb(color, 9),
33+
"--badge-color-border": withAlpha(color, 0.1),
34+
"--badge-color": withAlpha(color, 1),
35+
},
36+
}
37+
)}
38+
>
39+
{children}
40+
</span>
41+
)
42+
}
43+
44+
/* ===========================
45+
Color utilities
46+
=========================== */
47+
48+
const clamp01 = (v: number) => Math.min(Math.max(v, 0), 1)
49+
50+
const parseCssColorToRgba = (color: string): RGBA => {
51+
if (typeof document === "undefined") {
52+
return {r: 0, g: 0, b: 0, a: 1}
53+
}
54+
55+
const el = document.createElement("span")
56+
el.style.color = color
57+
document.body.appendChild(el)
58+
59+
const computed = getComputedStyle(el).color
60+
document.body.removeChild(el)
61+
62+
const match = computed.match(
63+
/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/
64+
)
65+
66+
if (!match) {
67+
return {r: 0, g: 0, b: 0, a: 1}
68+
}
69+
70+
return {
71+
r: Math.round(Number(match[1])),
72+
g: Math.round(Number(match[2])),
73+
b: Math.round(Number(match[3])),
74+
a: match[4] !== undefined ? Number(match[4]) : 1,
75+
}
76+
}
77+
78+
const mixColorRgb = (color: string, level: number) => {
79+
const w = clamp01(level * 0.1)
80+
81+
const c1 = parseCssColorToRgba(color)
82+
const c2 = parseCssColorToRgba("#030014")
83+
84+
const mix = (a: number, b: number) =>
85+
Math.round(a * (1 - w) + b * w)
86+
87+
return `rgb(${mix(c1.r, c2.r)}, ${mix(c1.g, c2.g)}, ${mix(c1.b, c2.b)})`
88+
}
89+
90+
const withAlpha = (color: string, alpha: number) => {
91+
const c = parseCssColorToRgba(color)
92+
return `rgba(${c.r}, ${c.g}, ${c.b}, ${clamp01(alpha)})`
2093
}

‎src/components/button/Button.style.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
}
3535
}
3636

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

54-
&:active, &:focus, &[aria-selected=true] {
54+
&:active, &:focus, &[aria-selected=true], &[data-state=open] {
5555
background: helpers.backgroundColor($color, 2);
5656
}
5757
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {ContextMenu} from "./ContextMenu";
2+
import {Meta} from "@storybook/react-vite";
3+
4+
const meta: Meta<typeof ContextMenu> = {
5+
title: 'Components/ContextMenu',
6+
component: ContextMenu,
7+
}
8+
9+
export default meta

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@use "../../styles/helpers";
2+
@use "../../styles/box";
3+
@use "../../styles/variables";
4+
5+
.context-menu {
6+
7+
&__content, &__sub-content {
8+
padding: variables.$xxs;
9+
position: relative;
10+
box-sizing: border-box;
11+
z-index: 999;
12+
13+
& {
14+
@include helpers.borderRadius();
15+
}
16+
}
17+
18+
&__label {
19+
text-transform: uppercase;
20+
font-size: variables.$xs;
21+
display: flex;
22+
gap: variables.$xxs;
23+
align-items: center;
24+
padding: variables.$xxs variables.$xs;
25+
color: helpers.color();
26+
27+
& {
28+
@include helpers.fontStyle();
29+
}
30+
}
31+
32+
&__item, &__sub-trigger {
33+
border-radius: variables.$borderRadius - variables.$xxs;
34+
padding: variables.$xxs variables.$xs;
35+
gap: variables.$xs;
36+
cursor: pointer;
37+
width: 100%;
38+
display: flex;
39+
align-items: center;
40+
font-size: variables.$sm;
41+
42+
& {
43+
@include box.box(variables.$primary, variables.$white, variables.$primary);
44+
@include helpers.noFocusStyle();
45+
@include helpers.fontStyle();
46+
@include helpers.disabled();
47+
border: none;
48+
}
49+
50+
&:focus, &[data-focus=true] {
51+
@include box.box(variables.$white, variables.$white, variables.$white);
52+
border: none;
53+
width: 100%;
54+
}
55+
}
56+
57+
&__separator {
58+
border: none;
59+
margin: variables.$xxs 0;
60+
color: rgba(white, .1);
61+
height: 1px;
62+
background-color: rgba(white, .1);
63+
}
64+
}
65+
66+
@each $name, $color in variables.$colors {
67+
.context-menu__content--#{$name}, .context-menu__sub-content--#{$name} {
68+
@include box.box($color);
69+
}
70+
}

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

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
"use client"
2+
3+
import React from "react";
4+
import {Code0ComponentProps, Color, mergeCode0Props} from "../../utils";
5+
import * as Radix from "@radix-ui/react-context-menu";
6+
import "./ContextMenu.style.scss"
7+
import {Card} from "../card/Card";
8+
import {Flex} from "../flex/Flex";
9+
import {Badge} from "../badge/Badge";
10+
import {IconArrowDown, IconArrowUp, IconCornerDownLeft} from "@tabler/icons-react";
11+
import {Spacing} from "../spacing/Spacing";
12+
13+
export type ContextMenuProps = Code0ComponentProps & Radix.ContextMenuProps
14+
export type ContextMenuTriggerProps = Code0ComponentProps & Radix.ContextMenuTriggerProps
15+
export type ContextMenuPortalProps = Code0ComponentProps & Radix.ContextMenuPortalProps
16+
export type ContextMenuContentProps = Code0ComponentProps & Radix.ContextMenuContentProps & {
17+
color?: Color
18+
}
19+
export type ContextMenuLabelProps = Code0ComponentProps & Radix.ContextMenuLabelProps
20+
export type ContextMenuItemProps = Code0ComponentProps & Radix.ContextMenuItemProps
21+
export type ContextMenuGroupProps = Code0ComponentProps & Radix.ContextMenuGroupProps
22+
export type ContextMenuSubProps = Code0ComponentProps & Radix.ContextMenuSubProps
23+
export type ContextMenuSubTriggerProps = Code0ComponentProps & Radix.ContextMenuSubTriggerProps
24+
export type ContextMenuSubContentProps = Code0ComponentProps & Radix.ContextMenuSubContentProps & {
25+
color?: Color
26+
}
27+
export type ContextMenuSeparatorProps = Code0ComponentProps & Radix.ContextMenuSeparatorProps
28+
export type ContextMenuArrowProps = Code0ComponentProps & Radix.ContextMenuArrowProps
29+
30+
export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
31+
return <Radix.ContextMenu {...mergeCode0Props(`context-menu`, props) as ContextMenuProps}/>
32+
}
33+
34+
export const ContextMenuTrigger: React.FC<ContextMenuTriggerProps> = (props) => {
35+
return <Radix.ContextMenuTrigger {...mergeCode0Props("context-menu__trigger", props) as ContextMenuTriggerProps}/>
36+
}
37+
38+
export const ContextMenuPortal: React.FC<ContextMenuPortalProps> = (props) => {
39+
return <Radix.ContextMenuPortal {...mergeCode0Props("context-menu__portal", props) as ContextMenuPortalProps}/>
40+
}
41+
42+
export const ContextMenuContent: React.FC<ContextMenuContentProps> = (props) => {
43+
return <Radix.ContextMenuContent
44+
align={props.align} {...mergeCode0Props(`context-menu__content context-menu__content--${props.color ?? "secondary"}`, props) as ContextMenuContentProps}>
45+
<Card paddingSize={"xxs"} mt={-0.35} mx={-0.35} style={{borderWidth: "2px"}}>
46+
{props.children}
47+
</Card>
48+
<ContextMenuLabel>
49+
<Flex style={{gap: ".35rem"}}>
50+
<Flex align={"center"} style={{gap: "0.35rem"}}>
51+
<Flex>
52+
<Badge border><IconArrowUp size={12}/></Badge>
53+
<Badge border><IconArrowDown size={12}/></Badge>
54+
</Flex>
55+
move
56+
</Flex>
57+
<Spacing spacing={"xxs"}/>
58+
<Flex align={"center"} style={{gap: ".35rem"}}>
59+
<Badge border><IconCornerDownLeft size={12}/></Badge>
60+
select
61+
</Flex>
62+
</Flex>
63+
</ContextMenuLabel>
64+
</Radix.ContextMenuContent>
65+
}
66+
67+
export const ContextMenuLabel: React.FC<ContextMenuLabelProps> = (props) => {
68+
return <Radix.ContextMenuLabel {...mergeCode0Props("context-menu__label", props) as ContextMenuLabelProps}/>
69+
}
70+
71+
export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
72+
return <Radix.ContextMenuItem {...mergeCode0Props("context-menu__item", props) as ContextMenuItemProps}/>
73+
}
74+
75+
export const ContextMenuGroup: React.FC<ContextMenuGroupProps> = (props) => {
76+
return <Radix.ContextMenuGroup {...mergeCode0Props("context-menu__group", props) as ContextMenuGroupProps}/>
77+
}
78+
79+
export const ContextMenuSub: React.FC<ContextMenuSubProps> = (props) => {
80+
return <Radix.ContextMenuSub {...mergeCode0Props("context-menu__sub", props) as ContextMenuSubProps}/>
81+
}
82+
83+
export const ContextMenuSubTrigger: React.FC<ContextMenuSubTriggerProps> = (props) => {
84+
return <Radix.ContextMenuSubTrigger {...mergeCode0Props("context-menu__sub-trigger", props) as ContextMenuSubTriggerProps}/>
85+
}
86+
87+
export const ContextMenuSubContent: React.FC<ContextMenuSubContentProps> = (props) => {
88+
return <Radix.ContextMenuSubContent {...mergeCode0Props(`context-menu__sub-content context-menu__sub-content--${props.color ?? "secondary"}`, props) as ContextMenuSubContentProps}>
89+
<Card paddingSize={"xxs"} mt={-0.35} mx={-0.35} style={{borderWidth: "2px"}}>
90+
{props.children}
91+
</Card>
92+
<ContextMenuLabel>
93+
<Flex style={{gap: ".35rem"}}>
94+
<Flex align={"center"} style={{gap: "0.35rem"}}>
95+
<Flex>
96+
<Badge border><IconArrowUp size={12}/></Badge>
97+
<Badge border><IconArrowDown size={12}/></Badge>
98+
</Flex>
99+
move
100+
</Flex>
101+
<Spacing spacing={"xxs"}/>
102+
<Flex align={"center"} style={{gap: ".35rem"}}>
103+
<Badge border><IconCornerDownLeft size={12}/></Badge>
104+
select
105+
</Flex>
106+
</Flex>
107+
</ContextMenuLabel>
108+
</Radix.ContextMenuSubContent>
109+
}
110+
111+
export const ContextMenuSeparator: React.FC<ContextMenuSeparatorProps> = (props) => {
112+
return <Radix.ContextMenuSeparator {...mergeCode0Props("context-menu__separator", props) as ContextMenuSeparatorProps}/>
113+
}
114+
115+
export const ContextMenuArrow: React.FC<ContextMenuArrowProps> = (props) => {
116+
return <Radix.ContextMenuArrow {...mergeCode0Props("context-menu__arrow", props) as ContextMenuArrowProps}/>
117+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {ReactiveArrayService} from "../../utils";
2+
import type {
3+
Application,
4+
ApplicationSettingsUpdateInput,
5+
ApplicationSettingsUpdatePayload
6+
} from "@code0-tech/sagittarius-graphql-types";
7+
8+
export abstract class DApplicationService extends ReactiveArrayService<Application> {
9+
10+
abstract settingsUpdate(payload: ApplicationSettingsUpdateInput): Promise<ApplicationSettingsUpdatePayload | undefined>;
11+
12+
}

0 commit comments

Comments
 (0)