tinacms 0.66.0 → 0.66.4

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/admin/api.d.ts +2 -4
  3. package/dist/admin/components/GetCollections.d.ts +5 -1
  4. package/dist/admin/components/Page.d.ts +26 -0
  5. package/dist/admin/components/Sidebar.d.ts +1 -0
  6. package/dist/admin/pages/ScreenPage.d.ts +14 -0
  7. package/dist/index.es.js +595 -528
  8. package/dist/index.js +592 -525
  9. package/dist/rich-text.d.ts +3 -0
  10. package/dist/rich-text.es.js +4 -2
  11. package/dist/rich-text.js +4 -2
  12. package/dist/style.css +187 -202
  13. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -726,6 +726,104 @@ mutation addPendingDocumentMutation(
726
726
  return false;
727
727
  }
728
728
  }
729
+ class TinaAdminApi {
730
+ constructor(cms) {
731
+ this.api = cms.api.tina;
732
+ }
733
+ async fetchCollections() {
734
+ const response = await this.api.request(`#graphql
735
+ query{
736
+ getCollections {
737
+ label,
738
+ name
739
+ }
740
+ }`, { variables: {} });
741
+ return response;
742
+ }
743
+ async fetchCollection(collectionName, includeDocuments) {
744
+ const response = await this.api.request(`#graphql
745
+ query($collection: String!, $includeDocuments: Boolean!){
746
+ getCollection(collection: $collection){
747
+ name
748
+ label
749
+ format
750
+ templates
751
+ documents @include(if: $includeDocuments) {
752
+ totalCount
753
+ edges {
754
+ node {
755
+ ... on Document {
756
+ sys {
757
+ template
758
+ breadcrumbs
759
+ path
760
+ basename
761
+ relativePath
762
+ filename
763
+ extension
764
+ }
765
+ }
766
+ }
767
+ }
768
+ }
769
+ }
770
+ }`, { variables: { collection: collectionName, includeDocuments } });
771
+ return response;
772
+ }
773
+ async fetchDocument(collectionName, relativePath) {
774
+ const response = await this.api.request(`#graphql
775
+ query($collection: String!, $relativePath: String!) {
776
+ getDocument(collection:$collection, relativePath:$relativePath) {
777
+ ... on Document {
778
+ form
779
+ values
780
+ }
781
+ }
782
+ }`, { variables: { collection: collectionName, relativePath } });
783
+ return response;
784
+ }
785
+ async fetchDocumentFields() {
786
+ const response = await this.api.request(`#graphql
787
+ query {
788
+ getDocumentFields
789
+ }`, { variables: {} });
790
+ return response;
791
+ }
792
+ async createDocument(collectionName, relativePath, params) {
793
+ const response = await this.api.request(`#graphql
794
+ mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
795
+ createDocument(
796
+ collection: $collection,
797
+ relativePath: $relativePath,
798
+ params: $params
799
+ ){__typename}
800
+ }`, {
801
+ variables: {
802
+ collection: collectionName,
803
+ relativePath,
804
+ params
805
+ }
806
+ });
807
+ return response;
808
+ }
809
+ async updateDocument(collectionName, relativePath, params) {
810
+ const response = await this.api.request(`#graphql
811
+ mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
812
+ updateDocument(
813
+ collection: $collection,
814
+ relativePath: $relativePath,
815
+ params: $params
816
+ ){__typename}
817
+ }`, {
818
+ variables: {
819
+ collection: collectionName,
820
+ relativePath,
821
+ params
822
+ }
823
+ });
824
+ return response;
825
+ }
826
+ }
729
827
  function sleep(ms) {
730
828
  return new Promise((resolve) => setTimeout(resolve, ms));
731
829
  }
@@ -823,6 +921,11 @@ mutation addPendingDocumentMutation(
823
921
  return newBranch;
824
922
  };
825
923
  setupMedia();
924
+ React__default["default"].useMemo(() => {
925
+ if (cms.flags.get("tina-admin") === true) {
926
+ cms.registerApi("admin", new TinaAdminApi(cms));
927
+ }
928
+ }, [cms, cms.flags.get("tina-admin")]);
826
929
  const [branchingEnabled, setBranchingEnabled] = React__default["default"].useState(() => cms.flags.get("branch-switcher"));
