slice-machine-ui 1.23.2-beta.3 → 1.23.2-beta.5

package/src/modules/loading/types.ts

@@ -5,12 +5,7 @@ export enum LoadingKeysEnum {
   REVIEW = "REVIEW",
   CHECK_SIMULATOR = "CHECK_SIMULATOR",
   CHECK_SIMULATOR_IFRAME = "CHECK_SIMULATOR_IFRAME",
-  CREATE_CUSTOM_TYPE = "CREATE_CUSTOM_TYPE",
-  SAVE_CUSTOM_TYPE = "SAVE_CUSTOM_TYPE",
-  RENAME_SLICE = "RENAME_SLICE",
   GENERATE_SLICE_CUSTOM_SCREENSHOT = "GENERATE_SLICE_CUSTOM_SCREENSHOT",
-  SAVE_SLICE = "SAVE_SLICE",
-  DELETE_SLICE = "DELETE_SLICE",
   SIMULATOR_SAVE_MOCK = "SIMULATOR_SAVE_MOCK",
   CHANGELOG = "CHANGELOG",
 }

package/src/modules/modal/types.ts

@@ -1,10 +1,7 @@
 export enum ModalKeysEnum {
   LOGIN = "LOGIN",
-  CREATE_CUSTOM_TYPE = "CREATE_CUSTOM_TYPE",
-  RENAME_SLICE = "RENAME_SLICE",
   SCREENSHOT_PREVIEW = "SCREENSHOT_PREVIEW",
   SCREENSHOTS = "SCREENSHOTS",
-  DELETE_SLICE = "DELETE_SLICE",
   SIMULATOR_SETUP = "SIMULATOR_SETUP",
 }
 

package/src/modules/slices/index.ts

@@ -1,111 +1,49 @@
-import {
-  ActionType,
-  createAction,
-  createAsyncAction,
-  getType,
-} from "typesafe-actions";
-import {
-  call,
-  fork,
-  put,
-  SagaReturnType,
-  select,
-  takeLatest,
-} from "redux-saga/effects";
+import { ActionType, createAction, getType } from "typesafe-actions";
 import { Reducer } from "redux";
 
 import { LocalOrRemoteSlice } from "@lib/models/common/ModelData";
 import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
 import { SliceSM } from "@lib/models/common/Slice";
 import { LibraryUI } from "@models/common/LibraryUI";
-import { withLoader } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { deleteSlice, renameSlice, SaveSliceMockRequest } from "@src/apiClient";
-import { modalCloseCreator } from "@src/modules/modal";
+import { SaveSliceMockRequest } from "@src/apiClient";
 import { refreshStateCreator } from "@src/modules/environment";
 import { SliceMachineStoreType } from "@src/redux/type";
-import { openToasterCreator, ToasterType } from "@src/modules/toaster";
 import { SlicesStoreType } from "./types";
 import { ComponentUI, ScreenshotUI } from "@lib/models/common/ComponentUI";
-import { selectSliceById } from "./selector";
-import { ScreenshotGenerationMethod } from "@lib/models/common/Screenshots";
 
 // Action Creators
