react-ternary-be-gone 0.1.0

package/Conditional.js

@@ -0,0 +1,195 @@
+import React, { useMemo, useEffect } from 'react';
+
+const Conditional = ({
+  when,
+  each,
+  children,
+  fallback = null,
+  empty = null,
+  loading = false,
+  error = null,
+  keyExtractor = (item, index) => index,
+  // New features
+  filter = null,
+  sort = null,
+  limit = null,
+  reverse = false,
+  animate = false,
+  wrapper = React.Fragment,
+  debug = false,
+  onRender = null,
+  // Conditional rendering helpers
+  gt = null, // greater than
+  lt = null, // less than
+  eq = null, // equal
+  ne = null, // not equal
+  includes = null,
+  startsWith = null,
+  endsWith = null,
+  match = null, // regex match
+}) => {
+  const hasCondition = when !== undefined;
+  const hasIteration = each !== undefined;
+
+  // Advanced condition evaluation
+  const evaluateCondition = useMemo(() => {
+    if (when !== undefined) return Boolean(when);
+
+    // Numerical comparisons
+    if (gt !== null && typeof gt === 'object') {
+      const { value, target } = gt;
+      return value > target;
+    }
+    if (lt !== null && typeof lt === 'object') {
+      const { value, target } = lt;
+      return value < target;
+    }
+    if (eq !== null && typeof eq === 'object') {
+      const { value, target } = eq;
+      return value === target;
+    }
+    if (ne !== null && typeof ne === 'object') {
+      const { value, target } = ne;
+      return value !== target;
+    }
+
+    // String operations
+    if (includes !== null && typeof includes === 'object') {
+      const { value, target } = includes;
+      return String(value).includes(target);
+    }
+    if (startsWith !== null && typeof startsWith === 'object') {
+      const { value, target } = startsWith;
+      return String(value).startsWith(target);
+    }
+    if (endsWith !== null && typeof endsWith === 'object') {
+      const { value, target } = endsWith;
+      return String(value).endsWith(target);
+    }
+    if (match !== null && typeof match === 'object') {
+      const { value, pattern } = match;
+      return new RegExp(pattern).test(String(value));
+    }
+
+    return true;
+  }, [when, gt, lt, eq, ne, includes, startsWith, endsWith, match]);
+
+  // Array processing
+  const processedArray = useMemo(() => {
+    if (!hasIteration || !Array.isArray(each)) return [];
+
+    let result = [...each];
+
+    // Apply filter
+    if (filter && typeof filter === 'function') {
+      result = result.filter(filter);
+    }
+
+    // Apply sort
+    if (sort && typeof sort === 'function') {
+      result = result.sort(sort);
+    }
+
+    // Apply reverse
+    if (reverse) {
+      result = result.reverse();
+    }
+
+    // Apply limit
+    if (limit && typeof limit === 'number') {
+      result = result.slice(0, limit);
+    }
+
+    if (debug) {
+      console.log('Conditional Debug:', {
+        original: each,
+        processed: result,
+        filter: !!filter,
+        sort: !!sort,
+        reverse,
+        limit
+      });
+    }
+
+    return result;
+  }, [each, filter, sort, reverse, limit, hasIteration, debug]);
+
+  // Render callback
+  useEffect(() => {
+    if (onRender && typeof onRender === 'function') {
+      onRender({
+        condition: evaluateCondition,
+        itemCount: processedArray.length,
+        hasCondition,
+        hasIteration
+      });
+    }
+  }, [evaluateCondition, processedArray.length, hasCondition, hasIteration, onRender]);
+
+  // Loading state
+  if (loading) {
+    return fallback || <div className="conditional-loading">Loading...</div>;
+  }
+
+  // Error state
+  if (error) {
+    return <div className="conditional-error">Error: {error}</div>;
+  }
+
+  // Wrapper component
+  const WrapperComponent = wrapper;
+
+  // Only condition
+  if (hasCondition && !hasIteration) {
+    return evaluateCondition ? (
+      <WrapperComponent>
+        {children}
+      </WrapperComponent>
+    ) : fallback;
+  }
+
+  // Only iteration
+  if (!hasCondition && hasIteration) {
+    if (processedArray.length === 0) {
+      return empty || fallback;
+    }
+
+    const elements = processedArray.map((item, index) => (
+      <React.Fragment key={keyExtractor(item, index)}>
+        {typeof children === 'function' ? children(item, index, processedArray) : children}
+      </React.Fragment>
+    ));
+
+    return animate ? (
+      <WrapperComponent className="conditional-animated">
+        {elements}
+      </WrapperComponent>
+    ) : (
+      <WrapperComponent>
+        {elements}
+      </WrapperComponent>
+    );
+  }
+
+  // Both condition and iteration
+  if (hasCondition && hasIteration) {
+    if (!evaluateCondition) return fallback;
+    if (processedArray.length === 0) return empty || fallback;
+
+    const elements = processedArray.map((item, index) => (
+      <React.Fragment key={keyExtractor(item, index)}>
+        {children(item, index, processedArray)}
+      </React.Fragment>
+    ));
+
+    return (
+      <WrapperComponent>
+        {elements}
+      </WrapperComponent>
+    );
+  }
+
+  return <WrapperComponent>{children}</WrapperComponent>;
+};
+
+export default Conditional;