827
930
  React__default["default"].useEffect(() => {
828
931
  cms.events.subscribe("flag:set", ({ key, value }) => {
@@ -1924,40 +2027,49 @@ Document
1924
2027
  position: relative !important;
1925
2028
  }
1926
2029
 
1927
- .tina-tailwind .bottom-3 {
1928
- bottom: 12px !important;
1929
- }
1930
-
1931
- .tina-tailwind .right-5 {
1932
- right: 20px !important;
2030
+ .tina-tailwind .left-0 {
2031
+ left: 0px !important;
1933
2032
  }
1934
2033
 
1935
2034
  .tina-tailwind .right-0 {
1936
2035
  right: 0px !important;
1937
2036
  }
1938
2037
 
2038
+ .tina-tailwind .bottom-2 {
2039
+ bottom: 8px !important;
2040
+ }
2041
+
2042
+ .tina-tailwind .right-5 {
2043
+ right: 20px !important;
2044
+ }
2045
+
1939
2046
  .tina-tailwind .z-50 {
1940
2047
  z-index: 50 !important;
1941
2048
  }
1942
2049
 
1943
- .tina-tailwind .-ml-1 {
1944
- margin-left: -4px !important;
2050
+ .tina-tailwind .mx-auto {
2051
+ margin-left: auto !important;
2052
+ margin-right: auto !important;
1945
2053
  }
1946
2054
 
1947
- .tina-tailwind .mr-1\\.5 {
1948
- margin-right: 6px !important;
2055
+ .tina-tailwind .mr-2 {
2056
+ margin-right: 8px !important;
1949
2057
  }
1950
2058
 
1951
- .tina-tailwind .mr-1 {
1952
- margin-right: 4px !important;
2059
+ .tina-tailwind .mb-2 {
2060
+ margin-bottom: 8px !important;
1953
2061
  }
1954
2062
 
1955
- .tina-tailwind .mb-3 {
1956
- margin-bottom: 12px !important;
2063
+ .tina-tailwind .mb-1 {
2064
+ margin-bottom: 4px !important;
1957
2065
  }
1958
2066
 
1959
- .tina-tailwind .mr-2 {
1960
- margin-right: 8px !important;
2067
+ .tina-tailwind .-mt-0\\.5 {
2068
+ margin-top: -2px !important;
2069
+ }
2070
+
2071
+ .tina-tailwind .-mt-0 {
2072
+ margin-top: 0px !important;
1961
2073
  }
1962
2074
 
1963
2075
  .tina-tailwind .ml-1 {
@@ -1968,16 +2080,12 @@ Document
1968
2080
  margin-top: 8px !important;
1969
2081
  }
1970
2082
 
1971
- .tina-tailwind .mt-8 {
1972
- margin-top: 32px !important;
1973
- }
1974
-
1975
- .tina-tailwind .mb-0\\.5 {
1976
- margin-bottom: 2px !important;
2083
+ .tina-tailwind .mr-1\\.5 {
2084
+ margin-right: 6px !important;
1977
2085
  }
1978
2086
 
1979
- .tina-tailwind .mb-0 {
1980
- margin-bottom: 0px !important;
2087
+ .tina-tailwind .mr-1 {
2088
+ margin-right: 4px !important;
1981
2089
  }
1982
2090
 
1983
2091
  .tina-tailwind .block {
@@ -2008,10 +2116,18 @@ Document
2008
2116
  height: auto !important;
2009
2117
  }
2010
2118
 
2119
+ .tina-tailwind .h-full {
2120
+ height: 100% !important;
2121
+ }
2122
+
2011
2123
  .tina-tailwind .h-6 {
2012
2124
  height: 24px !important;
2013
2125
  }
2014
2126
 
2127
+ .tina-tailwind .h-10 {
2128
+ height: 40px !important;
2129
+ }
2130
+
2015
2131
  .tina-tailwind .h-5 {
2016
2132
  height: 20px !important;
2017
2133
  }
@@ -2024,48 +2140,44 @@ Document
2024
2140
  width: 40px !important;
2025
2141
  }
2026
2142
 
2027
- .tina-tailwind .w-80 {
2028
- width: 320px !important;
2029
- }
2030
-
2031
- .tina-tailwind .w-2\\/3 {
2032
- width: 66.666667% !important;
2033
- }
2034
-
2035
- .tina-tailwind .w-6 {
2036
- width: 24px !important;
2037
- }
2038
-
2039
2143
  .tina-tailwind .w-auto {
2040
2144
  width: auto !important;
2041
2145
  }
2042
2146
 
2147
+ .tina-tailwind .w-5 {
2148
+ width: 20px !important;
2149
+ }
2150
+
2043
2151
  .tina-tailwind .w-56 {
2044
2152
  width: 224px !important;
2045
2153
  }
2046
2154
 
2047
- .tina-tailwind .min-w-full {
2048
- min-width: 100% !important;
2155
+ .tina-tailwind .w-6 {
2156
+ width: 24px !important;
2049
2157
  }
2050
2158
 
2051
2159
  .tina-tailwind .max-w-lg {
2052
2160
  max-width: 32rem !important;
2053
2161
  }
2054
2162
 
2055
- .tina-tailwind .max-w-screen-md {
2056
- max-width: 768px !important;
2163
+ .tina-tailwind .max-w-screen-xl {
2164
+ max-width: 1280px !important;
2165
+ }
2166
+
2167
+ .tina-tailwind .max-w-form {
2168
+ max-width: 900px !important;
2057
2169
  }
2058
2170
 
2059
- .tina-tailwind .max-w-xs {
2060
- max-width: 20rem !important;
2171
+ .tina-tailwind .max-w-full {
2172
+ max-width: 100% !important;
2061
2173
  }
2062
2174
 
2063
2175
  .tina-tailwind .flex-1 {
2064
2176
  flex: 1 1 0% !important;
2065
2177
  }
2066
2178
 
2067
- .tina-tailwind .flex-shrink-0 {
2068
- flex-shrink: 0 !important;
2179
+ .tina-tailwind .table-auto {
2180
+ table-layout: auto !important;
2069
2181
  }
2070
2182
 
2071
2183
  .tina-tailwind .origin-top-right {
@@ -2087,16 +2199,6 @@ Document
2087
2199
  transform: var(--tw-transform) !important;
2088
2200
  }
2089
2201
 
2090
- .tina-tailwind .rotate-90 {
2091
- --tw-rotate: 90deg !important;
2092
- transform: var(--tw-transform) !important;
2093
- }
2094
-
2095
- .tina-tailwind .rotate-0 {
2096
- --tw-rotate: 0deg !important;
2097
- transform: var(--tw-transform) !important;
2098
- }
2099
-
2100
2202
  .tina-tailwind .scale-95 {
2101
2203
  --tw-scale-x: .95 !important;
2102
2204
  --tw-scale-y: .95 !important;
@@ -2129,14 +2231,6 @@ Document
2129
2231
  align-items: stretch !important;
2130
2232
  }
2131
2233
 
2132
- .tina-tailwind .justify-start {
2133
- justify-content: flex-start !important;
2134
- }
2135
-
2136
- .tina-tailwind .justify-end {
2137
- justify-content: flex-end !important;
2138
- }
2139
-
2140
2234
  .tina-tailwind .justify-center {
2141
2235
  justify-content: center !important;
2142
2236
  }
@@ -2157,18 +2251,10 @@ Document
2157
2251
  gap: 16px !important;
2158
2252
  }
2159
2253
 
2160
- .tina-tailwind .gap-1 {
2161
- gap: 4px !important;
2162
- }
2163
-
2164
2254
  .tina-tailwind .gap-3 {
2165
2255
  gap: 12px !important;
2166
2256
  }
2167
2257
 
2168
- .tina-tailwind .gap-1\\.5 {
2169
- gap: 6px !important;
2170
- }
2171
-
2172
2258
  .tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {
2173
2259
  --tw-divide-y-reverse: 0 !important;
2174
2260
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
@@ -2183,10 +2269,6 @@ Document
2183
2269
  overflow-y: auto !important;
2184
2270
  }
2185
2271
 
2186
- .tina-tailwind .overflow-ellipsis {
2187
- text-overflow: ellipsis !important;
2188
- }
2189
-
2190
2272
  .tina-tailwind .whitespace-nowrap {
2191
2273
  white-space: nowrap !important;
2192
2274
  }
@@ -2211,10 +2293,6 @@ Document
2211
2293
  border-bottom-width: 1px !important;
2212
2294
  }
2213
2295
 
2214
- .tina-tailwind .border-r {
2215
- border-right-width: 1px !important;
2216
- }
2217
-
2218
2296
  .tina-tailwind .border-gray-200 {
2219
2297
  --tw-border-opacity: 1 !important;
2220
2298
  border-color: rgba(225, 221, 236, var(--tw-border-opacity)) !important;
@@ -2234,8 +2312,9 @@ Document
2234
2312
  background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;
2235
2313
  }
2236
2314
 
2237
- .tina-tailwind .bg-transparent {
2238
- background-color: transparent !important;
2315
+ .tina-tailwind .bg-blue-500 {
2316
+ --tw-bg-opacity: 1 !important;
2317
+ background-color: rgba(0, 132, 255, var(--tw-bg-opacity)) !important;
2239
2318
  }
2240
2319
 
2241
2320
  .tina-tailwind .bg-gradient-to-b {
@@ -2247,19 +2326,10 @@ Document
2247
2326
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 44, 108, 0)) !important;
2248
2327
  }
2249
2328
 
2250
- .tina-tailwind .from-white {
2251
- --tw-gradient-from: #fff !important;
2252
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)) !important;
2253
- }
2254
-
2255
2329
  .tina-tailwind .to-gray-900 {
2256
2330
  --tw-gradient-to: #252336 !important;
2257
2331
  }
2258
2332
 
2259
- .tina-tailwind .to-gray-50 {
2260
- --tw-gradient-to: #F6F6F9 !important;
2261
- }
2262
-
2263
2333
  .tina-tailwind .px-4 {
2264
2334
  padding-left: 16px !important;
2265
2335
  padding-right: 16px !important;
@@ -2280,6 +2350,21 @@ Document
2280
2350
  padding-bottom: 16px !important;
2281
2351
  }
2282
2352
 
2353
+ .tina-tailwind .px-12 {
2354
+ padding-left: 48px !important;
2355
+ padding-right: 48px !important;
2356
+ }
2357
+
2358
+ .tina-tailwind .py-10 {
2359
+ padding-top: 40px !important;
2360
+ padding-bottom: 40px !important;
2361
+ }
2362
+
2363
+ .tina-tailwind .px-20 {
2364
+ padding-left: 80px !important;
2365
+ padding-right: 80px !important;
2366
+ }
2367
+
2283
2368
  .tina-tailwind .px-6 {
2284
2369
  padding-left: 24px !important;
2285
2370
  padding-right: 24px !important;
@@ -2295,47 +2380,22 @@ Document
2295
2380
  padding-bottom: 8px !important;
2296
2381
  }
2297
2382
 
2298
- .tina-tailwind .py-7 {
2299
- padding-top: 28px !important;
2300
- padding-bottom: 28px !important;
2301
- }
2302
-
2303
- .tina-tailwind .px-8 {
2304
- padding-left: 32px !important;
2305
- padding-right: 32px !important;
2306
- }
2307
-
2308
- .tina-tailwind .py-2\\.5 {
2309
- padding-top: 10px !important;
2310
- padding-bottom: 10px !important;
2311
- }
2312
-
2313
- .tina-tailwind .py-14 {
2314
- padding-top: 56px !important;
2315
- padding-bottom: 56px !important;
2316
- }
2317
-
2318
2383
  .tina-tailwind .py-3 {
2319
2384
  padding-top: 12px !important;
2320
2385
  padding-bottom: 12px !important;
2321
2386
  }
2322
2387
 
2323
- .tina-tailwind .py-1\\.5 {
2324
- padding-top: 6px !important;
2325
- padding-bottom: 6px !important;
2326
- }
2327
-
2328
- .tina-tailwind .py-10 {
2329
- padding-top: 40px !important;
2330
- padding-bottom: 40px !important;
2388
+ .tina-tailwind .px-8 {
2389
+ padding-left: 32px !important;
2390
+ padding-right: 32px !important;
2331
2391
  }
2332
2392
 
2333
- .tina-tailwind .pt-16 {
2334
- padding-top: 64px !important;
2393
+ .tina-tailwind .pb-4 {
2394
+ padding-bottom: 16px !important;
2335
2395
  }
2336
2396
 
2337
- .tina-tailwind .pb-10 {
2338
- padding-bottom: 40px !important;
2397
+ .tina-tailwind .pt-18 {
2398
+ padding-top: 72px !important;
2339
2399
  }
2340
2400
 
2341
2401
  .tina-tailwind .text-left {
@@ -2360,40 +2420,26 @@ Document
2360
2420
  line-height: 1.5 !important;
2361
2421
  }
2362
2422
 
2363
- .tina-tailwind .text-lg {
2364
- font-size: 18px !important;
2365
- line-height: 1.55 !important;
2366
- }
2367
-
2368
2423
  .tina-tailwind .text-sm {
2369
2424
  font-size: 14px !important;
2370
2425
  line-height: 1.43 !important;
2371
2426
  }
2372
2427
 
2428
+ .tina-tailwind .text-xl {
2429
+ font-size: 20px !important;
2430
+ line-height: 1.4 !important;
2431
+ }
2432
+
2373
2433
  .tina-tailwind .text-md {
2374
2434
  font-size: 16px !important;
2375
2435
  line-height: 1.5 !important;
2376
2436
  }
2377
2437
 
2378
- .tina-tailwind .text-3xl {
2379
- font-size: 30px !important;
2380
- line-height: 1.2 !important;
2381
- }
2382
-
2383
2438
  .tina-tailwind .text-xs {
2384
2439
  font-size: 13px !important;
2385
2440
  line-height: 1.33 !important;
2386
2441
  }
2387
2442
 
2388
- .tina-tailwind .text-4xl {
2389
- font-size: 36px !important;
2390
- line-height: 1.1 !important;
2391
- }
2392
-
2393
- .tina-tailwind .font-bold {
2394
- font-weight: 700 !important;
2395
- }
2396
-
2397
2443
  .tina-tailwind .font-medium {
2398
2444
  font-weight: 500 !important;
2399
2445
  }
@@ -2410,14 +2456,18 @@ Document
2410
2456
  line-height: 1.5 !important;
2411
2457
  }
2412
2458
 
2413
- .tina-tailwind .leading-4 {
2414
- line-height: 16px !important;
2459
+ .tina-tailwind .leading-tight {
2460
+ line-height: 1.25 !important;
2415
2461
  }
2416
2462
 
2417
2463
  .tina-tailwind .leading-5 {
2418
2464
  line-height: 20px !important;
2419
2465
  }
2420
2466
 
2467
+ .tina-tailwind .leading-4 {
2468
+ line-height: 16px !important;
2469
+ }
2470
+
2421
2471
  .tina-tailwind .tracking-wide {
2422
2472
  letter-spacing: 0.025em !important;
2423
2473
  }
@@ -2427,24 +2477,23 @@ Document
2427
2477
  color: rgba(67, 62, 82, var(--tw-text-opacity)) !important;
2428
2478
  }
2429
2479
 
2430
- .tina-tailwind .text-gray-800 {
2480
+ .tina-tailwind .text-blue-600 {
2431
2481
  --tw-text-opacity: 1 !important;
2432
- color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;
2482
+ color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
2433
2483
  }
2434
2484
 
2435
- .tina-tailwind .text-gray-600 {
2485
+ .tina-tailwind .text-gray-500 {
2436
2486
  --tw-text-opacity: 1 !important;
2437
- color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;
2487
+ color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;
2438
2488
  }
2439
2489
 
2440
- .tina-tailwind .text-blue-400 {
2490
+ .tina-tailwind .text-gray-400 {
2441
2491
  --tw-text-opacity: 1 !important;
2442
- color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2492
+ color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;
2443
2493
  }
2444
2494
 
2445
- .tina-tailwind .text-blue-600 {
2446
- --tw-text-opacity: 1 !important;
2447
- color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
2495
+ .tina-tailwind .text-current {
2496
+ color: currentColor !important;
2448
2497
  }
2449
2498
 
2450
2499
  .tina-tailwind .text-white {
@@ -2452,56 +2501,66 @@ Document
2452
2501
  color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
2453
2502
  }
2454
2503
 
2455
- .tina-tailwind .text-gray-400 {
2504
+ .tina-tailwind .text-gray-600 {
2456
2505
  --tw-text-opacity: 1 !important;
2457
- color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;
2506
+ color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;
2458
2507
  }
2459
2508
 
2460
- .tina-tailwind .text-gray-300 {
2509
+ .tina-tailwind .text-gray-800 {
2461
2510
  --tw-text-opacity: 1 !important;
2462
- color: rgba(178, 173, 190, var(--tw-text-opacity)) !important;
2511
+ color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;
2463
2512
  }
2464
2513
 
2465
- .tina-tailwind .text-gray-500 {
2514
+ .tina-tailwind .text-gray-900 {
2466
2515
  --tw-text-opacity: 1 !important;
2467
- color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;
2516
+ color: rgba(37, 35, 54, var(--tw-text-opacity)) !important;
2468
2517
  }
2469
2518
 
2470
- .tina-tailwind .underline {
2471
- text-decoration: underline !important;
2519
+ .tina-tailwind .text-blue-500 {
2520
+ --tw-text-opacity: 1 !important;
2521
+ color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;
2472
2522
  }
2473
2523
 
2474
- .tina-tailwind .opacity-80 {
2475
- opacity: .8 !important;
2524
+ .tina-tailwind .text-blue-400 {
2525
+ --tw-text-opacity: 1 !important;
2526
+ color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2476
2527
  }
2477
2528
 
2478
- .tina-tailwind .opacity-50 {
2479
- opacity: .5 !important;
2529
+ .tina-tailwind .underline {
2530
+ text-decoration: underline !important;
2480
2531
  }
2481
2532
 
2482
2533
  .tina-tailwind .opacity-100 {
2483
2534
  opacity: 1 !important;
2484
2535
  }
2485
2536
 
2486
- .tina-tailwind .opacity-0 {
2487
- opacity: 0 !important;
2488
- }
2489
-
2490
2537
  .tina-tailwind .opacity-90 {
2491
2538
  opacity: .9 !important;
2492
2539
  }
2493
2540
 
2541
+ .tina-tailwind .opacity-80 {
2542
+ opacity: .8 !important;
2543
+ }
2544
+
2545
+ .tina-tailwind .opacity-50 {
2546
+ opacity: .5 !important;
2547
+ }
2548
+
2494
2549
  .tina-tailwind .opacity-70 {
2495
2550
  opacity: .7 !important;
2496
2551
  }
2497
2552
 
2553
+ .tina-tailwind .opacity-0 {
2554
+ opacity: 0 !important;
2555
+ }
2556
+
2498
2557
  .tina-tailwind .shadow-lg {
2499
2558
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
2500
2559
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2501
2560
  }
2502
2561
 
2503
- .tina-tailwind .shadow-sm {
2504
- --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
2562
+ .tina-tailwind .shadow-2xl {
2563
+ --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
2505
2564
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2506
2565
  }
2507
2566
 
@@ -2510,8 +2569,13 @@ Document
2510
2569
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2511
2570
  }
2512
2571
 
2513
- .tina-tailwind .ring-1 {
2514
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2572
+ .tina-tailwind .shadow-sm {
2573
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
2574
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2575
+ }
2576
+
2577
+ .tina-tailwind .ring-1 {
2578
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2515
2579
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
2516
2580
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
2517
2581
  }
@@ -2529,14 +2593,14 @@ Document
2529
2593
  filter: var(--tw-filter) !important;
2530
2594
  }
2531
2595
 
2532
- .tina-tailwind .transition-colors {
2533
- transition-property: background-color, border-color, color, fill, stroke !important;
2596
+ .tina-tailwind .transition-opacity {
2597
+ transition-property: opacity !important;
2534
2598
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2535
2599
  transition-duration: 150ms !important;
2536
2600
  }
2537
2601
 
2538
- .tina-tailwind .transition-opacity {
2539
- transition-property: opacity !important;
2602
+ .tina-tailwind .transition-colors {
2603
+ transition-property: background-color, border-color, color, fill, stroke !important;
2540
2604
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2541
2605
  transition-duration: 150ms !important;
2542
2606
  }
@@ -2553,38 +2617,55 @@ Document
2553
2617
  transition-duration: 150ms !important;
2554
2618
  }
2555
2619
 
2556
- .tina-tailwind .duration-150 {
2557
- transition-duration: 150ms !important;
2558
- }
2559
-
2560
2620
  .tina-tailwind .duration-300 {
2561
2621
  transition-duration: 300ms !important;
2562
2622
  }
2563
2623
 
2564
- .tina-tailwind .duration-75 {
2565
- transition-duration: 75ms !important;
2624
+ .tina-tailwind .duration-150 {
2625
+ transition-duration: 150ms !important;
2566
2626
  }
2567
2627
 
2568
2628
  .tina-tailwind .duration-100 {
2569
2629
  transition-duration: 100ms !important;
2570
2630
  }
2571
2631
 
2632
+ .tina-tailwind .duration-75 {
2633
+ transition-duration: 75ms !important;
2634
+ }
2635
+
2572
2636
  .tina-tailwind .ease-out {
2573
2637
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
2574
2638
  }
2575
2639
 
2640
+ .tina-tailwind .ease-in {
2641
+ transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
2642
+ }
2643
+
2576
2644
  .tina-tailwind .ease-in-out {
2577
2645
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2578
2646
  }
2579
2647
 
2580
- .tina-tailwind .ease-in {
2581
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
2582
- }
2648
+ .tina-tailwind .icon-parent svg {
2649
+ fill: currentColor !important;
2650
+ }
2583
2651
 
2584
2652
  .tina-tailwind {
2585
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2586
- --tw-text-opacity: 1;
2587
- color: rgba(86, 81, 101, var(--tw-text-opacity));
2653
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2654
+ --tw-text-opacity: 1;
2655
+ color: rgba(86, 81, 101, var(--tw-text-opacity));
2656
+ }
2657
+
2658
+ .first\\:pt-3:first-child {
2659
+ padding-top: 12px !important;
2660
+ }
2661
+
2662
+ .last\\:pb-3:last-child {
2663
+ padding-bottom: 12px !important;
2664
+ }
2665
+
2666
+ .hover\\:bg-blue-600:hover {
2667
+ --tw-bg-opacity: 1 !important;
2668
+ background-color: rgba(5, 116, 228, var(--tw-bg-opacity)) !important;
2588
2669
  }
2589
2670
 
2590
2671
  .hover\\:bg-gray-50:hover {
@@ -2597,9 +2678,9 @@ Document
2597
2678
  color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
2598
2679
  }
2599
2680
 
2600
- .hover\\:text-blue-500:hover {
2681
+ .hover\\:text-blue-400:hover {
2601
2682
  --tw-text-opacity: 1 !important;
2602
- color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;
2683
+ color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2603
2684
  }
2604
2685
 
2605
2686
  .hover\\:opacity-100:hover {
@@ -2610,31 +2691,38 @@ Document
2610
2691
  opacity: .8 !important;
2611
2692
  }
2612
2693
 
2613
- .focus\\:outline-none:focus {
2614
- outline: 2px solid transparent !important;
2615
- outline-offset: 2px !important;
2694
+ .focus\\:text-blue-400:focus {
2695
+ --tw-text-opacity: 1 !important;
2696
+ color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2616
2697
  }
2617
2698
 
2618
- .group:hover .group-hover\\:opacity-100 {
2619
- opacity: 1 !important;
2699
+ .focus\\:underline:focus {
2700
+ text-decoration: underline !important;
2620
2701
  }
2621
2702
 
2622
- .group:hover .group-hover\\:opacity-80 {
2623
- opacity: .8 !important;
2703
+ .focus\\:shadow-outline:focus {
2704
+ --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) !important;
2705
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2624
2706
  }
2625
2707
 
2626
- @media (min-width: 640px) {
2708
+ .focus\\:outline-none:focus {
2709
+ outline: 2px solid transparent !important;
2710
+ outline-offset: 2px !important;
2711
+ }
2627
2712
 
2628
- .sm\\:rounded-lg {
2629
- border-radius: 8px !important;
2630
- }
2713
+ .focus\\:ring-2:focus {
2714
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2715
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
2716
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
2631
2717
  }
2632
2718
 
2633
- @media (min-width: 1024px) {
2719
+ .focus\\:ring-blue-500:focus {
2720
+ --tw-ring-opacity: 1 !important;
2721
+ --tw-ring-color: rgba(0, 132, 255, var(--tw-ring-opacity)) !important;
2722
+ }
2634
2723
 
2635
- .lg\\:w-96 {
2636
- width: 384px !important;
2637
- }
2724
+ .group:hover .group-hover\\:opacity-100 {
2725
+ opacity: 1 !important;
2638
2726
  }
2639
2727
  `;
2640
2728
  function useTina({
@@ -2691,7 +2779,7 @@ Document
2691
2779
  return { hasError: true, message: error.message };
2692
2780
  }
2693
2781
  render() {
2694
- const branchData = window.localStorage.getItem("tinacms-current-branch");
2782
+ const branchData = window.localStorage && window.localStorage.getItem("tinacms-current-branch");
2695
2783
  const hasBranchData = branchData && branchData.length > 0;
2696
2784
  if (this.state.hasError && !this.state.pageRefresh) {
2697
2785
  return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3084,210 +3172,70 @@ This will work when developing locally but NOT when deployed to production.
3084
3172
  return elem(conf);
3085
3173
  }) : elem(DefaultContext);
3086
3174
  }
3087
- function BiEdit(props) {
3088
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
3089
- }
3090
- function BiExit(props) {
3091
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z" } }, { "tag": "path", "attr": { "d": "m11 16 5-4-5-4v3.001H3v2h8z" } }] })(props);
3092
- }
3093
- function BiLinkExternal(props) {
3094
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z" } }, { "tag": "path", "attr": { "d": "M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z" } }] })(props);
3095
- }
3096
- function BiLogIn(props) {
3097
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
3098
- }
3099
- function BiLogOut(props) {
3100
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
3101
- }
3102
3175
  function ImFilesEmpty(props) {
3103
3176
  return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" } }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" } }] })(props);
3104
3177
  }
3105
- function VscOpenPreview(props) {
3106
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
3107
- }
3108
- class TinaAdminApi {
3109
- constructor(TinaApi) {
3110
- this.api = TinaApi;
3111
- }
3112
- async fetchCollections() {
3113
- const response = await this.api.request(`query{ getCollections { label, name } }`, { variables: {} });
3114
- return response;
3115
- }
3116
- async fetchCollection(collectionName, includeDocuments) {
3117
- const response = await this.api.request(`
3118
- query($collection: String!, $includeDocuments: Boolean!){
3119
- getCollection(collection: $collection){
3120
- name
3121
- label
3122
- format
3123
- templates
3124
- documents @include(if: $includeDocuments) {
3125
- totalCount
3126
- edges {
3127
- node {
3128
- ... on Document {
3129
- sys {
3130
- template
3131
- breadcrumbs
3132
- path
3133
- basename
3134
- relativePath
3135
- filename
3136
- extension
3137
- }
3138
- }
3139
- }
3140
- }
3141
- }
3142
- }
3143
- }`, { variables: { collection: collectionName, includeDocuments } });
3144
- return response;
3145
- }
3146
- async fetchDocument(collectionName, relativePath) {
3147
- const response = await this.api.request(`
3148
- query($collection: String!, $relativePath: String!) {
3149
- getDocument(collection:$collection, relativePath:$relativePath) {
3150
- ... on Document {
3151
- form
3152
- values
3153
- }
3154
- }
3155
- }`, { variables: { collection: collectionName, relativePath } });
3156
- return response;
3157
- }
3158
- async fetchDocumentFields() {
3159
- const response = await this.api.request(`query { getDocumentFields }`, { variables: {} });
3160
- return response;
3161
- }
3162
- async createDocument(collectionName, relativePath, params) {
3163
- const response = await this.api.request(`#graphql
3164
- mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
3165
- createDocument(
3166
- collection: $collection,
3167
- relativePath: $relativePath,
3168
- params: $params
3169
- ){__typename}
3170
- }`, {
3171
- variables: {
3172
- collection: collectionName,
3173
- relativePath,
3174
- params
3175
- }
3176
- });
3177
- return response;
3178
- }
3179
- async updateDocument(collectionName, relativePath, params) {
3180
- const response = await this.api.request(`#graphql
3181
- mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
3182
- updateDocument(
3183
- collection: $collection,
3184
- relativePath: $relativePath,
3185
- params: $params
3186
- ){__typename}
3187
- }`, {
3188
- variables: {
3189
- collection: collectionName,
3190
- relativePath,
3191
- params
3192
- }
3193
- });
3194
- return response;
3195
- }
3196
- }
3197
3178
  const useGetCollections = (cms) => {
3198
- const api = new TinaAdminApi(cms.api.tina);
3199
- const [collections, setCollections] = React.useState([]);
3179
+ const api = new TinaAdminApi(cms);
3180
+ const [info, setInfo] = React.useState({ collections: [], loading: true, error: false });
3200
3181
  React.useEffect(() => {
3201
3182
  const fetchCollections = async () => {
3202
3183
  const response = await api.fetchCollections();
3203
- setCollections(response.getCollections);
3184
+ setInfo({
3185
+ collections: response.getCollections,
3186
+ loading: false,
3187
+ error: false
3188
+ });
3204
3189
  };
3205
3190
  fetchCollections();
3206
3191
  }, [cms]);
3207
- return collections;
3192
+ return info;
3208
3193
  };
3209
3194
  const GetCollections = ({ cms, children }) => {
3210
- const collections = useGetCollections(cms);
3195
+ const { collections, loading, error } = useGetCollections(cms);
3211
3196
  if (!collections)
3212
3197
  return null;
3213
- return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collections));
3198
+ return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collections, loading, error));
3199
+ };
3200
+ const slugify = (text) => {
3201
+ return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
3214
3202
  };
3215
3203
  const Sidebar = ({ cms }) => {
3216
- const { setEdit } = sharedctx.useEditState();
3217
- const logout2 = () => setEdit(false);
3204
+ const screens = cms.plugins.getType("screen").all();
3218
3205
  return /* @__PURE__ */ React__default["default"].createElement(GetCollections, {
3219
3206
  cms
3220
- }, (collections) => /* @__PURE__ */ React__default["default"].createElement("div", {
3221
- className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
3222
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3223
- className: "border-b border-gray-200"
3224
- }, /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
3225
- as: "div",
3226
- className: "relative block"
3227
- }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
3228
- className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
3229
- }, /* @__PURE__ */ React__default["default"].createElement("span", {
3230
- className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
3231
- }, /* @__PURE__ */ React__default["default"].createElement("svg", {
3232
- viewBox: "0 0 32 32",
3233
- fill: "#EC4815",
3234
- xmlns: "http://www.w3.org/2000/svg",
3235
- className: "w-10 h-auto -ml-1"
3236
- }, /* @__PURE__ */ React__default["default"].createElement("path", {
3237
- d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
3238
- }), /* @__PURE__ */ React__default["default"].createElement("path", {
3239
- d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
3240
- })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin")), /* @__PURE__ */ React__default["default"].createElement("svg", {
3241
- width: "20",
3242
- height: "20",
3243
- viewBox: "0 0 20 20",
3244
- fill: "none",
3245
- xmlns: "http://www.w3.org/2000/svg",
3246
- className: `flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
3247
- }, /* @__PURE__ */ React__default["default"].createElement("g", {
3248
- opacity: "0.3"
3249
- }, /* @__PURE__ */ React__default["default"].createElement("path", {
3250
- d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
3251
- fill: "currentColor"
3252
- })))), /* @__PURE__ */ React__default["default"].createElement("div", {
3253
- className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
3254
- }, /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
3255
- enter: "transition duration-150 ease-out",
3256
- enterFrom: "transform opacity-0 -translate-y-2",
3257
- enterTo: "transform opacity-100 translate-y-0",
3258
- leave: "transition duration-75 ease-in",
3259
- leaveFrom: "transform opacity-100 translate-y-0",
3260
- leaveTo: "transform opacity-0 -translate-y-2"
3261
- }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
3262
- className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
3263
- }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("a", {
3264
- className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
3265
- href: "/"
3266
- }, /* @__PURE__ */ React__default["default"].createElement(VscOpenPreview, {
3267
- className: "w-6 h-auto mr-1.5 text-blue-400"
3268
- }), " ", "View Website")), /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("button", {
3269
- className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
3270
- onClick: () => logout2()
3271
- }, /* @__PURE__ */ React__default["default"].createElement(BiExit, {
3272
- className: "w-6 h-auto mr-1.5 text-blue-400"
3273
- }), " ", "Log out")))))))), /* @__PURE__ */ React__default["default"].createElement("div", {
3274
- className: "px-6 py-7 flex-1"
3275
- }, /* @__PURE__ */ React__default["default"].createElement("h4", {
3276
- className: "uppercase font-bold text-sm mb-3"
3277
- }, "Collections"), /* @__PURE__ */ React__default["default"].createElement("ul", {
3278
- className: "flex flex-col gap-4"
3279
- }, collections.map((collection) => {
3280
- return /* @__PURE__ */ React__default["default"].createElement("li", {
3281
- key: `${collection.name}-link`
3282
- }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
3283
- className: ({ isActive }) => {
3284
- return `text-lg tracking-wide ${isActive ? "text-blue-600" : ""} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
3285
- },
3286
- to: `/admin/collections/${collection.name}`
3287
- }, /* @__PURE__ */ React__default["default"].createElement(ImFilesEmpty, {
3288
- className: "mr-2 h-6 opacity-80 w-auto"
3289
- }), " ", collection.label));
3290
- })))));
3207
+ }, (collections, loading, error) => /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
3208
+ sidebarWidth: 360,
3209
+ showCollections: true,
3210
+ collectionsInfo: {
3211
+ collections,
3212
+ loading,
3213
+ error
3214
+ },
3215
+ screens,
3216
+ contentCreators: [],
3217
+ RenderNavSite: ({ view }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
3218
+ label: view.name,
3219
+ to: `screens/${slugify(view.name)}`,
3220
+ Icon: view.Icon ? view.Icon : ImFilesEmpty
3221
+ }),
3222
+ RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
3223
+ label: collection.label ? collection.label : collection.name,
3224
+ to: `collections/${collection.name}`,
3225
+ Icon: ImFilesEmpty
3226
+ })
3227
+ }));
3228
+ };
3229
+ const SidebarLink = (props) => {
3230
+ const { to, label, Icon } = props;
3231
+ return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
3232
+ className: ({ isActive }) => {
3233
+ return `text-base tracking-wide ${isActive ? "text-blue-600" : "text-gray-500"} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
3234
+ },
3235
+ to
3236
+ }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
3237
+ className: "mr-2 h-6 opacity-80 w-auto"
3238
+ }), " ", label);
3291
3239
  };
3292
3240
  const GetCMS = ({ children }) => {
3293
3241
  try {
@@ -3297,6 +3245,18 @@ This will work when developing locally but NOT when deployed to production.
3297
3245
  return null;
3298
3246
  }
3299
3247
  };
3248
+ function BiEdit(props) {
3249
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
3250
+ }
3251
+ function BiLogIn(props) {
3252
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
3253
+ }
3254
+ function BiLogOut(props) {
3255
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
3256
+ }
3257
+ function BiPlus(props) {
3258
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
3259
+ }
3300
3260
  function MdOutlineArrowBack(props) {
3301
3261
  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
3302
3262
  }
@@ -3365,25 +3325,47 @@ This will work when developing locally but NOT when deployed to production.
3365
3325
  className: "w-6 h-auto mr-1.5 opacity-80"
3366
3326
  }), " Log out"));
3367
3327
  };
3368
- const DashboardPage = () => {
3328
+ const PageWrapper = ({
3329
+ children
3330
+ }) => {
3369
3331
  return /* @__PURE__ */ React__default["default"].createElement("div", {
3370
- className: "h-screen overflow-y-auto flex flex-col justify-start items-stretch"
3371
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3372
- className: "flex-0 px-6 pt-16 pb-10 w-full flex justify-center bg-white border-b border-gray-150"
3373
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3374
- className: "max-w-screen-md w-full"
3375
- }, /* @__PURE__ */ React__default["default"].createElement("h3", {
3376
- className: "text-4xl"
3377
- }, "Welcome to Tina CMS."))), /* @__PURE__ */ React__default["default"].createElement("div", {
3378
- className: "w-full px-6 py-10 flex justify-center"
3379
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3380
- className: "max-w-screen-md w-full"
3381
- }, /* @__PURE__ */ React__default["default"].createElement("p", {
3382
- className: "text-gray-700 text-lg"
3383
- }, "This is your dashboard for editing or creating content. Select a collection on the left to begin."))));
3332
+ className: "relative left-0 w-full h-full bg-gray-50 shadow-2xl overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100"
3333
+ }, children);
3334
+ };
3335
+ const PageHeader = ({
3336
+ isLocalMode,
3337
+ children
3338
+ }) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
3339
+ className: "bg-white pb-4 pt-18 border-b border-gray-200 px-12"
3340
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3341
+ className: "w-full mx-auto max-w-screen-xl"
3342
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3343
+ className: "w-full flex justify-between items-end"
3344
+ }, children))));
3345
+ const PageBody = ({
3346
+ children
3347
+ }) => /* @__PURE__ */ React__default["default"].createElement("div", {
3348
+ className: "py-10 px-12"
3349
+ }, children);
3350
+ const PageBodyNarrow = ({
3351
+ children
3352
+ }) => /* @__PURE__ */ React__default["default"].createElement("div", {
3353
+ className: "py-10 px-12"
3354
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3355
+ className: "w-full mx-auto max-w-screen-xl"
3356
+ }, children));
3357
+ const DashboardPage = () => {
3358
+ return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
3359
+ var _a, _b;
3360
+ return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
3361
+ isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
3362
+ }, /* @__PURE__ */ React__default["default"].createElement("h3", {
3363
+ className: "text-2xl text-gray-700"
3364
+ }, "Welcome to Tina!")), /* @__PURE__ */ React__default["default"].createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
3365
+ });
3384
3366
  };
