@youcan/celeste 0.6.32 → 0.6.34

package/src/components/progress/progress-bar.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(
+  defineProps<
+    ProgressRootProps & {
+      class?: HTMLAttributes['class'];
+      color?: 'blue' | 'red' | 'orange' | 'green' | 'primary';
+      title?: string;
+      layout?: 'default' | 'no-description' | 'inline' | 'bare';
+    }
+  >(),
+  {
+    modelValue: 0,
+    color: 'primary',
+    layout: 'bare',
+    max: 100,
+  },
+);
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const progress = computed(() => {
+  if (props.max === 0)
+    return 0;
+
+  const value = Math.min(Math.max(props.modelValue ?? 0, 0), props.max);
+
+  return Math.round((value / props.max) * 100);
+});
+
+const progressIndicator = computed(() => {
+  return 100 - (props.modelValue ?? 0) / props.max * 100;
+});
+</script>
+
+<template>
+  <div class="celeste-progress-bar-wrapper" :data-layout="layout">
+    <div v-if="layout !== 'bare'" class="celeste-progress-bar-label">
+      <span
+        v-if="props.title && layout !== 'inline'"
+        class="celeste-progress-bar-label-title"
+      >
+        {{ title }}
+      </span>
+      <span
+        class="celeste-progress-bar-label"
+      >
+        <slot name="label">
+          {{ progress }}%
+        </slot>
+      </span>
+    </div>
+
+    <ProgressRoot
+      v-bind="delegatedProps"
+      :class="
+        clsx(
+          'celeste-progress-bar',
+          props.class,
+        )
+      "
+    >
+      <ProgressIndicator
+        class="celeste-progress-bar-indicator"
+        :data-color="color"
+      />
+    </ProgressRoot>
+
+    <div v-if="$slots.description && layout === 'default'" class="celeste-progress-bar-description">
+      <slot name="description" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.celeste-progress-bar-wrapper {
+  --bar-height: 6px;
+
+  display: flex;
+  width: 100%;
+  gap: var(--spacing-6);
+
+  .celeste-progress-bar {
+    height: var(--bar-height);
+    overflow: hidden;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-soft-200);
+  }
+
+  .celeste-progress-bar-indicator {
+    --progress: v-bind('progressIndicator');
+
+    width: 100%;
+    height: 100%;
+    transform: translateX(calc(var(--progress) * -1%));
+    border-radius: var(--radius-full);
+    background: var(--color-primary-base);
+
+    :dir(rtl) & {
+      transform: translateX(calc(var(--progress) * 1%));
+    }
+
+    &[data-color='orange'] {
+      background: var(--color-state-warning-base);
+    }
+
+    &[data-color='red'] {
+      background: var(--color-state-error-base);
+    }
+
+    &[data-color='blue'] {
+      background: var(--color-state-information-base);
+    }
+
+    &[data-color='green'] {
+      background: var(--color-state-success-base);
+    }
+  }
+
+  .celeste-progress-bar-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-6);
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-sm);
+
+    &.celeste-progress-bar-title {
+      color: var(--color-text-strong-950);
+      font: var(--label-sm);
+    }
+  }
+
+  .celeste-progress-bar-description {
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-xs);
+  }
+
+  &[data-layout='default'],
+  &[data-layout='no-description'] {
+    flex-direction: column;
+
+    &:deep(.celeste-progress-bar) {
+      width: 100%;
+    }
+  }
+
+  &[data-layout='inline'],
+  &[data-layout='bare'] {
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: var(--spacing-8);
+
+    &:deep(.celeste-progress-bar) {
+      flex: 1;
+    }
+  }
+}
+</style>

