@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@plusscommunities/pluss-feature-builder-web-a",
+  "version": "1.0.2-beta.0",
+  "description": "Contains the feature builder extension for the pluss communities ",
+  "main": "dist/index.cjs.js",
+  "scripts": {
+    "build": "npm i && rollup -c",
+    "betapatch": "npm version prepatch --preid=beta",
+    "patch": "npm version patch",
+    "betaupload": "npm run build && npm publish --access public --tag beta && rm -rf node_modules",
+    "betaupload:p": "npm run betapatch && npm run betaupload",
+    "upload": "npm run build && npm publish --access public && rm -rf node_modules",
+    "upload:p": "npm run patch && npm run upload",
+    "copy:add": "run(){ ext=${1:-default}; test -f src/values.config.$ext.js || cp src/values.config.default.js src/values.config.$ext.js; }; run",
+    "copy:get": "echo $npm_package_name",
+    "copy:set": "run(){ target='@plusscommunities/pluss-feature-builder-web'; ext=${1:-default}; [ $ext == 'default' ] && replace=$target || replace=$target'-'$ext; echo 'Setting target to '$replace; test -f src/values.config.$ext.js && cp -f src/values.config.$ext.js src/values.config.js; REPLACE=$replace node -e 'const pkg=require(\"./package.json\"); pkg.name=process.env.REPLACE; require(\"fs\").writeFileSync(\"./package.json\", JSON.stringify(pkg, null, 2))'; }; run",
+    "copy:betaupload": "npm run betapatch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run betaupload; done; npm run copy:set;",
+    "copy:upload": "npm run patch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run upload; done; npm run copy:set;"
+  },
+  "author": "Phillip Suh",
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-optional-chaining": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.3",
+    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-react": "^7.13.13",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-image": "^2.0.6",
+    "@rollup/plugin-json": "^4.1.0",
+    "autoprefixer": "^10.2.6",
+    "rollup": "^2.50.1",
+    "rollup-plugin-local-resolve": "^1.0.7",
+    "rollup-plugin-styles": "^3.14.1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.14.0"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@plusscommunities/pluss-core-web": "^1.6.15-beta.1",
+    "lodash": "^4.17.4",
+    "moment": "^2.30.1",
+    "react": "^16.14.0",
+    "react-bootstrap": "^0.31.2",
+    "react-dom": "^16.14.0",
+    "react-fontawesome": "^1.6.1"
+  },
+  "keywords": []
+}

package/rollup.config.js

@@ -0,0 +1,68 @@
+import styles from "rollup-plugin-styles";
+const autoprefixer = require("autoprefixer");
+import babel from "@rollup/plugin-babel";
+import json from "@rollup/plugin-json";
+import image from "@rollup/plugin-image";
+import localResolve from "rollup-plugin-local-resolve";
+
+// the entry point for the library
+const input = "src/index.js";
+
+var MODE = [
+	{
+		format: "cjs",
+	},
+];
+
+var config = [];
+
+MODE.map((m) => {
+	var conf = {
+		input: input,
+		output: {
+			// then name of your package
+			name: "@plusscommunities/pluss-feature-builder-web",
+			file: `dist/index.${m.format}.js`,
+			format: m.format,
+			exports: "auto",
+		},
+		// this externelizes react to prevent rollup from compiling it
+		external: [
+			"react",
+			"react-dom",
+			"react-redux",
+			"react-router-dom",
+			"@fortawesome/react-fontawesome",
+			"@fortawesome/fontawesome-svg-core",
+			"@fortawesome/free-solid-svg-icons",
+			"@plusscommunities/pluss-core-web",
+			/@babel\/runtime/,
+		],
+		plugins: [
+			// these are babel comfigurations
+			babel({
+				exclude: "node_modules/**",
+				presets: ["@babel/preset-react", "@babel/preset-env"],
+				plugins: [
+					"@babel/transform-runtime",
+					"@babel/plugin-transform-react-jsx",
+					"@babel/plugin-transform-optional-chaining",
+					["@babel/plugin-transform-class-properties", { loose: true }],
+				],
+				babelHelpers: "runtime",
+			}),
+			// this adds support for styles
+			styles({
+				postcss: {
+					plugins: [autoprefixer()],
+				},
+			}),
+			json(),
+			image(),
+			localResolve(),
+		],
+	};
+	config.push(conf);
+});
+
+export default [...config];