3385
3367
  const useGetCollection = (cms, collectionName, includeDocuments = true) => {
3386
- const api = new TinaAdminApi(cms.api.tina);
3368
+ const api = new TinaAdminApi(cms);
3387
3369
  const [collection, setCollection] = React.useState(void 0);
3388
3370
  React.useEffect(() => {
3389
3371
  const fetchCollection = async () => {
@@ -3410,22 +3392,11 @@ This will work when developing locally but NOT when deployed to production.
3410
3392
  return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
3411
3393
  as: "div",
3412
3394
  className: "relative inline-block text-left"
3413
- }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
3414
- className: "inline-flex items-center px-8 py-2.5 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-out",
3415
- style: { background: "#0084FF" }
3416
- }, "Create New", /* @__PURE__ */ React__default["default"].createElement("svg", {
3417
- width: "20",
3418
- height: "20",
3419
- viewBox: "0 0 20 20",
3420
- fill: "none",
3421
- xmlns: "http://www.w3.org/2000/svg",
3422
- className: `ml-1 flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
3423
- }, /* @__PURE__ */ React__default["default"].createElement("g", {
3424
- opacity: "1.0"
3425
- }, /* @__PURE__ */ React__default["default"].createElement("path", {
3426
- d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
3427
- fill: "currentColor"
3428
- }))))), /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
3395
+ }, () => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
3396
+ className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
3397
+ }, "Create New ", /* @__PURE__ */ React__default["default"].createElement(BiPlus, {
3398
+ className: "w-5 h-full ml-1 opacity-70"
3399
+ }))), /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
3429
3400
  as: React.Fragment,
3430
3401
  enter: "transition ease-out duration-100",
3431
3402
  enterFrom: "transform opacity-0 scale-95",
@@ -3440,13 +3411,13 @@ This will work when developing locally but NOT when deployed to production.
3440
3411
  }, templates.map((template) => /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, {
3441
3412
  key: `${template.label}-${template.name}`
3442
3413
  }, ({ active }) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3443
- to: `${location.pathname}/${template.name}/new`,
3414
+ to: `${template.name}/new`,
3444
3415
  className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
3445
3416
  }, template.label))))))));
3446
3417
  };
3447
3418
  const CollectionListPage = () => {
3448
- const location2 = reactRouterDom.useLocation();
3449
3419
  const { collectionName } = reactRouterDom.useParams();
3420
+ reactRouterDom.useNavigate();
3450
3421
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
3451
3422
  const plugins = cms.plugins.all("tina-admin");
3452
3423
  const routeMapping = plugins.find(({ name }) => name === "route-mapping");
@@ -3455,68 +3426,73 @@ This will work when developing locally but NOT when deployed to production.
3455
3426
  collectionName,
3456
3427
  includeDocuments: true
3457
3428
  }, (collection) => {
3429
+ var _a, _b;
3458
3430
  const totalCount = collection.documents.totalCount;
3459
3431
  const documents = collection.documents.edges;
3460
- return /* @__PURE__ */ React__default["default"].createElement("div", {
3461
- className: "px-6 py-14 h-screen overflow-y-auto flex justify-center"
3462
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3463
- className: "max-w-screen-md w-full"
3464
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3465
- className: "w-full flex justify-between items-end"
3466
- }, /* @__PURE__ */ React__default["default"].createElement("h3", {
3467
- className: "text-3xl"
3468
- }, collection.label), !collection.templates && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3469
- to: `${location2.pathname}/new`,
3470
- className: "inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-out",
3471
- style: { background: "#0084FF" }
3472
- }, "Create New"), collection.templates && /* @__PURE__ */ React__default["default"].createElement(TemplateMenu, {
3432
+ return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
3433
+ isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
3434
+ }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("h3", {
3435
+ className: "text-2xl text-gray-700"
3436
+ }, collection.label ? collection.label : collection.name), !collection.templates && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3437
+ to: `new`,
3438
+ className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
3439
+ }, "Create New", " ", /* @__PURE__ */ React__default["default"].createElement(BiPlus, {
3440
+ className: "w-5 h-full ml-1 opacity-70"
3441
+ })), collection.templates && /* @__PURE__ */ React__default["default"].createElement(TemplateMenu, {
3473
3442
  templates: collection.templates
3474
- })), totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
3475
- className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
3476
- }, /* @__PURE__ */ React__default["default"].createElement("table", {
3477
- className: "min-w-full"
3443
+ }))), /* @__PURE__ */ React__default["default"].createElement(PageBody, null, /* @__PURE__ */ React__default["default"].createElement("div", {
3444
+ className: "w-full mx-auto max-w-screen-xl"
3445
+ }, totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("table", {
3446
+ className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
3478
3447
  }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
3479
- className: "bg-white divide-y divide-gray-150"
3448
+ className: "divide-y divide-gray-150"
3480
3449
  }, documents.map((document) => {
3481
- const livesiteRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
3450
+ const overrideRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
3482
3451
  return /* @__PURE__ */ React__default["default"].createElement("tr", {
3483
- key: document.node.sys.relativePath
3452
+ key: `document-${document.node.sys.filename}`,
3453
+ className: ""
3484
3454
  }, /* @__PURE__ */ React__default["default"].createElement("td", {
3485
- className: "px-5 py-3 whitespace-nowrap"
3486
- }, /* @__PURE__ */ React__default["default"].createElement("span", {
3487
- className: "block text-xs mb-0.5 text-gray-400 uppercase"
3488
- }, "Filename"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3489
- to: `${location2.pathname}/${document.node.sys.filename}`,
3490
- className: "h-5 leading-5 flex max-w-xs"
3455
+ className: "px-6 py-2 whitespace-nowrap"
3456
+ }, overrideRoute && /* @__PURE__ */ React__default["default"].createElement("a", {
3457
+ className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
3458
+ href: `${overrideRoute}`
3459
+ }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
3460
+ className: "inline-block h-6 w-auto opacity-70"
3461
+ }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
3462
+ className: "block text-xs text-gray-400 mb-1 uppercase"
3463
+ }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
3464
+ className: "h-5 leading-5 block whitespace-nowrap"
3465
+ }, document.node.sys.filename))), !overrideRoute && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3466
+ className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
3467
+ to: `${document.node.sys.filename}`
3468
+ }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
3469
+ className: "inline-block h-6 w-auto opacity-70"
3470
+ }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
3471
+ className: "block text-xs text-gray-400 mb-1 uppercase"
3472
+ }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
3473
+ className: "h-5 leading-5 block whitespace-nowrap"
3474
+ }, document.node.sys.filename)))), /* @__PURE__ */ React__default["default"].createElement("td", {
3475
+ className: "px-6 py-4 whitespace-nowrap"
3491
3476
  }, /* @__PURE__ */ React__default["default"].createElement("span", {
3492
- className: "flex-shrink-1 leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
3493
- }, document.node.sys.filename), /* @__PURE__ */ React__default["default"].createElement("span", {
3494
- className: "flex-shrink-0 leading-5 text-base font-medium text-gray-300"
3495
- }, document.node.sys.extension))), /* @__PURE__ */ React__default["default"].createElement("td", {
3496
- className: "px-5 py-3 whitespace-nowrap"
3477
+ className: "block text-xs text-gray-400 mb-1 uppercase"
3478
+ }, "Extension"), /* @__PURE__ */ React__default["default"].createElement("span", {
3479
+ className: "h-5 leading-5 block text-sm font-medium text-gray-900"
3480
+ }, document.node.sys.extension)), /* @__PURE__ */ React__default["default"].createElement("td", {
3481
+ className: "px-6 py-4 whitespace-nowrap"
3497
3482
  }, /* @__PURE__ */ React__default["default"].createElement("span", {
3498
- className: "block text-xs mb-0.5 text-gray-400 uppercase"
3483
+ className: "block text-xs text-gray-400 mb-1 uppercase"
3499
3484
  }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
3500
- className: "h-5 block leading-5 font-regular text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-500"
3501
- }, document.node.sys.template)), /* @__PURE__ */ React__default["default"].createElement("td", {
3502
- className: "px-5 py-3 whitespace-nowrap flex gap-3 items-center justify-end"
3503
- }, livesiteRoute && /* @__PURE__ */ React__default["default"].createElement("a", {
3504
- href: livesiteRoute,
3505
- className: "flex gap-1.5 items-center text-base px-4 py-1.5 rounded-full transition-all ease-out duration-150 text-gray-500 hover:text-blue-500"
3506
- }, /* @__PURE__ */ React__default["default"].createElement(BiLinkExternal, {
3507
- className: "inline-block h-5 w-auto opacity-70"
3508
- }), " ", "View"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3509
- to: `${location2.pathname}/${document.node.sys.filename}`,
3510
- className: "flex gap-1.5 items-center text-base px-4 py-1.5 rounded-full border border-gray-150 transition-all ease-out duration-150 text-gray-700 hover:bg-gray-50 hover:text-blue-500"
3511
- }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
3512
- className: "inline-block h-5 w-auto opacity-70"
3513
- }), " ", "Edit")));
3514
- }))))));
3485
+ className: "h-5 leading-5 block text-sm font-medium text-gray-900"
3486
+ }, document.node.sys.template)));
3487
+ })))))));
3515
3488
  });
3516
3489
  });
3517
3490
  };
3491
+ function HiChevronRight(props) {
3492
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
3493
+ }
3518
3494
  const useGetDocumentFields = (cms, collectionName, templateName) => {
3519
- const api = new TinaAdminApi(cms.api.tina);
3495
+ const api = new TinaAdminApi(cms);
3520
3496
  const [info, setInfo] = React.useState({
3521
3497
  collection: void 0,
3522
3498
  template: void 0,
@@ -3561,9 +3537,10 @@ This will work when developing locally but NOT when deployed to production.
3561
3537
  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo }));
3562
3538
  };
3563
3539
  const createDocument = async (cms, collection, template, mutationInfo, values) => {
3564
- const api = new TinaAdminApi(cms.api.tina);
3565
- const _a = values, { relativePath } = _a, leftover = __objRest(_a, ["relativePath"]);
3540
+ const api = new TinaAdminApi(cms);
3541
+ const _a = values, { filename } = _a, leftover = __objRest(_a, ["filename"]);
3566
3542
  const { includeCollection, includeTemplate } = mutationInfo;
3543
+ const relativePath = `${filename}.${collection.format}`;
3567
3544
  const params = transformDocumentIntoMutationRequestPayload(__spreadValues(__spreadValues({
3568
3545
  _collection: collection.name
3569
3546
  }, template && { _template: template.name }), leftover), {
@@ -3574,43 +3551,78 @@ This will work when developing locally but NOT when deployed to production.
3574
3551
  };
3575
3552
  const CollectionCreatePage = () => {
3576
3553
  const { collectionName, templateName } = reactRouterDom.useParams();
3577
- const navigate = reactRouterDom.useNavigate();
3578
3554
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
3579
3555
  cms,
3580
3556
  collectionName,
3581
3557
  templateName
3582
- }, ({ collection, template, fields, mutationInfo }) => {
3583
- const form = new toolkit.Form({
3558
+ }, ({ collection, template, fields, mutationInfo }) => /* @__PURE__ */ React__default["default"].createElement(RenderForm$1, {
3559
+ cms,
3560
+ collection,
3561
+ template,
3562
+ fields,
3563
+ mutationInfo
3564
+ })));
3565
+ };
3566
+ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
3567
+ var _a, _b;
3568
+ const navigate = reactRouterDom.useNavigate();
3569
+ const [formIsPristine, setFormIsPristine] = React.useState(true);
3570
+ const form = React.useMemo(() => {
3571
+ return new toolkit.Form({
3584
3572
  id: "create-form",
3585
3573
  label: "form",
3586
3574
  fields: [
3587
3575
  {
3588
- name: "relativePath",
3589
- label: "Relative Path",
3576
+ name: "filename",
3577
+ label: "Filename",
3590
3578
  component: "text",
3591
- required: true,
3592
- defaultValue: `${collection.name}${Date.now()}.${collection.format}`
3579
+ description: `A unique filename for the content. Example: My_Document`,
3580
+ placeholder: `My_Document`,
3581
+ validate: (value, allValues, meta) => {
3582
+ if (!value) {
3583
+ if (meta.dirty) {
3584
+ return "Required";
3585
+ }
3586
+ return true;
3587
+ }
3588
+ const isValid = /^[_a-zA-Z][-,_a-zA-Z0-9]*$/.test(value);
3589
+ if (value && !isValid) {
3590
+ return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, - or _";
3591
+ }
3592
+ }
3593
3593
  },
3594
3594
  ...fields
3595
3595
  ],
3596
3596
  onSubmit: async (values) => {
3597
3597
  await createDocument(cms, collection, template, mutationInfo, values);
3598
- navigate(`/admin/collections/${collection.name}`);
3598
+ navigate(`/collections/${collection.name}`);
3599
3599
  }
3600
3600
  });
3601
- const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
3602
- return /* @__PURE__ */ React__default["default"].createElement("div", {
3603
- className: "w-full h-screen"
3604
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3605
- className: "flex flex-col items-center w-full flex-1"
3606
- }, /* @__PURE__ */ React__default["default"].createElement(toolkit.FullscreenFormBuilder, {
3607
- label: formLabel,
3608
- form
3609
- })));
3610
- }));
3601
+ }, [cms, collection, template, fields, mutationInfo]);
3602
+ return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
3603
+ className: "py-4 px-20 border-b border-gray-200 bg-white"
3604
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3605
+ className: "max-w-form mx-auto"
3606
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3607
+ className: "mb-2"
3608
+ }, /* @__PURE__ */ React__default["default"].createElement("span", {
3609
+ className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
3610
+ }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3611
+ to: `/collections/${collection.name}`,
3612
+ className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
3613
+ }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default["default"].createElement(HiChevronRight, {
3614
+ className: "inline-block -mt-0.5 opacity-50"
3615
+ })), /* @__PURE__ */ React__default["default"].createElement("span", {
3616
+ className: "text-xl text-gray-700 font-medium leading-tight"
3617
+ }, "Create New")), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormStatus, {
3618
+ pristine: formIsPristine
3619
+ }))), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
3620
+ form,
3621
+ onPristineChange: setFormIsPristine
3622
+ })));
3611
3623
  };
3612
3624
  const useGetDocument = (cms, collectionName, relativePath) => {
3613
- const api = new TinaAdminApi(cms.api.tina);
3625
+ const api = new TinaAdminApi(cms);
3614
3626
  const [document, setDocument] = React.useState(void 0);
3615
3627
  React.useEffect(() => {
3616
3628
  const fetchDocument = async () => {
@@ -3634,7 +3646,7 @@ This will work when developing locally but NOT when deployed to production.
3634
3646
  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document));
3635
3647
  };
3636
3648
  const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
3637
- const api = new TinaAdminApi(cms.api.tina);
3649
+ const api = new TinaAdminApi(cms);
3638
3650
  const { includeCollection, includeTemplate } = mutationInfo;
3639
3651
  const params = transformDocumentIntoMutationRequestPayload(values, {
3640
3652
  includeCollection,
@@ -3644,7 +3656,6 @@ This will work when developing locally but NOT when deployed to production.
3644
3656
  };
3645
3657
  const CollectionUpdatePage = () => {
3646
3658
  const { collectionName, filename } = reactRouterDom.useParams();
3647
- const navigate = reactRouterDom.useNavigate();
3648
3659
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
3649
3660
  cms,
3650
3661
  collectionName
@@ -3654,28 +3665,77 @@ This will work when developing locally but NOT when deployed to production.
3654
3665
  cms,
3655
3666
  collectionName: collection.name,
3656
3667
  relativePath
3657
- }, (document) => {
3658
- const form = new toolkit.Form({
3659
- id: "update-form",
3660
- label: "form",
3661
- fields: document.form.fields,
3662
- initialValues: document.values,
3663
- onSubmit: async (values) => {
3664
- await updateDocument(cms, relativePath, collection, mutationInfo, values);
3665
- navigate(`/collections/${collection.name}`);
3666
- }
3667
- });
3668
- return /* @__PURE__ */ React__default["default"].createElement("div", {
3669
- className: "w-full h-screen"
3670
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3671
- className: "flex flex-col items-center w-full flex-1"
3672
- }, /* @__PURE__ */ React__default["default"].createElement(toolkit.FullscreenFormBuilder, {
3673
- label: collection.label + ` - ` + filename,
3674
- form
3675
- })));
3676
- });
3668
+ }, (document) => /* @__PURE__ */ React__default["default"].createElement(RenderForm, {
3669
+ cms,
3670
+ document,
3671
+ filename,
3672
+ relativePath,
3673
+ collection,
3674
+ mutationInfo
3675
+ }));
3677
3676
  }));
3678
3677
  };
3678
+ const RenderForm = ({
3679
+ cms,
3680
+ document,
3681
+ filename,
3682
+ relativePath,
3683
+ collection,
3684
+ mutationInfo
3685
+ }) => {
3686
+ var _a, _b;
3687
+ const navigate = reactRouterDom.useNavigate();
3688
+ const [formIsPristine, setFormIsPristine] = React.useState(true);
3689
+ const form = React.useMemo(() => {
3690
+ return new toolkit.Form({
3691
+ id: "update-form",
3692
+ label: "form",
3693
+ fields: document.form.fields,
3694
+ initialValues: document.values,
3695
+ onSubmit: async (values) => {
3696
+ await updateDocument(cms, relativePath, collection, mutationInfo, values);
3697
+ navigate(`/collections/${collection.name}`);
3698
+ }
3699
+ });
3700
+ }, [cms, document, relativePath, collection, mutationInfo]);
3701
+ return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
3702
+ className: "py-4 px-20 border-b border-gray-200 bg-white"
3703
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3704
+ className: "max-w-form mx-auto"
3705
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3706
+ className: "mb-2"
3707
+ }, /* @__PURE__ */ React__default["default"].createElement("span", {
3708
+ className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
3709
+ }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3710
+ to: `/collections/${collection.name}`,
3711
+ className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
3712
+ }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default["default"].createElement(HiChevronRight, {
3713
+ className: "inline-block -mt-0.5 opacity-50"
3714
+ })), /* @__PURE__ */ React__default["default"].createElement("span", {
3715
+ className: "text-xl text-gray-700 font-medium leading-tight"
3716
+ }, "Edit ", `${filename}.${collection.format}`)), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormStatus, {
3717
+ pristine: formIsPristine
3718
+ }))), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
3719
+ form,
3720
+ onPristineChange: setFormIsPristine
3721
+ })));
3722
+ };
3723
+ const ScreenPage = () => {
3724
+ const { screenName } = reactRouterDom.useParams();
3725
+ return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
3726
+ var _a, _b;
3727
+ const screens = cms.plugins.getType("screen").all();
3728
+ const selectedScreen = screens.find(({ name }) => slugify(name) === screenName);
3729
+ return /* @__PURE__ */ React__default["default"].createElement("div", {
3730
+ className: "relative w-full h-full flex flex-col items-stretch justify-between"
3731
+ }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
3732
+ className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between"
3733
+ }, /* @__PURE__ */ React__default["default"].createElement(selectedScreen.Component, {
3734
+ close: () => {
3735
+ }
3736
+ })));
3737
+ });
3738
+ };
3679
3739
  const Redirect = () => {
3680
3740
  React__default["default"].useEffect(() => {
3681
3741
  if (window) {
@@ -3696,34 +3756,41 @@ This will work when developing locally but NOT when deployed to production.
3696
3756
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
3697
3757
  const isTinaAdminEnabled = cms.flags.get("tina-admin");
3698
3758
  if (isTinaAdminEnabled) {
3699
- return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement("div", {
3759
+ return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, {
3760
+ basename: "/admin"
3761
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3700
3762
  className: "flex items-stretch h-screen overflow-hidden"
3701
3763
  }, /* @__PURE__ */ React__default["default"].createElement(Sidebar, {
3702
3764
  cms
3703
3765
  }), /* @__PURE__ */ React__default["default"].createElement("div", {
3704
3766
  className: "flex-1"
3705
3767
  }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3706
- path: "/admin/collections/:collectionName/new",
3768
+ path: "collections/:collectionName/new",
3707
3769
  element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
3708
3770
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3709
- path: "/admin/collections/:collectionName/:templateName/new",
3771
+ path: "collections/:collectionName/:templateName/new",
3710
3772
  element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
3711
3773
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3712
- path: "/admin/collections/:collectionName/:filename",
3774
+ path: "collections/:collectionName/:filename",
3713
3775
  element: /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)
3714
3776
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3715
- path: "/admin/collections/:collectionName",
3777
+ path: "collections/:collectionName",
3716
3778
  element: /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)
3717
3779
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3718
- path: "/admin",
3780
+ path: "screens/:screenName",
3781
+ element: /* @__PURE__ */ React__default["default"].createElement(ScreenPage, null)
3782
+ }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3783
+ path: "/",
3719
3784
  element: /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)
3720
3785
  }))))));
3721
3786
  } else {
3722
- return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3723
- path: "/admin/logout",
3787
+ return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, {
3788
+ basename: "/admin"
3789
+ }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3790
+ path: "logout",
3724
3791
  element: /* @__PURE__ */ React__default["default"].createElement(LogoutPage, null)
3725
3792
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3726
- path: "/admin",
3793
+ path: "/",
3727
3794
  element: /* @__PURE__ */ React__default["default"].createElement(Redirect, null)
3728
3795
  }))));
3729
3796
  }