package/src/components/progress/progress-circle.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'radix-vue';
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<
+    ProgressRootProps & {
+      class?: HTMLAttributes['class'];
+      size?: 80 | 72 | 64 | 56 | 48;
+    }
+  >(),
+  {
+    modelValue: 0,
+    size: 80,
+    max: 100,
+  },
+);
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const STROKE_WIDTH = 6.4;
+const radius = computed(() => (props.size - STROKE_WIDTH) / 2);
+const circumference = computed(() => 2 * Math.PI * radius.value);
+
+const progress = computed(() => {
+  if (props.max === 0)
+    return 0;
+
+  const value = Math.min(Math.max(props.modelValue ?? 0, 0), props.max);
+
+  return Math.round((value / props.max) * 100);
+});
+
+const offset = computed(() => {
+  return circumference.value * (1 - progress.value / 100);
+});
+
+const circleSize = computed(() => `${props.size}px`);
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :value="props.modelValue"
+    :class="clsx('celeste-progress-circle', props.class)"
+    as="div"
+  >
+    <ProgressIndicator as-child>
+      <svg
+        class="celeste-progress-circle-svg"
+        :width="props.size"
+        :height="props.size"
+      >
+        <circle
+          class="celeste-progress-circle-track"
+          :cx="props.size / 2"
+          :cy="props.size / 2"
+          :r="radius"
+          :stroke-width="STROKE_WIDTH"
+          fill="transparent"
+        />
+        <circle
+          class="celeste-progress-circle-indicator"
+          :cx="props.size / 2"
+          :cy="props.size / 2"
+          :r="radius"
+          :stroke-width="STROKE_WIDTH"
+          fill="transparent"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="offset"
+        />
+      </svg>
+    </ProgressIndicator>
+    <div
+      v-if="props.size !== 48"
+      class="celeste-progress-circle-label"
+    >
+      <slot>
+        {{ progress }}%
+      </slot>
+    </div>
+  </ProgressRoot>
+</template>
+
+<style scoped lang="scss">
+.celeste-progress-circle {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: v-bind('circleSize');
+  height: v-bind('circleSize');
+}
+
+.celeste-progress-circle-svg {
+  transform: rotate(-90deg);
+}
+
+.celeste-progress-circle-track {
+  stroke: var(--color-bg-soft-200);
+}
+
+.celeste-progress-circle-indicator {
+  transition: stroke-dashoffset 0.3s ease;
+  stroke: var(--color-primary-base);
+}
+
+.celeste-progress-circle-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-strong-950);
+  font: var(--label-sm);
+  text-align: center;
+  pointer-events: none;
+  user-select: none;
+}
+</style>

package/src/components/progress/stories/progress-bar.stories.ts