package/README.md

@@ -0,0 +1,639 @@
+```markdown
+# React Conditional Component
+
+A React component designed to simplify conditional rendering and list iteration, providing a more readable and maintainable alternative to ternary operators and verbose conditional logic.
+
+## Installation
+
+```bash
+npm install react-ternary-be-gone
+# or
+yarn add react-ternary-be-gone
+```
+
+## Usage
+
+```javascript
+import Conditional from 'react-ternary-be-gone';
+
+// Basic conditional rendering
+<Conditional when={true}>
+  <p>This will be rendered.</p>
+</Conditional>
+
+<Conditional when={55>33}>
+  <p>55 is bigger than 33</p>
+</Conditional>
+
+<Conditional when={false} fallback={<p>This is the fallback.</p>}>
+  <p>This will not be rendered.</p>
+</Conditional>
+
+// Iterating over a list
+const items = ['Item 1', 'Item 2', 'Item 3'];
+
+<Conditional each={items}>
+  {(item, index) => <p key={index}>{item}</p>}
+</Conditional>
+```
+
+## Props
+
+### `when`
+
+A boolean value that determines whether the children should be rendered.
+
+**Type:** `boolean`
+
+**Example:**
+
+```javascript
+<Conditional when={isLoggedIn}>
+  <p>Welcome, user!</p>
+</Conditional>
+```
+
+### `each`
+
+An array to iterate over and render children for each item.
+
+**Type:** `array`
+
+**Example:**
+
+```javascript
+const data = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
+
+<Conditional each={data}>
+  {(item, index) => <p key={item.id}>{item.name}</p>}
+</Conditional>
+```
+
+### `children`
+
+The content to be rendered based on the `when` condition or for each item in the `each` array. Can be a React node or a render prop function.
+
+**Type:** `ReactNode | (item: any, index: number, array: any[]) => ReactNode`
+
+**Example (ReactNode):**
+
+```javascript
+<Conditional when={true}>
+  <p>This is a simple paragraph.</p>
+</Conditional>
+```
+
+**Example (Render Prop):**
+
+```javascript
+const items = ['A', 'B', 'C'];
+
+<Conditional each={items}>
+  {(item, index) => <p key={index}>Item {index + 1}: {item}</p>}
+</Conditional>
+```
+
+### `fallback`
+
+The content to be rendered if the `when` condition is false or the `each` array is empty.
+
+**Type:** `ReactNode`
+
+**Example:**
+
+```javascript
+<Conditional when={false} fallback={<p>Not logged in.</p>}>
+  <p>Welcome!</p>
+</Conditional>
+```
+
+### `empty`
+
+The content to be rendered if the `each` array is empty. Overrides `fallback` when iterating.
+
+**Type:** `ReactNode`
+
+**Example:**
+
+```javascript
+const emptyList = [];
+
+<Conditional each={emptyList} empty={<p>No items found.</p>}>
+  {(item) => <p>{item}</p>}
+</Conditional>
+```
+
+### `loading`
+
+A boolean value indicating whether the component is in a loading state. If true, the `fallback` prop (or a default loading message) will be rendered.
+
+**Type:** `boolean`
+
+**Example:**
+
+```javascript
+<Conditional loading={isLoading} fallback={<p>Loading data...</p>}>
+  <p>Data loaded!</p>
+</Conditional>
+```
+
+### `error`
+
+An error message to be displayed if an error occurs.
+
+**Type:** `string`
+
+**Example:**
+
+```javascript
+<Conditional error={errorMessage}>
+  <p>Content.</p>
+</Conditional>
+```
+
+### `keyExtractor`
+
+A function to extract a unique key for each item when iterating over the `each` array.
+
+**Type:** `(item: any, index: number) => string | number`
+
+**Default:** `(item, index) => index`
+
+**Example:**
+
+```javascript
+const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
+
+<Conditional each={users} keyExtractor={(user) => user.id}>
+  {(user) => <p key={user.id}>{user.name}</p>}
+</Conditional>
+```
+
+### `filter`
+
+A function to filter the `each` array before rendering.
+
+**Type:** `(item: any) => boolean`
+
+**Example:**
+
+```javascript
+const numbers = [1, 2, 3, 4, 5, 6];
+
+<Conditional each={numbers} filter={(num) => num % 2 === 0}>
+  {(num) => <p>{num}</p>} {/* Renders 2, 4, 6 */}
+</Conditional>
+```
+
+### `sort`
+
+A function to sort the `each` array before rendering.
+
+**Type:** `(a: any, b: any) => number`
+
+**Example:**
+
+```javascript
+const items = [{ name: 'Charlie' }, { name: 'Alice' }, { name: 'Bob' }];
+
+<Conditional each={items} sort={(a, b) => a.name.localeCompare(b.name)}>
+  {(item) => <p>{item.name}</p>} {/* Renders Alice, Bob, Charlie */}
+</Conditional>
+```
+
+### `limit`
+
+A number to limit the number of items rendered from the `each` array.
+
+**Type:** `number`
+
+**Example:**
+
+```javascript
+const items = ['A', 'B', 'C', 'D', 'E'];
+
+<Conditional each={items} limit={3}>
+  {(item) => <p>{item}</p>} {/* Renders A, B, C */}
+</Conditional>
+```
+
+### `reverse`
+
+A boolean value indicating whether to reverse the order of the `each` array before rendering.
+
+**Type:** `boolean`
+
+**Example:**
+
+```javascript
+const items = ['A', 'B', 'C'];
+
+<Conditional each={items} reverse>
+  {(item) => <p>{item}</p>} {/* Renders C, B, A */}
+</Conditional>
+```
+
+### `animate`
+
+A boolean value indicating whether to add a CSS class for animation purposes.  You'll need to define the `.conditional-animated` CSS class in your project.
+
+**Type:** `boolean`
+
+**Example:**
+
+```javascript
+<Conditional each={items} animate>
+  {(item) => <p>{item}</p>}
+</Conditional>
+
+/* CSS (Example) */
+.conditional-animated {
+  /* Your animation styles here */
+  transition: all 0.3s ease-in-out;
+}
+```
+
+### `wrapper`
+
+A React component or element to wrap the rendered children.  Defaults to `React.Fragment`.
+
+**Type:** `React.ComponentType`
+
+**Example:**
+
+```javascript
+<Conditional each={items} wrapper="ul">
+  {(item) => <li key={item}>{item}</li>}
+</Conditional>
+
+// Or with a custom component:
+const MyWrapper = ({ children }) => <div className="my-wrapper">{children}</div>;
+
+<Conditional each={items} wrapper={MyWrapper}>
+  {(item) => <p>{item}</p>}
+</Conditional>
+```
+
+### `debug`
+
+A boolean value that, when true, logs debugging information to the console, including the original and processed arrays.
+
+**Type:** `boolean`
+
+**Example:**
+
+```javascript
+<Conditional each={items} debug>
+  {(item) => <p>{item}</p>}
+</Conditional>
+```
+
+### `onRender`
+
+A callback function that is called after the component renders. Provides information about the condition, item count, and whether the component is rendering conditionally or iterating.
+
+**Type:** `(data: { condition: boolean, itemCount: number, hasCondition: boolean, hasIteration: boolean }) => void`
+
+**Example:**
+
+```javascript
+<Conditional
+  each={items}
+  onRender={({ itemCount }) => console.log(`Rendered ${itemCount} items`)}
+>
+  {(item) => <p>{item}</p>}
+</Conditional>
+```
+
+### Advanced Condition Evaluation Props
+
+These props allow for more complex conditional checks without needing to define a separate `when` prop.  Only one of these props should be used at a time.
+
+#### `gt` (Greater Than)
+
+Renders children if `value` is greater than `target`.
+
+**Type:** `{ value: number, target: number }`
+
+**Example:**
+
+```javascript
+<Conditional gt={{ value: 10, target: 5 }}>
+  <p>10 is greater than 5</p>
+</Conditional>
+```
+
+#### `lt` (Less Than)
+
+Renders children if `value` is less than `target`.
+
+**Type:** `{ value: number, target: number }`
+
+**Example:**
+
+```javascript
+<Conditional lt={{ value: 3, target: 7 }}>
+  <p>3 is less than 7</p>
+</Conditional>
+```
+
+#### `eq` (Equal)
+
+Renders children if `value` is equal to `target`.
+
+**Type:** `{ value: any, target: any }`
+
+**Example:**
+
+```javascript
+<Conditional eq={{ value: 'hello', target: 'hello' }}>
+  <p>The strings are equal</p>
+</Conditional>
+```
+
+#### `ne` (Not Equal)
+
+Renders children if `value` is not equal to `target`.
+
+**Type:** `{ value: any, target: any }`
+
+**Example:**
+
+```javascript
+<Conditional ne={{ value: 1, target: 2 }}>
+  <p>1 is not equal to 2</p>
+</Conditional>
+```
+
+#### `includes`
+
+Renders children if `value` (converted to a string) includes `target`.
+
+**Type:** `{ value: string, target: string }`
+
+**Example:**
+
+```javascript
+<Conditional includes={{ value: 'hello world', target: 'world' }}>
+  <p>The string includes "world"</p>
+</Conditional>
+```
+
+#### `startsWith`
+
+Renders children if `value` (converted to a string) starts with `target`.
+
+**Type:** `{ value: string, target: string }`
+
+**Example:**
+
+```javascript
+<Conditional startsWith={{ value: 'hello world', target: 'hello' }}>
+  <p>The string starts with "hello"</p>
+</Conditional>
+```
+
+#### `endsWith`
+
+Renders children if `value` (converted to a string) ends with `target`.
+
+**Type:** `{ value: string, target: string }`
+
+**Example:**
+
+```javascript
+<Conditional endsWith={{ value: 'hello world', target: 'world' }}>
+  <p>The string ends with "world"</p>
+</Conditional>
+```
+
+#### `match`
+
+Renders children if `value` (converted to a string) matches the provided regular expression `pattern`.
+
+**Type:** `{ value: string, pattern: string }`
+
+**Example:**
+
+```javascript
+<Conditional match={{ value: 'hello 123', pattern: '\\d+' }}>
+  <p>The string contains a number</p>
+</Conditional>
+```
+
+---
+
+## `useConditionalHelpers` Hook
+
+A hook providing helper functions to simplify common conditional logic and array manipulation tasks.
+
+### Usage
+
+```javascript
+import { useConditionalHelpers } from 'react-ternary-be-gone';
+
+const MyComponent = () => {
+  const { isEmpty, isNotEmpty, hasLength, isEven, isOdd, sortBy, filterBy, unique } = useConditionalHelpers();
+  const myArray = [1, 2, 3];
+
+  return (
+    <>
+      <Conditional {...isEmpty(myArray)}>
+        <p>Array is empty</p>
+      </Conditional>
+      <Conditional {...isNotEmpty(myArray)}>
+        <p>Array is not empty</p>
+      </Conditional>
+    </>
+  );
+};
+```
+
+### Helper Functions
+
+#### `isEmpty(array)`
+
+Checks if an array is empty or null/undefined.  Returns an object suitable for the `when` prop.
+
+**Parameters:**
+
+*   `array`: The array to check.
+
+**Returns:** `{ when: boolean }`
+
+**Example:**
+
+```javascript
+const { isEmpty } = useConditionalHelpers();
+const emptyArray = [];
+
+<Conditional {...isEmpty(emptyArray)}>
+  <p>This array is empty.</p>
+</Conditional>
+```
+
+#### `isNotEmpty(array)`
+
+Checks if an array is not empty. Returns an object suitable for the `when` prop.
+
+**Parameters:**
+
+*   `array`: The array to check.
+
+**Returns:** `{ when: boolean }`
+
+**Example:**
+
+```javascript
+const { isNotEmpty } = useConditionalHelpers();
+const myArray = [1, 2, 3];
+
+<Conditional {...isNotEmpty(myArray)}>
+  <p>This array is not empty.</p>
+</Conditional>
+```
+
+#### `hasLength(array, length)`
+
+Checks if an array has a specific length. Returns an object suitable for the `when` prop.
+
+**Parameters:**
+
+*   `array`: The array to check.
+*   `length`: The expected length.
+
+**Returns:** `{ when: boolean }`
+
+**Example:**
+
+```javascript
+const { hasLength } = useConditionalHelpers();
+const myArray = [1, 2, 3];
+
+<Conditional {...hasLength(myArray, 3)}>
+  <p>This array has a length of 3.</p>
+</Conditional>
+```
+
+#### `isEven(num)`
+
+Checks if a number is even. Returns an object suitable for the `when` prop.
+
+**Parameters:**
+
+*   `num`: The number to check.
+
+**Returns:** `{ when: boolean }`
+
+**Example:**
+
+```javascript
+const { isEven } = useConditionalHelpers();
+
+<Conditional {...isEven(4)}>
+  <p>4 is an even number.</p>
+</Conditional>
+```
+
+#### `isOdd(num)`
+
+Checks if a number is odd. Returns an object suitable for the `when` prop.
+
+**Parameters:**
+
+*   `num`: The number to check.
+
+**Returns:** `{ when: boolean }`
+
+**Example:**
+
+```javascript
+const { isOdd } = useConditionalHelpers();
+
+<Conditional {...isOdd(5)}>
+  <p>5 is an odd number.</p>
+</Conditional>
+```
+
+#### `sortBy(field, order = 'asc')`
+
+Returns a sort function to sort an array of objects by a specific field.  Suitable for the `sort` prop.
+
+**Parameters:**
+
+*   `field`: The field to sort by.
+*   `order`:  The sort order ('asc' or 'desc'). Defaults to 'asc'.
+
+**Returns:** `(a: any, b: any) => number`
+
+**Example:**
+
+```javascript
+const { sortBy } = useConditionalHelpers();
+const items = [{ name: 'Charlie' }, { name: 'Alice' }, { name: 'Bob' }];
+
+<Conditional each={items} sort={sortBy('name')}>
+  {(item) => <p>{item.name}</p>} {/* Renders Alice, Bob, Charlie */}
+</Conditional>
+
+<Conditional each={items} sort={sortBy('name', 'desc')}>
+  {(item) => <p>{item.name}</p>} {/* Renders Charlie, Bob, Alice */}
+</Conditional>
+```
+
+#### `filterBy(field, value)`
+
+Returns a filter function to filter an array of objects by a specific field and value. Suitable for the `filter` prop.
+
+**Parameters:**
+
+*   `field`: The field to filter by.
+*   `value`: The value to filter for.
+
+**Returns:** `(item: any) => boolean`
+
+**Example:**
+
+```javascript
+const { filterBy } = useConditionalHelpers();
+const users = [{ id: 1, name: 'Alice', active: true }, { id: 2, name: 'Bob', active: false }];
+
+<Conditional each={users} filter={filterBy('active', true)}>
+  {(user) => <p>{user.name}</p>} {/* Renders Alice */}
+</Conditional>
+```
+
+#### `unique(array, key)`
+
+Returns a new array with only unique items, based on a key or a key extractor function.
+
+**Parameters:**
+
+*   `array`: The array to process.
+*   `key`: The key to use for uniqueness (string) or a function that extracts the key (function).
+
+**Returns:** `any[]`
+
+**Example:**
+
+```javascript
+const { unique } = useConditionalHelpers();
+const items = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' }];
+
+const uniqueItems = unique(items, 'id'); // Removes the duplicate ID 1
+// uniqueItems will be: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
+
+const items2 = [{name: "Apple", color: "red"}, {name: "Banana", color: "yellow"}, {name: "Cherry", color: "red"}];
+const uniqueItems2 = unique(items2, (item) => item.color);
+// uniqueItems2 will be: [{name: "Apple", color: "red"}, {name: "Banana", color: "yellow"}]
+```
+
+---
+
+## Contributing
+
+Contributions are welcome! Please fork the repository and submit a pull request.
+
+## License
+
+MIT

package/index.js

@@ -0,0 +1,5 @@
+import Conditional from './Conditional';
+import { useConditionalHelpers } from './useConditionalHelpers';
+
+export default Conditional;
+export { useConditionalHelpers };

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-ternary-be-gone",
+  "version": "0.1.0",
+  "description": "A React component designed to simplify conditional rendering and list iteration, providing a more readable and maintainable alternative to ternary operators and verbose conditional logic.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sundowatch/react-ternary-be-gone.git"
+  },
+  "keywords": [
+    "react",
+    "no",
+    "ternary"
+  ],
+  "author": "Ibrahim Sanduvaç",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sundowatch/react-ternary-be-gone/issues"
+  },
+  "homepage": "https://github.com/sundowatch/react-ternary-be-gone#readme"
+}

package/useConditionalHelpers.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+export const useConditionalHelpers = () => {
+  return useMemo(() => ({
+    // Quick condition helpers
+    isEmpty: (array) => ({ when: !array || array.length === 0 }),
+    isNotEmpty: (array) => ({ when: array && array.length > 0 }),
+    hasLength: (array, length) => ({ when: array && array.length === length }),
+    isEven: (num) => ({ when: num % 2 === 0 }),
+    isOdd: (num) => ({ when: num % 2 !== 0 }),
+
+    // Array processing helpers
+    sortBy: (field, order = 'asc') => (a, b) => {
+      const aValue = a[field];
+      const bValue = b[field];
+
+      if (aValue < bValue) {
+        return order === 'asc' ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return order === 'asc' ? 1 : -1;
+      }
+      return 0;
+    },
+    filterBy: (field, value) => (item) => item[field] === value,
+    unique: (array, key) => {
+      const seen = new Set();
+      return array.filter(item => {
+        const keyValue = typeof key === 'function' ? key(item) : item[key];
+        const isNew = !seen.has(keyValue);
+        seen.add(keyValue);
+        return isNew;
+      });
+    },
+  }), []);
+};