-export const createSlice = createAction("SLICES/CREATE_SLICE")<{
+export const sliceCreateSuccess = createAction("SLICES/CREATE_SUCCESS")<{
   libraries: Readonly<LibraryUI[]>;
 }>();
 
-export const renameSliceCreator = createAsyncAction(
-  "SLICES/RENAME.REQUEST",
-  "SLICES/RENAME.RESPONSE",
-  "SLICES/RENAME.FAILURE",
-)<
-  {
-    libName: string;
-    sliceId: string;
-    newSliceName: string;
-  },
-  {
-    libName: string;
-    renamedSlice: SliceSM;
-  }
->();
+export const sliceRenameSuccess = createAction("SLICES/RENAME_SUCCESS")<{
+  libName: string;
+  renamedSlice: SliceSM;
+}>();
 
-export const deleteSliceCreator = createAsyncAction(
-  "SLICES/DELETE.REQUEST",
-  "SLICES/DELETE.RESPONSE",
-  "SLICES/DELETE.FAILURE",
-)<
-  {
-    sliceId: string;
-    sliceName: string;
-    libName: string;
-  },
-  {
-    sliceId: string;
-    sliceName: string;
-    libName: string;
-  }
->();
+export const sliceDeleteSuccess = createAction("SLICES/DELETE_SUCCESS")<{
+  sliceId: string;
+  libName: string;
+}>();
 
-export const updateSliceCreator = createAsyncAction(
-  "SLICE/UPDATE.REQUEST",
-  "SLICE/UPDATE.RESPONSE",
-  "SLICE/UPDATE.FAILURE",
-)<
-  {
-    component: ComponentUI;
-    setSliceBuilderState: () => void;
-  },
-  {
-    component: ComponentUI;
-  }
->();
+export const sliceUpdateSuccess = createAction("SLICE/UPDATE_SUCCESS")<{
+  component: ComponentUI;
+}>();
 
-export const generateSliceCustomScreenshotCreator = createAsyncAction(
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.REQUEST",
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.RESPONSE",
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.FAILURE",
-)<
-  {
-    variationId: string;
-    component: ComponentUI;
-    file: Blob;
-    method: ScreenshotGenerationMethod;
-  },
-  { variationId: string; screenshot: ScreenshotUI; component: ComponentUI }
->();
+export const sliceGenerateCustomScreenshotSuccess = createAction(
+  "SLICE/GENERATE_CUSTOM_SCREENSHOT_SUCCESS",
+)<{ variationId: string; screenshot: ScreenshotUI; component: ComponentUI }>();
 
 export const updateSliceMock =
   createAction("SLICE/UPDATE_MOCK")<SaveSliceMockRequest>();
 
 type SlicesActions =
   | ActionType<typeof refreshStateCreator>
-  | ActionType<typeof createSlice>
-  | ActionType<typeof renameSliceCreator>
-  | ActionType<typeof deleteSliceCreator>
-  | ActionType<typeof updateSliceCreator>
-  | ActionType<typeof generateSliceCustomScreenshotCreator>
+  | ActionType<typeof sliceCreateSuccess>
+  | ActionType<typeof sliceRenameSuccess>
+  | ActionType<typeof sliceDeleteSuccess>
+  | ActionType<typeof sliceUpdateSuccess>
+  | ActionType<typeof sliceGenerateCustomScreenshotSuccess>
   | ActionType<typeof updateSliceMock>;
 
 // Selectors
@@ -143,12 +81,12 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
         libraries: action.payload.libraries,
         remoteSlices: action.payload.remoteSlices,
       };
-    case getType(createSlice):
+    case getType(sliceCreateSuccess):
       return {
         ...state,
         libraries: action.payload.libraries,
       };
