@startupjs-ui/progress 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/progress
+
+
+
+
+
+## [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))
+* **progress:** refactor Progress component ([d32d2b6](https://github.com/startupjs/startupjs-ui/commit/d32d2b626f71281aeced05ec89f11d1b0b79a0db))

package/README.mdx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react'
+import Progress, { _PropsJsonSchema as ProgressPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+import Button from '@startupjs-ui/button'
+import Br from '@startupjs-ui/br'
+
+# Progress
+
+Progress is used to display the length of process, for example upload or download files.
+
+```jsx
+import { Progress } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return (
+  <Progress value={10} />
+)
+```
+
+## Interactive
+
+```jsx example
+const [value, setValue] = useState(0)
+const [startProgress, setStartProgress] = useState(false)
+const [countdown, setCountdown] = useState(false)
+
+useEffect(() => {
+  let interval
+  if (startProgress) {
+    interval = setInterval(() => {
+      setValue(v => {
+        const nextValue = countdown ? v - 1 : v + 1
+        if (nextValue === 100 || nextValue === 0) {
+          setCountdown(!countdown)
+        }
+        return nextValue
+      })
+    }, 100)
+  }
+  return () => clearInterval(interval)
+}, [startProgress, countdown])
+
+return (
+  <>
+    <Progress value={value} />
+    <Br />
+    <Button onPress={() => setStartProgress(!startProgress)}>
+      {startProgress ? 'Stop' : 'Start'}
+    </Button>
+  </>
+)
+```
+
+## Caption
+
+```jsx example
+return (
+  <Progress value={50}>50 of 100</Progress>
+)
+```
+
+## Sandbox
+
+<Sandbox Component={Progress} propsJsonSchema={ProgressPropsJsonSchema} block />

package/filler.tsx

@@ -0,0 +1,59 @@
+import { useState, type ReactNode } from 'react'
+import {
+  Animated,
+  Easing,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { pug, observer, useDidUpdate } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import STYLES from './index.cssx.styl'
+
+const {
+  config: {
+    duration
+  }
+} = STYLES
+
+const AnimatedView = Animated.View
+
+interface ProgressFillerProps {
+  style?: StyleProp<ViewStyle>
+  value: number
+}
+
+function ProgressFiller ({ style, value }: ProgressFillerProps): ReactNode {
+  const [progress] = useState(() => new Animated.Value(value))
+  const [width, setWidth] = useState(0)
+
+  useDidUpdate(() => {
+    Animated.timing(
+      progress,
+      {
+        toValue: value,
+        duration,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }
+    ).start()
+  }, [value])
+
+  return pug`
+    AnimatedView.filler(
+      style=[
+        style,
+        {
+          transform: [{
+            translateX: progress.interpolate({
+              inputRange: [0, 100],
+              outputRange: [-width, 0]
+            })
+          }]
+        }
+      ]
+      onLayout=(event) => setWidth(event.nativeEvent.layout.width)
+    )
+  `
+}
+
+export default observer(themed('Progress', ProgressFiller))

package/filler.web.tsx

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import './index.cssx.styl'
+
+interface ProgressFillerProps {
+  style?: StyleProp<ViewStyle>
+  value: number
+}
+
+function ProgressFiller ({ style, value }: ProgressFillerProps): ReactNode {
+  return pug`
+    View.filler(style=[{ width: value + '%' }, style])
+  `
+}
+
+export default observer(themed('Progress', ProgressFiller))

package/index.cssx.styl

@@ -0,0 +1,31 @@
+// ----- CONFIG: $UI.Progress
+
+$this = merge({
+  duration: 300
+}, $UI.Progress, true)
+
+// ----- COMPONENT
+
+_backgroundColor = var(--color-bg-main-subtle-alt)
+_fillerColor = var(--color-bg-success)
+_duration = $this.duration
+
+.progress
+  background-color _backgroundColor
+  overflow hidden
+
+.filler
+  height _size
+  background-color _fillerColor
+
+  +web()
+    transition width (_duration/1000)s
+
+.label
+  margin-top 2px
+  font(caption)
+
+// ----- JS EXPORTS
+
+:export
+  config: $this

package/index.d.ts

@@ -0,0 +1,28 @@
+/* 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 './index.cssx.styl';
+declare const _default: import("react").ComponentType<ProgressProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface ProgressProps {
+    /** Custom styles applied to the wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Percent value between 0 and 100 @default 0 */
+    value?: number;
+    /** Label content rendered under the progress bar */
+    children?: ReactNode;
+    /** Progress visual variant @default 'linear' */
+    variant?: 'linear' | 'circular';
+    /** Shape of the progress track @default 'rounded' */
+    shape?: DivProps['shape'];
+    /** Height of the progress bar @default u(0.5) */
+    width?: number;
+    /** Style overrides for the progress track part */
+    progressStyle?: DivProps['style'];
+    /** Style overrides for the filler part */
+    fillerStyle?: StyleProp<ViewStyle>;
+}

package/index.tsx

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, u } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import Filler from './filler'
+import './index.cssx.styl'
+
+export default observer(themed('Progress', Progress))
+
+export const _PropsJsonSchema = {/* ProgressProps */}
+
+export interface ProgressProps {
+  /** Custom styles applied to the wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Percent value between 0 and 100 @default 0 */
+  value?: number
+  /** Label content rendered under the progress bar */
+  children?: ReactNode
+  /** Progress visual variant @default 'linear' */
+  variant?: 'linear' | 'circular'
+  /** Shape of the progress track @default 'rounded' */
+  shape?: DivProps['shape']
+  /** Height of the progress bar @default u(0.5) */
+  width?: number
+  /** Style overrides for the progress track part */
+  progressStyle?: DivProps['style']
+  /** Style overrides for the filler part */
+  fillerStyle?: StyleProp<ViewStyle>
+}
+
+function Progress ({
+  style,
+  value = 0,
+  children,
+  variant = 'linear',
+  shape = 'rounded',
+  width = u(0.5)
+}: ProgressProps): ReactNode {
+  const extraStyle = { height: width }
+
+  return pug`
+    View(style=style)
+      Div.progress(part='progress' style=extraStyle shape=shape)
+        //- To normalize value pass value=Math.min(value, 100)
+        Filler(part='filler' style=extraStyle value=value)
+      if typeof children === 'string'
+        Span.label= children
+      else
+        = children
+  `
+}

package/package.json

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