slice-machine-ui 2.3.1-beta.6 → 2.3.1-beta.8

package/src/features/onboarding/OnboardingGuide/OnboardingGuide.module.css

@@ -0,0 +1,21 @@
+.container {
+  overflow: hidden;
+  position: relative;
+}
+
+.confettiCannon {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.visible {
+  opacity: 1;
+}
+
+.invisible {
+  opacity: 0;
+  /* A delay of 2s gives room for a 3s confetti animation to happen and then 
+    fade out while the it's ending */
+  transition: opacity 500ms linear 2s;
+}

package/src/features/onboarding/OnboardingGuide/OnboardingGuide.module.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "confettiCannon": string;
+  readonly "container": string;
+  readonly "invisible": string;
+  readonly "visible": string;
+};
+export = styles;
+

package/src/features/onboarding/OnboardingGuide/OnboardingGuide.tsx

@@ -0,0 +1,90 @@
+import {
+  Card,
+  CardContent,
+  ProgressBar,
+  Text,
+  useMediaQuery,
+} from "@prismicio/editor-ui";
+import { confetti as fireConfetti, ConfettiConfig } from "dom-confetti";
+import { useRef, useState } from "react";
+
+import { OnboardingProgressStepper } from "@/features/onboarding/OnboardingProgressStepper";
+import {
+  OnboardingProvider,
+  useOnboardingContext,
+} from "@/features/onboarding/OnboardingProvider";
+import { useOnboardingExperiment } from "@/features/onboarding/useOnboardingExperiment";
+
+import styles from "./OnboardingGuide.module.css";
+
+const OnboardingGuideCard = () => {
+  const { steps, completedStepCount, isComplete } = useOnboardingContext();
+  const isVisible = useMediaQuery({ min: "medium" });
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={isComplete ? styles.invisible : styles.visible}>
+      <Card color="grey2" variant="outlined" paddingBlock={16}>
+        <CardContent>
+          <div>
+            <Text variant="bold" color="grey12">
+              Build a page in {steps.length} steps
+            </Text>
+            <Text color="grey11" variant="small">
+              Render a live page with content coming from Prismic
+            </Text>
+          </div>
+          <ProgressBar
+            value={completedStepCount}
+            max={steps.length}
+            displayLabel
+            getValueLabel={(value, max) => `${value}/${max}`}
+          />
+          <OnboardingProgressStepper />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const confettiConfig: ConfettiConfig = {
+  colors: ["#8E44EC", "#E8C7FF", "#59B5F8", "#C3EEFE"],
+  elementCount: 300,
+  width: "8px",
+  height: "8px",
+  stagger: 0.2,
+  startVelocity: 35,
+  spread: 90,
+  duration: 3000,
+};
+
+const OnboardingGuideContent = () => {
+  const [isVisible, setVisible] = useState(true);
+  const confettiCannonRef = useRef<HTMLDivElement>(null);
+
+  const onComplete = () => {
+    const { current: confettiCannon } = confettiCannonRef;
+    if (confettiCannon) fireConfetti(confettiCannon, confettiConfig);
+    setTimeout(() => setVisible(false), confettiConfig.duration);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <OnboardingProvider onComplete={onComplete}>
+      <div className={styles.container}>
+        <OnboardingGuideCard />
+        <div ref={confettiCannonRef} className={styles.confettiCannon} />
+      </div>
+    </OnboardingProvider>
+  );
+};
+
+export const OnboardingGuide = () => {
+  const { eligible } = useOnboardingExperiment();
+
+  if (!eligible) return null;
+
+  return <OnboardingGuideContent />;
+};

package/src/features/onboarding/OnboardingGuide/index.ts

@@ -0,0 +1 @@
+export { OnboardingGuide } from "./OnboardingGuide";

package/src/features/onboarding/OnboardingProgressStepper.tsx

@@ -18,7 +18,8 @@ import type { OnboardingStep } from "@/features/onboarding/types";
 const EndCtaIcon = () => <Icon name="playCircle" size="small" color="grey11" />;
 
 export const OnboardingProgressStepper = () => {
-  const { completedStepCount, steps, isStepComplete } = useOnboardingContext();
+  const { completedStepCount, steps, isStepComplete, isComplete } =
+    useOnboardingContext();
 
   const [isListOpen, setListOpen] = useState(false);
   const [isDialogOpen, setDialogOpen] = useState(false);
@@ -44,6 +45,7 @@ export const OnboardingProgressStepper = () => {
       <DropdownMenu open={isListOpen} onOpenChange={setListOpen}>
         <DropdownMenuTrigger>
           <Button
+            disabled={isComplete}
             color="grey"
             sx={{ width: "100%" }}
             renderEndIcon={EndCtaIcon}

package/src/features/onboarding/OnboardingProvider.tsx

@@ -32,7 +32,15 @@ const getInitialState = (): OnboardingStepStatuses => {
   ) as OnboardingStepStatuses;
 };
 
-export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
+type OnboardingProviderProps = {
+  children: ReactNode;
+  onComplete?: () => void;
+};
+
+export const OnboardingProvider = ({
+  children,
+  onComplete,
+}: OnboardingProviderProps) => {
   const [stepStatus, setStepStatus] = usePersistedState(
     "onboardingSteps",
     getInitialState(),
@@ -52,6 +60,7 @@ export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
       });
     }
     if (Object.values(nextState).every(Boolean)) {
+      onComplete?.();
       void telemetry.track({ event: "onboarding:completed" });
     }
   };

