@startupjs-ui/object-input 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/object-input
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **object-input:** refactor ObjectInput component ([f21693c](https://github.com/startupjs/startupjs-ui/commit/f21693c7f2a31198f445ec3656fb780feb2269bd))

package/README.mdx

@@ -0,0 +1,236 @@
+import { useMemo } from 'react'
+import { $ } from 'startupjs'
+import ObjectInput, { _PropsJsonSchema as ObjectInputPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# ObjectInput
+
+ObjectInput lets you build dynamic forms using its declarative API.
+
+ObjectInput accepts an inputs metadata object with a required `input` key to specify what type of input to display in the `properties` property.
+
+Possible types are: [array](/docs/forms/Array), [checkbox](/docs/forms/Checkbox), [date](/docs/forms/DateTimePicker), [datetime](/docs/forms/DateTimePicker), [multiselect](/docs/forms/Multiselect), [number](/docs/forms/NumberInput), [object](/docs/forms/ObjectInput), [password](/docs/forms/PasswordInput), [radio](/docs/forms/Radio), [select](/docs/forms/Select), [time](/docs/forms/DateTimePicker), [text](/docs/forms/TextInput).
+
+```jsx
+import { ObjectInput } from 'startupjs-ui'
+```
+
+## Simple example
+
+It's important to have `properties` object defined as a constant either outside of your component or cached with `useMemo()`, otherwise component is going to re-render the whole form tree whenever you are editing one of the field.
+
+```jsx example
+const $value = $()
+const properties = useMemo(() => ({
+  email: {
+    input: 'text',
+    label: 'Email'
+  },
+  password: {
+    input: 'text',
+    label: 'Password',
+    description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+  }
+}), [])
+
+return (
+  <ObjectInput
+    $value={$value}
+    properties={properties}
+  />
+)
+```
+
+## Row
+
+You can show nested inputs in a row by passing the `row` flag.
+
+```jsx example
+const $value = $()
+const properties = {
+  email: {
+    input: 'text',
+    label: 'Email'
+  },
+  password: {
+    input: 'text',
+    label: 'Password',
+    description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+  }
+}
+
+return (
+  <ObjectInput
+    $value={$value}
+    properties={properties}
+    row
+  />
+)
+```
+
+## Inputs order
+
+ObjectInput accepts an array in the `order` property to specify in what order should the inputs be displayed.
+
+```jsx example
+const $value = $()
+
+return (
+  <ObjectInput
+    $value={$value}
+    order={['password', 'email']}
+    properties={{
+      email: {
+        input: 'text',
+        label: 'Email'
+      },
+      password: {
+        input: 'text',
+        label: 'Password',
+        description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+      }
+    }}
+  />
+)
+```
+
+## Displaying errors
+
+The `errors` property accepts an object with error texts for inputs, where the key is the input key from the `properties` object and its value is the error text.
+
+```jsx example
+const $value = $()
+
+return (
+  <ObjectInput
+    $value={$value}
+    errors={{
+      email: 'Email input error',
+      password: 'Password input error'
+    }}
+    properties={{
+      email: {
+        input: 'text',
+        label: 'Email'
+      },
+      password: {
+        input: 'text',
+        label: 'Password',
+        description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+      }
+    }}
+  />
+)
+```
+
+## Disabled
+
+```jsx example
+const $value = $()
+
+return (
+  <ObjectInput
+    $value={$value}
+    properties={{
+      email: {
+        input: 'text',
+        label: 'Email'
+      },
+      password: {
+        input: 'text',
+        label: 'Password',
+        description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+      }
+    }}
+    disabled
+  />
+)
+```
+
+## Readonly
+
+```jsx example
+const $value = $({ email: 'startupjs@gmail.com', password: '123456' })
+
+return (
+  <ObjectInput
+    $value={$value}
+    properties={{
+      email: {
+        input: 'text',
+        label: 'Email'
+      },
+      password: {
+        input: 'text',
+        label: 'Password',
+        description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+      }
+    }}
+    readonly
+  />
+)
+```
+
+## Advanced usage
+
+ObjectInput supports `dependsOn` and `dependsValue` properties for each input object in `properties` to dynamically display inputs.
+
+- `dependsOn` is used to specify the object key which the current input depends on
+- `dependsValue` is used to specify at what value of the input with key `dependsOn` should the current input be shown
+
+In the example below the dependent `password` input will only be shown if the `email` input is not empty.
+
+**Caution**: When the `dependsOn` field changes and dependent field is no longer visible its previous value is preserved.
+
+```jsx example
+const $value = $()
+
+return (
+  <ObjectInput
+    $value={$value}
+    properties={{
+      email: {
+        input: 'text',
+        label: 'Email'
+      },
+      password: {
+        input: 'text',
+        label: 'Password',
+        dependsOn: 'email',
+        description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+      }
+    }}
+  />
+)
+```
+
+## Sandbox
+
+export function SandboxWrapper () {
+  const $value = $()
+  const properties = useMemo(() => ({
+    email: {
+      input: 'text',
+      label: 'Email'
+    },
+    password: {
+      input: 'text',
+      label: 'Password',
+      description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+    }
+  }), [])
+
+  return (
+    <Sandbox
+      Component={ObjectInput}
+      propsJsonSchema={ObjectInputPropsJsonSchema}
+      props={{
+        $value,
+        properties
+      }}
+      block
+    />
+  )
+}
+
+<SandboxWrapper />

package/index.cssx.styl

@@ -0,0 +1,8 @@
+.input
+  &.row
+    flex 1
+  &.push
+    &.column
+      margin-top 2u
+    &.row
+      margin-left 2u

package/index.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<ObjectInputProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface ObjectInputProps {
+    /** Custom styles for the wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles for the inner input container */
+    inputStyle?: StyleProp<ViewStyle>;
+    /** Model binding for object values */
+    $value: any;
+    /** Error messages keyed by property name @default {} */
+    errors?: Record<string, any>;
+    /** Input metadata keyed by property name */
+    properties: Record<string, any>;
+    /** Order of rendered inputs */
+    order?: string[];
+    /** Render inputs in a row */
+    row?: boolean;
+    /** Disable interactions */
+    disabled?: boolean;
+    /** Render as read-only */
+    readonly?: boolean;
+    /** Custom wrapper renderer (used by Input layout wrappers) */
+    _renderWrapper?: (params: {
+        style: StyleProp<ViewStyle> | undefined;
+    }, children: ReactNode) => ReactNode;
+}

package/index.tsx

@@ -0,0 +1,123 @@
+import { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Input from '@startupjs-ui/input'
+import './index.cssx.styl'
+
+export default observer(
+  themed('ObjectInput', ObjectInput)
+)
+
+export const _PropsJsonSchema = {/* ObjectInputProps */}
+
+export interface ObjectInputProps {
+  /** Custom styles for the wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles for the inner input container */
+  inputStyle?: StyleProp<ViewStyle>
+  /** Model binding for object values */
+  $value: any
+  /** Error messages keyed by property name @default {} */
+  errors?: Record<string, any>
+  /** Input metadata keyed by property name */
+  properties: Record<string, any>
+  /** Order of rendered inputs */
+  order?: string[]
+  /** Render inputs in a row */
+  row?: boolean
+  /** Disable interactions */
+  disabled?: boolean
+  /** Render as read-only */
+  readonly?: boolean
+  /** Custom wrapper renderer (used by Input layout wrappers) */
+  _renderWrapper?: (params: { style: StyleProp<ViewStyle> | undefined }, children: ReactNode) => ReactNode
+}
+
+function ObjectInput ({
+  style,
+  inputStyle,
+  $value,
+  errors = {},
+  properties,
+  order,
+  row,
+  disabled,
+  readonly,
+  _renderWrapper
+}: ObjectInputProps): ReactNode {
+  if (!$value || !properties) {
+    return null
+  }
+
+  const value = $value.get() || {}
+
+  const resolvedOrder = getOrder(order, properties)
+
+  function getInputs () {
+    return resolvedOrder
+      .filter((key) => {
+        const { dependsOn, dependsValue } = properties[key]
+        return resolvesDeps(value, dependsOn, dependsValue)
+      })
+      .map((key) => {
+        const { dependsOn, dependsValue, ...inputProps } = properties[key]
+        return {
+          ...inputProps,
+          key,
+          $value: $value[key]
+        }
+      // TODO: When the dependsOn field changes and this field is no longer visible -- clear it.
+      }).filter(Boolean)
+  }
+
+  const inputs = getInputs()
+
+  if (inputs.length === 0) return null
+
+  if (!_renderWrapper) {
+    _renderWrapper = ({ style }, children): ReactNode => {
+      return pug`
+        Div(style=style row=row)= children
+      `
+    }
+  }
+
+  return _renderWrapper({
+    style: [style, inputStyle]
+  }, inputs.map(({ key, ...inputProps }, index): ReactNode => pug`
+    Input.input(
+      key=key
+      styleName={ push: index !== 0, row, column: !row }
+      error=errors[key]
+      disabled=disabled
+      readonly=readonly
+      ...inputProps
+    )
+  `))
+}
+
+function getOrder (order: string[] | undefined, properties: Record<string, any>): string[] {
+  return order ?? Object.keys(properties)
+}
+
+function resolvesDeps (
+  value: Record<string, any> = {},
+  dependsOn?: string,
+  dependsValue?: any
+): boolean {
+  if (!dependsOn) return true
+  const dependencyValue = value[dependsOn]
+  return (
+    (dependsValue != null && dependencyValue === dependsValue) ||
+    (dependsValue != null && Array.isArray(dependsValue) &&
+      dependsValue.includes(dependencyValue)
+    ) ||
+    (
+      (dependsValue == null || (typeof dependsValue === 'string' && dependsValue.trim() === '')) &&
+      dependencyValue != null &&
+      !(typeof dependencyValue === 'string' && dependencyValue.trim() === '')
+    )
+  )
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@startupjs-ui/object-input",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/input": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}