@startupjs-ui/dialogs 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/dialogs
+
+
+
+
+
+## [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))
+* **dialogs:** refactor DialogsProvider, alert, confirm, prompt ([ec05fd3](https://github.com/startupjs/startupjs-ui/commit/ec05fd38ff1a4254b0acbc219605b3c94091b99f))

package/DialogsProvider.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { pug, observer } from 'startupjs'
+import Modal from '@startupjs-ui/modal'
+import { setUpdateDialogState } from './helpers'
+
+export const _PropsJsonSchema = {/* DialogsProviderProps */}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface DialogsProviderProps {}
+
+function DialogsProviderRoot (): ReactNode {
+  const [dialog = {}, setDialog] = useState<any>()
+
+  // used by alert/confirm/prompt to show a dialog
+  setUpdateDialogState(setDialog)
+
+  useEffect(() => {
+    return () => {
+      setUpdateDialogState(undefined)
+    }
+  }, [])
+
+  return pug`
+    if dialog.visible
+      Modal(
+        ...dialog
+        visible=!!dialog.visible
+        onRequestClose=() => { setDialog(undefined) }
+      )= dialog.children
+  `
+}
+
+export default observer(DialogsProviderRoot) as any

package/README.helpers.js

@@ -0,0 +1,74 @@
+import { Fragment, useState } from 'react'
+import { pug } from 'startupjs'
+import Button from '@startupjs-ui/button'
+import Br from '@startupjs-ui/br'
+import Span from '@startupjs-ui/span'
+import { alert, confirm, prompt } from './index'
+
+export function DialogsProviderSandbox () {
+  async function onPressAlert () {
+    await alert({ title: 'Alert', message: 'I am an alert box' })
+  }
+
+  async function onPressConfirm () {
+    await confirm({ title: 'Confirm', message: 'Press a button' })
+  }
+
+  async function onPressPrompt () {
+    await prompt({ title: 'Prompt', message: 'Please enter your name', defaultValue: 'Paha' })
+  }
+
+  return pug`
+    Fragment
+      Button(onPress=onPressAlert) Show alert
+      Br
+      Button(onPress=onPressConfirm) Show confirm
+      Br
+      Button(onPress=onPressPrompt) Show prompt
+  `
+}
+
+export function AlertSandbox ({ title, message }) {
+  async function onPress () {
+    await alert({ title, message })
+  }
+
+  return pug`
+    Fragment
+      Button(onPress=onPress) Show alert
+  `
+}
+
+export function ConfirmSandbox ({ title, message }) {
+  const [pressedButtonText, setPressedButtonText] = useState()
+
+  async function onPress () {
+    const isConfirmed = await confirm({ title, message })
+    setPressedButtonText(isConfirmed ? 'OK' : 'Cancel')
+  }
+
+  return pug`
+    Fragment
+      Button(onPress=onPress) Show confirm
+      if pressedButtonText
+        Br
+        Span= 'You pressed ' + pressedButtonText + '!'
+  `
+}
+
+export function PromptSandbox ({ title, message, defaultValue }) {
+  const [result, setResult] = useState()
+
+  async function onPress () {
+    const next = await prompt({ title, message, defaultValue })
+    setResult(next)
+  }
+
+  return pug`
+    Fragment
+      Button(onPress=onPress) Show prompt
+      if result != null
+        Br
+        Span= result === '' ? 'Empty input' : 'You typed: ' + result
+  `
+}

package/README.mdx

@@ -0,0 +1,155 @@
+import { useState } from 'react'
+import { pug } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import Button from '@startupjs-ui/button'
+import Br from '@startupjs-ui/br'
+import Span from '@startupjs-ui/span'
+import { alert, confirm, prompt } from './index'
+import { _PropsJsonSchema as DialogsProviderPropsJsonSchema } from './DialogsProvider'
+import { _PropsJsonSchema as AlertOptionsPropsJsonSchema } from './alert'
+import { _PropsJsonSchema as ConfirmOptionsPropsJsonSchema } from './confirm'
+import { _PropsJsonSchema as PromptOptionsPropsJsonSchema } from './prompt'
+import {
+  DialogsProviderSandbox,
+  AlertSandbox,
+  ConfirmSandbox,
+  PromptSandbox
+} from './README.helpers'
+import './index.mdx.cssx.styl'
+
+# Dialogs
+
+There are three kinds of dialog boxes: `alert`, `confirm` and `prompt`.
+
+```js
+import { DialogsProvider, alert, confirm, prompt } from 'startupjs-ui'
+```
+
+## Installation
+
+Render `DialogsProvider` once (without children) as a sibling after your main app content.
+
+```jsx
+import { DialogsProvider, Portal } from 'startupjs-ui'
+import { Stack } from 'expo-router'
+
+export default function RootLayout () {
+  return (
+    <>
+      <Portal.Provider>
+        <Stack />
+      </Portal.Provider>
+      <DialogsProvider />
+    </>
+  )
+}
+```
+
+## Alert box
+
+An alert box is used if you want to display a message to the user that requires their attention.
+
+When an alert box pops up, the user will have to click `OK` to proceed.
+
+```js
+await alert(message | { title?, message })
+```
+
+```jsx example
+async function onPress () {
+  await alert('I am an alert box')
+}
+
+return pug`
+  Button(onPress=onPress) Show alert box
+`
+```
+
+## Confirm box
+
+A confirm box is used if you want to get user's permission for something.
+
+When a confirm box pops up, the user will have to click either `OK` or `Cancel` to proceed.
+
+If the user clicks `OK`, the function returns `true`. If the user clicks `Cancel`, the function returns `false`.
+
+```js
+const result = await confirm(message | { title?, message })
+```
+
+```jsx example
+const [pressedButtonText, setPressedButtonText] = useState()
+
+async function onPress () {
+  const isConfirmed = await confirm('Press a button')
+  setPressedButtonText(isConfirmed ? 'OK' : 'Cancel')
+}
+
+return pug`
+  Button(onPress=onPress) Show confirm box
+  if pressedButtonText
+    Br
+    Span= 'You pressed ' + pressedButtonText + '!'
+`
+```
+
+## Prompt box
+
+A prompt box is used if you want the user to input a value to do further actions.
+
+When a prompt box pops up, the user will have to click either `Cancel` or enter an input value and click `OK` to proceed.
+
+If the user clicks `OK` the function returns the input value. If the user clicks `Cancel` the function returns `null`.
+
+```js
+const result = await prompt(message | { title?, message, defaultValue? }, defaultValue?)
+```
+
+```jsx example
+const [name, setName] = useState()
+
+async function onPress () {
+  const name = await prompt('Please enter your name', 'Paha')
+  setName(name)
+}
+
+return pug`
+  Button(onPress=onPress) Show prompt box
+  if name
+    Br
+    Span= 'Hello ' + name + '.'
+`
+```
+
+## Sandbox
+
+### DialogsProvider
+
+<Sandbox
+  Component={DialogsProviderSandbox}
+  propsJsonSchema={DialogsProviderPropsJsonSchema}
+/>
+
+### alert
+
+<Sandbox
+  Component={AlertSandbox}
+  props={{ title: 'Alert', message: 'I am an alert box' }}
+  propsJsonSchema={AlertOptionsPropsJsonSchema}
+/>
+
+### confirm
+
+<Sandbox
+  Component={ConfirmSandbox}
+  props={{ title: 'Confirm', message: 'Press a button' }}
+  propsJsonSchema={ConfirmOptionsPropsJsonSchema}
+/>
+
+### prompt
+
+<Sandbox
+  Component={PromptSandbox}
+  props={{ title: 'Prompt', message: 'Please enter your name', defaultValue: 'Paha' }}
+  propsJsonSchema={PromptOptionsPropsJsonSchema}
+/>

package/alert.tsx

@@ -0,0 +1,43 @@
+import { openDialog } from './helpers'
+
+export const _PropsJsonSchema = {/* AlertOptions */}
+
+export interface AlertOptions {
+  /** An optional dialog title displayed above the message */
+  title?: string
+  /** The message displayed inside the dialog */
+  message: string
+}
+
+export default async function alert (options: string | AlertOptions): Promise<void> {
+  let title: unknown
+  let message: unknown
+
+  if (typeof options === 'string') {
+    message = options
+  } else if (options && typeof options === 'object') {
+    title = (options as any).title
+    message = (options as any).message
+  }
+
+  if (title != null && typeof title !== 'string') {
+    throw new Error('[@startupjs-ui/dialogs] alert: title should be a string')
+  }
+
+  if (typeof message !== 'string') {
+    throw new Error('[@startupjs-ui/dialogs] alert: message should be a string')
+  }
+
+  const normalizedTitle = typeof title === 'string' ? title : undefined
+
+  await new Promise<void>(resolve => {
+    openDialog({
+      title: normalizedTitle,
+      children: message,
+      cancelLabel: 'OK',
+      onCancel: () => { resolve() },
+      showCross: false,
+      enableBackdropPress: false
+    })
+  })
+}

package/confirm.tsx

@@ -0,0 +1,47 @@
+import { openDialog } from './helpers'
+
+export const _PropsJsonSchema = {/* ConfirmOptions */}
+
+export interface ConfirmOptions {
+  /** An optional dialog title displayed above the message */
+  title?: string
+  /** The message displayed inside the dialog */
+  message: string
+}
+
+export default async function confirm (options: string | ConfirmOptions): Promise<boolean> {
+  let title: unknown
+  let message: unknown
+
+  if (typeof options === 'string') {
+    message = options
+  } else if (options && typeof options === 'object') {
+    title = (options as any).title
+    message = (options as any).message
+  }
+
+  if (title != null && typeof title !== 'string') {
+    throw new Error('[@startupjs-ui/dialogs] confirm: title should be a string')
+  }
+
+  if (typeof message !== 'string') {
+    throw new Error('[@startupjs-ui/dialogs] confirm: message should be a string')
+  }
+
+  const normalizedTitle = typeof title === 'string' ? title : undefined
+
+  const result = await new Promise<boolean>(resolve => {
+    openDialog({
+      title: normalizedTitle,
+      children: message,
+      cancelLabel: 'Cancel',
+      confirmLabel: 'OK',
+      showCross: false,
+      enableBackdropPress: false,
+      onCancel: () => { resolve(false) },
+      onConfirm: () => { resolve(true) }
+    })
+  })
+
+  return result
+}

package/helpers.ts

@@ -0,0 +1,21 @@
+import { type ModalProps } from '@startupjs-ui/modal'
+
+export type UpdateDialogState = (dialog?: any) => void
+
+export let updateDialogState: UpdateDialogState | undefined
+
+export const setUpdateDialogState = (fn?: UpdateDialogState): void => {
+  updateDialogState = fn
+}
+
+export type OpenDialogOptions = Omit<ModalProps, 'visible' | '$visible' | 'ref'>
+
+export const openDialog = (options: OpenDialogOptions): void => {
+  if (!updateDialogState) {
+    throw Error(
+      '[@startupjs-ui/dialogs] dialogs: DialogsProvider is not mounted. ' +
+      'Render <DialogsProvider /> once in your app (usually in _layout) as a sibling after your main content.'
+    )
+  }
+  updateDialogState({ visible: true, ...options })
+}

package/index.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+export { default as DialogsProvider, type DialogsProviderProps } from './DialogsProvider';
+export { default as alert, type AlertOptions } from './alert';
+export { default as confirm, type ConfirmOptions } from './confirm';
+export { default as prompt, type PromptOptions } from './prompt';

package/index.mdx.cssx.styl

@@ -0,0 +1,3 @@
+.table
+  background-color white
+

package/index.tsx

@@ -0,0 +1,4 @@
+export { default as DialogsProvider, type DialogsProviderProps } from './DialogsProvider'
+export { default as alert, type AlertOptions } from './alert'
+export { default as confirm, type ConfirmOptions } from './confirm'
+export { default as prompt, type PromptOptions } from './prompt'

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@startupjs-ui/dialogs",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": "./index.tsx",
+    "./DialogsProvider": "./DialogsProvider.tsx",
+    "./alert": "./alert.tsx",
+    "./confirm": "./confirm.tsx",
+    "./prompt": "./prompt.tsx"
+  },
+  "dependencies": {
+    "@startupjs-ui/br": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/modal": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3",
+    "@startupjs-ui/text-input": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/prompt.tsx

@@ -0,0 +1,73 @@
+import { type ReactNode } from 'react'
+import { pug, $, observer } from 'startupjs'
+import TextInput from '@startupjs-ui/text-input'
+import Br from '@startupjs-ui/br'
+import Span from '@startupjs-ui/span'
+import { openDialog } from './helpers'
+
+export const _PropsJsonSchema = {/* PromptOptions */}
+
+export interface PromptOptions {
+  /** An optional dialog title displayed above the message */
+  title?: string
+  /** The message displayed above the input field */
+  message: string
+  /** An optional initial value for the input field */
+  defaultValue?: string
+}
+
+export default async function prompt (message: string, defaultValue?: string): Promise<string | null>
+export default async function prompt (options: PromptOptions, defaultValue?: string): Promise<string | null>
+export default async function prompt (options: string | PromptOptions, defaultValue?: string): Promise<string | null> {
+  let title: unknown
+  let message: unknown
+
+  if (typeof options === 'string') {
+    message = options
+  } else if (options && typeof options === 'object') {
+    title = (options as any).title
+    message = (options as any).message
+    defaultValue = defaultValue ?? (options as any).defaultValue
+  }
+
+  if (title != null && typeof title !== 'string') {
+    throw new Error('[@startupjs-ui/dialogs] prompt: title should be a string')
+  }
+
+  if (typeof message !== 'string') {
+    throw new Error('[@startupjs-ui/dialogs] prompt: message should be a string')
+  }
+
+  const normalizedTitle = typeof title === 'string' ? title : undefined
+
+  const result = await new Promise<string | null>(resolve => {
+    const $prompt = $(defaultValue)
+
+    openDialog({
+      title: normalizedTitle,
+      children: pug`
+        Span= message
+        Br(half)
+        TextInputWrapper($prompt=$prompt)
+      `,
+      showCross: false,
+      enableBackdropPress: false,
+      cancelLabel: 'Cancel',
+      confirmLabel: 'OK',
+      onCancel: () => { resolve(null) },
+      onConfirm: () => { resolve(($prompt.get() as string | undefined) ?? '') }
+    })
+  })
+
+  return result
+}
+
+// We need to make an observable wrapper so that in auto-rerenders when signal changes
+const TextInputWrapper = observer(({ $prompt }: { $prompt: any }): ReactNode => {
+  return pug`
+    TextInput(
+      value=$prompt.get()
+      onChangeText=text => $prompt.set(text)
+    )
+  `
+})