config.developerMode

Author: johannesloetzsch

apps/dev/.env

@@ -0,0 +1 @@
+DEVELOPER_MODE=true

apps/dev/next.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   reactStrictMode: true,
   transpilePackages: [],
-  output: 'export'
+  output: 'export',
+  env: {
+    developerMode: process.env.DEVELOPER_MODE
+  }
 };

packages/config/features/config.ts

@@ -0,0 +1,5 @@
+const developerMode = Boolean(process.env.developerMode && process.env.developerMode != 'false');
+
+export const config = {
+  developerMode  /** this option is independent of being a development-build, but specifies if debug features for developers should be enabled **/
+};

packages/config/index.ts

@@ -0,0 +1 @@
+export * from "./features/config";

packages/config/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@formswizard/processing-config",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "build": "tsup index.ts --format esm --dts",
+    "dev": "npm run build -- --watch"
+  },
+  "peerDependencies": {
+  },
+  "devDependencies": {
+    "eslint": "^8.48.0",
+    "eslint-config-custom": "workspace:*",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+  }
+}

packages/config/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
+}

packages/example/features/app/Tabs.tsx

@@ -7,6 +7,9 @@ import ViewTimelineIcon from '@mui/icons-material/ViewTimeline';
 import ViewWeekIcon from '@mui/icons-material/ViewWeek';
 import HubIcon from '@mui/icons-material/Hub';
 import BarChartIcon from '@mui/icons-material/BarChart';
+import LogoDevIcon from '@mui/icons-material/LogoDev';
+
+import { config } from '@formswizard/processing-config';
 
 const notYetImplemented = <p>Not Yet Implemented</p>;
 
@@ -17,5 +20,6 @@ export const tabs = [
   {icon: <ViewWeekIcon/>, label: "Kanban", content: notYetImplemented},
   {icon: <ViewTimelineIcon/>, label: "Gantt", content: notYetImplemented},
   {icon: <HubIcon/>, label: "Network", content: notYetImplemented},
-  {icon: <BarChartIcon/>, label: "Chart", content: notYetImplemented}
-];
+  {icon: <BarChartIcon/>, label: "Chart", content: notYetImplemented},
+  config.developerMode && {icon: <LogoDevIcon/>, label: "Dev", content: notYetImplemented}
+].filter(t => t);

packages/example/package.json

@@ -18,6 +18,7 @@
     "edit-form": "workspace:*",
     "edit-table": "workspace:*",
     "edit-timeline": "workspace:*",
+    "@formswizard/processing-config": "workspace:*",
     "import": "workspace:*",
     "layout": "workspace:*",
     "react": "^18.2.0",