@graphcommerce/hygraph-dynamic-rows-ui 8.1.0-canary.9 → 9.0.0-canary.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +100 -0
- package/components/PropertyPicker.tsx +6 -6
- package/components/Setup.tsx +45 -23
- package/components/setup.module.css +67 -12
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,105 @@
|
|
|
1
1
|
# @graphcommerce/hygraph-dynamic-rows-ui
|
|
2
2
|
|
|
3
|
+
## 9.0.0-canary.54
|
|
4
|
+
|
|
5
|
+
## 8.1.0-canary.53
|
|
6
|
+
|
|
7
|
+
## 8.1.0-canary.52
|
|
8
|
+
|
|
9
|
+
## 8.1.0-canary.51
|
|
10
|
+
|
|
11
|
+
## 8.1.0-canary.50
|
|
12
|
+
|
|
13
|
+
## 8.1.0-canary.49
|
|
14
|
+
|
|
15
|
+
## 8.1.0-canary.48
|
|
16
|
+
|
|
17
|
+
## 8.1.0-canary.47
|
|
18
|
+
|
|
19
|
+
## 8.1.0-canary.46
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- [#2316](https://github.com/graphcommerce-org/graphcommerce/pull/2316) [`28d4708`](https://github.com/graphcommerce-org/graphcommerce/commit/28d470861a10a38690d565d236ce573905038d2b) - fix hygraph studio bugs in Dynamic Row UI module. Style config screen DR UI app.
|
|
24
|
+
([@JoshuaS98](https://github.com/JoshuaS98))
|
|
25
|
+
|
|
26
|
+
## 8.1.0-canary.45
|
|
27
|
+
|
|
28
|
+
## 8.1.0-canary.44
|
|
29
|
+
|
|
30
|
+
## 8.1.0-canary.43
|
|
31
|
+
|
|
32
|
+
## 8.1.0-canary.42
|
|
33
|
+
|
|
34
|
+
### Patch Changes
|
|
35
|
+
|
|
36
|
+
- [#2308](https://github.com/graphcommerce-org/graphcommerce/pull/2308) [`8faa5ac`](https://github.com/graphcommerce-org/graphcommerce/commit/8faa5ac618ecfdacd6d5eb751b4110c423aef97f) - Added Draft Mode support. When enabled it will be shown.
|
|
37
|
+
([@paales](https://github.com/paales))
|
|
38
|
+
|
|
39
|
+
## 8.1.0-canary.41
|
|
40
|
+
|
|
41
|
+
## 8.1.0-canary.40
|
|
42
|
+
|
|
43
|
+
## 8.1.0-canary.39
|
|
44
|
+
|
|
45
|
+
## 8.1.0-canary.38
|
|
46
|
+
|
|
47
|
+
## 8.1.0-canary.37
|
|
48
|
+
|
|
49
|
+
## 8.1.0-canary.36
|
|
50
|
+
|
|
51
|
+
## 8.1.0-canary.35
|
|
52
|
+
|
|
53
|
+
## 8.1.0-canary.34
|
|
54
|
+
|
|
55
|
+
## 8.1.0-canary.33
|
|
56
|
+
|
|
57
|
+
## 8.1.0-canary.32
|
|
58
|
+
|
|
59
|
+
## 8.1.0-canary.31
|
|
60
|
+
|
|
61
|
+
## 8.1.0-canary.30
|
|
62
|
+
|
|
63
|
+
## 8.1.0-canary.29
|
|
64
|
+
|
|
65
|
+
## 8.1.0-canary.28
|
|
66
|
+
|
|
67
|
+
## 8.1.0-canary.27
|
|
68
|
+
|
|
69
|
+
## 8.1.0-canary.26
|
|
70
|
+
|
|
71
|
+
## 8.1.0-canary.25
|
|
72
|
+
|
|
73
|
+
## 8.1.0-canary.24
|
|
74
|
+
|
|
75
|
+
## 8.1.0-canary.23
|
|
76
|
+
|
|
77
|
+
## 8.1.0-canary.22
|
|
78
|
+
|
|
79
|
+
## 8.1.0-canary.21
|
|
80
|
+
|
|
81
|
+
## 8.1.0-canary.20
|
|
82
|
+
|
|
83
|
+
## 8.1.0-canary.19
|
|
84
|
+
|
|
85
|
+
## 8.1.0-canary.18
|
|
86
|
+
|
|
87
|
+
## 8.1.0-canary.17
|
|
88
|
+
|
|
89
|
+
## 8.1.0-canary.16
|
|
90
|
+
|
|
91
|
+
## 8.1.0-canary.15
|
|
92
|
+
|
|
93
|
+
## 8.1.0-canary.14
|
|
94
|
+
|
|
95
|
+
## 8.1.0-canary.13
|
|
96
|
+
|
|
97
|
+
## 8.1.0-canary.12
|
|
98
|
+
|
|
99
|
+
## 8.1.0-canary.11
|
|
100
|
+
|
|
101
|
+
## 8.1.0-canary.10
|
|
102
|
+
|
|
3
103
|
## 8.1.0-canary.9
|
|
4
104
|
|
|
5
105
|
## 8.1.0-canary.8
|
|
@@ -8,7 +8,7 @@ import { fetchGraphQLInterface } from '../lib/fetchGraphQLInterface'
|
|
|
8
8
|
import { __Field } from '../types'
|
|
9
9
|
|
|
10
10
|
export function PropertyPicker() {
|
|
11
|
-
const { value, onChange,
|
|
11
|
+
const { value, onChange, extension } = useFieldExtension()
|
|
12
12
|
const [localValue, setLocalValue] = useState<string | undefined | null>(
|
|
13
13
|
typeof value === 'string' ? value : undefined,
|
|
14
14
|
)
|
|
@@ -29,7 +29,7 @@ export function PropertyPicker() {
|
|
|
29
29
|
return fetchGraphQLInterface(client)
|
|
30
30
|
}, [extension.config.backend])
|
|
31
31
|
|
|
32
|
-
// Prepare options
|
|
32
|
+
// Prepare options
|
|
33
33
|
const numberOptions = useMemo(
|
|
34
34
|
() =>
|
|
35
35
|
createOptionsFromInterfaceObject(
|
|
@@ -60,10 +60,10 @@ export function PropertyPicker() {
|
|
|
60
60
|
[numberOptions, textOptions],
|
|
61
61
|
)
|
|
62
62
|
|
|
63
|
-
//
|
|
64
|
-
//
|
|
65
|
-
const
|
|
66
|
-
const options =
|
|
63
|
+
// For now this we can not split number and text field options anymore as Hygraph made parent field apiId unreachable :/
|
|
64
|
+
// const fieldType = field.parent.apiId ?? 'ConditionText'
|
|
65
|
+
// const options = fieldType === 'ConditionNumber' ? allOptions.number : allOptions.text
|
|
66
|
+
const options = [...allOptions.text, ...allOptions.number]
|
|
67
67
|
|
|
68
68
|
if (!fields) {
|
|
69
69
|
Promise.resolve(graphQLInterfaceQuery)
|
package/components/Setup.tsx
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { useApp, Wrapper } from '@hygraph/app-sdk-react'
|
|
2
|
+
import Image from 'next/image'
|
|
2
3
|
import { useState } from 'react'
|
|
3
4
|
import styles from './setup.module.css'
|
|
4
5
|
|
|
5
6
|
function Install() {
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
const { updateInstallation, installation, showToast } = useApp()
|
|
8
|
+
|
|
8
9
|
const installed = installation.status === 'COMPLETED'
|
|
9
10
|
const [gqlUri, setGqlUri] = useState('')
|
|
10
11
|
|
|
11
|
-
const changedUri = extension.config.backend !== gqlUri
|
|
12
|
-
|
|
13
12
|
const saveOnClick = () =>
|
|
14
13
|
updateInstallation({
|
|
15
14
|
config: { backend: gqlUri },
|
|
@@ -64,10 +63,8 @@ function Install() {
|
|
|
64
63
|
|
|
65
64
|
let buttonText: string
|
|
66
65
|
let buttonAction: typeof uninstallOnClick | typeof installOnClick
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
buttonAction = saveOnClick
|
|
70
|
-
} else if (installed) {
|
|
66
|
+
|
|
67
|
+
if (installed) {
|
|
71
68
|
buttonText = 'Disable app'
|
|
72
69
|
buttonAction = uninstallOnClick
|
|
73
70
|
} else {
|
|
@@ -78,17 +75,30 @@ function Install() {
|
|
|
78
75
|
return (
|
|
79
76
|
<>
|
|
80
77
|
<>
|
|
81
|
-
<span>
|
|
78
|
+
<span>
|
|
79
|
+
<strong>GraphQL API URI</strong>
|
|
80
|
+
</span>
|
|
82
81
|
<input
|
|
83
82
|
name='gql-uri'
|
|
84
|
-
|
|
83
|
+
className={styles.textInput}
|
|
84
|
+
defaultValue={(installation.config.backend as string) ?? ''}
|
|
85
85
|
onChange={(e) => setGqlUri(e.target.value)}
|
|
86
86
|
/>
|
|
87
87
|
</>
|
|
88
88
|
|
|
89
|
-
<
|
|
90
|
-
{
|
|
91
|
-
|
|
89
|
+
<div className={styles.buttonsContainer}>
|
|
90
|
+
<button type='button' className={styles.button} onClick={saveOnClick} data-save-button>
|
|
91
|
+
Save
|
|
92
|
+
</button>
|
|
93
|
+
<button
|
|
94
|
+
type='button'
|
|
95
|
+
className={styles.button}
|
|
96
|
+
onClick={buttonAction}
|
|
97
|
+
aria-disabled={installed}
|
|
98
|
+
>
|
|
99
|
+
{buttonText}
|
|
100
|
+
</button>
|
|
101
|
+
</div>
|
|
92
102
|
</>
|
|
93
103
|
)
|
|
94
104
|
}
|
|
@@ -96,16 +106,28 @@ function Install() {
|
|
|
96
106
|
export function Page() {
|
|
97
107
|
return (
|
|
98
108
|
<div className={styles.container}>
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
+
<div className={styles.contentWrapper}>
|
|
110
|
+
<div className={styles.logoWrapper}>
|
|
111
|
+
<Image
|
|
112
|
+
src='https://www.graphcommerce.org/_next/static/media/graphcommerce.a8fe7e28.svg'
|
|
113
|
+
layout='fill'
|
|
114
|
+
alt='GraphCommerce logo'
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<h1 className={styles.title}>
|
|
119
|
+
Dynamic Rows Property Selector <span className={styles.author}>by Joshua Bolk</span>
|
|
120
|
+
</h1>
|
|
121
|
+
<p className={styles.description}>
|
|
122
|
+
Enhance your content management experience with Dynamic Rows, specifically designed to
|
|
123
|
+
integrate seamlessly with our Dynamic Row module. It features an intuitive property picker
|
|
124
|
+
field, allowing for effortless selection and organization of properties to customize your
|
|
125
|
+
content layout. Enable the app and put your graphQL URI to get started.
|
|
126
|
+
</p>
|
|
127
|
+
<Wrapper>
|
|
128
|
+
<Install />
|
|
129
|
+
</Wrapper>
|
|
130
|
+
</div>
|
|
109
131
|
</div>
|
|
110
132
|
)
|
|
111
133
|
}
|
|
@@ -1,11 +1,28 @@
|
|
|
1
1
|
.container {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
align-items: center;
|
|
5
|
-
justify-content: center;
|
|
6
2
|
height: 100%;
|
|
7
3
|
max-width: 1200px;
|
|
8
|
-
font-family: '
|
|
4
|
+
font-family: 'Roboto', sans-serif;
|
|
5
|
+
line-height: 1.3;
|
|
6
|
+
font-size: 18px;
|
|
7
|
+
background-color: aliceblue;
|
|
8
|
+
padding: 32px 24px;
|
|
9
|
+
border-radius: 8px;
|
|
10
|
+
margin: 0 auto;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.contentWrapper {
|
|
14
|
+
max-width: 700px;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
align-items: left;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.logoWrapper {
|
|
22
|
+
position: relative;
|
|
23
|
+
height: 60px;
|
|
24
|
+
width: 50%;
|
|
25
|
+
margin-bottom: 32px;
|
|
9
26
|
}
|
|
10
27
|
|
|
11
28
|
.title {
|
|
@@ -15,6 +32,12 @@
|
|
|
15
32
|
margin-bottom: 16px;
|
|
16
33
|
}
|
|
17
34
|
|
|
35
|
+
.author {
|
|
36
|
+
font-size: 12px;
|
|
37
|
+
font-weight: 300;
|
|
38
|
+
line-height: 16px;
|
|
39
|
+
}
|
|
40
|
+
|
|
18
41
|
.desciption {
|
|
19
42
|
font-size: 14px;
|
|
20
43
|
font-weight: 300;
|
|
@@ -40,19 +63,51 @@
|
|
|
40
63
|
text-decoration: none;
|
|
41
64
|
font-weight: 500;
|
|
42
65
|
border: 0px;
|
|
43
|
-
margin: 16px
|
|
66
|
+
margin: 16px 0 0 0;
|
|
44
67
|
border-radius: 4px;
|
|
45
|
-
font-size:
|
|
68
|
+
font-size: 18px;
|
|
46
69
|
line-height: 16px;
|
|
47
|
-
height:
|
|
70
|
+
height: 40px;
|
|
48
71
|
min-width: 24px;
|
|
49
|
-
padding-left:
|
|
50
|
-
padding-right:
|
|
72
|
+
padding-left: 16px;
|
|
73
|
+
padding-right: 16px;
|
|
51
74
|
color: rgb(255, 255, 255);
|
|
52
|
-
background-color:
|
|
75
|
+
background-color: #2563eb;
|
|
76
|
+
transition: background-color 0.2s ease 0s;
|
|
53
77
|
}
|
|
54
78
|
|
|
55
79
|
.button:hover {
|
|
56
80
|
cursor: pointer;
|
|
57
|
-
background-color:
|
|
81
|
+
background-color: #1d4ed8;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.button[aria-disabled='true'] {
|
|
85
|
+
background-color: rgb(200, 200, 200);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.button[aria-disabled='true']:hover {
|
|
89
|
+
background-color: rgb(192, 192, 192);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.button[aria-disabled='false'] {
|
|
93
|
+
background-color: #16a34a;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.button[aria-disabled='false']:hover {
|
|
97
|
+
background-color: #15803d;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.buttonsContainer {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: space-between;
|
|
104
|
+
margin-top: 8px;
|
|
105
|
+
column-gap: 24px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.textInput {
|
|
109
|
+
display: inline;
|
|
110
|
+
margin: 24px 0;
|
|
111
|
+
font-size: 18px;
|
|
112
|
+
padding: 12px 6px;
|
|
58
113
|
}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/hygraph-dynamic-rows-ui",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "
|
|
5
|
+
"version": "9.0.0-canary.54",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"type": "commonjs",
|
|
8
8
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@apollo/client": "~3.8.10",
|
|
20
|
-
"@graphcommerce/next-config": "
|
|
20
|
+
"@graphcommerce/next-config": "9.0.0-canary.54",
|
|
21
21
|
"@hygraph/app-sdk-react": "^0.0.3",
|
|
22
22
|
"@lingui/core": "^4.7.0",
|
|
23
23
|
"@lingui/macro": "^4.7.0",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
"webpack": "5.89.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@graphcommerce/eslint-config-pwa": "
|
|
36
|
-
"@graphcommerce/prettier-config-pwa": "
|
|
37
|
-
"@graphcommerce/typescript-config-pwa": "
|
|
35
|
+
"@graphcommerce/eslint-config-pwa": "9.0.0-canary.54",
|
|
36
|
+
"@graphcommerce/prettier-config-pwa": "9.0.0-canary.54",
|
|
37
|
+
"@graphcommerce/typescript-config-pwa": "9.0.0-canary.54",
|
|
38
38
|
"@types/react-is": "^18.2.4",
|
|
39
39
|
"babel-plugin-macros": "^3.1.0",
|
|
40
40
|
"eslint": "8.56.0",
|