feat(component): add new Progress Bar component (#174)

* feat(component): add new  Progress Bar component

fix #129

* feat(components): add new Progress Bar component

* feat(component): add new Progress Bar component - headless

* remove unused import

---------

Co-authored-by: Giorgio Boa <[email protected]>

Author: luisbeqja

apps/website/src/components/menu/menu.tsx

@@ -28,6 +28,10 @@ export const Menu = component$<Props>(({ onClose$ }) => {
     { label: 'Tabs', path: `/docs/${appState.theme.toLowerCase()}/tabs` },
     { label: 'Toggle', path: `/docs/${appState.theme.toLowerCase()}/toggle` },
     { label: 'Tooltip', path: `/docs/${appState.theme.toLowerCase()}/tooltip` },
+    {
+      label: 'Progress',
+      path: `/docs/${appState.theme.toLowerCase()}/progress`,
+    },
   ];
 
   const onChangePage = $(() => {

apps/website/src/routes/docs/daisy/progress/index.tsx

@@ -0,0 +1,51 @@
+import { component$, $, useStylesScoped$ } from '@builder.io/qwik';
+import { Progress } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+  useStylesScoped$(`
+    .panel {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex-wrap: wrap;
+    }`);
+
+  return (
+    <>
+      <h2>This is the documentation for the Progress</h2>
+
+      <div class="flex flex-col gap-8 mt-4">
+        <h2>Basic Example</h2>
+        <div class="panel">
+          <Progress variant="primary" value={10} max={100} class="w-56" />
+          <Progress variant="primary" value={20} max={100} class="w-56" />
+          <Progress variant="primary" value={30} max={100} class="w-56" />
+          <Progress variant="primary" value={40} max={100} class="w-56" />
+          <Progress variant="primary" value={50} max={100} class="w-56" />
+          <Progress variant="primary" value={60} max={100} class="w-56" />
+
+          <h2>secondary color</h2>
+          <Progress variant="secondary" value={50} max={100} class="w-56" />
+
+          <h2>accent color</h2>
+          <Progress variant="accent" value={50} max={100} class="w-56" />
+
+          <h2>success color</h2>
+          <Progress variant="success" value={50} max={100} class="w-56" />
+
+          <h2>info color</h2>
+          <Progress variant="info" value={50} max={100} class="w-56" />
+
+          <h2>warning color</h2>
+          <Progress variant="warning" value={50} max={100} class="w-56" />
+
+          <h2>error color</h2>
+          <Progress variant="error" value={50} max={100} class="w-56" />
+
+          <h2>Indeterminate (no value) </h2>
+          <Progress variant="error" class="w-56" />
+        </div>
+      </div>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/progress/index.tsx

@@ -0,0 +1,30 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Progress } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStylesScoped$(`
+    .panel {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex-wrap: wrap;
+    }`);
+
+  return (
+    <>
+      <h2>This is the documentation for the Progress</h2>
+
+      <div class="flex flex-col gap-8 mt-4">
+        <h2>Basic Example</h2>
+        <div class="panel">
+          <Progress value={10} max={100} class="w-56" />
+          <Progress value={20} max={100} class="w-56" />
+          <Progress value={30} max={100} class="w-56" />
+          <Progress value={40} max={100} class="w-56" />
+          <Progress value={50} max={100} class="w-56" />
+          <Progress value={60} max={100} class="w-56" />
+        </div>
+      </div>
+    </>
+  );
+});

packages/daisy/src/components/progress/daisy.config.ts

@@ -0,0 +1,11 @@
+export const daisyConfig = {
+  variants: {
+    accent: 'progress-accent',
+    error: 'progress-error',
+    info: 'progress-info',
+    primary: 'progress-primary',
+    secondary: 'progress-secondary',
+    success: 'progress-success',
+    warning: 'progress-warning',
+  },
+};

packages/daisy/src/components/progress/progress.tsx

@@ -0,0 +1,44 @@
+import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
+import { Progress as HeadlessProgress } from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+import { daisyConfig } from './daisy.config';
+
+export type HTMLProgressProps = QwikIntrinsicElements['progress'];
+
+export type DaisyProgressProps = {
+  variant?: DaisyProgressVariants;
+  value?: number;
+  max?: number;
+};
+
+export type DaisyProgressVariants =
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error';
+
+export type ProgressProps = HTMLProgressProps & DaisyProgressProps;
+
+export const Progress = component$((props: ProgressProps) => {
+  const {
+    variant = 'primary',
+    class: classNames,
+    value = 0,
+    max = 100,
+    ...rest
+  } = props;
+
+  const { variants } = daisyConfig;
+
+  return (
+    <HeadlessProgress
+      {...rest}
+      value={value}
+      max={max}
+      class={clsq('progress', variants[variant], classNames)}
+    ></HeadlessProgress>
+  );
+});

packages/daisy/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/button/button';
+export * from './components/progress/progress';
 export * from './components/button-group/button-group';
 export * from './components/card';
 export * from './components/collapse/collapse';

packages/headless/src/components/progress/progress.tsx

@@ -0,0 +1,7 @@
+import { component$, QwikIntrinsicElements } from '@builder.io/qwik';
+
+export type ProgressProps = QwikIntrinsicElements['progress'];
+
+export const Progress = component$((props: ProgressProps) => {
+  return <progress {...props} />;
+});

packages/headless/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/button/button';
+export * from './components/progress/progress';
 export * from './components/button-group/button-group';
 export * from './components/card';
 export * from './components/collapse/collapse';