slice-machine-ui 1.22.3-beta.1 → 1.22.3-beta.2

package/src/modules/selectedSlice/actions.ts

@@ -1,106 +0,0 @@
-import { ActionType, createAction, createAsyncAction } from "typesafe-actions";
-import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
-import type { SliceBuilderState } from "@builders/SliceBuilder";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { renameSliceCreator } from "../slices";
-import { SelectedSliceStoreType } from "./types";
-import { refreshStateCreator } from "../environment";
-import { generateSliceCustomScreenshotCreator } from "../screenshots/actions";
-import { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
-import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
-
-export type SelectedSliceActions =
-  | ActionType<typeof initSliceStoreCreator>
-  | ActionType<typeof addSliceWidgetCreator>
-  | ActionType<typeof replaceSliceWidgetCreator>
-  | ActionType<typeof reorderSliceWidgetCreator>
-  | ActionType<typeof removeSliceWidgetCreator>
-  | ActionType<typeof updateSliceWidgetMockCreator>
-  | ActionType<typeof deleteSliceWidgetMockCreator>
-  | ActionType<typeof updateSliceCreator>
-  | ActionType<typeof updateAndSaveSliceCreator>
-  | ActionType<typeof copyVariationSliceCreator>
-  | ActionType<typeof renameSliceCreator>
-  | ActionType<typeof refreshStateCreator>
-  | ActionType<typeof generateSliceCustomScreenshotCreator>
-  | ActionType<typeof updateSelectedSliceMocks>;
-
-export const updateSelectedSliceMocks = createAction(
-  "SELECTED_SLICE/UPDATE_MOCKS",
-)<{
-  mocks: SharedSliceContent[];
-}>();
-
-export const initSliceStoreCreator =
-  createAction("SLICE/INIT")<SelectedSliceStoreType>();
-
-export const addSliceWidgetCreator = createAction("SLICE/ADD_WIDGET")<{
-  variationId: string;
-  widgetsArea: WidgetsArea;
-  key: string;
-  value: NestableWidget;
-}>();
-
-export const replaceSliceWidgetCreator = createAction("SLICE/REPLACE_WIDGET")<{
-  variationId: string;
-  widgetsArea: WidgetsArea;
-  previousKey: string;
-  newKey: string;
-  value: NestableWidget;
-}>();
-
-export const reorderSliceWidgetCreator = createAction("SLICE/REORDER_WIDGET")<{
-  variationId: string;
-  widgetsArea: WidgetsArea;
-  start: number;
-  end: number | undefined;
-}>();
-
-export const removeSliceWidgetCreator = createAction("SLICE/REMOVE_WIDGET")<{
-  variationId: string;
-  widgetsArea: WidgetsArea;
-  key: string;
-}>();
-
-export const updateSliceWidgetMockCreator = createAction(
-  "SLICE/UPDATE_WIDGET_MOCK",
-)<{
-  variationId: string;
-  widgetArea: WidgetsArea;
-  previousKey: string;
-  newKey: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  mockValue: any;
-}>();
-
-export const deleteSliceWidgetMockCreator = createAction(
-  "SLICE/DELETE_WIDGET_MOCK",
-)<{
-  variationId: string;
-  widgetArea: WidgetsArea;
-  newKey: string;
-}>();
-
-export const updateSliceCreator = createAsyncAction(
-  "SLICE/UPDATE.REQUEST",
-  "SLICE/UPDATE.RESPONSE",
-  "SLICE/UPDATE.FAILURE",
-)<
-  {
-    component: ComponentUI;
-    setSliceBuilderState: (sliceBuilderState: SliceBuilderState) => void;
-  },
-  {
-    component: ComponentUI;
-  }
->();
-
-export const updateAndSaveSliceCreator = createAction("SLICE/UPDATE_AND_SAVE")<{
-  component: ComponentUI;
-}>();
-
-export const copyVariationSliceCreator = createAction("SLICE/COPY_VARIATION")<{
-  key: string;
-  name: string;
-  copied: VariationSM;
-}>();

package/src/modules/selectedSlice/reducer.ts

@@ -1,175 +0,0 @@
-import { AnyWidget } from "@lib/models/common/widgets/Widget";
-import { Reducer } from "redux";
-import { getType } from "typesafe-actions";
-import {
-  addSliceWidgetCreator,
-  copyVariationSliceCreator,
-  initSliceStoreCreator,
-  removeSliceWidgetCreator,
-  updateAndSaveSliceCreator,
-  reorderSliceWidgetCreator,
-  replaceSliceWidgetCreator,
-  SelectedSliceActions,
-  updateSelectedSliceMocks,
-} from "./actions";
-import { SelectedSliceStoreType } from "./types";
-import * as Widgets from "../../../lib/models/common/widgets";
-import { Variation } from "@lib/models/common/Variation";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { SliceSM } from "@lib/models/common/Slice";
-import { renameSliceCreator } from "../slices";
-import { refreshStateCreator } from "../environment";
-import { generateSliceCustomScreenshotCreator } from "../screenshots/actions";
-
-// Reducer
-export const selectedSliceReducer: Reducer<
-  SelectedSliceStoreType,
-  SelectedSliceActions
-> = (prevState = null, action) => {
-  switch (action.type) {
-    case getType(initSliceStoreCreator): {
-      if (!action.payload) return null;
-      return action.payload;
-    }
-    case getType(refreshStateCreator):
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      if (prevState === null || !action.payload.libraries) return prevState;
-
-      const updatedSlice = action.payload.libraries
-        .find((l) => l.name === prevState.from)
-        ?.components.find((c) => c.model.id === prevState.model.id);
-
-      if (updatedSlice === undefined) {
-        return prevState;
-      }
-      return {
-        ...prevState,
-        screenshots: updatedSlice.screenshots,
-      };
-    case getType(addSliceWidgetCreator): {
-      if (!prevState) return prevState;
-      const { variationId, widgetsArea, key, value } = action.payload;
-      try {
-        if (
-          value.type !== "Range" &&
-          value.type !== "Separator" &&
-          value.type !== "IntegrationFields"
-        ) {
-          const CurrentWidget: AnyWidget = Widgets[value.type];
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-          CurrentWidget.schema.validateSync(value, { stripUnknown: false });
-
-          return ComponentUI.updateVariation(
-            prevState,
-            variationId,
-          )((v) => Variation.addWidget(v, widgetsArea, key, value));
-        }
-        return prevState;
-      } catch (err) {
-        console.error(
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          `[store/addWidget] Model is invalid for widget "${value.type}".\nFull error: ${err}`,
-        );
-        return prevState;
-      }
-    }
-    case getType(replaceSliceWidgetCreator): {
-      if (!prevState) return prevState;
-      const { variationId, widgetsArea, previousKey, newKey, value } =
-        action.payload;
-      try {
-        if (
-          value.type !== "Range" &&
-          value.type !== "Separator" &&
-          value.type !== "IntegrationFields"
-        ) {
-          const CurrentWidget: AnyWidget = Widgets[value.type];
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-          CurrentWidget.schema.validateSync(value, { stripUnknown: false });
-
-          return ComponentUI.updateVariation(
-            prevState,
-            variationId,
-          )((v) =>
-            Variation.replaceWidget(v, widgetsArea, previousKey, newKey, value),
-          );
-        }
-        return prevState;
-      } catch (err) {
-        console.error(
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          `[store/replaceWidget] Model is invalid for widget "${value.type}".\nFull error: ${err}`,
-        );
-        return prevState;
-      }
-    }
-    case getType(generateSliceCustomScreenshotCreator.success): {
-      if (!prevState) return prevState;
-      const { component, screenshot, variationId } = action.payload;
-      return {
-        ...component,
-        screenshots: {
-          ...component.screenshots,
-          [variationId]: screenshot,
-        },
-      };
-    }
-    case getType(reorderSliceWidgetCreator): {
-      if (!prevState) return prevState;
-      const { variationId, widgetsArea, start, end } = action.payload;
-      if (end === undefined) return prevState;
-
-      return ComponentUI.updateVariation(
-        prevState,
-        variationId,
-      )((v) => Variation.reorderWidget(v, widgetsArea, start, end));
-    }
-    case getType(removeSliceWidgetCreator): {
-      if (!prevState) return prevState;
-      const { variationId, widgetsArea, key } = action.payload;
-
-      return ComponentUI.updateVariation(
-        prevState,
-        variationId,
-      )((v) => Variation.deleteWidget(v, widgetsArea, key));
-    }
-    case getType(copyVariationSliceCreator): {
-      if (!prevState) return prevState;
-      const { key, name, copied } = action.payload;
-      const newVariation = Variation.copyValue(copied, key, name);
-
-      const model: SliceSM = {
-        ...prevState.model,
-        variations: prevState.model.variations.concat([newVariation]),
-      };
-      return {
-        ...prevState,
-        model,
-      };
-    }
-    case getType(renameSliceCreator.success): {
-      if (!prevState) return prevState;
-      const { renamedSlice } = action.payload;
-
-      return {
-        ...prevState,
-        model: renamedSlice,
-      };
-    }
-    case getType(updateAndSaveSliceCreator): {
-      return prevState
-        ? { ...prevState, ...action.payload.component }
-        : prevState;
-    }
-    case getType(updateSelectedSliceMocks): {
-      if (!prevState) return prevState;
-      const { mocks } = action.payload;
-      return {
-        ...prevState,
-        mocks,
-      };
-    }
-    default:
-      return prevState;
-  }
-};

package/src/modules/selectedSlice/sagas.ts

@@ -1,72 +0,0 @@
-import {
-  call,
-  fork,
-  takeLatest,
-  put,
-  SagaReturnType,
-} from "redux-saga/effects";
-
-import { getType } from "typesafe-actions";
-import { withLoader } from "../loading";
-import { LoadingKeysEnum } from "../loading/types";
-import { updateSliceCreator } from "./actions";
-import { readSliceMocks, updateSlice } from "@src/apiClient";
-import { openToasterCreator, ToasterType } from "@src/modules/toaster";
-import { SliceToastMessage } from "@components/ToasterContainer";
-
-export function* updateSliceSaga({
-  payload,
-}: ReturnType<typeof updateSliceCreator.request>) {
-  const { component, setSliceBuilderState } = payload;
-
-  try {
-    setSliceBuilderState({ loading: true, done: false });
-    const { errors } = (yield call(updateSlice, component)) as SagaReturnType<
-      typeof updateSlice
-    >;
-    if (errors.length > 0) {
-      return setSliceBuilderState({
-        loading: false,
-        done: true,
-        error: true,
-        message: errors[0].message,
-      });
-    }
-    setSliceBuilderState({
-      loading: false,
-      done: true,
-      error: false,
-      message: SliceToastMessage({
-        path: `${component.from}/${component.model.name}/model.json`,
-      }),
-    });
-
-    const { mocks } = (yield call(readSliceMocks, {
-      libraryID: component.from,
-      sliceID: component.model.id,
-    })) as SagaReturnType<typeof readSliceMocks>;
-
-    yield put(
-      updateSliceCreator.success({ component: { ...component, mocks } }),
-    );
-  } catch (e) {
-    yield put(
-      openToasterCreator({
-        content: "Internal Error: Models & mocks not generated",
-        type: ToasterType.ERROR,
-      }),
-    );
-  }
-}
-
-function* watchSaveSlice() {
-  yield takeLatest(
-    getType(updateSliceCreator.request),
-    withLoader(updateSliceSaga, LoadingKeysEnum.SAVE_SLICE),
-  );
-}
-
-// Saga Exports
-export function* selectedSliceSagas() {
-  yield fork(watchSaveSlice);
-}

package/src/modules/selectedSlice/selectors.ts

@@ -1,55 +0,0 @@
-import equal from "fast-deep-equal";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getLibraries } from "../slices";
-
-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,
-  sliceName: string,
-) => {
-  const openedModel = store.selectedSlice;
-  if (openedModel?.model.name === sliceName) {
-    return openedModel;
-  }
-
-  const library = getLibraries(store)?.find(
-    (l) => l.name.replace(/\//g, "--") === lib,
-  );
-  const slice = library?.components.find((c) => c.model.name === sliceName);
-
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  return slice || null;
-};
-
-export const isSelectedSliceTouched = (
-  store: SliceMachineStoreType,
-  lib: string,
-  sliceId: string,
-): boolean => {
-  const selectedSlice = store.selectedSlice;
-  const library = getLibraries(store)?.find((l) => l.name === lib);
-  const librarySlice = library?.components.find((c) => c.model.id === sliceId);
-
-  if (!selectedSlice || !librarySlice) return false;
-
-  const sameVariations = equal(
-    librarySlice.model.variations,
-    selectedSlice.model.variations,
-  );
-
-  return !sameVariations;
-};

package/src/modules/selectedSlice/types.ts

@@ -1,3 +0,0 @@
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-
-export type SelectedSliceStoreType = ComponentUI | null;

package/src/modules/toaster/utils.tsx

@@ -1,23 +0,0 @@
-import type { ReactNode } from "react";
-
-import { ToasterType } from "../toaster";
-
-export type ToastPayload =
-  | { done: true; message: ReactNode; error: boolean }
-  | { done: false };
-
-export const handleRemoteResponse =
-  (addToast: (message: ReactNode, type: ToasterType) => void) =>
-  (payload: ToastPayload) => {
-    if (payload.done) {
-      addToast(
-        payload.message,
-        (() => {
-          if (payload.error) {
-            return ToasterType.ERROR;
-          }
-          return ToasterType.SUCCESS;
-        })(),
-      );
-    }
-  };

package/test/lib/models/common/CustomType/sliceZone.test.ts

@@ -1,49 +0,0 @@
-import { SliceZone } from "@lib/models/common/CustomType/sliceZone";
-// @ts-expect-error TS(2307) FIXME: Cannot find module '@slicemachine/core/build/model... Remove this comment to see the full error message
-import { SlicesSM } from "@slicemachine/core/build/models/Slices";
-
-const mockSliceZone: SlicesSM = {
-  key: "slices",
-  value: [
-    { key: "slice_in_zone_0", value: { type: "SharedSlice" } },
-    { key: "slice_in_zone_1", value: { type: "SharedSlice" } },
-    { key: "slice_in_zone_2", value: { type: "SharedSlice" } },
-  ],
-};
-
-describe("Slice Zone", () => {
-  describe("Remove shared slices", () => {
-    it("removes the correct slice", () => {
-      const keyToRemove = "slice_in_zone_1";
-
-      const result = SliceZone.removeSharedSlice(mockSliceZone, keyToRemove);
-
-      expect(result.value.map((slice) => slice.key).includes(keyToRemove)).toBe(
-        false,
-      );
-      expect(result.value.length).toEqual(2);
-    });
-
-    it("removes nothing if the key does not exist", () => {
-      const keyToRemove = "invalid_key";
-
-      const result = SliceZone.removeSharedSlice(mockSliceZone, keyToRemove);
-
-      expect(result).toEqual(mockSliceZone);
-    });
-  });
-
-  describe("Add shared slices", () => {
-    it("adds a new slice to the slice zone", () => {
-      const newKey = "new_slice_in_zone";
-
-      const result = SliceZone.addSharedSlice(mockSliceZone, newKey);
-
-      expect(result.value.map((slice) => slice.key)).toEqual(
-        // @ts-expect-error TS(7006) FIXME: Parameter 'slice' implicitly has an 'any' type.
-        mockSliceZone.value.map((slice) => slice.key).concat([newKey]),
-      );
-      expect(result.value.length).toEqual(4);
-    });
-  });
-});