package/src/features/onboarding/OnboardingStepDialog/OnboardingStepDialog.tsx

@@ -1,6 +1,8 @@
 import {
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
 } from "@prismicio/editor-ui";
@@ -50,11 +52,12 @@ export const OnboardingStepDialog = ({
       <DialogHeader title="Onboarding" />
       <DialogContent>
         <OnboardingStepDialogContent step={step} />
-        <DialogActions
-          ok={{ text: ctaOkText, onClick: markAsDone }}
-          cancel={{ text: "Close" }}
-          size="medium"
-        />
+        <DialogActions>
+          <DialogCancelButton size="medium">Close</DialogCancelButton>
+          <DialogActionButton size="medium" onClick={markAsDone}>
+            {ctaOkText}
+          </DialogActionButton>
+        </DialogActions>
       </DialogContent>
     </Dialog>
   );

package/src/features/settings/git/GitRepositoryConnectDialog.tsx

@@ -1,7 +1,10 @@
 import {
   Box,
   Dialog,
+  DialogActionButton,
+  DialogActionLink,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
   FormInput,
@@ -67,21 +70,22 @@ export const GitRepositoryConnectDialog: FC<
                   Required to sync models from {providerConfig.name} to Prismic.
                 </Text>
               </Box>
-              <DialogActions
-                cancel={{ text: "Cancel" }}
-                link={
-                  <Text href={new URL("/settings/apps", repositoryUrl).href}>
-                    Create a Prismic Write API token
-                  </Text>
-                }
-                ok={{
-                  disabled: !formikProps.isValid,
-                  loading: formikProps.isSubmitting,
-                  onClick: () => void formikProps.submitForm(),
-                  text: "Save Token",
-                }}
-                size="medium"
-              />
+              <DialogActions>
+                <DialogActionLink
+                  href={new URL("/settings/apps", repositoryUrl).href}
+                >
+                  Create a Prismic Write API token
+                </DialogActionLink>
+                <DialogCancelButton size="medium" />
+                <DialogActionButton
+                  disabled={!formikProps.isValid}
+                  loading={formikProps.isSubmitting}
+                  onClick={() => void formikProps.submitForm()}
+                  size="medium"
+                >
+                  Save Token
+                </DialogActionButton>
+              </DialogActions>
             </form>
           )}
         </Formik>

