@modular-component/with-conditional-render 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @modular-component/with-conditional-render
+
+## 0.1.0
+
+### Minor Changes
+
+- be1b38e: Initial release of the ModularComponent system
+
+### Patch Changes
+
+- Updated dependencies [be1b38e]
+  - @modular-component/core@0.1.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright © Jérémie van der Sande
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the “Software”), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+The Software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the
+warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or
+copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise,
+arising from, out of or in connection with the software or the use or other dealings in the Software.

package/README.md

@@ -0,0 +1,50 @@
+# `@modular-component/with-conditional-render`
+
+Provides three stages that allow conditional rendering in `ModularComponent`s:
+
+- `withCondition` will set a `condition` argument to either `true` or `false`, based
+  on current arguments,
+- `withConditionalFallback` takes a `FunctionComponent` as parameter, and
+  renders it when the `condition` argument is set to `false`,
+- `withConditionalRender` also takes a `FunctionComponent` as parameter, and
+  renders it when the `condition` argument is _not_ set to `false`.
+
+`withCondition` and `withConditionalFallback` are multiple, so it's possible
+to chain multiple conditions with a different fallback for each. Subsequent calls
+to `withCondition` will take into account preceding conditions, so that `withConditionalRender`
+is only called when all conditions return `true`.
+
+## Installation and usage
+
+```bash
+yarn add @modular-component/core @modular-component/with-conditional-render
+```
+
+```tsx
+import { modularFactory } from '@modular-component/core'
+import { WithConditionalRender } from '@modular-component/with-conditional-render'
+
+const ModularComponent = modularFactory.extend(WithConditionalRender).build()
+
+const MyModularComponent = ModularComponent<{
+  isAuthenticated: boolean
+  isOwner: boolean
+}>()
+  .withCondition(({ props }) => props.isAuthenticated)
+  .withConditionalFallback(() => (
+    <div>You need to be authenticated to see this page</div>
+  ))
+  .withCondition(({ props }) => props.isOwner)
+  .withConditionalFallback(() => (
+    <div>You don't have enough permissions to see this page</div>
+  ))
+  .withConditionalRender(({ components }) => (
+    <>
+      <h1>Hello, Owner</h1>
+    </>
+  ))
+```
+
+## Learn more
+
+Read the [`ModularComponent` ReadMe](https://github.com/jvdsande/modular-component/blob/master/README.md) for more information about the `ModularComponent` system.

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { FunctionComponent } from 'react';
+export declare const WithConditionalRender: {
+    readonly withCondition: {
+        readonly field: "condition";
+        readonly multiple: true;
+        readonly transform: <A extends {
+            condition?: boolean | undefined;
+        }, C extends (args: A) => boolean>(args: A, useCondition: C) => boolean;
+        readonly restrict: boolean;
+    };
+    readonly withConditionalFallback: {
+        readonly field: "render";
+        readonly multiple: true;
+        readonly transform: <A_1 extends {
+            condition?: boolean | undefined;
+            render?: import("react").ReactElement<any, any> | null | undefined;
+        }, P extends FunctionComponent<A_1>>(args: A_1, useRender: P) => import("react").ReactElement<any, any> | null | undefined;
+        readonly restrict: import("react").ReactElement<any, any> | null;
+    };
+    readonly withConditionalRender: {
+        readonly field: "render";
+        readonly transform: <A_2 extends {
+            condition?: boolean | undefined;
+            render?: import("react").ReactElement<any, any> | null | undefined;
+        }, P_1 extends FunctionComponent<A_2>>(args: A_2, useRender: P_1) => import("react").ReactElement<any, any> | null | undefined;
+        readonly restrict: import("react").ReactElement<any, any> | null;
+    };
+};
+declare module '@modular-component/core' {
+    interface ModularStageTransform<T> {
+        withConditionalFallback: T | null;
+        withConditionalRender: T | null;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,eAAO,MAAM,qBAAqB;;;;;;kCAML,OAAO;;;;;;;;;;;;;;;;;;;;CA4CzB,CAAA;AAEX,OAAO,QAAQ,yBAAyB,CAAC;IACvC,UAAiB,qBAAqB,CAAC,CAAC;QACtC,uBAAuB,EAAE,CAAC,GAAG,IAAI,CAAA;QACjC,qBAAqB,EAAE,CAAC,GAAG,IAAI,CAAA;KAChC;CACF"}

package/dist/index.js

@@ -0,0 +1,32 @@
+import { createMethodRecord } from '@modular-component/core';
+export const WithConditionalRender = createMethodRecord({
+    withCondition: {
+        field: 'condition',
+        multiple: true,
+        transform: (args, useCondition) => args.condition !== false &&
+            (typeof useCondition === 'function' ? useCondition(args) : useCondition),
+        restrict: {},
+    },
+    withConditionalFallback: {
+        field: 'render',
+        multiple: true,
+        transform: (args, useRender) => {
+            if (args.condition !== false || args.render) {
+                return args.render;
+            }
+            return typeof useRender === 'function' ? useRender(args) : useRender;
+        },
+        restrict: {},
+    },
+    withConditionalRender: {
+        field: 'render',
+        transform: (args, useRender) => {
+            if (args.condition === false) {
+                return args.render;
+            }
+            return typeof useRender === 'function' ? useRender(args) : useRender;
+        },
+        restrict: {},
+    },
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAG5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;IACtD,aAAa,EAAE;QACb,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,CAIT,IAAO,EACP,YAAe,EACf,EAAE,CACF,IAAI,CAAC,SAAS,KAAK,KAAK;YACxB,CAAC,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;QAC1E,QAAQ,EAAE,EAAa;KACxB;IACD,uBAAuB,EAAE;QACvB,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,CAIT,IAAO,EACP,SAAY,EACZ,EAAE;YACF,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE;gBAC3C,OAAO,IAAI,CAAC,MAAM,CAAA;aACnB;YAED,OAAO,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACtE,CAAC;QACD,QAAQ,EAAE,EAAmC;KAC9C;IACD,qBAAqB,EAAE;QACrB,KAAK,EAAE,QAAQ;QACf,SAAS,EAAE,CAIT,IAAO,EACP,SAAY,EACZ,EAAE;YACF,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE;gBAC5B,OAAO,IAAI,CAAC,MAAM,CAAA;aACnB;YAED,OAAO,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACtE,CAAC;QACD,QAAQ,EAAE,EAAmC;KAC9C;CACO,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@modular-component/with-conditional-render",
+  "description": "ModularComponent stage for handling conditional rendering and fallbacks",
+  "keywords": [
+    "React",
+    "Modular",
+    "Factory",
+    "Default",
+    "Conditional"
+  ],
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "yarn build:core && yarn build:self",
+    "build:core": "yarn workspace @modular-component/core build",
+    "build:self": "tsc -p tsconfig.build.json",
+    "license": "cp ../../LICENSE ./LICENSE"
+  },
+  "dependencies": {
+    "@modular-component/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17 <19"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "typescript": "^4.6.4"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts"
+}

package/src/index.ts

@@ -0,0 +1,61 @@
+import { createMethodRecord } from '@modular-component/core'
+import { FunctionComponent } from 'react'
+
+export const WithConditionalRender = createMethodRecord({
+  withCondition: {
+    field: 'condition',
+    multiple: true,
+    transform: <
+      A extends { condition?: boolean },
+      C extends (args: A) => boolean,
+    >(
+      args: A,
+      useCondition: C,
+    ) =>
+      args.condition !== false &&
+      (typeof useCondition === 'function' ? useCondition(args) : useCondition),
+    restrict: {} as boolean,
+  },
+  withConditionalFallback: {
+    field: 'render',
+    multiple: true,
+    transform: <
+      A extends { condition?: boolean; render?: ReturnType<FunctionComponent> },
+      P extends FunctionComponent<A>,
+    >(
+      args: A,
+      useRender: P,
+    ) => {
+      if (args.condition !== false || args.render) {
+        return args.render
+      }
+
+      return typeof useRender === 'function' ? useRender(args) : useRender
+    },
+    restrict: {} as ReturnType<FunctionComponent>,
+  },
+  withConditionalRender: {
+    field: 'render',
+    transform: <
+      A extends { condition?: boolean; render?: ReturnType<FunctionComponent> },
+      P extends FunctionComponent<A>,
+    >(
+      args: A,
+      useRender: P,
+    ) => {
+      if (args.condition === false) {
+        return args.render
+      }
+
+      return typeof useRender === 'function' ? useRender(args) : useRender
+    },
+    restrict: {} as ReturnType<FunctionComponent>,
+  },
+} as const)
+
+declare module '@modular-component/core' {
+  export interface ModularStageTransform<T> {
+    withConditionalFallback: T | null
+    withConditionalRender: T | null
+  }
+}