slice-machine-ui 1.16.0 → 1.16.1-dev-upgrade-legacy-2.2
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/components/Forms/ConvertLegacySliceModal/ConvertLegacySliceModal.css.ts +35 -0
- package/components/Forms/ConvertLegacySliceModal/ConvertLegacySliceModal.tsx +295 -0
- package/components/Forms/ConvertLegacySliceModal/FormAsNewSlice.tsx +153 -0
- package/components/Forms/ConvertLegacySliceModal/FormAsNewVariation.tsx +234 -0
- package/components/Forms/ConvertLegacySliceModal/FormMergeWithIdentical.tsx +104 -0
- package/components/Forms/ConvertLegacySliceModal/index.tsx +1 -0
- package/components/Forms/ConvertLegacySliceModal/types.ts +48 -0
- package/lib/builders/CustomTypeBuilder/SliceZone/List.tsx +12 -7
- package/lib/builders/CustomTypeBuilder/SliceZone/index.tsx +10 -1
- package/out/404.html +1 -1
- package/out/[lib]/[sliceName]/[variation]/screenshot.html +1 -1
- package/out/[lib]/[sliceName]/[variation]/simulator.html +1 -1
- package/out/[lib]/[sliceName]/[variation].html +1 -1
- package/out/_next/static/{01TcH3t7vRO19qKqSjp5t → ERajXsW0rmM1eiFC9OrRN}/_buildManifest.js +1 -1
- package/out/_next/static/chunks/{125-84464edfe25651eb.js → 521-7d6a8c036ebc8ed7.js} +2 -2
- package/out/_next/static/chunks/{590-4bd4178a5452a02c.js → 590-fa9970ac3f1d9c1e.js} +1 -1
- package/out/_next/static/chunks/792-642ab5cdb981cc31.js +1 -0
- package/out/_next/static/chunks/pages/{_app-e72fbea2a8ecb363.js → _app-da0f1b0fa49ba1ba.js} +5 -5
- package/out/_next/static/chunks/pages/custom-types/{[customTypeId]-1baa6af0ddf0ab6b.js → [customTypeId]-9d0629783340bfd7.js} +1 -1
- package/out/_next/static/chunks/pages/page-types/{[pageTypeId]-708b782db680b804.js → [pageTypeId]-48d0d43500b8cc5d.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/page-types/[pageTypeId].html +1 -1
- package/out/slices.html +1 -1
- package/package.json +4 -4
- package/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx +16 -4
- package/out/_next/static/chunks/14-110c9b65156d5536.js +0 -1
- /package/out/_next/static/{01TcH3t7vRO19qKqSjp5t → ERajXsW0rmM1eiFC9OrRN}/_ssgManifest.js +0 -0
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
import { Formik } from "formik";
|
|
3
|
+
import {
|
|
4
|
+
Dialog,
|
|
5
|
+
DialogActions,
|
|
6
|
+
DialogContent,
|
|
7
|
+
DialogHeader,
|
|
8
|
+
ScrollArea,
|
|
9
|
+
FormInput,
|
|
10
|
+
Text,
|
|
11
|
+
Select,
|
|
12
|
+
SelectItem,
|
|
13
|
+
} from "@prismicio/editor-ui";
|
|
14
|
+
|
|
15
|
+
import { Variation } from "@models/common/Variation";
|
|
16
|
+
import { LibraryUI } from "@models/common/LibraryUI";
|
|
17
|
+
|
|
18
|
+
import * as styles from "./ConvertLegacySliceModal.css";
|
|
19
|
+
import { FormProps } from "./types";
|
|
20
|
+
|
|
21
|
+
type FormValues = {
|
|
22
|
+
libraryID: string;
|
|
23
|
+
sliceID: string;
|
|
24
|
+
variationID: string;
|
|
25
|
+
variationName: string;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const validateAsNewVariationValues = (
|
|
29
|
+
values: FormValues,
|
|
30
|
+
libraries: readonly LibraryUI[]
|
|
31
|
+
): Partial<Record<keyof FormValues, string>> => {
|
|
32
|
+
const errors: Partial<Record<keyof FormValues, string>> = {};
|
|
33
|
+
|
|
34
|
+
if (!values.libraryID) {
|
|
35
|
+
errors.libraryID = "Cannot be empty.";
|
|
36
|
+
}
|
|
37
|
+
const library = libraries.find(
|
|
38
|
+
(library) => library.path === values.libraryID
|
|
39
|
+
);
|
|
40
|
+
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
41
|
+
if (!errors.libraryID && !library) {
|
|
42
|
+
errors.libraryID = "Does not exists.";
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (!values.sliceID) {
|
|
46
|
+
errors.sliceID = "Cannot be empty.";
|
|
47
|
+
}
|
|
48
|
+
const slice = library?.components.find(
|
|
49
|
+
(component) => component.model.id === values.sliceID
|
|
50
|
+
);
|
|
51
|
+
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
52
|
+
if (!errors.sliceID && !slice) {
|
|
53
|
+
errors.sliceID = "Does not exists.";
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
if (!values.variationName) {
|
|
57
|
+
errors.variationName = "Cannot be empty.";
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if (!values.variationID) {
|
|
61
|
+
errors.variationID = "Cannot be empty.";
|
|
62
|
+
} else {
|
|
63
|
+
const variationIDs =
|
|
64
|
+
slice?.model.variations.map((variation) => variation.id) ?? [];
|
|
65
|
+
|
|
66
|
+
if (variationIDs.includes(values.variationID)) {
|
|
67
|
+
errors.variationID = "Slice variation ID is already taken.";
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return errors;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export const FormAsNewVariation: React.FC<FormProps> = ({
|
|
75
|
+
isOpen,
|
|
76
|
+
close,
|
|
77
|
+
onSubmit,
|
|
78
|
+
isLoading,
|
|
79
|
+
slice,
|
|
80
|
+
sliceName,
|
|
81
|
+
libraries,
|
|
82
|
+
localSharedSlices,
|
|
83
|
+
}) => {
|
|
84
|
+
const [inferIDFromName, setInferIDFromName] = useState(true);
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<Dialog
|
|
88
|
+
open={isOpen}
|
|
89
|
+
onOpenChange={(open) => !open && close()}
|
|
90
|
+
size={{ width: 448, height: "auto" }}
|
|
91
|
+
>
|
|
92
|
+
<DialogHeader title="Convert to slice variation" />
|
|
93
|
+
<DialogContent>
|
|
94
|
+
<Formik
|
|
95
|
+
validateOnChange
|
|
96
|
+
initialValues={{
|
|
97
|
+
libraryID: localSharedSlices[0]?.from,
|
|
98
|
+
sliceID: localSharedSlices[0]?.model.id,
|
|
99
|
+
variationID: Variation.generateId(slice.key),
|
|
100
|
+
variationName: sliceName,
|
|
101
|
+
}}
|
|
102
|
+
validate={(values) => {
|
|
103
|
+
return validateAsNewVariationValues(values, libraries);
|
|
104
|
+
}}
|
|
105
|
+
onSubmit={(values) => {
|
|
106
|
+
onSubmit(values);
|
|
107
|
+
}}
|
|
108
|
+
>
|
|
109
|
+
{(formik) => {
|
|
110
|
+
return (
|
|
111
|
+
<form
|
|
112
|
+
id="convert-legacy-slice-modal-as-new-variation"
|
|
113
|
+
data-cy="convert-legacy-slice-modal-as-new-variation"
|
|
114
|
+
className={styles.form}
|
|
115
|
+
>
|
|
116
|
+
<ScrollArea className={styles.scrollArea}>
|
|
117
|
+
<Text variant="normal" color="grey11">
|
|
118
|
+
If you have multiple slices that are similar, you can
|
|
119
|
+
combine them as variations of the same slice.
|
|
120
|
+
</Text>
|
|
121
|
+
<div className={styles.field}>
|
|
122
|
+
<label className={styles.label}>
|
|
123
|
+
<Text variant="bold">Target slice*</Text>
|
|
124
|
+
{typeof formik.errors.libraryID === "string" ? (
|
|
125
|
+
<Text variant="small" color="tomato10">
|
|
126
|
+
{formik.errors.libraryID}
|
|
127
|
+
</Text>
|
|
128
|
+
) : null}
|
|
129
|
+
{typeof formik.errors.sliceID === "string" ? (
|
|
130
|
+
<Text variant="small" color="tomato10">
|
|
131
|
+
{formik.errors.sliceID}
|
|
132
|
+
</Text>
|
|
133
|
+
) : null}
|
|
134
|
+
</label>
|
|
135
|
+
<Select
|
|
136
|
+
size="medium"
|
|
137
|
+
variant="secondary"
|
|
138
|
+
startIcon="viewDay"
|
|
139
|
+
flexContent={true}
|
|
140
|
+
value={`${formik.values.libraryID}::${formik.values.sliceID}`}
|
|
141
|
+
onValueChange={(value) => {
|
|
142
|
+
if (value) {
|
|
143
|
+
const [libraryID, sliceID] = value.split("::");
|
|
144
|
+
void formik.setFieldValue("libraryID", libraryID);
|
|
145
|
+
void formik.setFieldValue("sliceID", sliceID);
|
|
146
|
+
}
|
|
147
|
+
}}
|
|
148
|
+
>
|
|
149
|
+
{localSharedSlices.map((slice) => (
|
|
150
|
+
<SelectItem
|
|
151
|
+
key={`${slice.from}::${slice.model.id}`}
|
|
152
|
+
value={`${slice.from}::${slice.model.id}`}
|
|
153
|
+
>
|
|
154
|
+
{slice.from} {">"} {slice.model.name} (
|
|
155
|
+
{slice.model.id})
|
|
156
|
+
</SelectItem>
|
|
157
|
+
))}
|
|
158
|
+
</Select>
|
|
159
|
+
<Text variant="normal" color="grey11">
|
|
160
|
+
Choose the slice to which you would like to add this
|
|
161
|
+
variation.
|
|
162
|
+
</Text>
|
|
163
|
+
</div>
|
|
164
|
+
<div className={styles.field}>
|
|
165
|
+
<label className={styles.label}>
|
|
166
|
+
<Text variant="bold">Variation name*</Text>
|
|
167
|
+
{typeof formik.errors.variationName === "string" ? (
|
|
168
|
+
<Text variant="small" color="tomato10">
|
|
169
|
+
{formik.errors.variationName}
|
|
170
|
+
</Text>
|
|
171
|
+
) : null}
|
|
172
|
+
</label>
|
|
173
|
+
<FormInput
|
|
174
|
+
placeholder={sliceName}
|
|
175
|
+
error={typeof formik.errors.variationName === "string"}
|
|
176
|
+
value={formik.values.variationName}
|
|
177
|
+
onValueChange={(value) => {
|
|
178
|
+
const values = {
|
|
179
|
+
...formik.values,
|
|
180
|
+
variationName: value.slice(0, 30),
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
if (inferIDFromName) {
|
|
184
|
+
values.variationID = Variation.generateId(
|
|
185
|
+
values.variationName
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
formik.setValues(values, true);
|
|
190
|
+
}}
|
|
191
|
+
data-cy="variation-name-input"
|
|
192
|
+
/>
|
|
193
|
+
</div>
|
|
194
|
+
<div className={styles.field}>
|
|
195
|
+
<label className={styles.label}>
|
|
196
|
+
<Text variant="bold">ID*</Text>
|
|
197
|
+
{typeof formik.errors.variationID === "string" ? (
|
|
198
|
+
<Text variant="small" color="tomato10">
|
|
199
|
+
{formik.errors.variationID}
|
|
200
|
+
</Text>
|
|
201
|
+
) : null}
|
|
202
|
+
</label>
|
|
203
|
+
<FormInput
|
|
204
|
+
placeholder={Variation.generateId(slice.key)}
|
|
205
|
+
error={typeof formik.errors.variationID === "string"}
|
|
206
|
+
value={formik.values.variationID}
|
|
207
|
+
onValueChange={(value) => {
|
|
208
|
+
setInferIDFromName(false);
|
|
209
|
+
void formik.setFieldValue(
|
|
210
|
+
"variationID",
|
|
211
|
+
Variation.generateId(value.slice(0, 30))
|
|
212
|
+
);
|
|
213
|
+
}}
|
|
214
|
+
data-cy="variation-id-input"
|
|
215
|
+
/>
|
|
216
|
+
</div>
|
|
217
|
+
</ScrollArea>
|
|
218
|
+
<DialogActions
|
|
219
|
+
ok={{
|
|
220
|
+
text: "Convert",
|
|
221
|
+
onClick: () => void formik.submitForm(),
|
|
222
|
+
loading: isLoading,
|
|
223
|
+
disabled: !formik.isValid,
|
|
224
|
+
}}
|
|
225
|
+
cancel={{ text: "Cancel" }}
|
|
226
|
+
/>
|
|
227
|
+
</form>
|
|
228
|
+
);
|
|
229
|
+
}}
|
|
230
|
+
</Formik>
|
|
231
|
+
</DialogContent>
|
|
232
|
+
</Dialog>
|
|
233
|
+
);
|
|
234
|
+
};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { Formik } from "formik";
|
|
2
|
+
import {
|
|
3
|
+
Dialog,
|
|
4
|
+
DialogActions,
|
|
5
|
+
DialogContent,
|
|
6
|
+
DialogHeader,
|
|
7
|
+
ScrollArea,
|
|
8
|
+
Text,
|
|
9
|
+
Select,
|
|
10
|
+
SelectItem,
|
|
11
|
+
} from "@prismicio/editor-ui";
|
|
12
|
+
|
|
13
|
+
import * as styles from "./ConvertLegacySliceModal.css";
|
|
14
|
+
import { FormProps } from "./types";
|
|
15
|
+
|
|
16
|
+
export const FormMergeWithIdentical: React.FC<FormProps> = ({
|
|
17
|
+
isOpen,
|
|
18
|
+
close,
|
|
19
|
+
onSubmit,
|
|
20
|
+
isLoading,
|
|
21
|
+
identicalSlices,
|
|
22
|
+
}) => {
|
|
23
|
+
return (
|
|
24
|
+
<Dialog
|
|
25
|
+
open={isOpen}
|
|
26
|
+
onOpenChange={(open) => !open && close()}
|
|
27
|
+
size={{ width: 448, height: "auto" }}
|
|
28
|
+
>
|
|
29
|
+
<DialogHeader title="Merge with an existing slice" />
|
|
30
|
+
<DialogContent>
|
|
31
|
+
<Formik
|
|
32
|
+
validateOnChange
|
|
33
|
+
initialValues={{
|
|
34
|
+
path: identicalSlices[0]?.path ?? "",
|
|
35
|
+
}}
|
|
36
|
+
validate={(values) => {
|
|
37
|
+
if (!values.path) {
|
|
38
|
+
return { path: "Cannot be empty." };
|
|
39
|
+
}
|
|
40
|
+
}}
|
|
41
|
+
onSubmit={(values) => {
|
|
42
|
+
const [libraryID, sliceID, variationID] = values.path.split("::");
|
|
43
|
+
onSubmit({ libraryID, sliceID, variationID });
|
|
44
|
+
}}
|
|
45
|
+
>
|
|
46
|
+
{(formik) => {
|
|
47
|
+
return (
|
|
48
|
+
<form
|
|
49
|
+
id="convert-legacy-slice-modal-merge-with-identical"
|
|
50
|
+
data-cy="convert-legacy-slice-modal-merge-with-identical"
|
|
51
|
+
className={styles.form}
|
|
52
|
+
>
|
|
53
|
+
<ScrollArea className={styles.scrollArea}>
|
|
54
|
+
<Text variant="normal" color="grey11">
|
|
55
|
+
If you have multiple identical slices, you can merge them.
|
|
56
|
+
All of your content will be remapped to the target slice.
|
|
57
|
+
</Text>
|
|
58
|
+
<div className={styles.field}>
|
|
59
|
+
<label className={styles.label}>
|
|
60
|
+
<Text variant="bold">Target slice*</Text>
|
|
61
|
+
{typeof formik.errors.path === "string" ? (
|
|
62
|
+
<Text variant="small" color="tomato10">
|
|
63
|
+
{formik.errors.path}
|
|
64
|
+
</Text>
|
|
65
|
+
) : null}
|
|
66
|
+
</label>
|
|
67
|
+
<Select
|
|
68
|
+
size="medium"
|
|
69
|
+
variant="secondary"
|
|
70
|
+
startIcon="viewDay"
|
|
71
|
+
flexContent={true}
|
|
72
|
+
value={formik.values.path}
|
|
73
|
+
onValueChange={(value) => {
|
|
74
|
+
value ? void formik.setFieldValue("path", value) : null;
|
|
75
|
+
}}
|
|
76
|
+
>
|
|
77
|
+
{identicalSlices.map((slice) => (
|
|
78
|
+
<SelectItem key={slice.path} value={slice.path}>
|
|
79
|
+
{slice.path.split("::").join(" > ")}
|
|
80
|
+
</SelectItem>
|
|
81
|
+
))}
|
|
82
|
+
</Select>
|
|
83
|
+
<Text variant="normal" color="grey11">
|
|
84
|
+
Choose a slice that you would like to merge this into.
|
|
85
|
+
</Text>
|
|
86
|
+
</div>
|
|
87
|
+
</ScrollArea>
|
|
88
|
+
<DialogActions
|
|
89
|
+
ok={{
|
|
90
|
+
text: "Merge",
|
|
91
|
+
onClick: () => void formik.submitForm(),
|
|
92
|
+
loading: isLoading,
|
|
93
|
+
disabled: !formik.isValid,
|
|
94
|
+
}}
|
|
95
|
+
cancel={{ text: "Cancel" }}
|
|
96
|
+
/>
|
|
97
|
+
</form>
|
|
98
|
+
);
|
|
99
|
+
}}
|
|
100
|
+
</Formik>
|
|
101
|
+
</DialogContent>
|
|
102
|
+
</Dialog>
|
|
103
|
+
);
|
|
104
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ConvertLegacySliceModal } from "./ConvertLegacySliceModal";
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CompositeSlice,
|
|
3
|
+
LegacySlice,
|
|
4
|
+
} from "@prismicio/types-internal/lib/customtypes";
|
|
5
|
+
|
|
6
|
+
import { LibraryUI } from "@models/common/LibraryUI";
|
|
7
|
+
import { ComponentUI } from "@models/common/ComponentUI";
|
|
8
|
+
|
|
9
|
+
export type ConvertLegacySliceModalProps = {
|
|
10
|
+
slice: { key: string; value: CompositeSlice | LegacySlice };
|
|
11
|
+
path: {
|
|
12
|
+
customTypeID: string;
|
|
13
|
+
tabID: string;
|
|
14
|
+
sliceZoneID: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export type ConvertLegacySliceAndTrackArgs = {
|
|
19
|
+
libraryID: string;
|
|
20
|
+
sliceID: string;
|
|
21
|
+
variationID?: string;
|
|
22
|
+
variationName?: string;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const types = [
|
|
26
|
+
"as_new_slice",
|
|
27
|
+
"as_new_variation",
|
|
28
|
+
"merge_with_identical",
|
|
29
|
+
] as const;
|
|
30
|
+
export type Type = (typeof types)[number];
|
|
31
|
+
|
|
32
|
+
export type IdenticalSlice = {
|
|
33
|
+
libraryID: string;
|
|
34
|
+
sliceID: string;
|
|
35
|
+
variationID: string;
|
|
36
|
+
path: string;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export type FormProps = {
|
|
40
|
+
isOpen: boolean;
|
|
41
|
+
close: () => void;
|
|
42
|
+
onSubmit: (args: ConvertLegacySliceAndTrackArgs) => void;
|
|
43
|
+
isLoading: boolean;
|
|
44
|
+
sliceName: string;
|
|
45
|
+
libraries: readonly LibraryUI[];
|
|
46
|
+
localSharedSlices: ComponentUI[];
|
|
47
|
+
identicalSlices: IdenticalSlice[];
|
|
48
|
+
} & Pick<ConvertLegacySliceModalProps, "path" | "slice">;
|
|
@@ -16,12 +16,18 @@ import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSlice
|
|
|
16
16
|
interface SlicesListProps {
|
|
17
17
|
format: CustomTypeFormat;
|
|
18
18
|
slices: ReadonlyArray<SliceZoneSlice>;
|
|
19
|
+
path: {
|
|
20
|
+
customTypeID: string;
|
|
21
|
+
tabID: string;
|
|
22
|
+
sliceZoneID: string;
|
|
23
|
+
};
|
|
19
24
|
onRemoveSharedSlice: (sliceId: string) => void;
|
|
20
25
|
}
|
|
21
26
|
|
|
22
27
|
export const SlicesList: React.FC<SlicesListProps> = ({
|
|
23
28
|
slices,
|
|
24
29
|
format,
|
|
30
|
+
path,
|
|
25
31
|
onRemoveSharedSlice,
|
|
26
32
|
}) => {
|
|
27
33
|
const hasLegacySlices = slices.some((slice) => slice.type !== "SharedSlice");
|
|
@@ -35,8 +41,8 @@ export const SlicesList: React.FC<SlicesListProps> = ({
|
|
|
35
41
|
`This ${customTypesMessages.name({
|
|
36
42
|
start: false,
|
|
37
43
|
plural: false,
|
|
38
|
-
})} contains
|
|
39
|
-
ToasterType.
|
|
44
|
+
})} contains legacy slices that can be upgraded.`,
|
|
45
|
+
ToasterType.INFO
|
|
40
46
|
);
|
|
41
47
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
42
48
|
}, [hasLegacySlices]);
|
|
@@ -45,15 +51,14 @@ export const SlicesList: React.FC<SlicesListProps> = ({
|
|
|
45
51
|
<Grid
|
|
46
52
|
elems={slices}
|
|
47
53
|
defineElementKey={(slice) =>
|
|
48
|
-
slice.type
|
|
54
|
+
slice.type !== "SharedSlice"
|
|
49
55
|
? (slice.payload as NonSharedSliceInSliceZone).key
|
|
50
56
|
: (slice.payload as ComponentUI).model.name
|
|
51
57
|
}
|
|
52
58
|
renderElem={(slice) => {
|
|
53
|
-
if (slice.type
|
|
54
|
-
const nonSharedSlice =
|
|
55
|
-
|
|
56
|
-
return <NonSharedSliceViewCard slice={nonSharedSlice} />;
|
|
59
|
+
if (slice.type !== "SharedSlice") {
|
|
60
|
+
const nonSharedSlice = slice.payload as NonSharedSliceInSliceZone;
|
|
61
|
+
return <NonSharedSliceViewCard slice={nonSharedSlice} path={path} />;
|
|
57
62
|
} else {
|
|
58
63
|
const sharedSlice = slice.payload as ComponentUI;
|
|
59
64
|
return (
|
|
@@ -76,7 +76,7 @@ const mapAvailableAndSharedSlices = (
|
|
|
76
76
|
return { ...acc, notFound: [...acc.notFound, { key }] };
|
|
77
77
|
}
|
|
78
78
|
// Legacy Slice
|
|
79
|
-
else if (value.type === "
|
|
79
|
+
else if (typeof value.type === "string") {
|
|
80
80
|
return {
|
|
81
81
|
...acc,
|
|
82
82
|
slicesInSliceZone: [
|
|
@@ -154,6 +154,14 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
154
154
|
.filter((e) => e.type === "SharedSlice")
|
|
155
155
|
.map((e) => e.payload) as ReadonlyArray<ComponentUI>;
|
|
156
156
|
|
|
157
|
+
/* Preserve these keys in SliceZone */
|
|
158
|
+
const path = useMemo(() => {
|
|
159
|
+
return {
|
|
160
|
+
customTypeID: customType.id,
|
|
161
|
+
tabID: tabId,
|
|
162
|
+
sliceZoneID: sliceZone?.key as string,
|
|
163
|
+
};
|
|
164
|
+
}, [customType, tabId, sliceZone]);
|
|
157
165
|
const availableSlicesToAdd = availableSlices.filter(
|
|
158
166
|
(slice) =>
|
|
159
167
|
!sharedSlicesInSliceZone.some(
|
|
@@ -284,6 +292,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
284
292
|
<SlicesList
|
|
285
293
|
slices={slicesInSliceZone}
|
|
286
294
|
format={customType.format}
|
|
295
|
+
path={path}
|
|
287
296
|
onRemoveSharedSlice={onRemoveSharedSlice}
|
|
288
297
|
/>
|
|
289
298
|
</BaseStyles>
|
package/out/404.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=""/><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"/><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=""/><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-da0f1b0fa49ba1ba.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/ERajXsW0rmM1eiFC9OrRN/_buildManifest.js" defer=""></script><script src="/_next/static/ERajXsW0rmM1eiFC9OrRN/_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":{"statusCode":404}},"page":"/_error","query":{},"buildId":"ERajXsW0rmM1eiFC9OrRN","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>
|
|
@@ -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=""/><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"/><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=""/><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-da0f1b0fa49ba1ba.js" defer=""></script><script src="/_next/static/chunks/746-2ca4784811bde7c1.js" defer=""></script><script src="/_next/static/chunks/pages/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/screenshot-2750adc7cdad5005.js" defer=""></script><script src="/_next/static/ERajXsW0rmM1eiFC9OrRN/_buildManifest.js" defer=""></script><script src="/_next/static/ERajXsW0rmM1eiFC9OrRN/_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":"/[lib]/[sliceName]/[variation]/screenshot","query":{},"buildId":"ERajXsW0rmM1eiFC9OrRN","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
|
|
@@ -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=""/><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"/><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=""/><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-da0f1b0fa49ba1ba.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-1bb05c8aa7db2bc2.js" defer=""></script><script src="/_next/static/chunks/746-2ca4784811bde7c1.js" defer=""></script><script src="/_next/static/chunks/909-e4eec905c21ad8ad.js" defer=""></script><script src="/_next/static/chunks/113-34b6cf41a62f08ce.js" defer=""></script><script src="/_next/static/chunks/pages/%5Blib%5D/%5BsliceName%5D/%5Bvariation%5D/simulator-47ba090193469e3f.js" defer=""></script><script src="/_next/static/ERajXsW0rmM1eiFC9OrRN/_buildManifest.js" defer=""></script><script src="/_next/static/ERajXsW0rmM1eiFC9OrRN/_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":"/[lib]/[sliceName]/[variation]/simulator","query":{},"buildId":"ERajXsW0rmM1eiFC9OrRN","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
|