slice-machine-ui 1.26.1-beta.1 → 1.26.1-beta.11

package/components/Forms/CreateCustomTypeModal/CreateCustomTypeModal.tsx

@@ -1,27 +1,26 @@
-import { SetStateAction, useState } from "react";
-import { Box } from "theme-ui";
-import { FormikErrors } from "formik";
-import { useSelector } from "react-redux";
-import { useRouter } from "next/router";
-
 import ModalFormCard from "@components/ModalFormCard";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { SliceMachineStoreType } from "@src/redux/type";
-import {
-  selectAllCustomTypeIds,
-  selectAllCustomTypeLabels,
-} from "@src/modules/availableCustomTypes";
-import { slugify } from "@lib/utils/str";
 import { API_ID_REGEX } from "@lib/consts";
+import { slugify } from "@lib/utils/str";
 import type { CustomTypeFormat } from "@slicemachine/manager";
-import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
+import { getFormat } from "@src/domain/customType";
 import {
-  CustomTypeOrigin,
   createCustomType,
+  CustomTypeOrigin,
 } from "@src/features/customTypes/actions/createCustomType";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
-import { getFormat } from "@src/domain/customType";
+import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import {
+  selectAllCustomTypeIds,
+  selectAllCustomTypeLabels,
+} from "@src/modules/availableCustomTypes";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { FormikErrors } from "formik";
+import { useRouter } from "next/router";
+import { SetStateAction, useState } from "react";
+import { useSelector } from "react-redux";
+import { Box } from "theme-ui";
 
 import { InputBox } from "../components/InputBox";
 import { SelectRepeatable } from "../components/SelectRepeatable";

package/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -1,18 +1,17 @@
-import { Box, Label } from "theme-ui";
-import { FC, useState } from "react";
-import Select from "react-select";
-import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
-
-import { SliceSM } from "@lib/models/common/Slice";
-import { LibraryUI } from "@lib/models/common/LibraryUI";
 import ModalFormCard from "@components/ModalFormCard";
-import { createSlice } from "@src/features/slices/actions/createSlice";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { LibraryUI } from "@lib/models/common/LibraryUI";
+import { SliceSM } from "@lib/models/common/Slice";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { getState } from "@src/apiClient";
+import { createSlice } from "@src/features/slices/actions/createSlice";
 import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { FC, useState } from "react";
+import Select from "react-select";
+import { Box, Label } from "theme-ui";
 
-import { validateSliceModalValues } from "../formsValidator";
 import { InputBox } from "../components/InputBox";
+import { validateSliceModalValues } from "../formsValidator";
 
 type CreateSliceModalProps = {
   onClose: () => void;

package/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx

@@ -1,19 +1,18 @@
-import { useState } from "react";
-import { Box } from "theme-ui";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import ModalFormCard from "../../ModalFormCard";
-import { InputBox } from "../components/InputBox";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { FormikErrors } from "formik";
-
-import { selectAllCustomTypeLabels } from "@src/modules/availableCustomTypes";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { CustomTypeFormat } from "@slicemachine/manager";
-import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-
 import { renameCustomType } from "@src/features/customTypes/actions/renameCustomType";
+import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { selectAllCustomTypeLabels } from "@src/modules/availableCustomTypes";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { FormikErrors } from "formik";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { Box } from "theme-ui";
+
+import ModalFormCard from "../../ModalFormCard";
+import { InputBox } from "../components/InputBox";
 
 interface RenameCustomTypeModalProps {
   isChangesLocal: boolean;

package/components/Forms/RenameSliceModal/RenameSliceModal.tsx

@@ -1,15 +1,14 @@
-import { Box } from "theme-ui";
-import { useSelector } from "react-redux";
-
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getLibraries, getRemoteSlices } from "@src/modules/slices";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { renameSlice } from "@src/features/slices/actions/renameSlice";
 import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { getLibraries, getRemoteSlices } from "@src/modules/slices";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { useSelector } from "react-redux";
+import { Box } from "theme-ui";
 
-import { InputBox } from "../components/InputBox";
 import ModalFormCard from "../../ModalFormCard";
+import { InputBox } from "../components/InputBox";
 import { SliceModalValues } from "../formsTypes";
 import { validateSliceModalValues } from "../formsValidator";
 

package/components/Forms/RenameVariationModal/RenameVariationModal.module.css

@@ -0,0 +1,5 @@
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}

package/components/Forms/RenameVariationModal/RenameVariationModal.tsx

