@startupjs-ui/button 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/button
+
+
+
+
+
+## [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))
+* **button:** refactor Button component ([96de289](https://github.com/startupjs/startupjs-ui/commit/96de2890f0c080c4147d93275942a8ce5d670571))

package/README.mdx

@@ -0,0 +1,195 @@
+import { useState } from 'react'
+import { pug } from 'startupjs'
+import Button, { _PropsJsonSchema as ButtonPropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Br from '@startupjs-ui/br'
+import { Sandbox } from '@startupjs-ui/docs'
+import {
+  faHouseUser,
+  faCheck,
+  faCoffee
+} from '@fortawesome/free-solid-svg-icons'
+import './index.mdx.cssx.styl'
+
+# Button
+
+Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+
+```jsx
+import { Button } from 'startupjs-ui'
+```
+
+## Simple example
+```jsx example
+const [counter, setCounter] = useState(0)
+
+return (
+  <Button onPress={() => setCounter(counter + 1)}>
+    Clicked {counter} times
+  </Button>
+)
+```
+
+## Async button
+
+```jsx example
+async function onPress() {
+  await new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve()
+    }, 5000)
+  })
+}
+
+return (
+  <Button onPress={onPress}>
+    Async button
+  </Button>
+)
+```
+
+## Variants
+
+The `variant` property is responsible for the external display of the button (affects the color of the icon and button text). Default value is `outlined`.
+
+```jsx example
+return pug`
+  Div
+    Button(
+      onPress=() => console.log('pressed')
+      icon=faCoffee
+    ) Outlined
+    Br
+    Button(
+      onPress=() => console.log('pressed')
+      variant='flat'
+      icon=faCoffee
+    ) Flat
+    Br
+    Button(
+      onPress=() => console.log('pressed')
+      variant='text'
+      icon=faCoffee
+    ) Text
+`
+```
+
+## Colors
+
+Color is `secondary` by default. It can be changed by passing color name from the config colors to `color` property. Possible values of property can be found in the `Sandbox` section at the bottom of the page.
+
+```jsx example
+return (
+  <Div>
+    <Button onPress={() => console.log('pressed')} variant='flat'>
+      Default dark
+    </Button>
+    <Br />
+    <Button onPress={() => console.log('pressed')} color='primary' variant='flat'>
+      Primary
+    </Button>
+    <Br />
+    <Button onPress={() => console.log('pressed')} color='success' variant='flat'>
+      Success
+    </Button>
+    <Br />
+    <Button onPress={() => console.log('pressed')} color='error' variant='flat'>
+      Error
+    </Button>
+  </Div>
+)
+```
+
+## Sizes
+
+The `size` property applies to the button size, icon and button text. Default value is `m`. Possible values of property can be found in the `Sandbox` section at the bottom of the page.
+
+```jsx example
+return (
+  <Div>
+    <Button variant='flat' size='s' icon={faCheck}>
+      Small
+    </Button>
+    <Br />
+    <Button variant='flat' icon={faCheck}>
+      Default
+    </Button>
+    <Br />
+    <Button variant='flat' size='l' icon={faCheck}>
+      Large
+    </Button>
+  </Div>
+)
+```
+
+## Icons
+
+Icon can be added using `icon` property. Position of icon can be changed by passing `iconPosition` to component (`left` by default). To change icon color use the `iconStyleName` property.
+
+In `.styl` file
+```stylus
+.icon
+  color var(--color-text-success)
+```
+
+```jsx example
+return (
+  <Div>
+    <Button icon={faCoffee} iconStyleName='icon'>
+      Icon on the left (default) with the changed color
+    </Button>
+    <Br />
+    <Button icon={faCoffee} iconPosition='right'>
+      Icon on the right
+    </Button>
+  </Div>
+)
+```
+
+## Call to Action
+
+Try to keep the variety of button combinations you use in your app to the minimum.
+
+Use regular Button without any options by default. Whenever you want to emphasize a particular `Call-to-Action`, use a primary flat button.
+
+```jsx example
+<Button color='primary' variant='flat'>
+  Destroy the Death Star!
+</Button>
+```
+
+## Buttons order
+
+Whenever specifiying several buttons on one line, stick to the order of buttons which people are used to from various OS'es. `Cancel` should be first, and then `OK`.
+
+Never put multiple `Call-to-Action` buttons in one component. And try to keep the amount of them visible at the same time on one page to the minimum.
+
+It's a much better UX decision to use regular buttons by default and decide which of them to make a `Call-to-Action` later.
+
+```jsx example
+<Div row align='right'>
+  <Button>
+    Cancel
+  </Button>
+  <Button pushed color='primary' variant='flat'>
+    OK
+  </Button>
+</Div>
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Button}
+  propsJsonSchema={ButtonPropsJsonSchema}
+  extraParams={{
+    icon: {
+      showIconSelect: true
+    }
+  }}
+  props={{
+    children: 'Press me',
+    onPress: () => alert('"onPress" event on "Button" component'),
+    onLongPress: () => alert('"onLongPress" event on "Button" component')
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,69 @@
+// ----- CONFIG: $UI.Button
+
+$this = merge({
+  heights: {
+    xs: 2u,
+    s: 3u,
+    m: 4u,
+    l: 5u,
+    xl: 6u,
+    xxl: 7u
+  },
+  fontSizes: {
+    xs: 1.25u,
+    s: $UI.fontSizes.caption,
+    m: $UI.fontSizes.body2,
+    l: $UI.fontSizes.body1,
+    xl: $UI.fontSizes.h5,
+    xxl: $UI.fontSizes.h4
+  },
+  lineHeights: {
+    xs: 1.75u,
+    s: $UI.lineHeights.caption,
+    m: $UI.lineHeights.body2,
+    l: $UI.lineHeights.body1,
+    xl: $UI.lineHeights.h5,
+    xxl: $UI.lineHeights.h4
+  },
+  outlinedBorderWidth: 1px,
+  iconMargins: {
+    xs: .5u,
+    s: .5u,
+    m: 1u,
+    l: 1u,
+    xl: 1.5u,
+    xxl: 1.5u
+  },
+  disabledOpacity: 0.25
+}, $UI.Button, true)
+
+// ----- COMPONENT
+
+_sizes = ('xs' 's' 'm' 'l' 'xl' 'xxl')
+
+.root
+  &.disabled
+    opacity $this.disabledOpacity
+
+.label
+  fontFamily('normal', 500)
+
+  &.invisible
+    opacity 0
+
+  for size in _sizes
+    &.{size}
+      font-size $this.fontSizes[size]
+      line-height $this.lineHeights[size]
+
+.icon
+  &.invisible
+    opacity 0
+
+.loader
+  position absolute
+
+// ----- JS EXPORTS
+
+:export
+  config: $this

package/index.d.ts

@@ -0,0 +1,38 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ComponentType, type JSXElementConstructor, type ReactNode } from 'react';
+import { type GestureResponderEvent, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+declare const _default: ComponentType<ButtonProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface ButtonProps {
+    /** color name @default 'secondary' */
+    color?: string;
+    /** variant @default 'outlined' */
+    variant?: 'flat' | 'outlined' | 'text';
+    /** size @default 'm' */
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    /** icon component */
+    icon?: ComponentType | JSXElementConstructor<any>;
+    /** shape @default 'rounded' */
+    shape?: 'squared' | 'rounded' | 'circle';
+    /** icon position relative to label @default 'left' */
+    iconPosition?: 'left' | 'right';
+    /** disable button */
+    disabled?: boolean;
+    /** button label text or a custom react node */
+    children?: ReactNode;
+    /** custom styles for root element */
+    style?: StyleProp<ViewStyle>;
+    /** custom styles for icon */
+    iconStyle?: StyleProp<TextStyle>;
+    /** custom styles for label text */
+    textStyle?: StyleProp<TextStyle>;
+    /** custom styles for hover state */
+    hoverStyle?: StyleProp<ViewStyle>;
+    /** custom styles for active state */
+    activeStyle?: StyleProp<ViewStyle>;
+    /** onPress handler */
+    onPress?: (event: GestureResponderEvent) => void | Promise<void>;
+}

package/index.mdx.cssx.styl

@@ -0,0 +1,2 @@
+.icon
+  color var(--color-text-success)

package/index.tsx

@@ -0,0 +1,197 @@
+import { Children, useState, type ComponentType, type JSXElementConstructor, type ReactNode } from 'react'
+import { StyleSheet, type GestureResponderEvent, type StyleProp, type TextStyle, type ViewStyle } from 'react-native'
+import { pug, observer, useIsMountedRef } from 'startupjs'
+import { Colors, colorToRGBA, themed, useColors } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import Loader from '@startupjs-ui/loader'
+import Span from '@startupjs-ui/span'
+import STYLES from './index.cssx.styl'
+
+const {
+  config: {
+    heights, outlinedBorderWidth, iconMargins
+  }
+} = STYLES
+
+export default observer(themed('Button', Button))
+
+export const _PropsJsonSchema = {/* ButtonProps */} // used in docs generation
+export interface ButtonProps {
+  /** color name @default 'secondary' */
+  color?: string
+  /** variant @default 'outlined' */
+  variant?: 'flat' | 'outlined' | 'text'
+  /** size @default 'm' */
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'
+  /** icon component */
+  icon?: ComponentType | JSXElementConstructor<any>
+  /** shape @default 'rounded' */
+  shape?: 'squared' | 'rounded' | 'circle'
+  /** icon position relative to label @default 'left' */
+  iconPosition?: 'left' | 'right'
+  /** disable button */
+  disabled?: boolean
+  /** button label text or a custom react node */
+  children?: ReactNode
+  /** custom styles for root element */
+  style?: StyleProp<ViewStyle>
+  /** custom styles for icon */
+  iconStyle?: StyleProp<TextStyle>
+  /** custom styles for label text */
+  textStyle?: StyleProp<TextStyle>
+  /** custom styles for hover state */
+  hoverStyle?: StyleProp<ViewStyle>
+  /** custom styles for active state */
+  activeStyle?: StyleProp<ViewStyle>
+  /** onPress handler */
+  onPress?: (event: GestureResponderEvent) => void | Promise<void>
+}
+function Button ({
+  style,
+  iconStyle,
+  textStyle,
+  children,
+  color = Colors.secondary,
+  variant = 'outlined',
+  size = 'm',
+  shape = 'rounded',
+  icon,
+  iconPosition = 'left',
+  disabled,
+  hoverStyle,
+  activeStyle,
+  onPress,
+  ...props
+}: ButtonProps): ReactNode {
+  const isMountedRef = useIsMountedRef()
+  const [asyncActive, setAsyncActive] = useState(false)
+  const getColor = useColors()
+
+  function getFlatTextColorName () {
+    return getColor(`text-on-${color}`) ? `text-on-${color}` : 'text-on-color'
+  }
+
+  async function _onPress (event: GestureResponderEvent) {
+    if (!onPress) return
+    let resolved = false
+    const promise = onPress(event)
+    if (!(promise && promise.then)) return
+    promise.then(() => { resolved = true })
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    if (resolved) return
+    setAsyncActive(true)
+    await promise
+    if (!isMountedRef.current) return
+    setAsyncActive(false)
+  }
+
+  if (!getColor(color)) console.error('Button component: Color for color property is incorrect. Use colors from Colors')
+
+  const isFlat = variant === 'flat'
+  const _color = getColor(color) as string | undefined
+  const textColor = isFlat ? getFlatTextColorName() : color
+  const _textColor = getColor(textColor) as string | undefined
+  const _colorString = _color ?? ''
+  const hasChildren = Children.count(children)
+  const height = heights[size] as number
+  const rootStyle: Record<string, any> = { height }
+  const rootExtraProps: Record<string, any> = {}
+  const iconWrapperStyle: Record<string, any> = {}
+  let extraHoverStyle: StyleProp<ViewStyle>
+  let extraActiveStyle: StyleProp<ViewStyle>
+
+  textStyle = StyleSheet.flatten<TextStyle>([
+    { color: _textColor as any },
+    textStyle
+  ])
+  iconStyle = StyleSheet.flatten<TextStyle>([
+    { color: _textColor as any },
+    iconStyle
+  ])
+
+  switch (variant) {
+    case 'flat':
+      rootStyle.backgroundColor = _color
+      break
+    case 'outlined':
+      rootStyle.borderWidth = outlinedBorderWidth
+      rootStyle.borderColor = colorToRGBA(_colorString, 0.5)
+      extraHoverStyle = { backgroundColor: colorToRGBA(_colorString, 0.05) }
+      extraActiveStyle = { backgroundColor: colorToRGBA(_colorString, 0.25) }
+      break
+    case 'text':
+      extraHoverStyle = { backgroundColor: colorToRGBA(_colorString, 0.05) }
+      extraActiveStyle = { backgroundColor: colorToRGBA(_colorString, 0.25) }
+      break
+  }
+
+  let padding: number
+  const quarterOfHeight = height / 4
+
+  if (hasChildren) {
+    padding = height / 2
+
+    switch (iconPosition) {
+      case 'left':
+        iconWrapperStyle.marginRight = iconMargins[size]
+        iconWrapperStyle.marginLeft = -quarterOfHeight
+        break
+      case 'right':
+        iconWrapperStyle.marginLeft = iconMargins[size]
+        iconWrapperStyle.marginRight = -quarterOfHeight
+        break
+    }
+  } else {
+    padding = quarterOfHeight
+  }
+
+  if (variant === 'outlined') padding -= outlinedBorderWidth
+
+  rootStyle.paddingLeft = padding
+  rootStyle.paddingRight = padding
+
+  return pug`
+    Div.root(
+      row
+      shape=shape
+      style=[rootStyle, style]
+      styleName=[
+        size,
+        { disabled }
+      ]
+      align='center'
+      vAlign='center'
+      reverse=iconPosition === 'right'
+      variant='highlight'
+      hoverStyle=extraHoverStyle ? [extraHoverStyle, hoverStyle] : hoverStyle
+      activeStyle=extraActiveStyle ? [extraActiveStyle, activeStyle] : activeStyle
+      disabled=asyncActive || disabled
+      onPress=onPress ? _onPress : undefined
+      ...rootExtraProps
+      ...props
+    )
+      if asyncActive
+        Div.loader
+          Loader(size='s' color=textColor)
+      if icon
+        Div.iconWrapper(
+          style=iconWrapperStyle
+          styleName=[
+            { 'with-label': hasChildren },
+            iconPosition
+          ]
+        )
+          Icon.icon(
+            style=iconStyle
+            styleName=[variant, { invisible: asyncActive }]
+            icon=icon
+            size=size
+          )
+      if children != null
+        Span.label(
+          style=[textStyle]
+          styleName=[size, { invisible: asyncActive }]
+        )= children
+  `
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@startupjs-ui/button",
+  "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/icon": "^0.1.3",
+    "@startupjs-ui/loader": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}