package/src/features/settings/git/GitRepositoryDisconnectDialog.tsx

@@ -1,7 +1,9 @@
 import {
   Box,
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
   Text,
@@ -32,13 +34,13 @@ export const GitRepositoryDisconnectDialog: FC<
           </Text>
         </Box>
       </DialogContent>
-      <DialogActions
-        asFooter
-        cancel={{ text: "Cancel" }}
-        ok={{
-          color: "tomato",
-          loading,
-          onClick: () => {
+      <DialogActions>
+        <DialogCancelButton size="medium" />
+        <DialogActionButton
+          size="medium"
+          color="tomato"
+          loading={loading}
+          onClick={() => {
             void (async () => {
               setLoading(true);
               try {
@@ -50,11 +52,11 @@ export const GitRepositoryDisconnectDialog: FC<
               }
               setLoading(false);
             })();
-          },
-          text: "Disconnect",
-        }}
-        size="medium"
-      />
+          }}
+        >
+          Disconnect
+        </DialogActionButton>
+      </DialogActions>
     </Dialog>
   );
 };

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx

@@ -1,7 +1,9 @@
 import {
   Box,
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
   FormInput,
@@ -132,16 +134,17 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
                       </Text>
                     </Box>
                   </ScrollArea>
-                  <DialogActions
-                    ok={{
-                      text: "Upgrade",
-                      onClick: () => void formik.submitForm(),
-                      loading: isLoading,
-                      disabled: !formik.isValid,
-                    }}
-                    cancel={{ text: "Cancel" }}
-                    size="medium"
-                  />
+                  <DialogActions>
+                    <DialogCancelButton size="medium" />
+                    <DialogActionButton
+                      size="medium"
+                      loading={isLoading}
+                      disabled={!formik.isValid}
+                      onClick={() => void formik.submitForm()}
+                    >
+                      Upgrade
+                    </DialogActionButton>
+                  </DialogActions>
                 </Box>
               </form>
             );

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx

@@ -1,7 +1,9 @@
 import {
   Box,
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
   FormInput,
@@ -169,16 +171,19 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
                       />
                     </Box>
                   </ScrollArea>
-                  <DialogActions
-                    ok={{
-                      text: "Convert",
-                      onClick: () => void formik.submitForm(),
-                      loading: isLoading,
-                      disabled: !formik.isValid,
-                    }}
-                    cancel={{ text: "Cancel" }}
-                    size="medium"
-                  />
+                  <DialogActions>
+                    <DialogCancelButton size="medium" />
+                    <DialogActionButton
+                      size="medium"
+                      loading={isLoading}
+                      onClick={() => {
+                        void formik.submitForm();
+                      }}
+                      disabled={!formik.isValid}
+                    >
+                      Convert
+                    </DialogActionButton>
+                  </DialogActions>
                 </Box>
               </form>
             );

package/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx

@@ -1,7 +1,9 @@
 import {
   Box,
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
   ScrollArea,
@@ -85,16 +87,17 @@ export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
                       </Text>
                     </Box>
                   </ScrollArea>
-                  <DialogActions
-                    ok={{
-                      text: "Merge",
-                      onClick: () => void formik.submitForm(),
-                      loading: isLoading,
-                      disabled: !formik.isValid,
-                    }}
-                    cancel={{ text: "Cancel" }}
-                    size="medium"
-                  />
+                  <DialogActions>
+                    <DialogCancelButton size="medium" />
+                    <DialogActionButton
+                      size="medium"
+                      loading={isLoading}
+                      disabled={!formik.isValid}
+                      onClick={() => void formik.submitForm()}
+                    >
+                      Merge
+                    </DialogActionButton>
+                  </DialogActions>
                 </Box>
               </form>
             );

package/src/legacy/components/ChangesItems/DevCollaborationExperiment.tsx

