Skip to content

Commit 04e7317

Browse files
nicosammitonicosammito
authored
Merge pull request #534 from code0-tech/feat/#531
List, Content and Card component for rules and members
2 parents 077e83f + 834e66b commit 04e7317

29 files changed

+1044
-72
lines changed

‎.storybook/global.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
@use "../src/styles/variables";
2+
13
html {
24
overscroll-behavior: none;
35
}
46

57
.sb-show-main {
6-
background: #030014 !important;
8+
background: variables.$primary !important;
79
}
810

911
.sb-main-fullscreen {
10-
background: #030014 !important;
12+
background: variables.$primary !important;
1113
}

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,25 @@
99
width: fit-content;
1010
align-items: center;
1111
gap: variables.$xxs;
12+
height: fit-content;
13+
vertical-align: middle;
1214

1315
& {
1416
@include helpers.fontStyle();
1517
@include helpers.borderRadius()
1618
}
19+
20+
&--border {
21+
border: none !important;
22+
}
1723
}
1824

1925
@each $name, $color in variables.$colors {
2026
.badge--#{$name} {
2127

2228
& {
23-
@include box.box($color);
24-
box-shadow: none;
29+
@include box.box($color, $color, $color);
2530
}
2631
}
27-
}
32+
}
33+

‎src/components/badge/Badge.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ export interface BadgeType extends Code0Component<HTMLSpanElement>{
77
children: React.ReactNode
88
//defaults to primary
99
color?: Color
10+
border?: boolean
1011
}
1112

1213
export const Badge: React.FC<BadgeType> = (props) => {
1314

14-
const {color = "primary", children, ...args} = props
15+
const {color = "primary", border = false, children, ...args} = props
1516

16-
return <span {...mergeCode0Props(`badge badge--${color}`, args)}>
17+
return <span {...mergeCode0Props(`badge badge--${color} ${!border ? "badge--border" : ""}`, args)}>
1718
{children}
1819
</span>
1920
}

‎src/components/button-group/ButtonGroup.style.scss‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,24 @@
11
@use "../../styles/helpers";
22
@use "../../styles/variables";
3+
@use "../../styles/box";
34

45
.button-group {
56
border: none;
67
width: fit-content;
78
background: transparent;
89
position: relative;
910
display: flex;
11+
padding: variables.$xxs;
12+
gap: variables.$xxs;
1013

11-
* {
12-
margin-bottom: 0;
14+
& {
15+
@include box.box(variables.$primary);
16+
@include helpers.borderRadius();
1317
}
1418

1519
.button {
16-
margin-bottom: 0;
17-
border-radius: 0;
1820
display: inline-flex;
1921
height: 100%;
2022
}
2123

22-
> div, .dropdown__trigger, .dropdown {
23-
display: inline-flex;
24-
margin-bottom: 0 !important;
25-
}
26-
27-
&__first {
28-
.button {
29-
border-top-left-radius: variables.$borderRadius !important;
30-
border-bottom-left-radius: variables.$borderRadius !important;
31-
}
32-
}
33-
34-
&__last {
35-
.button {
36-
border-top-right-radius: variables.$borderRadius !important;
37-
border-bottom-right-radius: variables.$borderRadius !important;
38-
}
39-
}
40-
4124
}

‎src/components/card/Card.style.scss‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,22 @@
5454

5555
&--hover {
5656
cursor: pointer;
57+
5758
&:hover {
58-
background: rgba(helpers.backgroundColor(variables.$secondary), .25);
59-
}
60-
&:first-child {
61-
border-top-left-radius: variables.$borderRadius;
62-
border-top-right-radius: variables.$borderRadius;
59+
background: helpers.backgroundColor(variables.$secondary, 0.5);
6360
}
61+
}
6462

65-
&:last-child {
66-
border-bottom-left-radius: variables.$borderRadius;
67-
border-bottom-right-radius: variables.$borderRadius;
68-
}
63+
&:first-child {
64+
border-top-left-radius: variables.$borderRadius;
65+
border-top-right-radius: variables.$borderRadius;
6966
}
67+
68+
&:last-child {
69+
border-bottom-left-radius: variables.$borderRadius;
70+
border-bottom-right-radius: variables.$borderRadius;
71+
}
72+
7073
}
7174

7275
}
@@ -97,7 +100,7 @@
97100

98101
@each $gradientName, $gradientColor in variables.$colors {
99102
&-#{$gradientName} {
100-
//box-shadow: inset 0 0 ($padding * 2) math.div($padding, 2) helpers.backgroundColor($gradientColor);
103+
box-shadow: inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) helpers.backgroundColor($gradientColor);
101104
}
102105
}
103106
}
@@ -106,7 +109,7 @@
106109

107110
.card--outline-#{$name} {
108111
outline-offset: calc(var(--padding) / 3);
109-
margin: calc(var(--padding)/3);
112+
margin: calc(var(--padding) / 3);
110113
outline: helpers.borderColor($color) solid 1px;
111114
}
112115

