@startupjs-ui/array-input 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# 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/array-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))
+* **array-input:** refactor ArrayInput component. Fix circular dependency issue in Input/inputs (wrapInput). ([14e7204](https://github.com/startupjs/startupjs-ui/commit/14e720423874cbbae8220160e3f5f0713a44b67a))
+* **object-input:** refactor ObjectInput component ([f21693c](https://github.com/startupjs/startupjs-ui/commit/f21693c7f2a31198f445ec3656fb780feb2269bd))

package/README.mdx

@@ -0,0 +1,47 @@
+import { $ } from 'startupjs'
+import ArrayInput, { _PropsJsonSchema as ArrayInputPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# ArrayInput
+
+ArrayInput lets you build dynamic forms using its declarative API.
+
+ArrayInput accepts an input metadata object with a required `input` key to specify what type of input to display in the `items` 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 { ArrayInput } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const $value = $(['Green', 'Blue'])
+return (
+  <ArrayInput
+    $value={$value}
+    items={{ type: 'text' }}
+  />
+)
+```
+
+## Sandbox
+
+export function SandboxWrapper () {
+  const $value = $(['Green', 'Blue'])
+
+  return (
+    <Sandbox
+      Component={ArrayInput}
+      propsJsonSchema={ArrayInputPropsJsonSchema}
+      props={{
+        $value,
+        items: { type: 'text' }
+      }}
+      block
+    />
+  )
+}
+
+<SandboxWrapper />

package/index.cssx.styl

@@ -0,0 +1,17 @@
+$button = var(--color-text-placeholder)
+
+.item
+  flex-direction row
+
+.input
+  flex 1
+
+.add
+  &:part(icon)
+    color: $button
+
+.actions
+  width 4u
+
+.pushTop
+  margin-top 1u

package/index.d.ts

@@ -0,0 +1,22 @@
+/* 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<ArrayInputProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface ArrayInputProps {
+    /** Custom styles for the wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles for the inner input container */
+    inputStyle?: StyleProp<ViewStyle>;
+    /** Model binding for array values */
+    $value: any;
+    /** Input metadata for array items (must include `input` or `type`) */
+    items: Record<string, any>;
+    /** Custom wrapper renderer (used by Input layout wrappers) */
+    _renderWrapper?: (style: any, children: ReactNode) => ReactNode;
+    [key: string]: any;
+}

package/index.tsx

@@ -0,0 +1,85 @@
+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 Button from '@startupjs-ui/button'
+import Input from '@startupjs-ui/input'
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
+import './index.cssx.styl'
+
+export default observer(
+  themed('ArrayInput', ArrayInput)
+)
+
+export const _PropsJsonSchema = {/* ArrayInputProps */}
+
+export interface ArrayInputProps {
+  /** Custom styles for the wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles for the inner input container */
+  inputStyle?: StyleProp<ViewStyle>
+  /** Model binding for array values */
+  $value: any
+  /** Input metadata for array items (must include `input` or `type`) */
+  items: Record<string, any>
+  /** Custom wrapper renderer (used by Input layout wrappers) */
+  _renderWrapper?: (style: any, children: ReactNode) => ReactNode
+  [key: string]: any
+}
+
+function ArrayInput ({
+  style,
+  inputStyle,
+  $value,
+  items,
+  _renderWrapper
+}: ArrayInputProps): ReactNode {
+  if (!$value || !items) return null
+
+  const arrayLength = $value.get()?.length || 0
+
+  function getInputs () {
+    return Array(arrayLength + 1).fill(null).map((_, index) => {
+      return {
+        ...items,
+        $value: $value[index]
+      }
+    })
+  }
+
+  const inputs = getInputs()
+
+  if (!_renderWrapper) {
+    _renderWrapper = (style, children): ReactNode => {
+      return pug`
+        Div(style=style)= children
+      `
+    }
+  }
+
+  // TODO: Instead of just a delete icon, make a three dots menu with things like:
+  //         - delete
+  //         - move up
+  //         - move down
+  //         - add new item before
+  //         - add new item after
+  return _renderWrapper({
+    style: [style, inputStyle]
+  }, pug`
+    each inputProps, index in inputs
+      Div.item(key=index styleName={ pushTop: index !== 0 })
+        Div.input
+          Input(...inputProps)
+        Div.actions(vAlign='center' align='right')
+          if index < arrayLength
+            Button.remove(
+              tabIndex=-1
+              size='s'
+              variant='text'
+              icon=faTimes
+              onPress=() => $value[index].del()
+              color='text-subtle'
+            )
+  `)
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@startupjs-ui/array-input",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/button": "^0.1.3",
+    "@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"
+}