slice-machine-ui 1.20.1-dev-next-release.3 → 1.20.1-dev-next-release.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/components/AppLayout/index.tsx +34 -10
  2. package/components/Navigation/Environment.tsx +47 -0
  3. package/components/Navigation/index.css.ts +6 -0
  4. package/components/Navigation/index.tsx +15 -2
  5. package/out/404.html +1 -1
  6. package/out/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js +1 -0
  7. package/out/_next/static/chunks/840-6e00e3fb69984e18.js +1 -0
  8. package/out/_next/static/chunks/904-5e18cdb44800ba7f.js +1 -0
  9. package/out/_next/static/chunks/pages/{_app-2d01c2c528624eaf.js → _app-dd11be4278a2b98f.js} +7 -7
  10. package/out/_next/static/chunks/pages/{changelog-fa36b9995c26e1d7.js → changelog-4b8369d91d82b28b.js} +1 -1
  11. package/out/_next/static/chunks/pages/changes-64686146a8087d29.js +1 -0
  12. package/out/_next/static/chunks/pages/labs-2922105ab714d32a.js +1 -0
  13. package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/{[variation]-763cc8c12e977b4a.js → [variation]-3d8beb33e88d9e35.js} +1 -1
  14. package/out/_next/static/chunks/pages/slices-93b7af2624c85b8e.js +1 -0
  15. package/out/_next/static/css/{e48f99beffa085f5.css → e1564cb89a3a9960.css} +1 -1
  16. package/out/changelog.html +1 -1
  17. package/out/changes.html +1 -1
  18. package/out/custom-types/[customTypeId].html +1 -1
  19. package/out/custom-types.html +1 -1
  20. package/out/index.html +1 -1
  21. package/out/labs.html +1 -1
  22. package/out/page-types/[pageTypeId].html +1 -1
  23. package/out/slices/[lib]/[sliceName]/[variation]/simulator.html +1 -1
  24. package/out/slices/[lib]/[sliceName]/[variation].html +1 -1
  25. package/out/slices.html +1 -1
  26. package/package.json +4 -4
  27. package/pages/slices.tsx +1 -0
  28. package/src/components/Divider/Divider.css.ts +31 -0
  29. package/src/components/Divider/Divider.stories.tsx +27 -0
  30. package/src/components/Divider/Divider.tsx +25 -0
  31. package/src/components/Divider/index.ts +1 -0
  32. package/src/components/PageLayout/PageLayout.css.ts +8 -3
  33. package/src/components/PageLayout/PageLayout.stories.tsx +10 -1
  34. package/src/components/PageLayout/PageLayout.tsx +7 -2
  35. package/src/components/SideNav/SideNav.css.ts +3 -10
  36. package/src/components/SideNav/SideNav.stories.tsx +29 -2
  37. package/src/components/SideNav/SideNav.tsx +5 -1
  38. package/src/components/SideNav/SideNavEnvironmentSelector.css.ts +69 -0
  39. package/src/components/SideNav/SideNavEnvironmentSelector.tsx +163 -0
  40. package/src/components/SideNav/index.ts +1 -0
  41. package/src/features/customTypes/__tests__/CustomTypeBuilderPage.test.tsx +4 -3
  42. package/src/features/environments/actions/getActiveEnvironmentDomain.ts +11 -0
  43. package/src/features/environments/actions/getEnvironments.ts +12 -0
  44. package/src/features/environments/actions/setEnvironment.ts +18 -0
  45. package/src/features/environments/useActiveEnvironment.ts +38 -0
  46. package/src/features/environments/useEnvironments.ts +7 -0
  47. package/src/features/legacyState/actions/getLegacySliceMachineState.ts +53 -0
  48. package/src/features/legacyState/useLegacySliceMachineState.ts +7 -0
  49. package/test/pages/slices.test.tsx +4 -8
  50. package/test/src/modules/__fixtures__/serverState.ts +2 -0
  51. package/out/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js +0 -1
  52. package/out/_next/static/chunks/840-8cec2bbd104111f2.js +0 -1
  53. package/out/_next/static/chunks/904-cb627b6d7b8068f9.js +0 -1
  54. package/out/_next/static/chunks/pages/changes-494c71511b2e8989.js +0 -1
  55. package/out/_next/static/chunks/pages/labs-ebce03a4e7a95a4e.js +0 -1
  56. package/out/_next/static/chunks/pages/slices-22db04643850c1d8.js +0 -1
  57. /package/out/_next/static/{BIxidu02_xbgjO9EV7tg4 → SPzizBxxX94N8BI0V2i0y}/_ssgManifest.js +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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.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-2d01c2c528624eaf.js" defer=""></script><script src="/_next/static/chunks/870-0c7a8a9622de78b7.js" defer=""></script><script src="/_next/static/chunks/pages/changelog-fa36b9995c26e1d7.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changelog","query":{},"buildId":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.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-dd11be4278a2b98f.js" defer=""></script><script src="/_next/static/chunks/870-0c7a8a9622de78b7.js" defer=""></script><script src="/_next/static/chunks/pages/changelog-4b8369d91d82b28b.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changelog","query":{},"buildId":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.css" data-n-g=""/><link rel="preload" href="/_next/static/css/78250665d395ea50.css" as="style"/><link rel="stylesheet" href="/_next/static/css/78250665d395ea50.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-2d01c2c528624eaf.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/918-38d08f1e885b222d.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/80-72d903b2a0bd5dc3.js" defer=""></script><script src="/_next/static/chunks/pages/changes-494c71511b2e8989.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changes","query":{},"buildId":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.css" data-n-g=""/><link rel="preload" href="/_next/static/css/78250665d395ea50.css" as="style"/><link rel="stylesheet" href="/_next/static/css/78250665d395ea50.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-dd11be4278a2b98f.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/918-38d08f1e885b222d.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/80-72d903b2a0bd5dc3.js" defer=""></script><script src="/_next/static/chunks/pages/changes-64686146a8087d29.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/changes","query":{},"buildId":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
