slice-machine-ui 1.16.1-dev-labs.1 → 1.16.1-dev-labs.3

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 (31) hide show
  1. package/lib/builders/CustomTypeBuilder/SliceZone/List.tsx +2 -2
  2. package/out/404.html +1 -1
  3. package/out/_next/static/{NzkBW7jN6OiuILEsvbUnV → 34eIMtqabnwE8ne-cMzYi}/_buildManifest.js +1 -1
  4. package/out/_next/static/chunks/{882-b5649a82e39a27b1.js → 654-b8b815382e007546.js} +1 -1
  5. package/out/_next/static/chunks/pages/{_app-98cfc475f9e568ec.js → _app-c745e8d32adf237c.js} +3 -3
  6. package/out/_next/static/chunks/pages/custom-types/{[customTypeId]-a569a4ec075a124c.js → [customTypeId]-c27ce4a601cc1abb.js} +1 -1
  7. package/out/_next/static/chunks/pages/labs-798da009e867d5c1.js +1 -0
  8. package/out/_next/static/chunks/pages/page-types/{[pageTypeId]-59531e01da8d0512.js → [pageTypeId]-e7b289d410a85b78.js} +1 -1
  9. package/out/changelog.html +1 -1
  10. package/out/changes.html +1 -1
  11. package/out/custom-types/[customTypeId].html +1 -1
  12. package/out/custom-types.html +1 -1
  13. package/out/index.html +1 -1
  14. package/out/labs.html +1 -1
  15. package/out/page-types/[pageTypeId].html +1 -1
  16. package/out/slices/[lib]/[sliceName]/[variation]/screenshot.html +1 -1
  17. package/out/slices/[lib]/[sliceName]/[variation]/simulator.html +1 -1
  18. package/out/slices/[lib]/[sliceName]/[variation].html +1 -1
  19. package/out/slices.html +1 -1
  20. package/package.json +4 -4
  21. package/pages/labs.tsx +1 -9
  22. package/src/features/labs/{labsTable/LabsTable.tsx → labsList/LabsList.tsx} +32 -37
  23. package/src/features/labs/labsList/LabsListItem.tsx +36 -0
  24. package/src/features/labs/labsList/LabsPage.tsx +70 -0
  25. package/src/features/labs/{labsTable/useLabs.tsx → labsList/useLab.tsx} +5 -5
  26. package/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx +1 -1
  27. package/src/hooks/useSliceMachineConfig.ts +4 -8
  28. package/out/_next/static/chunks/pages/labs-3e0bc4df0445afda.js +0 -1
  29. package/src/features/labs/labsTable/LabsPage.tsx +0 -63
  30. package/src/features/labs/labsTable/LabsTableItem.tsx +0 -62
  31. /package/out/_next/static/{NzkBW7jN6OiuILEsvbUnV → 34eIMtqabnwE8ne-cMzYi}/_ssgManifest.js +0 -0
package/out/slices.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><link rel="preload" href="/_next/static/css/22d69420bda374a7.css" as="style"/><link rel="stylesheet" href="/_next/static/css/22d69420bda374a7.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-98cfc475f9e568ec.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/590-ab38d53732035bf0.js" defer=""></script><script src="/_next/static/chunks/573-8678a91b09707f5d.js" defer=""></script><script src="/_next/static/chunks/pages/slices-b686960d7d228e36.js" defer=""></script><script src="/_next/static/NzkBW7jN6OiuILEsvbUnV/_buildManifest.js" defer=""></script><script src="/_next/static/NzkBW7jN6OiuILEsvbUnV/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"NzkBW7jN6OiuILEsvbUnV","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
1
+ <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/66b3836ab88b0c5c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/66b3836ab88b0c5c.css" data-n-g=""/><link rel="preload" href="/_next/static/css/22d69420bda374a7.css" as="style"/><link rel="stylesheet" href="/_next/static/css/22d69420bda374a7.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-c745e8d32adf237c.js" defer=""></script><script src="/_next/static/chunks/c8eae200-966ce352f7b5d2b9.js" defer=""></script><script src="/_next/static/chunks/590-ab38d53732035bf0.js" defer=""></script><script src="/_next/static/chunks/573-8678a91b09707f5d.js" defer=""></script><script src="/_next/static/chunks/pages/slices-b686960d7d228e36.js" defer=""></script><script src="/_next/static/34eIMtqabnwE8ne-cMzYi/_buildManifest.js" defer=""></script><script src="/_next/static/34eIMtqabnwE8ne-cMzYi/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/slices","query":{},"buildId":"34eIMtqabnwE8ne-cMzYi","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "slice-machine-ui",
3
- "version": "1.16.1-dev-labs.1",
3
+ "version": "1.16.1-dev-labs.3",
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.13.1-dev-labs.1",
35
- "start-slicemachine": "^0.11.10-dev-labs.1"
34
+ "@slicemachine/manager": "^0.13.1-dev-labs.3",
35
+ "start-slicemachine": "^0.11.10-dev-labs.3"
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": "532179075ac78df57a8381f44b23ac3ade43b88c"
133
+ "gitHead": "ee3739e38456c4a845840a9ef204f9c84c1a0112"
134
134
  }