@@ -2,7 +2,9 @@ import {
   Box,
   Button,
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
   Text,
@@ -87,20 +89,21 @@ export function DevCollaborationExperiment() {
             <Box flexDirection="column" padding={16}>
               <Text>{payload.dialogDescription}</Text>
             </Box>
-            <DialogActions
-              cancel={{ text: "Cancel" }}
-              ok={{
-                text: payload.dialogButtonLabel,
-                onClick: () => {
+            <DialogActions>
+              <DialogCancelButton size="medium" />
+              <DialogActionButton
+                size="medium"
+                onClick={() => {
                   void telemetry.track({
                     event: "dev-collab:join-beta-clicked",
                   });
                   window.open(payload.dialogButtonLink, "_blank");
                   setIsExperimentDialogOpen(false);
-                },
-              }}
-              size="medium"
-            />
+                }}
+              >
+                {payload.dialogButtonLabel}
+              </DialogActionButton>
+            </DialogActions>
           </Box>
         </DialogContent>
       </Dialog>

package/src/legacy/components/DeleteVariationModal/index.tsx

@@ -1,7 +1,9 @@
 import {
   Box,
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
   Text,
@@ -49,11 +51,12 @@ export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
             <Bold>not</Bold> affect your documents until you <Bold>edit</Bold>{" "}
             them manually.
           </Text>
-          <DialogActions
-            ok={{
-              text: "Delete",
-              color: "tomato",
-              onClick: () => {
+          <DialogActions>
+            <DialogCancelButton size="medium" />
+            <DialogActionButton
+              size="medium"
+              color="tomato"
+              onClick={() => {
                 if (!variation) return;
                 void (async () => {
                   setIsDeleting(true);
@@ -69,12 +72,12 @@ export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
                   setIsDeleting(false);
                   onClose();
                 })();
-              },
-              loading: isDeleting,
-            }}
-            cancel={{ text: "Cancel" }}
-            size="medium"
-          />
+              }}
+              loading={isDeleting}
+            >
+              Delete
+            </DialogActionButton>
+          </DialogActions>
         </Box>
       </DialogContent>
     </Dialog>

package/src/legacy/components/Forms/RenameVariationModal/RenameVariationModal.tsx

@@ -1,7 +1,9 @@
 import {
   Box,
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
   FormInput,
@@ -98,16 +100,17 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
                     />
                   </Box>
                 </Box>
-                <DialogActions
-                  ok={{
-                    text: "Rename",
-                    onClick: () => void formik.submitForm(),
-                    loading: isRenaming,
-                    disabled: !formik.isValid,
-                  }}
-                  cancel={{ text: "Cancel" }}
-                  size="medium"
-                />
+                <DialogActions>
+                  <DialogCancelButton size="medium" />
+                  <DialogActionButton
+                    size="medium"
+                    onClick={() => void formik.submitForm()}
+                    loading={isRenaming}
+                    disabled={!formik.isValid}
+                  >
+                    Rename
+                  </DialogActionButton>
+                </DialogActions>
               </form>
             )}
           </Formik>

package/src/legacy/lib/builders/SliceBuilder/FieldZones/index.tsx

@@ -1,7 +1,9 @@
 import {
   Box,
   Dialog,
+  DialogActionButton,
   DialogActions,
+  DialogCancelButton,
   DialogContent,
   DialogHeader,
 } from "@prismicio/editor-ui";
@@ -286,14 +288,12 @@ const FieldZones: FC = () => {
               </>
             )}
           </Box>
-          <DialogActions
-            ok={{
-              text: "Delete",
-              color: "tomato",
-              onClick: () => onDeleteRepeatableZone(),
-            }}
-            cancel={{ text: "Cancel" }}
-          />
+          <DialogActions>
+            <DialogCancelButton />
+            <DialogActionButton color="tomato" onClick={onDeleteRepeatableZone}>
+              Delete
+            </DialogActionButton>
+          </DialogActions>
         </DialogContent>
       </Dialog>
     </List>