slice-machine-ui 2.20.5-alpha.jp-import-slice-base.2 → 2.20.5-alpha.jp-import-slices-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/out/404.html +1 -1
- package/out/_next/static/-Yjs5UmgvuB8nY3BLb3TK/_buildManifest.js +1 -0
- package/out/_next/static/chunks/21-f3962d02eda0a46e.js +1 -0
- package/out/_next/static/chunks/{248-84a5987f0499b074.js → 248-2902bda47821f37b.js} +1 -1
- package/out/_next/static/chunks/{630-2bf927bca082a191.js → 630-4fe1e982234bd925.js} +1 -1
- package/out/_next/static/chunks/633-2d20c3e815c79c7f.js +1 -0
- package/out/_next/static/chunks/{647-aa094286bc248d52.js → 647-a29bee23cb9ac7a2.js} +1 -1
- package/out/_next/static/chunks/660-e3d7a5444ab7391e.js +1 -0
- package/out/_next/static/chunks/6611d287.1714222015f895ea.js +28 -0
- package/out/_next/static/chunks/{882-48d61b2fabee28d8.js → 882-8ab59c0c72307c87.js} +1 -1
- package/out/_next/static/chunks/pages/{_app-651bb3e76e35a633.js → _app-89df34df01f52931.js} +217 -217
- package/out/_next/static/chunks/pages/{changelog-8514e0696e90a1b2.js → changelog-bc83e25e8d316ca9.js} +1 -1
- package/out/_next/static/chunks/pages/{changes-e66094f57453cf9c.js → changes-6f371ebe52dbe76a.js} +1 -1
- package/out/_next/static/chunks/pages/custom-types/{[customTypeId]-273e9a82c085b596.js → [customTypeId]-80defa14b6ea36f7.js} +1 -1
- package/out/_next/static/chunks/pages/{labs-56fd818a63553497.js → labs-16d118a80936d583.js} +1 -1
- package/out/_next/static/chunks/pages/page-types/{[pageTypeId]-3fa7667de1a790d9.js → [pageTypeId]-f4ff9ad74b44bf09.js} +1 -1
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]/{simulator-8c70298caf51bed0.js → simulator-873c0c89aaf50b3c.js} +1 -1
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/{[variation]-22ffa2561ac66557.js → [variation]-0e9aa745ed9fe1ec.js} +1 -1
- package/out/_next/static/chunks/pages/slices-93fc784c443a996c.js +1 -0
- package/out/_next/static/chunks/{webpack-24ddb02bea621501.js → webpack-e986dd216b883a74.js} +1 -1
- package/out/_next/static/css/b30fbbc3ed00a725.css +1 -0
- package/out/changelog.html +1 -1
- package/out/changes.html +1 -1
- package/out/custom-types/[customTypeId].html +1 -1
- package/out/custom-types.html +1 -1
- package/out/index.html +1 -1
- package/out/labs.html +1 -1
- package/out/page-types/[pageTypeId].html +1 -1
- package/out/slices/[lib]/[sliceName]/[variation]/simulator.html +1 -1
- package/out/slices/[lib]/[sliceName]/[variation].html +1 -1
- package/out/slices.html +1 -1
- package/package.json +6 -6
- package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/ImportSlicesFromLibraryModal.tsx +104 -285
- package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/LibrarySlicesTab.tsx +125 -0
- package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/LocalSlicesTab.tsx +67 -0
- package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/ReuseExistingSlicesContext.tsx +279 -0
- package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/hooks/useImportSlicesFromGithub.ts +7 -4
- package/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx +4 -18
- package/src/features/customTypes/customTypesBuilder/shared/getSubmitButtonLabel.ts +3 -5
- package/src/features/customTypes/customTypesBuilder/sliceCreationOptions.tsx +0 -14
- package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx +1 -3
- package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx +26 -79
- package/src/pages/slices.tsx +0 -30
- package/out/_next/static/CGK-vfrV6JByBnDLoS7iE/_buildManifest.js +0 -1
- package/out/_next/static/chunks/422-c7a16d95b75c9e1c.js +0 -1
- package/out/_next/static/chunks/489-c9535ef34da63d1a.js +0 -1
- package/out/_next/static/chunks/585-c89bb2471e85b9f8.js +0 -1
- package/out/_next/static/chunks/954-bedaaabf664584a0.js +0 -1
- package/out/_next/static/chunks/a6495ab1.00190ac98e794d8f.js +0 -28
- package/out/_next/static/chunks/pages/slices-76679cf064761d2b.js +0 -1
- package/out/_next/static/css/bc89f2cd4e4781f5.css +0 -1
- package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx +0 -72
- /package/out/_next/static/{CGK-vfrV6JByBnDLoS7iE → -Yjs5UmgvuB8nY3BLb3TK}/_ssgManifest.js +0 -0
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
|
|
2
|
+
import {
|
|
3
|
+
createContext,
|
|
4
|
+
type ReactNode,
|
|
5
|
+
useCallback,
|
|
6
|
+
useContext,
|
|
7
|
+
useRef,
|
|
8
|
+
useState,
|
|
9
|
+
} from "react";
|
|
10
|
+
import { toast } from "react-toastify";
|
|
11
|
+
|
|
12
|
+
import { getState, telemetry } from "@/apiClient";
|
|
13
|
+
import { useOnboarding } from "@/features/onboarding/useOnboarding";
|
|
14
|
+
import { useAutoSync } from "@/features/sync/AutoSyncProvider";
|
|
15
|
+
import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
|
|
16
|
+
import useSliceMachineActions from "@/modules/useSliceMachineActions";
|
|
17
|
+
|
|
18
|
+
import type { SliceImport } from "./types";
|
|
19
|
+
import { NewSlice } from "./types";
|
|
20
|
+
import { addSlices } from "./utils/addSlices";
|
|
21
|
+
import { sliceWithoutConflicts } from "./utils/sliceWithoutConflicts";
|
|
22
|
+
|
|
23
|
+
interface ReuseExistingSlicesContextValue {
|
|
24
|
+
selectedLocalSlices: ComponentUI[];
|
|
25
|
+
selectedLibrarySlices: SliceImport[];
|
|
26
|
+
toggleLocalSlice: (slice: ComponentUI) => void;
|
|
27
|
+
toggleLibrarySlice: (slice: SliceImport) => void;
|
|
28
|
+
setAllLibrarySlices: (slices: SliceImport[]) => void;
|
|
29
|
+
reset: () => void;
|
|
30
|
+
submit: (args: {
|
|
31
|
+
existingSlices: React.MutableRefObject<SharedSlice[]>;
|
|
32
|
+
location: "custom_type" | "page_type" | "slices";
|
|
33
|
+
resetSlices: () => void;
|
|
34
|
+
}) => Promise<{ slices: SharedSlice[]; library?: string }>;
|
|
35
|
+
isSubmitting: boolean;
|
|
36
|
+
totalSelected: number;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const ReuseExistingSlicesContext = createContext<
|
|
40
|
+
ReuseExistingSlicesContextValue | undefined
|
|
41
|
+
>(undefined);
|
|
42
|
+
|
|
43
|
+
interface ReuseExistingSlicesProviderProps {
|
|
44
|
+
children: ReactNode;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export function ReuseExistingSlicesProvider({
|
|
48
|
+
children,
|
|
49
|
+
}: ReuseExistingSlicesProviderProps) {
|
|
50
|
+
const [localSlices, setSelectedLocalSlices] = useState<ComponentUI[]>([]);
|
|
51
|
+
const [librarySlices, setSelectedLibrarySlices] = useState<SliceImport[]>([]);
|
|
52
|
+
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
53
|
+
|
|
54
|
+
const { syncChanges } = useAutoSync();
|
|
55
|
+
const { createSliceSuccess, updateSliceMockSuccess } =
|
|
56
|
+
useSliceMachineActions();
|
|
57
|
+
const { completeStep } = useOnboarding();
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Keeps track of the current instance id.
|
|
61
|
+
* When the modal is closed, the id is reset.
|
|
62
|
+
*/
|
|
63
|
+
const id = useRef(crypto.randomUUID());
|
|
64
|
+
|
|
65
|
+
const toggleLocalSlice = useCallback((slice: ComponentUI) => {
|
|
66
|
+
setSelectedLocalSlices((prev) => {
|
|
67
|
+
const isSelected = prev.some((s) => s.model.id === slice.model.id);
|
|
68
|
+
if (isSelected) {
|
|
69
|
+
return prev.filter((s) => s.model.id !== slice.model.id);
|
|
70
|
+
}
|
|
71
|
+
return [...prev, slice];
|
|
72
|
+
});
|
|
73
|
+
}, []);
|
|
74
|
+
|
|
75
|
+
const toggleLibrarySlice = useCallback((slice: SliceImport) => {
|
|
76
|
+
setSelectedLibrarySlices((prev) => {
|
|
77
|
+
const isSelected = prev.some((s) => s.model.id === slice.model.id);
|
|
78
|
+
if (isSelected) {
|
|
79
|
+
return prev.filter((s) => s.model.id !== slice.model.id);
|
|
80
|
+
}
|
|
81
|
+
return [...prev, slice];
|
|
82
|
+
});
|
|
83
|
+
}, []);
|
|
84
|
+
|
|
85
|
+
const setAllLibrarySlices = useCallback((slices: SliceImport[]) => {
|
|
86
|
+
setSelectedLibrarySlices(slices);
|
|
87
|
+
}, []);
|
|
88
|
+
|
|
89
|
+
const reset = useCallback(() => {
|
|
90
|
+
setSelectedLocalSlices([]);
|
|
91
|
+
setSelectedLibrarySlices([]);
|
|
92
|
+
id.current = crypto.randomUUID();
|
|
93
|
+
}, []);
|
|
94
|
+
|
|
95
|
+
const submit = useCallback(
|
|
96
|
+
async (args: {
|
|
97
|
+
existingSlices: React.MutableRefObject<SharedSlice[]>;
|
|
98
|
+
location: "custom_type" | "page_type" | "slices";
|
|
99
|
+
resetSlices: () => void;
|
|
100
|
+
}): Promise<{ slices: SharedSlice[]; library?: string }> => {
|
|
101
|
+
const { existingSlices, location, resetSlices } = args;
|
|
102
|
+
const totalSelected = localSlices.length + librarySlices.length;
|
|
103
|
+
|
|
104
|
+
if (totalSelected === 0) {
|
|
105
|
+
toast.error("Please select at least one slice");
|
|
106
|
+
throw new Error("No slices selected");
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// Prepare local slices (just extract models)
|
|
110
|
+
const localSliceModels = localSlices.map((slice) => slice.model);
|
|
111
|
+
|
|
112
|
+
// Prepare library slices for import
|
|
113
|
+
const librarySlicesToImport: NewSlice[] = librarySlices.map((slice) => ({
|
|
114
|
+
image: slice.image,
|
|
115
|
+
model: slice.model,
|
|
116
|
+
files: slice.files,
|
|
117
|
+
componentContents: slice.componentContents,
|
|
118
|
+
mocks: slice.mocks,
|
|
119
|
+
screenshots: slice.screenshots,
|
|
120
|
+
}));
|
|
121
|
+
|
|
122
|
+
// If there are library slices, create them first
|
|
123
|
+
if (librarySlicesToImport.length > 0) {
|
|
124
|
+
// Ensure ids and names are conflict-free against existing and newly-added slices
|
|
125
|
+
const conflictFreeSlices: NewSlice[] = [];
|
|
126
|
+
const allExistingSlices: SharedSlice[] = [
|
|
127
|
+
...existingSlices.current,
|
|
128
|
+
...localSliceModels,
|
|
129
|
+
] as SharedSlice[];
|
|
130
|
+
|
|
131
|
+
for (const s of librarySlicesToImport) {
|
|
132
|
+
const adjustedModel = sliceWithoutConflicts({
|
|
133
|
+
existingSlices: allExistingSlices,
|
|
134
|
+
newSlices: conflictFreeSlices,
|
|
135
|
+
slice: s.model,
|
|
136
|
+
});
|
|
137
|
+
conflictFreeSlices.push({ ...s, model: adjustedModel });
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
const currentId = id.current;
|
|
141
|
+
setIsSubmitting(true);
|
|
142
|
+
|
|
143
|
+
try {
|
|
144
|
+
const { slices: createdSlices, library } =
|
|
145
|
+
await addSlices(conflictFreeSlices);
|
|
146
|
+
|
|
147
|
+
if (currentId !== id.current) {
|
|
148
|
+
throw new Error("Modal instance changed");
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// Wait a moment to ensure all file writes are complete
|
|
152
|
+
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
153
|
+
|
|
154
|
+
const serverState = await getState();
|
|
155
|
+
|
|
156
|
+
// Ensure mocks are included in the libraries data before updating store
|
|
157
|
+
const librariesWithMocks = serverState.libraries.map((lib) => {
|
|
158
|
+
if (lib.name !== library) return lib;
|
|
159
|
+
|
|
160
|
+
return {
|
|
161
|
+
...lib,
|
|
162
|
+
components: lib.components.map((component) => {
|
|
163
|
+
// Find the corresponding slice from librarySlicesToImport to get its mocks
|
|
164
|
+
const importedSlice = conflictFreeSlices.find(
|
|
165
|
+
(s) => s.model.id === component.model.id,
|
|
166
|
+
);
|
|
167
|
+
|
|
168
|
+
// If mocks are already in component, use them; otherwise use imported mocks
|
|
169
|
+
const mocks =
|
|
170
|
+
component.mocks && component.mocks.length > 0
|
|
171
|
+
? component.mocks
|
|
172
|
+
: importedSlice?.mocks;
|
|
173
|
+
|
|
174
|
+
return {
|
|
175
|
+
...component,
|
|
176
|
+
mocks: mocks ?? component.mocks,
|
|
177
|
+
};
|
|
178
|
+
}),
|
|
179
|
+
};
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
createSliceSuccess(librariesWithMocks);
|
|
183
|
+
|
|
184
|
+
// Also update mocks individually to ensure they're in the store
|
|
185
|
+
for (const slice of librarySlicesToImport) {
|
|
186
|
+
if (
|
|
187
|
+
slice.mocks &&
|
|
188
|
+
Array.isArray(slice.mocks) &&
|
|
189
|
+
slice.mocks.length > 0
|
|
190
|
+
) {
|
|
191
|
+
updateSliceMockSuccess({
|
|
192
|
+
libraryID: library,
|
|
193
|
+
sliceID: slice.model.id,
|
|
194
|
+
mocks: slice.mocks,
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
syncChanges();
|
|
200
|
+
|
|
201
|
+
// Combine local slices with created library slices
|
|
202
|
+
const allSlices: SharedSlice[] = [
|
|
203
|
+
...localSliceModels,
|
|
204
|
+
...createdSlices.map((s) => s.model),
|
|
205
|
+
] as SharedSlice[];
|
|
206
|
+
|
|
207
|
+
setIsSubmitting(false);
|
|
208
|
+
reset();
|
|
209
|
+
resetSlices();
|
|
210
|
+
|
|
211
|
+
void completeStep("createSlice");
|
|
212
|
+
|
|
213
|
+
for (const { model } of createdSlices) {
|
|
214
|
+
void telemetry.track({
|
|
215
|
+
event: "slice:created",
|
|
216
|
+
id: model.id,
|
|
217
|
+
name: model.name,
|
|
218
|
+
library,
|
|
219
|
+
location,
|
|
220
|
+
mode: "import",
|
|
221
|
+
});
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
return { slices: allSlices, library };
|
|
225
|
+
} catch (error) {
|
|
226
|
+
if (currentId !== id.current) {
|
|
227
|
+
throw error;
|
|
228
|
+
}
|
|
229
|
+
setIsSubmitting(false);
|
|
230
|
+
toast.error("An unexpected error happened while adding slices.");
|
|
231
|
+
throw error;
|
|
232
|
+
}
|
|
233
|
+
} else {
|
|
234
|
+
// Only local slices selected, no need to create anything
|
|
235
|
+
reset();
|
|
236
|
+
return { slices: localSliceModels as SharedSlice[] };
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
[
|
|
240
|
+
localSlices,
|
|
241
|
+
librarySlices,
|
|
242
|
+
syncChanges,
|
|
243
|
+
createSliceSuccess,
|
|
244
|
+
updateSliceMockSuccess,
|
|
245
|
+
completeStep,
|
|
246
|
+
reset,
|
|
247
|
+
],
|
|
248
|
+
);
|
|
249
|
+
|
|
250
|
+
const totalSelected = localSlices.length + librarySlices.length;
|
|
251
|
+
|
|
252
|
+
return (
|
|
253
|
+
<ReuseExistingSlicesContext.Provider
|
|
254
|
+
value={{
|
|
255
|
+
selectedLocalSlices: localSlices,
|
|
256
|
+
selectedLibrarySlices: librarySlices,
|
|
257
|
+
toggleLocalSlice,
|
|
258
|
+
toggleLibrarySlice,
|
|
259
|
+
setAllLibrarySlices,
|
|
260
|
+
reset,
|
|
261
|
+
submit,
|
|
262
|
+
isSubmitting,
|
|
263
|
+
totalSelected,
|
|
264
|
+
}}
|
|
265
|
+
>
|
|
266
|
+
{children}
|
|
267
|
+
</ReuseExistingSlicesContext.Provider>
|
|
268
|
+
);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
export function useReuseExistingSlicesContext() {
|
|
272
|
+
const context = useContext(ReuseExistingSlicesContext);
|
|
273
|
+
if (context === undefined) {
|
|
274
|
+
throw new Error(
|
|
275
|
+
"useReuseExistingSlicesContext must be used within ReuseExistingSlicesProvider",
|
|
276
|
+
);
|
|
277
|
+
}
|
|
278
|
+
return context;
|
|
279
|
+
}
|
|
@@ -26,7 +26,7 @@ export function useImportSlicesFromGithub() {
|
|
|
26
26
|
if (!owner || !repo) {
|
|
27
27
|
toast.error("Invalid GitHub URL format");
|
|
28
28
|
setIsLoadingSlices(false);
|
|
29
|
-
|
|
29
|
+
throw new Error("Invalid GitHub URL format");
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
const branch = await getDefaultBranch({ owner, repo });
|
|
@@ -43,14 +43,14 @@ export function useImportSlicesFromGithub() {
|
|
|
43
43
|
}`,
|
|
44
44
|
);
|
|
45
45
|
setIsLoadingSlices(false);
|
|
46
|
-
|
|
46
|
+
throw error;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
if (libraries.length === 0) {
|
|
50
50
|
console.warn("No libraries were found in the SM config.");
|
|
51
51
|
setIsLoadingSlices(false);
|
|
52
52
|
toast.error("No libraries were found in the SM config.");
|
|
53
|
-
|
|
53
|
+
throw new Error("No libraries were found in the SM config.");
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
const fetchedSlices = await fetchSlicesFromLibraries({
|
|
@@ -63,7 +63,7 @@ export function useImportSlicesFromGithub() {
|
|
|
63
63
|
if (fetchedSlices.length === 0) {
|
|
64
64
|
toast.error("Error fetching slices from the repository");
|
|
65
65
|
setIsLoadingSlices(false);
|
|
66
|
-
|
|
66
|
+
throw new Error("No slices were found in the libraries.");
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
setSlices(fetchedSlices);
|
|
@@ -71,6 +71,8 @@ export function useImportSlicesFromGithub() {
|
|
|
71
71
|
toast.success(
|
|
72
72
|
`Found ${fetchedSlices.length} slice(s) from ${libraries.length} library/libraries`,
|
|
73
73
|
);
|
|
74
|
+
|
|
75
|
+
return fetchedSlices;
|
|
74
76
|
} catch (error) {
|
|
75
77
|
console.error("Error importing from GitHub:", error);
|
|
76
78
|
toast.error(
|
|
@@ -79,6 +81,7 @@ export function useImportSlicesFromGithub() {
|
|
|
79
81
|
}`,
|
|
80
82
|
);
|
|
81
83
|
setIsLoadingSlices(false);
|
|
84
|
+
return [];
|
|
82
85
|
}
|
|
83
86
|
};
|
|
84
87
|
|
|
@@ -16,7 +16,6 @@ export type SliceZoneBlankSlateProps = {
|
|
|
16
16
|
openCreateSliceModal: () => void;
|
|
17
17
|
openCreateSliceFromImageModal: () => void;
|
|
18
18
|
openSlicesTemplatesModal: () => void;
|
|
19
|
-
openImportSlicesFromLibraryModal: () => void;
|
|
20
19
|
projectHasAvailableSlices: boolean;
|
|
21
20
|
isSlicesTemplatesSupported: boolean;
|
|
22
21
|
};
|
|
@@ -25,9 +24,7 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
|
|
|
25
24
|
openCreateSliceModal,
|
|
26
25
|
openCreateSliceFromImageModal,
|
|
27
26
|
openUpdateSliceZoneModal,
|
|
28
|
-
openImportSlicesFromLibraryModal,
|
|
29
27
|
openSlicesTemplatesModal,
|
|
30
|
-
projectHasAvailableSlices,
|
|
31
28
|
isSlicesTemplatesSupported,
|
|
32
29
|
}) => {
|
|
33
30
|
const sliceCreationOptions = getSliceCreationOptions({
|
|
@@ -79,25 +76,14 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
|
|
|
79
76
|
{sliceCreationOptions.fromTemplate.title}
|
|
80
77
|
</ActionListItem>
|
|
81
78
|
)}
|
|
82
|
-
{projectHasAvailableSlices && (
|
|
83
|
-
<ActionListItem
|
|
84
|
-
renderStartIcon={() =>
|
|
85
|
-
sliceCreationOptions.fromExisting.BackgroundIcon
|
|
86
|
-
}
|
|
87
|
-
onClick={openUpdateSliceZoneModal}
|
|
88
|
-
description={sliceCreationOptions.fromExisting.description}
|
|
89
|
-
>
|
|
90
|
-
{sliceCreationOptions.fromExisting.title}
|
|
91
|
-
</ActionListItem>
|
|
92
|
-
)}
|
|
93
79
|
<ActionListItem
|
|
94
80
|
renderStartIcon={() =>
|
|
95
|
-
sliceCreationOptions.
|
|
81
|
+
sliceCreationOptions.fromExisting.BackgroundIcon
|
|
96
82
|
}
|
|
97
|
-
onClick={
|
|
98
|
-
description={sliceCreationOptions.
|
|
83
|
+
onClick={openUpdateSliceZoneModal}
|
|
84
|
+
description={sliceCreationOptions.fromExisting.description}
|
|
99
85
|
>
|
|
100
|
-
{sliceCreationOptions.
|
|
86
|
+
{sliceCreationOptions.fromExisting.title}
|
|
101
87
|
</ActionListItem>
|
|
102
88
|
</ActionList>
|
|
103
89
|
</BlankSlateActions>
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
export const getSubmitButtonLabel = (
|
|
2
|
-
location: "custom_type" | "page_type"
|
|
2
|
+
location: "custom_type" | "page_type",
|
|
3
|
+
typeName?: string,
|
|
3
4
|
) => {
|
|
4
5
|
switch (location) {
|
|
5
6
|
case "custom_type":
|
|
6
|
-
return "Add to type";
|
|
7
7
|
case "page_type":
|
|
8
|
-
return
|
|
9
|
-
case "slices":
|
|
10
|
-
return "Add to slices";
|
|
8
|
+
return `Add to ${typeName}`;
|
|
11
9
|
}
|
|
12
10
|
};
|
|
@@ -64,19 +64,5 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
|
|
|
64
64
|
title: "Reuse an existing slice",
|
|
65
65
|
description: "Select from your created slices.",
|
|
66
66
|
},
|
|
67
|
-
importFromExternal: {
|
|
68
|
-
BackgroundIcon: (
|
|
69
|
-
<BackgroundIcon
|
|
70
|
-
name="cloudUpload"
|
|
71
|
-
size={menuType === "ActionList" ? "small" : "extraSmall"}
|
|
72
|
-
iconSize={menuType === "ActionList" ? "medium" : "small"}
|
|
73
|
-
color="white"
|
|
74
|
-
variant="solid"
|
|
75
|
-
radius={6}
|
|
76
|
-
/>
|
|
77
|
-
),
|
|
78
|
-
title: "Add from external library",
|
|
79
|
-
description: "Import slices from a github repository.",
|
|
80
|
-
},
|
|
81
67
|
};
|
|
82
68
|
};
|
|
@@ -4,11 +4,9 @@ import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
|
|
|
4
4
|
import Grid from "@/legacy/components/Grid";
|
|
5
5
|
import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
|
|
6
6
|
|
|
7
|
-
import { SliceZoneFormValues } from "./UpdateSliceZoneModal";
|
|
8
|
-
|
|
9
7
|
const UpdateSliceZoneModalList: React.FC<{
|
|
10
8
|
availableSlices: ReadonlyArray<ComponentUI>;
|
|
11
|
-
values:
|
|
9
|
+
values: { sliceKeys: string[] };
|
|
12
10
|
}> = ({ availableSlices, values }) => (
|
|
13
11
|
<FieldArray
|
|
14
12
|
name="sliceKeys"
|
|
@@ -45,7 +45,6 @@ import type { SliceMachineStoreType } from "@/redux/type";
|
|
|
45
45
|
import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
|
|
46
46
|
import { SlicesList } from "./List";
|
|
47
47
|
import { SlicesTemplatesModal } from "./SlicesTemplatesModal";
|
|
48
|
-
import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
|
|
49
48
|
|
|
50
49
|
const mapAvailableAndSharedSlices = (
|
|
51
50
|
sliceZone: SlicesSM,
|
|
@@ -122,10 +121,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
122
121
|
const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
|
|
123
122
|
const [isCreateSliceFromImageModalOpen, setIsCreateSliceFromImageModalOpen] =
|
|
124
123
|
useState(false);
|
|
125
|
-
const [
|
|
126
|
-
isImportSlicesFromLibraryModalOpen,
|
|
127
|
-
setIsImportSlicesFromLibraryModalOpen,
|
|
128
|
-
] = useState(false);
|
|
129
124
|
const { remoteSlices, libraries } = useSelector(
|
|
130
125
|
(store: SliceMachineStoreType) => ({
|
|
131
126
|
remoteSlices: getRemoteSlices(store),
|
|
@@ -202,10 +197,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
202
197
|
});
|
|
203
198
|
};
|
|
204
199
|
|
|
205
|
-
const openImportSlicesFromLibraryModal = () => {
|
|
206
|
-
setIsImportSlicesFromLibraryModalOpen(true);
|
|
207
|
-
};
|
|
208
|
-
|
|
209
200
|
const closeUpdateSliceZoneModal = () => {
|
|
210
201
|
setIsUpdateSliceZoneModalOpen(false);
|
|
211
202
|
};
|
|
@@ -222,10 +213,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
222
213
|
setIsSlicesTemplatesModalOpen(false);
|
|
223
214
|
};
|
|
224
215
|
|
|
225
|
-
const closeImportSlicesFromLibraryModal = () => {
|
|
226
|
-
setIsImportSlicesFromLibraryModalOpen(false);
|
|
227
|
-
};
|
|
228
|
-
|
|
229
216
|
return (
|
|
230
217
|
<>
|
|
231
218
|
<ListHeader
|
|
@@ -274,27 +261,14 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
274
261
|
</DropdownMenuItem>
|
|
275
262
|
) : undefined}
|
|
276
263
|
|
|
277
|
-
{availableSlicesToAdd.length > 0 ? (
|
|
278
|
-
<DropdownMenuItem
|
|
279
|
-
onSelect={openUpdateSliceZoneModal}
|
|
280
|
-
renderStartIcon={() =>
|
|
281
|
-
sliceCreationOptions.fromExisting.BackgroundIcon
|
|
282
|
-
}
|
|
283
|
-
description={sliceCreationOptions.fromExisting.description}
|
|
284
|
-
>
|
|
285
|
-
{sliceCreationOptions.fromExisting.title}
|
|
286
|
-
</DropdownMenuItem>
|
|
287
|
-
) : undefined}
|
|
288
264
|
<DropdownMenuItem
|
|
289
|
-
onSelect={
|
|
265
|
+
onSelect={openUpdateSliceZoneModal}
|
|
290
266
|
renderStartIcon={() =>
|
|
291
|
-
sliceCreationOptions.
|
|
292
|
-
}
|
|
293
|
-
description={
|
|
294
|
-
sliceCreationOptions.importFromExternal.description
|
|
267
|
+
sliceCreationOptions.fromExisting.BackgroundIcon
|
|
295
268
|
}
|
|
269
|
+
description={sliceCreationOptions.fromExisting.description}
|
|
296
270
|
>
|
|
297
|
-
{sliceCreationOptions.
|
|
271
|
+
{sliceCreationOptions.fromExisting.title}
|
|
298
272
|
</DropdownMenuItem>
|
|
299
273
|
</DropdownMenuContent>
|
|
300
274
|
</DropdownMenu>
|
|
@@ -348,9 +322,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
348
322
|
openCreateSliceFromImageModal={() =>
|
|
349
323
|
void openCreateSliceFromImageModal()
|
|
350
324
|
}
|
|
351
|
-
openImportSlicesFromLibraryModal={() =>
|
|
352
|
-
void openImportSlicesFromLibraryModal()
|
|
353
|
-
}
|
|
354
325
|
openSlicesTemplatesModal={openSlicesTemplatesModal}
|
|
355
326
|
projectHasAvailableSlices={availableSlicesToAdd.length > 0}
|
|
356
327
|
isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
|
|
@@ -358,28 +329,28 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
358
329
|
</Box>
|
|
359
330
|
)
|
|
360
331
|
) : undefined}
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
332
|
+
<ImportSlicesFromLibraryModal
|
|
333
|
+
open={isUpdateSliceZoneModalOpen}
|
|
334
|
+
location={`${customType.format}_type`}
|
|
335
|
+
typeName={customType.label ?? customType.id}
|
|
336
|
+
availableSlices={availableSlicesToAdd}
|
|
337
|
+
onSuccess={({ slices }) => {
|
|
338
|
+
const newCustomType = addSlicesToSliceZone({
|
|
339
|
+
customType,
|
|
340
|
+
tabId,
|
|
341
|
+
slices,
|
|
342
|
+
});
|
|
343
|
+
setCustomType({
|
|
344
|
+
customType: CustomTypes.fromSM(newCustomType),
|
|
345
|
+
onSaveCallback: () => {
|
|
346
|
+
toast.success("Slices successfully added");
|
|
347
|
+
},
|
|
348
|
+
});
|
|
349
|
+
void completeStep("createSlice");
|
|
350
|
+
closeUpdateSliceZoneModal();
|
|
351
|
+
}}
|
|
352
|
+
onClose={closeUpdateSliceZoneModal}
|
|
353
|
+
/>
|
|
383
354
|
{isSlicesTemplatesModalOpen && (
|
|
384
355
|
<SlicesTemplatesModal
|
|
385
356
|
formId={`tab-slicezone-form-${tabId}`}
|
|
@@ -471,30 +442,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
471
442
|
}}
|
|
472
443
|
onClose={closeCreateSliceFromImageModal}
|
|
473
444
|
/>
|
|
474
|
-
<ImportSlicesFromLibraryModal
|
|
475
|
-
open={isImportSlicesFromLibraryModalOpen}
|
|
476
|
-
location={`${customType.format}_type`}
|
|
477
|
-
onSuccess={({ slices, library }) => {
|
|
478
|
-
const newCustomType = addSlicesToSliceZone({
|
|
479
|
-
customType,
|
|
480
|
-
tabId,
|
|
481
|
-
slices: slices.map((slice) => slice.model),
|
|
482
|
-
});
|
|
483
|
-
setCustomType({
|
|
484
|
-
customType: CustomTypes.fromSM(newCustomType),
|
|
485
|
-
onSaveCallback: () => {
|
|
486
|
-
toast.success(
|
|
487
|
-
<ToastMessageWithPath
|
|
488
|
-
message="Slice(s) added to slice zone and created at: "
|
|
489
|
-
path={library}
|
|
490
|
-
/>,
|
|
491
|
-
);
|
|
492
|
-
},
|
|
493
|
-
});
|
|
494
|
-
closeImportSlicesFromLibraryModal();
|
|
495
|
-
}}
|
|
496
|
-
onClose={closeImportSlicesFromLibraryModal}
|
|
497
|
-
/>
|
|
498
445
|
</>
|
|
499
446
|
);
|
|
500
447
|
};
|
package/src/pages/slices.tsx
CHANGED
|
@@ -15,7 +15,6 @@ import { BaseStyles, Flex, Link, Text } from "theme-ui";
|
|
|
15
15
|
|
|
16
16
|
import { BreadcrumbItem } from "@/components/Breadcrumb";
|
|
17
17
|
import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
|
|
18
|
-
import { ImportSlicesFromLibraryModal } from "@/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal";
|
|
19
18
|
import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
|
|
20
19
|
import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
|
|
21
20
|
import { SLICES_CONFIG } from "@/features/slices/slicesConfig";
|
|
@@ -65,10 +64,6 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
65
64
|
const [isRenameSliceModalOpen, setIsRenameSliceModalOpen] = useState(false);
|
|
66
65
|
const [isCreateSliceFromImageModalOpen, setIsCreateSliceFromImageModalOpen] =
|
|
67
66
|
useState(false);
|
|
68
|
-
const [
|
|
69
|
-
isImportSlicesFromLibraryModalOpen,
|
|
70
|
-
setIsImportSlicesFromLibraryModalOpen,
|
|
71
|
-
] = useState(false);
|
|
72
67
|
|
|
73
68
|
const localLibraries: LibraryUI[] = libraries.filter(
|
|
74
69
|
(library) => library.isLocal,
|
|
@@ -150,17 +145,6 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
150
145
|
>
|
|
151
146
|
{sliceCreationOptions.fromScratch.title}
|
|
152
147
|
</DropdownMenuItem>
|
|
153
|
-
<DropdownMenuItem
|
|
154
|
-
renderStartIcon={() =>
|
|
155
|
-
sliceCreationOptions.importFromExternal.BackgroundIcon
|
|
156
|
-
}
|
|
157
|
-
onSelect={() => setIsImportSlicesFromLibraryModalOpen(true)}
|
|
158
|
-
description={
|
|
159
|
-
sliceCreationOptions.importFromExternal.description
|
|
160
|
-
}
|
|
161
|
-
>
|
|
162
|
-
{sliceCreationOptions.importFromExternal.title}
|
|
163
|
-
</DropdownMenuItem>
|
|
164
148
|
</DropdownMenuContent>
|
|
165
149
|
</DropdownMenu>
|
|
166
150
|
) : undefined}
|
|
@@ -356,20 +340,6 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
356
340
|
}}
|
|
357
341
|
onClose={closeCreateSliceFromImageModal}
|
|
358
342
|
/>
|
|
359
|
-
<ImportSlicesFromLibraryModal
|
|
360
|
-
open={isImportSlicesFromLibraryModalOpen}
|
|
361
|
-
location="slices"
|
|
362
|
-
onSuccess={({ library }: { library: string }) => {
|
|
363
|
-
toast.success(
|
|
364
|
-
<ToastMessageWithPath
|
|
365
|
-
message="Slice(s) added to slice zone and created at: "
|
|
366
|
-
path={library}
|
|
367
|
-
/>,
|
|
368
|
-
);
|
|
369
|
-
setIsImportSlicesFromLibraryModalOpen(false);
|
|
370
|
-
}}
|
|
371
|
-
onClose={() => setIsImportSlicesFromLibraryModalOpen(false)}
|
|
372
|
-
/>
|
|
373
343
|
</AppLayoutContent>
|
|
374
344
|
</AppLayout>
|
|
375
345
|
</>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,n,u,d,f,h,k,j,l,p,g,o,r,m,_,y,I,N,T){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,t,r,m,"static/chunks/pages/index-0d8cb369de720a35.js"],"/_error":["static/chunks/pages/_error-fedd2c6ebd3d27b9.js"],"/changelog":[c,i,"static/chunks/870-a72b74312773efea.js","static/chunks/pages/changelog-8514e0696e90a1b2.js"],"/changes":[c,b,"static/chunks/8eec4907-b712959d9f984b68.js",a,"static/chunks/125-00b909bdbab2ca15.js",e,d,"static/css/d98ebc475f8423a3.css","static/chunks/pages/changes-e66094f57453cf9c.js"],"/custom-types":[s,t,r,m,"static/chunks/pages/custom-types-5acd56959b60346f.js"],"/custom-types/[customTypeId]":[c,f,h,k,j,s,a,i,n,u,l,p,_,e,t,g,o,y,I,"static/chunks/pages/custom-types/[customTypeId]-273e9a82c085b596.js"],"/labs":["static/chunks/pages/labs-56fd818a63553497.js"],"/page-types/[pageTypeId]":[c,f,h,k,j,s,a,i,n,u,l,p,_,e,t,g,o,y,I,"static/chunks/pages/page-types/[pageTypeId]-3fa7667de1a790d9.js"],"/slices":[c,b,N,s,a,n,u,p,T,e,o,d,"static/css/efa5152b7c0f35c0.css","static/chunks/pages/slices-76679cf064761d2b.js"],"/slices/[lib]/[sliceName]/[variation]":[c,b,f,h,k,j,N,s,a,i,n,l,T,"static/chunks/484-3e011e79c41f0342.js",e,g,d,"static/css/e8e03c0d4003d1eb.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-22ffa2561ac66557.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[b,"static/chunks/72585f70-28b4d7d5384b3703.js",u,"static/chunks/429-e5d7e39160de9f5e.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-8c70298caf51bed0.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/397-e6c340070a3bcb41.js","static/chunks/59b4e022-ef680789f7cc9b11.js","static/chunks/66-d9d3bcb5d041cb6d.js","static/chunks/882-48d61b2fabee28d8.js","static/chunks/647-aa094286bc248d52.js","static/chunks/183-4ea255b867ff171b.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/344-b64f09e670634ed1.js","static/chunks/130-e1a16d2f94fb2b64.js","static/chunks/593-7ffd1197c3405ef8.js","static/chunks/f36c6662-1f3a854183168b10.js","static/chunks/4c744e84-480e426e4b1cfef3.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-09fb3b997ad1eb70.js","static/chunks/256-07f768a2b19b0a0e.js","static/chunks/954-bedaaabf664584a0.js","static/chunks/630-2bf927bca082a191.js","static/chunks/422-c7a16d95b75c9e1c.js","static/chunks/248-84a5987f0499b074.js","static/css/4e475d945cf8a890.css","static/chunks/585-c89bb2471e85b9f8.js","static/chunks/489-c9535ef34da63d1a.js","static/css/56f2a6684a524374.css","static/chunks/52d4c156-89c6ec6efca0a0bb.js","static/chunks/444-d39213143f782fec.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
|