@@ -0,0 +1,328 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import ProgressBar from '../progress-bar.vue';
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'Components/Progress/Progress Bar',
+  component: ProgressBar,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'blue', 'red', 'orange', 'green'],
+    },
+    layout: {
+      control: { type: 'select' },
+      options: ['default', 'no-description', 'inline', 'bare'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProgressBar>;
+
+export const Default: Story = {
+  args: {
+    layout: 'default',
+    title: 'Data Storage',
+    modelValue: 60,
+    color: 'primary',
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+         <template #description>
+            Upgrade to unlock unlimited data storage.
+         </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const ZeroProgress: Story = {
+  args: {
+    layout: 'default',
+    title: 'Download Progress',
+    modelValue: 0,
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+        <template #description>
+          Waiting to start download...
+        </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const FullProgress: Story = {
+  args: {
+    layout: 'default',
+    title: 'Upload Complete',
+    modelValue: 100,
+    color: 'green',
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+        <template #description>
+          All files have been uploaded successfully.
+        </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const WithCustomMax: Story = {
+  name: 'With Custom Max Value',
+  args: {
+    layout: 'default',
+    title: 'Memory Usage',
+    modelValue: 6144,
+    max: 8192,
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+        <template #label>
+          {{ args.modelValue }}MB / {{ args.max }}MB
+        </template>
+        <template #description>
+          System memory utilization is within normal range.
+        </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const DifferentLayouts: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px;">
+        <div>
+          <h3 style="margin-bottom: 16px; font: var(--label-md);">Default Layout</h3>
+          <ProgressBar layout="default" title="Project Progress" :modelValue="75">
+            <template #description>
+              3 of 4 milestones completed
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h3 style="margin-bottom: 16px; font: var(--label-md);">No Description Layout</h3>
+          <ProgressBar layout="no-description" title="Sync Status" :modelValue="45" />
+        </div>
+        
+        <div>
+          <h3 style="margin-bottom: 16px; font: var(--label-md);">Inline Layout</h3>
+          <ProgressBar layout="inline" :modelValue="80" />
+        </div>
+        
+        <div>
+          <h3 style="margin-bottom: 16px; font: var(--label-md);">Bare Layout</h3>
+          <ProgressBar layout="bare" :modelValue="30" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const DifferentColors: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Primary</p>
+          <ProgressBar layout="inline" color="primary" :modelValue="60" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Blue (Information)</p>
+          <ProgressBar layout="inline" color="blue" :modelValue="40" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Green (Success)</p>
+          <ProgressBar layout="inline" color="green" :modelValue="85" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Orange (Warning)</p>
+          <ProgressBar layout="inline" color="orange" :modelValue="25" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Red (Error)</p>
+          <ProgressBar layout="inline" color="red" :modelValue="15" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithCustomLabel: Story = {
+  name: 'With Custom Label (Slot)',
+  args: {
+    layout: 'default',
+    title: 'File Transfer',
+    modelValue: 1024,
+    max: 2048,
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+        <template #label>
+          {{ Math.round(args.modelValue / 1024 * 10) / 10 }}GB of {{ args.max / 1024 }}GB
+        </template>
+        <template #description>
+          Transfer speed: 25 MB/s • Time remaining: 2 minutes
+        </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const InlineWithTitle: Story = {
+  name: 'Inline Layout with Title',
+  args: {
+    layout: 'inline',
+    title: 'CPU Usage',
+    modelValue: 68,
+    color: 'orange',
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args" />
+    `,
+  }),
+};
+
+export const LoadingStates: Story = {
+  name: 'Loading States Example',
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <h4 style="margin-bottom: 12px; font: var(--label-sm);">Initializing</h4>
+          <ProgressBar layout="default" title="Setup" :modelValue="5" color="blue">
+            <template #description>
+              Preparing environment...
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h4 style="margin-bottom: 12px; font: var(--label-sm);">In Progress</h4>
+          <ProgressBar layout="default" title="Installation" :modelValue="47" color="primary">
+            <template #description>
+              Installing dependencies (23 of 49)
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h4 style="margin-bottom: 12px; font: var(--label-sm);">Nearly Complete</h4>
+          <ProgressBar layout="default" title="Finalizing" :modelValue="92" color="green">
+            <template #description>
+              Running final checks...
+            </template>
+          </ProgressBar>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const EdgeCases: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Over Max Value</p>
+          <ProgressBar layout="inline" :modelValue="150" :max="100" color="red" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Negative Value</p>
+          <ProgressBar layout="inline" :modelValue="-20" color="red" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Max is Zero</p>
+          <ProgressBar layout="inline" :modelValue="0" :max="0" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Very Small Progress</p>
+          <ProgressBar layout="inline" :modelValue="0.5" :max="100" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const RealWorldExamples: Story = {
+  name: 'Real World Use Cases',
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 400px;">
+        <div>
+          <h4 style="margin-bottom: 16px; font: var(--label-md);">Storage Quota</h4>
+          <ProgressBar layout="default" title="Cloud Storage" :modelValue="1847" :max="2000" color="orange">
+            <template #label>
+              1.8GB of 2GB used
+            </template>
+            <template #description>
+              You're running low on storage space. Consider upgrading your plan.
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h4 style="margin-bottom: 16px; font: var(--label-md);">Profile Completion</h4>
+          <ProgressBar layout="default" title="Profile Setup" :modelValue="6" :max="8" color="blue">
+            <template #label>
+              6 of 8 steps completed
+            </template>
+            <template #description>
+              Complete your profile to unlock all features.
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h4 style="margin-bottom: 16px; font: var(--label-md);">System Health</h4>
+          <ProgressBar layout="no-description" title="CPU Usage" :modelValue="23" color="green" />
+          <div style="margin-top: 8px;">
+            <ProgressBar layout="no-description" title="Memory" :modelValue="67" color="primary" />
+          </div>
+          <div style="margin-top: 8px;">
+            <ProgressBar layout="no-description" title="Disk Space" :modelValue="89" color="orange" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};