@@ -1,3 +1,5 @@
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import type { VariationSM } from "@lib/models/common/Slice";
 import {
   Box,
   Dialog,
@@ -7,16 +9,13 @@ import {
   FormInput,
   Text,
 } from "@prismicio/editor-ui";
-import { Formik } from "formik";
-import { useState, type FC } from "react";
-
-import type { ComponentUI } from "@lib/models/common/ComponentUI";
-import type { VariationSM } from "@lib/models/common/Slice";
 import { renameVariation } from "@src/features/slices/sliceBuilder/actions/renameVariation";
+import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { Formik } from "formik";
+import { type FC, useState } from "react";
 
-import * as styles from "./RenameVariationModal.css";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
+import styles from "./RenameVariationModal.module.css";
 
 type RenameVariationModalProps = {
   isOpen: boolean;

package/components/Forms/components/InputBox.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import { Field } from "formik";
-import { Box, Label, Input, Text } from "theme-ui";
+import React from "react";
+import { Box, Input, Label, Text } from "theme-ui";
 
 type InputBoxProps = {
   name: string;

package/components/Forms/components/SelectRepeatable.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
+import { CustomTypeFormat } from "@slicemachine/manager";
+import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import { useField } from "formik";
+import React, { FC } from "react";
 import { Box, Radio } from "theme-ui";
 
-import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import { FlexCard } from "./FlexCard";
-import { CustomTypeFormat } from "@slicemachine/manager";
 
 type SelectRepeatableProps = {
   format: CustomTypeFormat;

package/components/Forms/formsValidator.ts

@@ -1,10 +1,11 @@
-import { SliceModalValues } from "./formsTypes";
-import { RESERVED_SLICE_NAME, API_ID_REGEX } from "@lib/consts";
+import { API_ID_REGEX, RESERVED_SLICE_NAME } from "@lib/consts";
 import { LibraryUI } from "@lib/models/common/LibraryUI";
 import { SliceSM } from "@lib/models/common/Slice";
 import camelCase from "lodash/camelCase";
 import startCase from "lodash/startCase";
 
+import { SliceModalValues } from "./formsTypes";
+
 type SliceModalValuesValidity =
   | {
       sliceName?: string;

package/components/FullPage/index.tsx

@@ -1,4 +1,4 @@
-import { FlexProps, Flex } from "theme-ui";
+import { Flex, FlexProps } from "theme-ui";
 
 const FullPage: React.FunctionComponent<FlexProps> = ({ children }) => (
   <Flex

package/components/InputDeleteIcon/index.jsx

@@ -1,5 +1,5 @@
-import { IconButton, useThemeUI } from "theme-ui";
 import { AiFillCloseCircle } from "react-icons/ai";
+import { IconButton, useThemeUI } from "theme-ui";
 
 const InputDeleteIcon = ({ sx, size = 22, ...rest }) => {
   const { theme } = useThemeUI();

package/components/ItemHeader/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Flex, Text } from "theme-ui";
 import type { Theme } from "theme-ui";
+import { Flex, Text } from "theme-ui";
 
 const ItemHeader: React.FC<{
   text: React.ReactNode;

package/components/ListItem/Header.tsx

@@ -1,7 +1,7 @@
 import { TextWithTooltip } from "@components/Tooltip/TextWithTooltip";
+import * as CSS from "csstype";
 import { IconType } from "react-icons";
 import { Flex, Text, Theme } from "theme-ui";
-import * as CSS from "csstype";
 
 interface ItemHeaderProps {
   text: string;

package/components/ListItem/index.tsx

@@ -1,21 +1,18 @@
+import { TabField } from "@lib/models/common/CustomType";
+import { Widget } from "@lib/models/common/widgets/Widget";
+import { Menu, MenuButton, MenuItem, MenuList } from "@reach/menu-button";
 import React, { Fragment } from "react";
 import { Draggable } from "react-beautiful-dnd";
-import { MenuButton, Menu, MenuItem, MenuList } from "@reach/menu-button";
-
+import { AiOutlineEdit } from "react-icons/ai";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import { FaBars } from "react-icons/fa";
 import { Box, Flex, useThemeUI } from "theme-ui";
+import { AnyObjectSchema } from "yup";
 
 import Li from "../Li";
 import SliceMachineIconButton from "../SliceMachineIconButton";
 import ItemHeader from "./Header";
 
-import { AiOutlineEdit } from "react-icons/ai";
-import { BsThreeDotsVertical } from "react-icons/bs";
-
-import { FaBars } from "react-icons/fa";
-import { Widget } from "@lib/models/common/widgets/Widget";
-import { AnyObjectSchema } from "yup";
-import { TabField } from "@lib/models/common/CustomType";
-
 type Item<F extends TabField> = { key: string; value: F };
 
 interface ListItemProps<F extends TabField, S extends AnyObjectSchema> {

package/components/LoadingPage/index.tsx

@@ -1,4 +1,5 @@
 import { Spinner } from "theme-ui";
+
 import FullPage from "../FullPage";
 
 const LoadingPage: React.FunctionComponent = () => (

package/components/LoginModal/index.tsx

@@ -1,5 +1,26 @@
-import Modal from "react-modal";
+import SliceMachineModal from "@components/SliceMachineModal";
+import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
+import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
+import { buildEndpoints } from "@lib/prismic/endpoints";
+import { startPolling } from "@lib/utils/poll";
+import preferWroomBase from "@lib/utils/preferWroomBase";
+import { CheckAuthStatusResponse } from "@models/common/Auth";
+import { checkAuthStatus, getState, startAuth } from "@src/apiClient";
+import { getActiveEnvironment } from "@src/features/environments/actions/getActiveEnvironment";
+import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
+import { getEnvironment } from "@src/modules/environment";
+import { isLoading } from "@src/modules/loading";
+import { LoadingKeysEnum } from "@src/modules/loading/types";
+import { isModalOpen } from "@src/modules/modal";
+import { ModalKeysEnum } from "@src/modules/modal/types";
+import { AuthStatus } from "@src/modules/userContext/types";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
 import React from "react";
+import Modal from "react-modal";
+import { useSelector } from "react-redux";
+import { toast } from "react-toastify";
 import {
   Button,
   Card,
@@ -10,28 +31,6 @@ import {
   Spinner,
   Text,
 } from "theme-ui";
-import { toast } from "react-toastify";
-import { useSelector } from "react-redux";
-
-import SliceMachineModal from "@components/SliceMachineModal";
-import { checkAuthStatus, getState, startAuth } from "@src/apiClient";
-import { buildEndpoints } from "@lib/prismic/endpoints";
-import { startPolling } from "@lib/utils/poll";
-import { CheckAuthStatusResponse } from "@models/common/Auth";
-import { isModalOpen } from "@src/modules/modal";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { isLoading } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { getEnvironment } from "@src/modules/environment";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import preferWroomBase from "@lib/utils/preferWroomBase";
-import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
-import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
-import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { getActiveEnvironment } from "@src/features/environments/actions/getActiveEnvironment";
 
 interface ValidAuthStatus extends CheckAuthStatusResponse {
   status: "ok";

package/components/ModalFormCard/index.tsx

@@ -1,21 +1,21 @@
-import Modal from "react-modal";
+import { Button } from "@components/Button";
 import SliceMachineModal from "@components/SliceMachineModal";
 import {
-  Formik,
   Form,
+  Formik,
   FormikErrors,
+  FormikProps,
   FormikTouched,
   FormikValues,
-  FormikProps,
 } from "formik";
 import type {
   ComponentPropsWithoutRef,
   ReactNode,
   SetStateAction,
 } from "react";
-import { Flex, Heading, Close, Button as ThemeButton } from "theme-ui";
+import Modal from "react-modal";
+import { Button as ThemeButton, Close, Flex, Heading } from "theme-ui";
 
-import { Button } from "@components/Button";
 import Card from "../Card";
 
 type ModalCardProps<T extends FormikValues> = {

package/components/Navigation/ChangesItem.tsx

@@ -1,15 +1,12 @@
-import { type FC } from "react";
-import { useRouter } from "next/router";
 import { useMediaQuery } from "@prismicio/editor-support/React";
 import {
   Box,
+  breakpoints,
   Button,
   IconButton,
   Text,
   Tooltip,
-  breakpoints,
 } from "@prismicio/editor-ui";
-
 import {
   HoverCard,
   HoverCardCloseButton,
@@ -17,14 +14,16 @@ import {
   HoverCardMedia,
   HoverCardTitle,
 } from "@src/components/HoverCard";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { useNetwork } from "@src/hooks/useNetwork";
-import { useAuthStatus } from "@src/hooks/useAuthStatus";
+import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { AutoSyncStatusIndicator } from "@src/features/sync/components/AutoSyncStatusIndicator";
 import { useUnSyncChanges } from "@src/features/sync/useUnSyncChanges";
+import { useAuthStatus } from "@src/hooks/useAuthStatus";
+import { useNetwork } from "@src/hooks/useNetwork";
 import { ChangesIcon } from "@src/icons/ChangesIcon";
 import { AuthStatus } from "@src/modules/userContext/types";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { AutoSyncStatusIndicator } from "@src/features/sync/components/AutoSyncStatusIndicator";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useRouter } from "next/router";
+import { type FC } from "react";
 
 export const ChangesItem: FC = () => {
   const { setSeenChangesToolTip } = useSliceMachineActions();

package/components/Navigation/Environment.tsx

@@ -1,22 +1,21 @@
-import { useState } from "react";
+import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
+import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
 import {
   Environment as EnvironmentType,
   isUnauthenticatedError,
   isUnauthorizedError,
 } from "@slicemachine/manager/client";
-
 import { getState, telemetry } from "@src/apiClient";
-import { useEnvironments } from "@src/features/environments/useEnvironments";
+import { SideNavEnvironmentSelector } from "@src/components/SideNav";
 import { setEnvironment } from "@src/features/environments/actions/setEnvironment";
 import { useActiveEnvironment } from "@src/features/environments/useActiveEnvironment";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { SideNavEnvironmentSelector } from "@src/components/SideNav";
-import { useNetwork } from "@src/hooks/useNetwork";
+import { useEnvironments } from "@src/features/environments/useEnvironments";
 import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
-import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
 import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
 import { useAuthStatus } from "@src/hooks/useAuthStatus";
+import { useNetwork } from "@src/hooks/useNetwork";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useState } from "react";
 
 export function Environment() {
   const { environments, error: useEnvironmentsError } = useEnvironments();

package/components/Navigation/RunningVersion.tsx

@@ -1,7 +1,6 @@
-import { FC } from "react";
-
 import { RightElement } from "@src/components/SideNav";
 import { useSliceMachineRunningVersion } from "@src/hooks/useSliceMachineRunningVersion";
+import { FC } from "react";
 
 export const RunningVersion: FC = () => {
   const sliceMachineRunningVersion = useSliceMachineRunningVersion();

package/components/Navigation/UpdateBox.tsx

@@ -1,8 +1,7 @@
-import { FC } from "react";
-import Link from "next/link";
-
-import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
 import { UpdateInfo } from "@src/components/SideNav";
+import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
+import Link from "next/link";
+import { FC } from "react";
 
 export const UpdateBox: FC = () => {
   const { sliceMachineUpdateAvailable, adapterUpdateAvailable } =

package/components/Navigation/VideoItem.tsx

@@ -1,29 +1,29 @@
-import {
-  type FC,
-  useCallback,
-  useRef,
-  RefCallback,
-  ReactNode,
-  forwardRef,
-  PropsWithChildren,
-} from "react";
-import { useSelector } from "react-redux";
-import ReactTooltip from "react-tooltip";
-import { Close, Flex, Paragraph } from "theme-ui";
 import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
 import { telemetry } from "@src/apiClient";
-import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
-import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
 import {
   HoverCard,
-  HoverCardDescription,
   HoverCardCloseButton,
+  HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
 } from "@src/components/HoverCard";
+import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
+import { useMarketingContent } from "@src/hooks/useMarketingContent";
+import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
 import { getUserReview } from "@src/modules/userContext";
 import { SliceMachineStoreType } from "@src/redux/type";
-import { useMarketingContent } from "@src/hooks/useMarketingContent";
+import {
+  type FC,
+  forwardRef,
+  PropsWithChildren,
+  ReactNode,
+  RefCallback,
+  useCallback,
+  useRef,
+} from "react";
+import { useSelector } from "react-redux";
+import ReactTooltip from "react-tooltip";
+import { Close, Flex, Paragraph } from "theme-ui";
 
 import style from "./VideoItem.module.css";
 

package/components/Navigation/index.module.css

@@ -0,0 +1,3 @@
+.environmentDivider {
+  margin-block: 16px;
+}

package/components/Navigation/index.test.tsx

@@ -1,24 +1,26 @@
 // @vitest-environment jsdom
-import { describe, test, expect, vi } from "vitest";
+import { FrontEndEnvironment } from "@lib/models/common/Environment";
+import { cache } from "@prismicio/editor-support/Suspense";
+import { createSliceMachineManager } from "@slicemachine/manager";
+import { createSliceMachineManagerMSWHandler } from "@slicemachine/manager/test";
+import {
+  AuthStatus,
+  UserContextStoreType,
+} from "@src/modules/userContext/types";
 import Router from "next/router";
 import { act } from "react-dom/test-utils";
-import { createSliceMachineManagerMSWHandler } from "@slicemachine/manager/test";
-import { createSliceMachineManager } from "@slicemachine/manager";
-
-import { FrontEndEnvironment } from "@lib/models/common/Environment";
-import { UserContextStoreType } from "@src/modules/userContext/types";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { createTestPlugin } from "test/__testutils__/createTestPlugin";
-import { createTestProject } from "test/__testutils__/createTestProject";
 import {
   render,
-  within,
-  screen,
   type RenderReturnType,
+  screen,
   waitFor,
+  within,
 } from "test/__testutils__";
+import { createTestPlugin } from "test/__testutils__/createTestPlugin";
+import { createTestProject } from "test/__testutils__/createTestProject";
+import { describe, expect, test, vi } from "vitest";
+
 import SideNavigation from "./index";
-import { cache } from "@prismicio/editor-support/Suspense";
 
 const mockRouter = vi.mocked(Router);
 

package/components/Navigation/index.tsx

@@ -1,39 +1,37 @@
+import VideoItem from "@components/Navigation/VideoItem";
 import { Box } from "@prismicio/editor-ui";
-import { Suspense, type FC } from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useSelector } from "react-redux";
-
 import { telemetry } from "@src/apiClient";
-import VideoItem from "@components/Navigation/VideoItem";
-import { LightningIcon } from "@src/icons/Lightning";
-import { MathPlusIcon } from "@src/icons/MathPlusIcon";
-import { SettingsIcon } from "@src/icons/SettingsIcon";
-import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
+import { Divider } from "@src/components/Divider";
 import {
+  SideNav,
   SideNavLink,
-  SideNavListItem,
   SideNavList,
-  SideNav,
+  SideNavListItem,
   SideNavRepository,
 } from "@src/components/SideNav/SideNav";
-import { Divider } from "@src/components/Divider";
-import { FolderIcon } from "@src/icons/FolderIcon";
-import { userHasSeenTutorialsToolTip } from "@src/modules/userContext";
-import { SliceMachineStoreType } from "@src/redux/type";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { ErrorBoundary } from "@src/ErrorBoundary";
+import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
 import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
-import { ErrorBoundary } from "@src/ErrorBoundary";
+import { FolderIcon } from "@src/icons/FolderIcon";
+import { LightningIcon } from "@src/icons/Lightning";
+import { MathPlusIcon } from "@src/icons/MathPlusIcon";
+import { SettingsIcon } from "@src/icons/SettingsIcon";
+import { userHasSeenTutorialsToolTip } from "@src/modules/userContext";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { type FC, Suspense } from "react";
+import { useSelector } from "react-redux";
 
 import { ChangesItem } from "./ChangesItem";
 import { Environment } from "./Environment";
+import styles from "./index.module.css";
 import { RunningVersion } from "./RunningVersion";
 import { UpdateBox } from "./UpdateBox";
 
-import * as styles from "./index.css";
-
 const Navigation: FC = () => {
   const { hasSeenTutorialsToolTip } = useSelector(
     (store: SliceMachineStoreType) => ({

package/components/ReviewModal/ReviewForm.tsx

@@ -1,5 +1,16 @@
-import { FC } from "react";
+import SliceMachineModal from "@components/SliceMachineModal";
+import { telemetry } from "@src/apiClient";
+import { isLoading } from "@src/modules/loading";
+import { LoadingKeysEnum } from "@src/modules/loading/types";
+import { isModalOpen } from "@src/modules/modal";
+import { ModalKeysEnum } from "@src/modules/modal/types";
+import { UserReviewType } from "@src/modules/userContext/types";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@src/redux/type";
 import { Field, Form, Formik } from "formik";
+import { FC } from "react";
+import Modal from "react-modal";
+import { useSelector } from "react-redux";
 import {
   Box,
   Button,
@@ -10,18 +21,6 @@ import {
   Text,
   Textarea,
 } from "theme-ui";
-import Modal from "react-modal";
-import { useSelector } from "react-redux";
-
-import SliceMachineModal from "@components/SliceMachineModal";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { isModalOpen } from "@src/modules/modal";
-import { isLoading } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { telemetry } from "@src/apiClient";
-import { UserReviewType } from "@src/modules/userContext/types";
 
 import { ReviewFormSelect } from "./ReviewFormSelect";
 

package/components/ReviewModal/ReviewFormSelect.tsx

@@ -1,5 +1,5 @@
-import { FC } from "react";
 import { FieldProps } from "formik";
+import { FC } from "react";
 import { Box, Button } from "theme-ui";
 
 const ratingSelectable = [1, 2, 3, 4, 5];