package/out/custom-types/[customTypeId].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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.css" data-n-g=""/><link rel="preload" href="/_next/static/css/5d18ccf403d4649a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/5d18ccf403d4649a.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-2d01c2c528624eaf.js" defer=""></script><script src="/_next/static/chunks/474-2393e400314474be.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/550-abf97d3008006056.js" defer=""></script><script src="/_next/static/chunks/482-30c0f114c7213fa3.js" defer=""></script><script src="/_next/static/chunks/904-cb627b6d7b8068f9.js" defer=""></script><script src="/_next/static/chunks/pages/custom-types/%5BcustomTypeId%5D-3a37eb3373bb8823.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_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":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.css" data-n-g=""/><link rel="preload" href="/_next/static/css/5d18ccf403d4649a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/5d18ccf403d4649a.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-dd11be4278a2b98f.js" defer=""></script><script src="/_next/static/chunks/474-2393e400314474be.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/550-abf97d3008006056.js" defer=""></script><script src="/_next/static/chunks/482-30c0f114c7213fa3.js" defer=""></script><script src="/_next/static/chunks/904-5e18cdb44800ba7f.js" defer=""></script><script src="/_next/static/chunks/pages/custom-types/%5BcustomTypeId%5D-3a37eb3373bb8823.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_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":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.css" data-n-g=""/><link rel="preload" href="/_next/static/css/b0be58d878c0fac3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b0be58d878c0fac3.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-2d01c2c528624eaf.js" defer=""></script><script src="/_next/static/chunks/550-abf97d3008006056.js" defer=""></script><script src="/_next/static/chunks/840-8cec2bbd104111f2.js" defer=""></script><script src="/_next/static/chunks/pages/custom-types-2f5664d9492b13fb.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/custom-types","query":{},"buildId":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.css" data-n-g=""/><link rel="preload" href="/_next/static/css/b0be58d878c0fac3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b0be58d878c0fac3.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-dd11be4278a2b98f.js" defer=""></script><script src="/_next/static/chunks/550-abf97d3008006056.js" defer=""></script><script src="/_next/static/chunks/840-6e00e3fb69984e18.js" defer=""></script><script src="/_next/static/chunks/pages/custom-types-2f5664d9492b13fb.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/custom-types","query":{},"buildId":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.css" data-n-g=""/><link rel="preload" href="/_next/static/css/b0be58d878c0fac3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b0be58d878c0fac3.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-2d01c2c528624eaf.js" defer=""></script><script src="/_next/static/chunks/550-abf97d3008006056.js" defer=""></script><script src="/_next/static/chunks/840-8cec2bbd104111f2.js" defer=""></script><script src="/_next/static/chunks/pages/index-d8e3a2c0d712904f.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.css" data-n-g=""/><link rel="preload" href="/_next/static/css/b0be58d878c0fac3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b0be58d878c0fac3.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-dd11be4278a2b98f.js" defer=""></script><script src="/_next/static/chunks/550-abf97d3008006056.js" defer=""></script><script src="/_next/static/chunks/840-6e00e3fb69984e18.js" defer=""></script><script src="/_next/static/chunks/pages/index-d8e3a2c0d712904f.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.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-2d01c2c528624eaf.js" defer=""></script><script src="/_next/static/chunks/pages/labs-ebce03a4e7a95a4e.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/labs","query":{},"buildId":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.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-dd11be4278a2b98f.js" defer=""></script><script src="/_next/static/chunks/pages/labs-2922105ab714d32a.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/labs","query":{},"buildId":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
package/out/page-types/[pageTypeId].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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.css" data-n-g=""/><link rel="preload" href="/_next/static/css/5d18ccf403d4649a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/5d18ccf403d4649a.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-2d01c2c528624eaf.js" defer=""></script><script src="/_next/static/chunks/474-2393e400314474be.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/550-abf97d3008006056.js" defer=""></script><script src="/_next/static/chunks/482-30c0f114c7213fa3.js" defer=""></script><script src="/_next/static/chunks/904-cb627b6d7b8068f9.js" defer=""></script><script src="/_next/static/chunks/pages/page-types/%5BpageTypeId%5D-733f3890c0466a05.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_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":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.css" data-n-g=""/><link rel="preload" href="/_next/static/css/5d18ccf403d4649a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/5d18ccf403d4649a.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-dd11be4278a2b98f.js" defer=""></script><script src="/_next/static/chunks/474-2393e400314474be.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/550-abf97d3008006056.js" defer=""></script><script src="/_next/static/chunks/482-30c0f114c7213fa3.js" defer=""></script><script src="/_next/static/chunks/904-5e18cdb44800ba7f.js" defer=""></script><script src="/_next/static/chunks/pages/page-types/%5BpageTypeId%5D-733f3890c0466a05.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_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":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
package/out/slices/[lib]/[sliceName]/[variation]/simulator.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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.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-2d01c2c528624eaf.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-5d8b6a04053638af.js" defer=""></script><script src="/_next/static/chunks/505-fa47e200ac3a012d.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/simulator-7b17cb59d0db03b5.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_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":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.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-dd11be4278a2b98f.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-5d8b6a04053638af.js" defer=""></script><script src="/_next/static/chunks/505-fa47e200ac3a012d.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/simulator-7b17cb59d0db03b5.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_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":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
package/out/slices/[lib]/[sliceName]/[variation].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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.css" data-n-g=""/><link rel="preload" href="/_next/static/css/31841735992dea23.css" as="style"/><link rel="stylesheet" href="/_next/static/css/31841735992dea23.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-2d01c2c528624eaf.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/80-72d903b2a0bd5dc3.js" defer=""></script><script src="/_next/static/chunks/482-30c0f114c7213fa3.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D-763cc8c12e977b4a.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_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":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.css" data-n-g=""/><link rel="preload" href="/_next/static/css/31841735992dea23.css" as="style"/><link rel="stylesheet" href="/_next/static/css/31841735992dea23.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-dd11be4278a2b98f.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/80-72d903b2a0bd5dc3.js" defer=""></script><script src="/_next/static/chunks/482-30c0f114c7213fa3.js" defer=""></script><script src="/_next/static/chunks/pages/slices/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D-3d8beb33e88d9e35.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_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":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"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/e48f99beffa085f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e48f99beffa085f5.css" data-n-g=""/><link rel="preload" href="/_next/static/css/58a89606d9ca9093.css" as="style"/><link rel="stylesheet" href="/_next/static/css/58a89606d9ca9093.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-2d01c2c528624eaf.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/80-72d903b2a0bd5dc3.js" defer=""></script><script src="/_next/static/chunks/pages/slices-22db04643850c1d8.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_buildManifest.js" defer=""></script><script src="/_next/static/BIxidu02_xbgjO9EV7tg4/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"BIxidu02_xbgjO9EV7tg4","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
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/e1564cb89a3a9960.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e1564cb89a3a9960.css" data-n-g=""/><link rel="preload" href="/_next/static/css/58a89606d9ca9093.css" as="style"/><link rel="stylesheet" href="/_next/static/css/58a89606d9ca9093.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-dd11be4278a2b98f.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/958-8f814daf5896ff97.js" defer=""></script><script src="/_next/static/chunks/80-72d903b2a0bd5dc3.js" defer=""></script><script src="/_next/static/chunks/pages/slices-93b7af2624c85b8e.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_buildManifest.js" defer=""></script><script src="/_next/static/SPzizBxxX94N8BI0V2i0y/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"SPzizBxxX94N8BI0V2i0y","runtimeConfig":{"sentryEnvironment":"alpha"},"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.20.1-dev-next-release.3",
3
+ "version": "1.20.1-dev-next-release.4",
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": {
@@ -31,8 +31,8 @@
31
31
  "start-slicemachine": "./bin/start-slicemachine.cjs"