-    case getType(renameSliceCreator.success): {
+    case getType(sliceRenameSuccess): {
       const { libName, renamedSlice } = action.payload;
       const newLibs = state.libraries.map((library) => {
         if (library.name !== libName) return library;
@@ -169,7 +107,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
         libraries: newLibs,
       };
     }
-    case getType(updateSliceCreator.success): {
+    case getType(sliceUpdateSuccess): {
       const newComponentUI = action.payload.component;
 
       const newLibraries = state.libraries.map((library) => {
@@ -186,7 +124,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
 
       return { ...state, libraries: newLibraries };
     }
-    case getType(generateSliceCustomScreenshotCreator.success): {
+    case getType(sliceGenerateCustomScreenshotSuccess): {
       const { component, screenshot, variationId } = action.payload;
 
       const newLibraries = state.libraries.map((library) => {
@@ -209,7 +147,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
 
       return { ...state, libraries: newLibraries };
     }
-    case getType(deleteSliceCreator.success): {
+    case getType(sliceDeleteSuccess): {
       const { libName, sliceId } = action.payload;
       const newLibs = state.libraries.map((library) => {
         if (library.name !== libName) return library;
@@ -254,107 +192,3 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
       return state;
   }
 };
-
-// Sagas
-
-export function* renameSliceSaga({
-  payload,
-}: ReturnType<typeof renameSliceCreator.request>) {
-  const { libName, sliceId, newSliceName } = payload;
-  try {
-    const slice = (yield select((store: SliceMachineStoreType) =>
-      selectSliceById(store, libName, sliceId),
-    )) as ReturnType<typeof selectSliceById>;
-    if (!slice) {
-      throw new Error(
-        `Slice "${payload.sliceId} in the "${payload.libName}" library not found.`,
-      );
-    }
-
-    const renamedSlice = renameSliceModel({
-      slice: slice.model,
-      newName: newSliceName,
-    });
-
-    yield call(renameSlice, renamedSlice, libName);
-    yield put(renameSliceCreator.success({ libName, renamedSlice }));
-
-    yield put(modalCloseCreator());
-    yield put(
-      openToasterCreator({
-        content: "Slice name updated",
-        type: ToasterType.SUCCESS,
-      }),
-    );
-  } catch (e) {
-    yield put(
-      openToasterCreator({
-        content: "Internal Error: Slice name not saved",
-        type: ToasterType.ERROR,
-      }),
-    );
-  }
-}
-
-function* watchRenameSlice() {
-  yield takeLatest(
-    getType(renameSliceCreator.request),
-    withLoader(renameSliceSaga, LoadingKeysEnum.RENAME_SLICE),
-  );
-}
-
-export function* deleteSliceSaga({
-  payload,
-}: ReturnType<typeof deleteSliceCreator.request>) {
-  const { libName, sliceId, sliceName } = payload;
-  try {
-    const result = (yield call(
-      deleteSlice,
-      sliceId,
-      libName,
-    )) as SagaReturnType<typeof deleteSlice>;
-    if (result.errors.length > 0) {
-      throw result.errors;
-    }
-    yield put(deleteSliceCreator.success(payload));
-    yield put(
-      openToasterCreator({
-        content: `Successfully deleted Slice “${sliceName}”`,
-        type: ToasterType.SUCCESS,
-      }),
-    );
-  } catch (e) {
-    yield put(
-      openToasterCreator({
-        content: "An unexpected error happened while deleting your slice.",
-        type: ToasterType.ERROR,
-      }),
-    );
-  }
-  yield put(modalCloseCreator());
-}
-
-function* watchDeleteSlice() {
-  yield takeLatest(
-    getType(deleteSliceCreator.request),
-    withLoader(deleteSliceSaga, LoadingKeysEnum.DELETE_SLICE),
-  );
-}
-
-// Saga Exports
-export function* watchSliceSagas() {
-  yield fork(watchRenameSlice);
-  yield fork(watchDeleteSlice);
-}
-
-type RenameSliceModelArgs = {
-  slice: SliceSM;
-  newName: string;
-};
-
-export function renameSliceModel(args: RenameSliceModelArgs): SliceSM {
-  return {
-    ...args.slice,
-    name: args.newName,
-  };
-}

package/src/modules/slices/selector.ts

@@ -2,20 +2,6 @@ import { SliceMachineStoreType } from "@src/redux/type";
 
 import { getLibraries } from "./index";
 
-export const selectSliceById = (
-  store: SliceMachineStoreType,
-  libraryName: string,
-  sliceId: string,
-) => {
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  const libraries = getLibraries(store) || [];
-
-  const library = libraries.find((library) => library.name === libraryName);
-  const slice = library?.components.find((c) => c.model.id === sliceId);
-
-  return slice;
-};
-
 export const selectCurrentSlice = (
   store: SliceMachineStoreType,
   lib: string,

package/src/modules/useSliceMachineActions.ts

@@ -10,7 +10,7 @@ import {
   hasSeenTutorialsToolTipCreator,
   hasSeenSimulatorToolTipCreator,
   hasSeenChangesToolTipCreator,
-  changesPushSuccessCreator,
+  changesPushSuccess,
 } from "./userContext";
 import { getChangelogCreator, refreshStateCreator } from "./environment";
 import {
@@ -19,17 +19,17 @@ import {
 } from "./simulator";
 import ServerState from "@models/server/ServerState";
 import {
-  createCustomTypeCreator,
-  deleteCustomTypeCreator,
-  renameAvailableCustomType,
-  saveCustomTypeCreator,
+  customTypeCreateSuccess,
+  customTypeDeleteSuccess,
+  customTypeRenameSuccess,
+  customTypeSaveSuccess,
 } from "./availableCustomTypes";
 import {
-  createSlice,
-  deleteSliceCreator,
-  generateSliceCustomScreenshotCreator,
-  renameSliceCreator,
-  updateSliceCreator,
+  sliceCreateSuccess,
+  sliceDeleteSuccess,
+  sliceGenerateCustomScreenshotSuccess,
+  sliceUpdateSuccess,
+  sliceRenameSuccess,
 } from "./slices";
 import { UserContextStoreType, UserReviewType } from "./userContext/types";
 import { GenericToastTypes, openToasterCreator } from "./toaster";
@@ -38,8 +38,8 @@ import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { ComponentUI, ScreenshotUI } from "../../lib/models/common/ComponentUI";
 import { saveSliceMockCreator } from "./simulator";
 import { SaveSliceMockRequest } from "@src/apiClient";
-import { CustomTypeFormat } from "@slicemachine/manager";
 import { LibraryUI } from "@lib/models/common/LibraryUI";
+import { SliceSM } from "@lib/models/common/Slice";
 
 const useSliceMachineActions = () => {
   const dispatch = useDispatch();
@@ -62,14 +62,8 @@ const useSliceMachineActions = () => {
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.LOGIN }));
   const openScreenshotsModal = () =>
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SCREENSHOTS }));
-  const openRenameSliceModal = () =>
-    dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.RENAME_SLICE }));
-  const openCreateCustomTypeModal = () =>
-    dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.CREATE_CUSTOM_TYPE }));
   const openScreenshotPreviewModal = () =>
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SCREENSHOT_PREVIEW }));
-  const openDeleteSliceModal = () =>
-    dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.DELETE_SLICE }));
   const openSimulatorSetupModal = () =>
     dispatch(modalOpenCreator({ modalKey: ModalKeysEnum.SIMULATOR_SETUP }));
 
