slice-machine-ui 2.17.3-beta.8 → 2.17.3-beta.9
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/{KBrx-cAqXdE6ViRC7yyKz → UBLEqMkM94kXQpW0VSAQo}/_buildManifest.js +1 -1
- package/out/_next/static/chunks/489-a42bd4eeb1350d97.js +1 -0
- package/out/_next/static/chunks/{630-29c729ad2a291ef6.js → 630-799c128fd87fa645.js} +1 -1
- package/out/_next/static/chunks/907-a42dc5698d5dc000.js +1 -0
- package/out/_next/static/chunks/pages/{_app-87bfdef015dea569.js → _app-13d39ac1e1c9aa27.js} +1 -1
- package/out/_next/static/chunks/pages/changes-2bd69f3877d60b26.js +1 -0
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-0ecd552897e61e29.js +1 -0
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]-8b6e7854cb3466d4.js +1 -0
- package/out/_next/static/chunks/pages/slices-fe1bb16ff3020762.js +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 +3 -3
- package/src/features/customTypes/customTypesBuilder/CreateSliceFromImageModal/CreateSliceFromImageModal.tsx +8 -21
- package/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx +4 -12
- package/src/features/customTypes/customTypesBuilder/sliceCreationOptions.tsx +5 -11
- package/src/features/navigation/Navigation.tsx +1 -7
- package/src/legacy/components/ChangesItems/ChangesItems.tsx +1 -8
- package/src/legacy/components/Forms/CreateSliceModal/CreateSliceModal.tsx +3 -8
- package/src/legacy/components/Simulator/components/FailedConnect/index.tsx +51 -56
- package/src/legacy/components/ToasterContainer/index.tsx +3 -14
- package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx +1 -4
- package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx +1 -5
- package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx +4 -16
- package/src/legacy/lib/builders/SliceBuilder/index.tsx +1 -6
- package/src/legacy/lib/builders/common/Zone/components/ZoneEmptyState/ZoneEmptyState.tsx +5 -10
- package/src/pages/slices.tsx +10 -38
- package/out/_next/static/chunks/489-6578dbeec3dcdace.js +0 -1
- package/out/_next/static/chunks/907-590c914f55547b96.js +0 -1
- package/out/_next/static/chunks/pages/changes-db800bf4a08faa31.js +0 -1
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-5008e29008aa04f4.js +0 -1
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]-0bc862dd7bd99611.js +0 -1
- package/out/_next/static/chunks/pages/slices-4b229ae47d0a37e2.js +0 -1
- package/src/features/builder/useSectionsNamingExperiment.ts +0 -15
- package/src/utils/textConversion.ts +0 -11
- /package/out/_next/static/{KBrx-cAqXdE6ViRC7yyKz → UBLEqMkM94kXQpW0VSAQo}/_ssgManifest.js +0 -0
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import { BackgroundIcon } from "@prismicio/editor-ui";
|
|
2
2
|
|
|
3
|
-
import { UseSectionsNamingExperimentReturnType } from "@/features/builder/useSectionsNamingExperiment";
|
|
4
|
-
import { pluralize } from "@/utils/textConversion";
|
|
5
|
-
|
|
6
3
|
type SliceCreationOptionArgs = {
|
|
7
4
|
menuType: "ActionList" | "Dropdown";
|
|
8
|
-
sectionsNamingExperiment: UseSectionsNamingExperimentReturnType;
|
|
9
5
|
};
|
|
10
6
|
|
|
11
7
|
export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
|
|
12
|
-
const { menuType
|
|
8
|
+
const { menuType } = args;
|
|
13
9
|
|
|
14
10
|
return {
|
|
15
11
|
fromImage: {
|
|
@@ -24,7 +20,7 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
|
|
|
24
20
|
/>
|
|
25
21
|
),
|
|
26
22
|
title: "Generate from image",
|
|
27
|
-
description:
|
|
23
|
+
description: "Build a slice based on your design image.",
|
|
28
24
|
},
|
|
29
25
|
fromScratch: {
|
|
30
26
|
BackgroundIcon: (
|
|
@@ -38,7 +34,7 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
|
|
|
38
34
|
/>
|
|
39
35
|
),
|
|
40
36
|
title: "Start from scratch",
|
|
41
|
-
description:
|
|
37
|
+
description: "Build a custom slice your way.",
|
|
42
38
|
},
|
|
43
39
|
fromTemplate: {
|
|
44
40
|
BackgroundIcon: (
|
|
@@ -65,10 +61,8 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
|
|
|
65
61
|
radius={6}
|
|
66
62
|
/>
|
|
67
63
|
),
|
|
68
|
-
title:
|
|
69
|
-
description:
|
|
70
|
-
sectionsNamingExperiment.value,
|
|
71
|
-
)}`,
|
|
64
|
+
title: "Reuse an existing slice",
|
|
65
|
+
description: "Select from your created slices.",
|
|
72
66
|
},
|
|
73
67
|
};
|
|
74
68
|
};
|
|
@@ -13,11 +13,9 @@ import { useMarketingContent } from "@/hooks/useMarketingContent";
|
|
|
13
13
|
import { FolderIcon } from "@/icons/FolderIcon";
|
|
14
14
|
import { LightningIcon } from "@/icons/Lightning";
|
|
15
15
|
import { MenuBookIcon } from "@/icons/MenuBookIcon";
|
|
16
|
-
import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
|
|
17
16
|
|
|
18
17
|
import { ChangesItem } from "../../legacy/components/Navigation/ChangesItem";
|
|
19
18
|
import { Environment } from "../../legacy/components/Navigation/Environment";
|
|
20
|
-
import { useSectionsNamingExperiment } from "../builder/useSectionsNamingExperiment";
|
|
21
19
|
import { NavigationItem } from "./NavigationItem";
|
|
22
20
|
import { SliceMachineVersion } from "./SliceMachineVersion";
|
|
23
21
|
import { UpdateInfo } from "./UpdateInfo";
|
|
@@ -26,7 +24,6 @@ export function Navigation() {
|
|
|
26
24
|
const router = useRouter();
|
|
27
25
|
|
|
28
26
|
const { documentationLink } = useMarketingContent();
|
|
29
|
-
const sectionsNamingExperiment = useSectionsNamingExperiment();
|
|
30
27
|
const adapter = useAdapterName();
|
|
31
28
|
|
|
32
29
|
interface CustomTypeNavigationItemProps {
|
|
@@ -75,9 +72,7 @@ export function Navigation() {
|
|
|
75
72
|
<CustomTypeNavigationItem type="custom" />
|
|
76
73
|
|
|
77
74
|
<NavigationItem
|
|
78
|
-
title=
|
|
79
|
-
capitalizeFirstLetter(sectionsNamingExperiment.value),
|
|
80
|
-
)}
|
|
75
|
+
title="Slices"
|
|
81
76
|
href="/slices"
|
|
82
77
|
Icon={FolderIcon}
|
|
83
78
|
active={router.asPath.startsWith("/slices")}
|
|
@@ -98,7 +93,6 @@ export function Navigation() {
|
|
|
98
93
|
<OnboardingGuide />
|
|
99
94
|
</Suspense>
|
|
100
95
|
</ErrorBoundary>
|
|
101
|
-
|
|
102
96
|
<NavigationItem
|
|
103
97
|
title="Documentation"
|
|
104
98
|
href={documentationLink}
|
|
@@ -4,7 +4,6 @@ import { AiOutlineExclamationCircle } from "react-icons/ai";
|
|
|
4
4
|
|
|
5
5
|
import { countMissingScreenshots } from "@/domain/slice";
|
|
6
6
|
import { ErrorBoundary } from "@/ErrorBoundary";
|
|
7
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
8
7
|
import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
|
|
9
8
|
import { ModelsStatuses } from "@/features/sync/getUnSyncChanges";
|
|
10
9
|
import { useScreenshotChangesModal } from "@/hooks/useScreenshotChangesModal";
|
|
@@ -16,7 +15,6 @@ import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
|
|
|
16
15
|
import { LocalOrRemoteCustomType } from "@/legacy/lib/models/common/ModelData";
|
|
17
16
|
import { ModelStatus } from "@/legacy/lib/models/common/ModelStatus";
|
|
18
17
|
import { AuthStatus } from "@/modules/userContext/types";
|
|
19
|
-
import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
|
|
20
18
|
|
|
21
19
|
import { DevCollaborationExperiment } from "./DevCollaborationExperiment";
|
|
22
20
|
|
|
@@ -36,7 +34,6 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
|
|
|
36
34
|
isOnline,
|
|
37
35
|
}) => {
|
|
38
36
|
const { modalPayload, onOpenModal } = useScreenshotChangesModal();
|
|
39
|
-
const sectionsNamingExperiment = useSectionsNamingExperiment();
|
|
40
37
|
|
|
41
38
|
const { sliceFilterFn, defaultVariationSelector } = modalPayload;
|
|
42
39
|
|
|
@@ -71,11 +68,7 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
|
|
|
71
68
|
<Box padding={{ bottom: 8 }}>
|
|
72
69
|
<ChangesSectionHeader>
|
|
73
70
|
<Box>
|
|
74
|
-
<Text variant="h5">
|
|
75
|
-
{pluralize(
|
|
76
|
-
capitalizeFirstLetter(sectionsNamingExperiment.value),
|
|
77
|
-
)}
|
|
78
|
-
</Text>
|
|
71
|
+
<Text variant="h5">Slices</Text>
|
|
79
72
|
<Text variant="h5" sx={{ marginLeft: 8 }}>
|
|
80
73
|
{unSyncedSlices.length}
|
|
81
74
|
</Text>
|
|
@@ -4,7 +4,6 @@ import Select from "react-select";
|
|
|
4
4
|
import { Box, Label } from "theme-ui";
|
|
5
5
|
|
|
6
6
|
import { getState } from "@/apiClient";
|
|
7
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
8
7
|
import { useOnboarding } from "@/features/onboarding/useOnboarding";
|
|
9
8
|
import { createSlice } from "@/features/slices/actions/createSlice";
|
|
10
9
|
import { useAutoSync } from "@/features/sync/AutoSyncProvider";
|
|
@@ -12,7 +11,6 @@ import ModalFormCard from "@/legacy/components/ModalFormCard";
|
|
|
12
11
|
import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
|
|
13
12
|
import { SliceSM } from "@/legacy/lib/models/common/Slice";
|
|
14
13
|
import useSliceMachineActions from "@/modules/useSliceMachineActions";
|
|
15
|
-
import { capitalizeFirstLetter } from "@/utils/textConversion";
|
|
16
14
|
|
|
17
15
|
import { InputBox } from "../components/InputBox";
|
|
18
16
|
import { validateSliceModalValues } from "../formsValidator";
|
|
@@ -38,7 +36,6 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
|
|
|
38
36
|
const [isCreatingSlice, setIsCreatingSlice] = useState(false);
|
|
39
37
|
const { syncChanges } = useAutoSync();
|
|
40
38
|
const { completeStep } = useOnboarding();
|
|
41
|
-
const sectionsNamingExperiment = useSectionsNamingExperiment();
|
|
42
39
|
|
|
43
40
|
const onSubmit = async (values: FormValues) => {
|
|
44
41
|
const sliceName = values.sliceName;
|
|
@@ -82,17 +79,15 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
|
|
|
82
79
|
validateSliceModalValues(values, localLibraries, remoteSlices)
|
|
83
80
|
}
|
|
84
81
|
content={{
|
|
85
|
-
title:
|
|
82
|
+
title: "Create a new slice",
|
|
86
83
|
}}
|
|
87
84
|
>
|
|
88
85
|
{({ touched, values, setFieldValue, errors }) => (
|
|
89
86
|
<Box>
|
|
90
87
|
<InputBox
|
|
91
88
|
name="sliceName"
|
|
92
|
-
label=
|
|
93
|
-
|
|
94
|
-
)} name`}
|
|
95
|
-
placeholder={`Pascalised ${sectionsNamingExperiment.value} API ID (e.g. TextBlock)`}
|
|
89
|
+
label="Slice name"
|
|
90
|
+
placeholder="Pascalised slice API ID (e.g. TextBlock)"
|
|
96
91
|
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
97
92
|
error={touched.sliceName ? errors.sliceName : undefined}
|
|
98
93
|
testId="slice-name-input"
|
|
@@ -1,71 +1,66 @@
|
|
|
1
1
|
import { IoMdRefresh } from "react-icons/io";
|
|
2
2
|
import { Image, Link, Text } from "theme-ui";
|
|
3
3
|
|
|
4
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
5
4
|
import { Button } from "@/legacy/components/Button";
|
|
6
5
|
|
|
7
6
|
import FullPage from "../FullPage";
|
|
8
7
|
|
|
9
|
-
const FailedConnect = ({ onRetrigger }: { onRetrigger: () => void }) =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
const FailedConnect = ({ onRetrigger }: { onRetrigger: () => void }) => (
|
|
9
|
+
<FullPage>
|
|
10
|
+
<Image src="/iframe-not-running.png" sx={{ width: "320px" }} />
|
|
11
|
+
<Text
|
|
12
|
+
sx={{
|
|
13
|
+
color: "textClear",
|
|
14
|
+
mb: 2,
|
|
15
|
+
fontSize: "14px",
|
|
16
|
+
lineHeight: "24px",
|
|
17
|
+
fontWeight: "600",
|
|
18
|
+
}}
|
|
19
|
+
>
|
|
20
|
+
Slice Machine can't render your slice
|
|
21
|
+
</Text>
|
|
22
|
+
<Text
|
|
23
|
+
sx={{
|
|
24
|
+
color: "failedConnectText",
|
|
25
|
+
maxWidth: "400px",
|
|
26
|
+
textAlign: "center",
|
|
27
|
+
fontSize: "12px",
|
|
28
|
+
lineHeight: "22px",
|
|
29
|
+
}}
|
|
30
|
+
>
|
|
31
|
+
Ensure your website's development server is running by typing
|
|
32
|
+
<br />
|
|
15
33
|
<Text
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
fontSize: "14px",
|
|
20
|
-
lineHeight: "24px",
|
|
21
|
-
fontWeight: "600",
|
|
22
|
-
}}
|
|
34
|
+
as="code"
|
|
35
|
+
variant="styles.inlineCode"
|
|
36
|
+
sx={{ padding: "4px", borderRadius: "6px" }}
|
|
23
37
|
>
|
|
24
|
-
|
|
38
|
+
npm run dev
|
|
25
39
|
</Text>
|
|
26
|
-
|
|
40
|
+
in your terminal at the root of your website directory.
|
|
41
|
+
<br /> If that doesn't work, see the
|
|
42
|
+
<Link
|
|
43
|
+
target="_blank"
|
|
44
|
+
href="https://prismic.io/docs/slice-machine#simulate-slices"
|
|
27
45
|
sx={{
|
|
28
|
-
color: "
|
|
29
|
-
maxWidth: "400px",
|
|
30
|
-
textAlign: "center",
|
|
31
|
-
fontSize: "12px",
|
|
32
|
-
lineHeight: "22px",
|
|
46
|
+
color: "link",
|
|
33
47
|
}}
|
|
34
48
|
>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}}
|
|
52
|
-
>
|
|
53
|
-
troubleshooting instructions.
|
|
54
|
-
</Link>
|
|
55
|
-
</Text>
|
|
56
|
-
<Button
|
|
57
|
-
onClick={onRetrigger}
|
|
58
|
-
label="Refresh"
|
|
59
|
-
Icon={IoMdRefresh}
|
|
60
|
-
iconSize={20}
|
|
61
|
-
iconFill="#6F6E77"
|
|
62
|
-
variant="secondaryMedium"
|
|
63
|
-
sx={{
|
|
64
|
-
mt: "16px",
|
|
65
|
-
}}
|
|
66
|
-
/>
|
|
67
|
-
</FullPage>
|
|
68
|
-
);
|
|
69
|
-
};
|
|
49
|
+
troubleshooting instructions.
|
|
50
|
+
</Link>
|
|
51
|
+
</Text>
|
|
52
|
+
<Button
|
|
53
|
+
onClick={onRetrigger}
|
|
54
|
+
label="Refresh"
|
|
55
|
+
Icon={IoMdRefresh}
|
|
56
|
+
iconSize={20}
|
|
57
|
+
iconFill="#6F6E77"
|
|
58
|
+
variant="secondaryMedium"
|
|
59
|
+
sx={{
|
|
60
|
+
mt: "16px",
|
|
61
|
+
}}
|
|
62
|
+
/>
|
|
63
|
+
</FullPage>
|
|
64
|
+
);
|
|
70
65
|
|
|
71
66
|
export default FailedConnect;
|
|
@@ -7,9 +7,6 @@ import {
|
|
|
7
7
|
TypeOptions,
|
|
8
8
|
} from "react-toastify";
|
|
9
9
|
|
|
10
|
-
import { UseSectionsNamingExperimentReturnType } from "@/features/builder/useSectionsNamingExperiment";
|
|
11
|
-
import { capitalizeFirstLetter } from "@/utils/textConversion";
|
|
12
|
-
|
|
13
10
|
const getIconAccordingToasterType = ({
|
|
14
11
|
type,
|
|
15
12
|
}: {
|
|
@@ -70,14 +67,6 @@ export const ToastMessageWithPath: React.FC<{
|
|
|
70
67
|
|
|
71
68
|
export const SliceToastMessage: React.FC<{
|
|
72
69
|
path: string;
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<ToastMessageWithPath
|
|
77
|
-
message={`${capitalizeFirstLetter(
|
|
78
|
-
props.sectionsNamingExperiment.value,
|
|
79
|
-
)} saved successfully at `}
|
|
80
|
-
{...props}
|
|
81
|
-
/>
|
|
82
|
-
);
|
|
83
|
-
};
|
|
70
|
+
}> = (props) => (
|
|
71
|
+
<ToastMessageWithPath message="Slice saved successfully at " {...props} />
|
|
72
|
+
);
|
|
@@ -3,7 +3,6 @@ import { FC } from "react";
|
|
|
3
3
|
import { Text } from "theme-ui";
|
|
4
4
|
|
|
5
5
|
import { getState } from "@/apiClient";
|
|
6
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
7
6
|
import { createSlicesTemplates } from "@/features/slicesTemplates/actions/createSlicesTemplates";
|
|
8
7
|
import { SliceTemplate } from "@/features/slicesTemplates/useSlicesTemplates";
|
|
9
8
|
import ModalFormCard from "@/legacy/components/ModalFormCard";
|
|
@@ -12,7 +11,6 @@ import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
|
|
|
12
11
|
import { Slices } from "@/legacy/lib/models/common/Slice";
|
|
13
12
|
import { managerClient } from "@/managerClient";
|
|
14
13
|
import useSliceMachineActions from "@/modules/useSliceMachineActions";
|
|
15
|
-
import { pluralize } from "@/utils/textConversion";
|
|
16
14
|
|
|
17
15
|
import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
|
|
18
16
|
|
|
@@ -38,7 +36,6 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
|
|
|
38
36
|
location,
|
|
39
37
|
}) => {
|
|
40
38
|
const { createSliceSuccess } = useSliceMachineActions();
|
|
41
|
-
const sectionsNamingExperiment = useSectionsNamingExperiment();
|
|
42
39
|
|
|
43
40
|
return (
|
|
44
41
|
<ModalFormCard
|
|
@@ -82,7 +79,7 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
|
|
|
82
79
|
sliceKeys: [],
|
|
83
80
|
}}
|
|
84
81
|
content={{
|
|
85
|
-
title:
|
|
82
|
+
title: "Use template slices",
|
|
86
83
|
}}
|
|
87
84
|
validate={(values) => {
|
|
88
85
|
if (values.sliceKeys.length === 0) {
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
|
|
2
2
|
import { Text } from "theme-ui";
|
|
3
3
|
|
|
4
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
5
4
|
import ModalFormCard from "@/legacy/components/ModalFormCard";
|
|
6
5
|
import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
|
|
7
|
-
import { pluralize } from "@/utils/textConversion";
|
|
8
6
|
|
|
9
7
|
import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
|
|
10
8
|
|
|
@@ -25,8 +23,6 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
|
|
|
25
23
|
onSubmit,
|
|
26
24
|
availableSlices,
|
|
27
25
|
}) => {
|
|
28
|
-
const sectionsNamingExperiment = useSectionsNamingExperiment();
|
|
29
|
-
|
|
30
26
|
return (
|
|
31
27
|
<ModalFormCard
|
|
32
28
|
isOpen
|
|
@@ -47,7 +43,7 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
|
|
|
47
43
|
sliceKeys: [],
|
|
48
44
|
}}
|
|
49
45
|
content={{
|
|
50
|
-
title:
|
|
46
|
+
title: "Select existing slices",
|
|
51
47
|
}}
|
|
52
48
|
testId="update-slices-modal"
|
|
53
49
|
validate={(values) => {
|
|
@@ -15,7 +15,6 @@ import { BaseStyles } from "theme-ui";
|
|
|
15
15
|
|
|
16
16
|
import { telemetry } from "@/apiClient";
|
|
17
17
|
import { ListHeader } from "@/components/List";
|
|
18
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
19
18
|
import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
|
|
20
19
|
import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
|
|
21
20
|
import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
|
|
@@ -41,7 +40,6 @@ import {
|
|
|
41
40
|
} from "@/modules/slices";
|
|
42
41
|
import useSliceMachineActions from "@/modules/useSliceMachineActions";
|
|
43
42
|
import type { SliceMachineStoreType } from "@/redux/type";
|
|
44
|
-
import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
|
|
45
43
|
|
|
46
44
|
import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
|
|
47
45
|
import { SlicesList } from "./List";
|
|
@@ -133,10 +131,8 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
133
131
|
const { setCustomType } = useCustomTypeState();
|
|
134
132
|
const { completeStep } = useOnboarding();
|
|
135
133
|
const { openLoginModal } = useSliceMachineActions();
|
|
136
|
-
const sectionsNamingExperiment = useSectionsNamingExperiment();
|
|
137
134
|
const sliceCreationOptions = getSliceCreationOptions({
|
|
138
135
|
menuType: "Dropdown",
|
|
139
|
-
sectionsNamingExperiment,
|
|
140
136
|
});
|
|
141
137
|
|
|
142
138
|
const localLibraries: readonly LibraryUI[] = libraries.filter(
|
|
@@ -297,7 +293,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
297
293
|
) : undefined
|
|
298
294
|
}
|
|
299
295
|
>
|
|
300
|
-
|
|
296
|
+
Slices
|
|
301
297
|
</ListHeader>
|
|
302
298
|
|
|
303
299
|
{sliceZone ? (
|
|
@@ -374,11 +370,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
374
370
|
onSaveCallback: () => {
|
|
375
371
|
toast.success(
|
|
376
372
|
<ToastMessageWithPath
|
|
377
|
-
message=
|
|
378
|
-
sectionsNamingExperiment.value,
|
|
379
|
-
)} template(s) added to ${
|
|
380
|
-
sectionsNamingExperiment.value
|
|
381
|
-
} zone and created at: `}
|
|
373
|
+
message="Slice template(s) added to slice zone and created at: "
|
|
382
374
|
path={`${localLibraries[0].name}/`}
|
|
383
375
|
/>,
|
|
384
376
|
);
|
|
@@ -414,7 +406,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
414
406
|
onSaveCallback: () => {
|
|
415
407
|
toast.success(
|
|
416
408
|
<ToastMessageWithPath
|
|
417
|
-
message=
|
|
409
|
+
message="New slice added to slice zone and created at: "
|
|
418
410
|
path={`${localLibraries[0].name}/`}
|
|
419
411
|
/>,
|
|
420
412
|
);
|
|
@@ -442,11 +434,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
|
|
|
442
434
|
onSaveCallback: () => {
|
|
443
435
|
toast.success(
|
|
444
436
|
<ToastMessageWithPath
|
|
445
|
-
message=
|
|
446
|
-
sectionsNamingExperiment.value,
|
|
447
|
-
)}(s) added to ${
|
|
448
|
-
sectionsNamingExperiment.value
|
|
449
|
-
} zone and created at: `}
|
|
437
|
+
message="Slice(s) added to slice zone and created at: "
|
|
450
438
|
path={library}
|
|
451
439
|
/>,
|
|
452
440
|
);
|
|
@@ -3,7 +3,6 @@ import { type FC } from "react";
|
|
|
3
3
|
|
|
4
4
|
import { BreadcrumbItem } from "@/components/Breadcrumb";
|
|
5
5
|
import { AutoSaveStatusIndicator } from "@/features/autoSave/AutoSaveStatusIndicator";
|
|
6
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
7
6
|
import { FloatingBackButton } from "@/features/slices/sliceBuilder/FloatingBackButton";
|
|
8
7
|
import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
|
|
9
8
|
import {
|
|
@@ -15,7 +14,6 @@ import {
|
|
|
15
14
|
AppLayoutHeader,
|
|
16
15
|
} from "@/legacy/components/AppLayout";
|
|
17
16
|
import SimulatorButton from "@/legacy/lib/builders/SliceBuilder/SimulatorButton";
|
|
18
|
-
import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
|
|
19
17
|
|
|
20
18
|
import FieldZones from "./FieldZones";
|
|
21
19
|
import { VariationsList } from "./VariationsList";
|
|
@@ -23,7 +21,6 @@ import { VariationsList } from "./VariationsList";
|
|
|
23
21
|
export const SliceBuilder: FC = () => {
|
|
24
22
|
const { slice, actionQueueStatus } = useSliceState();
|
|
25
23
|
const horizontalScroll = useMediaQuery({ max: "large" });
|
|
26
|
-
const sectionsNamingExperiment = useSectionsNamingExperiment();
|
|
27
24
|
|
|
28
25
|
const contentDisplayProps = horizontalScroll
|
|
29
26
|
? { gridTemplateRows: "304px 1fr" }
|
|
@@ -34,9 +31,7 @@ export const SliceBuilder: FC = () => {
|
|
|
34
31
|
<AppLayoutHeader>
|
|
35
32
|
<AppLayoutBackButton url="/slices" />
|
|
36
33
|
<AppLayoutBreadcrumb>
|
|
37
|
-
<BreadcrumbItem>
|
|
38
|
-
{pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))}
|
|
39
|
-
</BreadcrumbItem>
|
|
34
|
+
<BreadcrumbItem>Slices</BreadcrumbItem>
|
|
40
35
|
<BreadcrumbItem active>{slice.model.name}</BreadcrumbItem>
|
|
41
36
|
</AppLayoutBreadcrumb>
|
|
42
37
|
<AppLayoutActions>
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { Text } from "@prismicio/editor-ui";
|
|
2
2
|
import { FC, ReactNode } from "react";
|
|
3
3
|
|
|
4
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
5
|
-
|
|
6
4
|
import styles from "./ZoneEmptyState.module.css";
|
|
7
5
|
|
|
8
6
|
type ZoneEmptyStateProps = {
|
|
@@ -12,14 +10,11 @@ type ZoneEmptyStateProps = {
|
|
|
12
10
|
};
|
|
13
11
|
|
|
14
12
|
export const ZoneEmptyState: FC<ZoneEmptyStateProps> = (props) => {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const { heading = `Your ${modifiedZoneType} has no fields yet`, action } =
|
|
22
|
-
props;
|
|
13
|
+
const {
|
|
14
|
+
zoneType,
|
|
15
|
+
heading = `Your ${zoneType} has no fields yet`,
|
|
16
|
+
action,
|
|
17
|
+
} = props;
|
|
23
18
|
|
|
24
19
|
return (
|
|
25
20
|
<div className={styles.root}>
|
package/src/pages/slices.tsx
CHANGED
|
@@ -14,7 +14,6 @@ import { toast } from "react-toastify";
|
|
|
14
14
|
import { BaseStyles, Flex, Link, Text } from "theme-ui";
|
|
15
15
|
|
|
16
16
|
import { BreadcrumbItem } from "@/components/Breadcrumb";
|
|
17
|
-
import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
|
|
18
17
|
import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
|
|
19
18
|
import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
|
|
20
19
|
import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
|
|
@@ -43,16 +42,13 @@ import { managerClient } from "@/managerClient";
|
|
|
43
42
|
import { getLibraries, getRemoteSlices } from "@/modules/slices";
|
|
44
43
|
import useSliceMachineActions from "@/modules/useSliceMachineActions";
|
|
45
44
|
import { SliceMachineStoreType } from "@/redux/type";
|
|
46
|
-
import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
|
|
47
45
|
|
|
48
46
|
const SlicesIndex: React.FunctionComponent = () => {
|
|
49
47
|
const router = useRouter();
|
|
50
48
|
const { modalPayload, onOpenModal } = useScreenshotChangesModal();
|
|
51
49
|
const { openLoginModal } = useSliceMachineActions();
|
|
52
|
-
const sectionsNamingExperiment = useSectionsNamingExperiment();
|
|
53
50
|
const sliceCreationOptions = getSliceCreationOptions({
|
|
54
51
|
menuType: "Dropdown",
|
|
55
|
-
sectionsNamingExperiment,
|
|
56
52
|
});
|
|
57
53
|
|
|
58
54
|
const { sliceFilterFn, defaultVariationSelector } = modalPayload;
|
|
@@ -111,17 +107,12 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
111
107
|
return (
|
|
112
108
|
<>
|
|
113
109
|
<Head>
|
|
114
|
-
<title>
|
|
115
|
-
{pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))} -
|
|
116
|
-
Slice Machine
|
|
117
|
-
</title>
|
|
110
|
+
<title>Slices - Slice Machine</title>
|
|
118
111
|
</Head>
|
|
119
112
|
<AppLayout>
|
|
120
113
|
<AppLayoutHeader>
|
|
121
114
|
<AppLayoutBreadcrumb>
|
|
122
|
-
<BreadcrumbItem>
|
|
123
|
-
{pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))}
|
|
124
|
-
</BreadcrumbItem>
|
|
115
|
+
<BreadcrumbItem>Slices</BreadcrumbItem>
|
|
125
116
|
</AppLayoutBreadcrumb>
|
|
126
117
|
{localLibraries?.length !== 0 && sliceCount !== 0 ? (
|
|
127
118
|
<DropdownMenu>
|
|
@@ -176,9 +167,7 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
176
167
|
}}
|
|
177
168
|
>
|
|
178
169
|
<EmptyState
|
|
179
|
-
title=
|
|
180
|
-
sectionsNamingExperiment.value,
|
|
181
|
-
)}?`}
|
|
170
|
+
title="What are slices?"
|
|
182
171
|
onCreateNew={() => {
|
|
183
172
|
setIsCreateSliceModalOpen(true);
|
|
184
173
|
}}
|
|
@@ -186,19 +175,10 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
186
175
|
videoPublicIdUrl={VIDEO_WHAT_ARE_SLICES}
|
|
187
176
|
documentationComponent={
|
|
188
177
|
<>
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
)}{" "}
|
|
194
|
-
are sections of your website. Prismic documents
|
|
195
|
-
contain a dynamic "
|
|
196
|
-
{capitalizeFirstLetter(
|
|
197
|
-
sectionsNamingExperiment.value,
|
|
198
|
-
)}{" "}
|
|
199
|
-
Zone" that allows content creators to add, edit, and
|
|
200
|
-
rearrange {pluralize(sectionsNamingExperiment.value)}{" "}
|
|
201
|
-
to compose dynamic layouts for any page design.{" "}
|
|
178
|
+
Slices are sections of your website. Prismic documents
|
|
179
|
+
contain a dynamic "Slice Zone" that allows content
|
|
180
|
+
creators to add, edit, and rearrange slices to compose
|
|
181
|
+
dynamic layouts for any page design.{" "}
|
|
202
182
|
<Link
|
|
203
183
|
target={"_blank"}
|
|
204
184
|
href={
|
|
@@ -245,11 +225,8 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
245
225
|
}}
|
|
246
226
|
>
|
|
247
227
|
<Text>
|
|
248
|
-
{
|
|
249
|
-
|
|
250
|
-
? `Your ${pluralize(
|
|
251
|
-
sectionsNamingExperiment.value,
|
|
252
|
-
)}`
|
|
228
|
+
{sortedLibraries.length === 1
|
|
229
|
+
? `Your slices`
|
|
253
230
|
: name}
|
|
254
231
|
</Text>
|
|
255
232
|
</Flex>
|
|
@@ -317,7 +294,6 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
317
294
|
void router.push(sliceLocation);
|
|
318
295
|
toast.success(
|
|
319
296
|
SliceToastMessage({
|
|
320
|
-
sectionsNamingExperiment,
|
|
321
297
|
path: `${libraryName}/${newSlice.name}/model.json`,
|
|
322
298
|
}),
|
|
323
299
|
);
|
|
@@ -353,11 +329,7 @@ const SlicesIndex: React.FunctionComponent = () => {
|
|
|
353
329
|
onSuccess={({ library }) => {
|
|
354
330
|
toast.success(
|
|
355
331
|
<ToastMessageWithPath
|
|
356
|
-
message=
|
|
357
|
-
sectionsNamingExperiment.value,
|
|
358
|
-
)}(s) added to ${
|
|
359
|
-
sectionsNamingExperiment.value
|
|
360
|
-
} zone and created at: `}
|
|
332
|
+
message="Slice(s) added to slice zone and created at: "
|
|
361
333
|
path={library}
|
|
362
334
|
/>,
|
|
363
335
|
);
|