package/pages/labs.tsx CHANGED
@@ -1,9 +1 @@
1
- import { type FC } from "react";
2
-
3
- import { LabsPage as LabsPageTemplate } from "@src/features/labs/labsTable/LabsPage";
4
-
5
- const LabsPage: FC = () => {
6
- return <LabsPageTemplate />;
7
- };
8
-
9
- export default LabsPage;
1
+ export { LabsPage as default } from "@src/features/labs/labsList/LabsPage";
@@ -10,52 +10,46 @@ import {
10
10
  writeSliceMachineConfig,
11
11
  } from "@src/hooks/useSliceMachineConfig";
12
12
 
13
- import { LabsTableItem } from "./LabsTableItem";
13
+ import { LabsListItem } from "./LabsListItem";
14
14
 
15
- export const LabsTable: FC = () => {
15
+ export const LabsList: FC = () => {
16
16
  const config = useSliceMachineConfig();
17
17
  const { openToaster } = useSliceMachineActions();
18
18
 
19
- const setLab = (
19
+ const setLab = async (
20
20
  key: keyof Required<SliceMachineConfig>["labs"],
21
- name: string
21
+ name: string,
22
+ enabled: boolean
22
23
  ) => {
23
- return async (enabled: boolean) => {
24
- try {
25
- const updatedConfig = {
26
- ...config,
27
- labs: { ...config.labs },
28
- };
24
+ const updatedConfig = { ...config, labs: { ...config.labs } };
29
25
 
30
- if (enabled) {
31
- updatedConfig.labs[key] = enabled;
32
- } else if (key in updatedConfig.labs) {
33
- delete updatedConfig.labs[key];
34
- }
26
+ if (enabled) {
27
+ updatedConfig.labs[key] = enabled;
28
+ } else if (key in updatedConfig.labs) {
29
+ delete updatedConfig.labs[key];
30
+ }
35
31
 
36
- if (Object.keys(updatedConfig.labs).length === 0) {
37
- delete (updatedConfig as SliceMachineConfig).labs;
38
- }
32
+ if (Object.keys(updatedConfig.labs).length === 0) {
33
+ delete (updatedConfig as SliceMachineConfig).labs;
34
+ }
39
35
 
40
- await writeSliceMachineConfig({ config: updatedConfig });
41
- } catch (error) {
42
- console.error(error);
43
-
44
- openToaster(
45
- enabled
46
- ? `Labs: failed to enable ${name}`
47
- : `Labs: failed to disable ${name}`,
48
- ToasterType.ERROR
49
- );
50
-
51
- return;
52
- }
36
+ try {
37
+ await writeSliceMachineConfig(updatedConfig);
53
38
 
54
39
  openToaster(
55
40
  enabled ? `Labs: enabled ${name}` : `Labs: disabled ${name}`,
56
41
  ToasterType.SUCCESS
57
42
  );
58
- };
43
+ } catch (error) {
44
+ console.error(error);
45
+
46
+ openToaster(
47
+ enabled
48
+ ? `Labs: failed to enable ${name}`
49
+ : `Labs: failed to disable ${name}`,
50
+ ToasterType.ERROR
51
+ );
52
+ }
59
53
  };
60
54
 
61
55
  return (
@@ -71,18 +65,19 @@ export const LabsTable: FC = () => {
71
65
  </Text>
72
66
  </header>
73
67
  <Box flexDirection="column" gap={16}>
74
- <LabsTableItem
68
+ <LabsListItem
75
69
  title="Legacy Slice Upgrader"
76
70
  enabled={config.labs?.legacySliceUpgrader ?? false}
77
- onToggle={setLab("legacySliceUpgrader", "Legacy Slice Upgrader")}
78
- tags={["Unstable", "Content Modeling", "Slice", "Page Builder"]}
71
+ onToggle={(enabled) =>
72
+ void setLab("legacySliceUpgrader", "Legacy Slice Upgrader", enabled)
73
+ }
79
74
  >
80
75
  The Legacy Slice Upgrader allows you to convert old slices (legacy and
81
76
  composite slices) to slices managed by Slice Machine (shared slices).
82
77
  This feature is experimental, we strongly encourage you testing it
83
- through a Prismic environments first or you'll be at risk of losing
78
+ through a Prismic environment first or you'll be at risk of losing
84
79
  past content.
85
- </LabsTableItem>
80
+ </LabsListItem>
86
81
  </Box>
87
82
  </Box>
88
83
  );
@@ -0,0 +1,36 @@
1
+ import { type FC, type PropsWithChildren } from "react";
2
+ import { Switch, Box, Card, Icon, Text } from "@prismicio/editor-ui";
3
+
4
+ type LabsListItemProps = PropsWithChildren<{
5
+ title: string;
6
+ enabled: boolean;
7
+ onToggle: (enabled: boolean) => void;
8
+ }>;
9
+
10
+ export const LabsListItem: FC<LabsListItemProps> = ({
11
+ title,
12
+ enabled,
13
+ onToggle,
14
+ children,
15
+ }) => {
16
+ return (
17
+ <Card variant="outlined" style={{ padding: 0 }}>
18
+ <Box gap={8} padding={16}>
19
+ <Box padding={{ top: 6 }}>
20
+ <Icon name="viewDay" size="medium" color="grey11" />
21
+ </Box>
22
+ <Box flexDirection="column" flexGrow={1}>
23
+ <Text variant="h3">{title}</Text>
24
+ <Text variant="normal">{children}</Text>
25
+ </Box>
26
+ <Box width={128} justifyContent="end">
27
+ <Switch
28
+ size="medium"
29
+ checked={enabled}
30
+ onCheckedChange={(checked) => onToggle(checked)}
31
+ />
32
+ </Box>
33
+ </Box>
34
+ </Card>
35
+ );
36
+ };
@@ -0,0 +1,70 @@
1
+ import { type FC, ReactNode, Suspense } from "react";
2
+ import {
3
+ ErrorBoundary,
4
+ Box,
5
+ ProgressCircle,
6
+ DefaultErrorMessage,
7
+ } from "@prismicio/editor-ui";
8
+ import Head from "next/head";
9
+
10
+ import {
11
+ AppLayout,
12
+ AppLayoutBreadcrumb,
13
+ AppLayoutContent,
14
+ AppLayoutHeader,
15
+ } from "@components/AppLayout";
16
+
17
+ import { LabsList } from "./LabsList";
18
+
19
+ export const LabsPage: FC = () => {
20
+ return (
21
+ <>
22
+ <Head>
23
+ <title>Labs - Slice Machine</title>
24
+ </Head>
25
+ <ErrorBoundary
26
+ renderError={() => (
27
+ <LabsPageLayout>
28
+ <Box alignItems="center" justifyContent="center">
29
+ <DefaultErrorMessage
30
+ title="Request failed"
31
+ description="An error occurred while fetching your labs configuration."
32
+ />
33
+ </Box>
34
+ </LabsPageLayout>
35
+ )}
36
+ >
37
+ <Suspense
38
+ fallback={
39
+ <LabsPageLayout withHeader>
40
+ <ProgressCircle />
41
+ </LabsPageLayout>
42
+ }
43
+ >
44
+ <LabsPageLayout withHeader>
45
+ <LabsList />
46
+ </LabsPageLayout>
47
+ </Suspense>
48
+ </ErrorBoundary>
49
+ </>
50
+ );
51
+ };
52
+
53
+ type LabsPageLayoutProps = {
54
+ children: ReactNode;
55
+ withHeader?: boolean;
56
+ };
57
+
58
+ const LabsPageLayout: FC<LabsPageLayoutProps> = ({
59
+ children,
60
+ withHeader = false,
61
+ }) => (
62
+ <AppLayout>
63
+ {withHeader ? (
64
+ <AppLayoutHeader>
65
+ <AppLayoutBreadcrumb folder="Labs" />
66
+ </AppLayoutHeader>
67
+ ) : null}
68
+ <AppLayoutContent>{children}</AppLayoutContent>
69
+ </AppLayout>
70
+ );
@@ -1,13 +1,13 @@
1
- import { SliceMachineConfig } from "@slicemachine/manager";
1
+ import type { SliceMachineConfig } from "@slicemachine/manager";
2
2
 
3
3
  import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
4
4
 
5
- export function useLabs(): Required<SliceMachineConfig>["labs"] {
6
- return useSliceMachineConfig().labs ?? {};
7
- }
8
-
9
5
  export function useLab(key: keyof Required<SliceMachineConfig>["labs"]): {
10
6
  enabled: boolean;
11
7
  } {
12
8
  return { enabled: useLabs()[key] ?? false };
13
9
  }
10
+
11
+ function useLabs(): Required<SliceMachineConfig>["labs"] {
12
+ return useSliceMachineConfig().labs ?? {};
13
+ }
@@ -4,7 +4,7 @@ import type { FC } from "react";
4
4
  import { type NonSharedSliceInSliceZone } from "@models/common/CustomType/sliceZone";
5
5
  import { Card, CardActions, CardFooter, CardMedia } from "@src/components/Card";
6
6
  import { getNonSharedSliceLabel } from "@src/domain/slice";
7
- import { useLab } from "@src/features/labs/labsTable/useLabs";
7
+ import { useLab } from "@src/features/labs/labsList/useLab";
8
8
 
9
9
  import { ConvertLegacySliceButton } from "../convertLegacySlice/ConvertLegacySliceButton";
10
10
 
@@ -1,4 +1,4 @@
1
- import { useRequest, revalidateData } from "@prismicio/editor-support/Suspense";
1
+ import { useRequest, updateData } from "@prismicio/editor-support/Suspense";
2
2
  import type { SliceMachineConfig } from "@slicemachine/manager";
3
3
 
4
4
  import { managerClient } from "@src/managerClient";
@@ -7,14 +7,10 @@ export function useSliceMachineConfig(): SliceMachineConfig {
7
7
  return useRequest(readSliceMachineConfig, []);
8
8
  }
9
9
 
10
- export async function writeSliceMachineConfig(args: {
11
- config: SliceMachineConfig;
12
- skipRevalidation?: boolean;
13
- }) {
14
- await managerClient.project.writeSliceMachineConfig({ config: args.config });
10
+ export async function writeSliceMachineConfig(config: SliceMachineConfig) {
11
+ await managerClient.project.writeSliceMachineConfig({ config });
15
12
 
16
- (args.skipRevalidation ?? false) ||
17
- revalidateData(readSliceMachineConfig, []);
13
+ updateData(readSliceMachineConfig, [], config);
18
14
  }
19
15
 
20
16
  async function readSliceMachineConfig(): Promise<SliceMachineConfig> {
@@ -1 +0,0 @@
1
- (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[274],{41535:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/labs",function(){return r(48607)}])},48607:function(e,n,r){"use strict";r.r(n),r.d(n,{default:function(){return y}});var i=r(52322),t=r(2784),s=r(71651),l=r(97729),a=r.n(l),c=r(25251),o=r(22710),u=r(62230),d=r(85244),h=r(99267),x=r(90374),f=r(57282),g=r(19334),j=function(e){var n,r=e.title,t=e.enabled,l=e.onToggle,a=e.tags,c=e.children;return(0,i.jsxs)(s.Zb,{variant:"outlined",style:{padding:0},children:[(0,i.jsxs)(s.xu,{gap:8,padding:16,children:[(0,i.jsx)(s.xu,{padding:{top:6},children:(0,i.jsx)(s.I5,{name:"viewDay",size:"medium",color:"grey11"})}),(0,i.jsxs)(s.xu,{flexDirection:"column",flexGrow:1,children:[(0,i.jsx)(s.xv,{variant:"h3",children:r}),(0,i.jsx)(s.xv,{variant:"normal",children:c})]}),(0,i.jsx)(s.xu,{width:128,justifyContent:"end",children:(0,i.jsx)(s.rs,{size:"medium",checked:t,onCheckedChange:function(e){l(e)}})})]}),(null!==(n=null==a?void 0:a.length)&&void 0!==n?n:0)?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.Z0,{}),(0,i.jsxs)(s.xu,{alignItems:"center",gap:4,padding:{inline:16,block:12},children:[(0,i.jsx)(s.I5,{name:"label",size:"small",color:"grey11"}),(0,i.jsx)(s.xv,{variant:"small",color:"grey11",children:"Tags:"}),(0,i.jsx)(s.xu,{gap:8,children:null==a?void 0:a.map(function(e){return(0,i.jsx)(s.Ct,{size:"medium",title:e},e)})})]})]}):null]})},p=function(){var e,n,r,t,l,a=(0,g.f)(),c=(0,x.Z)().openToaster;return(0,i.jsxs)(s.xu,{flexDirection:"column",gap:32,children:[(0,i.jsxs)("header",{children:[(0,i.jsx)(s.xv,{variant:"normal",children:"Slice Machine Labs gives you early access to new features before they're available to everyone."}),(0,i.jsx)(s.xv,{variant:"normal",children:"Experimental features are works-in-progress and unstable, so you may find some bugs along the way."})]}),(0,i.jsx)(s.xu,{flexDirection:"column",gap:16,children:(0,i.jsx)(j,{title:"Legacy Slice Upgrader",enabled:null!==(n=null===(e=a.labs)||void 0===e?void 0:e.legacySliceUpgrader)&&void 0!==n&&n,onToggle:(r="legacySliceUpgrader",t="Legacy Slice Upgrader",l=(0,o.Z)(function(e){var n,i;return(0,h.__generator)(this,function(s){switch(s.label){case 0:return s.trys.push([0,2,,3]),n=(0,d.Z)((0,u.Z)({},a),{labs:(0,u.Z)({},a.labs)}),e?n.labs[r]=e:r in n.labs&&delete n.labs[r],0===Object.keys(n.labs).length&&delete n.labs,[4,(0,g.O)({config:n})];case 1:return s.sent(),[3,3];case 2:return i=s.sent(),console.error(i),c(e?"Labs: failed to enable ".concat(t):"Labs: failed to disable ".concat(t),f.Jf.ERROR),[2];case 3:return c(e?"Labs: enabled ".concat(t):"Labs: disabled ".concat(t),f.Jf.SUCCESS),[2]}})}),function(e){return l.apply(this,arguments)}),tags:["Unstable","Content Modeling","Slice","Page Builder"],children:"The Legacy Slice Upgrader allows you to convert old slices (legacy and composite slices) to slices managed by Slice Machine (shared slices). This feature is experimental, we strongly encourage you testing it through a Prismic environments first or you'll be at risk of losing past content."})})]})},b=function(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a(),{children:(0,i.jsx)("title",{children:"Labs - Slice Machine"})}),(0,i.jsx)(s.SV,{renderError:function(){return(0,i.jsx)(c.LN,{children:(0,i.jsx)(c.RN,{children:(0,i.jsx)(s.xu,{alignItems:"center",justifyContent:"center",children:(0,i.jsx)(s.Iq,{title:"Request failed",description:"An error occurred while fetching your labs configuration."})})})})},children:(0,i.jsx)(t.Suspense,{fallback:(0,i.jsxs)(c.LN,{children:[(0,i.jsx)(c.wd,{children:(0,i.jsx)(c.Cx,{folder:"Labs"})}),(0,i.jsx)(c.RN,{children:(0,i.jsx)(s._3,{})})]}),children:(0,i.jsxs)(c.LN,{children:[(0,i.jsx)(c.wd,{children:(0,i.jsx)(c.Cx,{folder:"Labs"})}),(0,i.jsx)(c.RN,{children:(0,i.jsx)(p,{})})]})})})]})},y=function(){return(0,i.jsx)(b,{})}},19334:function(e,n,r){"use strict";r.d(n,{O:function(){return c},f:function(){return a}});var i=r(22710),t=r(99267),s=r(17329),l=r(40147);function a(){return(0,s.QT)(u,[])}function c(e){return o.apply(this,arguments)}function o(){return(o=(0,i.Z)(function(e){var n;return(0,t.__generator)(this,function(r){switch(r.label){case 0:return[4,l.j.project.writeSliceMachineConfig({config:e.config})];case 1:return r.sent(),null!==(n=e.skipRevalidation)&&void 0!==n&&n||(0,s.gw)(u,[]),[2]}})})).apply(this,arguments)}function u(){return d.apply(this,arguments)}function d(){return(d=(0,i.Z)(function(){return(0,t.__generator)(this,function(e){return[2,l.j.project.getSliceMachineConfig()]})})).apply(this,arguments)}}},function(e){e.O(0,[774,888,179],function(){return e(e.s=41535)}),_N_E=e.O()}]);
@@ -1,63 +0,0 @@
1
- import { type FC, Suspense } from "react";
2
- import {
3
- ErrorBoundary,
4
- Box,
5
- ProgressCircle,
6
- DefaultErrorMessage,
7
- } from "@prismicio/editor-ui";
8
- import Head from "next/head";
9
-
10
- import {
11
- AppLayout,
12
- AppLayoutBreadcrumb,
13
- AppLayoutContent,
14
- AppLayoutHeader,
15
- } from "@components/AppLayout";
16
-
17
- import { LabsTable } from "./LabsTable";
18
-
19
- export const LabsPage: FC = () => {
20
- return (
21
- <>
22
- <Head>
23
- <title>Labs - Slice Machine</title>
24
- </Head>
25
- <ErrorBoundary
26
- renderError={() => (
27
- <AppLayout>
28
- <AppLayoutContent>
29
- <Box alignItems="center" justifyContent="center">
30
- <DefaultErrorMessage
31
- title="Request failed"
32
- description={`An error occurred while fetching your labs configuration.`}
33
- />
34
- </Box>
35
- </AppLayoutContent>
36
- </AppLayout>
37
- )}
38
- >
39
- <Suspense
40
- fallback={
41
- <AppLayout>
42
- <AppLayoutHeader>
43
- <AppLayoutBreadcrumb folder="Labs" />
44
- </AppLayoutHeader>
45
- <AppLayoutContent>
46
- <ProgressCircle />
47
- </AppLayoutContent>
48
- </AppLayout>
49
- }
50
- >
51
- <AppLayout>
52
- <AppLayoutHeader>
53
- <AppLayoutBreadcrumb folder="Labs" />
54
- </AppLayoutHeader>
55
- <AppLayoutContent>
56
- <LabsTable />
57
- </AppLayoutContent>
58
- </AppLayout>
59
- </Suspense>
60
- </ErrorBoundary>
61
- </>
62
- );
63
- };
@@ -1,62 +0,0 @@
1
- import { type FC, type PropsWithChildren } from "react";
2
- import {
3
- Badge,
4
- Switch,
5
- Box,
6
- Card,
7
- Icon,
8
- Separator,
9
- Text,
10
- } from "@prismicio/editor-ui";
11
-
12
- type LabsTableItemProps = PropsWithChildren<{
13
- title: string;
14
- enabled: boolean;
15
- onToggle: (enabled: boolean) => Promise<void> | void;
16
- tags?: string[];
17
- }>;
18
-
19
- export const LabsTableItem: FC<LabsTableItemProps> = ({
20
- title,
21
- enabled,
22
- onToggle,
23
- tags,
24
- children,
25
- }) => {
26
- return (
27
- <Card variant="outlined" style={{ padding: 0 }}>
28
- <Box gap={8} padding={16}>
29
- <Box padding={{ top: 6 }}>
30
- <Icon name="viewDay" size="medium" color="grey11" />
31
- </Box>
32
- <Box flexDirection="column" flexGrow={1}>
33
- <Text variant="h3">{title}</Text>
34
- <Text variant="normal">{children}</Text>
35
- </Box>
36
- <Box width={128} justifyContent="end">
37
- <Switch
38
- size="medium"
39
- checked={enabled}
40
- onCheckedChange={(checked) => void onToggle(checked)}
41
- />
42
- </Box>
43
- </Box>
44
- {tags?.length ?? 0 ? (
45
- <>
46
- <Separator />
47
- <Box alignItems="center" gap={4} padding={{ inline: 16, block: 12 }}>
48
- <Icon name="label" size="small" color="grey11" />
49
- <Text variant="small" color="grey11">
50
- Tags:
51
- </Text>
52
- <Box gap={8}>
53
- {tags?.map((tag) => (
54
- <Badge size="medium" key={tag} title={tag} />
55
- ))}
56
- </Box>
57
- </Box>
58
- </>
59
- ) : null}
60
- </Card>
61
- );
62
- };