@@ -104,122 +98,112 @@ const useSliceMachineActions = () => {
     dispatch(hasSeenTutorialsToolTipCreator());
   const setSeenChangesToolTip = () => dispatch(hasSeenChangesToolTipCreator());
 
-  // Custom types module
-  const createCustomType = (
-    id: string,
-    label: string,
-    repeatable: boolean,
-    format: CustomTypeFormat,
-  ) =>
+  // Toaster store
+  const openToaster = (
+    content: string | React.ReactNode,
+    type: GenericToastTypes,
+  ) => dispatch(openToasterCreator({ content, type }));
+
+  // Simulator
+  const saveSliceMock = (payload: SaveSliceMockRequest) =>
+    dispatch(saveSliceMockCreator.request(payload));
+
+  // State Action (used by multiple stores)
+  const refreshState = (serverState: ServerState) => {
     dispatch(
-      createCustomTypeCreator.request({ id, label, repeatable, format }),
+      refreshStateCreator({
+        env: serverState.env,
+        remoteCustomTypes: serverState.remoteCustomTypes,
+        localCustomTypes: serverState.customTypes,
+        libraries: serverState.libraries,
+        remoteSlices: serverState.remoteSlices,
+        clientError: serverState.clientError,
+      }),
     );
+  };
+
+  const getChangelog = () => {
+    dispatch(getChangelogCreator.request());
+  };
 
   /**
    * Success actions = sync store state from external actions. If its name
    * contains "Creator", it means it is still used in a saga and that `.request`
    * and `.failure` need to be preserved
    */
+
+  /**
+   * Custom Type module
+   */
+  const createCustomTypeSuccess = (newCustomType: CustomType) =>
+    dispatch(
+      customTypeCreateSuccess({
+        newCustomType: CustomTypes.toSM(newCustomType),
+      }),
+    );
   const saveCustomTypeSuccess = (customType: CustomType) =>
     dispatch(
-      saveCustomTypeCreator.success({
-        customType: CustomTypes.toSM(customType),
+      customTypeSaveSuccess({
+        newCustomType: CustomTypes.toSM(customType),
       }),
     );
-
   const deleteCustomTypeSuccess = (id: string) =>
     dispatch(
-      deleteCustomTypeCreator.success({
+      customTypeDeleteSuccess({
         customTypeId: id,
       }),
     );
-
-  const renameAvailableCustomTypeSuccess = (customType: CustomType) =>
+  const renameCustomTypeSuccess = (customType: CustomType) =>
     dispatch(
-      renameAvailableCustomType({
+      customTypeRenameSuccess({
         renamedCustomType: CustomTypes.toSM(customType),
       }),
     );
 
-  /** End of sucess actions */
-
-  // Slice module
+  /**
+   * Slice module
+   */
   const saveSliceSuccess = (component: ComponentUI) => {
     dispatch(
-      updateSliceCreator.success({
+      sliceUpdateSuccess({
         component,
       }),
     );
   };
-
   const saveSliceCustomScreenshotSuccess = (
     variationId: string,
     screenshot: ScreenshotUI,
     component: ComponentUI,
   ) => {
     dispatch(
-      generateSliceCustomScreenshotCreator.success({
+      sliceGenerateCustomScreenshotSuccess({
         variationId,
         screenshot,
         component,
       }),
     );
   };
-
   const createSliceSuccess = (libraries: readonly LibraryUI[]) =>
-    dispatch(createSlice({ libraries }));
-
-  const renameSlice = (
-    libName: string,
-    sliceId: string,
-    newSliceName: string,
-  ) =>
+    dispatch(sliceCreateSuccess({ libraries }));
+  const deleteSliceSuccess = (sliceId: string, libName: string) =>
     dispatch(
-      renameSliceCreator.request({
+      sliceDeleteSuccess({
         sliceId,
-        newSliceName,
         libName,
       }),
     );
-
-  const deleteSlice = (sliceId: string, sliceName: string, libName: string) =>
+  const renameSliceSuccess = (libName: string, renamedSlice: SliceSM) =>
     dispatch(
-      deleteSliceCreator.request({
-        sliceId,
-        sliceName,
+      sliceRenameSuccess({
+        renamedSlice,
         libName,
       }),
     );
 
-  const pushChangesSuccess = () => dispatch(changesPushSuccessCreator());
-
-  // Toaster store
-  const openToaster = (
-    content: string | React.ReactNode,
-    type: GenericToastTypes,
-  ) => dispatch(openToasterCreator({ content, type }));
-
-  // Simulator
-  const saveSliceMock = (payload: SaveSliceMockRequest) =>
-    dispatch(saveSliceMockCreator.request(payload));
-
-  // State Action (used by multiple stores)
-  const refreshState = (serverState: ServerState) => {
-    dispatch(
-      refreshStateCreator({
-        env: serverState.env,
-        remoteCustomTypes: serverState.remoteCustomTypes,
-        localCustomTypes: serverState.customTypes,
-        libraries: serverState.libraries,
-        remoteSlices: serverState.remoteSlices,
-        clientError: serverState.clientError,
-      }),
-    );
-  };
-
-  const getChangelog = () => {
-    dispatch(getChangelogCreator.request());
-  };
+  /**
+   * Changes module
+   */
+  const pushChangesSuccess = () => dispatch(changesPushSuccess());
 
   return {
     checkSimulatorSetup,
@@ -233,31 +217,28 @@ const useSliceMachineActions = () => {
     stopLoadingLogin,
     stopLoadingReview,
     startLoadingReview,
-    createCustomType,
     deleteCustomTypeSuccess,
-    renameAvailableCustomTypeSuccess,
+    renameCustomTypeSuccess,
     saveCustomTypeSuccess,
     saveSliceSuccess,
     saveSliceCustomScreenshotSuccess,
     createSliceSuccess,
-    renameSlice,
-    deleteSlice,
+    renameSliceSuccess,
+    deleteSliceSuccess,
     sendAReview,
     skipReview,
     setUpdatesViewed,
     setSeenTutorialsToolTip,
     setSeenSimulatorToolTip,
     setSeenChangesToolTip,
-    openCreateCustomTypeModal,
     openScreenshotPreviewModal,
-    openDeleteSliceModal,
     openSimulatorSetupModal,
-    openRenameSliceModal,
     closeModals,
     openToaster,
     saveSliceMock,
     getChangelog,
     pushChangesSuccess,
+    createCustomTypeSuccess,
   };
 };
 

package/src/modules/userContext/index.ts

@@ -53,7 +53,7 @@ export const hasSeenChangesToolTipCreator = createAction(
   "USER_CONTEXT/VIEW_CHANGES_TOOL_TIP",
 )();
 
-export const changesPushSuccessCreator = createAction(
+export const changesPushSuccess = createAction(
   "USER_CONTEXT/CHANGES_PUSH_SUCCESS",
 )();
 
@@ -65,7 +65,7 @@ type userContextActions = ActionType<
   | typeof hasSeenSimulatorToolTipCreator
   | typeof hasSeenChangesToolTipCreator
   | typeof refreshStateCreator
-  | typeof changesPushSuccessCreator
+  | typeof changesPushSuccess
 >;
 
 // Selectors
@@ -140,7 +140,7 @@ export const userContextReducer: Reducer<
         authStatus: getAuthStatus(action.payload.clientError),
       };
     }
-    case getType(changesPushSuccessCreator): {
+    case getType(changesPushSuccess): {
       return {
         ...state,
         lastSyncChange: Date.now(),

package/src/redux/saga.ts

@@ -1,16 +1,12 @@
 import { fork } from "redux-saga/effects";
 
 import { watchSimulatorSagas } from "@src/modules/simulator";
-import { watchAvailableCustomTypesSagas } from "@src/modules/availableCustomTypes";
-import { watchSliceSagas } from "@src/modules/slices";
 import { watchToasterSagas } from "@src/modules/toaster";
 import { watchChangelogSagas } from "@src/modules/environment";
 
 // Single entry point to start all Sagas at once
 export default function* rootSaga() {
   yield fork(watchSimulatorSagas);
-  yield fork(watchAvailableCustomTypesSagas);
-  yield fork(watchSliceSagas);
   yield fork(watchToasterSagas);
   yield fork(watchChangelogSagas);
 }