@hanzogui/progress 2.0.0

package/src/Progress.tsx

@@ -0,0 +1,223 @@
+// forked from Radix UI
+// https://github.com/radix-ui/primitives/blob/main/packages/react/progress/src/Progress.tsx
+
+import type { GetProps } from '@hanzogui/core'
+import { getVariableValue, isWeb, styled } from '@hanzogui/core'
+import type { Scope } from '@hanzogui/create-context'
+import { createContextScope } from '@hanzogui/create-context'
+import { getSize } from '@hanzogui/get-token'
+import { withStaticProperties } from '@hanzogui/helpers'
+import { YStack } from '@hanzogui/stacks'
+import { useState } from 'react'
+
+const PROGRESS_NAME = 'Progress'
+
+const [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME)
+
+type ProgressContextValue = {
+  value: number | null
+  max: number
+  width: number
+}
+
+const [ProgressProvider, useProgressContext] =
+  createProgressContext<ProgressContextValue>(PROGRESS_NAME)
+
+/* -------------------------------------------------------------------------------------------------
+ * ProgressIndicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const INDICATOR_NAME = 'ProgressIndicator'
+
+export const ProgressIndicatorFrame = styled(YStack, {
+  name: INDICATOR_NAME,
+
+  variants: {
+    unstyled: {
+      false: {
+        height: '100%',
+        width: '100%',
+        backgroundColor: '$background',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+export type ProgressIndicatorProps = GetProps<typeof ProgressIndicatorFrame>
+
+const ProgressIndicator = ProgressIndicatorFrame.styleable(function ProgressIndicator(
+  props: ScopedProps<ProgressIndicatorProps>,
+  forwardedRef
+) {
+  const { __scopeProgress, transition, ...indicatorProps } = props
+  const context = useProgressContext(INDICATOR_NAME, __scopeProgress)
+
+  const progressRatio = (context.value ?? 0) / context.max
+
+  // indicator is 2x container width so bouncy animations can overshoot
+  // without visually extending past the right edge (parent has overflow:hidden)
+  // translateX percentage is relative to element's own width (200% of container)
+  // so we divide by 2 to get container-relative positioning:
+  // at 0%: x = -100% of element = -200% of container (fully hidden left)
+  // at 100%: x = -50% of element = -100% of container (right half visible)
+  let x: string | number
+  if (isWeb) {
+    // web: use percentage-based translateX for SSR-friendly rendering
+    // formula: -100% + (progressRatio * 50%) since translateX % is relative to element width
+    x = `${-100 + progressRatio * 50}%`
+  } else {
+    // native: use pixel-based transform (RN doesn't support percentage transforms reliably)
+    const baseWidth = context.width || 0
+    x = Math.ceil(-baseWidth * (2 - progressRatio))
+  }
+
+  return (
+    <ProgressIndicatorFrame
+      data-state={getProgressState(context.value, context.max)}
+      data-value={context.value ?? undefined}
+      data-max={context.max}
+      x={x}
+      width="200%"
+      {...(!props.unstyled && {
+        animateOnly: ['transform'],
+        // on native, hide until we have width measurement
+        ...(!isWeb && context.width === 0 && { opacity: 0 }),
+      })}
+      {...indicatorProps}
+      ref={forwardedRef}
+      transition={!isWeb && !context.width ? null : transition}
+    />
+  )
+})
+
+/* ---------------------------------------------------------------------------------------------- */
+
+function defaultGetValueLabel(value: number, max: number) {
+  return `${Math.round((value / max) * 100)}%`
+}
+
+function getProgressState(
+  value: number | undefined | null,
+  maxValue: number
+): ProgressState {
+  return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading'
+}
+
+function isNumber(value: any): value is number {
+  return typeof value === 'number'
+}
+
+function isValidMaxNumber(max: any): max is number {
+  return isNumber(max) && !Number.isNaN(max) && max > 0
+}
+
+function isValidValueNumber(value: any, max: number): value is number {
+  return isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Progress
+ * -----------------------------------------------------------------------------------------------*/
+
+const DEFAULT_MAX = 100
+
+type ScopedProps<P> = P & { __scopeProgress?: Scope }
+
+type ProgressState = 'indeterminate' | 'complete' | 'loading'
+
+export const ProgressFrame = styled(YStack, {
+  name: 'Progress',
+
+  variants: {
+    unstyled: {
+      false: {
+        borderRadius: 100_000,
+        overflow: 'hidden',
+        backgroundColor: '$background',
+      },
+    },
+
+    size: {
+      '...size': (val) => {
+        const size = Math.round(getVariableValue(getSize(val)) * 0.25)
+        return {
+          height: size,
+          minWidth: getVariableValue(size) * 20,
+          width: '100%',
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+export interface ProgressExtraProps {
+  value?: number | null | undefined
+  max?: number
+  getValueLabel?(value: number, max: number): string
+}
+
+export type ProgressProps = GetProps<typeof ProgressFrame> & ProgressExtraProps
+
+const Progress = withStaticProperties(
+  ProgressFrame.styleable<ProgressExtraProps>(function Progress(props, forwardedRef) {
+    const {
+      // @ts-expect-error
+      __scopeProgress,
+      value: valueProp,
+      max: maxProp,
+      getValueLabel = defaultGetValueLabel,
+      size = '$true',
+      ...progressProps
+    } = props
+
+    const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX
+    const value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null
+    const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined
+
+    // only needed for native where we can't use percentage-based transforms
+    const [width, setWidth] = useState(0)
+
+    return (
+      <ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}>
+        <ProgressFrame
+          aria-valuemax={max}
+          aria-valuemin={0}
+          aria-valuenow={isNumber(value) ? value : undefined}
+          aria-valuetext={valueLabel}
+          // @ts-ignore
+          role="progressbar"
+          data-state={getProgressState(value, max)}
+          data-value={value ?? undefined}
+          data-max={max}
+          {...(progressProps.unstyled !== true && {
+            size,
+          })}
+          {...progressProps}
+          {...(!isWeb && {
+            onLayout: (e) => {
+              const newWidth = Math.round(e.nativeEvent.layout.width)
+              if (newWidth !== width) {
+                setWidth(newWidth)
+              }
+              progressProps.onLayout?.(e)
+            },
+          })}
+          ref={forwardedRef}
+        />
+      </ProgressProvider>
+    )
+  }),
+  {
+    Indicator: ProgressIndicator,
+  }
+)
+
+export { createProgressScope, Progress, ProgressIndicator }

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Progress'

package/types/Progress.d.ts

@@ -0,0 +1,69 @@
+import type { GetProps } from '@gui/core';
+declare const createProgressScope: import("@gui/create-context").CreateScope;
+export declare const ProgressIndicatorFrame: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/core").StaticConfigPublic>;
+export type ProgressIndicatorProps = GetProps<typeof ProgressIndicatorFrame>;
+declare const ProgressIndicator: import("@gui/core").GuiComponent<import("@gui/core").GetFinalProps<import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}>, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps & void, import("@gui/core").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/core").StaticConfigPublic>;
+export declare const ProgressFrame: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    size?: import("@gui/core").SizeTokens | undefined;
+}, import("@gui/core").StaticConfigPublic>;
+export interface ProgressExtraProps {
+    value?: number | null | undefined;
+    max?: number;
+    getValueLabel?(value: number, max: number): string;
+}
+export type ProgressProps = GetProps<typeof ProgressFrame> & ProgressExtraProps;
+declare const Progress: import("react").ForwardRefExoticComponent<Omit<import("@gui/core").GetFinalProps<import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    size?: import("@gui/core").SizeTokens | undefined;
+}>, keyof ProgressExtraProps> & ProgressExtraProps & import("react").RefAttributes<import("@gui/core").GuiElement>> & import("@gui/core").StaticComponentObject<Omit<import("@gui/core").GetFinalProps<import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    size?: import("@gui/core").SizeTokens | undefined;
+}>, keyof ProgressExtraProps> & ProgressExtraProps, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps & ProgressExtraProps, import("@gui/core").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    size?: import("@gui/core").SizeTokens | undefined;
+}, import("@gui/core").StaticConfigPublic> & Omit<import("@gui/core").StaticConfigPublic, "staticConfig" | "styleable"> & {
+    __tama: [Omit<import("@gui/core").GetFinalProps<import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+        unstyled?: boolean | undefined;
+        elevation?: number | import("@gui/core").SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+        size?: import("@gui/core").SizeTokens | undefined;
+    }>, keyof ProgressExtraProps> & ProgressExtraProps, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps & ProgressExtraProps, import("@gui/core").StackStyleBase, {
+        unstyled?: boolean | undefined;
+        elevation?: number | import("@gui/core").SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+        size?: import("@gui/core").SizeTokens | undefined;
+    }, import("@gui/core").StaticConfigPublic];
+} & {
+    Indicator: import("@gui/core").GuiComponent<import("@gui/core").GetFinalProps<import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+        unstyled?: boolean | undefined;
+        elevation?: number | import("@gui/core").SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }>, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps & void, import("@gui/core").StackStyleBase, {
+        unstyled?: boolean | undefined;
+        elevation?: number | import("@gui/core").SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@gui/core").StaticConfigPublic>;
+};
+export { createProgressScope, Progress, ProgressIndicator };
+//# sourceMappingURL=Progress.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Progress';
+//# sourceMappingURL=index.d.ts.map