slice-machine-ui 1.26.1-beta.26 → 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-69457d1552479991.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/{0OvHJU1Z36y0jgiKYEzEO → 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/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]-40a32a76b39d70e8.js +0 -1
- /package/out/_next/static/{0OvHJU1Z36y0jgiKYEzEO → 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",
|
|
@@ -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 />
|