Skip to content

Commit a2eef51

Browse files
dogmardogmar
authored
feat: Update to latest design-system (#1266)
1 parent 6425dcd commit a2eef51

32 files changed

+2485
-2941
lines changed

‎www/.eslintrc.cjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,7 @@ module.exports = {
99
rules: {
1010
'@typescript-eslint/consistent-type-exports': 'error',
1111
'import-newlines/enforce': 'off',
12+
// Allow css prop for styled-components
13+
'react/no-unknown-property': ['error', { ignore: ['css'] }],
1214
},
1315
}

‎www/package.json‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"@nivo/geo": "0.83.0",
4545
"@nivo/line": "0.83.0",
4646
"@octokit/core": "4.2.1",
47-
"@pluralsh/design-system": "1.343.0",
47+
"@pluralsh/design-system": "3.4.1",
4848
"@react-spring/web": "9.7.2",
4949
"@stripe/react-stripe-js": "2.1.0",
5050
"@stripe/stripe-js": "1.54.0",
@@ -134,7 +134,7 @@
134134
"@graphql-codegen/typescript": "4.0.0",
135135
"@graphql-codegen/typescript-operations": "4.0.0",
136136
"@graphql-codegen/typescript-react-apollo": "3.3.7",
137-
"@pluralsh/eslint-config-typescript": "2.5.41",
137+
"@pluralsh/eslint-config-typescript": "2.5.84",
138138
"@pluralsh/stylelint-config": "1.1.3",
139139
"@types/events": "3.0.0",
140140
"@types/jsdom": "21.1.1",
@@ -145,11 +145,12 @@
145145
"@types/react-stripe-elements": "6.0.6",
146146
"@types/styled-components": "5.1.26",
147147
"@types/uuid": "9.0.1",
148-
"@typescript-eslint/eslint-plugin": "5.59.9",
149-
"@typescript-eslint/parser": "5.59.9",
148+
"@typescript-eslint/eslint-plugin": "5.62.0",
149+
"@typescript-eslint/parser": "5.62.0",
150150
"@vitejs/plugin-basic-ssl": "1.0.1",
151151
"@vitejs/plugin-react": "4.0.0",
152-
"@vitest/ui": "0.32.0",
152+
"@vitest/ui": "0.34.3",
153+
"babel-plugin-styled-components": "2.1.4",
153154
"concurrently": "8.1.0",
154155
"eslint": "8.42.0",
155156
"eslint-config-pluralsh": "3.1.0",
@@ -169,10 +170,12 @@
169170
"source-map-explorer": "2.5.3",
170171
"stylelint": "15.7.0",
171172
"stylelint-config-prettier": "9.0.5",
172-
"typescript": "4.9.5",
173+
"typescript": "5.2.2",
173174
"vite": "4.4.9",
174-
"vite-plugin-pwa": "0.16.4",
175-
"vitest": "0.32.0",
175+
"vite-plugin-pwa": "0.16.3",
176+
"vite-plugin-rewrite-all": "1.0.1",
177+
"vite-tsconfig-paths": "4.2.0",
178+
"vitest": "0.34.3",
176179
"wait-on": "7.0.1"
177180
},
178181
"lint-staged": {

‎www/src/components/Invite.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useState } from 'react'
66
import { useParams } from 'react-router-dom'
77