32
32
  },
33
33
  "dependencies": {
34
- "@slicemachine/manager": "^0.16.1-dev-next-release.3",
35
- "start-slicemachine": "^0.12.6-dev-next-release.3"
34
+ "@slicemachine/manager": "^0.16.1-dev-next-release.4",
35
+ "start-slicemachine": "^0.12.6-dev-next-release.4"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@emotion/react": "11.11.1",
@@ -130,5 +130,5 @@
130
130
  "vitest": "0.32.0",
131
131
  "yup": "0.32.11"
132
132
  },
133
- "gitHead": "31f84c8560e91d356c375c0e304d4e020eb0009b"
133
+ "gitHead": "33e58254e60ab184774fbee703891c23159b0a10"
134
134
  }
package/pages/slices.tsx CHANGED
@@ -76,6 +76,7 @@ const SlicesIndex: React.FunctionComponent = () => {
76
76
  {localLibraries?.length !== 0 && sliceCount !== 0 ? (
77
77
  <AppLayoutActions>
78
78
  <Button
79
+ data-testid="create-slice"
79
80
  data-cy="create-slice"
80
81
  onClick={() => {
81
82
  setIsCreateSliceModalOpen(true);
package/src/components/Divider/Divider.css.ts ADDED
@@ -0,0 +1,31 @@
1
+ import { colors, sprinkles } from "@prismicio/editor-ui";
2
+ import { style, styleVariants } from "@vanilla-extract/css";
3
+
4
+ const base = style([
5
+ sprinkles({
6
+ width: "100%",
7
+ borderStyle: "none",
8
+ margin: 0,
9
+ }),
10
+ ]);
11
+
12
+ export const variants = styleVariants({
13
+ dashed: [
14
+ base,
15
+ sprinkles({
16
+ borderColor: colors.currentColor,
17
+ borderTopStyle: "dashed",
18
+ borderWidth: 1,
19
+ }),
20
+ ],
21
+ edgeFaded: [
22
+ base,
23
+ sprinkles({
24
+ height: 1,
25
+ }),
26
+ {
27
+ backgroundImage:
28
+ "linear-gradient(to right, color-mix(in srgb, currentColor 0%, transparent), currentColor, color-mix(in srgb, currentColor 0%, transparent))",
29
+ },
30
+ ],
31
+ });
package/src/components/Divider/Divider.stories.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import { colors } from "@prismicio/editor-ui";
3
+
4
+ import { Divider } from "./Divider";
5
+ import { variants } from "./Divider.css";
6
+
7
+ type Story = StoryObj<typeof meta>;
8
+
9
+ const meta = {
10
+ component: Divider,
11
+ argTypes: {
12
+ variant: {
13
+ control: { type: "select" },
14
+ options: Object.keys(variants),
15
+ },
16
+ color: {
17
+ control: { type: "select" },
18
+ options: Object.keys(colors),
19
+ },
20
+ },
21
+ } satisfies Meta<typeof Divider>;
22
+
23
+ export default meta;
24
+
25
+ export const Default = {
26
+ args: {},
27
+ } satisfies Story;
package/src/components/Divider/Divider.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { FC } from "react";
2
+ import { colors, sprinkles } from "@prismicio/editor-ui";
3
+ import clsx from "clsx";
4
+
5
+ import * as styles from "./Divider.css";
6
+
7
+ type DividerProps = {
8
+ color?: keyof typeof colors;
9
+ variant?: "dashed" | "edgeFaded";
10
+ className?: string;
11
+ };
12
+
13
+ export const Divider: FC<DividerProps> = (props) => {
14
+ const { variant = "dashed", color = "currentColor", className } = props;
15
+
16
+ return (
17
+ <hr
18
+ className={clsx(
19
+ styles.variants[variant],
20
+ sprinkles({ color: colors[color] }),
21
+ className,
22
+ )}
23
+ />
24
+ );
25
+ };
package/src/components/Divider/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { Divider } from "./Divider";
package/src/components/PageLayout/PageLayout.css.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { colors, sprinkles, vars } from "@prismicio/editor-ui";
2
- import { style } from "@vanilla-extract/css";
2
+ import { style, styleVariants } from "@vanilla-extract/css";
3
3
 
4
4
  const grid = sprinkles({ all: "unset", display: "grid" });
5
5
 
@@ -23,10 +23,9 @@ export const root = style([
23
23
  },
24
24
  ]);
25
25
 
26
- export const borderTop = style([
26
+ const borderTopBase = style([
27
27
  sprinkles({
28
28
  all: "unset",
29
- backgroundColor: colors.purple9,
30
29
  display: "revert",
31
30
  height: 2,
32
31
  position: "fixed",
@@ -35,6 +34,12 @@ export const borderTop = style([
35
34
  { width: "inherit" },
36
35
  ]);
37
36
 
37
+ export const borderTop = styleVariants({
38
+ prod: [borderTopBase, sprinkles({ backgroundColor: colors.purple9 })],
39
+ stage: [borderTopBase, sprinkles({ backgroundColor: colors.indigo10 })],
40
+ dev: [borderTopBase, sprinkles({ backgroundColor: colors.amber10 })],
41
+ });
42
+
38
43
  export const pane = style([
39
44
  grid,
40
45
  sprinkles({
package/src/components/PageLayout/PageLayout.stories.tsx CHANGED
@@ -6,12 +6,21 @@ import {
6
6
  PageLayoutHeader,
7
7
  PageLayoutPane,
8
8
  } from "./PageLayout";
9
+ import { borderTop } from "./PageLayout.css";
9
10
 
10
11
  type Story = StoryObj<typeof meta>;
11
12
 
12
13
  const meta = {
13
14
  component: PageLayout,
14
- argTypes: { children: { control: { disable: true } } },
15
+ argTypes: {
16
+ children: {
17
+ control: { disable: true },
18
+ },
19
+ activeEnvironmentKind: {
20
+ control: { type: "select" },
21
+ options: Object.keys(borderTop),
22
+ },
23
+ },
15
24
  parameters: {
16
25
  docs: { story: { height: 256, inline: false } },
17
26
  layout: "fullscreen",
package/src/components/PageLayout/PageLayout.tsx CHANGED
@@ -2,13 +2,18 @@ import type { FC, PropsWithChildren } from "react";
2
2
 
3
3
  import * as styles from "./PageLayout.css";
4
4
 
5
- export const PageLayout: FC<PropsWithChildren> = ({
5
+ type PageLayoutProps = PropsWithChildren<{
6
+ activeEnvironmentKind?: "prod" | "stage" | "dev";
7
+ }>;
8
+
9
+ export const PageLayout: FC<PageLayoutProps> = ({
10
+ activeEnvironmentKind = "prod",
6
11
  children,
7
12
  ...otherProps
8
13
  }) => (
9
14
  <div {...otherProps} className={styles.root}>
10
15
  {children}
11
- <div className={styles.borderTop} />
16
+ <div className={styles.borderTop[activeEnvironmentKind]} />
12
17
  </div>
13
18
  );
14
19
 
package/src/components/SideNav/SideNav.css.ts CHANGED
@@ -101,7 +101,6 @@ export const repositoryLinkIcon = style([
101
101
  borderWidth: 1,
102
102
  cursor: "pointer",
103
103
  height: 32,
104
- marginRight: 8,
105
104
  width: 32,
106
105
  color: colors.grey12,
107
106
  backgroundColor: {
@@ -163,15 +162,9 @@ export const listTitle = style([
163
162
  },
164
163
  ]);
165
164
 
166
- export const dashedLine = style([
167
- blockWithDisplayRevert,
168
- sprinkles({
169
- borderColor: colors.grey6,
170
- borderTopStyle: "dashed",
171
- borderWidth: 1,
172
- marginTop: 8,
173
- }),
174
- ]);
165
+ export const separator = sprinkles({
166
+ marginTop: 8,
167
+ });
175
168
 
176
169
  export const link = style([
177
170
  block,
package/src/components/SideNav/SideNav.stories.tsx CHANGED
@@ -5,7 +5,6 @@ import { LightningIcon } from "@src/icons/Lightning";
5
5
 
6
6
  import {
7
7
  SideNav,
8
- SideNavLogo,
9
8
  SideNavList,
10
9
  SideNavListItem,
11
10
  SideNavLink,
@@ -15,6 +14,7 @@ import {
15
14
  SideNavRepository,
16
15
  RightElement,
17
16
  } from "./SideNav";
17
+ import { SideNavEnvironmentSelector } from "./SideNavEnvironmentSelector";
18
18
 
19
19
  type Story = StoryObj<typeof meta>;
20
20
 
@@ -33,7 +33,34 @@ export const Default = {
33
33
  args: {
34
34
  children: (
35
35
  <>
36
- <SideNavLogo />
36
+ <SideNavEnvironmentSelector
37
+ environments={[
38
+ {
39
+ name: "Production",
40
+ domain: "example-prismic-repo",
41
+ kind: "prod",
42
+ users: [{ id: "id" }],
43
+ },
44
+ {
45
+ name: "Staging",
46
+ domain: "example-prismic-repo-staging",
47
+ kind: "stage",
48
+ users: [{ id: "id" }],
49
+ },
50
+ {
51
+ name: "Development",
52
+ domain: "example-prismic-repo-development",
53
+ kind: "dev",
54
+ users: [{ id: "id" }],
55
+ },
56
+ ]}
57
+ activeEnvironment={{
58
+ name: "Production",
59
+ domain: "example-prismic-repo",
60
+ kind: "prod",
61
+ users: [{ id: "id" }],
62
+ }}
63
+ />
37
64
 
38
65
  <SideNavRepository
39
66
  repositoryName="really long repository name"
package/src/components/SideNav/SideNav.tsx CHANGED
@@ -16,6 +16,8 @@ import type { UrlObject } from "node:url";
16
16
  import LogoIcon from "@src/icons/LogoIcon";
17
17
  import OpenIcon from "@src/icons/OpenIcon";
18
18
 
19
+ import { Divider } from "../Divider";
20
+
19
21
  import * as styles from "./SideNav.css";
20
22
 
21
23
  type SideNavProps = PropsWithChildren<{ style?: CSSProperties }>;
@@ -90,7 +92,9 @@ export const SideNavListTitle: FC<PropsWithChildren> = (props) => (
90
92
  <h3 {...props} className={styles.listTitle} />
91
93
  );
92
94
 
93
- export const SideNavSeparator = () => <hr className={styles.dashedLine} />;
95
+ export const SideNavSeparator = () => (
96
+ <Divider color="grey6" className={styles.separator} />
97
+ );
94
98
 
95
99
  export type SideNavLinkProps = {
96
100
  title: string;
package/src/components/SideNav/SideNavEnvironmentSelector.css.ts ADDED
@@ -0,0 +1,69 @@
1
+ import { colors, sprinkles } from "@prismicio/editor-ui";
2
+ import { style, styleVariants } from "@vanilla-extract/css";
3
+
4
+ export const logo = style([
5
+ sprinkles({
6
+ height: 40,
7
+ width: 40,
8
+ }),
9
+ {
10
+ display: "block",
11
+ },
12
+ ]);
13
+
14
+ const environmentDotBase = style([
15
+ sprinkles({
16
+ flexShrink: 0,
17
+ borderRadius: "50%",
18
+ }),
19
+ {
20
+ width: 10,
21
+ height: 10,
22
+ },
23
+ ]);
24
+
25
+ export const environmentDot = styleVariants({
26
+ prod: [environmentDotBase, sprinkles({ backgroundColor: colors.purple10 })],
27
+ stage: [environmentDotBase, sprinkles({ backgroundColor: colors.indigo10 })],
28
+ dev: [environmentDotBase, sprinkles({ backgroundColor: colors.amber10 })],
29
+ });
30
+
31
+ export const menuItemEnvironmentDot = sprinkles({
32
+ marginRight: 2,
33
+ marginLeft: 2,
34
+ });
35
+
36
+ export const activeEnvironmentDot = style([
37
+ sprinkles({
38
+ position: "absolute",
39
+ bottom: 0,
40
+ right: 0,
41
+ outlineWidth: 3,
42
+ outlineColor: colors.grey2,
43
+ outlineStyle: "solid",
44
+ }),
45
+ {
46
+ transform: "translate(50%, 50%)",
47
+ },
48
+ ]);
49
+
50
+ export const activeEnvironmentName = style([
51
+ sprinkles({
52
+ overflow: "hidden",
53
+ textOverflow: "ellipsis",
54
+ whiteSpace: "nowrap",
55
+ }),
56
+ {
57
+ fontWeight: 500,
58
+ lineHeight: "1.25rem",
59
+ },
60
+ ]);
61
+
62
+ export const actionRequiredLabel = style([
63
+ sprinkles({
64
+ color: colors.purple10,
65
+ }),
66
+ {
67
+ fontWeight: 500,
68
+ },
69
+ ]);