@tinacms/app 0.0.0-a4a2eeb-20250102014725 → 0.0.0-a577386-20250401050543
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 +81 -10
- package/package.json +8 -8
- package/src/App.tsx +24 -24
- package/src/Playground.tsx +54 -54
- package/src/dummy-client.ts +1 -1
- package/src/fields/rich-text/index.tsx +2 -2
- package/src/fields/rich-text/monaco/error-message.tsx +54 -54
- package/src/fields/rich-text/monaco/index.tsx +56 -56
- package/src/fields/rich-text/monaco/use-debounce.ts +8 -8
- package/src/global.css +3 -3
- package/src/index.css +15 -15
- package/src/lib/build-form.ts +24 -24
- package/src/lib/errors.tsx +7 -7
- package/src/lib/expand-query.ts +66 -61
- package/src/lib/graphql-reducer.ts +295 -275
- package/src/lib/types.ts +35 -33
- package/src/lib/util.ts +41 -41
- package/src/main.tsx +7 -7
- package/src/preflight.css +10 -10
- package/src/preview.tsx +12 -12
- package/src/vite-env.d.ts +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,83 @@
|
|
|
1
1
|
# @tinacms/app
|
|
2
2
|
|
|
3
|
-
## 0.0.0-
|
|
3
|
+
## 0.0.0-a577386-20250401050543
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
-
- Updated dependencies [[`
|
|
8
|
-
- tinacms@0.0.0-
|
|
9
|
-
|
|
7
|
+
- Updated dependencies [[`921f235`](https://github.com/tinacms/tinacms/commit/921f2356e4615d532d02eefa7103fdb70f83b97a), [`b551232`](https://github.com/tinacms/tinacms/commit/b5512326ad0ad9855bc75e2073a3ab2a8ec4c064), [`ea204c9`](https://github.com/tinacms/tinacms/commit/ea204c9045451f3ebea04f503e6158d2016613e4)]:
|
|
8
|
+
- tinacms@0.0.0-a577386-20250401050543
|
|
9
|
+
|
|
10
|
+
## 2.2.3
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies [[`991db1f`](https://github.com/tinacms/tinacms/commit/991db1f10c1f9cf9211d7e82bd56658cdcce24c7)]:
|
|
15
|
+
- tinacms@2.7.3
|
|
16
|
+
|
|
17
|
+
## 2.2.2
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies [[`619e601`](https://github.com/tinacms/tinacms/commit/619e6010d6f95d893e980952bef64f747808c956), [`602b4d0`](https://github.com/tinacms/tinacms/commit/602b4d07f94de4c10d5bb059a5edc49546a2031c)]:
|
|
22
|
+
- tinacms@2.7.2
|
|
23
|
+
- @tinacms/mdx@1.6.1
|
|
24
|
+
|
|
25
|
+
## 2.2.1
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- Updated dependencies [[`74513b3`](https://github.com/tinacms/tinacms/commit/74513b357aa27165aa86f7b3218c697c663539e8), [`06c1716`](https://github.com/tinacms/tinacms/commit/06c17163b558a96275b0ef66c746b005a6f90d13)]:
|
|
30
|
+
- tinacms@2.7.1
|
|
31
|
+
|
|
32
|
+
## 2.2.0
|
|
33
|
+
|
|
34
|
+
### Minor Changes
|
|
35
|
+
|
|
36
|
+
- [#5503](https://github.com/tinacms/tinacms/pull/5503) [`99bb59f`](https://github.com/tinacms/tinacms/commit/99bb59ff7b9f3cf27a1382b91826eb81831ecb95) Thanks [@JackDevAU](https://github.com/JackDevAU)! - feat: add experimental user form select to the useTina hook
|
|
37
|
+
|
|
38
|
+
### Patch Changes
|
|
39
|
+
|
|
40
|
+
- [#5486](https://github.com/tinacms/tinacms/pull/5486) [`d7c5ec1`](https://github.com/tinacms/tinacms/commit/d7c5ec1b174419dcc6ddba3cfb3684dd469da571) Thanks [@JackDevAU](https://github.com/JackDevAU)! - Update dependencies across packages
|
|
41
|
+
|
|
42
|
+
- Updated dependencies [[`3974aa7`](https://github.com/tinacms/tinacms/commit/3974aa759192713140733b99ee0254a1a056e124), [`7541614`](https://github.com/tinacms/tinacms/commit/7541614527a02268ea453b23ce84637f978dcf2d), [`d7c5ec1`](https://github.com/tinacms/tinacms/commit/d7c5ec1b174419dcc6ddba3cfb3684dd469da571), [`99bb59f`](https://github.com/tinacms/tinacms/commit/99bb59ff7b9f3cf27a1382b91826eb81831ecb95)]:
|
|
43
|
+
- tinacms@2.7.0
|
|
44
|
+
- @tinacms/mdx@1.6.0
|
|
45
|
+
|
|
46
|
+
## 2.1.19
|
|
47
|
+
|
|
48
|
+
### Patch Changes
|
|
49
|
+
|
|
50
|
+
- Updated dependencies []:
|
|
51
|
+
- tinacms@2.6.4
|
|
52
|
+
|
|
53
|
+
## 2.1.18
|
|
54
|
+
|
|
55
|
+
### Patch Changes
|
|
56
|
+
|
|
57
|
+
- Updated dependencies [[`05ba069`](https://github.com/tinacms/tinacms/commit/05ba0692a7e990fbb671177829562869d517e7c1), [`42daaf7`](https://github.com/tinacms/tinacms/commit/42daaf7af125da265d2c5998168e9c7345dc0a59), [`bc986dd`](https://github.com/tinacms/tinacms/commit/bc986dd48f9a7da264281b55926ec51ce1068bb7), [`3af2354`](https://github.com/tinacms/tinacms/commit/3af23542b984c10e138d0cf10a165d50b99bb0e9)]:
|
|
58
|
+
- tinacms@2.6.3
|
|
59
|
+
|
|
60
|
+
## 2.1.17
|
|
61
|
+
|
|
62
|
+
### Patch Changes
|
|
63
|
+
|
|
64
|
+
- Updated dependencies []:
|
|
65
|
+
- tinacms@2.6.2
|
|
66
|
+
|
|
67
|
+
## 2.1.16
|
|
68
|
+
|
|
69
|
+
### Patch Changes
|
|
70
|
+
|
|
71
|
+
- Updated dependencies [[`61c45f4`](https://github.com/tinacms/tinacms/commit/61c45f49a2abe82336b661dedbbe2a15d0f3da05)]:
|
|
72
|
+
- tinacms@2.6.1
|
|
73
|
+
|
|
74
|
+
## 2.1.15
|
|
75
|
+
|
|
76
|
+
### Patch Changes
|
|
77
|
+
|
|
78
|
+
- Updated dependencies [[`9931d5a`](https://github.com/tinacms/tinacms/commit/9931d5a0d7e5e9e5165170047cf5653041bddd7a), [`4aadf3e`](https://github.com/tinacms/tinacms/commit/4aadf3ee0b5e7ba6614baee9507a3b51abc92053), [`92b683b`](https://github.com/tinacms/tinacms/commit/92b683bd3d73b47271eee5b8ff648ed4dcde51e3), [`82b0039`](https://github.com/tinacms/tinacms/commit/82b00393da8bbcc2cf357fbbb546904f07e8d89c), [`877699d`](https://github.com/tinacms/tinacms/commit/877699d08b3e2c2470742a3acf25d02a95e440b3)]:
|
|
79
|
+
- tinacms@2.6.0
|
|
80
|
+
- @tinacms/mdx@1.5.4
|
|
10
81
|
|
|
11
82
|
## 2.1.14
|
|
12
83
|
|
|
@@ -720,7 +791,7 @@
|
|
|
720
791
|
> NOTE: Relative paths are fine to use here, but make sure it's relative to the `.tina/config` file
|
|
721
792
|
|
|
722
793
|
```ts
|
|
723
|
-
localContentPath: process.env.REMOTE_ROOT_PATH // eg. '../../my-content-repo'
|
|
794
|
+
localContentPath: process.env.REMOTE_ROOT_PATH; // eg. '../../my-content-repo'
|
|
724
795
|
```
|
|
725
796
|
|
|
726
797
|
### Production workflow
|
|
@@ -764,18 +835,18 @@
|
|
|
764
835
|
EX:
|
|
765
836
|
|
|
766
837
|
```ts
|
|
767
|
-
import { defineConfig } from
|
|
838
|
+
import { defineConfig } from "tinacms";
|
|
768
839
|
|
|
769
840
|
export default defineConfig({
|
|
770
841
|
admin: {
|
|
771
842
|
auth: {
|
|
772
843
|
onLogin: () => {
|
|
773
|
-
console.log(
|
|
844
|
+
console.log("On Log in!");
|
|
774
845
|
},
|
|
775
846
|
},
|
|
776
847
|
},
|
|
777
848
|
/// ...
|
|
778
|
-
})
|
|
849
|
+
});
|
|
779
850
|
```
|
|
780
851
|
|
|
781
852
|
- 9d4943a82: Fix issue resolving alias fields when passing through the `useTina` hook
|
|
@@ -998,13 +1069,13 @@
|
|
|
998
1069
|
|
|
999
1070
|
```ts
|
|
1000
1071
|
// .tina/config.ts
|
|
1001
|
-
import schema from
|
|
1072
|
+
import schema from "./schema";
|
|
1002
1073
|
|
|
1003
1074
|
export default defineConfig({
|
|
1004
1075
|
schema: schema,
|
|
1005
1076
|
//.. Everything from define config in `schema.ts`
|
|
1006
1077
|
//.. Everything from `schema.config`
|
|
1007
|
-
})
|
|
1078
|
+
});
|
|
1008
1079
|
```
|
|
1009
1080
|
|
|
1010
1081
|
2. Add Build config
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tinacms/app",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-a577386-20250401050543",
|
|
4
4
|
"main": "src/main.tsx",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@types/react": "^18.3.
|
|
8
|
-
"@types/react-dom": "^18.3.
|
|
9
|
-
"typescript": "^5.
|
|
7
|
+
"@types/react": "^18.3.18",
|
|
8
|
+
"@types/react-dom": "^18.3.5",
|
|
9
|
+
"typescript": "^5.7.3"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@graphiql/toolkit": "0.8.4",
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
"react": "^18.3.1",
|
|
21
21
|
"react-dom": "^18.3.1",
|
|
22
22
|
"react-router-dom": "6.3.0",
|
|
23
|
-
"typescript": "^5.
|
|
24
|
-
"zod": "^3.
|
|
25
|
-
"@tinacms/mdx": "
|
|
26
|
-
"tinacms": "0.0.0-
|
|
23
|
+
"typescript": "^5.7.3",
|
|
24
|
+
"zod": "^3.24.2",
|
|
25
|
+
"@tinacms/mdx": "1.6.1",
|
|
26
|
+
"tinacms": "0.0.0-a577386-20250401050543"
|
|
27
27
|
}
|
|
28
28
|
}
|
package/src/App.tsx
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import React, { Suspense } from 'react'
|
|
2
|
-
import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms'
|
|
3
|
-
import { Preview } from './preview'
|
|
4
|
-
import Playground from './Playground'
|
|
1
|
+
import React, { Suspense } from 'react';
|
|
2
|
+
import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms';
|
|
3
|
+
import { Preview } from './preview';
|
|
4
|
+
import Playground from './Playground';
|
|
5
5
|
|
|
6
6
|
// TODO: Resolve this to local file in tsconfig.json
|
|
7
7
|
// @ts-expect-error
|
|
8
|
-
import config from 'TINA_IMPORT'
|
|
8
|
+
import config from 'TINA_IMPORT';
|
|
9
9
|
// @ts-expect-error
|
|
10
|
-
import schemaJson from 'SCHEMA_IMPORT'
|
|
10
|
+
import schemaJson from 'SCHEMA_IMPORT';
|
|
11
11
|
// @ts-expect-error
|
|
12
|
-
import staticMedia from 'STATIC_MEDIA_IMPORT'
|
|
12
|
+
import staticMedia from 'STATIC_MEDIA_IMPORT';
|
|
13
13
|
|
|
14
|
-
const RawEditor = React.lazy(() => import('./fields/rich-text'))
|
|
14
|
+
const RawEditor = React.lazy(() => import('./fields/rich-text'));
|
|
15
15
|
|
|
16
16
|
const Editor = (props) => {
|
|
17
|
-
const [rawMode, setRawMode] = React.useState(false)
|
|
17
|
+
const [rawMode, setRawMode] = React.useState(false);
|
|
18
18
|
return (
|
|
19
19
|
<MdxFieldPluginExtendible.Component
|
|
20
20
|
rawMode={rawMode}
|
|
@@ -26,32 +26,32 @@ const Editor = (props) => {
|
|
|
26
26
|
</Suspense>
|
|
27
27
|
}
|
|
28
28
|
/>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
31
|
|
|
32
32
|
const SetPreview = () => {
|
|
33
|
-
const cms = useCMS()
|
|
33
|
+
const cms = useCMS();
|
|
34
34
|
React.useEffect(() => {
|
|
35
35
|
// Override original 'rich-text' field with one that has raw mode support
|
|
36
36
|
cms.fields.add({
|
|
37
37
|
...MdxFieldPluginExtendible,
|
|
38
38
|
Component: Editor,
|
|
39
|
-
})
|
|
40
|
-
const basePath = __BASE_PATH__.replace(/^\/|\/$/g, '')
|
|
41
|
-
cms.flags.set('tina-basepath', basePath)
|
|
39
|
+
});
|
|
40
|
+
const basePath = __BASE_PATH__.replace(/^\/|\/$/g, '');
|
|
41
|
+
cms.flags.set('tina-basepath', basePath);
|
|
42
42
|
cms.flags.set(
|
|
43
43
|
'tina-preview',
|
|
44
44
|
`${basePath ? `${basePath}/` : ''}${config.build.outputFolder.replace(
|
|
45
45
|
/^\/|\/$/g,
|
|
46
46
|
''
|
|
47
47
|
)}`
|
|
48
|
-
)
|
|
49
|
-
}, [])
|
|
50
|
-
return null
|
|
51
|
-
}
|
|
48
|
+
);
|
|
49
|
+
}, []);
|
|
50
|
+
return null;
|
|
51
|
+
};
|
|
52
52
|
|
|
53
53
|
export const TinaAdminWrapper = () => {
|
|
54
|
-
const schema = { ...config?.schema, config }
|
|
54
|
+
const schema = { ...config?.schema, config };
|
|
55
55
|
return (
|
|
56
56
|
// @ts-ignore JSX element type 'TinaCMS' does not have any construct or call signatures.ts(2604)
|
|
57
57
|
<TinaCMS
|
|
@@ -70,10 +70,10 @@ export const TinaAdminWrapper = () => {
|
|
|
70
70
|
schemaJson={schemaJson}
|
|
71
71
|
/>
|
|
72
72
|
</TinaCMS>
|
|
73
|
-
)
|
|
74
|
-
}
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
75
|
|
|
76
76
|
function App() {
|
|
77
|
-
return <TinaAdminWrapper
|
|
77
|
+
return <TinaAdminWrapper />;
|
|
78
78
|
}
|
|
79
|
-
export default App
|
|
79
|
+
export default App;
|
package/src/Playground.tsx
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { createGraphiQLFetcher } from '@graphiql/toolkit'
|
|
2
|
-
import { GraphiQL } from 'graphiql'
|
|
3
|
-
import { parse, print } from 'graphql'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
import { useCMS } from 'tinacms'
|
|
6
|
-
import { FolderIcon } from '@heroicons/react/outline'
|
|
7
|
-
import { queries } from 'CLIENT_IMPORT'
|
|
1
|
+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
|
|
2
|
+
import { GraphiQL } from 'graphiql';
|
|
3
|
+
import { parse, print } from 'graphql';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { useCMS } from 'tinacms';
|
|
6
|
+
import { FolderIcon } from '@heroicons/react/outline';
|
|
7
|
+
import { queries } from 'CLIENT_IMPORT';
|
|
8
8
|
|
|
9
|
-
import 'graphiql/graphiql.min.css'
|
|
9
|
+
import 'graphiql/graphiql.min.css';
|
|
10
10
|
|
|
11
11
|
const Playground = () => {
|
|
12
|
-
const cms = useCMS()
|
|
13
|
-
const [query, setQuery] = React.useState('')
|
|
14
|
-
const [variables, setVariables] = React.useState('')
|
|
15
|
-
const [autoQueries, setAutoQueries] = React.useState()
|
|
12
|
+
const cms = useCMS();
|
|
13
|
+
const [query, setQuery] = React.useState('');
|
|
14
|
+
const [variables, setVariables] = React.useState('');
|
|
15
|
+
const [autoQueries, setAutoQueries] = React.useState();
|
|
16
16
|
const [collectionInfo, setCollectionInfo] = React.useState<{
|
|
17
17
|
collections: {
|
|
18
|
-
name: string
|
|
19
|
-
documents: { edges: { node: { _sys: { relativePath: string } } }[] }
|
|
20
|
-
}[]
|
|
21
|
-
}>()
|
|
18
|
+
name: string;
|
|
19
|
+
documents: { edges: { node: { _sys: { relativePath: string } } }[] };
|
|
20
|
+
}[];
|
|
21
|
+
}>();
|
|
22
22
|
React.useEffect(() => {
|
|
23
23
|
const run = async () => {
|
|
24
24
|
if (queries) {
|
|
25
|
-
const q = queries({ request: async () => query })
|
|
25
|
+
const q = queries({ request: async () => query });
|
|
26
26
|
setCollectionInfo(
|
|
27
27
|
await cms.api.tina.request(
|
|
28
28
|
`
|
|
@@ -45,52 +45,52 @@ const Playground = () => {
|
|
|
45
45
|
`,
|
|
46
46
|
{ variables: {} }
|
|
47
47
|
)
|
|
48
|
-
)
|
|
49
|
-
setAutoQueries(q)
|
|
48
|
+
);
|
|
49
|
+
setAutoQueries(q);
|
|
50
50
|
} else {
|
|
51
|
-
setAutoQueries({})
|
|
51
|
+
setAutoQueries({});
|
|
52
52
|
}
|
|
53
|
-
}
|
|
54
|
-
run()
|
|
55
|
-
}, [])
|
|
53
|
+
};
|
|
54
|
+
run();
|
|
55
|
+
}, []);
|
|
56
56
|
|
|
57
|
-
const ref = React.useRef()
|
|
57
|
+
const ref = React.useRef();
|
|
58
58
|
|
|
59
59
|
const getToken = () => {
|
|
60
|
-
return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token
|
|
61
|
-
}
|
|
60
|
+
return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token;
|
|
61
|
+
};
|
|
62
62
|
|
|
63
63
|
if (!autoQueries) {
|
|
64
|
-
return null
|
|
64
|
+
return null;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
const Plugin = () => {
|
|
68
|
-
const noAutoQueries = Object.keys(autoQueries).length === 0
|
|
68
|
+
const noAutoQueries = Object.keys(autoQueries).length === 0;
|
|
69
69
|
return (
|
|
70
70
|
<div>
|
|
71
|
-
<div className=
|
|
72
|
-
<div className=
|
|
73
|
-
<div className=
|
|
71
|
+
<div className='graphiql-doc-explorer-title'>Queries</div>
|
|
72
|
+
<div className='graphiql-doc-explorer-content'>
|
|
73
|
+
<div className='graphiql-markdown-description'>
|
|
74
74
|
{noAutoQueries
|
|
75
75
|
? 'No auto-generated queries found, the Tina config is likely set to client.skip = true'
|
|
76
76
|
: "Tina's auto-generated queries can be found here as well as any queries you may have defined yourself."}{' '}
|
|
77
|
-
<a href=
|
|
77
|
+
<a href='https://tina.io/docs/data-fetching/custom-queries/'>
|
|
78
78
|
Learn more here
|
|
79
79
|
</a>
|
|
80
80
|
</div>
|
|
81
|
-
<nav className=
|
|
81
|
+
<nav className='space-y-1' aria-label='Sidebar'>
|
|
82
82
|
<ul>
|
|
83
83
|
{Object.entries(autoQueries).map(([key, value]) => {
|
|
84
84
|
const collection = collectionInfo?.collections.find(
|
|
85
85
|
({ name }) => name === key
|
|
86
|
-
)
|
|
87
|
-
let variables = ''
|
|
88
|
-
let relativePath = ''
|
|
86
|
+
);
|
|
87
|
+
let variables = '';
|
|
88
|
+
let relativePath = '';
|
|
89
89
|
if (collection) {
|
|
90
90
|
relativePath =
|
|
91
91
|
collection?.documents?.edges[0]?.node?._sys.relativePath ||
|
|
92
|
-
''
|
|
93
|
-
variables = JSON.stringify({ relativePath }, null, 2)
|
|
92
|
+
'';
|
|
93
|
+
variables = JSON.stringify({ relativePath }, null, 2);
|
|
94
94
|
}
|
|
95
95
|
return (
|
|
96
96
|
<li>
|
|
@@ -104,31 +104,31 @@ const Playground = () => {
|
|
|
104
104
|
)}
|
|
105
105
|
onClick={async () => {
|
|
106
106
|
if (typeof value === 'function') {
|
|
107
|
-
const v = await value({})
|
|
108
|
-
const ast = parse(v.query)
|
|
109
|
-
setVariables(variables)
|
|
110
|
-
setQuery(print(ast))
|
|
107
|
+
const v = await value({});
|
|
108
|
+
const ast = parse(v.query);
|
|
109
|
+
setVariables(variables);
|
|
110
|
+
setQuery(print(ast));
|
|
111
111
|
}
|
|
112
112
|
}}
|
|
113
113
|
>
|
|
114
|
-
<span className=
|
|
114
|
+
<span className='truncate'>
|
|
115
115
|
{key}{' '}
|
|
116
116
|
{relativePath && (
|
|
117
|
-
<span className=
|
|
117
|
+
<span className='pl-2 text-sm text-gray-300'>
|
|
118
118
|
({relativePath})
|
|
119
119
|
</span>
|
|
120
120
|
)}{' '}
|
|
121
121
|
</span>
|
|
122
122
|
</button>
|
|
123
123
|
</li>
|
|
124
|
-
)
|
|
124
|
+
);
|
|
125
125
|
})}
|
|
126
126
|
</ul>
|
|
127
127
|
</nav>
|
|
128
128
|
</div>
|
|
129
129
|
</div>
|
|
130
|
-
)
|
|
131
|
-
}
|
|
130
|
+
);
|
|
131
|
+
};
|
|
132
132
|
return (
|
|
133
133
|
<div style={{ height: '100vh' }}>
|
|
134
134
|
<GraphiQL
|
|
@@ -136,11 +136,11 @@ const Playground = () => {
|
|
|
136
136
|
const fetcher = createGraphiQLFetcher({
|
|
137
137
|
url: __API_URL__,
|
|
138
138
|
headers: { Authorization: `Bearer ${getToken()}` },
|
|
139
|
-
})
|
|
140
|
-
return fetcher(params, options)
|
|
139
|
+
});
|
|
140
|
+
return fetcher(params, options);
|
|
141
141
|
}}
|
|
142
142
|
query={query}
|
|
143
|
-
defaultEditorToolsVisibility=
|
|
143
|
+
defaultEditorToolsVisibility='variables'
|
|
144
144
|
isHeadersEditorEnabled={false}
|
|
145
145
|
defaultTabs={[]}
|
|
146
146
|
plugins={[
|
|
@@ -153,11 +153,11 @@ const Playground = () => {
|
|
|
153
153
|
variables={variables}
|
|
154
154
|
></GraphiQL>
|
|
155
155
|
</div>
|
|
156
|
-
)
|
|
157
|
-
}
|
|
156
|
+
);
|
|
157
|
+
};
|
|
158
158
|
|
|
159
|
-
export default Playground
|
|
159
|
+
export default Playground;
|
|
160
160
|
|
|
161
161
|
function classNames(...classes: string[]) {
|
|
162
|
-
return classes.filter(Boolean).join(' ')
|
|
162
|
+
return classes.filter(Boolean).join(' ');
|
|
163
163
|
}
|
package/src/dummy-client.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const queries = false
|
|
1
|
+
export const queries = false;
|
|
@@ -3,45 +3,45 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
*/
|
|
6
|
-
import React from 'react'
|
|
7
|
-
import { XCircleIcon } from '@heroicons/react/solid'
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { XCircleIcon } from '@heroicons/react/solid';
|
|
8
8
|
import {
|
|
9
9
|
Popover,
|
|
10
10
|
PopoverButton,
|
|
11
11
|
PopoverPanel,
|
|
12
12
|
Transition,
|
|
13
|
-
} from '@headlessui/react'
|
|
14
|
-
import { Fragment } from 'react'
|
|
13
|
+
} from '@headlessui/react';
|
|
14
|
+
import { Fragment } from 'react';
|
|
15
15
|
// import { InvalidMarkdownElement } from '@tinacms/mdx/src/parse/plate'
|
|
16
|
-
export type EmptyTextElement = { type: 'text'; text: '' }
|
|
16
|
+
export type EmptyTextElement = { type: 'text'; text: '' };
|
|
17
17
|
export type PositionItem = {
|
|
18
|
-
line?: number | null
|
|
19
|
-
column?: number | null
|
|
20
|
-
offset?: number | null
|
|
21
|
-
_index?: number | null
|
|
22
|
-
_bufferIndex?: number | null
|
|
23
|
-
}
|
|
18
|
+
line?: number | null;
|
|
19
|
+
column?: number | null;
|
|
20
|
+
offset?: number | null;
|
|
21
|
+
_index?: number | null;
|
|
22
|
+
_bufferIndex?: number | null;
|
|
23
|
+
};
|
|
24
24
|
export type Position = {
|
|
25
|
-
start: PositionItem
|
|
26
|
-
end: PositionItem
|
|
27
|
-
}
|
|
25
|
+
start: PositionItem;
|
|
26
|
+
end: PositionItem;
|
|
27
|
+
};
|
|
28
28
|
export type InvalidMarkdownElement = {
|
|
29
|
-
type: 'invalid_markdown'
|
|
30
|
-
value: string
|
|
31
|
-
message: string
|
|
32
|
-
position?: Position
|
|
33
|
-
children: [EmptyTextElement]
|
|
34
|
-
}
|
|
29
|
+
type: 'invalid_markdown';
|
|
30
|
+
value: string;
|
|
31
|
+
message: string;
|
|
32
|
+
position?: Position;
|
|
33
|
+
children: [EmptyTextElement];
|
|
34
|
+
};
|
|
35
35
|
|
|
36
36
|
type ErrorType = {
|
|
37
|
-
message: string
|
|
37
|
+
message: string;
|
|
38
38
|
position?: {
|
|
39
|
-
startColumn: number
|
|
40
|
-
endColumn: number
|
|
41
|
-
startLineNumber: number
|
|
42
|
-
endLineNumber: number
|
|
43
|
-
}
|
|
44
|
-
}
|
|
39
|
+
startColumn: number;
|
|
40
|
+
endColumn: number;
|
|
41
|
+
startLineNumber: number;
|
|
42
|
+
endLineNumber: number;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
45
|
export const buildError = (element: InvalidMarkdownElement): ErrorType => {
|
|
46
46
|
return {
|
|
47
47
|
message: element.message,
|
|
@@ -51,28 +51,28 @@ export const buildError = (element: InvalidMarkdownElement): ErrorType => {
|
|
|
51
51
|
startLineNumber: element.position.start.line,
|
|
52
52
|
endLineNumber: element.position.end.line,
|
|
53
53
|
},
|
|
54
|
-
}
|
|
55
|
-
}
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
56
|
export const buildErrorMessage = (element: InvalidMarkdownElement): string => {
|
|
57
57
|
if (!element) {
|
|
58
|
-
return ''
|
|
58
|
+
return '';
|
|
59
59
|
}
|
|
60
|
-
const errorMessage = buildError(element)
|
|
60
|
+
const errorMessage = buildError(element);
|
|
61
61
|
const message = errorMessage
|
|
62
62
|
? `${errorMessage.message}${
|
|
63
63
|
errorMessage.position
|
|
64
64
|
? ` at line: ${errorMessage.position.startLineNumber}, column: ${errorMessage.position.startColumn}`
|
|
65
65
|
: ''
|
|
66
66
|
}`
|
|
67
|
-
: null
|
|
68
|
-
return message
|
|
69
|
-
}
|
|
67
|
+
: null;
|
|
68
|
+
return message;
|
|
69
|
+
};
|
|
70
70
|
|
|
71
71
|
export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
|
|
72
|
-
const message = buildErrorMessage(error)
|
|
72
|
+
const message = buildErrorMessage(error);
|
|
73
73
|
|
|
74
74
|
return (
|
|
75
|
-
<Popover className=
|
|
75
|
+
<Popover className='relative'>
|
|
76
76
|
{() => (
|
|
77
77
|
<>
|
|
78
78
|
<PopoverButton
|
|
@@ -80,29 +80,29 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
|
|
|
80
80
|
error ? '' : ' opacity-0 hidden '
|
|
81
81
|
}`}
|
|
82
82
|
>
|
|
83
|
-
<span className=
|
|
84
|
-
<XCircleIcon className=
|
|
83
|
+
<span className='sr-only'>Errors</span>
|
|
84
|
+
<XCircleIcon className='h-5 w-5 text-red-400' aria-hidden='true' />
|
|
85
85
|
</PopoverButton>
|
|
86
86
|
<Transition
|
|
87
|
-
enter=
|
|
88
|
-
enterFrom=
|
|
89
|
-
enterTo=
|
|
90
|
-
leave=
|
|
91
|
-
leaveFrom=
|
|
92
|
-
leaveTo=
|
|
87
|
+
enter='transition ease-out duration-200'
|
|
88
|
+
enterFrom='opacity-0 translate-y-1'
|
|
89
|
+
enterTo='opacity-100 translate-y-0'
|
|
90
|
+
leave='transition ease-in duration-150'
|
|
91
|
+
leaveFrom='opacity-100 translate-y-0'
|
|
92
|
+
leaveTo='opacity-0 translate-y-1'
|
|
93
93
|
>
|
|
94
|
-
<PopoverPanel className=
|
|
95
|
-
<div className=
|
|
96
|
-
<div className=
|
|
97
|
-
<div className=
|
|
98
|
-
<div className=
|
|
94
|
+
<PopoverPanel className='absolute top-8 w-[300px] -right-3 z-10 mt-3 px-4 sm:px-0'>
|
|
95
|
+
<div className='overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5'>
|
|
96
|
+
<div className='rounded-md bg-red-50 p-4 overflow-scroll'>
|
|
97
|
+
<div className='flex'>
|
|
98
|
+
<div className='flex-shrink-0'>
|
|
99
99
|
<XCircleIcon
|
|
100
|
-
className=
|
|
101
|
-
aria-hidden=
|
|
100
|
+
className='h-5 w-5 text-red-400'
|
|
101
|
+
aria-hidden='true'
|
|
102
102
|
/>
|
|
103
103
|
</div>
|
|
104
|
-
<div className=
|
|
105
|
-
<h3 className=
|
|
104
|
+
<div className='ml-3'>
|
|
105
|
+
<h3 className='text-sm font-medium text-red-800 whitespace-pre-wrap'>
|
|
106
106
|
{message}
|
|
107
107
|
</h3>
|
|
108
108
|
</div>
|
|
@@ -114,5 +114,5 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
|
|
|
114
114
|
</>
|
|
115
115
|
)}
|
|
116
116
|
</Popover>
|
|
117
|
-
)
|
|
117
|
+
);
|
|
118
118
|
}
|