@startupjs-ui/collapse 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# 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/collapse
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Bug Fixes
+
+* **collapse:** remove re-exports of subcomponents ([fd521e6](https://github.com/startupjs/startupjs-ui/commit/fd521e6c3509553c8ad231de09933a987b0c74f9))
+
+
+### 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))
+* **collapse:** refactor Collapse component ([f43d6e5](https://github.com/startupjs/startupjs-ui/commit/f43d6e55cba1dd9d970125016a1069671a4e581b))

package/CollapseContent/index.cssx.styl

@@ -0,0 +1,7 @@
+.root
+  &.full
+    // NOTE
+    // Collapse with text is almost never used.
+    // Developers pass its own components to children.
+    // Therefore, does the content need paddings ?
+    padding 0 2u 2u

package/CollapseContent/index.tsx

@@ -0,0 +1,57 @@
+import React, { type ReactNode } from 'react'
+import Collapsible from 'react-native-collapsible'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* CollapseContentProps */}
+
+export interface CollapseContentProps {
+  /** Custom styles applied to the collapsible container */
+  style?: any
+  /** Content rendered inside the collapsible area */
+  children?: ReactNode
+  /** Whether the collapse is open (provided internally) */
+  open?: boolean
+  /** Collapse variant controlling paddings */
+  variant?: 'full' | 'pure'
+  /** Alignment of collapsed content */
+  align?: 'top' | 'center' | 'bottom'
+  /** Height when collapsed */
+  collapsedHeight?: number
+  /** Enable pointer events while collapsed */
+  enablePointerEvents?: boolean
+  /** Animation duration in ms */
+  duration?: number
+  /** Easing function or preset name */
+  easing?: ((value: number) => number) | string
+  /** Render children even when collapsed */
+  renderChildrenCollapsed?: boolean
+  /** Callback fired after collapse animation ends */
+  onAnimationEnd?: () => void
+}
+
+function CollapseContent ({
+  style,
+  children,
+  open,
+  variant,
+  ...props
+}: CollapseContentProps): ReactNode {
+  const content = React.Children.map(children as any, (child: any, index: number): ReactNode => {
+    if (typeof child === 'string') {
+      return pug`
+        Span(key=index)= child
+      `
+    }
+    return child
+  })
+
+  return pug`
+    Collapsible.root(style=style styleName=[variant] collapsed=!open ...props)
+      = content
+  `
+}
+
+export default observer(themed('CollapseContent', CollapseContent))

package/CollapseHeader/index.cssx.styl

@@ -0,0 +1,13 @@
+_gutter = $UI.gutters.m
+
+.root
+  align-items center
+  &.full
+    padding _gutter
+
+.container
+  flex 1
+  margin-left 1u
+  &.reverse
+    margin-right 1u
+    margin-left 0

package/CollapseHeader/index.tsx

@@ -0,0 +1,90 @@
+import React, { useRef, type ReactNode } from 'react'
+import { Animated, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, useDidUpdate } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon, { type IconProps } from '@startupjs-ui/icon'
+import Span from '@startupjs-ui/span'
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* CollapseHeaderProps */}
+
+export interface CollapseHeaderProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the icon */
+  iconStyle?: IconProps['style']
+  /** Custom styles applied to the content container */
+  containerStyle?: StyleProp<ViewStyle>
+  /** Header content */
+  children?: ReactNode
+  /** Collapse variant controlling paddings */
+  variant?: 'full' | 'pure'
+  /** Icon position relative to the title @default 'left' */
+  iconPosition?: 'left' | 'right'
+  /** Icon displayed in header; true uses default caret @default true */
+  icon?: IconProps['icon'] | boolean
+  /** Whether the collapse is open (provided internally) */
+  open?: boolean
+  /** Press handler provided by Collapse */
+  onPress?: () => void
+}
+
+function CollapseHeader ({
+  style,
+  iconStyle,
+  containerStyle,
+  children,
+  variant,
+  iconPosition = 'left',
+  icon = true,
+  open,
+  onPress,
+  ...props
+}: CollapseHeaderProps): ReactNode {
+  if (icon === true) icon = faCaretRight
+  const reverse = iconPosition === 'right'
+  const animation = useRef(new Animated.Value(open ? 1 : 0)).current
+
+  useDidUpdate(() => {
+    Animated.timing(
+      animation,
+      {
+        toValue: open ? 1 : 0,
+        duration: 250,
+        useNativeDriver: true
+      }
+    ).start()
+  }, [open])
+
+  return pug`
+    Div.root(
+      row
+      style=style
+      styleName=[variant]
+      onPress=onPress
+      reverse=reverse
+      ...props
+    )
+      if icon
+        Animated.View(
+          style={
+            transform: [{
+              rotate: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [reverse ? '180deg' : '0deg', '90deg']
+              })
+            }]
+          }
+        )
+          Icon(icon=icon style=iconStyle)
+      Div.container(style=containerStyle styleName={reverse})
+        if typeof children === 'string'
+          Span= children
+        else
+          = children
+  `
+}
+
+export default observer(themed('CollapseHeader', CollapseHeader))

package/README.mdx

@@ -0,0 +1,148 @@
+import { $ } from 'startupjs'
+import { useState } from 'react'
+import { Sandbox } from '@startupjs-ui/docs'
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import Collapse, { _PropsJsonSchema as CollapsePropsJsonSchema } from './index'
+import { _PropsJsonSchema as CollapseHeaderPropsJsonSchema } from './CollapseHeader'
+import { _PropsJsonSchema as CollapseContentPropsJsonSchema } from './CollapseContent'
+import Div from '@startupjs-ui/div'
+
+# Collapse
+
+Inherits [react-native-collapsible](https://github.com/oblador/react-native-collapsible).
+
+Collapse allows to toggle the visibility of content.
+
+```jsx
+import { Collapse } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example noscroll
+const [open, setOpen] = useState(false)
+return (
+  <Collapse title='Simple collapse' open={open} onChange={() => setOpen(!open)}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+  </Collapse>
+)
+```
+
+## Pure collapse
+
+Pure collapse does not contain any styles (background, paddings, etc.). It is useful when `Collapse` is used as a children of other components like `Card`. To make it pure, pass the string `pure` to the `variant` property.
+
+```jsx example noscroll
+const [open, setOpen] = useState(false)
+return (
+  <Collapse
+    variant='pure'
+    open={open}
+    onChange={() => setOpen(!open)}
+    title='Pure collapse'
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+  </Collapse>
+)
+```
+
+## Advanced usage
+
+Collapse consists of two parts - `Header` and `Content`. These parts can be used to add custom markup, the `Header` is used instead of title and the `Content` is used instad of children. They can be used separately. Each part take value of `variant` prop from parent `Collapse` which can be overridden by passing `variant` to itself.
+
+```jsx example noscroll
+const [open, setOpen] = useState(false)
+return (
+  <Collapse open={open} onChange={() => setOpen(!open)}>
+    <Collapse.Header iconPosition='right'>Advanced collapse</Collapse.Header>
+    <Collapse.Content>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+    </Collapse.Content>
+  </Collapse>
+)
+```
+
+## Icon configuration
+
+You can provide a custom icon by specifying the `icon` option. It must be an arrow-like icon pointing right.
+
+```jsx example
+const [open, setOpen] = useState(false)
+return (
+  <Collapse open={open} onChange={() => setOpen(!open)}>
+    <Collapse.Header icon={faAngleRight}>
+      Collapse with custom icon
+    </Collapse.Header>
+    <Collapse.Content>
+      Collapse content
+    </Collapse.Content>
+  </Collapse>
+)
+```
+
+### No Icon
+
+You can remove an icon completely by specifying `icon={false}`
+
+## Accordion
+
+Using the `Collapse` component, you can create behavior like an accordion.
+
+```jsx example noscroll
+const [expand, setExpand] = useState()
+const handleChange = (panel) => (shouldExpand) => {
+  setExpand(shouldExpand ? panel : null)
+}
+const collapseStyle = {
+  borderTopWidth: 1,
+  borderStyle: 'solid',
+  borderColor: '#ddd'
+}
+return (
+  <Div>
+    <Collapse
+      open={expand === 'open1'}
+      title='Accordion Header - 1'
+      onChange={handleChange('open1')}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+    </Collapse>
+    <Collapse
+      style={collapseStyle}
+      open={expand === 'open2'}
+      title='Accordion Header - 2'
+      onChange={handleChange('open2')}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+    </Collapse>
+    <Collapse
+      style={collapseStyle}
+      open={expand === 'open3'}
+      title='Accordion Header - 3'
+      onChange={handleChange('open3')}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+    </Collapse>
+  </Div>
+)
+```
+
+## Sandbox
+
+### Collapse
+
+<Sandbox
+  Component={Collapse}
+  props={{ $open: $.session.Props.Collapse.open }}
+  $props={$.session.Props.Collapse}
+  propsJsonSchema={CollapsePropsJsonSchema}
+  {...{ _comment: "HACK to make alive sandbox when user click on 'open' checkbox" }}
+/>
+
+### Collapse.Header
+
+<Sandbox Component={Collapse.Header} propsJsonSchema={CollapseHeaderPropsJsonSchema} />
+
+### Collapse.Content
+
+<Sandbox Component={Collapse.Content} propsJsonSchema={CollapseContentPropsJsonSchema} />

package/index.cssx.styl

@@ -0,0 +1,5 @@
+_gutter = $UI.gutters.m
+
+.root
+  &.full
+    radius()

package/index.d.ts

@@ -0,0 +1,45 @@
+/* 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 { type DivProps } from '@startupjs-ui/div';
+import { type CollapseHeaderProps } from './CollapseHeader';
+import './index.cssx.styl';
+export declare const _PropsJsonSchema: {};
+export interface CollapseProps extends Omit<DivProps, 'style' | 'children' | 'variant' | 'align'> {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered inside Collapse or via Collapse.Content */
+    children?: ReactNode;
+    /** Header title when no custom Collapse.Header is provided */
+    title?: ReactNode;
+    /** Controlled open state @default false */
+    open?: boolean;
+    /** Scoped model for open state */
+    $open?: any;
+    /** Visual appearance variant @default 'full' */
+    variant?: 'full' | 'pure';
+    /** Icon displayed in header; true uses default caret @default true */
+    icon?: CollapseHeaderProps['icon'];
+    /** Called when open state changes */
+    onChange?: (open: boolean) => void;
+    /** Custom styles applied to the collapsible container */
+    collapsibleContainerStyle?: StyleProp<ViewStyle>;
+    /** Alignment of collapsed content */
+    align?: 'top' | 'center' | 'bottom';
+    /** Height when collapsed */
+    collapsedHeight?: number;
+    /** Enable pointer events while collapsed */
+    enablePointerEvents?: boolean;
+    /** Animation duration in ms */
+    duration?: number;
+    /** Easing function or preset name */
+    easing?: ((value: number) => number) | string;
+    /** Render children even when collapsed */
+    renderChildrenCollapsed?: boolean;
+    /** Callback fired after collapse animation ends */
+    onAnimationEnd?: () => void;
+}
+declare const ObservedCollapse: any;
+export default ObservedCollapse;

package/index.tsx

@@ -0,0 +1,130 @@
+import React, { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, useBind } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import CollapseHeader, { type CollapseHeaderProps } from './CollapseHeader'
+import CollapseContent from './CollapseContent'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* CollapseProps */}
+
+export interface CollapseProps extends Omit<DivProps, 'style' | 'children' | 'variant' | 'align'> {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside Collapse or via Collapse.Content */
+  children?: ReactNode
+  /** Header title when no custom Collapse.Header is provided */
+  title?: ReactNode
+  /** Controlled open state @default false */
+  open?: boolean
+  /** Scoped model for open state */
+  $open?: any
+  /** Visual appearance variant @default 'full' */
+  variant?: 'full' | 'pure'
+  /** Icon displayed in header; true uses default caret @default true */
+  icon?: CollapseHeaderProps['icon']
+  /** Called when open state changes */
+  onChange?: (open: boolean) => void
+  /** Custom styles applied to the collapsible container */
+  collapsibleContainerStyle?: StyleProp<ViewStyle>
+  /** Alignment of collapsed content */
+  align?: 'top' | 'center' | 'bottom'
+  /** Height when collapsed */
+  collapsedHeight?: number
+  /** Enable pointer events while collapsed */
+  enablePointerEvents?: boolean
+  /** Animation duration in ms */
+  duration?: number
+  /** Easing function or preset name */
+  easing?: ((value: number) => number) | string
+  /** Render children even when collapsed */
+  renderChildrenCollapsed?: boolean
+  /** Callback fired after collapse animation ends */
+  onAnimationEnd?: () => void
+}
+
+function Collapse ({
+  style,
+  children,
+  title,
+  open = false,
+  $open,
+  variant = 'full',
+  icon = true,
+  onChange,
+  collapsibleContainerStyle,
+  align,
+  collapsedHeight,
+  enablePointerEvents,
+  duration,
+  easing,
+  renderChildrenCollapsed,
+  onAnimationEnd,
+  ...props
+}: CollapseProps): ReactNode {
+  ;({ open, onChange } = useBind({ $open, open, onChange }) as any)
+
+  let header: ReactNode | undefined
+  let content: ReactNode | undefined
+  const contentChildren: ReactNode[] = []
+
+  React.Children.forEach(children as any, (child: any) => {
+    if (!child) return
+
+    switch (child.type) {
+      case CollapseHeader:
+        if (header) throw Error('[ui -> Collapse] You must specify a single <Collapse.Header>')
+        header = child
+        break
+      case CollapseContent:
+        if (content) throw Error('[ui -> Collapse] You must specify a single <Collapse.Content>')
+        content = child
+        break
+      default:
+        contentChildren.push(child as ReactNode)
+    }
+  })
+
+  if (content && contentChildren.length > 0) {
+    throw Error('[ui -> Collapse] React elements found directly within <Collapse>. ' +
+      'If <Collapse.Content> is specified, you have to put all your content inside it')
+  }
+
+  const contentProps = {
+    open,
+    variant,
+    style: collapsibleContainerStyle,
+    align,
+    collapsedHeight,
+    enablePointerEvents,
+    duration,
+    easing,
+    renderChildrenCollapsed,
+    onAnimationEnd
+  }
+  content = content
+    ? React.cloneElement(content as any, { ...contentProps, ...(content as any).props })
+    : React.createElement(CollapseContent, contentProps, contentChildren)
+
+  const headerProps = { open, variant, icon, onPress }
+  header = header
+    ? React.cloneElement(header as any, { ...headerProps, ...(header as any).props })
+    : React.createElement(CollapseHeader, headerProps, title ?? '')
+
+  function onPress () {
+    onChange?.(!open)
+  }
+
+  return pug`
+    Div.root(style=style ...props)
+      = header
+      = content
+  `
+}
+
+const ObservedCollapse: any = observer(themed('Collapse', Collapse))
+ObservedCollapse.Header = CollapseHeader
+ObservedCollapse.Content = CollapseContent
+
+export default ObservedCollapse

package/package.json

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