package/src/actions/featureBuilderStringsActions.js

@@ -0,0 +1,88 @@
+import {
+	selectFormTitle,
+	selectFormIcon,
+} from "../selectors/featureBuilderSelectors";
+import { values } from "../values.config";
+import { capitalizeTextWithFallback, toTitleCase } from "../utils/textUtils";
+
+// IMPORTANT: Using local UPDATE_STRINGS action type to make extension self-contained
+// The main app's StringsReducer will handle this action type the same way
+export const UPDATE_STRINGS = "UPDATE_STRINGS";
+
+export const updateFeatureBuilderString = (title) => (dispatch, getState) => {
+	const currentStrings = getState().strings?.config || {};
+	const titleCased = toTitleCase(title) || values.textMenuTitle;
+	const updatedStrings = {
+		...currentStrings,
+		sideNav: {
+			...currentStrings.sideNav,
+			[values.featureKey]: titleCased,
+			[values.menuKey]: `Manage ${titleCased}`,
+		},
+		permission: {
+			...currentStrings.permission,
+			[values.permissionFeatureBuilderDefinition]: `Manage custom feature ${titleCased}`,
+			[values.permissionFeatureBuilderContent]: `Manage ${titleCased} content`,
+		},
+	};
+
+	dispatch({
+		type: UPDATE_STRINGS,
+		payload: updatedStrings,
+	});
+};
+
+export const updateFeatureBuilderStringFromStore =
+	() => (dispatch, getState) => {
+		const title = selectFormTitle(getState());
+		dispatch(updateFeatureBuilderString(title));
+	};
+
+export const updateFeatureBuilderIcon = (icon) => (dispatch, getState) => {
+	const currentStrings = getState().strings?.config || {};
+	const updatedStrings = {
+		...currentStrings,
+		sideNav: {
+			...currentStrings.sideNav,
+			[values.featureKey + "-icon"]: icon,
+			[values.menuKey + "-icon"]: icon,
+		},
+	};
+
+	dispatch({
+		type: UPDATE_STRINGS,
+		payload: updatedStrings,
+	});
+};
+
+export const updateFeatureBuilderStringAndIcon = () => (dispatch, getState) => {
+	const title = selectFormTitle(getState());
+	const icon = selectFormIcon(getState());
+
+	// Update title separately (will be title cased in updateFeatureBuilderString)
+	dispatch(updateFeatureBuilderString(title));
+
+	// Update icon as string
+	dispatch(updateFeatureBuilderIcon(icon));
+};
+
+export const updatePermissionNames = (featureTitle) => (dispatch, getState) => {
+	const currentStrings = getState().strings?.config || {};
+
+	const titleCasedFeature = toTitleCase(featureTitle, "");
+	const updatedStrings = {
+		...currentStrings,
+		permission: {
+			...currentStrings.permission,
+			[values.permissionFeatureBuilderDefinition]: `Create and Edit ${titleCasedFeature} Features`,
+			[values.permissionFeatureBuilderContent]: `Manage ${titleCasedFeature} Content`,
+		},
+	};
+
+	const result = dispatch({
+		type: UPDATE_STRINGS,
+		payload: updatedStrings,
+	});
+
+	return result;
+};

package/src/actions/featureDefinitionsIndex.js

