slice-machine-ui 1.26.1-beta.25 → 1.26.1-beta.27
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/out/404.html +1 -1
- package/out/_next/static/chunks/{188-9cdca9e923488afd.js → 188-2e42d5ebef697946.js} +1 -1
- package/out/_next/static/chunks/{91-717d764a224ac07f.js → 91-67c244a4a034c8de.js} +1 -1
- package/out/_next/static/chunks/pages/{_app-607ae4e0137c7991.js → _app-89061074e404a43c.js} +1 -1
- package/out/_next/static/chunks/pages/{changelog-042822d12df57669.js → changelog-3f04a3d8747ae383.js} +1 -1
- package/out/_next/static/chunks/pages/{changes-194f6cf187fa6ee7.js → changes-ec62e7eb50d6f2be.js} +1 -1
- package/out/_next/static/chunks/pages/{labs-7a4fe64cb86b59e8.js → labs-830dde0b85d6dd01.js} +1 -1
- package/out/_next/static/chunks/pages/{settings-419384d4d43070c2.js → settings-f61144a9387fd6f1.js} +1 -1
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]-ad66e6c755798ce7.js +1 -0
- package/out/_next/static/chunks/pages/{slices-98f88ac46b6ad58b.js → slices-d65be4ca817a766d.js} +1 -1
- package/out/_next/static/css/{172e1bc0b9586c22.css → e3ffbc7931a47375.css} +1 -1
- package/out/_next/static/{jUSFBdGosRRScGUchEixA → d2smUBa0QoLDrrmOf-btR}/_buildManifest.js +1 -1
- package/out/changelog.html +1 -1
- package/out/changes.html +1 -1
- package/out/custom-types/[customTypeId].html +1 -1
- package/out/custom-types.html +1 -1
- package/out/index.html +1 -1
- package/out/labs.html +1 -1
- package/out/page-types/[pageTypeId].html +1 -1
- package/out/settings.html +1 -1
- package/out/slices/[lib]/[sliceName]/[variation]/simulator.html +1 -1
- package/out/slices/[lib]/[sliceName]/[variation].html +1 -1
- package/out/slices.html +1 -1
- package/package.json +3 -3
- package/src/hooks/useScreenshotChangesModal.ts +1 -1
- package/src/legacy/lib/builders/SliceBuilder/FieldZones/index.tsx +3 -12
- package/src/legacy/lib/builders/SliceBuilder/VariationsList/VariationsList.module.css +10 -0
- package/src/legacy/lib/builders/SliceBuilder/VariationsList/VariationsList.module.css.d.ts +5 -0
- package/src/legacy/lib/builders/SliceBuilder/{Sidebar → VariationsList}/index.tsx +164 -76
- package/src/legacy/lib/builders/SliceBuilder/index.tsx +10 -5
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]-d3e157cc3a540dd4.js +0 -1
- package/src/features/slices/sliceBuilder/useGroupsInSlicesExperiment.ts +0 -8
- /package/out/_next/static/{jUSFBdGosRRScGUchEixA → d2smUBa0QoLDrrmOf-btR}/_ssgManifest.js +0 -0
- /package/src/legacy/lib/builders/SliceBuilder/{Sidebar → VariationsList}/AddVariationModal.tsx +0 -0
package/out/changelog.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/59b4e022-7a3b5554b806349f.js" defer=""></script><script src="/_next/static/chunks/183-6ad1d7303abecd2b.js" defer=""></script><script src="/_next/static/chunks/870-0c7a8a9622de78b7.js" defer=""></script><script src="/_next/static/chunks/pages/changelog-3f04a3d8747ae383.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changelog","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
package/out/changes.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/6279e95f6aff22d5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6279e95f6aff22d5.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/6279e95f6aff22d5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6279e95f6aff22d5.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/59b4e022-7a3b5554b806349f.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/8eec4907-b712959d9f984b68.js" defer=""></script><script src="/_next/static/chunks/543-f8766685f7f451e2.js" defer=""></script><script src="/_next/static/chunks/918-5bb55fb464e34768.js" defer=""></script><script src="/_next/static/chunks/614-5130fbdbcfab2d35.js" defer=""></script><script src="/_next/static/chunks/90-2d4bdae13d031364.js" defer=""></script><script src="/_next/static/chunks/pages/changes-ec62e7eb50d6f2be.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changes","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/824d6e761aed01d2.css" as="style"/><link rel="stylesheet" href="/_next/static/css/824d6e761aed01d2.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/824d6e761aed01d2.css" as="style"/><link rel="stylesheet" href="/_next/static/css/824d6e761aed01d2.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/59b4e022-7a3b5554b806349f.js" defer=""></script><script src="/_next/static/chunks/f36c6662-03bb5e9d9aa0b0aa.js" defer=""></script><script src="/_next/static/chunks/4c744e84-e3161d754618373f.js" defer=""></script><script src="/_next/static/chunks/065a3ddb-9a38ca0d60f0bf2f.js" defer=""></script><script src="/_next/static/chunks/1cc2734a-2c5b6c0367fcde86.js" defer=""></script><script src="/_next/static/chunks/183-6ad1d7303abecd2b.js" defer=""></script><script src="/_next/static/chunks/50-cfc2514205b86001.js" defer=""></script><script src="/_next/static/chunks/543-f8766685f7f451e2.js" defer=""></script><script src="/_next/static/chunks/696-b992b9e1ce75777e.js" defer=""></script><script src="/_next/static/chunks/210-aee6116139329803.js" defer=""></script><script src="/_next/static/chunks/614-5130fbdbcfab2d35.js" defer=""></script><script src="/_next/static/chunks/569-2ae3e9666f3bf991.js" defer=""></script><script src="/_next/static/chunks/661-78c8c89d258133b8.js" defer=""></script><script src="/_next/static/chunks/188-2e42d5ebef697946.js" defer=""></script><script src="/_next/static/chunks/pages/custom-types/%5BcustomTypeId%5D-982ecf1d799b6bcf.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/custom-types/[customTypeId]","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
package/out/custom-types.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/22f264c93bd9d85f.css" as="style"/><link rel="stylesheet" href="/_next/static/css/22f264c93bd9d85f.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/22f264c93bd9d85f.css" as="style"/><link rel="stylesheet" href="/_next/static/css/22f264c93bd9d85f.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/569-2ae3e9666f3bf991.js" defer=""></script><script src="/_next/static/chunks/91-67c244a4a034c8de.js" defer=""></script><script src="/_next/static/chunks/pages/custom-types-900b40b54b74e6d6.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/custom-types","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
package/out/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/22f264c93bd9d85f.css" as="style"/><link rel="stylesheet" href="/_next/static/css/22f264c93bd9d85f.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/22f264c93bd9d85f.css" as="style"/><link rel="stylesheet" href="/_next/static/css/22f264c93bd9d85f.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/569-2ae3e9666f3bf991.js" defer=""></script><script src="/_next/static/chunks/91-67c244a4a034c8de.js" defer=""></script><script src="/_next/static/chunks/pages/index-ccd2975faba412f6.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
package/out/labs.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/pages/labs-830dde0b85d6dd01.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/labs","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/824d6e761aed01d2.css" as="style"/><link rel="stylesheet" href="/_next/static/css/824d6e761aed01d2.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/824d6e761aed01d2.css" as="style"/><link rel="stylesheet" href="/_next/static/css/824d6e761aed01d2.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/59b4e022-7a3b5554b806349f.js" defer=""></script><script src="/_next/static/chunks/f36c6662-03bb5e9d9aa0b0aa.js" defer=""></script><script src="/_next/static/chunks/4c744e84-e3161d754618373f.js" defer=""></script><script src="/_next/static/chunks/065a3ddb-9a38ca0d60f0bf2f.js" defer=""></script><script src="/_next/static/chunks/1cc2734a-2c5b6c0367fcde86.js" defer=""></script><script src="/_next/static/chunks/183-6ad1d7303abecd2b.js" defer=""></script><script src="/_next/static/chunks/50-cfc2514205b86001.js" defer=""></script><script src="/_next/static/chunks/543-f8766685f7f451e2.js" defer=""></script><script src="/_next/static/chunks/696-b992b9e1ce75777e.js" defer=""></script><script src="/_next/static/chunks/210-aee6116139329803.js" defer=""></script><script src="/_next/static/chunks/614-5130fbdbcfab2d35.js" defer=""></script><script src="/_next/static/chunks/569-2ae3e9666f3bf991.js" defer=""></script><script src="/_next/static/chunks/661-78c8c89d258133b8.js" defer=""></script><script src="/_next/static/chunks/188-2e42d5ebef697946.js" defer=""></script><script src="/_next/static/chunks/pages/page-types/%5BpageTypeId%5D-886fc28240831dae.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/page-types/[pageTypeId]","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
package/out/settings.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/ca32882a5d2d8d88.css" as="style"/><link rel="stylesheet" href="/_next/static/css/ca32882a5d2d8d88.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/ca32882a5d2d8d88.css" as="style"/><link rel="stylesheet" href="/_next/static/css/ca32882a5d2d8d88.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/pages/settings-f61144a9387fd6f1.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/settings","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/72585f70-28b4d7d5384b3703.js" defer=""></script><script src="/_next/static/chunks/18539003-8854ec97730b0755.js" defer=""></script><script src="/_next/static/chunks/756-61dc56b98d01e964.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/simulator-9bdb355306fca592.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]/simulator","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/e3ffbc7931a47375.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e3ffbc7931a47375.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/59b4e022-7a3b5554b806349f.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/f36c6662-03bb5e9d9aa0b0aa.js" defer=""></script><script src="/_next/static/chunks/4c744e84-e3161d754618373f.js" defer=""></script><script src="/_next/static/chunks/065a3ddb-9a38ca0d60f0bf2f.js" defer=""></script><script src="/_next/static/chunks/1cc2734a-2c5b6c0367fcde86.js" defer=""></script><script src="/_next/static/chunks/183-6ad1d7303abecd2b.js" defer=""></script><script src="/_next/static/chunks/50-cfc2514205b86001.js" defer=""></script><script src="/_next/static/chunks/543-f8766685f7f451e2.js" defer=""></script><script src="/_next/static/chunks/696-b992b9e1ce75777e.js" defer=""></script><script src="/_next/static/chunks/614-5130fbdbcfab2d35.js" defer=""></script><script src="/_next/static/chunks/661-78c8c89d258133b8.js" defer=""></script><script src="/_next/static/chunks/90-2d4bdae13d031364.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D-ad66e6c755798ce7.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices/[lib]/[sliceName]/[variation]","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
package/out/slices.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/f01f60095c76c7fb.css" as="style"/><link rel="stylesheet" href="/_next/static/css/f01f60095c76c7fb.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-
|
|
1
|
+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cb5dbae3d23ccce1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cb5dbae3d23ccce1.css" data-n-g=""/><link rel="preload" href="/_next/static/css/f01f60095c76c7fb.css" as="style"/><link rel="stylesheet" href="/_next/static/css/f01f60095c76c7fb.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-89061074e404a43c.js" defer=""></script><script src="/_next/static/chunks/59b4e022-7a3b5554b806349f.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/50-cfc2514205b86001.js" defer=""></script><script src="/_next/static/chunks/614-5130fbdbcfab2d35.js" defer=""></script><script src="/_next/static/chunks/90-2d4bdae13d031364.js" defer=""></script><script src="/_next/static/chunks/pages/slices-d65be4ca817a766d.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_buildManifest.js" defer=""></script><script src="/_next/static/d2smUBa0QoLDrrmOf-btR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"d2smUBa0QoLDrrmOf-btR","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "slice-machine-ui",
|
|
3
|
-
"version": "1.26.1-beta.
|
|
3
|
+
"version": "1.26.1-beta.27",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.",
|
|
6
6
|
"repository": {
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@radix-ui/react-visually-hidden": "1.0.3",
|
|
38
|
-
"@slicemachine/manager": "0.18.4-beta.
|
|
39
|
-
"start-slicemachine": "0.12.19-beta.
|
|
38
|
+
"@slicemachine/manager": "0.18.4-beta.27",
|
|
39
|
+
"start-slicemachine": "0.12.19-beta.27"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@emotion/react": "11.11.1",
|
|
@@ -20,7 +20,6 @@ import {
|
|
|
20
20
|
updateField,
|
|
21
21
|
} from "@/domain/slice";
|
|
22
22
|
import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
|
|
23
|
-
import { useGroupsInSlicesExperiment } from "@/features/slices/sliceBuilder/useGroupsInSlicesExperiment";
|
|
24
23
|
import EditModal from "@/legacy/lib/builders/common/EditModal";
|
|
25
24
|
import Zone from "@/legacy/lib/builders/common/Zone";
|
|
26
25
|
import { Groups } from "@/legacy/lib/models/common/Group";
|
|
@@ -49,7 +48,6 @@ const FieldZones: FC = () => {
|
|
|
49
48
|
isDeleteRepeatableZoneDialogOpen,
|
|
50
49
|
setIsDeleteRepeatableZoneDialogOpen,
|
|
51
50
|
] = useState(false);
|
|
52
|
-
const groupsInSlicesExperiment = useGroupsInSlicesExperiment();
|
|
53
51
|
|
|
54
52
|
// We won't show the Repeatable Zone if no items are configured.
|
|
55
53
|
const hasItems = Boolean(
|
|
@@ -58,7 +56,6 @@ const FieldZones: FC = () => {
|
|
|
58
56
|
|
|
59
57
|
const _onDeleteItem = (widgetArea: WidgetsArea) => (key: string) => {
|
|
60
58
|
if (
|
|
61
|
-
groupsInSlicesExperiment.eligible &&
|
|
62
59
|
widgetArea === WidgetsArea.Items &&
|
|
63
60
|
variation.items &&
|
|
64
61
|
Object.keys(variation.items).length <= 1
|
|
@@ -191,11 +188,7 @@ const FieldZones: FC = () => {
|
|
|
191
188
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
192
189
|
fields={variation.primary}
|
|
193
190
|
EditModal={EditModal}
|
|
194
|
-
widgetsArray={
|
|
195
|
-
groupsInSlicesExperiment.eligible
|
|
196
|
-
? sliceBuilderWidgetsArray
|
|
197
|
-
: groupBuilderWidgetsArray
|
|
198
|
-
}
|
|
191
|
+
widgetsArray={sliceBuilderWidgetsArray}
|
|
199
192
|
onDeleteItem={_onDeleteItem(WidgetsArea.Primary)}
|
|
200
193
|
onSave={_onSave(WidgetsArea.Primary)}
|
|
201
194
|
onSaveNewField={_onSaveNewField(WidgetsArea.Primary)}
|
|
@@ -212,12 +205,10 @@ const FieldZones: FC = () => {
|
|
|
212
205
|
}
|
|
213
206
|
testId="static-zone-content"
|
|
214
207
|
isRepeatableCustomType={undefined}
|
|
215
|
-
emptyStateHeading={
|
|
216
|
-
groupsInSlicesExperiment.eligible ? undefined : "No fields"
|
|
217
|
-
}
|
|
208
|
+
emptyStateHeading={undefined}
|
|
218
209
|
emptyStateActionTestId="add-Static-field"
|
|
219
210
|
/>
|
|
220
|
-
{
|
|
211
|
+
{hasItems ? (
|
|
221
212
|
<Zone
|
|
222
213
|
zoneType="slice"
|
|
223
214
|
zoneTypeFormat={undefined}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
2
|
+
.hideScrollbar::-webkit-scrollbar {
|
|
3
|
+
display: none;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
/* Hide scrollbar for IE, Edge and Firefox */
|
|
7
|
+
.hideScrollbar {
|
|
8
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
9
|
+
scrollbar-width: none; /* Firefox */
|
|
10
|
+
}
|
|
@@ -1,28 +1,39 @@
|
|
|
1
|
-
import { Box, Button, Gradient, theme } from "@prismicio/editor-ui";
|
|
1
|
+
import { Box, Button, Gradient, Text, theme } from "@prismicio/editor-ui";
|
|
2
2
|
import { useRouter } from "next/router";
|
|
3
|
-
import { type FC, useState } from "react";
|
|
3
|
+
import { type Dispatch, type FC, type SetStateAction, useState } from "react";
|
|
4
4
|
import { toast } from "react-toastify";
|
|
5
5
|
|
|
6
6
|
import { updateSlice } from "@/apiClient";
|
|
7
|
+
import { Divider } from "@/components/Divider";
|
|
7
8
|
import { copySliceVariation } from "@/domain/slice";
|
|
8
9
|
import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
|
|
9
10
|
import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
|
|
10
11
|
import { SLICES_CONFIG } from "@/features/slices/slicesConfig";
|
|
11
|
-
import {
|
|
12
|
+
import {
|
|
13
|
+
type Payload,
|
|
14
|
+
useScreenshotChangesModal,
|
|
15
|
+
} from "@/hooks/useScreenshotChangesModal";
|
|
12
16
|
import { DeleteVariationModal } from "@/legacy/components/DeleteVariationModal";
|
|
13
17
|
import { RenameVariationModal } from "@/legacy/components/Forms/RenameVariationModal";
|
|
14
18
|
import ScreenshotChangesModal from "@/legacy/components/ScreenshotChangesModal";
|
|
15
|
-
import AddVariationModal from "@/legacy/lib/builders/SliceBuilder/
|
|
19
|
+
import AddVariationModal from "@/legacy/lib/builders/SliceBuilder/VariationsList/AddVariationModal";
|
|
16
20
|
import type { VariationSM } from "@/legacy/lib/models/common/Slice";
|
|
17
21
|
import useSliceMachineActions from "@/modules/useSliceMachineActions";
|
|
18
22
|
|
|
23
|
+
import styles from "./VariationsList.module.css";
|
|
24
|
+
|
|
19
25
|
type DialogState =
|
|
20
26
|
| { type: "ADD_VARIATION"; variation?: undefined; loading?: boolean }
|
|
21
27
|
| { type: "RENAME_VARIATION"; variation: VariationSM; loading?: boolean }
|
|
22
28
|
| { type: "DELETE_VARIATION"; variation: VariationSM; loading?: boolean }
|
|
23
29
|
| undefined;
|
|
24
30
|
|
|
25
|
-
|
|
31
|
+
type VariationsListProps = {
|
|
32
|
+
horizontalScroll: boolean;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export const VariationsList: FC<VariationsListProps> = (props) => {
|
|
36
|
+
const { horizontalScroll = false } = props;
|
|
26
37
|
const { slice, variation, setSlice } = useSliceState();
|
|
27
38
|
const [dialog, setDialog] = useState<DialogState>();
|
|
28
39
|
const screenshotChangesModal = useScreenshotChangesModal();
|
|
@@ -31,82 +42,94 @@ export const Sidebar: FC = () => {
|
|
|
31
42
|
const router = useRouter();
|
|
32
43
|
const { saveSliceSuccess } = useSliceMachineActions();
|
|
33
44
|
|
|
45
|
+
const variationCount = slice.model.variations.length;
|
|
46
|
+
|
|
34
47
|
return (
|
|
35
48
|
<>
|
|
36
49
|
<Box flexDirection="column" gap={16}>
|
|
37
|
-
{
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
defaultVariationSelector: {
|
|
61
|
-
sliceID: slice.model.id,
|
|
62
|
-
variationID: v.id,
|
|
63
|
-
},
|
|
64
|
-
onUploadSuccess: (newSlice) => {
|
|
65
|
-
setSlice(newSlice);
|
|
66
|
-
},
|
|
67
|
-
});
|
|
68
|
-
}}
|
|
69
|
-
replace
|
|
70
|
-
selected={v.id === variation.id}
|
|
71
|
-
slice={slice}
|
|
72
|
-
variant="outlined"
|
|
73
|
-
variationId={v.id}
|
|
74
|
-
/>
|
|
75
|
-
))}
|
|
76
|
-
{/*
|
|
77
|
-
* As `PageLayoutContent` has a `16px` bottom padding, we need to apply
|
|
78
|
-
* an equal negative margin to the `div` if we want it to sit flush with
|
|
79
|
-
* the bottom of the page.
|
|
80
|
-
* TODO(PBD-1080): write the new `ScrollAreaEndGradient` component
|
|
81
|
-
* instead of using a `div`.
|
|
82
|
-
*/}
|
|
83
|
-
<div
|
|
84
|
-
style={{
|
|
85
|
-
bottom: theme.space[0],
|
|
86
|
-
marginBottom: `-${theme.space[16]}`,
|
|
87
|
-
position: "sticky",
|
|
88
|
-
}}
|
|
89
|
-
>
|
|
90
|
-
<Box
|
|
91
|
-
backgroundColor="grey2"
|
|
92
|
-
flexDirection="column"
|
|
93
|
-
padding={{ bottom: 40, inline: 24 }}
|
|
94
|
-
>
|
|
95
|
-
<Gradient sx={{ left: 0, position: "absolute", right: 0 }} />
|
|
96
|
-
<Button
|
|
97
|
-
color="grey"
|
|
98
|
-
onClick={() => {
|
|
99
|
-
setDialog({ type: "ADD_VARIATION" });
|
|
50
|
+
{horizontalScroll ? (
|
|
51
|
+
<>
|
|
52
|
+
<Divider variant="edgeFaded" color="grey6" />
|
|
53
|
+
<Box justifyContent="space-between">
|
|
54
|
+
<Text color="grey11">
|
|
55
|
+
{variationCount} variation{variationCount !== 1 && "s"}
|
|
56
|
+
</Text>
|
|
57
|
+
<Button
|
|
58
|
+
onClick={() => {
|
|
59
|
+
setDialog({ type: "ADD_VARIATION" });
|
|
60
|
+
}}
|
|
61
|
+
startIcon="add"
|
|
62
|
+
color="grey"
|
|
63
|
+
/>
|
|
64
|
+
</Box>
|
|
65
|
+
<div
|
|
66
|
+
className={styles.hideScrollbar}
|
|
67
|
+
style={{
|
|
68
|
+
height: "240px",
|
|
69
|
+
position: "relative",
|
|
70
|
+
marginRight: "-32px",
|
|
71
|
+
overflowX: "scroll",
|
|
72
|
+
scrollSnapType: "x mandatory",
|
|
100
73
|
}}
|
|
101
|
-
startIcon="add"
|
|
102
|
-
// Set `position` to `relative` to position `Button` on top of
|
|
103
|
-
// `Gradient`.
|
|
104
|
-
sx={{ position: "relative" }}
|
|
105
74
|
>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
75
|
+
<div
|
|
76
|
+
style={{
|
|
77
|
+
position: "absolute",
|
|
78
|
+
paddingRight: "32px",
|
|
79
|
+
}}
|
|
80
|
+
>
|
|
81
|
+
<Box flexDirection="row" gap={16}>
|
|
82
|
+
<SharedSliceCards
|
|
83
|
+
screenshotChangesModal={screenshotChangesModal}
|
|
84
|
+
setDialog={setDialog}
|
|
85
|
+
width={320}
|
|
86
|
+
/>
|
|
87
|
+
</Box>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</>
|
|
91
|
+
) : (
|
|
92
|
+
<>
|
|
93
|
+
<SharedSliceCards
|
|
94
|
+
screenshotChangesModal={screenshotChangesModal}
|
|
95
|
+
setDialog={setDialog}
|
|
96
|
+
/>
|
|
97
|
+
{/*
|
|
98
|
+
* As `PageLayoutContent` has a `16px` bottom padding, we need to apply
|
|
99
|
+
* an equal negative margin to the `div` if we want it to sit flush with
|
|
100
|
+
* the bottom of the page.
|
|
101
|
+
* TODO(PBD-1080): write the new `ScrollAreaEndGradient` component
|
|
102
|
+
* instead of using a `div`.
|
|
103
|
+
*/}
|
|
104
|
+
<div
|
|
105
|
+
style={{
|
|
106
|
+
bottom: theme.space[0],
|
|
107
|
+
marginBottom: `-${theme.space[16]}`,
|
|
108
|
+
position: "sticky",
|
|
109
|
+
}}
|
|
110
|
+
>
|
|
111
|
+
<Box
|
|
112
|
+
backgroundColor="grey2"
|
|
113
|
+
flexDirection="column"
|
|
114
|
+
padding={{ bottom: 40, inline: 24 }}
|
|
115
|
+
>
|
|
116
|
+
<Gradient sx={{ left: 0, position: "absolute", right: 0 }} />
|
|
117
|
+
<Button
|
|
118
|
+
color="grey"
|
|
119
|
+
onClick={() => {
|
|
120
|
+
setDialog({ type: "ADD_VARIATION" });
|
|
121
|
+
}}
|
|
122
|
+
startIcon="add"
|
|
123
|
+
// Set `position` to `relative` to position `Button` on top of
|
|
124
|
+
// `Gradient`.
|
|
125
|
+
sx={{ position: "relative" }}
|
|
126
|
+
>
|
|
127
|
+
Add a new variation
|
|
128
|
+
</Button>
|
|
129
|
+
</Box>
|
|
130
|
+
</div>
|
|
131
|
+
</>
|
|
132
|
+
)}
|
|
110
133
|
</Box>
|
|
111
134
|
<ScreenshotChangesModal
|
|
112
135
|
slices={sliceFilterFn([slice])}
|
|
@@ -163,3 +186,68 @@ export const Sidebar: FC = () => {
|
|
|
163
186
|
</>
|
|
164
187
|
);
|
|
165
188
|
};
|
|
189
|
+
|
|
190
|
+
type SharedSliceCardsProps = {
|
|
191
|
+
screenshotChangesModal: Payload;
|
|
192
|
+
setDialog: Dispatch<SetStateAction<DialogState>>;
|
|
193
|
+
width?: 320;
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
export const SharedSliceCards = (props: SharedSliceCardsProps) => {
|
|
197
|
+
const { screenshotChangesModal, setDialog, width } = props;
|
|
198
|
+
const { slice, variation, setSlice } = useSliceState();
|
|
199
|
+
|
|
200
|
+
const defaultCardStyle = { scrollSnapAlign: "start" };
|
|
201
|
+
|
|
202
|
+
return (
|
|
203
|
+
<>
|
|
204
|
+
{slice.model.variations.map((v) => (
|
|
205
|
+
<div
|
|
206
|
+
style={
|
|
207
|
+
width !== undefined
|
|
208
|
+
? { ...defaultCardStyle, width }
|
|
209
|
+
: defaultCardStyle
|
|
210
|
+
}
|
|
211
|
+
>
|
|
212
|
+
<SharedSliceCard
|
|
213
|
+
action={{
|
|
214
|
+
type: "menu",
|
|
215
|
+
onRename: () => {
|
|
216
|
+
setDialog({
|
|
217
|
+
type: "RENAME_VARIATION",
|
|
218
|
+
variation: v,
|
|
219
|
+
});
|
|
220
|
+
},
|
|
221
|
+
onRemove: () => {
|
|
222
|
+
setDialog({
|
|
223
|
+
type: "DELETE_VARIATION",
|
|
224
|
+
variation: v,
|
|
225
|
+
});
|
|
226
|
+
},
|
|
227
|
+
removeDisabled: slice.model.variations.length <= 1,
|
|
228
|
+
}}
|
|
229
|
+
key={v.id}
|
|
230
|
+
mode="navigation"
|
|
231
|
+
onUpdateScreenshot={() => {
|
|
232
|
+
screenshotChangesModal.onOpenModal({
|
|
233
|
+
sliceFilterFn: (s) => s,
|
|
234
|
+
defaultVariationSelector: {
|
|
235
|
+
sliceID: slice.model.id,
|
|
236
|
+
variationID: v.id,
|
|
237
|
+
},
|
|
238
|
+
onUploadSuccess: (newSlice) => {
|
|
239
|
+
setSlice(newSlice);
|
|
240
|
+
},
|
|
241
|
+
});
|
|
242
|
+
}}
|
|
243
|
+
replace
|
|
244
|
+
selected={v.id === variation.id}
|
|
245
|
+
slice={slice}
|
|
246
|
+
variant="outlined"
|
|
247
|
+
variationId={v.id}
|
|
248
|
+
/>
|
|
249
|
+
</div>
|
|
250
|
+
))}
|
|
251
|
+
</>
|
|
252
|
+
);
|
|
253
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Box } from "@prismicio/editor-ui";
|
|
1
|
+
import { Box, useMediaQuery } from "@prismicio/editor-ui";
|
|
2
2
|
import { type FC } from "react";
|
|
3
3
|
|
|
4
4
|
import { BreadcrumbItem } from "@/components/Breadcrumb";
|
|
@@ -16,10 +16,15 @@ import {
|
|
|
16
16
|
import SimulatorButton from "@/legacy/lib/builders/SliceBuilder/SimulatorButton";
|
|
17
17
|
|
|
18
18
|
import FieldZones from "./FieldZones";
|
|
19
|
-
import {
|
|
19
|
+
import { VariationsList } from "./VariationsList";
|
|
20
20
|
|
|
21
21
|
export const SliceBuilder: FC = () => {
|
|
22
22
|
const { slice, actionQueueStatus } = useSliceState();
|
|
23
|
+
const horizontalScroll = useMediaQuery({ max: "medium" });
|
|
24
|
+
|
|
25
|
+
const contentDisplayProps = horizontalScroll
|
|
26
|
+
? { gridTemplateRows: "304px 1fr" }
|
|
27
|
+
: { gridTemplateColumns: "320px 1fr" };
|
|
23
28
|
|
|
24
29
|
return (
|
|
25
30
|
<AppLayout>
|
|
@@ -36,12 +41,12 @@ export const SliceBuilder: FC = () => {
|
|
|
36
41
|
</AppLayoutHeader>
|
|
37
42
|
<AppLayoutContent>
|
|
38
43
|
<Box
|
|
39
|
-
alignItems="flex-start"
|
|
40
44
|
display="grid"
|
|
45
|
+
alignItems="flex-start"
|
|
41
46
|
gap={16}
|
|
42
|
-
|
|
47
|
+
{...contentDisplayProps}
|
|
43
48
|
>
|
|
44
|
-
<
|
|
49
|
+
<VariationsList horizontalScroll={horizontalScroll} />
|
|
45
50
|
<FieldZones />
|
|
46
51
|
</Box>
|
|
47
52
|
<FloatingBackButton />
|