feat: progress headless and styled

ditadi · ditadi · commit 10620175735a · 2024-03-25T19:44:20.000Z
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -24,6 +24,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Modal: ComponentStatus.Draft,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Draft,
+    Progress: ComponentStatus.Draft,
     RadioGroup: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
     Skeleton: ComponentStatus.Beta,
@@ -38,6 +39,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Beta,
+    Progress: ComponentStatus.Draft,
     Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
diff --git a/apps/website/src/routes/docs/headless/menu.md b/apps/website/src/routes/docs/headless/menu.md
@@ -20,6 +20,7 @@
 - [Modal](/docs/headless/modal)
 - [Pagination](/docs/headless/pagination)
 - [Popover](/docs/headless/popover)
+- [Progress](/docs/headless/progress)
 - [Select](/docs/headless/select)
 - [Separator](/docs/headless/separator)
 - [Tabs](/docs/headless/tabs)
diff --git a/apps/website/src/routes/docs/headless/progress/examples/hero.tsx b/apps/website/src/routes/docs/headless/progress/examples/hero.tsx
@@ -0,0 +1,29 @@
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+import * as Progress from '@qwik-ui/headless';
+
+export default component$(() => {
+  const progress = useSignal(30);
+
+  useVisibleTask$(() => {
+    setTimeout(() => {
+      progress.value = 50;
+    }, 1000);
+  });
+
+  return (
+    <>
+      <Progress.Root
+        value={progress.value}
+        class="h-7 w-full overflow-hidden rounded-full bg-gray-100"
+      >
+        <Progress.Indicator
+          class="h-full w-full bg-slate-700"
+          style={{
+            transform: `translateX(-${100 - progress.value}%)`,
+            transition: 'transform 0.3s',
+          }}
+        />
+      </Progress.Root>
+    </>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/progress/index.mdx b/apps/website/src/routes/docs/headless/progress/index.mdx
@@ -0,0 +1,15 @@
+---
+title: Qwik UI | Progress
+---
+
+import { statusByComponent } from '~/_state/component-statuses';
+import { FeatureList } from '~/components/feature-list/feature-list';
+import { Note } from '~/components/note/note';
+
+<StatusBanner status={statusByComponent.headless.Progress} />
+
+# Progress
+
+Displays a progress bar related to a task.
+
+<Showcase name="hero" />
diff --git a/apps/website/src/routes/docs/styled/menu.md b/apps/website/src/routes/docs/styled/menu.md
@@ -25,6 +25,7 @@
 - [Label](/docs/styled/label)
 - [Modal](/docs/styled/modal)
 - [Popover](/docs/styled/popover)
+- [Progress](/docs/styled/progress)
 - [RadioGroup](/docs/styled/radio-group)
 - [Separator](/docs/styled/separator)
 - [Skeleton](/docs/styled/skeleton)
diff --git a/apps/website/src/routes/docs/styled/progress/examples/hero.tsx b/apps/website/src/routes/docs/styled/progress/examples/hero.tsx
@@ -0,0 +1,18 @@
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+import { Progress } from '@qwik-ui/styled';
+
+export default component$(() => {
+  const progress = useSignal(30);
+
+  useVisibleTask$(() => {
+    setTimeout(() => {
+      progress.value = 50;
+    }, 1000);
+  });
+
+  return (
+    <>
+      <Progress value={progress.value} />
+    </>
+  );
+});
diff --git a/apps/website/src/routes/docs/styled/progress/index.mdx b/apps/website/src/routes/docs/styled/progress/index.mdx
@@ -4,8 +4,10 @@ title: Qwik UI | Styled Progress Component
 
 import { statusByComponent } from '~/_state/component-statuses';
 
+<StatusBanner status={statusByComponent.styled.Progress} />
+
 # Progress
 
-The Qwik UI Styled progress component is your digital cheerleader, celebrating each step forward with flashy colors and a positive attitude!
+Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
 
-<StatusBanner status={statusByComponent.styled.Progress} />
+<Showcase name="hero" />
diff --git a/packages/kit-headless/src/components/progress/index.ts b/packages/kit-headless/src/components/progress/index.ts
@@ -0,0 +1,2 @@
+export * from './progress-indicator';
+export * from './progress';
diff --git a/packages/kit-headless/src/components/progress/progress-context.ts b/packages/kit-headless/src/components/progress/progress-context.ts
@@ -0,0 +1,8 @@
+import { createContextId } from '@builder.io/qwik';
+
+export interface ProgressContext {
+  value: number | null;
+  max: number;
+}
+
+export const ProgressContext = createContextId<ProgressContext>('progress');
diff --git a/packages/kit-headless/src/components/progress/progress-indicator.tsx b/packages/kit-headless/src/components/progress/progress-indicator.tsx
@@ -0,0 +1,24 @@
+import { PropsOf, component$, useContext } from '@builder.io/qwik';
+import { getProgressState } from './util';
+import { ProgressContext } from './progress-context';
+
+type ProgressIndicatorElement = PropsOf<'div'>;
+export const Indicator = component$<ProgressIndicatorElement>((props) => {
+  const { ...indicatorProps } = props;
+
+  const { max, value } = useContext(ProgressContext);
+  const translateX = value ? `translateX(-${100 - value}%)` : undefined;
+
+  return (
+    <div
+      style={{
+        transform: translateX,
+        transition: 'transform 0.3s',
+      }}
+      data-state={getProgressState(value, max)}
+      data-value={value ?? undefined}
+      data-max={max}
+      {...indicatorProps}
+    />
+  );
+});
diff --git a/packages/kit-headless/src/components/progress/progress.tsx b/packages/kit-headless/src/components/progress/progress.tsx
@@ -1,11 +1,49 @@
-import { ProgressHTMLAttributes, PropsOf } from '@builder.io/qwik';
-import { JSX } from '@builder.io/qwik/jsx-runtime';
-export type { ProgressHTMLAttributes } from '@builder.io/qwik/core';
+import { PropsOf, Slot, component$, useContextProvider } from '@builder.io/qwik';
+import {
+  defaultGetValueLabel,
+  getProgressState,
+  isNumber,
+  isValidMaxNumber,
+  isValidValueNumber,
+} from './util';
+import { ProgressContext } from './progress-context';
 
-export type ProgressProps = PropsOf<'progress'>;
-
-export const Progress: (
-  props: ProgressHTMLAttributes<HTMLProgressElement>,
-) => JSX.Element = (props) => {
-  return <progress {...props} />;
+type ProgressProps = {
+  max?: number;
+  value?: number;
+  getValueLabel?(value: number, max: number): string;
 };
+
+type ProgressElement = PropsOf<'div'>;
+const DEFAULT_MAX = 100;
+
+export const Root = component$<ProgressProps & ProgressElement>((props) => {
+  const {
+    max: mapProp,
+    value: valueProp,
+    getValueLabel = defaultGetValueLabel,
+    ...progressProps
+  } = props;
+
+  const max = isValidMaxNumber(mapProp) ? mapProp : DEFAULT_MAX;
+  const value = isValidValueNumber(valueProp, max) ? valueProp : null;
+  const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined;
+
+  useContextProvider(ProgressContext, { value: value, max: max });
+
+  return (
+    <div
+      aria-valuemax={max}
+      aria-valuemin={0}
+      aria-valuenow={isNumber(value) ? value : undefined}
+      aria-valuetext={valueLabel}
+      role="progressbar"
+      data-state={getProgressState(value, max)}
+      data-value={value ?? undefined}
+      data-max={max}
+      {...progressProps}
+    >
+      <Slot />
+    </div>
+  );
+});
diff --git a/packages/kit-headless/src/components/progress/util.ts b/packages/kit-headless/src/components/progress/util.ts
@@ -0,0 +1,24 @@
+export type ProgressState = 'indeterminate' | 'complete' | 'loading';
+
+export function isNumber(value: any): value is number {
+  return typeof value === 'number';
+}
+
+export function isValidMaxNumber(max: any): max is number {
+  return isNumber(max) && !isNaN(max) && max > 0;
+}
+
+export function isValidValueNumber(value: any, max: number): value is number {
+  return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
+}
+
+export function defaultGetValueLabel(value: number, max: number) {
+  return `${Math.round((value / max) * 100)}%`;
+}
+
+export function getProgressState(
+  value: number | undefined | null,
+  maxValue: number,
+): ProgressState {
+  return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading';
+}
diff --git a/packages/kit-headless/src/index.ts b/packages/kit-headless/src/index.ts
@@ -11,6 +11,7 @@ export * from './components/modal';
 export * from './components/drawer';
 export * from './components/navigation-bar/navigation-bar';
 export * from './components/pagination/pagination';
+export * from './components/progress';
 export * from './components/popover';
 export * from './components/rating/rating';
 export * from './components/select';
diff --git a/packages/kit-styled/src/components/progress/progress.tsx b/packages/kit-styled/src/components/progress/progress.tsx
@@ -0,0 +1,16 @@
+import { cn } from '@qwik-ui/utils';
+import * as ProgressPrimitive from '@qwik-ui/headless';
+import { PropsOf, component$ } from '@builder.io/qwik';
+
+export const Progress = component$<PropsOf<typeof ProgressPrimitive.Root>>((props) => {
+  return (
+    <ProgressPrimitive.Root
+      class={cn('bg-secondary relative h-4 w-full overflow-hidden rounded', props?.class)}
+    >
+      <ProgressPrimitive.Indicator
+        class="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});
diff --git a/packages/kit-styled/src/index.ts b/packages/kit-styled/src/index.ts
@@ -10,6 +10,7 @@ export * from './components/input/input';
 export * from './components/label/label';
 export * from './components/modal/modal';
 export * from './components/popover/popover';
+export * from './components/progress/progress';
 export * from './components/radio-group/radio-group';
 export * from './components/separator/separator';
 export * from './components/skeleton/skeleton';

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './progress-indicator';`
	`2`	`+export * from './progress';`