@@ -0,0 +1,258 @@
+import { featureDefinitionActions } from "../webapi/featuresActions";
+import { values } from "../values.config.js";
+import {
+	updateFeatureBuilderString,
+	updateFeatureBuilderIcon,
+	updatePermissionNames,
+} from "./featureBuilderStringsActions";
+
+export const FETCH_FEATURES_REQUEST = "FETCH_FEATURES_REQUEST";
+export const FETCH_FEATURES_SUCCESS = "FETCH_FEATURES_SUCCESS";
+export const FETCH_FEATURES_FAILURE = "FETCH_FEATURES_FAILURE";
+
+export const FEATURE_CREATE_REQUEST = "FEATURE_CREATE_REQUEST";
+export const FEATURE_CREATE_SUCCESS = "FEATURE_CREATE_SUCCESS";
+export const FEATURE_CREATE_FAILURE = "FEATURE_CREATE_FAILURE";
+
+export const FEATURE_EDIT_REQUEST = "FEATURE_EDIT_REQUEST";
+export const FEATURE_EDIT_SUCCESS = "FEATURE_EDIT_SUCCESS";
+export const FEATURE_EDIT_FAILURE = "FEATURE_EDIT_FAILURE";
+
+export const FEATURE_DELETE_REQUEST = "FEATURE_DELETE_REQUEST";
+export const FEATURE_DELETE_FAILURE = "FEATURE_DELETE_FAILURE";
+
+// Wizard synchronization action types
+export const SYNC_WIZARD_MODE_FROM_DEFINITION =
+	"SYNC_WIZARD_MODE_FROM_DEFINITION";
+export const SET_WIZARD_MODE = "SET_WIZARD_MODE";
+
+function fetchFeaturesRequest() {
+	return { type: FETCH_FEATURES_REQUEST };
+}
+
+function fetchFeaturesSuccess(data, mode) {
+	return { type: FETCH_FEATURES_SUCCESS, payload: { data, mode } };
+}
+
+function fetchFeaturesFailure(data) {
+	return { type: FETCH_FEATURES_FAILURE, payload: data };
+}
+
+function deleteFeatureRequest(id) {
+	return { type: FEATURE_DELETE_REQUEST, payload: id };
+}
+
+function deleteFeatureFailure(id) {
+	return { type: FEATURE_DELETE_FAILURE, payload: id };
+}
+
+// Action creators for wizard synchronization
+function syncWizardModeFromDefinition(mode) {
+	return { type: SYNC_WIZARD_MODE_FROM_DEFINITION, payload: mode };
+}
+
+function setWizardMode(mode) {
+	return { type: SET_WIZARD_MODE, payload: mode };
+}
+
+// Action creators for create operations
+function createFeatureRequest() {
+	return { type: FEATURE_CREATE_REQUEST };
+}
+
+function createFeatureSuccess(featureDefinition) {
+	return (dispatch) => {
+		// Update menu string with title and icon from created definition
+		const title = featureDefinition?.title;
+		const icon = featureDefinition?.icon;
+
+		dispatch(updateFeatureBuilderString(title));
+		dispatch(updateFeatureBuilderIcon(icon));
+
+		// Update permission names based on feature title
+		dispatch(updatePermissionNames(title));
+
+		// Dispatch the actual success action
+		dispatch({
+			type: FEATURE_CREATE_SUCCESS,
+			payload: featureDefinition,
+		});
+
+		// After creation, switch wizard to edit mode
+		dispatch(setWizardMode("edit"));
+	};
+}
+
+function createFeatureFailure(error) {
+	return { type: FEATURE_CREATE_FAILURE, payload: error };
+}
+
+// Action creators for edit operations
+function editFeatureRequest() {
+	return { type: FEATURE_EDIT_REQUEST };
+}
+
+function editFeatureSuccess(featureDefinition) {
+	return (dispatch) => {
+		// Update menu string with title and icon from edited definition
+		const title = featureDefinition?.title;
+		const icon = featureDefinition?.icon;
+
+		dispatch(updateFeatureBuilderString(title));
+		dispatch(updateFeatureBuilderIcon(icon));
+
+		// Update permission names based on feature title
+		dispatch(updatePermissionNames(title));
+
+		// Dispatch the actual success action
+		dispatch({
+			type: FEATURE_EDIT_SUCCESS,
+			payload: featureDefinition,
+		});
+	};
+}
+
+function editFeatureFailure(error) {
+	return { type: FEATURE_EDIT_FAILURE, payload: error };
+}
+
+// Thunk actions using the new webapi
+export function fetchFeatureDefinitions() {
+	return async (dispatch, getState) => {
+		dispatch(fetchFeaturesRequest());
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const response = await featureDefinitionActions.getSingle(
+				values.featureId,
+				site,
+			);
+
+			// Check HTTP status to determine mode
+			if (response.status >= 200 && response.status < 300) {
+				// 2XX: Feature exists → edit mode
+				dispatch(fetchFeaturesSuccess(response.data, "edit"));
+
+				// Update menu string with title and icon from fetched definition
+				const featureDefinitionWrapper =
+					response.data?.featureDefinition || response.data;
+				const definition =
+					featureDefinitionWrapper?.definition || featureDefinitionWrapper;
+				const title = definition?.title;
+				const icon = definition?.icon;
+				dispatch(updateFeatureBuilderString(title));
+				dispatch(updateFeatureBuilderIcon(icon));
+
+				// Synchronize wizard mode with definition
+				dispatch(syncWizardModeFromDefinition("edit"));
+			} else {
+				// Unexpected success status → treat as error
+				dispatch(
+					fetchFeaturesFailure(
+						new Error(`Unexpected response status: ${response.status}`),
+					),
+				);
+			}
+		} catch (err) {
+			// Check if it's a 404 (feature doesn't exist)
+			if (err.response && err.response.status === 404) {
+				// 404: Feature doesn't exist → create mode
+				dispatch(fetchFeaturesSuccess(null, "create"));
+
+				// Reset menu string to default when no feature exists
+				dispatch(updateFeatureBuilderString(null));
+
+				// Synchronize wizard mode with definition
+				dispatch(syncWizardModeFromDefinition("create"));
+			} else {
+				// Other errors: network, server, auth
+				dispatch(fetchFeaturesFailure(err));
+			}
+		}
+	};
+}
+
+export function fetchFeatureDefinition(id) {
+	return async (dispatch, getState) => {
+		dispatch(fetchFeaturesRequest());
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const { data } = await featureDefinitionActions.getSingle(id, site);
+			dispatch(fetchFeaturesSuccess(data));
+		} catch (err) {
+			dispatch(fetchFeaturesFailure(err));
+		}
+	};
+}
+
+export function createFeatureDefinition(id, site, featureDefinition) {
+	return async (dispatch) => {
+		dispatch(createFeatureRequest());
+		try {
+			if (!values.featureId || !site) {
+				throw new Error(
+					"Authentication error: Missing required context (featureId or site).",
+				);
+			}
+			const { data } = await featureDefinitionActions.create(
+				id,
+				site,
+				featureDefinition,
+			);
+			dispatch(createFeatureSuccess(data));
+		} catch (err) {
+			dispatch(createFeatureFailure(err));
+		}
+	};
+}
+
+export function editFeatureDefinition(featureDefinitionData) {
+	return async (dispatch, getState) => {
+		dispatch(editFeatureRequest());
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const { data } = await featureDefinitionActions.edit(
+				featureDefinitionData,
+				site,
+			);
+			dispatch(editFeatureSuccess(data));
+		} catch (err) {
+			dispatch(editFeatureFailure(err));
+		}
+	};
+}
+
+export function deleteFeatureDefinition(id) {
+	return async (dispatch, getState) => {
+		dispatch(deleteFeatureRequest({ id }));
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			await featureDefinitionActions.delete(id, site);
+		} catch (err) {
+			dispatch(deleteFeatureFailure({ id }));
+		}
+	};
+}