@startupjs-ui/select 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/select
+
+
+
+
+
+## [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))
+* **select:** refactor Select component ([d6e9423](https://github.com/startupjs/startupjs-ui/commit/d6e94234c0732da8e0390b081ac3b0fcf0927f18))

package/README.mdx

@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import Select, { _PropsJsonSchema as SelectPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Select
+
+Inherits [TextInput props](/docs/forms/TextInput).
+
+Select lets user pick one of multiple options. Works similar to HTML's `<select>` tag.
+
+```jsx
+import { Select } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [color, setColor] = useState()
+return (
+  <Select
+    value={color}
+    onChange={setColor}
+    options={[
+      'red',
+      'yellow',
+    ]}
+  />
+)
+```
+
+## Disabled
+
+```jsx example
+return (
+  <Select
+    disabled
+    value='red'
+    options={[
+      'red',
+      'yellow',
+    ]}
+  />
+)
+```
+
+## Readonly
+
+```jsx example
+return (
+  <Select
+    readonly
+    value='red'
+    options={[
+      'red',
+      'yellow',
+    ]}
+  />
+)
+```
+
+## Showing Empty value
+
+By default the empty value is shown. If you want to prevent users from being able to remove the value, pass `showEmptyValue={false}`.
+
+```jsx example
+const [color, setColor] = useState('red')
+return (
+  <Select
+    value={color}
+    onChange={setColor}
+    options={['red', 'yellow', 'blue']}
+    showEmptyValue={false}
+  />
+)
+```
+
+## Change empty value label
+
+You can change label of an empty value by using `emptyValueLabel` property.
+
+```jsx example
+const [color, setColor] = useState()
+return (
+  <Select
+    value={color}
+    onChange={setColor}
+    options={['red', 'yellow', 'blue']}
+    emptyValueLabel='none'
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Select}
+  propsJsonSchema={SelectPropsJsonSchema}
+  props={{
+    value: 'Los Angeles',
+    options: ['New York', 'Los Angeles','Tokyo'],
+    onChange: value => alert('Value ' + value + ' is selected')
+  }}
+  block
+/>

package/Wrapper/helpers.ts

@@ -0,0 +1,64 @@
+export type SelectOption =
+  | string
+  | number
+  | { value?: any, label?: string | number }
+
+// TODO: create logic for objects with circular structure like jsx components
+
+// Stringify values to omit bugs in Android/iOS Picker implementation
+
+// Force undefined to be a special value to
+// workaround the undefined value bug in Picker
+export const PICKER_NULL = '-\u00A0\u00A0\u00A0\u00A0\u00A0'
+export const NULL_OPTION: undefined = undefined
+
+export function stringifyValue (option: any): string | undefined {
+  try {
+    let value: any
+    if (option?.value != null) {
+      value = option.value
+    } else {
+      value = option
+    }
+    if (value == null) return PICKER_NULL
+    return JSON.stringify(value)
+  } catch (error) {
+    console.warn('[@startupjs/ui] Select: ' + String(error))
+  }
+}
+
+export function parseValue (value: any): any {
+  try {
+    if (value === PICKER_NULL || value == null) {
+      return undefined
+    } else {
+      return JSON.parse(value)
+    }
+  } catch (error) {
+    console.warn('[@startupjs/ui] Select: ' + String(error))
+  }
+}
+
+export function getLabel (option: any): string {
+  let label: any
+  if (option?.label != null) {
+    label = option.label
+  } else {
+    label = option
+  }
+  if (label == null) return PICKER_NULL
+  return '' + label
+}
+
+export function getLabelFromValue (
+  value: any,
+  options: SelectOption[],
+  emptyValueLabel: any = NULL_OPTION
+): string {
+  for (const option of options) {
+    if (stringifyValue(value) === stringifyValue(option)) {
+      return getLabel(option)
+    }
+  }
+  return getLabel(emptyValueLabel)
+}

package/Wrapper/index.cssx.styl

@@ -0,0 +1,51 @@
+$grayBlue = #d0d4da
+$whiteGray = #f8f8f8
+$grayLight = #dedede
+
+.root
+  position relative
+
+.overlay
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
+  width 100%
+  height 100%
+  background-color transparent
+  padding 0
+  margin 0
+  z-index 10
+
+  +web()
+    appearance none
+    border-width 0
+    cursor pointer
+    opacity 0
+
+  +android()
+    opacity 0
+
+.modalTop
+  flex 1
+
+.modalMiddle
+  height 6u
+  flex-direction row
+  align-items center
+  padding-right 2u
+  justify-content flex-end
+  background-color $whiteGray
+  border-top-width 1px
+  border-top-color $grayLight
+
+.modalBottom
+  justify-content center
+  background-color $grayBlue
+
+.done
+  color var(--color-text-primary)
+  fontFamily('normal', 600)
+  font(body1)
+

package/Wrapper/index.tsx

@@ -0,0 +1,171 @@
+import { useState, type ReactNode } from 'react'
+import { Modal, Platform } from 'react-native'
+import { Picker } from '@react-native-picker/picker'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import {
+  stringifyValue,
+  getLabel,
+  parseValue,
+  NULL_OPTION,
+  type SelectOption
+} from './helpers'
+import STYLES from './index.cssx.styl'
+
+export interface SelectWrapperProps {
+  /** Custom styles for wrapper */
+  style?: any
+  /** Input element rendered inside wrapper */
+  children?: ReactNode
+  /** Available options @default [] */
+  options?: SelectOption[]
+  /** Current selected value */
+  value?: any
+  /** Disable interactions */
+  disabled?: boolean
+  /** Show empty/none option */
+  showEmptyValue?: boolean
+  /** Label for empty/none option */
+  emptyValueLabel?: string | number
+  /** Test identifier */
+  testID?: string
+  /** Fired when selected value changes */
+  onChange?: (value: any) => void
+}
+
+function SelectWrapper (props: SelectWrapperProps): ReactNode {
+  if (Platform.OS === 'web') return pug`SelectWrapperWeb(...props)`
+  if (Platform.OS === 'ios') return pug`SelectWrapperIOS(...props)`
+  return pug`SelectWrapperAndroid(...props)`
+}
+
+function SelectWrapperWeb ({
+  style,
+  children,
+  options = [],
+  value,
+  disabled,
+  showEmptyValue,
+  emptyValueLabel,
+  testID,
+  onChange
+}: SelectWrapperProps): ReactNode {
+  function onSelectChange (event: any) {
+    const value = event.target.value
+    if (onChange) onChange(parseValue(value))
+  }
+
+  return pug`
+    Div.root(style=style testID=testID)
+      = children
+      if !disabled
+        select(
+          style=STYLES.overlay
+          value=stringifyValue(value)
+          onChange=onSelectChange
+        )
+          if showEmptyValue
+            option(key=-1 value=stringifyValue(NULL_OPTION))
+              = emptyValueLabel || getLabel(NULL_OPTION)
+          each item, index in options
+            option(key=index value=stringifyValue(item))
+              = getLabel(item)
+  `
+}
+
+function SelectWrapperAndroid ({
+  style,
+  children,
+  options = [],
+  value,
+  disabled,
+  showEmptyValue,
+  emptyValueLabel,
+  onChange
+}: SelectWrapperProps): ReactNode {
+  function onValueChange (value: any) {
+    if (onChange) onChange(parseValue(value))
+  }
+
+  return pug`
+    Div.root(style=style)
+      = children
+      if !disabled
+        Picker.overlay(
+          selectedValue=stringifyValue(value)
+          onValueChange=onValueChange
+        )
+          if showEmptyValue
+            Picker.Item(
+              key=-1
+              value=stringifyValue(NULL_OPTION)
+              label=emptyValueLabel || getLabel(NULL_OPTION)
+            )
+          each item, index in options
+            Picker.Item(
+              key=index
+              value=stringifyValue(item)
+              label=getLabel(item)
+            )
+  `
+}
+
+function SelectWrapperIOS ({
+  style,
+  children,
+  options = [],
+  value,
+  disabled,
+  showEmptyValue,
+  emptyValueLabel,
+  onChange
+}: SelectWrapperProps): ReactNode {
+  const [showModal, setShowModal] = useState(false)
+
+  function onValueChange (value: any) {
+    if (onChange) onChange(parseValue(value))
+  }
+
+  return pug`
+    Div.root(style=style)
+      = children
+      if !disabled
+        Div.overlay(
+          activeOpacity=1
+          onPress=() => setShowModal(true)
+        )
+        Modal(
+          visible=showModal
+          transparent
+          animationType='slide'
+        )
+          Div.modalTop(onPress=()=> setShowModal(false))
+          Div.modalMiddle
+            Div(
+              onPress=()=> setShowModal(false)
+              hitSlop={ top: 4, right: 4, bottom: 4, left: 4 }
+            )
+              Span.done Done
+          Div.modalBottom
+            Picker(
+              selectedValue=stringifyValue(value)
+              onValueChange=onValueChange
+            )
+              if showEmptyValue
+                Picker.Item(
+                  key=-1
+                  value=stringifyValue(NULL_OPTION)
+                  label=emptyValueLabel || getLabel(NULL_OPTION)
+                )
+              each item, index in options
+                Picker.Item(
+                  key=index
+                  value=stringifyValue(item)
+                  label=getLabel(item)
+                )
+  `
+}
+
+export default observer(themed('Select', SelectWrapper))

package/index.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type RefObject } from 'react';
+import { type UITextInputProps } from '@startupjs-ui/text-input';
+import { type SelectOption } from './Wrapper/helpers';
+declare const _default: import("react").ComponentType<SelectProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface SelectProps extends Omit<UITextInputProps, 'value' | 'onChangeText' | 'icon' | 'iconPosition' | '_renderWrapper' | 'editable'> {
+    /** Available options (strings, numbers, or objects with `{ value, label }`) @default [] */
+    options?: SelectOption[];
+    /** Current selected value */
+    value?: any;
+    /** Show empty/none option @default true */
+    showEmptyValue?: boolean;
+    /** Label for the empty/none option */
+    emptyValueLabel?: string | number;
+    /** Ref forwarded to underlying TextInput */
+    ref?: RefObject<any>;
+    /** Test identifier passed to wrapper */
+    testID?: string;
+    /** Fired when selected value changes */
+    onChange?: (value: any) => void;
+}

package/index.tsx

@@ -0,0 +1,72 @@
+import { type ReactNode, type RefObject } from 'react'
+import { pug, observer } from 'startupjs'
+import TextInput, { type UITextInputProps } from '@startupjs-ui/text-input'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown'
+import Wrapper from './Wrapper'
+import { getLabelFromValue, type SelectOption } from './Wrapper/helpers'
+
+export default observer(Select)
+
+export const _PropsJsonSchema = {/* SelectProps */} // used in docs generation
+
+export interface SelectProps extends Omit<UITextInputProps, 'value' | 'onChangeText' | 'icon' | 'iconPosition' | '_renderWrapper' | 'editable'> {
+  /** Available options (strings, numbers, or objects with `{ value, label }`) @default [] */
+  options?: SelectOption[]
+  /** Current selected value */
+  value?: any
+  /** Show empty/none option @default true */
+  showEmptyValue?: boolean
+  /** Label for the empty/none option */
+  emptyValueLabel?: string | number
+  /** Ref forwarded to underlying TextInput */
+  ref?: RefObject<any>
+  /** Test identifier passed to wrapper */
+  testID?: string
+  /** Fired when selected value changes */
+  onChange?: (value: any) => void
+}
+
+function Select ({
+  options = [],
+  value,
+  disabled = false,
+  showEmptyValue = true,
+  emptyValueLabel,
+  testID,
+  onChange,
+  ref,
+  ...props
+}: SelectProps): ReactNode {
+  function renderWrapper (
+    { style }: { style?: any },
+    children: ReactNode
+  ): ReactNode {
+    return pug`
+      Wrapper(
+        style=style
+        options=options
+        disabled=disabled
+        value=value
+        onChange=onChange
+        showEmptyValue=showEmptyValue
+        emptyValueLabel=emptyValueLabel
+        testID=testID
+      )= children
+    `
+  }
+
+  return pug`
+    //- TODO
+    //- Add onKeyPress to 'keyDown' key that opens select dropdown
+    TextInput(
+      ref=ref
+      value=getLabelFromValue(value, options, emptyValueLabel)
+      disabled=disabled
+      icon=faAngleDown
+      iconPosition='right'
+      _renderWrapper=renderWrapper
+      editable=false /* HACK: Fixes cursor visibility when focusing on Select because we're focusing on TextInput */
+      ...props
+    )
+  `
+}

package/package.json

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