‎src/components/d-member/DNamespaceMember.stories.tsx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import {Meta} from "@storybook/react-vite";
2+
import {ContextStoreProvider, useReactiveArrayService} from "../../utils";
3+
import {DNamespaceMemberView} from "./DNamespaceMember.view";
4+
import {DUserView} from "../d-user";
5+
import {DUserReactiveServiceExtended} from "../d-user/DUserList.stories";
6+
import {
7+
DNamespaceMemberReactiveServiceExtended,
8+
DNamespaceRoleReactiveServiceExtended
9+
} from "../d-role/DNamespaceRole.stories";
10+
import {DNamespaceRoleView} from "../d-role";
11+
import {NamespaceRoleAbility} from "@code0-tech/sagittarius-graphql-types";
12+
import {Container} from "../container/Container";
13+
import React from "react";
14+
import {DNamespaceMemberList} from "./DNamespaceMemberList";
15+
16+
const meta: Meta = {
17+
title: "DNamespaceMember",
18+
}
19+
20+
export default meta
21+
22+
export const MemberListExample = () => {
23+
24+
const members = useReactiveArrayService<DNamespaceMemberView, DNamespaceMemberReactiveServiceExtended>(DNamespaceMemberReactiveServiceExtended, [
25+
new DNamespaceMemberView({
26+
id: "gid://sagittarius/NamespaceMember/1",
27+
user: {
28+
id: "gid://sagittarius/User/1",
29+
},
30+
roles: {
31+
nodes: [{
32+
id: "gid://sagittarius/NamespaceRole/1"
33+
}, {
34+
id: "gid://sagittarius/NamespaceRole/2"
35+
}]
36+
},
37+
userAbilities: {
38+
deleteMember: true,
39+
assignMemberRoles: true
40+
}
41+
}),
42+
new DNamespaceMemberView({
43+
id: "gid://sagittarius/NamespaceMember/2",
44+
user: {
45+
id: "gid://sagittarius/User/2",
46+
},
47+
roles: {
48+
nodes: [{
49+
id: "gid://sagittarius/NamespaceRole/1"
50+
}]
51+
},
52+
userAbilities: {
53+
deleteMember: true
54+
}
55+
})
56+
])
57+
const user = useReactiveArrayService<DUserView, DUserReactiveServiceExtended>(DUserReactiveServiceExtended, [
58+
new DUserView({
59+
id: "gid://sagittarius/User/1",
60+
username: "nsammito",
61+
email: "nsammito@code0.tech",
62+
admin: true,
63+
avatarPath: "",
64+
firstname: undefined,
65+
lastname: undefined,
66+
namespace: undefined,
67+
namespaceMemberships: undefined,
68+
createdAt: new Date().toString(),
69+
updatedAt: new Date().toString(),
70+
emailVerifiedAt: "sd"
71+
}),
72+
new DUserView({
73+
id: "gid://sagittarius/User/2",
74+
username: "exampleuser",
75+
email: "test@gmail.com",
76+
admin: undefined,
77+
avatarPath: "",
78+
firstname: undefined,
79+
lastname: undefined,
80+
namespace: undefined,
81+
namespaceMemberships: undefined,
82+
createdAt: new Date().toString(),
83+
updatedAt: new Date().toString(),
84+
emailVerifiedAt: "sd"
85+
})
86+
])
87+
const role = useReactiveArrayService<DNamespaceRoleView, DNamespaceRoleReactiveServiceExtended>(DNamespaceRoleReactiveServiceExtended, [
88+
new DNamespaceRoleView({
89+
id: "gid://sagittarius/NamespaceRole/1",
90+
name: "Admin",
91+
abilities: [NamespaceRoleAbility.NamespaceAdministrator],
92+
namespace: {
93+
id: "gid://sagittarius/Namespace/1"
94+
},
95+
userAbilities: {
96+
deleteNamespaceRole: true
97+
},
98+
assignedProjects: {
99+
nodes: [{
100+
id: "gid://sagittarius/NamespaceProject/1"
101+
}, {
102+
id: "gid://sagittarius/NamespaceProject/2"
103+
}]
104+
}
105+
}),
106+
new DNamespaceRoleView({
107+
id: "gid://sagittarius/NamespaceRole/2",
108+
name: "Editor",
109+
abilities: [NamespaceRoleAbility.UpdateFlow, NamespaceRoleAbility.DeleteFlow, NamespaceRoleAbility.AssignProjectRuntimes, NamespaceRoleAbility.DeleteNamespaceProject],
110+
namespace: {
111+
id: "gid://sagittarius/Namespace/1"
112+
},
113+
userAbilities: {
114+
deleteNamespaceRole: true
115+
}
116+
})
117+
])
118+
119+
return (
120+
<ContextStoreProvider
121+
services={[role, members, user]}>
122+
<Container>
123+
{React.useMemo(() => {
124+
return <DNamespaceMemberList namespaceId={"gid://sagittarius/Namespace/1"}/>
125+
}, [])}
126+
</Container>
127+
</ContextStoreProvider>
128+
)
129+
130+
}

‎src/components/d-member/DNamespaceMemberCard.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {NamespaceMember} from "@code0-tech/sagittarius-graphql-types";
2+
import {Card} from "../card/Card";
3+
import React from "react";
4+
import {DNamespaceMemberContent} from "./DNamespaceMemberContent";
5+
import {DNamespaceMemberView} from "./DNamespaceMember.view";
6+
7+
export interface DNamespaceMemberCardProps {
8+
memberId: NamespaceMember["id"]
9+
onRemove?: (member: DNamespaceMemberView) => void
10+
onAssignRole?: (member: DNamespaceMemberView) => void
11+
}
12+
13+
export const DNamespaceMemberCard: React.FC<DNamespaceMemberCardProps> = (props) => {
14+
const {memberId, onRemove, onAssignRole} = props
15+
16+
return <Card>
17+
<DNamespaceMemberContent onRemove={onRemove} onAssignRole={onAssignRole} memberId={memberId}/>
18+
</Card>
19+
}

0 commit comments

Comments
 (0)