88
import {
9-
Invite,
9+
Invite as InviteT,
1010
User,
1111
useInviteQuery,
1212
useRealizeInviteMutation,
@@ -38,7 +38,7 @@ function ExistingInvite({
3838
id,
3939
user,
4040
}: {
41-
invite: Invite
41+
invite: InviteT
4242
id: any
4343
user: User
4444
}) {
@@ -119,7 +119,7 @@ export default function Invite() {
119119
if (data?.invite?.user) {
120120
return (
121121
<ExistingInvite
122-
invite={data?.invite as Invite}
122+
invite={data?.invite as InviteT}
123123
id={inviteId}
124124
user={data?.invite?.user as User}
125125
/>

‎www/src/components/account/CreateGroup.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ReactNode, useCallback, useContext, useEffect, useState } from 'react'
2-
import { Box } from 'grommet'
32
import { Button, Modal, ValidatedInput } from '@pluralsh/design-system'
3+
import { useTheme } from 'styled-components'
44

55
import { appendConnection, updateCache } from '../../utils/graphql'
66
import { GqlError } from '../utils/Alert'
@@ -10,6 +10,7 @@ import SubscriptionContext from '../../contexts/SubscriptionContext'
1010
import BillingFeatureBlockModal from './billing/BillingFeatureBlockModal'
1111

1212
export function CreateGroup({ q }: any) {
13+
const theme = useTheme()
1314
const { availableFeatures } = useContext(SubscriptionContext)
1415
const isAvailable = !!availableFeatures?.userManagement
1516
const [createModalVisible, setCreateModalVisible] = useState(false)
@@ -82,9 +83,12 @@ export function CreateGroup({ q }: any) {
8283
</>
8384
}
8485
>
85-
<Box
86-
width="50vw"
87-
gap="small"
86+
<div
87+
css={{
88+
display: 'flex',
89+
flexDirection: 'column',
90+
gap: theme.spacing.medium,
91+
}}
8892
>
8993
{errorMsg}
9094
<ValidatedInput
@@ -97,7 +101,7 @@ export function CreateGroup({ q }: any) {
97101
value={description}
98102
onChange={({ target: { value } }) => setDescription(value)}
99103
/>
100-
</Box>
104+
</div>
101105
</Modal>
102106
<BillingFeatureBlockModal
103107
open={blockModalVisible}

‎www/src/components/account/CreateServiceAccount.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function ServiceAccountForm({
4343
return (
4444
<Box
4545
fill
46-
gap="small"
46+
gap="medium"
4747
{...box}
4848
>
4949
{error && (

‎www/src/components/account/EditGroup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ export function EditGroupAttributes({ group, open, onClose }: any) {
204204
/>
205205
<Switch
206206
checked={global}
207-
onChange={({ target: { checked } }) => update({ global: checked })}
207+
onChange={(checked) => update({ global: checked })}
208208
>
209209
Apply globally
210210
</Switch>

‎www/src/components/account/Group.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ function GroupMember({ user, group, first, last, edit }: any) {
4040
return (
4141
<ListItem
4242
flex={false}
43-
background="fill-two"
4443
first={first}
4544
last={last}
4645
>

‎www/src/components/account/InviteUser.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { Button, Div, P, Span } from 'honorable'
99
import { useCallback, useContext, useState } from 'react'
1010
import { Link } from 'react-router-dom'
1111

12+
import { toNumber } from 'lodash'
13+
1214
import { useCurrentUser } from '../../contexts/CurrentUserContext'
1315
import SubscriptionContext from '../../contexts/SubscriptionContext'
1416
import { GqlError } from '../utils/Alert'
@@ -40,16 +42,10 @@ export function InviteUser({ refetch }: { refetch?: (() => void) | null }) {
4042
}, [reset])
4143

4244
const attemptInvite = useCallback(() => {
43-
console.log('attempt', {
44-
isGrandfathered,
45-
isPaidPlan,
46-
userCount: account?.userCount,
47-
})
48-
if (
49-
!isGrandfathered &&
50-
!isPaidPlan &&
51-
(account?.userCount ?? 0) >= MAX_OPEN_SOURCE_USERS
52-
) {
45+
let userCount = toNumber(account?.userCount)
46+
47+
userCount = Number.isNaN(userCount) ? 0 : userCount
48+
if (!isGrandfathered && !isPaidPlan && userCount >= MAX_OPEN_SOURCE_USERS) {
5349
setShowLimitModal(true)
5450
} else {
5551
setShowInviteModal(true)

‎www/src/components/account/Role.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { Box } from 'grommet'
21
import { ValidatedInput } from '@pluralsh/design-system'
32
import { useState } from 'react'
43

4+
import { useTheme } from 'styled-components'
5+
56
import { BindingInput } from './Typeaheads'
67

78
export function GeneralAttributes({
@@ -10,14 +11,18 @@ export function GeneralAttributes({
1011
bindings,
1112
setBindings,
1213
}: any) {
14+
const theme = useTheme()
1315
const [repositories, setRepositories] = useState(
1416
attributes.repositories?.join(', ')
1517
)
1618

1719
return (
18-
<Box
19-
flex={false}
20-
gap="small"
20+
<div
21+
css={{
22+
display: 'flex',
23+
flexDirection: 'column',
24+
rowGap: theme.spacing.medium,
25+
}}
2126
>
2227
<ValidatedInput
2328
label="Name"
@@ -68,6 +73,6 @@ export function GeneralAttributes({
6873
)
6974
}
7075
/>
71-
</Box>
76+
</div>
7277
)
7378
}

‎www/src/components/account/RoleForm.tsx‎

Lines changed: 78 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Box } from 'grommet'
2-
import { Span, Switch } from 'honorable'
3-
import { Tab, TabList, TabPanel } from '@pluralsh/design-system'
1+
import { Switch, Tab, TabList, TabPanel } from '@pluralsh/design-system'
42
import { useCallback, useRef, useState } from 'react'
53

6-
import { ListItem } from '../profile/ListItem'
4+
import { useTheme } from 'styled-components'
5+
76
import { GqlError } from '../utils/Alert'
87

8+
import { List, ListItem } from '../utils/List'
9+
910
import { PermissionTypes } from './types'
1011

1112
import { GeneralAttributes } from './Role'
@@ -18,6 +19,7 @@ function PermissionToggle({
1819
first,
1920
last,
2021
}: any) {
22+
const theme = useTheme()
2123
const toggle = useCallback(
2224
(enable) => {
2325
if (enable) {
@@ -41,15 +43,37 @@ function PermissionToggle({
4143
<ListItem
4244
first={first}
4345
last={last}
44-
background="fill-two"
4546
>
46-
<Box fill="horizontal">
47-
<Span fontWeight={500}>{permission.toLowerCase()}</Span>
48-
<Span color="text-light">{description}</Span>
49-
</Box>
47+
<div
48+
css={{
49+
display: 'flex',
50+
flexDirection: 'column',
51+
width: '100%',
52+
}}
53+
>
54+
<h4
55+
className="stuff"
56+
css={{
57+
...theme.partials.text.body1Bold,
58+
margin: 0,
59+
}}
60+
>
61+
{permission.toLowerCase()}
62+
</h4>
63+
<p
64+
css={{
65+
...theme.partials.text.body2,
66+
color: theme.colors['text-light'],
67+
margin: 0,
68+
}}
69+
color="text-light"
70+
>
71+
{description}
72+
</p>
73+
</div>
5074
<Switch
5175
checked={!!attributes.permissions.find((perm) => perm === permission)}
52-
onChange={({ target: { checked } }) => toggle(checked)}
76+
onChange={(checked) => toggle(checked)}
5377
/>
5478
</ListItem>
5579
)
@@ -61,24 +85,31 @@ const TABS = {
6185
}
6286

6387
export function RoleForm({
64-
// eslint-disable-next-line
6588
error,
6689
attributes,
6790
setAttributes,
6891
bindings,
6992
setBindings,
70-
...box
71-
}): any {
93+
}: {
94+
error: any
95+
attributes: any
96+
setAttributes: any
97+
bindings: any
98+
setBindings: any
99+
}) {
100+
const theme = useTheme()
72101
const [view, setView] = useState('General')
73102
const permissions = Object.entries(PermissionTypes)
74103
const len = permissions.length
75104
const tabStateRef = useRef<any>(null)
76105

77106
return (
78-
<Box
79-
flex={false}
80-
gap="small"
81-
{...box}
107+
<div
108+
css={{
109+
display: 'flex',
110+
flexDirection: 'column',
111+
gap: theme.spacing.medium,
112+
}}
82113
>
83114
{error && (
84115
<GqlError
@@ -108,14 +139,34 @@ export function RoleForm({
108139
/>
109140
)}
110141
{view === 'Permissions' && (
111-
<Box gap="small">
112-
<Box>
113-
<Span fontWeight="bold">Permissions</Span>
114-
<Span>
142+
<div
143+
css={{
144+
display: 'flex',
145+
flexDirection: 'column',
146+
gap: theme.spacing.small,
147+
}}
148+
>
149+
<div
150+
css={{
151+
display: 'flex',
152+
flexDirection: 'column',
153+
gap: theme.spacing.xxsmall,
154+
}}
155+
>
156+
<h3 css={{ ...theme.partials.text.body1Bold, margin: 0 }}>
157+
Permissions
158+
</h3>
159+
<p
160+
css={{
161+
...theme.partials.text.body2,
162+
margin: 0,
163+
color: theme.colors['text-light'],
164+
}}
165+
>
115166
Grant permissions to all users and groups bound to this role
116-
</Span>
117-
</Box>
118-
<Box>
167+
</p>
168+
</div>
169+
<List hue="lighter">
119170
{permissions.map(([perm, description], i) => (
120171
<PermissionToggle
121172
key={perm}
@@ -127,10 +178,10 @@ export function RoleForm({
127178
last={i === len - 1}
128179
/>
129180
))}
130-
</Box>
131-
</Box>
181+
</List>
182+
</div>
132183
)}
133184
</TabPanel>
134-
</Box>
185+
</div>
135186
)
136187
}

0 commit comments

Comments
 (0)